Un pequeño reto

Recientemente me topé con [este tweet](https://twitter.com/iordic/status/1250493045944070150) y no pude resistirme a averiguar qué era.

Quizá me compliqué más de la cuenta al principio usando los dos *tweets* pero conseguí resolverlo al final, cuando me percaté de que era solo el primero.

## Averiguando qué es

En primer lugar, se nota que es hexadecimal. Tras ello, te das cuenta de que debes pasarlo a ASCII, y entonces te encuentras con un fragmento de texto sospechoso y un montón de hexadecimal.

![](/assets/captura-de-pantalla-2020-05-16-a-las-12.36.01.png "El texto en ASCII. Nótese el fragmento sospechoso.")

El texto sospechoso resultó estar en Base64, del cual obtenemos esto:

![](/assets/captura-de-pantalla-2020-05-16-a-las-12.17.46.png "¡Una pista!")

Vaya... Así que puede ser código ensamblador de arquitectura x86, ¿eh?

## Obteniendo el código ensamblador

El contenido después de la flecha está en hexadecimal, así que posiblemente será el código en ensamblador.

Me dirijo a [ODA - The Online Disassembler](https://onlinedisassembler.com/odaweb/) e introduzco como código i386 esa cadena hexadecimal.

¡Bingo! Resulta ser ensamblador.

Por lo tanto, obtengo el dump y entonces me dispongo a averiguar qué es.

![](/assets/captura-de-pantalla-2020-05-16-a-las-12.07.02.png "El dump solamente con el código ensamblador")

## Resolviendo el enigma

Veo que primero se añade el valor `0x60` al registro `ebx`. Esto es importante.

Todos los valores 0xHH y 0xH son valores ASCII. Entonces cada vez que se introduce en `eax` un valor 0xH, es para luego añadirle el `0x60` almacenado en `ebx`. Si el valor es 0xHH va aparte.

Entonces, nos queda `\x44\x69\x20\x68\x6f\x6c\x61` que en ASCII es "Di hola".

Así que, **hola Jordi**.

Un pequeño tutorial para desarrollar de forma cómoda en Linux sin salir de Windows

Cómo usar Windows Subsystem for Linux 2 y Visual Studio para desarrollar sobre Ubuntu sin salir de Windows 10

Muchos me habéis pedido que realizara un artículo para poder desarrollar vuestros programas nativos en Linux (Ubuntu, por ejemplo) sin necesidad de reiniciar y, a ser posible, utilizar el entorno que nos provee Microsoft (Visual Studio 2019 actualmente).

Es por ello que he redactado este artículo para ilustraros cómo se configura vuestro equipo para desarrollar en C++ para Linux sin salir de Windows. Vamos allá.

## Instalación de WSL2

Me basaré en [este artículo de MSDN](https://docs.microsoft.com/en-us/windows/wsl/install-win10) para explicaros la instalación. Es muy sencilla y solo tenéis que abrir un PowerShell como administrador.

1. **IMPORTANTE**: aseguraos de tener actualizado vuestro equipo. Windows 10 debe ser la *build* 18362 como mínimo.
2. Tras abrir nuestra consola de PS como Administrador, ejecutamos el siguiente comando: `dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart`
3. Para activar la versión 2 (con el anterior comando solo activaríamos WSL 1) deberemos ejecutar esto: `dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart` \ Es decir: activar la opción de plataforma de máquina virtual. Por ello deberemos reiniciar el ordenador tras ejecutarlo.
4. Descargaos [esto](https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi) e instaladlo para obtener el último kernel Linux.
5. Configurad WSL 2 como subsistema por defecto: `wsl --set-default-version 2`
6. Instalad la distro que os apetezca desde la Microsoft Store. Os recomiendo Ubuntu 20.04 o Debian.
7. Al ejecutar por primera vez una distro, os pedirá configurar la contraseña de UNIX. Y ya está, ya tenéis WSL 2 configurado e integrado.
8. Añadid las herramientas para desarrollo: `sudo apt install g++ gdb make ninja-build rsync zip`

## Configurar Visual Studio para usar el subsistema

**Importante**: necesitáis tener herramientas para ello. En Visual Studio Installer procurad instalar la herramienta **Desarrollo de Linux con C++**.

![Ventana de Visual Studio Installer para seleccionar nuestra opción (abajo del todo)](/assets/opcion_linux.png "Ventana de Visual Studio Installer para seleccionar nuestra opción (abajo del todo)")

Primero, cread un proyecto y buscad Linux C++.

![Proyecto vacío de Linux](/assets/void_linux.png "Proyecto vacío de Linux")

Cuando lo tengáis creado, al crear vuestros ficheros *.cpp* y programarlos, habrá que compilarlos. Tendréis que configurar el proyecto para que utilice WSL. Abajo a la derecha tenéis la microventana de Propiedades:

![Aquí están las propiedades del proyecto](/assets/propiedades.png "Aquí están las propiedades del proyecto")

Abrid las páginas de propiedades. Entonces aparecerá esta ventana:

![Ventana ya editada. Configurad tanto Debug como Release.](/assets/configure.png "Ventana ya editada. Configurad tanto Debug como Release.")

Configurada tal y como aparece, porque por defecto apuntará a un servidor remoto. Configuradlo para GCC for Windows Subsystem for Linux, y la ruta al sistema buscadla en vuestro directorio `%APPDATA%\..\Local\Microsoft\WindowsApps`, en mi caso es `ubuntu2004.exe`.

Configurad IntelliSense para que use los valores, y listo.

Para ejecutarlo, compilad el programa. En Ver > Terminal (o Ctrl + Ñ) se abrirá un PowerShell para desarrolladores, abrid `bash` y ejecutad `./bin/x64/Release|Debug/<nombre_del_fichero>.out`

Con esto espero que quede claro cómo utilizar Visual Studio Community y WSL2. Cualquier duda comentádmela por Telegram o Twitter.

¡Saludos, desarrolladores!

Un tutorial para solucionar los posibles problemas que surjan al realizar la implementación

Integrando TailwindCSS en Next.js para un proyecto


Para utilizar Tailwind con el framework Next.js he tenido que implementar Babel y ajustar un par de cosillas. Además, personalmente prefiero usar Sass, así que eso también lo he añadido en la configuración de Next.js. A continuación unas instrucciones para que salga bien.

## Instalando las dependencias de desarrollo:

```yarn add -D @babel/plugin-transform-react-jsx @babel/types autoprefixer babel-plugin-macros babel-preset-react postcss-cli tailwindcss twin.macro```

Como dije, hay que instalar Babel. Además, usaremos macros para obtener los estilos de Tailwind y usarlos en Styled Components (se instala a continuación).

## Instalando las dependencias finales

Ahora es cuando instalamos React y Next.js además de Styled Components y un procesador de Sass para Webkit (Next.js lo trae integrado y se modifica en `next.config.js`).

```yarn add @zeit/next-sass next node-sass react react-dom styled-components```

## *Downgrade* de autoprefixer

Habrá que bajar la versión de autoprefixer a la "^9.0.0" ya que la 10 requiere PostCSS 8 y aún no lo soporta Next.js.

## Añadir scripts de uso

Los scripts del fichero package.json son los siguientes:

```js
{
  ...,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  ...
}
```

## Configurar Babel

Uso dos ficheros en la raíz del proyecto: **.babelrc** y **babel.plugin.js**. El primero lo utilizo para determinar los plugins de React (JSX) y los macros. El segundo para determinar la configuración de Tailwind.

```js
// .babelrc

{
    "plugins": [
        "@babel/plugin-transform-react-jsx",
        "macros"
    ]
}
```



```js
// babel.plugin.js

module.exports = {
  tailwind: {
    plugins: ["macros"],
    config: "./tailwind.config.js",
    format: "auto"
  }
};
```

## Configurando Next.js para usar SASS
 y Tailwind

Como hemos instalado anteriormente next-sass, entonces se puede poner una regla en Webkit que la utilice. La confiuguración es casi estándar, solo se llama a un plugin y aportamos como argumento un JSON con Webpack a next-sass.

```js
// next.config.js

const withSass = require("@zeit/next-sass");
const tailwindCss = require("tailwindcss");

module.exports = withSass({
  webpack(config, options) {
    const rules = [{
      test: /\.scss$/,
      use: [
          {
            loader: "postcss-loader",
            options: {
            ident: "postcss",
            plugins: [tailwindCss("./tailwind.config.js")]
          }
        },
      { loader: "sass-loader" }
    ]}
  ];
  return {
    ...config,
    module: { 
      ...config.module, 
      rules: [...config.module.rules, ...rules] 
    }
    };
}});
```

También añadirimos un fichero `src/pages/_app.js` (personalmente utilizo el directorio src para tener todo allí) con este contenido:

```js
import React from "react"
import "../styles/style.scss"

function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />
}

export default MyApp
```

Y añadimos el fichero SASS en `src/styles/style.scss`:

```css
/* Importo también la tipografía */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;800&display=swap');
@import "tailwindcss/base";
@import "tailwindcss/components"; 
@import "tailwindcss/utilities";
```

Y con esto ya tendríamos lista la configuración.

## Crear componentes

Un ejemplo de implementación. Se crearía un fichero styled.js en el mismo directorio en el que tengamos un componente. 

```js
// styled.js
import styled from "styled-components"
import tw from "twin.macro"

export const Logo = styled.a`
    ${tw`bg-gray-900 text-gray-100`}
    width: 10rem;
    display:flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    font-size: 1.5rem;
    font-family: "Montserrat", sans-serif;
    & {
        span {
            font-weight: 800;
        }
    }
    :hover {
        box-shadow: 0 0 2px rgba(0,0,0,.75);
    }
`
```

Para importarlo se llama en el componente a cada elemento exportado y se utiliza en el JSX como de costumbre:

```js
//index.js
import React from "react"
import { Logo } from './styled'

export default function Header() {
    return <div>
        <Logo href="/">
             tutorial de <span>Tailwind</span> y <span>Next.js</span>
        </Logo>
    </div>
}
```

Espero que sirva para alguien que se plantee usar Next.js y Tailwind a la vez y se encuentre de primeras con los mismos problemas que yo.

Switching to Tachyons and using English as my main website language

Changing my website

I thought my website looked too impersonal with Tailwind, and that I need to use more English as my main language here, in order to make this profile more international rather than Spanish-only. I also added Language tags in my posts.

I have a long way down to the ideal website but it's a good start (I didn't like Tailwind for this, seriously).

Cheers!

My Blog

Changing my website

English

Integrando TailwindCSS en Next.js para un proyecto

Español

Cómo usar Windows Subsystem for Linux 2 y Visual Studio para desarrollar sobre Ubuntu sin salir de Windows 10

Español

Un pequeño reto

Español