Closed jlantunez closed 3 years ago
@jlantunez me pongo con las cosas. Algunas dudas.
Repasar que vaya muy fina entre bloques.
¿Qué te refieres aquí?
La navegación por teclas ya debería de ir, es de lo primero que hice antes de meterle el resto. Dime si te falta algo. Incluso puedes darle a Home y End ;)
La tarjeta de Culers por ejemplo está a más de 3 veces el tamaño necesario: https://jlantunez.com/new/static/img/bar%C3%A7a/culers-card.png y se ve bien ahí, creo que es problema de que está chico. Lo mismo con Marco Aurelio: https://jlantunez.com/new/static/img/marco-aurelio.jpg?hash=5be14f8e55 está a más de 2x del tamaño.
Que cuando alguien quiera ver el código fuente desde el navegador (no desde el inspector) se vea la poesía bien anidada igual que hicimos con la landing de webslides. Es web personal, sé que soy un antiguo, pero quiero proyectar romanticismo aunque no sea tan buena práctica.
Te refieres al hecho de que está todo comprimido, ¿no?
Respecto a charlar, en cuanto te venga a ti bien quedamos 😉
Esta tarde tienes todo hecho.
Perfect:
Repasar que vaya muy fina entre bloques.
¿Qué te refieres aquí?
A nada en concreto. Tan sólo a testear. Yo la veo perfecta.
Te refieres al hecho de que está todo comprimido, ¿no?
Sí, a eso :)
¿Hablamos mañana a 16h?
Claro, ¿en Sevilla o pensabas en remoto?
Dejo dudas:
Dices de alinear bloque uno vertical y horizontalmente en mobile pero veo que ya está así:
¿Qué me he perdido?
En Tramontana dice "En desktop: Las líneas/bordes que se cruzaban del container del contenido no salen" pero la versión subida ahora mismo está así:
¿Es otra cosa?
Lo mismo con approach. Seguro que es algo tonto que no estoy viendo 🤔
En validación de HTML aparece un warning
Que es por esto: https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html
Si aun así lo quieres quitar dímelo y lo hago salir :)
En el CSS aparecen algunas cosas pero no son correctas. Son vendor prefixes para aumentar la compatibilidad. Si quieres desactivo autoprefixer.
Respecto a vernos, lo decía en remoto. :)
Lo de las líneas de Tramontana esta mañana antes de hablar no salía. Veo que ya sí. Resuelto. No sé...
En cuanto a centrar el primer bloque en mobile, me daba la impresión que no lo estaba. No vi la CSS realmente. Si lo está, perfect. Quizá sea Brave que tiene barra abajo y despista/cubre el espacio de abajo.
Respecto al segundo bloque, por fallo mío en Figma en desktop y mobile, tenía la misma sensación. Lo único que estaba centrado verticalmente en figma era el listado y no la frase de arriba y la de abajo. A eso me refería. No he visto CSS. Y me he dado cuenta de que no es un problema de flexbox. Es problema de padding creo.
@media (min-width: 64em)
.section--approach .section__content__wrapper {
padding: 5.25rem 0;
}
Adjunto captura. La captura corresponde a 1200x800
Si reducimos ese padding y lo ponemos a equivalente de 48px
En el segundo bloque, editemos también la alineación del círculo. Lo corregí en Figma para que estuviera encima del vision + craft. Respecto al icono del unicornio tal como veo ahora en mobile habría que reducirlo 8px.
Respecto al role="list", me fío más de tu criterio. Si ves que es mejor, lo dejamos. Llevo una etapa muy ANTI-RAE y antiorganizaciones que quieren estandarizar cuestiones con criterios discutibles :)
Sí, por responsabilidad conservemos los prefixes.
Lighthouse me da un 100 en todo menos en performance que por algún motivo está fallando al trazar el LCP. Le echo un ojo a lo demás
Loveando mucho 🔥🔥
He encontrado un defectillo en la navegación con scroll. Sólo sucede cuando refrescas la página. Se queda a mitad de dos bloques. A partir de los 18 segundos https://www.dropbox.com/s/lorlgiu14wcl6bu/Grabaci%C3%B3n%20de%20pantalla%202021-09-12%20a%20las%2019.08.38.mov?dl=0
Pues parece ser que el performance no lo podemos testear con Lighthouse por las animaciones debido a https://github.com/GoogleChrome/lighthouse/issues/10869
El defectillo se ha ido 🙈
De todas formas acabo de hacer un WebPageTest y https://www.webpagetest.org/result/210912_AiDc74_f8ee0f56ed1354c886274c6088be88ca/
Todo A y las métricas de performance todas en verde:
Creo que de CSS sólo quedaría ajustar los paddings en desktop del bloque 2. Ahora está más abajo que antes. Ni se ve la section al completo en desktop en 1280x800. Usa Figma de referencia.
Pienso qué podemos poner cuando los círculos giran. No quiero desvelar el unicornio en el primer bloque ni que se repita luego el marco aurelio en el bloque 2. Lo hablo con Miguel. ¿Sugerencias?
Qué torpe con el padding! Ya lo he quitado.
Pienso en algo. ¿Giralda y Sagrada familia? 🤔 No se me ocurre qué poner que tenga sentido y que no haya que explicar.
Me mola, pero tendría que tener el mismo estilo de ilustración que Marco Aurelio.
quedamos mañana a las 16h entonces para pasarte invite?
Qué torpe con el padding!
Viendo que el figma no es muy exacto con la resolución luego de la pantalla. Hay que seguir haciendo ajustes en el margin-bottom del h2, el padding de
@media (min-width: 42.751em) .section .section__content { margin: 0 auto; min-height: 40rem; padding: 5rem; }
Y subir unos 24-32 px el circulo del unicornio y vision + craft.
quedamos mañana a las 16h entonces para pasarte invite?
Claro!
Qué torpe con el padding!
Viendo que el figma no es muy exacto con la resolución luego de la pantalla.
Hay que seguir haciendo ajustes en el margin-bottom del h2, el padding de
@media (min-width: 42.751em)
.section .section__content {
margin: 0 auto; min-height: 40rem; padding: 5rem;
}
Y subir unos 24-32 px el circulo del unicornio y vision + craft.
Ese padding es global a todas, lo quito?
Creo que no que es mejor hacer padding particular para el bloque 2 solo. Si los quitamos en todos los bloques y en el futuro meto más trabajos y alguno tiene background-color como el de Tramontana la fastidiamos, no?
Puede que sea también el min-height?
@jlantunez acabo de subir y creo que está resuelto, le he quitado el padding a esta sección en vertical y acercado más el unicornio. He probado a 800 y creo que va bien.
Lo conseguiste.
Por cierto, una chuminá pero que sepas que está. Cuando cambiamos de sección, el color cambia y en safari he hecho que coja el color de la sección para la barra del notch (iOS15 en adelante)
Vivan las chuminás. ¿Metemos el meta name="theme-color" o no hace falta? Hoy cuando hablemos a ver si me ayudas a decidir favicon (no sé cual) y también con la instalación en local. No lo consigo y cuando ya pueda me meto de fondo para jugar yo también.
El theme-color
es lo que hace eso. Lo único que hago es cambiarle el valor :)
Claro, miramos todo eso en un rato!
Añado aquí:
@jlantunez acabo de subir instrucciones, dime qué te parecen :)
Copas subidas. El resto tú marcas el ritmo :)
Una vez que vayamos a lanzar hacemos lanzamiento y .htaccess Lo de Figma necesitaría que me pases el fichero Figma para subirlo aquí o poner la URL si quieres en el README. Y abrir el GitHub lo tienes que hacer tú como admin. Mi consejo es que borres todas las issues a mano para evitar que nadie pueda leerlas. No hay nada crítico de cualquier forma pero por si acaso.
Te sales. De lujo las instrucciones. He añadido headings de Step 1, Step 2...
Creo que la URL del Figma mejor al comienzo del readme y con una captura del primer bloque?
Por mí, lanzamos a principios de la semana que viene y damos tiempo a Miguel para detalles de marco aurelio y emoji.
Claro que sí! Quedo atento
Empezando a jugar desde local. Al principio, por imbécil, no sabía instalarlo porque no clicaba ENTER en Terminal. Va de lujo.
¿Cómo puedo saber la correspondencia exacta entre las medidas en .rem y px? ¿2.5rem equivale a 25px? Es para jugar con márgenes y paddings.
@jlantunez la equivalencia es 16px (que además es múltiplo de 8) en este caso 2.5 son 40 píxeles
PD: Nada de imbécil. Este es mi pan del día a día y puede parecer muy obvio/fácil y a menudo me olvido de esas cosas. Mejor "falta de práctica" 😉
Ya estoy de vuelta en casa tras dos días de estrés por primer día de clase.
Feedback de Manu desde NYC:
--
Sobre la web, muy buena pinta tio! Mis impresiones:
Intro: buen primer parrafo, concepto y ejecucion visual. Tal vez un poco mas de texto ayude a entender, pero lo dejo a tu criterio. Sí me falta un affordande para el siguiente slide, que entre que está todo en la misma slide y que hay algo de resistencia al scroll, parece que no hay más.
How: Lo veo bien, muy directo. Me descuadra un poco el uso de emojis (personalmente los quitaría) pero eso son gustos personales.
Casos de estudio: mamma mía, las transiciones. Absolutamente nada que objetar. Limpio, directo, y bello. Con la información necesaria.
Contacto: tal vez cerraría con algo más de narrativa, como resumiendo por qué deben contactar contigo y cómo puedes ayudar.
--
@jlantunez si quieres hacer cambios dime. Quizá sea mejor abrir nuevas issues aunque enlacemos a esta por claridad.
ok, primero iré jugando en figma.
Recopilo detalles. Sólo el bloque 1 y 2 necesitaban algunos cambios menores en Figma y los he actualizado. Las issues de los bloques 1 y 2 son las que he cambiado en Figma.:
Bloque 1:
Bloque 2:
Bloque Tramontana:
Bloque de closing:
Animaciones:
Navegación entre bloques:
Assets:
Manía personal: la poesía del HTML y CSS :)
FIN.
PD: Muchísimas gracias por tanto karma en cariño, profesionalidad... Cuando acabemos, me gustaría que charlásemos un rato y contarte alguna cosas :)