Hay algunos problemas comunes de codificación con los que te puedes encontrar cuando empieces a practicar lo que has aprendido construyendo proyectos.

Un problema común al que te enfrentarás como desarrollador web es cómo colocar un elemento en el centro de una página o dentro de un elemento que actúa como su contenedor. Es el omnipresente problema de "¿Cómo centro un div?".

En este artículo, veremos cómo podemos centrar elementos utilizando varias propiedades CSS. Veremos ejemplos de código en cada sección y una representación visual de los elementos en todos los ejemplos.

Cómo centrar un Div utilizando la propiedad CSS Flexbox

En esta sección, veremos cómo podemos utilizar la propiedad Flexbox de CSS para centrar un elemento horizontalmente, verticalmente y en el centro de una página/contenedor.

Puedes usar una imagen si lo prefieres, pero nosotros usaremos un simple círculo dibujado con CSS. Aquí está el código:

<div class="contenedor">

      <div class="circulo">

      </div>

</div>

.contenedor {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
}

.circulo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
}

El posicionamiento con Flexbox requiere que escribamos el código en la clase del elemento padre o contenedor.

Cómo centrar un Div horizontalmente usando Flexbox

Ahora escribiremos el código para centrar el elemento div horizontalmente. Seguimos haciendo uso del círculo que creamos anteriormente.

.contenedor {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
  display: flex;
  justify-content: center;
}

.circulo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
}

Hemos añadido dos líneas de código para centrar el círculo horizontalmente. Estas son las líneas que hemos añadido:

display: flex;
justify-content: center;

display: flex; nos permite utilizar Flexbox y sus propiedades.

justify-content: center; alinea el círculo al centro horizontalmente.

Aquí está la posición de nuestro círculo:

Cómo centrar un Div verticalmente usando Flexbox

Lo que haremos en esta sección es similar a la anterior, excepto por una línea de código.

.contenedor {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
  display: flex;
  align-items: center;
}

.circulo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
}

En este ejemplo, hemos utilizado align-items: center; para centrar el círculo verticalmente. Recuerda que debemos escribir primero display: flex; antes de especificar la dirección.

Aquí está la posición de nuestro círculo:

Cómo posicionar un Div en el centro usando Flexbox

En esta sección, colocaremos el círculo en el centro de la página utilizando las propiedades de alineación horizontal y vertical de CSS Flexbox. He aquí cómo:

.contenedor {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circulo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
}

Estas son las tres líneas de código que hemos añadido a la clase contenedor anterior:

display: flex;
justify-content: center;
align-items: center;

Como es de esperar, comenzamos con display: flex; que nos permite utilizar Flexbox en CSS. A continuación, utilizamos las propiedades justify-content (alineación horizontal) y align-items (alineación vertical) para colocar el círculo en el centro de la página.

Esta es la posición de nuestro círculo:

Cómo centrar un Div horizontalmente usando la propiedad margin de CSS

En esta sección, utilizaremos la propiedad margin para centrar nuestro círculo horizontalmente.

Volvamos a crear nuestro círculo.

<div class="contenedor">

      <div class="circulo">

      </div>

</div>

.contenedor {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
}

.circulo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
}

Esta vez escribiremos el código en la clase círculo. He aquí cómo:

.contenedor {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
}

.circulo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
  margin: 0 auto;
}

Todo lo que hemos añadido es el margen: 0 auto; línea de código a la clase circulo.

Echemos un vistazo a la posición del círculo:

Cómo centrar texto horizontalmente con la propiedad CSS text-align

En esta sección, veremos cómo centrar texto horizontalmente.

Este método sólo funciona cuando trabajamos con texto escrito dentro de un elemento.

He aquí un ejemplo:

<div class="contenedor">

    <h1>Hello World!</h1>
      
</div>

En el ejemplo anterior, hemos creado un div con una clase de contenedor y un elemento h1 con algo de texto. Esto es lo que aparece en este momento:

Escribamos el código CSS.

.contenedor {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
}

h1 {
  text-align: center;
}

Para alinear el texto del elemento h1 en el centro de la página, tuvimos que utilizar la propiedad text-align, dándole un valor de center. Esto es lo que aparece ahora en el navegador:

Conclusión

En este artículo, vimos cómo podemos centrar elementos horizontalmente, verticalmente y en el centro de la página usando Flexbox y las propiedades margin y text-align en CSS.

En cada sección, vimos tanto un ejemplo de código como una representación visual de lo que hace el código.

¡Feliz codificación!

Escribí este tutorial para ayudarte a aprender rápidamente Next.js y familiarizarte con su funcionamiento.

Es ideal para ti si tienes cero o poco conocimiento de Next.js, has usado React en el pasado y estás deseando sumergirte más en el ecosistema React, en particular en el renderizado del lado del servidor (server-side rendering).

Next.js me parece una herramienta impresionante para crear Aplicaciones Web, al final de este post espero que estés tan entusiasmado como yo. ¡Espero que te ayude a aprender Next.js!

Nota: puede descargar una versión PDF / ePub / Mobi de este tutorial para poder leerlo sin conexión.

Índice

1. Introducción
2. Principales características de Next.js
3. Next.js vs Gatsby vs create-react-app
4. Cómo instalar Next.js
5. Revisar código fuente para confirmar que SSR funciona
6. Los paquetes de aplicaciones
7. ¿Qué es ese icono en la parte inferior derecha?
8. Instalar React DevTools
9. Otras técnicas de depuración que puedes utilizar
10. Añadir una segunda página al sitio web
11. Enlazar las dos páginas
12. Contenido dinámico con el router
13. Prefetching(Búsqueda previa)
14. Uso del router para detectar el enlace activo
15. Uso de next/router
16. Alimentación de datos a los componentes mediante getInitialProps()
17. CSS
18. Rellenar la etiqueta head con etiquetas personalizadas
19. Añadir un componente envolvente (Wrapper component)
20. Rutas API
21. Ejecutar código en el lado del servidor o en el lado del cliente
22. Despliegue de la versión de producción
23. Despliegue en Now
24. Análisis de los paquetes de aplicaciones
25. Módulos de carga lenta
26. Qué hacer a partir de ahora

Introducción

Trabajar en una aplicación JavaScript moderna impulsada por React es increíble hasta que te das cuenta de que hay un par de problemas relacionados con la representación de todo el contenido en el lado del cliente.

En primer lugar, la página tarda más en ser visible para el usuario, porque antes de que se cargue el contenido, debe cargarse todo el JavaScript, y su aplicación necesita ejecutarse para determinar qué mostrar en la página.

En segundo lugar, si usted está construyendo un sitio web disponible al público, tiene un problema de SEO de contenido. Los motores de búsqueda están mejorando en la ejecución e indexación de aplicaciones JavaScript, pero es mucho mejor si podemos enviarles el contenido en lugar de dejar que ellos lo descubran.

La solución a ambos problemas es el renderizado del lado del servidor (server rendering), también llamado "pre-renderizado estático" (static pre-rendering).

Next.js es un framework inspirado en React para hacer todo esto de una manera muy sencilla, pero no se limita a esto. Sus creadores lo anuncian como una cadena de herramientas de configuración cero y una interfaz de herramientas para aplicaciones en React.

Proporciona una estructura común que te permite construir fácilmente un sitio web con React y maneja de forma transparente el renderizado del lado servidor (server-side rendering).

Principales características de Next.js

He aquí una lista no exhaustiva de las principales características de Next.js:

Recarga en caliente (Hot Code Reloading)

Next.js recarga la página cuando detecta algún cambio guardado en disco.

Enrutamiento automático (Automatic Routing)

Cualquier URL es mapeada al sistema de archivos, los cuales se ubican en la carpeta pages. No necesitas ninguna configuración (por supuesto, tienes opciones de personalización).

Componentes de un solo archivo (Single File Components)

Usando styled-jsx, completamente integrado y construido por el mismo equipo, es trivial añadir estilos al componente.

Renderización del lado del servidor (Server Rendering)

Puedes renderizar componentes React en el lado del servidor, antes de enviar el HTML al cliente.

Compatibilidad con el ecosistema

Next.js funciona bien con el resto del ecosistema JavaScript, Node y React.

Separación automática del código

Las páginas se renderizan sólo con las librerías y el JavaScript que requieren, nada más. En lugar de generar un único archivo JavaScript con todo el código de la aplicación, Next.js la divide automáticamente en varios recursos diferentes.

Al cargar una página sólo se carga el JavaScript necesario para esa página en concreto.

Next.js lo hace analizando los recursos importados.

Si sólo una de sus páginas importa la biblioteca Axios, por ejemplo, esa página específica incluirá la biblioteca en su paquete.

Esto garantiza que la carga de la primera página sea lo más rápida posible y que sólo las cargas de páginas futuras (si es que se activan) envíen el JavaScript necesario al cliente.

Hay una excepción notable. Las importaciones de uso frecuente se trasladan al paquete principal de JavaScript si se utilizan en al menos la mitad de las páginas del sitio.

Precarga (Prefetching)

El componente Link, utilizado para enlazar distintas páginas, admite una función de prefetch que precarga automáticamente los recursos de la página (incluido el código que falta debido a la separación del código) en segundo plano.

Componentes dinámicos (Dynamic Components)

Puedes importar módulos JavaScript y componentes React de forma dinámica.

Exportación estática (Static Exports)

Usando el comando next export, Next.js te permite exportar un sitio completamente estático de tu aplicación.

Compatibilidad con TypeScript

Next.js está escrito en TypeScript y como tal viene con un excelente soporte para TypeScript.

Next.js vs Gatsby vs create-react-app

Next.js, Gatsby y create-react-app son herramientas increíbles que podemos utilizar para potenciar nuestras aplicaciones.

Digamos primero lo que tienen en común. Todas tienen React bajo el capó, potenciando toda la experiencia de desarrollo. También abstraen webpack y todas esas cosas de bajo nivel que solíamos configurar manualmente en los viejos tiempos.

create-react-app no te ayuda a generar una aplicación renderizada del lado del servidor fácilmente. Todo lo que viene con ello (SEO, velocidad...) sólo lo proporcionan herramientas como Next.js y Gatsby.

¿Cuándo es Next.js mejor que Gatsby?

Ambos pueden ayudar con el renderizado del lado del servidor  (server-side rendering), pero de 2 maneras diferentes.

El resultado final usando Gatsby es un generador de sitios estáticos, sin servidor. Usted construye el sitio, y luego despliega el resultado del proceso de construcción estáticamente en Netlify u otro sitio de alojamiento estático.

Next.js proporciona un backend que puede renderizar del lado del servidor una respuesta a la petición, lo que permite crear un sitio web dinámico, lo que significa que se desplegará en una plataforma que pueda ejecutar Node.js.

Next.js también puede generar un sitio estático, pero yo no diría que es su principal caso de uso.

Si mi objetivo fuera construir un sitio estático, me costaría elegir y quizás Gatsby tenga un mejor ecosistema de plugins, incluyendo muchos para blogging en particular.

Gatsby también se basa en gran medida en GraphQL, algo que puede gustarte o disgustarte dependiendo de tus opiniones y necesidades.

¿Cómo instalar Next.js?

Para instalar Next.js, necesitas tener instalado Node.js.

Asegúrate de que tienes la última versión de Node. Compruébalo ejecutando node -v en tu terminal y compárala con la última versión LTS listada en https://nodejs.org/.

Después de instalar Node.js, tendrás el comando npm disponible en tu línea de comandos.

Si tienes algún problema en esta 1 fase, te recomiendo los siguientes tutoriales que he escrito para ti:

• Cómo instalar Node.js
• Cómo actualizar Node.js
• Introducción al gestor de paquetes npm
• Tutorial de Unix Shell
• Cómo usar el terminal de macOS
• El intérprete de comandos Bash

Ahora que tienes Node actualizado a la última versión y npm, ¡estamos listos!

Ahora podemos elegir 2 rutas: usar create-next-app o el enfoque clásico que implica instalar y configurar una aplicación Next manualmente.

Usando create-next-app

Si estás familiarizado con create-react-app,  create-next-app es lo mismo - excepto que crea una aplicación Next en lugar de una aplicación React, como su nombre indica.

Supongo que ya tienes instalado Node.js, desde la versión 5.2 (hace más de 2 años en el momento de escribir esto), viene con el comando npx incluido. Esta herramienta útil nos permite descargar y ejecutar un comando JavaScript y lo usaremos así:

npx create-next-app

El comando pregunta el nombre de la aplicación (y crea una nueva carpeta para ti con ese nombre), luego descarga todos los paquetes que necesita ( react, react-dom, next), establece el package.json a:

y puedes ejecutar inmediatamente la aplicación de ejemplo ejecutando npm run dev:

Y aquí está el resultado en http://localhost:3000:

Esta es la forma recomendada de iniciar una aplicación Next.js, ya que te proporciona estructura y código de ejemplo con el que jugar. Hay más ejemplos aparte del predeterminado; puedes usar cualquiera de los ejemplos almacenados en https://github.com/zeit/next.js/tree/canary/examples usando la opción --example. Por ejemplo, prueba:

npx create-next-app --example blog-starter

Lo que le da una instancia de blog inmediatamente utilizable con resaltado de sintaxis también:

Crear manualmente una aplicación Next.js

Puedes evitar create-next-app si te apetece crear una aplicación Next desde cero. He aquí cómo: crea una carpeta vacía donde quieras, por ejemplo en tu carpeta de inicio y entra en ella:

mkdir nextjs
cd nextjs

y crea tu primer directorio del proyecto Next:

mkdir firstproject
cd firstproject

Ahora usa el comando npm para inicializarlo como un proyecto Node:

npm init -y

La opción -y indica a npm que utilice la configuración predeterminada para un proyecto, rellenando un archivo package.json de ejemplo.

Ahora instala Next y React:

npm install next react react-dom

Su carpeta de proyecto debe tener ahora 2 archivos:

• package.json (ver mi tutorial sobre ello)
• package-lock.json (ver mi tutorial sobre package-lock)

y la carpeta node_modules.

Abra la carpeta del proyecto utilizando su editor favorito. Mi editor favorito es VS Code. Si lo tienes instalado, puedes ejecutar code . en tu terminal para abrir la carpeta actual en el editor (si el comando no te funciona, mira esto)

Abra package.json, que ahora tiene este contenido:

{
  "name": "firstproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies":  {
    "next": "^9.1.2",
    "react": "^16.11.0",
    "react-dom": "^16.11.0"
  }
}

y reemplazar la sección de scripts con:

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

Para añadir los comandos de compilación de Next.js, que usaremos pronto.

Consejo: usa "dev": "next -p 3001", para cambiar el puerto y ejecutar, en este ejemplo, en el puerto 3001.

Ahora crea una carpeta pages y añade un archivo index.js.

En este archivo, vamos a crear nuestro primer componente React.

Vamos a utilizarlo como la exportación por defecto:

const Index = () => (
  <div>
    <h1>Home page</h1>
  </div>
)

export default Index

Ahora, usando el terminal, ejecuta npm run dev para iniciar el servidor de desarrollo Next.

Esto hará que la aplicación esté disponible en el puerto 3000, en localhost.

Abra http://localhost:3000 en su navegador para verlo.

Ver código fuente para confirmar que (Renderizado del lado del servidor) SSR está trabajando

Comprobemos ahora que la aplicación funciona como esperamos. Es una aplicación Next.js, por lo que debería renderizarse del lado del servidor (server side rendered).

Es uno de los principales argumentos de venta de Next.js: si creamos un sitio utilizando Next.js, las páginas del sitio se renderizan en el servidor, que entrega HTML al navegador.

Esto tiene 3 ventajas principales:

• El cliente no necesita instanciar React para renderizar, lo que hace que el sitio sea más rápido para sus usuarios.
• Los motores de búsqueda indexarán las páginas sin necesidad de ejecutar el JavaScript del lado del cliente. Algo que Google comenzó a hacer, pero admitió abiertamente que es un proceso más lento (y debes ayudar a Google tanto como sea posible, si quieres clasificar bien).
• Puede tener metaetiquetas de medios sociales, útiles para añadir imágenes de vista previa, personalizar el título y la descripción de cualquiera de sus páginas compartidas en Facebook, Twitter, etc.

Vamos a ver la fuente de la aplicación.

Usando Chrome puede hacer clic derecho en cualquier lugar de la página, y pulse Ver fuente de la página(View Page Source).

Si ves el código fuente de la página, verás el fragmento <div><h1>Home page</h1></div> en el body del HTML, junto con un montón de archivos JavaScript: los paquetes de la aplicación.

No necesitamos configurar nada, SSR (Renderizado del lado del servidor) ya está trabajando para nosotros.

La aplicación React se ejecutará en el cliente y será el que ejecute las interacciones como hacer clic en un enlace, utilizando la renderización del lado del cliente. Pero al recargar una página se volverá a cargar desde el servidor. Y usando Next.js no debería haber ninguna diferencia en el resultado dentro del navegador - una página renderizada desde el servidor debería verse exactamente igual que una página renderizada desde el cliente.

Paquete de aplicación (app bundle)

Cuando revisamos el código fuente de la página, vimos que se estaban cargando un montón de archivos JavaScript:

Empecemos por poner el código en un formateador HTML para formatearlo mejor de modo que los humanos tengamos más posibilidades de entenderlo:

<!DOCTYPE html>
<html>

<head>
    <meta charSet="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
    <meta name="next-head-count" content="2" />
    <link rel="preload" href="/_next/static/development/pages/index.js?ts=1572863116051" as="script" />
    <link rel="preload" href="/_next/static/development/pages/_app.js?ts=1572863116051" as="script" />
    <link rel="preload" href="/_next/static/runtime/webpack.js?ts=1572863116051" as="script" />
    <link rel="preload" href="/_next/static/runtime/main.js?ts=1572863116051" as="script" />
</head>

<body>
    <div id="__next">
        <div>
            <h1>Home page</h1></div>
    </div>
    <script src="/_next/static/development/dll/dll_01ec57fc9b90d43b98a8.js?ts=1572863116051"></script>
    <script id="__NEXT_DATA__" type="application/json">{"dataManager":"[]","props":{"pageProps":{}},"page":"/","query":{},"buildId":"development","nextExport":true,"autoExport":true}</script>
    <script async="" data-next-page="/" src="/_next/static/development/pages/index.js?ts=1572863116051"></script>
    <script async="" data-next-page="/_app" src="/_next/static/development/pages/_app.js?ts=1572863116051"></script>
    <script src="/_next/static/runtime/webpack.js?ts=1572863116051" async=""></script>
    <script src="/_next/static/runtime/main.js?ts=1572863116051" async=""></script>
</body>

</html>

Tenemos 4 archivos JavaScript declarados para ser precargados en la etiqueta head, usando rel="preload" as="script":

• /_next/static/development/pages/index.js (96 LOC)
• /_next/static/development/pages/_app.js (5900 LOC)
• /_next/static/runtime/webpack.js (939 LOC)
• /_next/static/runtime/main.js (12k LOC)

Esto indica al navegador que empiece a cargar esos archivos lo antes posible, antes de que comience el flujo normal de renderizado. Sin ellos, los scripts se cargarían con un retraso adicional, esto mejora el rendimiento de carga de la página.

Entonces esos 4 archivos se cargan al final del body, junto con /_next/static/development/dll/dll_01ec57fc9b90d43b98a8.js (31k LOC), y un fragmento JSON que establece algunos valores por defecto para los datos de la página:

<script id="__NEXT_DATA__" type="application/json">
{
  "dataManager": "[]",
  "props": {
    "pageProps":  {}
  },
  "page": "/",
  "query": {},
  "buildId": "development",
  "nextExport": true,
  "autoExport": true
}
</script>

Los 4 archivos bundle ya cargados, están implementando una característica llamada división de código. El archivo index.js proporciona el código necesario para el componente index, que sirve a la ruta /, si tuviéramos más páginas tendríamos más paquetes para cada página, que sólo se cargarán si es necesario - para proporcionar un tiempo de carga más eficiente para la página.

¿Qué es ese icono de abajo a la derecha?

¿Has visto ese pequeño icono en la parte inferior derecha de la página, que parece un rayo?

Si pasas el ratón por encima, dirá "Página prerrenderizada":

Este icono, que sólo es visible en el modo de desarrollo, por supuesto, le dice que la página califica para la optimización estática automática, lo que básicamente significa que no depende de los datos que deben obtenerse en el momento de la invocación y puede ser prerenderizada y construida como un archivo HTML estático en tiempo de compilación (cuando ejecutamos npm run build).

A continuación podemos determinar esto por la ausencia del método getInitialProps() adjunto al componente de página.

Cuando este es el caso, nuestra página puede ser aún más rápida porque se servirá estáticamente como un archivo HTML en lugar de pasar por el servidor Node.js que genera la salida HTML.

Otro icono útil que puede aparecer junto a él o en lugar de él en páginas no pre-renderizadas, es un pequeño triángulo animado:

Este es un indicador de compilación, aparece cuando guardas una página y Next.js está compilando la aplicación antes de que la recarga de código en caliente (hot code reloading) se active para recargar el código en la aplicación automáticamente.

Es una forma muy agradable de determinar inmediatamente si la aplicación ya ha sido compilada y puedas probar la parte en la que estás trabajando.

Instalar React Developer Tools

Next.js se basa en React, por lo que una herramienta muy útil que es absolutamente necesario instalar (si aún no lo ha hecho) es React Developer Tools.

Disponible tanto para Chrome como para Firefox, las React Developer Tools son un instrumento esencial que puedes utilizar para inspeccionar una aplicación React.

Ahora, las React Developer Tools no son específicas de Next.js pero quiero presentarlas porque puede que no estés 100% familiarizado con todas las herramientas que React proporciona. Es mejor adentrarse un poco en las herramientas de depuración que asumir que ya las conoces.

Estas proporcionan un inspector que revela el árbol de componentes de React que construye tu página y para cada componente puedes ir a comprobar los props, el estado, hooks y mucho más.

Una vez que hayas instalado las React Developer Tools, puedes abrir las devtools del navegador normal (en Chrome, es hacer clic con el botón derecho en la página, y luego hacer clic en Inspect) y encontrarás 2 nuevos paneles: Components y Profiler.

Si mueves el ratón sobre los componentes, verás que en la página, el navegador seleccionará las partes que son renderizadas por ese componente.

Si seleccionas cualquier componente en el árbol, el panel derecho te mostrará una referencia al componente padre y los props pasados a él:

Puedes navegar fácilmente haciendo clic alrededor de los nombres de los componentes.

Puedes hacer clic en el icono del ojo en la barra de herramientas de desarrollador para inspeccionar el elemento DOM, también si utilizas el primer icono, el del ratón (que convenientemente se encuentra debajo del similar icono DevTools regular), puedes pasar por un elemento en la interfaz de usuario del navegador para seleccionar directamente el componente React que lo renderiza.

Puedes usar el icono del error (bug) para registrar los datos de un componente en la consola.

Esto es bastante impresionante porque una vez que tienes los datos impresos allí, puedes hacer clic derecho en cualquier elemento y pulsar "Almacenar como variable global". Por ejemplo aquí lo hice con la prop url pude inspeccionarla en la consola usando la variable temporal que se le asignó temp1:

Usando Source Maps, que son cargados por Next.js automáticamente en modo desarrollo, desde el panel Componentes podemos pulsar el código <> y el DevTools cambiará al panel Fuente, mostrándonos el código fuente del componente:

La pestaña Profiler es aún más impresionante, si cabe. Nos permite grabar una interacción en la app para ver qué ocurre. No puedo mostrar un ejemplo todavía, porque se necesitan al menos 2 componentes para crear una interacción, y ahora sólo tenemos uno. Hablaré de esto más adelante.

He mostrado todas las capturas de pantalla usando Chrome, pero React Developer Tools funciona de la misma manera en Firefox:

Otras técnicas de depuración que puede utilizar

Además de las React Developer Tools, que son esenciales para construir una aplicación Next.js, quiero hacer hincapié en 2 formas de depurar aplicaciones en Next.js.

La primera es obviamente console.log() y todas las demás herramientas de la API de Consola. La forma en que funcionan las aplicaciones Next hará que una declaración de tipo log funcione en la consola del navegador o en la terminal donde iniciaste Next usando npm run dev.

En particular, si la página se carga desde el servidor, cuando apuntas la URL a ella, o pulsas el botón refrescar / cmd/ctrl-R, cualquier registro de consola ocurre en la terminal.

Las subsiguientes transiciones de página que ocurran al pulsar el ratón harán que todo el registro de consola ocurra dentro del navegador.

Sólo recuerde si usted se sorprende por la falta de registro de mensajes.

Otra herramienta que es esencial es la palabra debugger. Añadiendo esta sentencia a un componente se pausará el renderizado de la página por parte del navegador:

Realmente impresionante porque ahora puedes usar el depurador del navegador para inspeccionar valores y ejecutar tu aplicación línea a línea.

También puedes usar el depurador de VS Code para depurar código del lado del servidor. Menciono esta técnica y este tutorial para configurar esto.

Añadir una segunda página al sitio web

Ahora que tenemos un buen conocimiento de las herramientas que podemos utilizar para ayudarnos a desarrollar aplicaciones Next.js, vamos a continuar desde donde dejamos nuestra primera aplicación:

Quiero añadir una segunda página a este sitio web, un blog. Va a ser servido en /blog y por el momento sólo contendrá una simple página estática, al igual que nuestro primer componente index.js:

Después de guardar el nuevo archivo, el proceso npm run dev ya en ejecución es capaz de renderizar la página, sin necesidad de reiniciarlo.

Cuando pulsamos la URL http://localhost:3000/blog tenemos la nueva página:

y esto es lo que nos dijo el terminal:

Ahora el hecho de que la URL sea /blog depende sólo del nombre del archivo y de su posición dentro de la carpeta pages.

Puedes crear una página pages/hey/ho y esta página aparecerá en la URL http://localhost:3000/hey/ho.

Lo que no importa, a efectos de la URL, es el nombre del componente dentro del archivo.

Intenta ir y ver el código fuente de la página, cuando se carga desde el servidor listará /_next/static/development/pages/blog.js como uno de los paquetes cargados y no /_next/static/development/pages/index.js como en la página de inicio. Esto se debe a que gracias a la división automática del código no necesitamos el bundle que sirve a la página de inicio. Sólo el paquete de aplicación(bundle) que sirve la página del blog.

También podemos simplemente exportar una función anónima desde blog.js:

export default () => (
  <div>
    <h1>Blog</h1>
  </div>
)

o si prefiere la sintaxis de funciones sin flechas:

export default function() {
  return (
    <div>
      <h1>Blog</h1>
    </div>
  )
}

Enlazar las dos páginas

Ahora que tenemos 2 páginas, definidas por index.js y blog.js, podemos introducir enlaces.

Los enlaces HTML normales dentro de las páginas se hacen utilizando la etiqueta a:

<a href="/blog">Blog</a>

No podemos hacer eso en Next.js.

¿Por qué? Técnicamente podemos, claro, porque esto es la Web y en la Web las cosas nunca se rompen (por eso podemos seguir usando la etiqueta <marquee>. Pero una de las principales ventajas de usar Next, es que una vez cargada una página, las transiciones a otra son muy rápidas gracias al renderizado del lado del cliente.

Si usas un simple enlace a:

const Index = () => (
  <div>
    <h1>Home page</h1>
    <a href='/blog'>Blog</a>
  </div>
)

export default Index

Ahora abre el DevTools, y el panel de Network panel (Panel Red). La primera vez que cargamos http://localhost:3000/ se cargan todos los paquetes de páginas:

Ahora, si haces clic en el botón "Conservar registro" (para evitar que se borre el panel Red), haces clic en el enlace "Blog", esto es lo que ocurre:

Tenemos todo ese JavaScript del servidor, ¡otra vez! Pero... no necesitamos todo ese JavaScript si ya lo tenemos. Sólo necesitaríamos el paquete de página blog.js, el único que es nuevo en la página.

Para solucionar este problema, utilizamos un componente proporcionado por Next, llamado Link.

Lo importamos:

import Link from 'next/link'

y luego lo usamos para envolver nuestro enlace, así:

import Link from 'next/link'

const Index = () => (
  <div>
    <h1>Home page</h1>
    <Link href='/blog'>
      <a>Blog</a>
    </Link>
  </div>
)

export default Index

Ahora si vuelves a intentar lo que hicimos anteriormente, podrás ver que sólo se carga el bundle blog.js cuando pasamos a la página del blog:

y la página se cargó tan rápido que ni siquiera apareció el spinner habitual del navegador en la pestaña. Sin embargo, la URL cambió, como puedes ver. Esto funciona perfectamente con la API del historial del navegador.

Esto es renderizado del lado del cliente en acción.

¿Y si ahora pulsas el botón Atrás? No se descarga nada, porque el navegador todavía tiene el antiguo paquete index.js, listo para cargar la ruta /index. Todo es automático.

Contenido dinámico con el router

En el capítulo anterior vimos cómo enlazar la página home con la página del blog.

Un blog es un gran caso de uso para Next.js, que seguiremos explorando en este capítulo añadiendo más artículos al blog.

Los artículos de blog tienen una URL dinámica. Por ejemplo, una entrada titulada "Hello World" podría tener la URL /blog/hello-world. Una entrada titulada "My second post" podría tener la URL /blog/my-second-post.

Este contenido es dinámico y puede proceder de una base de datos, archivos markdown u otros.

Next.js puede servir contenido dinámico basado en una URL dinámica.

Creamos una URL dinámica creando una página dinámica con la sintaxis [].

¿Cómo? Añadimos un archivo pages/blog/[id].js. Este archivo manejará todas las URLs dinámicas bajo la ruta /blog/, como las que mencionamos anteriormente: /blog/hello-world, /blog/my-second-post y más.

En el nombre del archivo, [id] dentro de los corchetes significa que cualquier cosa que sea dinámica será puesta dentro del parámetro id de la propiedad query del enrutador.

Vale, son demasiadas cosas a la vez.

¿Qué es el enrutador?

El enrutador es una biblioteca proporcionada por Next.js.

Lo importamos desde next/router:

import { useRouter } from 'next/router'

y una vez que tenemos useRouter, instanciamos el objeto router usando:

const router = useRouter()

Una vez que tenemos este objeto router, podemos extraer información de él.

En particular, podemos obtener la parte dinámica de la URL en el archivo [id].js accediendo a router.query.id.

La parte dinámica también puede ser sólo una parte de la URL, como post-[id].js.

Así que vamos a seguir adelante y aplicar todas esas cosas en la práctica.

Crea el archivo pages/blog/[id].js:

import { useRouter } from 'next/router'

export default () => {
  const router = useRouter()

  return (
    <>
      <h1>Blog post</h1>
      <p>Post id: {router.query.id}</p>
    </>
  )
}

Ahora si vas al router http://localhost:3000/blog/test, deberías ver esto:

Podemos utilizar este parámetro id para recoger el artículo de una lista de articulos. De una base de datos, por ejemplo. Para mantener las cosas simples vamos a añadir un archivoposts.json en la carpeta raíz del proyecto:

{
  "test": {
    "title": "test post",
    "content": "Hey some post content"
  },
  "second": {
    "title": "second post",
    "content": "Hey this is the second post content"
  }
}

Ahora podemos importarlo y buscar el puesto a partir de la clave id:

import { useRouter } from 'next/router'
import posts from '../../posts.json'

export default () => {
  const router = useRouter()

  const post = posts[router.query.id]

  return (
    <>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </>
  )
}

La recarga de la página debería mostrarnos este resultado:

Pero no es así. En su lugar, obtenemos un error en la consola, y un error en el navegador también:

¿Por qué? Porque... durante el renderizado, cuando se inicializa el componente, los datos no están ahí todavía. Veremos cómo proporcionar los datos al componente con getInitialProps en la próxima lección.

Por ahora, añade una pequeña comprobación if (!post) return <p></p> antes de devolver el JSX:

import { useRouter } from 'next/router'
import posts from '../../posts.json'

export default () => {
  const router = useRouter()

  const post = posts[router.query.id]
  if (!post) return <p></p>

  return (
    <>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </>
  )
}

Ahora las cosas deberían funcionar. Inicialmente el componente se muestra sin la información dinámica router.query.id. Después de la representación, Next.js activa una actualización con el valor de la consulta y la página muestra la información correcta.

Y si ves el código fuente, hay una etiqueta <p>vacía en el HTML

Pronto solucionaremos este problema que no implementa SSR y esto perjudica tanto a los tiempos de carga para nuestros usuarios, SEO y el compartir en redes sociales como ya comentamos.

Podemos completar el ejemplo del blog listando esas entradas en pages/blog.js:

import posts from '../posts.json'

const Blog = () => (
  <div>
    <h1>Blog</h1>

    <ul>
      {Object.entries(posts).map((value, index) => {
        return <li key={index}>{value[1].title}</li>
      })}
    </ul>
  </div>
)

export default Blog

Y podemos enlazarlos a las páginas individuales de los posts, importando Link desde next/link usándolo dentro del bucle de posts:

import Link from 'next/link'
import posts from '../posts.json'

const Blog = () => (
  <div>
    <h1>Blog</h1>

    <ul>
      {Object.entries(posts).map((value, index) => {
        return (
          <li key={index}>
            <Link href='/blog/[id]' as={'/blog/' + value[0]}>
              <a>{value[1].title}</a>
            </Link>
          </li>
        )
      })}
    </ul>
  </div>
)

export default Blog

Búsqueda previa

Anteriormente mencioné como el componente Link Next.js puede ser usado para crear enlaces entre 2 páginas cuando lo usas en Next.js, maneja de forma transparente el enrutamiento frontend por nosotros, así que cuando un usuario hace clic en un enlace, frontend se encarga de mostrar la nueva página sin desencadenar un nuevo ciclo de petición y respuesta cliente/servidor, como sucede normalmente con las páginas web.

Hay otra cosa que Next.js hace por ti cuando utilizas Link.

Tan pronto como un elemento envuelto dentro de <Link> aparece en la ventana gráfica (lo que significa que es visible para el usuario del sitio web), Next.js precarga la URL a la que apunta, siempre y cuando sea un enlace local (en su sitio web), haciendo que la aplicación sea súper rápida para el espectador.

Este comportamiento sólo se activa en modo de producción (hablaremos de esto en profundidad más adelante), lo que significa que tienes que detener la aplicación si la estás ejecutando con npm run dev, compilar tu bundle de producción con npm run build y ejecutarlo con npm run start en su lugar.

Usando el inspector de Network(red) en DevTools te darás cuenta de que cualquier enlace por encima del pliegue, en la carga de la página, comienza la precarga tan pronto como el evento load se ha disparado en tu página (se dispara cuando la página está completamente cargada, y sucede después del evento DOMContentLoaded).

Cualquier otra etiqueta Link que no esté en la ventana gráfica será precargada cuando el usuario haga scroll npm run dev.

La precarga es automática en conexiones de alta velocidad (Wifi y 3g+), a menos que el navegador envíe el encabezado HTTP Save-Data.

Usted puede optar por no precargar instancias de Link individuales estableciendo la prop prefetch a false:

<Link href="/a-link" prefetch={false}>
  <a>A link</a>
</Link>

Uso del router para detectar el enlace activo

Una característica muy importante cuando se trabaja con enlaces, es determinar cuál es la URL actual y en particular asignar una clase al enlace activo, para que podamos darle un estilo diferente a los demás.

Esto es especialmente útil en la cabecera de su sitio, por ejemplo.

El componente Link por defecto de Next.js que se ofrece en next/link no hace esto automáticamente por nosotros.

Podemos crear un componente Link nosotros mismos, y lo almacenamos en un archivo Link.js en la carpeta Components e importamos eso en lugar del predeterminado next/link.

En este componente, primero importaremos React de react, Link de next/link y el hook useRouter de next/router.

Dentro del componente determinamos si el nombre de la ruta actual coincide con la href  prop del componente y si es así añadimos la clase selected a los hijos.

Finalmente devolvemos estos niños con la clase actualizada, utilizando React.cloneElement():

import React from 'react'
import Link from 'next/link'
import { useRouter } from 'next/router'

export default ({ href, children }) => {
  const router = useRouter()

  let className = children.props.className || ''
  if (router.pathname === href) {
    className = `${className} selected`
  }

  return <Link href={href}>{React.cloneElement(children, { className })}</Link>
}

Uso de next/router

Ya hemos visto cómo utilizar el componente Link para manejar el enrutamiento de forma declarativa en las aplicaciones Next.js.

Es realmente práctico gestionar el enrutamiento en JSX, pero a veces necesitas activar un cambio de enrutamiento mediante programación.

En este caso, puedes acceder directamente al enrutador Next.js, proporcionado en el paquete next/router, y llamar a su método push().

He aquí un ejemplo de acceso al enrutador:

import { useRouter } from 'next/router'

export default () => {
  const router = useRouter()
  //...
}

Una vez que obtenemos el objeto router invocando useRouter(), podemos utilizar sus métodos.

Este es el router del lado del cliente, por lo que los métodos sólo deben ser utilizados en el código frontend. La forma más fácil de asegurar esto es envolver las llamadas en el hook useEffect() de React o dentro de componentDidMount()en los componentes con estado de React.

Las más utilizadas son push() y prefetch().

push() nos permite desencadenar programáticamente un cambio de URL, en el frontend:

router.push('/login')

prefetch() nos permite precargar una URL programada, lo que resulta útil cuando no disponemos de una etiqueta Link que gestione automáticamente la precarga por nosotros:

router.prefetch('/login')

Ejemplo completo:

import { useRouter } from 'next/router'

export default () => {
  const router = useRouter()

  useEffect(() => {
    router.prefetch('/login')
  })
}

También puedes utilizar el router para escuchar eventos de cambio de ruta.

Proporcionar datos a los componentes mediante getInitialProps

En el capítulo anterior tuvimos un problema con la generación dinámica de la página de publicación, porque el componente requería algunos datos por adelantado y cuando intentamos obtener los datos del archivo JSON:

import { useRouter } from 'next/router'
import posts from '../../posts.json'

export default () => {
  const router = useRouter()

  const post = posts[router.query.id]

  return (
    <>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </>
  )
}

Obtenemos este error:

¿Cómo lo solucionamos? ¿Y cómo hacemos que SSR funcione para rutas dinámicas?

Debemos dotar al componente de props, utilizando una función especial llamada getInitialProps() que se adjunta al componente.

Para ello, primero nombramos el componente:

const Post = () => {
  //...
}

export default Post

Entonces le añadimos la función:

const Post = () => {
  //...
}

Post.getInitialProps = () => {
  //...
}

export default Post

Esta función obtiene como argumento un objeto que contiene varias propiedades. En concreto, lo que nos interesa ahora es que obtenga el objeto query, el que usamos anteriormente para obtener el id del post.

Así que podemos obtenerlo usando la sintaxis de desestructuración de objetos:

Post.getInitialProps = ({ query }) => {
  //...
}

Ahora podemos devolver el post desde esta función:

Post.getInitialProps = ({ query }) => {
  return {
    post: posts[query.id]
  }
}

Y también podemos eliminar la importación de useRouter y obtenemos el post de la propiedad props pasada al componente Post:

import posts from '../../posts.json'

const Post = props => {
  return (
    <div>
      <h1>{props.post.title}</h1>
      <p>{props.post.content}</p>
    </div>
  )
}

Post.getInitialProps = ({ query }) => {
  return {
    post: posts[query.id]
  }
}

export default Post

Ahora no habrá ningún error, el SSR estará funcionando como se esperaba, como se puede ver comprobando la vista fuente:

La función getInitialProps se ejecutará en el lado del servidor, pero también en el lado del cliente, cuando naveguemos a una nueva página utilizando el componente Link como hemos hecho.

Es importante tener en cuenta que getInitialProps obtiene el objeto de contexto que recibe, además del objeto de query(consulta) estas otras propiedades:

• pathname: la sección path de la URL
• asPath: Cadena de texto de la ruta real (incluida la consulta) que se muestra en el navegador

que en el caso de llamar ahttp://localhost:3000/blog/test dará como resultado respectivamente:

• /blog/[id]
• /blog/test

Y en el caso del renderizado del lado del servidor, también recibirá:

• req: el objeto de solicitud HTTP
• res: el objeto de respuesta HTTP
• err: un objeto de error

req y res te resultarán familiares si has codificado con Node.js.

CSS

¿Cómo damos estilo a los componentes React en Next.js?

Tenemos mucha libertad, porque podemos usar la librería de nuestra preferencia.

Pero Next.js viene con styled-jsx incorporado, porque es una librería construida por la misma gente que trabaja en Next.js.

Se trata de una biblioteca muy interesante que nos proporciona CSS de ámbito limitado, lo que resulta muy útil para el mantenimiento, ya que el CSS sólo afecta al componente al que se aplica.

Creo que este es un gran enfoque para escribir CSS, sin la necesidad de aplicar bibliotecas adicionales o preprocesadores que añaden complejidad.

Para añadir CSS a un componente React en Next.js lo insertamos dentro de un snippet en el JSX, que empieza por

<style jsx>{`

y termina con

`}</style>

Dentro de estos extraños bloques escribimos CSS plano, como haríamos en un archivo .css:

<style jsx>{`
  h1 {
    font-size: 3rem;
  }
`}</style>

Lo escribes dentro del JSX, así:

const Index = () => (
  <div>
		<h1>Home page</h1>

		<style jsx>{`
		  h1 {
		    font-size: 3rem;
		  }
		`}</style>
  </div>
)

export default Index

Dentro del bloque podemos utilizar la interpolación para cambiar dinámicamente los valores. Por ejemplo, aquí suponemos que el componente padre pasa una propiedad de size y la utilizamos en el bloque styled-jsx:

const Index = props => (
  <div>
		<h1>Home page</h1>

		<style jsx>{`
		  h1 {
		    font-size: ${props.size}rem;
		  }
		`}</style>
  </div>
)

Si desea aplicar un CSS de forma global, no limitado a un componente, añada la palabra clave global a la etiqueta style:

<style jsx global>{`
body {
  margin: 0;
}
`}</style>

Si quieres importar un archivo CSS externo en un componente Next.js, primero tienes que instalar @zeit/next-css:

npm install @zeit/next-css

Luego creas un archivo de configuración en la raíz del proyecto, llamado next.config.js, con este contenido:

const withCSS = require('@zeit/next-css')
module.exports = withCSS()

Tras reiniciar la aplicación Next, ya puedes importar CSS como haces normalmente con las bibliotecas o componentes JavaScript:

import '../style.css'

También puede importar un archivo SASS directamente, utilizando en su lugar la biblioteca @zeit/next-sass.

Rellenar la etiqueta head con etiquetas personalizadas

Desde cualquier componente de página Next.js, puede añadir información a la cabecera de la página.

Esto es útil cuando:

• Desea personalizar el título de la página
• Desea cambiar una etiqueta meta

¿Cómo puedes hacerlo?

Dentro de cada componente puedes importar el componente Head desde next/head e incluirlo en la salida JSX de tu componente:

import Head from 'next/head'

const House = props => (
  <div>
    <Head>
      <title>The page title</title>
    </Head>
    {/* Resto de JSX */}
  </div>
)

export default House

Puedes añadir cualquier etiqueta HTML que quieras que aparezca en la sección <head> de la página.

Al montar el componente, Next.js se asegurará de que las etiquetas dentro de Head se añadan al encabezado de la página. Lo mismo al desmontar el componente, Next.js se encargará de eliminar esas etiquetas.

Añadir un componente envoltorio(wrapper component)

Todas las páginas de tu sitio tienen más o menos el mismo aspecto. Hay una ventana chrome, una capa base común y sólo quieres cambiar lo que hay dentro.

Hay una barra de navegación, una barra lateral, y luego el contenido real.

¿Cómo se construye este sistema en Next.js?

Hay dos maneras. Una es usando un Componente de Orden Superior(HOC), creando un componente components/Layout.js:

export default Page => {
  return () => (
    <div>
      <nav>
        <ul>....</ul>
      </hav>
      <main>
        <Page />
      </main>
    </div>
  )
}

Ahí podemos importar componentes separados para el encabezado y/o la barra lateral y también podemos añadir todo el CSS que necesitemos.

Y lo usas en cada página así:

import withLayout from '../components/Layout.js'

const Page = () => <p>Here's a page!</p>

export default withLayout(Page)

Pero encontré que esto funciona sólo para casos simples, donde no es necesario llamar a getInitialProps() en una página.

¿Por qué?

Porque getInitialProps() sólo se llama en el componente página. Pero si exportamos el componente de orden superior(HOC) withLayout() desde una página, Page.getInitialProps() no es llamado. withLayout.getInitialProps() sí lo sería.

Para evitar complicar innecesariamente nuestra base de código, el enfoque alternativo es utilizar props:

export default props => (
  <div>
    <nav>
      <ul>....</ul>
    </hav>
    <main>
      {props.content}
    </main>
  </div>
)

y en nuestras páginas ahora lo usamos así:

import Layout from '../components/Layout.js'

const Page = () => (
  <Layout content={(
    <p>Here's a page!</p>
  )} />
)

Este enfoque nos permite utilizar getInitialProps() dentro de nuestro componente de página, con el único inconveniente de tener que escribir el componente JSX dentro del prop content:

import Layout from '../components/Layout.js'

const Page = () => (
  <Layout content={(
    <p>Here's a page!</p>
  )} />
)

Page.getInitialProps = ({ query }) => {
  //...
}

API Routes

Además de crear rutas de página(page routes), lo que significa que las páginas se sirven al navegador como páginas web, Next.js puede crear rutas API(API routes).

Esta es una característica muy interesante porque significa que Next.js puede utilizarse para crear un frontend para datos que son almacenados y recuperados por el propio Next.js, transfiriendo JSON a través de peticiones fetch.

Las rutas API viven bajo la carpeta /pages/api/ y están mapeadas al endpoint /api.

Esta característica es muy útil a la hora de crear aplicaciones.

En esas rutas, escribimos código Node.js (en lugar de código React). Es un cambio de paradigma, pasas del frontend al backend, pero muy fluido.

Imagina que tienes un archivo /pages/api/comments.js, cuyo objetivo es devolver los comentarios de una entrada de blog como JSON.

Digamos que tienes una lista de comentarios almacenados en un archivo comments.json:

[
  {
    "comment": "First"
  },
  {
    "comment": "Nice post"
  }
]

He aquí un ejemplo de código, que devuelve al cliente la lista de comentarios:

import comments from './comments.json'

export default (req, res) => {
  res.status(200).json(comments)
}

Esto escuchará en la URL /api/comments para peticiones GET, puedes intentar llamarlo usando tu navegador:

Las rutas del API pueden utilizar enrutamiento dinámico como las páginas, use la sintaxis [] para crear una ruta de API dinámica, como /pages/api/comments/[id].js que recuperará los comentarios específicos de un id de entrada.

Dentro de [id].js puedes recuperar el valor del id buscándolo dentro del objeto req.query:

import comments from '../comments.json'

export default (req, res) => {
  res.status(200).json({ post: req.query.id, comments })
}

Aquí puedes ver el código anterior en acción:

En páginas dinámicas, tendrías que importar useRouter de next/router, luego obtener el objeto router usando const router = useRouter(), luego podríamos obtener el valor id usando router.query.id.

En el lado del servidor todo es más fácil, ya que la consulta se adjunta al objeto de solicitud.

Si haces una petición POST, todo funciona de la misma manera - todo va a través de esa exportación por defecto.

Para separar POST de GET y otros métodos HTTP (PUT, DELETE), busca el valor req.method:

export default (req, res) => {
  switch (req.method) {
    case 'GET':
      //...
      break
    case 'POST':
      //...
      break
    default:
      res.status(405).end() //Method Not Allowed
      break
  }
}

Además de req.query y req.method que ya vimos, tenemos acceso a las cookies haciendo referencia a req.cookies, el cuerpo de la petición en req.body.

Bajo el capó, todo esto es impulsado por Micro, una biblioteca que impulsa microservicios HTTP asíncronos, hecha por el mismo equipo que construyó Next.js.

Puedes hacer uso de cualquier middleware Micro en nuestras rutas API para añadir más funcionalidad.

Ejecutar código sólo en el lado del servidor o en el lado del cliente

En tus componentes de página, puedes ejecutar código sólo en el lado del servidor o en el lado del cliente, comprobando la propiedad window.

Esta propiedad sólo existe dentro del navegador, puedes comprobar

if (typeof window === 'undefined') {

}

y añadir el código del lado del servidor en ese bloque.

Del mismo modo, puede ejecutar código del lado del cliente sólo comprobando

if (typeof window !== 'undefined') {

}

Consejo JS: Usamos el operador typeof aquí porque no podemos detectar que un valor sea undefined de otra forma. No podemos hacer if (window === undefined) porque obtendríamos un error de ejecución "window is not defined".

Next.js, como optimización en tiempo de compilación, también elimina de los paquetes el código que utiliza esas comprobaciones. Un paquete del lado del cliente no incluirá el contenido envuelto en un bloque if (typeof window === 'undefined') {}.

Despliegue de la versión de producción

El despliegue de una aplicación siempre se deja para el final en los tutoriales.

Aquí quiero introducirlo antes, sólo porque es tan fácil desplegar una aplicación Next.js que podemos sumergirnos en ello ahora, y luego pasar a otros temas más complejos más adelante.

Recuerda que en el capítulo "Cómo instalar Next.js" te dije que añadieras esas 3 líneas a la sección del script package.json:

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

Hasta ahora usábamos npm run dev, para llamar al comando next instalado localmente en node_modules/next/dist/bin/next. Esto inició el servidor de desarrollo, que nos proporcionó mapas de código fuente(sourcemaps) y recarga de código en caliente(hot code reloading), dos características muy útiles durante la depuración.

El mismo comando puede ser invocado para construir el sitio web pasando la bandera build, ejecutando npm run build. A continuación, el mismo comando se puede utilizar para iniciar la aplicación de producción pasando la bandera start, ejecutando npm run start.

Esos 2 comandos son los que debemos invocar para desplegar con éxito la versión de producción de nuestro sitio localmente. La versión de producción está altamente optimizada y no viene con mapas de fuentes(sourcemaps) y otras cosas como la recarga de código en caliente(hot code reloading) que no sería beneficioso para nuestros usuarios finales.

Por lo tanto, vamos a crear un despliegue de producción de nuestra aplicación. Construirlo usando:

npm run build

La salida del comando nos dice que algunas rutas (/ y /blog están ahora prerenderizadas como HTML estático, mientras que /blog/[id] será servido por el backend Node.js.

A continuación, puede ejecutar npm run start para iniciar el servidor de producción localmente:

npm run start

Visitar http://localhost:3000 nos muestra la versión de producción de la aplicación, localmente.

Despliegue en Now

En el capítulo anterior desplegamos la aplicación Next.js localmente.

Cómo la desplegamos en un servidor web real, para que otras personas puedan acceder a ella?

Una de las formas más sencillas de desplegar una aplicación Next es a través de la plataforma Now creada por Zeit, la misma empresa que creó el proyecto Open Source Next.js. Puedes utilizar Now para desplegar aplicaciones Node.js, sitios web estáticos y mucho más.

Ahora hace que el paso de despliegue y distribución de una aplicación sea muy, muy sencillo y rápido, y además de aplicaciones Node.js, también admite el despliegue de Go, PHP, Python y otros lenguajes.

Puedes pensar en ella como en la "nube", ya que no sabes realmente dónde se desplegará tu aplicación, pero sabes que tendrás una URL a la que podrás acceder.

Now es gratuito para empezar a usarlo, con un generoso plan gratuito que actualmente incluye 100 GB de alojamiento, 1000 invocaciones de funciones serverless, 1000 invocaciones al mes, 100 GB de ancho de banda al mes y una ubicación CDN. La página de precios ayuda a hacerse una idea de los costes si necesita más.

La mejor manera de empezar a usar Now es utilizando la CLI oficial de Now:

npm install -g now

Una vez que el comando esté disponible, ejecute

now login

La aplicación te pide el correo electrónico.

Si aún no se ha registrado, cree una cuenta en https://zeit.co/signup antes de continuar y, a continuación, añada su dirección de correo electrónico al cliente CLI.

Una vez hecho esto, desde la carpeta raíz del proyecto Next.js ejecuta

now

y la aplicación se desplegará instantáneamente en la nube de Now y se le proporcionará la URL única de la aplicación:

Una vez ejecutado el programa now, la aplicación se despliega en una URL aleatoria bajo el dominio now.sh.

Podemos ver 3 URLs diferentes en la salida dada en la imagen:

• https://firstproject-2pv7khwwr.now.sh
• https://firstproject-sepia-ten.now.sh
• https://firstproject.flaviocopes.now.sh

¿Por qué tantos?
La primera es la URL que identifica el despliegue. Cada vez que despleguemos la aplicación, esta URL cambiará.

Usted puede probar inmediatamente cambiando algo en el código del proyecto y ejecutar de nuevo el comando now:

Las otras 2 URLs no cambiarán. La primera es aleatoria, la segunda es el nombre de tu proyecto (que por defecto es la carpeta del proyecto actual, tu nombre de cuenta y luego now.sh.

Si visitas la URL, verás la aplicación desplegada en producción.

Usted puede configurar Now para servir el sitio a su propio dominio personalizado o subdominio, pero no voy a adentrarme en eso ahora.

El subdominio now.sh es suficiente para nuestras pruebas.

Análisis de los paquetes de aplicaciones

Next nos proporciona una forma de analizar los paquetes de código que se generan.

Abre el archivo package.json de la app y en la sección scripts añade estos 3 nuevos comandos:

"analyze": "cross-env ANALYZE=true next build",
"analyze:server": "cross-env BUNDLE_ANALYZE=server next build",
"analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build"

Asi:

{
  "name": "firstproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "analyze": "cross-env ANALYZE=true next build",
    "analyze:server": "cross-env BUNDLE_ANALYZE=server next build",
    "analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "next": "^9.1.2",
    "react": "^16.11.0",
    "react-dom": "^16.11.0"
  }
}

y luego instale esos 2 paquetes:

npm install --dev cross-env @next/bundle-analyzer

Crea un archivo next.config.js en la raíz del proyecto, con este contenido:

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true'
})

module.exports = withBundleAnalyzer({})

Ahora ejecute el comando

npm run analyze

Esto debería abrir 2 páginas en el navegador. Una para los paquetes cliente y otra para los paquetes servidor:

Esto es increíblemente útil. Puedes inspeccionar lo que está ocupando más espacio en los paquetes, y también puedes utilizar la barra lateral para excluir paquetes, para una visualización más fácil de los más pequeños:

Módulos de carga diferida

Poder analizar visualmente un bundle es genial, porque podemos optimizar nuestra aplicación de una manera adecuada.

Digamos que necesitamos cargar la librería Moment en nuestro blog posts. Ejecuta:

npm install moment

para incluirlo en el proyecto.

Ahora vamos a simular que lo necesitamos en dos rutas diferentes: /blog y /blog/[id].

Lo importamos en pages/blog/[id].js:

import moment from 'moment'

...

const Post = props => {
  return (
    <div>
      <h1>{props.post.title}</h1>
      <p>Published on {moment().format('dddd D MMMM YYYY')}</p>
      <p>{props.post.content}</p>
    </div>
  )
}

Sólo estoy añadiendo la fecha de hoy, como ejemplo.

Esto incluirá Moment.js en el paquete de la página de la entrada del blog, como puedes ver ejecutando npm run analyze:

Observa que ahora tenemos una entrada roja en /blog/[id], ¡la ruta a la que añadimos Moment.js!

Ha pasado de ~1kB a 350kB, una gran cosa. Y esto se debe a que la propia biblioteca Moment.js ocupa 349kB.

La visualización de bundles del cliente nos muestra ahora que el bundle más grande es el de la página, que antes era muy poco. Y el 99% de su código es Moment.js.

Cada vez que cargamos una entrada de blog vamos a tener todo este código transferido al cliente. Lo cual no es lo ideal.

Una solución sería buscar una biblioteca con un tamaño más pequeño, como Moment.js no es conocido por ser ligero (especialmente fuera de la caja con todos los locales incluidos), pero vamos a suponer por el bien del ejemplo que debemos usarlo.

Lo que podemos hacer en su lugar es separar todo el código de Moment en un paquete separado.

¿Cómo? En lugar de importar Moment a nivel de componente, realizamos una importación asíncrona dentro de getInitialProps y calculamos el valor a enviar al componente.

Recuerda que no podemos devolver objetos complejos dentro del objeto devuelto por getInitialProps(), así que calculamos la fecha dentro de él:

import posts from '../../posts.json'

const Post = props => {
  return (
    <div>
      <h1>{props.post.title}</h1>
      <p>Published on {props.date}</p>
      <p>{props.post.content}</p>
    </div>
  )
}

Post.getInitialProps = async ({ query }) => {
  const moment = (await import('moment')).default()
  return {
    date: moment.format('dddd D MMMM YYYY'),
    post: posts[query.id]
  }
}

export default Post

¿Ves esa llamada especial a .default() después de await import? Es necesaria para hacer referencia a la exportación por defecto en una importación dinámica (véase https://v8.dev/features/dynamic-import)

Ahora si ejecutamos npm run analyze de nuevo, podemos ver esto:

Nuestro bundle /blog/[id] vuelve a ser muy pequeño, ya que Moment se ha trasladado a su propio archivo bundle, cargado por separado por el navegador.

¿Qué hacer a partir de ahora?

Hay mucho más que saber sobre Next.js. No he hablado de la gestión de sesiones de usuario con login, serverless, gestión de bases de datos, etc.

El objetivo de este Manual no es enseñártelo todo, sino introducirte, poco a poco, el potencial de Next.js.

El siguiente paso que recomiendo es leer detenidamente la documentación oficial de Next.js para obtener más información sobre todas las características y funcionalidades de las que no he hablado y echar un vistazo a todas las funcionalidades adicionales introducidas por los plugins de Next.js, algunas de las cuales son bastante sorprendentes.

Puedes ponerte en contacto conmigo en Twitter @flaviocopes.

Visite también mi sitio web, flaviocopes.com.

Nota: puede descargar una versión PDF / ePub / Mobi de este tutorial para poder leerlo sin conexión.

La desestructuración en JavaScript es un método simplificado para extraer múltiples propiedades de un arreglo tomando la estructura y deconstruyéndola en sus partes integrantes mediante asignaciones, esto usa una sintaxis similar a la de los literales de arreglo.

Crea un patrón que describe el tipo de valor que espera y realiza la asignación. La desestructuración de arreglos usa la posición de manera ordenada.

Véase el siguiente fragmento de código.

let [primero, segundo, tercero] = ["Laide", "Gabriel", "Jets"];

let primero = "laide",
    segundo = "Gabriel",
    tercero = "Jets";

No se pueden usar números para desestructurar. Numeros producirá un error porque los números no pueden ser nombres de variables en JS.

let [1, 2, 3] = ["Laide", "Ola", "Jets"];

Esta sintaxis provoca un error.

La desestructuración ha hecho que extraer datos de un arreglo sea muy sencillo y legible. Imagina intentar extraer datos de un arreglo anidado con 5 o 6 niveles. Sería muy tedioso. Se utiliza un literal de arreglo en el lado izquierdo de la asignación.

let cosa = ["Mesa", "Silla", "Ventilador"];
let [a, b, c] = cosa;

Toma cada variable del literal del arreglo en el lado izquierdo y la mapea al mismo elemento en el mismo índice del arreglo.

console.log(a); // Salida: Mesa
console.log(b); // Salida: Silla
console.log(c); // Salida: Ventilador

La declaración y la asignación pueden realizarse por separado en la desestructuración.

let primero, segundo;
[primero, segundo] = ["Hombre", "Mujer"];

Si el número de variables pasadas a los literales del arreglo de desestructuración es mayor que los elementos del arreglo, entonces las variables que no están mapeadas a ningún elemento del arreglo devuelven undefined.

let cosas = ["Mesa", "Silla", "Ventilador", "Alfombra"];
let [a, b, c, d, e] = cosas;
console.log(c); // Salida: Ventilador
console.log(d); // Salida: Alfombra
console.log(e); // Salida: undefined

Si el número de variables pasadas a los literales del arreglo de desestructuración es menor que los elementos del arreglo, se dejan los elementos sin variables a los que mapear. No se produce ningún error.

let cosas = ["Mesa", "Silla", "Ventilador", "Alfombra"];
cosas [a, b, c] = cosas;
console.log(c); // Salida: Ventilador

Desestructuración de arreglos retornados

La desestructuración hace que trabajar con una función que devuelve un arreglo como valor sea más preciso. Funciona para todos los iterables.

function corredoras(){
    return ["Sandra", "Ola", "Chi"];
}

let [a, b, c] = corredoras();
console.log(a); // Salida: Sandra
console.log(b); // Salida: Ola
console.log(c); // Salida: Chi

Valor por defecto

La desestructuración permite asignar un valor por defecto a una variable si no se pasa ningún valor o undefined. Es proporcionar una alternativa cuando no se encuentra nada.

let a, b;
[a = 40, b = 4] = [];
console.log(a); // Salida: 40
console.log(b); // Salida: 4

[a = 40, b = 4] = [1, 23];
console.log(a); // Salida: 1
console.log(b); // Salida: 23

Los valores por defecto también pueden referirse a otras variables, incluida la del mismo literal del arreglo.

let [first = "Cotlin", second = first] = [];
console.log(first); // Salida: Cotlin
console.log(second); // Salida: Cotlin

let [first = "Cotlin", second = first] = ["Koku"];
console.log(first); // Salida: Koku
console.log(second); // Salida: Koku

let [first = "Cotlin", second = first] = ["Koku", "Lydia"];
console.log(first); // Salida: Koku
console.log(second); // Salida: Lydia

Ignorar algunos valores

La desestructuración permite asignar una variable a los elementos que le interesan. Puede ignorar u omitir los demás elementos del arreglo usando comas al final.

let a, b;
[a, , b] = ["Señor", "Corona", "Rosas"];

console.log(a); // Salida: Señor
console.log(b); // Salida: Rosas

El parámetro Rest y la sintaxis Spread

El nuevo operador (...) que se añadió en ES6 puede utilizarse en la desestructuración. Si el operador (...) aparece a la izquierda en la desestructuración, se trata de un PARÁMETRO REST. Un parámetro Rest se utiliza para mapear todos los elementos restantes del arreglo que no han sido mapeados a la propia variable Rest. Es como recoger lo que queda. La variable Rest debe ser siempre la última, de lo contrario se produce un SyntaxError.

let planetas = ["Mercurio", "Tierra", "Venus", "Marte", "Pluton", "Saturno"];
let [primero, tercero, ...otros] = planetas;

console.log(primero); // Salida: Mercurio
console.log(tercero); // Salida: Venus
console.log(otros); // Salida: ["Marte", "Pluton", "Saturno"]

Si el operador (...) aparece a la derecha en la desestructuración, se trata de un SINTAXIS SPREAD. Toma todos los demás elementos del arreglo que no tienen ninguna variable asignada y la asigna a la variable restante.

let planetas = ["Venus", "Marte", "Pluton", "Saturno"];

let [primero, segundo, ...rest] = ["Mercurio", "Tierra", ...planetas, "Neptuno"];

console.log(primero); // Salida: Mercurio
console.log(segundo); // Salida: Tierra
console.log(rest); // Salida: [ 'Venus', 'Marte', 'Pluton', 'Saturno', 'Neptuno']

Cuando puedes tener más variables en el lado izquierdo, mapea los elementos individuales del arreglo igualmente a las variables.

let planetas = ["Mercurio", "Tierra", "Venus", "Marte", "Pluton", "Saturn"];

let [uno, dos, ...rest] = ["Mercurio", ...planets];

console.log(uno); // Salida: Mercurio
console.log(dos); // Salida: Mercurio
console.log(rest); // Salida: ["Tierra", "Venus", "Marte", "Pluton", "Saturno"]

planets = ["Mercurio", "Tierra", "Venus", "Marte", "Pluton", "Saturno"];

let [primero, segundo, tercero, cuarto, ...rest] = ["Mercurio", "Tierra", ...planetas];

console.log(primero); // Salida: Mercurio
console.log(segundo); // Salida: Tierra
console.log(tercero); // Salida: Mercurio
console.log(cuarto); // Salida: Tierra
console.log(rest); // Salida: ["Venus", "Marte", "Pluton", "Saturno"]

Intercambio de variables

Una desestructuración puede emplearse para intercambiar los valores de dos variables.

let a, b;
[a, b] = ["Hombre", "Mujer"];
[a, b] = [b, a];

console.log(a); // Salida: Mujer
console.log(b); // Salida: Hombre

Desestructuración de arreglos anidados

También puede realizar la desestructuración anidada con arreglos. El elemento correspondiente debe ser un arreglo para poder usar un literal de arreglo con desestructuración anidada para asignar elementos de la misma a variables locales.

let numeros = [8, [1, 2, 3], 10, 12];
let [a, [d, e, f]] = numeros;

console.log(a); // Salida: 8
console.log(d); // Salida: 1
console.log(e); // Salida: 2

Desestructuración de múltiples arreglos

Puede desestructurar un arreglo más de una vez en el mismo fragmento de código.

let lugares = ["primero", "segundo", "tercero", "cuarto"];
let [a, b, , d] = [f, ...rest] = lugares;

console.log(a); // Salida: primero
console.log(d); // Salida: cuarto
console.log(f); // Salida: primero
console.log(rest); // Salida: ["segundo", "tercero", "cuarto"]

Conclusión

Puede copiar y pegar el código en el sitio web de Babel para ver cómo sería el código si no existiera la desestructuración. Habrías escrito más líneas de código, pero la desestructuración lo simplifica todo.

Una presentación de diapositivas es una secuencia de imágenes o texto que consiste en mostrar un elemento de la secuencia en un intervalo de tiempo determinado.

En este tutorial puedes crear una secuencia de diapositivas siguiendo estos sencillos pasos:

Escriba en el HTML

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Slideshow</title>
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <div id="slideshow-example" data-component="slideshow">
        <div role="list">
          <div class="slide">
            <img src="" alt="">
          </div>
          <div class="slide">
            <img src="" alt="">
          </div>
          <div class="slide">
            <img src="" alt="">
          </div>
        </div>
      </div>
    <script src="slideshow.js"></script>
    </body>
  </html>

Escribir estilos para ocultar diapositivas y mostrar solo una diapositiva.

Para ocultar las diapositivas tienes que darles un estilo por defecto. Esto indicará que solo muestres una diapositiva si está activa o si quieres mostrarla.

  [data-component="slideshow"] .slide {
    display: none;
  }

  [data-component="slideshow"] .slide.active {
    display: block;
  }

Cambia las diapositivas en un intervalo de tiempo.

El primer paso para cambiar las diapositivas que se muestran es seleccionar el componente padre de las diapositivas y luego sus diapositivas.

Cuando selecciones las diapositivas tienes que ir sobre cada diapositiva y añadir o quitar la clase active dependiendo de la diapositiva que quieras mostrar. Después solo tienes que repetir el proceso durante un intervalo de tiempo determinado.

Tenga en cuenta que cuando elimina una clase active de una diapositiva, la está ocultando debido a los estilos definidos en el paso anterior. Pero cuando añades una clase active a la diapositiva, estás sobrescribiendo el estilo display:none a display:block, en consecuencia la diapositiva se mostrará a los usuarios.

  var slideshows = document.querySelectorAll('[data-component="slideshow"]');
  
  // Aplicar a todas las diapositivas que defina con la marca escrita
  slideshows.forEach(initSlideShow);

  function initSlideShow(slideshow) {

    var slides = document.querySelectorAll(`#${slideshow.id} [role="list"] .slide`); // Obtener una matriz de diapositivas

    var index = 0, time = 5000;
    slides[index].classList.add('active');  
    
    setInterval( () => {
      slides[index].classList.remove('active');
      
      // Recorre cada diapositiva incrementando el índice
      index++;
      
      // Si repasa todas las diapositivas, reinicie el índice para mostrar la primera diapositiva y volver a empezar
      if (index === slides.length) index = 0; 
      
      slides[index].classList.add('active');

    }, time);
  }

Ejemplo de Codepen siguiendo este tutorial

Este tutorial le mostrará cómo desenfocar caras, fondos, texto y más, usando Photoshop CC.

Vamos a hacer uso del efecto de desenfoque gaussiano. El primer paso es abrir la imagen que desea modificar en Photoshop CC.

Cómo difuminar toda una imagen en Photoshop

Si desea desenfocar toda la imagen, elija Filtro > Desenfocar > Desenfoque Gaussiano...

Ajusta el radio para añadir más o menos porcentaje de desenfoque a la imagen. A continuación, haz clic en "Aceptar".

¡Has terminado!

Cómo difuminar caras en Photoshop (método fácil)

Si quieres desenfocar una cara en Photoshop, aquí tienes una forma fácil de hacerlo. También puedes utilizar este método para difuminar textos, logotipos, fondos y cualquier otra cosa que desee difuminar.

En primer lugar, use las herramientas de selección para seleccionar el área que desea desenfocar. En el siguiente ejemplo, la cara se selecciona con la herramienta Marco elíptico.

A continuación, aplica un Desenfoque gaussiano como antes (Filtro > Desenfoque > Desenfoque gaussiano...).  Selecciona el radio y haz clic en "Aceptar". Por último, selecciona Seleccionar > Deseleccionar.

¡Has terminado!

Cómo difuminar caras en Photoshop (método avanzado)

En el anterior método fácil, hay una línea dura entre la sección desenfocada y la no desenfocada. Si desea hacer una transición suave entre las secciones, utilice este método avanzado. Este método también mantendrá la versión no desenfocada en una capa separada para que sea fácil revertirla si es necesario.

En primer lugar, duplique la capa haciendo clic con el botón derecho en la capa y seleccionando "Duplicar capa...".

A continuación, aplique un desenfoque gaussiano como antes (Filtro > Desenfocar > Desenfoque Gaussiano...) con el radio que desee.

Añada una máscara de capa a la capa duplicada haciendo clic en el botón "Añadir máscara vectorial". Asegúrese de mantener pulsado OPTION en Mac o ALT en Windows mientras hace clic en el botón para ocultar toda la capa detrás de la máscara. Ya no verá la capa borrosa.

El siguiente paso es utilizar una herramienta de pincel para pintar las zonas que quieres difuminar. Asegúrese de que la herramienta pincel tiene un borde suave (considere ajustar la dureza al 0%) y utilice el blanco como color de primer plano.

Cuando pintes de blanco sobre la máscara, las zonas que pintes se volverán borrosas, porque la capa borrosa queda al descubierto.

Puedes ver en la imagen de arriba que la capa original sin desenfocar sigue disponible.

Puedes seguir pintando cualquier sección que quieras desenfocar.

¡Has terminado!

Windows 10 ha recorrido un largo camino desde su lanzamiento en 2015. Cada actualización trae un montón de nuevas características, y Microsoft ha abrazado a la comunidad de código abierto de una manera que antes se creía imposible.

Aun así, como con cualquier sistema operativo, hay errores. Y uno de los errores más comunes a los que se han enfrentado los usuarios de Windows 10 es que el menú de inicio deja de funcionar de repente.

A veces el menú de inicio abierto se congela, no responde y otras veces no se abre en absoluto cuando se hace clic en el botón del menú de inicio.

Sea cual sea el problema específico que tengas con el menú de inicio de Windows 10, en este artículo repasaremos algunas soluciones rápidas y no tan rápidas.

Cómo reiniciar el Explorador de Windows

El Explorador de Windows, que ahora se llama explorador de archivos, es la aplicación que se utiliza para navegar por el sistema de archivos y abrir programas y archivos. Pero también controla cosas como el Menú Inicio, la barra de tareas y otras aplicaciones.

Si tienes un problema con el menú de inicio, lo primero que puedes intentar hacer es reiniciar el proceso "Explorador de Windows" en el administrador de tareas.

Para abrir el administrador de Tareas, pulsa Ctrl + Alt + Delete, y luego haz clic en el botón "Administrador de Tareas".

Haz clic en "más detalles" para ver una lista completa de los programas abiertos y los procesos en segundo plano que estás ejecutando:

Desplázate por la lista hasta encontrar el proceso "Explorador de Windows". A continuación, haz clic con el botón derecho en "Explorador de Windows" y selecciona "Reiniciar":

Habré un breve destello mientras Windows reinicia el Explorador/Finder de Windows, junto con la barra de tareas y el Menú Inicio.

Después de eso, intenta abrir el Menú Inicio. Si sigue sin funcionar con normalidad, intenta una de las otras correcciones que aparecen a continuación.

Cómo reparar archivos de sistema de Windows corruptos o perdidos

A veces, una actualización sale mal o se borra accidentalmente un archivo importante mientras se escarba en el sistema de archivos.

Si el menú de inicio sigue dando problemas o si otras aplicaciones principales de Windows se bloquean, puedes intentar restaurar los archivos de sistema de Windows que falten o estén dañados.

Para ello, tendrás que abrir el símbolo del sistema de Windows como administrador y ejecutar el programa Comprobador de Archivos del Sistema.

Una vez que abras el Símbolo del sistema como administrador, ejecuta el comando sfc /scannow:

Comprobador de Archivos del Sistema comenzará a revisar todos los archivos de tu sistema y reemplazará cualquier archivo corrupto o faltante con una copia en caché.

Este proceso puede tardar un poco, así que siéntate libre de hacer otra cosa durante 5-10 minutos. Sólo ten cuidado de no cerrar la ventana mientras sfc está haciendo trabajo.

Una vez que el Comprobador de Archivos del Sistema haya terminado, verás un informe de todos los archivos que ha reemplazado o si todo estaba bien, verás un mensaje como este:

Si el comprobador de Archivos de Sistema reemplazó algún archivo de sistema corrupto o faltante, guarda todo tu trabajo abierto y reinicia tu computadora. Una vez que vuelvas a iniciar la sesión, intenta abrir el menú de inicio para ver si se han solucionado los problemas.

Nota: También puedes utilizar Powershell para ejecutar el comando sfc /scannow, pero recuerda que tendrás que abrir un terminal elevado de Powershell.

Cómo restablecer el menú de inicio con las aplicaciones predeterminadas de Windows 10

Lo siguiente que puedes probar es restablecer el menú de inicio por completo, junto con todas las aplicaciones de Windows 10 que estaban preinstaladas o instaladas desde la Microsoft Store.

Para ello, tendrás que abrir PowerShell como administrador - el Símbolo del sistema no funcionará para el comando que vas a ejecutar.

Hay muchas formas de abrir PowerShell, pero una de las más rápidas es utilizar el programa Run.

Utiliza el atajo de teclado Windows + R para abrir el programa Ejecutar, introduce "powershell", luego mantén pulsado "Ctrl + Shift" y haz clic en el botón "OK":

Esto debería abrir una terminal de PowerShell con privilegios administrativos.

En el terminal de PowerShell, ejecuta el siguiente comando:

Get-AppXPackage -AllUsers | Foreach {Add-AppxPackage -DisableDevelopmentMode -Register "$($_.InstallLocation)\AppXManifest.xml"}

El comando Get-AppXPackage intentará reinstalar todas las aplicaciones por defecto de Windows, incluyendo el menú de inicio y la barra de búsqueda.

También registrará un archivo de manifiesto para cada programa que reinstales. Sin embargo, no tienes que preocuparte por los archivos de manifiesto: es algo que Windows necesita para ejecutar cada programa.

Dale 5-10 minutos, y asegúrate de no cerrar la ventana de PowerShell hasta que haya terminado.

Nota: Es posible que aparezcan algunos errores de aspecto aterrador mientras se ejecuta el comando Get-AppXPackage. No te preocupes por ellos - la mayoría son sólo advertencias acerca de por qué un programa no puede ser reinstalado:

Cuando el comando Get-AppXPackage haya terminado, reinicia tu ordenador, inicia sesión e intenta abrir el Menú de Inicio.

Cómo restablecer la instalación de Windows 10

Si ninguno de los métodos anteriores arregló el Menú de Inicio, lo último que puedes probar es hacer un restablecimiento de fábrica de tu instalación de Windows 10. Pero ten en cuenta que este es un método "casi de tierra quemada" y sólo debe ser utilizado como último recurso.

El restablecimiento de la instalación de Windows 10 debería mantener intactos todos tus archivos personales (documentos, imágenes, vídeos, etc.), pero desinstalará todos los demás controladores y programas que hayas instalado. Básicamente, esto restablece tu ordenador al estado en el que estaba cuando lo encendiste por primera vez.

Antes de seguir adelante, haz copias de seguridad de todos tus archivos importantes utilizando una unidad flash, un disco duro/SSD externo y/o un alojamiento de archivos en línea como Google Drive o Dropbox.

De hecho, haz dos copias de seguridad. Probablemente, no las necesites, pero no está de más.

Cuando hayas terminado de hacer la copia de seguridad de todos tus archivos, abre un terminal de PowerShell: utiliza el atajo de teclado de Windows + R, introduce "powershell" y haz clic en el botón "Aceptar".

En el terminal de PowerShell, ejecuta el comando systemreset para que aparezca el asistente de restablecimiento de Windows.

A continuación, haz clic en el botón Keep my files("Conservar mis archivos"):

Espera un momento mientras el asistente analiza tu sistema. Entonces, verás una lista de todos los programas que se eliminarán:

Haz clic en el botón "Siguiente" y sigue las instrucciones para restablecer la instalación de Windows 10.

Una vez que hayas terminado de restablecer Windows y de crear un nuevo usuario, el Menú de Inicio debería volver a funcionar.

"Cortana, abre el menú de inicio"

Así que esas son todas las formas de arreglar el menú de inicio de Windows 10, listadas de la más fácil a la más difícil.

¿Te ha funcionado alguno de estos métodos? ¿Hay alguna otra forma de abrir el Menú Inicio que me haya perdido? Házmelo saber en Twitter.

Los desarrolladores deben instalar Xcode Command Line Tools antes de poder desarrollar software en un Mac.

Apple proporciona un entorno de desarrollo completo para programadores llamado Xcode. Si está desarrollando software para macOS, iOS, tvOS y watchOS, debe instalar la aplicación Xcode completa.

No está preinstalado, pero puedes instalarlo desde el sitio web para desarrolladores de Apple o desde la App Store de tu Mac.

¿Qué es Xcode Command Line Tools?

Si no estás desarrollando software para un dispositivo Apple, no necesitarás la aplicación completa de Xcode (¡requiere más de 40 GB de espacio en disco!).

En su lugar, instalarás Xcode Command Line Tools. Es un paquete más pequeño para desarrolladores de software con herramientas que se ejecutan en la línea de comandos, es decir, en la aplicación Terminal.

Los programadores han utilizado estas herramientas en los sistemas operativos Unix desde los inicios de la informática, y son la base de casi todo el desarrollo de software.

Por suerte, el paquete de herramientas de Xcode Command Line Tools sólo requiere 1,2 GB de espacio en el disco.

Tienes tres opciones para instalar Xcode Command Line Tools en un Mac:

• Instalar el paquete completo de Xcode.
• Instalar las herramientas de línea de comandos de Xcode cuando se activan mediante un comando.
• Instalar Xcode Command Line Tools como parte de una instalación Homebrew.

No recomiendo instalar el paquete completo de Xcode a menos que estés desarrollando software para un dispositivo Apple. La descarga tardará demasiado y consumirá espacio innecesario en el disco. En su lugar, prueba cualquiera de los dos métodos más rápidos.

Cómo instalar Xcode Command Line Tools desde línea de comandos

Apple ha facilitado la instalación de Xcode Command Line Tools, ya que ciertos comandos le pedirán que inicie la instalación.

Aquí hay ejemplos de comandos que desencadenarán un aviso para instalar Xcode Command Line Tools:

• clang – Un compilador que convierte el código fuente en un programa ejecutable.
• gcc – El compilador de GNU.
• git – El sistema de control de versiones "save-as-you-go".

Ejecutando cualquiera de estos comandos en la terminal aparecerá un aviso para instalar Xcode Command Line Tools. He escrito en otra parte sobre Cómo abrir la Terminal en MacOS - sólo haga clic en el icono de Spotlight en la barra de menú y escriba "terminal".

También puedes introducir el comando xcode-select --install en el terminal para comenzar el proceso de instalación. Verás un panel que te pide que instales Xcode Command Line Tools.

Has clic en "Instalar" para comenzar el proceso de descarga e instalación.

La instalación tarda 8 minutos en un Mac M1 Mini 2021, con una conexión a Internet de 100Mbps. Es significativamente más lenta en Mac Intel con una conexión a Internet lenta.

Verás un mensaje de confirmación cuando se complete la instalación.

Comprueba que haya instalado correctamente las herramientas de línea de comandos de Xcode:

$ xcode-select -p

Deberías ver lo siguiente:

/Library/Developer/CommandLineTools

Cómo usar Homebrew para instalar Xcode Command Line Tools

Aunque es fácil usar la línea de comandos para instalar Xcode Command Line Tools, recomiendo un método aún más fácil: usar Homebrew.

Esta opción se ha añadido recientemente a Homebrew, por lo que muchos desarrolladores no la conocen.

Homebrew es el popular gestor de paquetes de Mac. La mayoría de los desarrolladores necesitan lenguajes de programación y utilidades que no vienen instaladas en macOS, que no están incluidas en el paquete de herramientas de línea de comandos de Xcode. Homebrew puede instalar casi cualquier herramienta de código abierto para desarrolladores.

Ya que probablemente necesitarás Homebrew, también puedes dejar que Homebrew instale Xcode Command Line Tools por ti.

Primero, comprueba si Homebrew ya está instalado.

$ brew

Si Homebrew no está instalado, verás:

zsh: command not found: brew

Homebrew proporciona un script de instalación que puedes ejecutar con un solo comando (comprueba que no ha cambiado en el sitio de Homebrew).

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

El script de instalación de Homebrew te pedirá que introduzcas tu contraseña de usuario de Mac. Esta es la contraseña que utilizas para iniciar sesión en tu Mac.

Password:

No verás los caracteres mientras escribes. Pulsa return cuando hayas terminado.

Si aún no has instalado Xcode Command Line Tools, verás un mensaje que dice "Se instalará Xcode Command Line Tools". Pulsa return para continuar cuando te lo pida el script de instalación de Homebrew.

Verás mensajes de diagnóstico y de progreso. La instalación de Homebrew tarda de 2 a 15 minutos en un Mac M1 Mini 2021, con una conexión a Internet de 100Mbps. Es significativamente más lento en Mac Intel con una conexión de Internet lenta.

En las máquinas Mac Intel, eso es todo lo que hay que hacer: Homebrew está listo para ser utilizado. En Mac Intel, Homebrew se instala en el directorio /usr/local/bin, que ya está configurado para el acceso del shell con el $PATH por defecto de macOS.

En las máquinas Apple Silicon, hay un paso más. Los archivos de Homebrew se instalan en la carpeta /opt/homebrew. Pero la carpeta no forma parte del $PATH por defecto. Sigue el consejo de Homebrew y crea un archivo ~/.zprofile que contenga un comando que configure Homebrew. Homebrew muestra las instrucciones al final del proceso de instalación:

- Add Homebrew to your PATH in ~/.zprofile:
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"

Una vez que hayas instalado Homebrew, comprueba que se ha instalado correctamente.

$ brew doctor

Deberías ver esto:

Your system is ready to brew.

Si Homebrew se instala correctamente, habrá archivos Homebrew en /usr/local (para macOS Intel) o /opt/homebrew (para Apple Silicon).

Ahora ya tienes instalados tanto Xcode Command Line Tools como Homebrew.

Tu entorno de desarrollo

MacOS es la plataforma más popular para el desarrollo de software porque el sistema operativo está basado en Unix, el estándar de desarrollo de software desde hace mucho tiempo.

Con Xcode Command Line Tools instaladas, tendrás una base sólida para añadir casi cualquier herramienta de desarrollo de código abierto.

Añade Homebrew y tendrás un gestor de paquetes que puede instalar gestores de versiones, lenguajes de programación y casi cualquier otra herramienta que puedas necesitar.

Combinado con un editor de texto y una aplicación de terminal, estarás preparado para cualquier tutorial que encuentres en freeCodeCamp.

A veces es más rápido hacer las tareas con la línea de comandos.

En este rápido tutorial repasaremos cómo abrir el Símbolo del sistema, algunos comandos básicos y banderas, y cómo eliminar archivos y carpetas en el Símbolo del sistema.

Si ya está familiarizado con los comandos básicos del DOS, no dudes en saltártelos.

Cómo abrir el símbolo del sistema

Para abrir el símbolo del sistema, pulse la tecla de Windows y escriba "cmd".

A continuación, haga clic en "Ejecutar como administrador":

Después de eso, verás una ventana de símbolo del sistema con privilegios administrativos:

Si no puedes abrir el símbolo del sistema como administrador, no te preocupes. Puedes abrir una ventana normal del símbolo del sistema haciendo clic en "Open" en lugar de "Ejecutar como administrador".

La única diferencia es que es posible que no se pueda eliminar algunos archivos protegidos, lo que no debería ser un problema en la mayoría de los casos.

Cómo eliminar archivos con el comando del

Ahora que el símbolo del sistema está abierto, use cd para cambiar los directorios a donde están tus archivos.

He preparado un directorio en el escritorio llamado carpeta de pruebas. Puedes usar el comando tree /f para ver un, bueno, árbol, de todos los archivos y carpetas anidados:

Para eliminar un archivo, utiliza el siguiente comando: del "<filename>"

Por ejemplo, para eliminar Test file.txt, basta con ejecutar del "Test File.txt".

Es posible que aparezca un aviso preguntando si desea eliminar el archivo. Si es así, escriba "y" y pulse Intro.

Nota: Cualquier archivo borrado con el comando del no puede ser recuperado. Ten mucho cuidado con dónde y cómo usas este comando.

Después de eso, puedes ejecutar tree /f para confirmar que tu archivo haya sido eliminado:

Además, un consejo extra: el símbolo del sistema tiene autocompletado básico. Así que puedes escribir del Test, pulsar la tecla de tabulación, y símbolo del sistema cambiará a del "Test File.txt".

Cómo forzar la eliminación de archivos con el comando del

A veces los archivos están marcados como de sólo lectura, y verás el siguiente error cuando intentes usar el comando del:

Para evitarlo, utiliza el indicador /f para forzar la eliminación del archivo. Por ejemplo, del /f "Read Only Test File.txt":

Cómo eliminar carpetas con el comando rmdir

Para borrar directorios/carpetas, necesitarás usar el comando rmdir o rd. Ambos comandos funcionan de la misma manera, pero vamos a seguir con rmdir⁣, ya que es un poco más expresivo.

Además, usaré los términos directorio y carpeta indistintamente durante el resto del tutorial. "Carpeta" es un término más reciente que se hizo popular con las primeras interfaces gráficas de escritorio, pero carpeta y directorio significan básicamente lo mismo.

Para eliminar un directorio, basta con utilizar el comando rmdir <directory name>.

Nota: Cualquier directorio borrado con el comando rmdir no puede ser recuperado. Tenga mucho cuidado con dónde y cómo utiliza este comando.

En este caso quiero eliminar un directorio llamado Subfolder, así que usaré el comando rmdir Subfolder:

Pero, si recuerdas antes, la Subfolder tienes un archivo en ella llamado Nested Test File.

Podrías entrar en el directorio de Subfolder con cd y eliminar el archivo, luego volver con cd .. y ejecutar el comando rmdir Subfolder de nuevo, pero eso sería tedioso. ¡E imagínate si hubiera un montón archivos y directorios anidados!

Al igual que con el comando del, hay una bandera útil que podemos utilizar para hacer las cosas mucho más rápido y más fácil.

Cómo utilizar la bandera /s con rmdir

Para eliminar un directorio, incluidos todos los archivos y subdirectorios anidados, basta con utilizar el indicador /s:

Probablemente, aparecerá un aviso preguntando si quieres eliminar ese directorio. Si es así, escribe "y" y pulsa intro.

Y eso es todo. Eso debería ser todo lo que necesitas saber para eliminar archivos y carpetas en el símbolo del sistema de Windows.

Todos estos comandos deberían funcionar en PowerShell, que es básicamente la versión 2.0 de Command Prompt. Además, PowerShell tiene un montón de alias interesantes como ls y clear que deberían sentirse como en casa si estás familiarizado con la línea de comandos de Mac/Linux.

¿Te han ayudado estos comandos? ¿Hay otros comandos que te resulten útiles? En cualquier caso, házmelo saber a través de Twitter.

Transparencia juega un papel importante en el desarrollo del front-end. Te permite elegir la transparencia de los elementos de tus páginas web.

Puedes ajustar la transparencia de varias maneras - porque por supuesto, en CSS, hay múltiples maneras de hacer lo mismo.

La propiedad de opacity de CSS es la primera forma que puede venir a tu mente para cambiar la transparencia. Pero esta propiedad no puede venir al rescate todo el tiempo, especialmente cuando hay una imagen de fondo con texto en ella, que quieres hacer transparente.

Así que en este artículo, voy a mostrarte las distintas formas de ajustar la transparencia para que puedas empezar a implementarla en tus proyectos de código.

Transparencia de la imagen con la propiedad CSS Opacity

Para hacer que una imagen sea transparente, puedes utilizar la propiedad de opacity de CSS, como he mencionado anteriormente. La sintaxis básica de la propiedad opacity se muestra en el siguiente fragmento de código:

selector {
  opacity: value;
}

La propiedad opacidad toma valores de 0,0 a 1.0, siendo 1 el valor por defecto para todos los elementos. Cuanto más bajo sea el valor, más transparente será. Así, si a un elemento se le da una opacidad de 0, será invisible.

Puedes encontrar ejemplos de diferentes valores de opacidad en los siguientes fragmentos de código:

<img src="freecodecamp.png" alt="freecodecamp-logo" />

He añadido algo de CSS para centrar todo en la página:

body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  height: 100vh;
}


img {
  opacity: 1;
}

Un valor de opacidad de 1 es el predeterminado, por lo que la imagen aparece así:

img {
  opacity: 0.5;
}

Este código nos da un 50% de opacidad, puedes ver que el logo se ha desvanecido un poco:

img {
  opacity: 0;
}

Con una opacidad de 0, la imagen es 100% transparente, por lo que se vuelve invisible:

La única forma de estar seguro de que la imagen está en la página es inspeccionarla con las devtools de tu navegador:

Puedes usar este valor de opacidad para hacer muchas cosas - por ejemplo, puedes usarlo para incluir texto sobre una imagen heroica en un sitio web.

Tal vez te preguntes por qué querrías hacer invisible el contenido con un valor de opacidad de 0. Bueno, puede ser útil en animaciones, y en la construcción de juegos HTM + CSS + JavaScript también.

Definitivamente, querrás usar el posicionamiento CSS para ayudarte a alinear las cosas. Discutiré esto en las próximas partes del artículo.

Transparencia de la imagen de fondo en HTML y CSS

CSS ofrece una forma de establecer la imagen de fondo para un elemento contenedor con la propiedad background-image, por lo que no tienes que hacerlo necesariamente con el CSS. Esto significa que también puedes colocar texto en el contenedor.

<div class="showcase">
      <h1>A group of ring-tailed lemurs</h1>
</div>

body {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
    }
    .showcase {
      background-image: url("ring-tailed-lemurs.jpeg");
      height: 400px;
      width: 500px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      opacity: 0.6;
    }

La desventaja de este enfoque es que la opacidad se establece para el contenedor donde están la imagen y el texto. Por lo tanto, la opacidad afecta también al texto, no sólo a la imagen. Esto probablemente no es lo que tú quieres.

La solución

Por defecto, cuando se aplica una opacidad a un contenedor, los descendientes la heredan también.

Una solución para esta situación es establecer la imagen de fondo en el HTML. Esto facilita la aplicación de la opacidad sólo a la imagen, en lugar de establecer la imagen de fondo para el contenedor en el CSS.

Esta vez, la imagen y el texto estarán separados, por lo que el texto no heredará el valor establecido para la opacity.

Esto significa que también hay que utilizar el posicionamiento CSS para alinear el texto dentro de la imagen.

<div class="showcase">
   <img src="ring-tailed-lemurs.jpeg" alt="lemurs" class="bg-image" />

   <h1 class="bg-img-title">A group of ring-tailed lemurs</h1>
</div>

body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  height: 100vh;
}
.showcase {
  position: relative;
}

.bg-image {
  opacity: 0.7;
}

.bg-img-title {
  position: absolute;
  top: 420px;
  left: 20px;
}

En el fragmento de código CSS anterior, utilizo flexbox para centrar todo en la página.

El elemento div contenedor con la clase de showcase se posiciona de forma relative, por lo que puedes posicionar el texto h1 de forma absolute dentro de él. Esto empujará el texto h1 a la esquina superior izquierda de la imagen. Las propiedades top y left se utilizan entonces para empujar el texto a la esquina inferior izquierda de la imagen.

Si se pregunta qué son las propiedades top e left, son las propiedades a las que se accede cuando se utiliza la propiedad display.

Además de estas dos, también tienes acceso a las propiedades right e bottom. Estas te permiten posicionar un elemento en cualquier lugar.

Al final, la imagen es opaca y el texto no se ve afectado:

Conclusión

En este artículo, has aprendido a utilizar la propiedad de opacity de CSS para hacer que las imágenes sean transparentes.

Como el CSS sigue siendo complicado y un poco raro, es útil combinar la propiedad de opacity con otras características de CSS, como el posicionamiento, para poder utilizarla correctamente.

Aparte del posicionamiento CSS, también se puede utilizar la propiedad de opacity con elementos pseudo CSS como ::before y ::after, que es otra forma de hacerlo.

Gracias por leer y sigue codificando.

Los objetos de cadena son representados como una cadena de caracteres.

Si has trabajado en Java Swing, tiene componentes como JTextField y JTextArea que utilizamos para obtener nuestra entrada de la GUI. Toma nuestra entrada como una cadena de caracteres.

Si queremos hacer una calculadora simple usando Swing, tenemos que averiguar cómo convertir una cadena en un número entero. Esto nos lleva a la pregunta: ¿cómo podemos convertir una cadena en un número entero?

En Java, podemos utilizar Integer.valueOf() e Integer.parseInt() para convertir una cadena en un entero.

1. Utiliza Integer.parseInt() para convertir una cadena en un número entero

Este método devuelve la cadena como un tipo primitivo int. Si la cadena no contiene un entero válido, lanzará una NumberFormatException.

Por lo tanto, cada vez que convirtamos una cadena en un int, tenemos que ocuparnos de esta excepción colocando el código dentro del bloque try-catch.

Consideremos un ejemplo de conversión de una cadena a un int utilizando Integer.parseInt():

        String str = "25";
        try {
            int number = Integer.parseInt(str);
            System.out.println(number); // output = 25
        }
        catch (NumberFormatException ex){
            ex.printStackTrace();
        }

Intentemos romper este código introduciendo un entero no válido:

     	String str = "25T";
        try{
            int number = Integer.parseInt(str);
            System.out.println(number);
        }
        catch (NumberFormatException ex){
            ex.printStackTrace();
        }

Como puedes ver en el código anterior, hemos intentado convertir 25T en un número entero. Esto no es una entrada válida. Por lo tanto, debes lanzar una NumberFormatException.

Este es el resultado del código anterior:

java.lang.NumberFormatException: For input string: "25T"
	at java.lang.NumberFormatException.forInputString(NumberFormatException.java:65)
	at java.lang.Integer.parseInt(Integer.java:580)
	at java.lang.Integer.parseInt(Integer.java:615)
	at OOP.StringTest.main(StringTest.java:51)

A continuación, veremos cómo convertir una cadena de caracteres en un número entero utilizando el método Integer.valueOf().

2. Utiliza Integer.valueOf() para convertir una cadena en un número entero

Este método devuelve la cadena como un objeto entero. Si miras la documentación de Java, Integer.valueOf() devuelve un objeto entero que equivale a un nuevo Integer(Integer.parseInt(s)).

Colocaremos nuestro código dentro del bloque try-catch cuando utilicemos este método. Consideremos un ejemplo utilizando el método Integer.valueOf():

        String str = "25";
        try{
            Integer number = Integer.valueOf(str);
            System.out.println(number); // output = 25
        }
        catch (NumberFormatException ex){
            ex.printStackTrace();
        }

Ahora, intentemos romper el código anterior introduciendo un número entero no válido:

        String str = "25TA";
        try{
            Integer number = Integer.valueOf(str);
            System.out.println(number); 
        }
        catch (NumberFormatException ex){
            ex.printStackTrace();
        }

Al igual que en el ejemplo anterior, el código anterior lanzará una excepción.

Este es el resultado del código anterior:

java.lang.NumberFormatException: For input string: "25TA"
	at java.lang.NumberFormatException.forInputString(NumberFormatException.java:65)
	at java.lang.Integer.parseInt(Integer.java:580)
	at java.lang.Integer.valueOf(Integer.java:766)
	at OOP.StringTest.main(StringTest.java:42)

También podemos crear un método para comprobar si la cadena pasada es numérica o no antes de utilizar los métodos mencionados.

He creado un método sencillo para comprobar si la cadena pasada es numérica o no.

public class StringTest {
    public static void main(String[] args) {
        String str = "25";
        String str1 = "25.06";
        System.out.println(isNumeric(str));
        System.out.println(isNumeric(str1));
    }

    private static boolean isNumeric(String str){
        return str != null && str.matches("[0-9.]+");
    }
}

La salida es:

true
true

El método isNumeric() toma una cadena como argumento. Primero comprueba si es null o no. Después utilizamos el método matches() para comprobar si contiene dígitos del 0 al 9 y un carácter de punto.

Esta es una forma sencilla de comprobar los valores numéricos. Puedes escribir o buscar en Google expresiones regulares más avanzadas para capturar valores numéricos dependiendo de tu caso de uso.

Es una buena práctica comprobar si la cadena pasada es numérica o no antes de intentar convertirla a entero.

Gracias por leer.

Imagen por ?? Janko Ferlič en Unsplash

Puedes conectarte conmigo en Medium.

¡Feliz codificación!

El método Array.filter() es posiblemente el método más importante y ampliamente utilizado para iterar sobre un arreglo en JavaScript.

El funcionamiento del método filter() es muy sencillo. Consiste en filtrar uno o más elementos (un subconjunto) de una colección más grande de elementos (un superconjunto) basándose en alguna condición/preferencia.
Todos hacemos esto todos los días, ya sea leyendo, eligiendo a nuestros amigos o a nuestro cónyuge, eligiendo qué película ver, etc.

El método Array.filter() en JavaScript

El método filter() toma una función callback y llama a esa función para cada elemento sobre el que itera dentro del arreglo de destino. La función callback de llamada puede tomar los siguientes parámetros:

• valorActual: Es el elemento del arreglo sobre el que se está iterando actualmente.
• indice: Es la posición del índice del valorActual dentro del arreglo.
• arreglo: Representa el arreglo de destino(final) junto con todos sus elementos.

El método filter crea un nuevo arreglo y devuelve todos los elementos que pasan la condición especificada en la llamada en el callback.

Cómo usar el método filter() en JavaScript

En los siguientes ejemplos, demostraré cómo se puede utilizar el método filter() para filtrar elementos de un arreglo en JavaScript.

filter() Ejemplo 1: Cómo filtrar elementos de un arreglo

En este ejemplo, filtramos todas las personas que son niños pequeños (cuya edad está comprendida entre 0 y 4 años).

let gente = [
    {nombre: "aaron", edad: 65},
    {nombre: "beth", edad: 2},
    {nombre: "cara", edad: 13},
    {nombre: "daniel", edad: 3},
    {nombre: "ella", edad: 25},
    {nombre: "fin", edad: 1},
    {nombre: "george", edad: 43},
]

let pequeños = gente.filter(persona => persona.edad <= 3)

console.log(pequeños);



/*
[{
  edad: 2,
  nombre: "beth"
}, {
  edad: 3,
  nombre: "daniel"
}, {
  edad: 1,
  nombre: "fin"
}]
*/

filter() Ejemplo 2: Cómo filtrar elementos en función de una propiedad concreta

En este ejemplo, solo filtraremos los miembros del equipo que sean desarrolladores.

let equipo = [
	{
  		nombre: "aaron",
    	posicion: "developer"
 	 },
  	{
  		nombre: "beth",
    	posicion: "ui designer"
  	},
  	{
  		nombre: "cara",
    	posicion: "developer"
  	},
 	{
  		nombre: "daniel",
    	posicion: "content manager"
 	 },
  	{
  		nombre: "ella",
    	posicion: "cto"
  	},
  	{
  		nombre: "fin",
    	posicion: "backend engineer"
  	},
  	{
  		nombre: "george",
    	posicion: "developer"
  },

]

let desarrolladores = equipo.filter(miembro => miembro.posicion == "developer")

console.log(desarrolladores);


/*
[{
  nombre: "aaron",
  posicion: "developer"
}, {
  nombre: "cara",
  posicion: "developer"
}, {
  nombre: "george",
  posicion: "developer"
}]
*/

En el ejemplo anterior, hemos filtrado a los desarrolladores. Pero, ¿y si queremos filtrar a todos los miembros que no son desarrolladores?

Podríamos hacerlo:

let equipo = [
	{
  		nombre: "aaron",
    	posicion: "developer"
 	 },
  	{
  		nombre: "beth",
    	posicion: "ui designer"
  	},
  	{
  		nombre: "cara",
    	posicion: "developer"
  	},
 	{
  		nombre: "daniel",
    	posicion: "content manager"
 	 },
  	{
  		nombre: "ella",
    	posicion: "cto"
  	},
  	{
  		nombre: "fin",
    	posicion: "backend engineer"
  	},
  	{
  		nombre: "george",
    	posicion: "developer"
  },

]

let noDesarrolladores = equipo.filter(miembro => miembro.posicion !== "developer")

console.log(noDesarrolladores);


/*
[
    {
  		name: "beth",
  		position: "ui designer"
	}, 
    {
  		name: "daniel",
  		position: "content manager"
	}, 
    {
  		name: "ella",
  		position: "cto"
	}, 
    {
  		name: "fin",
  		position: "backend engineer"
	}
]

*/

filter() Ejemplo 3: Cómo acceder a la propiedad índice

Se trata de un concurso. En esta competición, hay tres ganadores. El primero obtendrá la medalla de oro, el segundo la de plata y el tercero, la de bronce.

Utilizando el filter y accediendo a la propiedad del indice de cada elemento en cada iteración, podemos filtrar cada uno de los tres ganadores en diferentes variables.

let ganadores = ["Anna", "Beth", "Cara"];

let oro = ganadores.filter((ganador, indice) => indice == 0);
let plata = ganadores.filter((ganador, indice) => indice == 1);
let bronce = ganadores.filter((ganador, indice) => indice == 2);

console.log(`Oro ganador: ${oro}, ganador de plata: ${plata}, ganador de bronze: ${bronce}`);

// "Oro ganador: Anna, Plata ganadora: Beth, Bronce ganador: Cara"

filter() Ejemplo 4: Cómo utilizar el parámetro arreglo

Uno de los usos más comunes del tercer parámetro (arreglo) es inspeccionar el estado del arreglo sobre el que se está iterando. Por ejemplo, podemos comprobar si queda otro elemento en el arreglo. Dependiendo del resultado, podemos especificar que sucedan diferentes cosas.

En este ejemplo, vamos a definir un arreglo de cuatro personas. Sin embargo, como solo puede haber tres ganadores, la cuarta persona de la lista tendrá que ser descontada.

Para poder hacer esto, necesitamos obtener información sobre el arreglo de destino en cada iteración.

let competidores = ["Anna", "Beth", "Cara", "David"];

function mostrarGanadores(nombre, indice, arreglo) {
    let esSiguienteItem = indice + 1 < arreglo.length ? true : false;
    if (esSiguienteItem) {
    	console.log(`El ganador #${indice+1} es ${name}.`);
    } else {
    	console.log(`Perdón, ${name} no es uno de los ganadores.`);
    }
}

competidores.filter((nombre, indice, arreglo) => mostrarGanadores(nombre, indice, arreglo))

/*
"El ganador #1 es Anna."
"El ganador #2 es Beth."
"El ganador #3 es Cara."
"Perdón, David no es uno de los ganadores."
*/

Cómo usar el objeto de contexto

Además de la función de devolución de llamada, el método filter() también puede recibir un objeto de contexto.

filter(callbackfn, objetoContexto)

Este objeto puede ser referido desde dentro de la función del callback usando la referencia de la palabra clave this.

filter() Ejemplo 5: Cómo acceder al objeto contexto con this

Esto va a ser similar al ejemplo 1. Vamos a filtrar a todas las personas que tengan entre 13 y 19 años (adolescentes).

Sin embargo, no codificaremos los valores dentro de la función callback. En su lugar, definiremos estos valores 13 y 19 como propiedades dentro del objeto range, que posteriormente pasaremos a filter como el objeto contexto (segundo parámetro).

let personas = [
    {nombre: "aaron", edad: 65},
    {nombre: "beth", edad: 15},
    {nombre: "cara", edad: 13},
    {nombre: "daniel", edad: 3},
    {nombre: "ella", edad: 25},
    {nombre: "fin", edad: 16},
    {nombre: "george", edad: 18},
];

let rango = {
  bajo: 13,
  alto: 16
};


let jovenes = personas.filter(function(persona) {
	return persona.edad >= this.bajo && persona.edad <= this.alto;
}, range)

console.log(jovenes)

/*
[{
  edad: 15,
  nombre: "beth"
}, {
  edad: 13,
  nombre: "cara"
}, {
  edad: 16,
  nombre: "fin"
}]
*/

Pasamos el objeto rango como segundo argumento a filter(). En ese momento, se convirtió en nuestro objeto de contexto. En consecuencia, pudimos acceder a nuestros rangos superior e inferior en nuestra función de devolución de llamada con la referencia this.alto y this.bajo respectivamente.

Conclusiones

El método filter() del arreglo, filtra los elementos que coinciden con la expresión del callback y los devuelve.

Además de la función del callback, el método filter también puede tomar un objeto de contexto como segundo argumento. Esto te permitirá acceder a cualquiera de sus propiedades desde la función callback usando this.

Espero que hayas sacado algo útil de este artículo.

Si quieres aprender más sobre el desarrollo web, no dudes en visitar mi Blog.

Gracias por leer y hasta pronto.

P/S: Si, estás aprendiendo JavaScript, he creado un eBook que enseña 50 temas de JavaScript con notas digitales dibujadas a mano. Compruébalo aquí.

Cuando salió ES6 (EmcaScript 2015), introdujo un nuevo conjunto de métodos para iterar sobre un arreglo. Uno de los más útiles es el método map().

Array.prototype.map() es un método incorporado en los arreglos, para iterar a través de los elementos dentro de una colección de arreglos en JavaScript. Piensa en él, como un bucle para avanzar de un elemento a otro en una lista, manteniendo el orden y la posición de cada elemento.

Este método toma una función callback, que se llama por cada nuevo elemento sobre el que se itera.

La función callback recibe tres parámetros:

• El valor actual.
• Su índice.
• El arreglo de destino

Si eres un novato que lucha por entender cómo usar el método map() o qué hace exactamente, entonces este artículo es para ti.

Cómo funciona el método map() en JavaScript

Imagínate esto: hay una cola de personas en la puerta de un hospital esperando a ser vacunadas. Esto significa que aún no han sido vacunados.

Uno por uno, un médico administra la vacuna a todos ellos. El médico lo hace repitiendo la fila. En un extremo, hay un grupo de personas que aún no han sido vacunadas. El médico toma a todos y cada uno de ellos, les administra la vacuna y los devuelve a una nueva línea de personas vacunadas.

En un extremo, hay un arreglo (A) sobre el que se quiere operar. map() toma todos los elementos de ese arreglo (A), realiza una acción coherente sobre cada uno de esos elementos y los devuelve en un nuevo arreglo (B).

Cómo utilizar el método map(): Ejemplo de vengadores

Para ilustrar cómo funciona map() en JavaScript, consideremos una lista de nombres de algunos de nuestros Vengadores favoritos. El problema es que los nombres de esta lista no están completos: les falta un sufijo importante.

Con map(), podemos tomar todos los nombres de la matriz y añadir el sufijo "man" a todos y cada uno de ellos:

let prefijos = ["super", "spider", "ant", "iron"]
let sufijo = "man";

let nombresCompletos = prefijos.map(prefijo => prefijo + sufijo);

console.log(nombresCompletos);

// ["superman", "spiderman", "antman", "ironman"]

¿Qué pasa con las mujeres(women)?

Lo siento, mi error. Me di cuenta de mi error y decidí incluir un personaje femenino en la primera posición del arreglo. Cada elemento dentro de un arreglo se identifica por un valor único, su índice (o posición en el arreglo). El primer elemento tendrá un índice de 0, el segundo un índice de 1, y así sucesivamente.

Dado que ahora hay una superheroína en la lista, tendremos que asegurarnos de añadir el sufijo correcto a la superheroína correspondiente.

Dado que map() también toma el índice del elemento sobre el que estamos iterando, podemos hacer esto comprobando el índice de nuestro héroe y asegurándonos de que utilizamos el sufijo "woman" para el primer elemento de nuestra matriz:

let prefijos = ["wonder", "spider", "ant", "iron"]
let hombre = "man";
let mujer = "woman";

let nombresCompletos = prefijos.map(function(prefijo, indice) {
    return (indice == 0) ? prefijo + mujer : prefijo + hombre;
 });

console.log(nombresCompletos);

["wonderwoman", "spiderman", "antman", "ironman"]

Cómo utilizar el argumento del índice

Además del valor sobre el que se itera, map toma también su posición de índice. Esto es muy útil si quieres realizar diferentes tipos de operaciones dependiendo de la posición del índice del elemento.

En el ejemplo anterior, añadimos un sufijo diferente comprobando el índice.

Para conocer la posición del índice de cada uno de nuestros elementos dentro del arreglo, podemos hacer lo siguiente:

let nombresCompletos = ["wonderwoman", "spiderman", "antman", "ironman"]

nombresCompletos.map(function(nombre, indice) {
    console.log(${nombre} esta en la posición ${indice});
});

/* Resultado del anterior código
"wonderwoman esta en la posición 0"
"spiderman esta en la posición 0"
"antman esta en la posición 0"
"ironman esta en la posición 0"
*/

Multiplicar todos los elementos del arreglo por 2

Trabajemos ahora un poco con los números. En este ejemplo, simplemente queremos multiplicar cada número del arreglo de destino por dos y luego devolver sus productos en un nuevo arreglo:

let numeros = [10, 20, 30, 40]
let multiplicador = 2;

let productos = numeros.map(numero => numero * multiplicador);

console.log(productos);

// [20, 40, 60, 80]

Redondear al número entero más cercano

¿Qué pasa si tenemos un arreglo de decimales, pero queremos que cada uno de esos números decimales se redondee al entero más cercano?

let numeros = [3.7, 4.9, 6.2]
let redondeados = numeros.map(function(numero) {
    return Math.round(numero);
})

console.log(redondeados);

// [4, 5, 6]

Cambiar cadenas de texto por números

Tenemos una lista de números que son de tipo string (cadena). Sin embargo, queremos convertir cada uno de ellos al tipo Number (número):

let textos = ["10","20","30"]

let numeros = textos.map(function(texto) {
    return Number(texto);
})

console.log(numeros);

// [10, 20, 30]

Conseguir nombres reales de los Vengadores

En este ejemplo, estamos trabajando con objetos. Tenemos cinco vengadores en el arreglo y cada uno tiene tanto un nombre real como un nombre de héroe. Sin embargo, solo queremos recuperar sus nombres reales en el nuevo arreglo.

let vengadores = [
    {nombre: "steve rogers", nombreHeroe: "captain america"},
    {nombre: "tony stark", nombreHeroe: "iron man"},
    {nombre: "bruce banner", nombreHeroe: "the hulk"},
    {nombre: "peter parker", nombreHeroe: "spiderman"},
    {nombre: "tchalla", nombreHeroe: "black panther"}
]

let nombresReales = vengadores.map(vengador => vengador.nombre);

console.log(nombresReales);

// ["steve rogers", "tony stark", "bruce banner", "peter parker", "tchalla"]

Conseguir los nombres de los héroes de los Vengadores

Para obtener solo sus nombres de héroe, hacemos casi lo mismo, solo que en este caso accedemos a la propiedad nombreHeroe:

let vengadores = [
    {nombre: "steve rogers", nombreHeroe: "captain america"},
    {nombre: "tony stark", nombreHeroe: "iron man"},
    {nombre: "bruce banner", nombreHeroe: "the hulk"},
    {nombre: "peter parker", nombreHeroe: "spiderman"},
    {nombre: "tchalla", nombreHeroe: "black panther"}
];

let nombresReales = vengadores.map(vengador => vengador.nombreHeroe);

console.log(nombresReales);

// ["captain america", "iron man", "the hulk", "spiderman", "black panther"]

Cómo separar una función para añadir a map

En lugar de definir una función directamente dentro de map(), podemos definir la función fuera y luego llamarla dentro de nuestra función map():

let vengadores = [
    {nombre: "steve rogers", nombreHeroe: "captain america"},
    {nombre: "tony stark", nombreHeroe: "iron man"},
    {nombre: "bruce banner", nombreHeroe: "the hulk"},
    {nombre: "peter parker", nombreHeroe: "spiderman"},
    {nombre: "tchalla", nombreHeroe: "black panther"}
];

let obtenerNombre = vengador => vengador.nombre;
let nombresReales = vengadores.map(obtenerNombre);

console.log(nombresReales);

// ["steve rogers", "tony stark", "bruce banner", "peter parker", "tchalla"]

Cómo funciona el argumento del arreglo

Antes dije que en cada iteración, el método map() toma el valor sobre el que se itera y también su posición de indice. Hay otro argumento que añadir a esos dos, los argumentos del arreglo.

El argumento arr representa el arreglo de destino sobre el que se hace un bucle, junto con todo su contenido. Con este argumento, se puede buscar en el arreglo completo para encontrar algo.

En este ejemplo, accederemos al parámetro arr para buscar y comprobar si el elemento actual es el último de la lista. Si no lo es, accedemos al siguiente elemento y lo restamos del elemento actual. Si es el último, simplemente lo devolvemos.

const arregloViejo = [33, 20, 10, 5];
const nuevoArreglo = arregloViejo.map((valorActual, indice, arr) => {
    let siguienteItem = indice + 1 < arr.length ? arr[indice + 1] : 0
    return valorActual - siguienteItem;
});


console.log(nuevoArreglo);

// [13, 10, 5, 5]

Conclusiones

El método map() fue introducido en ES6. Con este método, podemos acceder y realizar una acción consistente en cada elemento dentro de una colección de arreglos.

Toma una función callback que llama por cada nuevo elemento sobre el que itera.

En este tutorial, he introducido el método map(), he ilustrado su funcionamiento con una analogía y he dado algunos ejemplos prácticos de su uso en código JavaScript.

Espero que hayas sacado algo útil de este artículo. Si te gustan los tutoriales relacionados con la programación como este, deberías visitar mi blog. Allí publico regularmente artículos sobre desarrollo de software.

Gracias por leer y hasta pronto.
P/S: Si estás aprendiendo JavaScript, he creado un eBook que enseña 50 temas en JavaScript con notas digitales dibujadas a mano. Compruébalo aquí.

¿Te has preguntado alguna vez cómo se construyen y diseñan los sitios web? ¿Desea aprender el arte del desarrollo web, pero no es tan experto en tecnología, todavía?

Bueno, entonces este tutorial es para ti. Es una introducción al desarrollo web para principiantes, para que puedas aprender lo básico incluso si eres totalmente nuevo en el tema.

Conceptos básicos de HTML: la estructura de una página web

HTML significa Hyper-Text Markup Language. Antes de adentrarnos en el funcionamiento de HTML, vamos a tener una comprensión básica de lo que significa realmente Hyper-Text Markup Language.

El Hyper-Text se refiere a los hipervínculos que se ven en un texto, una imagen o un marcador que redirige a otra página, archivo, documento u otra parte de una página web.

Un lenguaje de marcado es simplemente un lenguaje informático que contiene etiquetas que definen elementos dentro de un documento. Un ejemplo de etiqueta podría ser el titular de un blog, que normalmente se escribe como una etiqueta h.

Hay más etiquetas, algunas de las cuales descubriremos más adelante.

Puedes pensar simplemente en HTML como la estructura de una página web. Supongamos que tienes que construir una casa. El primer paso de la construcción debe ser construir su estructura general, ¿verdad?

Diseñará el sótano, las paredes, el césped, el garaje, etc. Así es como puedes imaginar el HTML: son los bloques de construcción de una página web.

En un sitio web, puede contener la barra de navegación, el cuerpo principal/contenido, el pie de página, la barra lateral y todas las divisiones estructurales de la página. Todo ello con HTML.

Cómo empezar con HTML

Hay muchos editores de código, como VS Code, Sublime Text 3, Atom y Brackets. Todos estos pueden sonar extraños para ti. Así que empezamos usando Notepad que podemos usar de una forma u otra para escribir notas u otras cosas.

Veamos cómo se haría la estructura de una página web sencilla en HTML con código básico.

Vamos a diseñar una página web que tiene diferentes secciones: una barra de navegación, el cuerpo principal con un título, un párrafo, una imagen, y un pie de página.

<!DOCTYPE html>

<html>
    <head>
        <title>Título de la página</title>
    </head>
    <body>

        <nav>Esta es el Navbar de mi página web</nav>

        <h1>Mi primera título</h1>
        <p>Mi primer párrafo.</p>

        <img src = "https://miro.medium.com/max/1584/1*lJ32Bl-lHWmNMUSiSq17gQ.png"/>

        <footer>
          <p>Pie de página</p>
        </footer>

    </body>
</html>

En el código anterior, la declaración <!DOCTYPE html> significa que este documento es un archivo HTML5.

El 5 de arriba solo se refiere a la versión, ya que HTML ha avanzado mucho y ha mejorado respecto a sus versiones anteriores. La versión 5 solo se refiere a su última versión estable. No tienes que preocuparte por las versiones anteriores.

<html> actúa como elemento raíz de todos los elementos (título, encabezados, párrafos, etc.) de una página web HTML.

<head> contiene la metainformación (información sobre datos como el autor, la fecha de caducidad, una lista de palabras clave, el autor del documento) de la página.

El <title> refiere al título de la página web, que se ve en el navegador cuando se abre una página web. Aquí hay un ejemplo para tu referencia. En esta imagen, Page Title se refiere a la etiqueta title.

<body> es donde está todo el contenido de tu página web, como el encabezado, los párrafos, las imágenes, toda la interfaz de usuario.

<nav> representa la barra de navegación, que debe estar en la parte superior, seguida del cuerpo de contenidos principal y por último, el <footer>.

El cuerpo principal está compuesto por un encabezado representado por una etiqueta <h1> (el 1 con la h representa el tamaño del encabezado. El tamaño del encabezado va de 1 a 6, siendo 1 el más grande y 6 el más pequeño). Le sigue una etiqueta <p> de párrafo, luego una etiqueta de imagen <img>, finalmente el pie de página, la última sección de una página web.

Observe que la etiqueta de la imagen tiene la palabra clave src que se refiere a la fuente de la imagen, que en este caso es una imagen tomada de la web. Por eso adjuntamos el enlace URL de la imagen.

Todas estas etiquetas comienzan con un mayor y menor que <>; también finalizan con un mayor y menor que </> con una barra inclinada de por medio, como puedes ver en los fragmentos de código.

Cómo guardar los archivos HTML y mostrar los resultados

Solo tienes que seguir estos dos pasos básicos para ver tu HTML como página web.

1. Guarde su archivo HTML con la extensión .html. En el ejemplo que hemos utilizado, hemos guardado el archivo como Tutorial.html.

2. Abra el archivo en cualquier navegador (Chrome, Firefox, IE), y entonces podrá ver su página web HTML.

Resultados de nuestro diseño HTML básico

Puedes ver claramente los resultados, aunque todavía no hay colores ni estilo. Aunque todavía se mira que la estructura está ahí - la barra de navegación, seguida por el cuerpo principal que contiene el contenido, luego por un pie de página en la parte inferior.

Cómo añadir colores, estilo y potencia al HTML con CSS

CSS son las siglas de Cascading Style Sheets (hojas de estilo en cascada), que son los archivos de hojas de diseño que añaden colores, estilo y potencia a los elementos estructurales de tu HTML.

Puede pensar en el CSS como la pintura, la decoración y los elementos de diseño que añade para que tu casa quede bonita.

Existen múltiples formas de añadir CSS a tu estructura HTML. Vamos a explorar la técnica más básica que es añadir CSS a través de la etiqueta <style>.

<head>
	<title>Título página</title>
    
    <style>

    body {
      background-color: lightblue;
      margin: 0;
      text-align: center;
    }

    nav {
     background-color: black;
     width: 100%;
     color: white;
     height: 50px;
     padding-top: 25px;
    }

    h1 {
     color: black;
    }

    footer {
     background-color: gray;
     color: white;
     padding: 5px;
    }

    </style>
</head>

Explicación del anterior CSS

Puedes ver que hemos añadido el CSS a través de la etiqueta style dentro de la etiqueta head del documento en el código anterior. Esta es una forma básica de añadir CSS.

Vamos a desglosar y explorar las propiedades CSS que hemos utilizado en los cuatro elementos anteriores.

El elemento body

body {
  background-color: lightblue;
  margin: 0;
  text-align: center;
}

El selector CSS del cuerpo se refiere a toda la estructura de la interfaz de usuario que vemos. Añade algunas propiedades de CSS:

• background-color añade el color de fondo - aquí es azul claro.
• margin que gestiona los espacios a ambos lados de la estructura de la página web.
• text-aligned: center significa que todo el contenido estará alineado al centro en este caso.

Todo este CSS aplica a la página web, todos los elementos se enlazarán automáticamente estas propiedades generales CSS hasta que se especifiquen sus propias propiedades que difieran de estas globales.

El elemento nav

nav {
 background-color: black;
 width: 100%;
 color: white;
 height: 50px;
 padding-top: 25px;
}

El selector nav se refiere a la barra de navegación de la página web, la cual aplica propiedades de diseño.

Hemos establecido el color de fondo en negro, su anchura en 100% para que ocupe todo el ancho, su color que representa el color del texto o enlaces dentro de la barra de navegación, su height(altura) en 50px y le hemos dado un padding-top de 25px.

El padding se refiere al espacio entre el contenido y el borde. Como queremos que el texto esté alineado al centro, tenemos que añadir un padding de la mitad de los píxeles de la altura real de la barra de navegación, es decir, 50px (altura de la barra de navegación) / 2 = 25px. Esto asegurará que el texto dentro de la barra de navegación esté alineado al centro.

Elemento h1

h1 {
 color: black;
}

El selector h1 aplica CSS a la etiqueta h1 en el HTML. Por consiguiente la propiedad de color sea black(negro).

Elemento footer

footer {
 background-color: gray;
 color: white;
 padding: 5px;
}

Este es el último selector que se refiere al pie de página de nuestra web. Aquí, hemos establecido un conjunto similar de propiedades que discutimos anteriormente para la navbar(barra de navegación), así que no hay nada realmente nuevo aquí.

¡Y eso es todo!

Qué aspecto tiene la página web después de añadir el CSS

Ahora puedes ver cuánta vida puede añadirle el CSS a nuestra estructura básica de HTML. ¿No es increíble?

Estos son solo los fundamentos del diseño web, pero en realidad es bastante divertido una vez que los aprendes.

Conclusión:

Ahora que aprendiste los fundamentos del diseño de páginas web, puede ver lo accesible que puede ser, lo práctico que es y cómo se relaciona con muchos conceptos de la vida real, como la construcción de una casa.

Async y await pueden parecer complicados... pero son tan fáciles como una tarta de pizza una vez que te sumerges en ellos.

Todos utilizamos async y await en nuestras rutinas diarias.

¿Qué es una tarea asíncrona?

Una tarea asíncrona le permite completar otras tareas mientras la tarea asíncrona sigue trabajando para completarse.

Estos son algunos ejemplos de tareas asíncronas del día a día

Ejemplo 1:

Pides comida en un autoservicio, el cual inicia a procesar su solicitud de comida (una tarea asíncrona).

Avanzas en la fila de conductores (la siguiente tarea), mientras se va preparando su comida.

No había que esperar que la comida estuviera lista para poder avanzar.

Mientras conduces esperas tu comida, la cual se entrega en la ventanilla final.

Ejemplo 2:

Trapeas el suelo de la cocina.

Mientras esperas que se seque el suelo de la cocina, aspiras la alfombra de tu dormitorio.

La tarea original era limpiar el suelo de la cocina y la tarea está completa cuando el suelo está seco.

Estar de pie esperando a que se seque el suelo no es demasiado productivo, así que aspiras el suelo del dormitorio mientras se seca el de la cocina.

Así es como JavaScript maneja también las funciones asíncronas.

Ejemplo de Async/Await - Hornear una pizza congelada

Decides hornear una pizza en tu horno y tu primer paso es precalentar el horno.

Así que sé fijas la temperatura deseada y empiezas a precalentar el horno.

Mientras se precalienta el horno, sacas la pizza del congelador, abres la caja y la pones en una sartén para pizza.

¡Te queda tiempo!

Tal vez, puedes tomar una bebida y ver algo de televisión mientras esperas que el horno emita un ¡beep!, cuando esté listo.

A continuación se muestra un código para simular este ejemplo:

// Esta función asíncrona simula la respuesta del horno
const hornoListo = async () => {
  return new Promise(resolve => setTimeout(() => {
    resolve('Beep! Horno Calentado!')
  }, 3000));
}

// Definir la función asíncrona preCalentarHorno
const preCalentarHorno = async () => {
  console.log('Pre calentar horno.');
  const respuesta = await hornoListo();
  console.log(respuesta);
}

// Definir las otras funciones
const obtenerPizzaFria = () => console.log('Obtener pizza.');
const abrirPizzaFria = () => console.log('Abrir pizza.');
const obtenerSartenPizza = () => console.log('Obtener sarten.');
const ponerPizzaSarten = () => console.log('Poner pizza en el sarten.');
const tomarRefresco = () => console.log('Tomar un refresco.');
const mirarTV = () => console.log('Ver la televisión.');

// Ahora llama a las funciones
preCalentarHorno();
obtenerPizzaFria();
abrirPizzaFria();
obtenerSartenPizza();
ponerPizzaSarten();
tomarRefresco();
mirarTV();

// Secuencia de salida en la consola:
Pre calentar horno.
Obtener pizza.
Abrir pizza.
Obtener sarten.
Poner pizza en el sarten.
Tomar un refresco.
Ver la televisión.
Beep! Horno Calentado!

El proceso anterior es exactamente lo que significa async y await.

Mientras await(esperamos) a que se complete la función asíncrona preCalentarHorno, podemos realizar tareas síncronas como obtenerPizzaFria, abrirPizzaFria, obtenerSartenPizza, ponerPizzaSarten, tomarRefresco e incluso mirarTV.

Realizamos tareas asíncronas casi todo el tiempo

Así es como funciona también el JavaScript asíncrono.

Fíjate que cuando await(esperamos) la respuesta de una función async(asíncrona) esta debe ser llamada dentro de otra función async(asíncrona). Eso es lo que vemos arriba cuando hornoListo es llamado dentro de preCalentarHorno.

Hay que recordar dos puntos clave:

1. JavaScript NO esperará a que una función async(asíncrona) como preCalentarHorno se complete antes de pasar a las tareas que le siguen como obtenerPizzaFria y abrirPizzaFria.
2. JavaScript await(esperará) a que una función async(asíncrona) como hornoListo se complete, devuelva datos antes de pasar a la siguiente tarea dentro de una función asíncrona padre. Vemos esto cuando la sentencia console.log(respuesta) no se ejecuta hasta que hornoListo haya devuelto una respuesta.

Si el ejemplo de la pizza no es suficiente...

Sé que los ejemplos cotidianos nos ayudan a algunos, aunque otros pueden preferir el código real.

Por lo tanto, voy a proporcionar un ejemplo menos abstracto de JavaScript async y await que solicita datos con la API Fetch:

Ejemplo de código Async/Await en JavaScript

const obtenerDatos = async () => {
    try {
    const respuesta = await fetch('https://jsonplaceholder.typicode.com/users');
    if (!response.ok) throw Error();
    const datos = await response.json();
    // Hacer algo con estos datos... guardar en la db, actualizar el DOM, etc.
    console.log(datos);
    console.log('Verás esto último.')
    } catch (err) {
        console.error(err);
    }
} 

obtenerDatos();
console.log('Esto es lo primero que verás.');

Conclusión

Espero haberte ayudado a entender async y await en JavaScript.

Sé que puede llevar un tiempo comprenderlo completamente.

Empieza a precalentar la pizza que se te antoja en tu horno y mira algunos ejemplos más de async y await mientras esperas él ¡beep!

Dejo un tutorial de mi canal de YouTube. El video da una explicación más profunda, con más ejemplos de código, incluyendo una discusión de callbacks, promesas, resoluciones y la API Fetch junto con async & await:

JSON son las siglas de "JavaScript Object Notation". Un archivo JSON, tiene como extensión los .json, además los datos que contiene son representados en un par llave:valor, igualmente que un objeto JavaScript tradicional.

Sin embargo, JSON y los objetos de JavaScript no son exactamente lo mismo. La diferencia principal es que la llave en JSON son los valores, aparte de los tipos número y nulo deben ir entre comillas dobles.

Si has trabajado con APIs durante tu trayectoria en programación, es probable que sepas lo que es JSON, porque muchos de los datos de las APIs vienen traen formato JSON.

Si, no has trabajado antes con APIs y eres principiante, no estás solo.

En este artículo, voy a explicarte en qué consiste el formato JSON y cómo puedes sacarle el máximo partido.

Sintaxis básica de JSON

{
  "llave1": "valor1",
  "llave2": "valor2",
  "llave3": "valor3",
  "llave4": 7,
  "llave5": null,
  "favAmigos": ["Kolade", "Nithya", "Dammy", "Jack"],
  "favJugadores": {"uno": "Kante", "dos": "Hazard", "tres": "Didier"}
}

Tipos de datos JSON aceptados

JSON podemos definirlo como un objeto o un arreglo que puede contener varios objetos. Por lo tanto, objetos y arreglos son tipos de datos automáticamente aceptables en JSON. Otros tipos de datos que se admite son booleanos, nulos y cadenas de texto.

Los tipos de datos undefined, function y date no son compatibles con JSON.

Además, JSON también puede extenderse a otros tipos de datos adicionales que JSON puro no acepta.

Ejemplos de estas extensiones son GeoJSON y BSON. GeoJSON se utiliza para representar datos geográficos, mientras que BSON es utilizado por el popular proveedor de servicios de bases de datos MongoDB.

BSON, por ejemplo, acepta expresiones regulares, fechas y marcas de tiempo como tipos de datos, que JSON no acepta.

Reglas para sintaxis JSON

JSON es muy estricto en cuanto a los tipos de datos soportados. Si tienes un linter instalado en tu editor de código, te avisará inmediatamente de que hay un error cada vez que introduces un tipo de datos no soportado o vas en contra de las reglas de sintaxis.

Reglas de sintaxis JSON que hay que conocer:

• Todos los datos del archivo deben estar rodeados de llaves {} si quieres representar un objeto y entre corchetes cuadrados si es un arreglo [].
• Las comillas simples no están permitidas.
• La llave en cada JSON debe ser única y debe estar entre comillas dobles.
• Los números no deben ir entre comillas dobles, de lo contrario se tratarán como cadenas de texto.
• El tipo de dato null no debe ir entre comillas dobles.
• Los valores booleanos solo pueden ser verdaderos o falsos.
• Cada par llave:valor debe terminar con una coma, excepto el último elemento
• Un solo objeto dentro de un arreglo debe terminar también con una coma.

Cómo se envían los datos JSON al cliente (navegador)

JSON surgió de la necesidad de enviar datos desde el servidor (una base de datos, por ejemplo) al cliente (los navegadores) en tiempo real.

Pero los datos JSON no pueden ser transmitidos al navegador en su forma cruda en un par llave:valor. Debido a esto los lenguajes de programación tienen métodos para manipular los datos JSON.

En JavaScript, por ejemplo, JSON.parse() convierte los datos JSON en objetos y JSON.stringify() convierte el par llave:valor de un objeto en datos JSON.

Python proporciona métodos como: json.loads() para convertir una cadena existente en JSON y json.dumps() para convertir un objeto en una cadena de texto JSON.

Puedes enviar los datos en sintaxis JSON, al navegador utilizando los dos métodos que proporciona JavaScript.

Cómo enviar datos JSON al cliente (navegador) con JavaScript

El método JSON.stringify() devuelve una cadena de texto JSON, la cual traducida es exactamente igual a un objeto en JavaScript. Puedes utilizarlo en combinación con los métodos de manipulación del DOM para mostrar datos, como he hecho en los fragmentos de código siguientes:

<h2>Aquí están los datos del JSON::</h2> 
<div id="json"></div>

 const JSONData = {
    "key1": "value1",
    "key2": "value2",
    "key3": "value3",
    "key4": 7,
    "key5": null,
    "favFriends": ["Kolade", "Nithya", "Dammy", "Jack"],
    "favPlayers": {"one": "Kante", "two": "Hazard", "three": "Didier"}
}

const JSONString = JSON.stringify(JSONData)
const JSONDisplay = document.querySelector("#json")
JSONDisplay.innerHTML = JSONString

En el código JavaScript, declaramos los datos JSON como un objeto literal con el identificador (nombre) JSONData. Utilizamos el método JSON.stringify() de JavaScript, para convertirlo en una cadena, y el método query selector del DOM para obtener el div vacío en el HTML. Esto permite rellenar los datos JSON en él, con el método de manipulación DOM innerHTML.

Podemos utilizar el método JSON.parse() para convertir un dato JSON en un objeto y aquí está en acción:

<h2>Aquí están los datos del JSON:</h2>
<div id="json"></div>

const JSONData =
     '{"name": "Kolade", "favFriends": ["Kolade", "Nithya", "Rocco", "Jack"], "from": "Africa"}';

   try {
     const JSONString = JSON.parse(JSONData);
     const JSONDisplay = document.querySelector("#json");
     JSONDisplay.innerHTML = JSONString.name + ", [" + JSONString.favFriends + "], " + JSONString.from;
   } catch (error) {
     console.log("No puedo parsear JSON Data");
   }

La salida resultante en el navegador tiene el siguiente aspecto:

Conclusión:

Como programador, no puedes prescindir de JSON. La mayoría de las APIs están ahora escritas en JSON en lugar de XML.

JSON fue inicialmente concebido para JavaScript, pero muchos otros lenguajes de programación lo soportan ahora gracias a su naturaleza independiente del lenguaje. Como resultado, muchos lenguajes tienen bibliotecas para trabajar con él.

Espero que este tutorial te haya proporcionado los conocimientos necesarios para trabajar con JSON, Ojalá puedas darle un uso adecuado cada vez que lo encuentres.

Gracias por leer, sigue codificando.