INICIO FORO
Regresar   Foro Coches > Zona General > Empleo / Emprendimiento


 

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

 
Respuesta

 
Herramientas
Viejo 17-feb-2020, 13:35   #421
ervadel
Forocochia07
 
Avatar de ervadel
 
Oct 2008 | 954 Mens.
Lugar: Nevermind
Cita:
Originalmente Escrito por txabolie Ver Mensaje
Que es un brasas. No dudo que el tío sepa lo que hace. Pero que en udemy hay muchos otros igual o más interesantes que ese tío. Se ha dado muy buena publicidad y por eso le conoce todo el mundo.

Opino igual y solo he visto algunos vídeos suyos en Youtube. Se lo ha montado bien para conseguir que la gente acabe comprando sus cursos.
ervadel está desconectado   Responder Con Cita


Viejo 17-feb-2020, 16:24   #422
kidcudi
ForoCoches: Miembro
 
Avatar de kidcudi
 
Sep 2014 | 424 Mens.
Lugar: un lugar llamado mundo
Me quedo por la plataforma! Soy Frontend con poca experiencia, trabajo con React aunque ahora me meten en un proyecto con Vue y meteré la cabeza en este

Cita:
Originalmente Escrito por shawx Ver Mensaje
Buenas shur!

Porqué Redux si dices que vas a usar el context de React ? Hoy día se pueden hacer cosas guapas con los hooks, y tener un estado similar a Redux solamente con context, te animo a que te implementes el estado con el context de React y así tienes menos dependencias!

Saludos!
+1 al uso solo de context, creo que a día de hoy Redux va a quedar relegado a aplicaciones muy muy grandes

Cita:
Originalmente Escrito por M408K Ver Mensaje
Pregunta de alguien que está empezando, que is parecen los cursos de udemy de un youtuber se llama Victor robles web, cuestan 10 euros que hay ofertas cada poco y acceso de por vida
No he visto ningun tutorial suyo pero solo por lo poco que ví de él en YouTube no lo puedo recomendar, mucho ruido y pocas nueces creo yo...

Última edición por kidcudi fecha: 17-feb-2020 a las 16:26.
kidcudi está desconectado   Responder Con Cita
Viejo 17-feb-2020, 17:15   #423
shawx
ForoCoches: Usuario
 
Avatar de shawx
 
Ene 2015 | 116 Mens.
Lugar: El mundo

308

Cita:
Originalmente Escrito por drbarrio Ver Mensaje
Pero el context de react no te permite utilizar Middlewares como Saga o Thunk. (por favor, decidme si me equivoco).
Dicho eso, quizás ni siquiera necesites usar ninguno de esos Middlewares, en cuyo caso, yo utilizaría context en lugar de redux aunque la ventaja de redux es que es muy demandado y aporta gran valor a tu proyecto si luego quieres mostrarlo para buscar curro.

En cuanto a otras librerías de componentes como material-ui, yo solo la usaría si tengo que utilizar componentes complejos de realizar. Pero si vas a utilizar botones, inputs y demás... No lo utilizaría. En cuanto a ésto, me gustaría conocer vuestra opinión acerca de material-ui ya que la he utilizado poco y me ha parecido algo compleja a la hora de aplicar estilos. @73nko, ¿Cuándo recomiendas usarla? ¿Alguna guía para sacarle el máximo partido o es suficiente con la documentación oficial ?
Es cierto el tema del middleware, aunque te puedes montar algo parecido pero de una manera más casera
shawx está desconectado   Responder Con Cita
Viejo 17-feb-2020, 17:26   #424
AnimatiCSS
Animaciones y tips de CSS
 
Avatar de AnimatiCSS
 
Oct 2019 | 74 Mens.
Cita:
Originalmente Escrito por ervadel Ver Mensaje
Para los que usáis BEM y tenéis más experiencia. ¿Lo usáis al 100% o hay excepciones? En mi proyecto lo estamos usando y me he encontrado con casos en que hay elementos que realmente no forman parte del componente en sí y que tal vez tengan más sentido el tener clases helper para aplicar los estilos.

Tal que

Código:
<div class="flex flex--center">...</div>
Ya no digo que tengan que ser clases del tipo Bootstrap, Tailwind, etc... porque al final se acaban con miles de clases y una estructura horrible.

Y otra pregunta que me acaba de surgir. ¿Veis bien que haya clases de componentes genéricos en los que los estilos se repiten por varios sitios y así evitar esa duplicidad?

Hola shurmano! @ervadel


Si, BEM se queda algo corto.


Por ello, existe BEMIT CSS.


BEMIT es BEM pero llevado un paso más allá.


BEMIT aún tiene bloques, elementos y modificadores.
Pero se le añaden prefijos y sufijos para organizar mejor tu código por capas.



En esta metodología tienes esas clases "helpers" llamadas objetos, que es una capa en tu jerarquía de código CSS (y también tienes utilidades, otra capa pero más específica)


Por ejemplo, para alinear un texto a la derecha podrías tener esta clase .o-text-align--right.


También podrías tener clases para columnas. Por ejemplo esto:
[email protected]


O de objeto, te dice que es una clase "helper" y que se reutiliza en cualquier lugar, te avisa que tengas cuidado en modificar sus valores, ya que podría afectar a muchos lugares diferentes.
@md quiere decir que ese estilo se está aplicando solo en tu media Query de @md, por ejemplo de 1100px a infinito.

Los estilos de los componentes los tendrás en clases c-.
C de componente.
Una capa posterior a los objetos.
Los componentes pueden machacar los estilos genéricos de los objetos, ya que están escritos después en tu organización de CSS.


Además, todo se mantiene sin selectores anidados (de entrada) así que es fácil mantener tu código limpio.



En mi canal de Youtube puedes verlo, todo mi código es con esta metodología.
Predico con el ejemplo. Es útil y cómodo. Creo que si sabes BEM esto te va a gustar.



Además he hecho un curso en udemy donde la explico al detalle, si te interesa te paso link por MP!


Pasate por mi canal y si te convence la metodología, pruébalo! El canal está en el primer mensaje de este mismo hilo!


Cualquier cosa comentamos. Un saludo!

Última edición por AnimatiCSS fecha: 17-feb-2020 a las 17:40.
AnimatiCSS está desconectado   Responder Con Cita


Viejo 17-feb-2020, 18:40   #425
ervadel
Forocochia07
 
Avatar de ervadel
 
Oct 2008 | 954 Mens.
Lugar: Nevermind
Corrígeme si me equivoco, pero ¿eso no acaba creando una cantidad de clases muy grande, realmente tiene sentido?


Partiendo del caso que he comentado en el que la estructura y los estilos son idénticos, ¿por qué no llamar al componente block? De esta forma no es necesario tener prefijos.


Al no haber usado BEMIT no veo los beneficios que puede tener. En el caso que comentas de tener una clase para alinear texto, ¿por qué no usar text--left o text--right, por ejemplo? Aunque en este caso text no tendría ningún efecto sobre el texto porque no se aplicarían cambios sobre el texto.


¿BEMIT previene el uso de falsos bloques que solo aplican modificadores?




Otra cosa acerca de BEM, ¿no es un poco de que huele mal cuando el bloque se define con tres palabras? Para mi eso ya tiene pinta de que debería ser un segundo componete.



Por ejemplo, tener un bloque user, y crear por ahí un user-block-data o algo por el estilo.
ervadel está desconectado   Responder Con Cita
Viejo 17-feb-2020, 19:10   #426
AnimatiCSS
Animaciones y tips de CSS
 
Avatar de AnimatiCSS
 
Oct 2019 | 74 Mens.
Cita:
Originalmente Escrito por ervadel Ver Mensaje
Corrígeme si me equivoco, pero ¿eso no acaba creando una cantidad de clases muy grande, realmente tiene sentido?


Partiendo del caso que he comentado en el que la estructura y los estilos son idénticos, ¿por qué no llamar al componente block? De esta forma no es necesario tener prefijos.


Al no haber usado BEMIT no veo los beneficios que puede tener. En el caso que comentas de tener una clase para alinear texto, ¿por qué no usar text--left o text--right, por ejemplo? Aunque en este caso text no tendría ningún efecto sobre el texto porque no se aplicarían cambios sobre el texto.


¿BEMIT previene el uso de falsos bloques que solo aplican modificadores?




Otra cosa acerca de BEM, ¿no es un poco de que huele mal cuando el bloque se define con tres palabras? Para mi eso ya tiene pinta de que debería ser un segundo componete.



Por ejemplo, tener un bloque user, y crear por ahí un user-block-data o algo por el estilo.

Paso a contestarte shur:



Tendrás tantas variantes como tú quieras tener. Es decir, clases extra de "helpers".
BEMIT es totalmente flexible.
Quieres tener muchas clases helpers y seguir un principio de desarrollo basado en atomic CSS? Podrías.


Tendrías que generarlas.


Por ejemplo como te había dicho, para alinear textos.
O quizás una para tratar las fuentes.
Una para el típico container.


Que ventaja te da usar prefijos? Para empezar si es un objeto sabrás su naturaleza global, puede ser reutilizado en diferentes lugares.


Pero es que, BEMIT no solo es la capa de objetos, también tienes prefijos de estado (is-active por ejemplo), prefijos para JavaScript (js-) donde sabes que tu JavaScript está atacando ese nodo de alguna manera, una buena práctica para tener estilos y funcionalidad separados.



Aunque por ejemplo yo, utilizo algunos helpers concretos.
No género clases que no voy a usar.


Bootstrap, por ejemplo, te da clases helpers (bastantes) y tú las utilizas si quieres. Si que es verdad que también puedes decirle cuales incluir y cuáles no.



Ahora bien, BEMIT es mejor, porque? Por ejemplo te da más información. Una clase o- sabes que es menos específica (tiene menos fuerza de selector) que un componente.


BEMIT además te organiza los archivos por capas (carpetas concretas).


Dentro de un año, en una web que haya usado BEMIT, veo esta clase al inspeccionar el navegador ( sin ni siquiera entrar a los archivos ):


c-form
Sé que está su estilo definido en la carpeta components/c-form.scss


Aunque pase un año, en menos de dos segundos puedes saber dónde está localizado todo su estilo de ese nodo.


O quizás ves está clase: o-color--a por ejemplo
Pues su estilo estará en objects/o-color.scss


Pero es que eso solo es una de las características que te ofrece.


El prefijo con clase o, te dice que esa clase se reutiliza en más sitios, no solo en un componente.

Por lo que es más peligroso de editar ( puede dar problemas en cualquier otro lugar de tu web )






En mi vídeo de presentación del curso explico todo esto detalladamente, míratelo y si quieres seguimos comentando.

Canal de Youtube de AnimatiCSS
Animaciones y tips avanzados de CSS (y JavaScript!)
AnimatiCSS está desconectado   Responder Con Cita
Viejo 17-feb-2020, 19:18   #427
karl90
ForoCoches: Miembro
 
Avatar de karl90
 
Ago 2007 | 7.745 Mens.
Lugar: Madrid

Kia ceed 1.6 CVVT 126

@AnimatiCSS me interesa mucho tu opinión como pro en css, sass etc de styled components
karl90 está desconectado   Responder Con Cita
Viejo 17-feb-2020, 19:22   #428
AnimatiCSS
Animaciones y tips de CSS
 
Avatar de AnimatiCSS
 
Oct 2019 | 74 Mens.
Cita:
Originalmente Escrito por karl90 Ver Mensaje
@AnimatiCSS me interesa mucho tu opinión como pro en css, sass etc de styled components
Hola shurmano! Claro pregúntame y responderé de la mejor forma que pueda!
AnimatiCSS está desconectado   Responder Con Cita
Viejo 17-feb-2020, 19:24   #429
karl90
ForoCoches: Miembro
 
Avatar de karl90
 
Ago 2007 | 7.745 Mens.
Lugar: Madrid

Kia ceed 1.6 CVVT 126

Cita:
Originalmente Escrito por AnimatiCSS Ver Mensaje
Hola shurmano! Claro pregúntame y responderé de la mejor forma que pueda!
Me refiero a en general. Cada vez más empresas están apostando por styled components en lugar del "tradicional" sass.

Qué ventajas le ves a cada aproximación si fueras a empezar un proyecto de 0?
Por ejemplo Cabify, por lo que sé, ya trabajan con css in js.

Saludos!
karl90 está desconectado   Responder Con Cita
Viejo 17-feb-2020, 19:40   #430
kidcudi
ForoCoches: Miembro
 
Avatar de kidcudi
 
Sep 2014 | 424 Mens.
Lugar: un lugar llamado mundo
Y ya que se saca el tema de css, alguno por aquí que le de Tailwind?
kidcudi está desconectado   Responder Con Cita
Viejo 17-feb-2020, 19:59   #431
AnimatiCSS
Animaciones y tips de CSS
 
Avatar de AnimatiCSS
 
Oct 2019 | 74 Mens.
Cita:
Originalmente Escrito por karl90 Ver Mensaje
Me refiero a en general. Cada vez más empresas están apostando por styled components en lugar del "tradicional" sass.

Qué ventajas le ves a cada aproximación si fueras a empezar un proyecto de 0?
Por ejemplo Cabify, por lo que sé, ya trabajan con css in js.

Saludos!
Perdona no había entendido bien antes tu pregunta!

Vale te comento.

Yo he usado styled components, pero poco (en un proyecto que hice con React recientemente).

La verdad, que no soy un experto con styled components, pero te comentaré con la experiencia que tengo:

Tiene potencial efectivamente, pero quizás por mi manera de enfocar los proyectos, prefiero no utilizarlo.

Escribir CSS-in-JS no me agrada, prefiero tener un archivo para los estilos con scss del propio componente.

Sí, es cierto que styled components te da control sobre que estilos pintar en función de variables.

Pero también está la opción de poner una clase de modificador (hablando de BEM por ejemplo) que edite los estilos de la clase "default".

Quiero decir, podrías usar la librería classnames para eso por ejemplo:
classnames js

Y con ello podrías jugar también con las clases que acaba teniendo un nodo, la cual tiene los estilos en el scss, separado.
Entonces machacar los estilos por defecto gracias a la clase que modifica esos estilos. Jugando bien la característica de la cascada de CSS.

Por ejemplo
Código:
.c-form{ color: black; }
.c-form--alt{ color: white; }
Y en el código JS haría una comprobación (la que fuese necesaria) para saber si debo añadir la clase c-form--alt al nodo, para que sus estilos sean diferentes a los por defecto.

Además, tengo entendido que styled components te genera clases con nombres con hash, que no se repiten nunca (como si les añadiera un id especial en cada compilación al final de los nombres de tus clases).
Esto te quitaría los problemas de no pisar un estilo de una clase con otro, ya que tus clases serán locales y únicas para cada componente.

Pero esto no me acaba de gustar, aunque todo es probarlo y contrastarlo.

Aún así, es algo muy potente, no estoy desmereciéndolo. Pero, dado mi gusto personal y donde me siento más cómodo, prefiero enfocarlo como te dije.

Al final lo importante es utilizar lo que sea más cómodo para ti.
Yo prefiero separar CSS del JS.

Llámame romántico si quieres
AnimatiCSS está desconectado   Responder Con Cita
Viejo 17-feb-2020, 20:22   #432
karl90
ForoCoches: Miembro
 
Avatar de karl90
 
Ago 2007 | 7.745 Mens.
Lugar: Madrid

Kia ceed 1.6 CVVT 126

Cita:
Originalmente Escrito por AnimatiCSS Ver Mensaje
Perdona no había entendido bien antes tu pregunta!

Vale te comento.

Yo he usado styled components, pero poco (en un proyecto que hice con React recientemente).

La verdad, que no soy un experto con styled components, pero te comentaré con la experiencia que tengo:

Tiene potencial efectivamente, pero quizás por mi manera de enfocar los proyectos, prefiero no utilizarlo.

Escribir CSS-in-JS no me agrada, prefiero tener un archivo para los estilos con scss del propio componente.

Sí, es cierto que styled components te da control sobre que estilos pintar en función de variables.

Pero también está la opción de poner una clase de modificador (hablando de BEM por ejemplo) que edite los estilos de la clase "default".

Quiero decir, podrías usar la librería classnames para eso por ejemplo:
classnames js

Y con ello podrías jugar también con las clases que acaba teniendo un nodo, la cual tiene los estilos en el scss, separado.
Entonces machacar los estilos por defecto gracias a la clase que modifica esos estilos. Jugando bien la característica de la cascada de CSS.

Por ejemplo
Código:
.c-form{ color: black; }
.c-form--alt{ color: white; }
Y en el código JS haría una comprobación (la que fuese necesaria) para saber si debo añadir la clase c-form--alt al nodo, para que sus estilos sean diferentes a los por defecto.

Además, tengo entendido que styled components te genera clases con nombres con hash, que no se repiten nunca (como si les añadiera un id especial en cada compilación al final de los nombres de tus clases).
Esto te quitaría los problemas de no pisar un estilo de una clase con otro, ya que tus clases serán locales y únicas para cada componente.

Pero esto no me acaba de gustar, aunque todo es probarlo y contrastarlo.

Aún así, es algo muy potente, no estoy desmereciéndolo. Pero, dado mi gusto personal y donde me siento más cómodo, prefiero enfocarlo como te dije.

Al final lo importante es utilizar lo que sea más cómodo para ti.
Yo prefiero separar CSS del JS.

Llámame romántico si quieres
Gracias por tu opinión, shur!!
Opinas igual que la maquetadora de mi equipo 😂
karl90 está desconectado   Responder Con Cita


Viejo 17-feb-2020, 20:47   #433
HarryCallaghan
ForoCoches: Miembro
 
Avatar de HarryCallaghan
 
Jul 2008 | 255 Mens.
¿Le habéis echado un vistazo al curso de Javascript por email de Dan Abramov? Todavía no sé si me gusta mucho o no, pero desde luego tiene una visión de lo más original.
HarryCallaghan está desconectado   Responder Con Cita
Viejo 17-feb-2020, 20:50   #434
karl90
ForoCoches: Miembro
 
Avatar de karl90
 
Ago 2007 | 7.745 Mens.
Lugar: Madrid

Kia ceed 1.6 CVVT 126

Cita:
Originalmente Escrito por HarryCallaghan Ver Mensaje
¿Le habéis echado un vistazo al curso de Javascript por email de Dan Abramov? Todavía no sé si me gusta mucho o no, pero desde luego tiene una visión de lo más original.
Yo he visto las dos primeras lecciones. Me mola cómo lo enfoca.
karl90 está desconectado   Responder Con Cita
Viejo 17-feb-2020, 20:53   #435
HarryCallaghan
ForoCoches: Miembro
 
Avatar de HarryCallaghan
 
Jul 2008 | 255 Mens.
Cita:
Originalmente Escrito por karl90 Ver Mensaje
Yo he visto las dos primeras lecciones. Me mola cómo lo enfoca.

Sí, la verdad es que como curso completista no sé como quedará, pero para solidificar los conceptos "tricky" desde un punto de vista original tiene buena pinta. Yo me he leído 3 y el tercero es el que más me ha gustado.
HarryCallaghan está desconectado   Responder Con Cita
Viejo 18-feb-2020, 09:39   #436
73nko
ForoCoches: Miembro
 
Avatar de 73nko
 
Jun 2015 | 7.099 Mens.
Cita:
Originalmente Escrito por HarryCallaghan Ver Mensaje
¿Le habéis echado un vistazo al curso de Javascript por email de Dan Abramov? Todavía no sé si me gusta mucho o no, pero desde luego tiene una visión de lo más original.
A mi me está encantando como explica. Me está sirviendo un montón para enseñar yo.
73nko está desconectado   Responder Con Cita
Viejo 18-feb-2020, 12:27   #437
durdi
ForoCoches: Miembro
 
Avatar de durdi
 
Feb 2010 | 2.365 Mens.
Lugar: Al Sur, con la fresquita

Kia Sportage 1.7CRDi 115cv Kawasaki ER-6F

Me quedo por aquí. Terminando DAW y espero poder dedicarme a la parte Front-end.

Segun leo es preferible:
React o Vue antes que Angular
Laravel en PHP



Saludos

El rincón de corredor aficionado y profesional VOL.XL Socio Nº 1977
durdi está desconectado   Responder Con Cita
Viejo 18-feb-2020, 15:42   #438
Konorz
Abrázate a la locura
 
Ene 2009 | 11.348 Mens.
Cita:
Originalmente Escrito por HarryCallaghan Ver Mensaje
¿Le habéis echado un vistazo al curso de Javascript por email de Dan Abramov? Todavía no sé si me gusta mucho o no, pero desde luego tiene una visión de lo más original.
¿Dónde se encuentra?
Konorz está desconectado   Responder Con Cita
Viejo 18-feb-2020, 16:16   #439
73nko
ForoCoches: Miembro
 
Avatar de 73nko
 
Jun 2015 | 7.099 Mens.
Cita:
Originalmente Escrito por Konorz Ver Mensaje
¿Dónde se encuentra?
Te apuntas aquí https://justjavascript.com/ y de vez en cuando te manda emails.
73nko está desconectado   Responder Con Cita
Viejo 18-feb-2020, 19:46   #440
ervadel
Forocochia07
 
Avatar de ervadel
 
Oct 2008 | 954 Mens.
Lugar: Nevermind
@AnimatiCSS, creo que me pasaré unos días leyendo cosas de ITCSS y BEMIT porque también al no haber usado esta forma de estructurar los estilos no termino de verlo con claridad.


A ver si entre esta semana y la que viene me quedo un poco más claro y le veo sentido, así tal vez hasta pueda plantear usarlo en el proyecto en el que estoy ahora.




También he estado viendo el curso de SMACCS en Frontend Masters y no termina de convencerme, tampoco parece que su uso esté muy extendido y que tiene más peso BEM que cualquiera de las otras alternativas.
ervadel está desconectado   Responder Con Cita
Viejo 18-feb-2020, 21:14   #441
magregor
ForoCoches: Usuario
 
Abr 2017 | 36 Mens.
Cita:
Originalmente Escrito por 73nko Ver Mensaje
A mi me está encantando como explica. Me está sirviendo un montón para enseñar yo.
Me ha picado la curiosidad, me acabo de apuntar.

Muchas gracias!!
magregor está desconectado   Responder Con Cita
Viejo 18-feb-2020, 23:16   #442
Powerstrong
ForoCoches: Miembro
 
Dic 2018 | 963 Mens.
Lugar: Madrid

Opel Astra K

Pillo sitio fullstack

Aunk soy más de back
Powerstrong está desconectado   Responder Con Cita
Viejo 18-feb-2020, 23:32   #443
davidfesteban
ForoCoches: Miembro
 
Oct 2019 | 379 Mens.
Lugar: Málaga

Kia Stonic

Cita:
Originalmente Escrito por 73nko Ver Mensaje

Bienvenidos a la plataforma de desarrollo Frontend de forocoches! Esta plataforma está dedicada al desarrollo Frontend en general, así como diferentes frameworks, librerías y herramientas involucradas en el desarrollo front moderno.

¿Qué es un Frontend Developer?

Según la wikipedia:

El desarrollo web front-end, también conocido como desarrollo del lado del cliente, es la práctica de producir HTML, CSS y JavaScript para un sitio web o una aplicación web de modo que el usuario pueda verlos e interactuar con ellos directamente. El reto 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, por lo que el desarrollador necesita estar constantemente al tanto de cómo se está desarrollando el campo.

El objetivo de diseñar un sitio es asegurar que cuando los usuarios abren el sitio vean la información en un formato que sea fácil de leer y relevante. Esto se complica aún más por el hecho de que los usuarios ahora utilizan una gran variedad de dispositivos con diferentes tamaños y resoluciones de pantalla, lo que obliga al diseñador a tener en cuenta estos aspectos a la hora de diseñar el sitio. Necesitan asegurarse de que su sitio aparece correctamente en diferentes navegadores (cross-browser), diferentes sistemas operativos (cross-platform) y diferentes dispositivos (cross-device), lo que requiere una cuidadosa planificación por parte del desarrollador.




¿Qué debe conocer un Frontend Developer a día de hoy?

Este es un "learning Path" de lo que conlleva hoy en día el desarrollo frontend:



Distintos títulos o especificaciones de un Frontend Developer:

Desde hace varios años se ha ido abriendo una gran brecha en el espacio de los desarrolladores de front-end entre dos tipos muy diferentes de los denominados desarrolladores de front-end. Por un lado, hay programadores centrados en JavaScript que escriben JavaScript para tiempos de ejecución de front-end que probablemente tengan conocimientos de informática con un historial de desarrollo de software. Es más que probable que vean HTML y CSS como una abstracción (es decir, JSX y CSS en JS). Por otro lado, lo más probable es que tenga desarrolladores sin conocimientos de informática que se centren en HTML, CSS y JavaScript en lo que respecta específicamente a la interfaz de usuario. En 2019, al entrar o tratar de entender el espacio del desarrollador de front-end, sentirá absolutamente esta división. El término desarrollador de front-end está al borde de la falta de sentido sin aclarar las palabras para abordar qué tipo de desarrollador de front-end se está discutiendo.

El título común o más utilizado (es decir, genérico) para un desarrollador de front-end es "desarrollador de front-end" o "ingeniero de front-end". Tenga en cuenta que cualquier trabajo que contenga la palabra "front-end", "client-side", "web UI", "HTML", "CSS", o "JavaScript" normalmente infiere que una persona tiene cierto grado de conocimientos profesionales de HTML, CSS, DOM y JavaScript.


Tecnologías básicas para un Frontend Developer


Las siguientes tecnologías web básicas son empleadas por los desarrolladores de front-end (considere aprenderlas en este orden):
  1. Lenguaje de marcado de hipertexto (también conocido como HTML)
  2. Hojas de Estilo en Cascada (alias CSS)
  3. Localizadores Uniformes de Recursos (también conocidos como URLs)
  4. Protocolo de transferencia de hipertexto (también conocido como HTTP)
  5. Lenguaje de programación JavaScript (también conocido como ECMAScript 262)
  6. Notación de objetos JavaScript (también conocida como JSON)
  7. Modelo de objeto de documento (también conocido como DOM)
  8. APIs de Web (también conocido como HTML5 y amigos o APIs de Navegador)
  9. Pautas de Accesibilidad para el Contenido Web (también conocidas como WCAG) y Aplicaciones Ricas de Internet Accesibles (también conocidas como ARIA)


Principales frameworks utilizados en FrontEnd

React

React es una biblioteca de JavaScript para construir interfaces de usuario, se define por ser:

DECLARATIVO
React te ayuda a crear interfaces de usuario interactivas de forma sencilla. Diseña vistas simples para cada estado en tu aplicación, y React se encargará de actualizar y renderizar de manera eficiente los componentes correctos cuando los datos cambien.
Las vistas declarativas hacen que tu código sea más predecible, por lo tanto, fácil de depurar.

BASADO EN COMPONENTES
Crea componentes encapsulados que manejen su propio estado, y conviértelos en interfaces de usuario complejas.

Ya que la lógica de los componentes está escrita en JavaScript y no en plantillas, puedes pasar datos de forma sencilla a través de tu aplicación y mantener el estado fuera del DOM.

APRENDE UNA VEZ, ESCRÍBELO DONDE SEA
En React no dejamos fuera al resto de tus herramientas tecnológicas, así que podrás desarrollar nuevas características sin necesidad de volver a escribir el código existente.

React puede también renderizar desde el servidor usando Node, así como potencializar aplicaciones móviles usando React Native.


Vue JS

Vue (pronunciado /vjuː/, como view) es un framework progresivo para construir interfaces de usuario. A diferencia de otros frameworks monolíticos, Vue está diseñado desde cero para ser adoptado de forma incremental. La biblioteca principal se centra únicamente en la capa de vista, y es fácil de recoger e integrar con otras bibliotecas o proyectos existentes. Por otro lado, Vue también es perfectamente capaz de alimentar sofisticadas aplicaciones de una sola página cuando se utiliza en combinación con herramientas modernas y bibliotecas de soporte.



Angular

SE DESARROLLAN EN TODAS LAS PLATAFORMAS
Con Angular puedes crear y reutilizar el código en aplicaciones para web, web móvil, móvil nativo y escritorio nativo.

VELOCIDAD Y RENDIMIENTO
Logre la máxima velocidad posible en la Plataforma Web hoy mismo, y llévela más lejos, a través de Web Workers y el renderizado desde el lado del servidor.

Angular le permite controlar la escalabilidad. Cumpla con los enormes requisitos de datos mediante la creación de modelos de datos en RxJS, Immutable.js u otro modelo de empuje.

HERRAMIENTA INCREÍBLE
Cree funciones rápidamente con plantillas sencillas y declarativas. Amplíe el lenguaje de la plantilla con sus propios componentes y utilice una amplia gama de componentes existentes. Obtenga ayuda y comentarios inmediatos específicos de Angular con casi todos los IDE y editores. Todo esto se combina para que puedas concentrarte en crear aplicaciones increíbles en lugar de intentar que el código funcione.



Dudas y Preguntas y Aportaciones

Dejo un espacio para recoger y resolver dudas de foreros y así complementar la información de arriba


Webs de cursos o cómo aprender Frontend

Aquí van algunas webs o recursos que encuentro interesantes para aprender Frontend de forma autodidacta:

Frontend Masters: Es de pago, aprox 40€ mensuales, pero para mi es la mejor web de cursos online, tanto por el formato de los cursos como los profesores, que son de lo mejorcito del mundo.

Egghead: Tiene varios cursos gratuitos y una gran cantidad de cursos por suscripción mensual. Es genial para introducirte en algunos de los frameworks principales y librerías. En mi opinión se queda siempre en lo superficial, por lo que si ya eres experto en algo, puede resultar poco útil, pero es genial para una primera aproximación a una tecnología concreta.

You don't know JS: Colección de libros sobre JavaScript. En mi opinión de lo mejor que se ha escrito para aprender el lenguaje. Están de forma gratuíta en la web.


Front-End 2019 handbook: Libro con una serie de introducciones y recopilación de conocimientos necesarios para ser un Frontend Developer en 2019. Mucha de la información de este post está copiada de ahí y te puede ser súper útil si estás empezando en esto del desarrollo front y no sabes por donde tirar o te ves abrumado con la cantidad de cosas que aprender.

Tylermcginnis.com/: Web de cursos sobre react, redux y ES6. Tiene una suscripción de unos 15€ mensuales. Está sobre todo enfocado a aprender react y, los cursos están bastante actualizados, además de que tienen una comunidad muy activa. Son muy buena opción si tu objetivo es únicamente aprender react. recomendación de @magregor


Free Code Camp: Web gratuíta de cursos interactivos de desarrollo web. Tiene front back y móvil. Es introductoria pero muy completa. De las mejores opciones para adentrarte en el mundo de la programación. Además, ofrece certificados que pueden ser bien valorados por algunas empresas para un puesto junior. En mi opinión esta bien destacar el curso de d3js, es difícil encontrar buenos recursos de aprendizaje para esa librería y ese en concrero es bastante bueno.

Full Stack Open: Web de cursos de desarrollo web. No la conocía, ha sido aportación de @Frosty, pero tiene buena pinta. Por mi parte le estoy echando un ojo al curso de graphql y creo que esta bastante bien lo poco que he visto.


Canales de youtube

Dejo algunos canales de youtube relacionados con el front, sugerencias de @Mocasinero

- Traversy Media
- Dylan Israel
- Chris Hawkes
- Program With Erik
- FalconMasters
- Pildorasinformaticas
- Canal sobre CSS de nuestro shur @AnimatiCSS






Webs de charlas y conferencias

- Awesome talks
- Code talks
- DevTube


Links con guias o recursos útiles

- Guía de CSS Grid
- Guía de CSS FlexBox
- Editor de RegEx en línea
- Comprueba entre dos piezas de código cúal es más óptima
- Explain Shell: introduces un comando y te explica que hace
- CSS transform editor: Generador automático de transforms en css
- Patrones en React
- Charlas de JavaScript que no te puedes perder





Frontends Developers

(Si queréis ser miembros de la plataforma, citadme o mencionadme y contad un poco de vuestra experiencia en Front. )

- @magregor
- @farru0504
- @Khalid-El-Amin
- @manudas
- @Frosty
- @Sr.Ignatius
- @Lluanco
- @Mocasinero
- @Ad_Astra
- @skankhunt42
- @eonden
- @drbarrio
- @paletton
- @Rothfuss
- @TenienteDan
- @Elchachebolu
- @ElCervezas
- @casablanca
- @Rowling
- @Bone
- @HarryCallaghan
- @Konorz
- @AnimatiCSS
- @krayck
- @vs2017
- @cerra
- @Rapso
- @karl90
- @bluedemons
- @ruberw
- @shawx
- @TheFreshApps
- @Nostradonuts
- @goldentop
- @Dr_Serpiente
- @Foxandxss
- @Estremeñu91
- @cavr
- @FIBLIC
- @g4bro


Espero que os sea útil y me encantaría que entre todos podamos nutrir esta plataforma. Intentaré estar de forma activa contestando dudas y preguntas, pero me gustaría que fuera algo que podamos construir entre todos.


Un saludo.
Añádeme. Soy desarrollador Android pero he trabajado algún tiempo en Front web. Sobretodo Bootstrap, Ionic, Cordova, algo de Angular, GWT(pseudo JS con Java) aunque mis comienzos fueron humildes con WordPress + PrestaShop.
davidfesteban está desconectado   Responder Con Cita
Viejo 18-feb-2020, 23:45   #444
danielgcp
Soy programador
 
Avatar de danielgcp
 
Abr 2017 | 99 Mens.
Cojo sitio, licenciado en DAW, trabajando con Angular a día de hoy y con ganas de aprender React además de como hacer aplicaciones PWA y hacer buen uso del CSS y estructuración de paginas webs
danielgcp está desconectado   Responder Con Cita
Viejo 19-feb-2020, 13:58   #445
AnimatiCSS
Animaciones y tips de CSS
 
Avatar de AnimatiCSS
 
Oct 2019 | 74 Mens.
Cita:
Originalmente Escrito por ervadel Ver Mensaje
@AnimatiCSS, creo que me pasaré unos días leyendo cosas de ITCSS y BEMIT porque también al no haber usado esta forma de estructurar los estilos no termino de verlo con claridad.


A ver si entre esta semana y la que viene me quedo un poco más claro y le veo sentido, así tal vez hasta pueda plantear usarlo en el proyecto en el que estoy ahora.




También he estado viendo el curso de SMACCS en Frontend Masters y no termina de convencerme, tampoco parece que su uso esté muy extendido y que tiene más peso BEM que cualquiera de las otras alternativas.

@ervadel


Claro shurmano ningún problema, si no lo ves claro no pasa nada. Cada uno tiene sus gustos y preferencias a la hora de desarrollar.



Pero yo creo que si utilizas BEM, es muy posible que te interese BEMIT, bajo mi opinión personal.


Yo creo que puede ayudarte!


Te envío mp con información para si decides indagar un poco más

Última edición por AnimatiCSS fecha: 19-feb-2020 a las 18:40.
AnimatiCSS está desconectado   Responder Con Cita
Viejo 19-feb-2020, 16:35   #446
Konorz
Abrázate a la locura
 
Ene 2009 | 11.348 Mens.
Cita:
Originalmente Escrito por 73nko Ver Mensaje
Te apuntas aquí https://justjavascript.com/ y de vez en cuando te manda emails.
Apuntado, gracias!
Konorz está desconectado   Responder Con Cita
Viejo 22-feb-2020, 11:06   #447
73nko
ForoCoches: Miembro
 
Avatar de 73nko
 
Jun 2015 | 7.099 Mens.
Muy buenas shures, estaba leyendo ESTE ARTÍCULO de Kent C. Dodds y me ha parecido muy interesante compartirlo por un lado y sobre todo dejar por aquí este estupendo diagrama que nos puede ayudar a decidir donde colocar el estado de nuestros componentes, algo que en ocasiones no es tan trivial como parece:



Espero que os sea útil.
73nko está desconectado   Responder Con Cita
Viejo 22-feb-2020, 12:40   #448
Rothfuss
ForoCoches: Miembro
 
Avatar de Rothfuss
 
Jun 2012 | 4.699 Mens.
Lugar: Del sur
alguien usa haskell?
Rothfuss está desconectado   Responder Con Cita
Viejo 22-feb-2020, 13:43   #449
73nko
ForoCoches: Miembro
 
Avatar de 73nko
 
Jun 2015 | 7.099 Mens.
Cita:
Originalmente Escrito por Rothfuss Ver Mensaje
alguien usa haskell?
Solo en la carrera. Tú lo usas?? Si es así, para qué?? Tengo un montón de curiosidad!
73nko está desconectado   Responder Con Cita
Viejo 22-feb-2020, 17:06   #450
Rothfuss
ForoCoches: Miembro
 
Avatar de Rothfuss
 
Jun 2012 | 4.699 Mens.
Lugar: Del sur
Cita:
Originalmente Escrito por 73nko Ver Mensaje
Solo en la carrera. Tú lo usas?? Si es así, para qué?? Tengo un montón de curiosidad!

Hola, 73nko. No lo uso, y tampoco lo he estudiado. Tambien tengo curiosidad porque he estado viendo ejemplos de codigo en haskell y me parece mas intuitivo por la sintaxis inspirada en notacion matematica. Ademas tiene un aire de misterio que atrae, no te lo voy a negar! Por reddit se mencionan frameworks para backend: scotty (similar a sinatra en rails), yesod y un par mas. Y para front-end tienes miso (https://haskell-miso.org/). Es lo unico que se sobre haskell. Ademas, es de proposito general.
Rothfuss está desconectado   Responder Con Cita


Respuesta

Regresar   Inicio | Foro Coches > Zona General > Empleo / Emprendimiento
Herramientas


 [ VERSIÓN MÓVIL ]
Info Legal | Privacidad | Cookies | Notificaciones | Normas de uso | Updates | Ayuda | Invitaciones | Contacto