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
<!-- Para fotos -->
<input type="file" accept="image/*" capture="user" />
<input type="file" accept="image/*" capture="environment">
<!-- Para vídeos -->
<input type="file" accept="video/*" capture="user" />
<input type="file" accept="video/*" capture="environment"
```
- Puedes hacer un autocompletado usando solo la etiqueta \<datalist>
```html
<form>
<label>Selecciona framework favorito:
<input list="frameworks">
</label>
<datalist id="frameworks">
<option value="React" />
<option value="Angular" />
<option value="Vue" />
</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
<form id="contact-form" action="/submit">
<label>Message:
<input name="message" required>
</label>
</form>
<button form="contact-form" type="submit">Enviar Formulario</button>
```
- Puedes colocar separadores entre las opciones de un elemento \<select>:
```html
<label for="icecream">
Selecciona un sabor de helado:
</label>
<select name="icecream">
<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
<search>
<form action="/search">
<label>
Introduce la búsqueda:
<input type="search" name="q">
</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>
<dialog id="modal">
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
<div class="center">
<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()
