¡El Futuro de la Web! Lo nuevo de JavaScript, HTML y CSS - Midudev

Clase 4 de 33 • Platzi Conf Bogotá 2024

Resumen

¿Cuál es el futuro del desarrollo web en HTML, CSS y JavaScript?

El desarrollo web siempre ha mantenido su relevancia en el panorama tecnológico, y lo seguirá haciendo gracias a las constantes innovaciones en HTML, CSS y JavaScript. En un evento especial, el creador de contenido e ingeniero de software, Miguel Ángel Durán, también conocido como "midudev," expone los avances significativos en estas tecnologías y cómo están transformando el futuro de la web. Aquí te presentamos un resumen conciso e informativo.

¿Cómo están evolucionando HTML, CSS y JavaScript?

HTML: A pesar de tener más de 30 años, HTML continúa siendo esencial y sigue renovándose. Añadidos recientes como el elemento <search>, mejoras en formularios con inputs más intuitivos, y elementos como <ruby> demuestran su evolución.
CSS: Las animaciones y propiedades nuevas han simplificado procesos que antes requerían de complejidad excesiva. Novedades como la propiedad align-content vertical en display block y el uso de Text-wrap balance mejoran significativamente la presentación visual sin complicaciones adicionales.
JavaScript: Sigue siendo fundamental en la creación y manejo de aplicaciones web, con mejoras en su manejo del tipado estático de la mano de TypeScript nativo en entornos como Node.js. Estas actualizaciones elevan el nivel de eficiencia y rendimiento.

¿Cómo influye la inteligencia artificial en la programación web?

A pesar de los temores comunes sobre la IA reemplazando a los programadores, estas herramientas son en realidad una oportunidad para facilitar procesos tediosos, permitiendo a los desarrolladores centrarse más en la creatividad y la resolución de problemas complejos.

¿Qué novedades de CSS debemos conocer?

Las mejoras en CSS ahora permiten realizar animaciones complejas y ajustables con apenas unas líneas de código, reduciendo la necesidad de JavaScript. Nuevas propiedades como @media query más intuitivas y el text-wrap balance optimiza visualmente las interfaces de usuarios, mejorando la experiencia de usuario.

¿Por qué debería seguir apostando por HTML, CSS y JavaScript?

Estos lenguajes han demostrado ser incansables motores de la web. Empresas exitosas como Notion, ChatGPT y herramientas como Visual Studio Code se han desarrollado y mejorado gracias a estas tecnologías. Esto subraya que apostar por HTML, CSS y JavaScript es apostar por un futuro próspero en el desarrollo web.

A través de la creación de contenido multimedia, participación en comunidades y acceso a cursos en línea, estas tecnologías se vuelven accesibles para diferentes niveles de experiencia. Por ello, no dejes de aprender y actualizarte constantemente para seguir siendo relevante en el campo del desarrollo web.

¡Sumérgete en este mundo apasionante y nunca dejes de aprender! La evolución constante de HTML, CSS y JavaScript ofrece infinitas posibilidades.

Eloy Chávez Dev

student•

La charla de Midudev fue realmente reveladora, compartió de manera dinámica y accesible las novedades más importantes de JavaScript, HTML y CSS, destacando cómo estas tecnologías están impulsando la próxima generación de desarrollo web.

Fue fascinante ver cómo explicó con ejemplos prácticos lo que pareciera podemos esperar en los próximos años, pero en realidad ya están disponibles todas estas funciones que podemos aprovechar en nuestros proyectos.

¡Una experiencia educativa y motivadora sin duda!

Kevin Camacho

student•

Tu comentario parece escrito por ChatGPT

Eloy Chávez Dev

student•

Oh no significa que me estoy convirtiendo en un bot? hahaha

Mateo Baron

student•

Minuto 4:01, lo confieso me ganaron las ganas de pedir la foto, pero que gusto fue conocerte.

BALFRE VAZQUEZ CASTREJON

student•

<u>Siempre aposteis por la web</u>

La retrocompatibilidad impide 100% de compatibilidad.

Actualizarse constantemente en HTML y CSS, nos permitira identificar nuevos avances que sustituiran cosas que antes ocupaban Javascript, asi como los avances en Javascript mejoraran los frameworks existentes

Nicolas Suarez Vasquez

student•

La programación no morira, evaluciona y seguira en nuestras vidas.

Javier Ramos

student•

y sera potenciada con la IA

Kevin Bravo

student•

Que buena charla! Las horas que me pude haber ahorrado con saber que podria haber puesto el boton fuera del formulario

Luis Moreno

student•

Yo sí obtuve resultados correctos cuando pregunté sobre estas nuevas funciones de HTML, CSS, etc. Pero porque mi chat tiene una función de búsqueda web, claramente si le preguntas a los modelos que tienen cortes temporales y no pueden acceder a datos en tiempo real, te van a dar un resultado incorrecto. La clave está en el contexto que proporcionas a los LLMs.

Javier Ramos

student•

Hablas de gemini?

Daniel Andres Rojas Paredes

student•

no entendi lo de command y commandfor , es algo que vendra en el futuro? porque prove ese codigo (minuto 9) y no me abre el modal al clikear el botton

dick rowilson becerra herrera

student•

todo esto tan solo es un "abre bocas", no es clase en sí, nos vislumbra la importancia que tiene, el resto es investigar y aplicar. casi todo platzi es así. lo detuve y entendí pero aun así no entrara en mi cerebro, lo tendré cuando lo aplique.

Diego Giraldo Ramirez

student•

Esperaba ver esta charla de nuevo, fue super útil para mi, gracias a Platzi por traer a Midu, y por tener la charla disponible para estudiarla; justo lo que necesitaba, Midu se trajo los trucos.

Javier Ramos

student•

Nueva máxima en PLatzi

Siempre apostéis por la Web

HTML CSS JavaScript

Pedro Abel Beltrán Disciplina

student•

Resumen de todas las novedades que mencionó midu: - Puedes abrir la cámara de tu celular utilizando únicamente HTML con las siguientes líneas de código:

```html

<input type="file" accept="video/*" capture="environment"

```

- Puedes hacer un autocompletado usando solo la etiqueta \<datalist>

```html

<form>

<label>Selecciona framework favorito:

</label>

</datalist>

<button type="submit">Enviar</button>

</form>

```

- Con el elemento \<ruby> puedes mostrar la traducción, pronunciación o forma de escritura encima de otra palabra

```html

<ruby>

Castle

<rt>kæsəl</rt>

</ruby>

```

- Puedes crear un \<button> fuera de un form y con el atributo form indicar a qué formulario pertenece.

```html

<label>Message:

</label>

</form>

<button form="contact-form" type="submit">Enviar Formulario</button>

```

- Puedes colocar separadores entre las opciones de un elemento \<select>:

```html

Selecciona un sabor de helado:

</label>

<option>Sin sabor</option>

<hr>

<option>Vainilla</option>

<option>Chocolate</option>

<hr>

<option>Fresa</option>

</select>

```

- El elemento \<search> es un contenedor que representa las partes del documento relacionadas a busquedas o filtros:

```html

<label>

Introduce la búsqueda:

</label>

<button>Buscar</button>

</form>

</search>

```

- Puedes usar los atributos command y commandfor para abrir y cerrar un modal:

```html

<button commandfor="modal" command="showModal">Abrir Modal</button>

Contenido del modal

<button commandfor="modal" command="close">Cerrar</button>

</dialog>

```

- Ahora puedes usar la propiedad align-content para centrar verticalmente los elementos que son display: block. Para centrar algún elemento que está en línea puedes usar la propiedad margin-inline

```html

<h1>Centrado</h1>

```

```css

.center {

align-content:center;

}

h1 {

margin-inline: auto;

}

```

- La propiedad text-wrap: balance es útil para alinear los títulos que son muy largos para algunos tamaños de pantalla.

- Nueva sintaxis para media query:

```css

/*Nueva forma usando sitaxis de rango */

@media (width >= 300px) {}

@media (width < 1000px) {}

@media (640px <= width < 768px) {}

/* Antigua forma */

@media (min-width: 300px) {}

@media (max-width: 1000px) {}

@media (min-width: 640px) and (max-width: 768px) {}

```

- Puedes hacer animaciones de fade in y fade out al momento de hacer scroll de esta forma:

```css

@keyframes reveal {

from {

opacity: 0;

translate: 0 100px;

}

to {

opacity: 1;

translate: 0 0;

}

img {

animation: reveal both;

animation-timeline: view();

animation-range: entry 20% cover 30%;

}

```

- Puedes hacer una animación para abrir y cerrar modales de la siguiente manera:

```css

dialog {

transition: scale .3s ease,

display .3s allow-discrete;

scale: 0;

&[open] {

scale: 1;

@starting-style {

scale: 0;

}

```

- Las view transition te permiten hacer animaciones entre las distintas páginas de tu sitio, puedes hacerlas de la siguiente manera:

```css

/* Activamos las view transitions */

@view-transition {

navigation: auto;

}

/* Indicamos la animación que va a hacer */

@keyframes reveal {

0% {

opacity: 1;

filter: blur(0);

}

100% {

opacity: 0;

filter: blur(8px);

}

main {

view-transition-name: content;

}

::view-transition-old(content) {

animation: reveal .3s forwards;

}

::view-transition-new(content) {

animation: reveal .3s reverse;

}

```

- Puedes agrupar arrays de objetos de la siguiente forma con JS:

```javascript

const heroes = [

{name: "Thor", team: "avenger", power: 50},

{name: "Batman", team: "justice", power: 10},

{name: "IronMan", team: "avenger", power: 25},

{name: "SuperMan", team: "justice", power: 99}

]

const result = Object.groupBy(heroes, ({ team }) => team)

const result2 = Object.groupBy(heroes, hero =>{

return hero.power > 25 ? 'superfuerte' : 'normal'

})

```

- Puedes usar el método findLast para encontrar el último elemento de un array:

```javascript

const names = ['midu', 'miguel', 'midudev']

// Nueva forma ECMAScript 2023

const found = names.findLast(element => element.includes('m'))

console.log(found) // 'midudev'

// Forma clásica

const found = [...names].reverse().find(element => element.includes('m'))

console.log(found) // 'midudev'

```

- Pudemos acceder a cualquier posición de un array ahora de esta forma con el método at()

```javascript

const words = ['midu', 'conf', 'is', 'coming']

words.at(-1) // 'coming'

words.at(0) // 'midu'

words.at(-2) // 'is'

words.at(-10) // undefiner

words.at(5) //undefined

```

- Nuevos métodos que crean una copia del array original en JavaScript sin modificarlo

- .toReversed()

- .toSorted()

- .toSpliced()

- .with()

Maycol Brayan Huancas Loayza

student•

lo máximo heee, me hubiera gustado estar allí, saludos ;)