The UI & UX Tips Collection: Volume One.

Practical React Query

Don't design for mobile

Stop Using “Drop-down”

Decoupling, Architecture and Teams

The Lava Layer Anti-Pattern

UI as an afterthought

In 2020, what is "frontend" 🤨

How React Query gives you almost everything you thought you needed GraphQL for

Wormhole state management

# Using MDX with Remote Content

One of the most common ways to use MDX in a website is to have the `.mdx` files together with the rest of the website code. But this has an issue because now any change you these files will need a full deploy, you can’t just open a CMS, change the content and see it live immediately.

But this shouldn’t need to be a white or black decision, there is a nice and simple way to use MDX from a remote source.

Let’s say our CMS give us some content like this:

```mdx
# This is a note with MDX

<CustomComponent />
```

If we are using Next.js, we will need to install the package [next-mdx-remote](https://github.com/hashicorp/next-mdx-remote).

Then, inside the page we want to use MDX we need to import this

```ts
import renderToString from "next-mdx-remote/render-to-string";
import hydrate from "next-mdx-remote/hydrate";
```

In the page we will use them we need to create a components object with all the components we want to enable in our MDX files. They can be named as the HTML tags and in that case it will be used to render them (e.g. an `h1` component will be used to render the `# This is a note with MDX` heading), if we use other names like our `CustomComponent` it will be available to use as in the MDX example above.

```js
const components = { CustomComponent };
```

Inside our `getStaticProps` or `getServerSideProps` we will fetch our data and use `renderToString`.

```js
async function getStaticProps({ params }) {
  // this is fetchnig from Collected Notes
  const note = await cn.read(CN_SITE_PATH, params.path.join("/"));
  // here we parse the front matter and get the content and data
  const { content, data } = matter(note.body);
  // here is where we parse our content to be usable as MDX
  const body = await renderToString(content, { components });
  // and at the end return our note, frontm atter data and body as props
  return { props: { note, body, data }, revalidate: 1 };
}
```

Then, inside our page component we can use `hydrate` with the body we got as props.

```js
function Article({ note, body, data }) {
  // here we hydrate the body with our components
  const content = hydrate(body, { components });
  // and then we can render it however we want
  return (
    <>
      <Header {...note} {...data} />
      <article>{content}</article>
    </>
  );
}
```

And we are done, we can create our `CustomComponent` inside our codebase and import it. The key part is that the `component` objects need to be the same in both `renderToString` and `hydrate`. If in the future we want to use a new component as part of our MDX content we will need to add it to the codebase and deploy it, which makes sense since this is actual code and not only plain content.

---

I used to have a bunch of `.mdx` files in the repository of my blog, each article was a `.mdx` file with the front matter of the article; after being tired of taking a few minutes per change I wanted to migrate to a CMS, I decided to go with [Collected Notes](https://collectednotes.com) which has Markdown and front matter support, aside of other nice features like a native app for Mac and iPhone which allowed me to write easily and even from my phone.

However, doing this change required me to give up on MDX. Thanks to Tailwind Typography it was not a huge issue, my main reason to use MDX was to render custom styles for the elements.

Thanks to `next-mdx-remote` now I can use Collected Notes as my CMS and still use MDX which is a great way to have the best of both worlds.


One of the most common ways to use MDX in a website is to have the .mdx files together with the rest of the webs...

Using MDX with Remote Content

# Use TailwindCSS Typography with Dark Mode Styles

Since TailwindCSS v1.8 it comes with an experimental dark mode support. Enabling it is really simple, in the `tailwind.config.js` add:

```js
module.exports = {
  experimental: {
    darkModeVariant: true
  },
  // ...more config
}
```

Now, you would be able to use the `dark:` prefix which by default is enabled in all color related classes.

Tailwind Labs team also has a really useful [Typography official plugin](https://tailwindcss.com/docs/typography-plugin) you can use to get a single class `prose` and use it to style content, specially useful when you receive HTML content without classes you can't style.

If you are using it with Dark Mode you will see the colors are probably not visible or are hard to read. This is because the Typography uses white colors.

One nice thing about the Typography plugin is that it's possible to add new variants and even replace the default one. We can use this to create a new `prose-dark` variant where we will only change the colors, let's change our Tailwind config to this one:

```js
module.exports = {
  theme: {
    extend: {
      typography(theme) {
        return {
          dark: {
            css: {
              color: theme("colors.gray.300"),
              '[class~="lead"]': { color: theme("colors.gray.400") },
              a: { color: theme("colors.gray.100") },
              strong: { color: theme("colors.gray.100") },
              "ul > li::before": { backgroundColor: theme("colors.gray.700") },
              hr: { borderColor: theme("colors.gray.800") },
              blockquote: {
                color: theme("colors.gray.100"),
                borderLeftColor: theme("colors.gray.800"),
              },
              h1: { color: theme("colors.gray.100") },
              h2: { color: theme("colors.gray.100") },
              h3: { color: theme("colors.gray.100") },
              h4: { color: theme("colors.gray.100") },
              code: { color: theme("colors.gray.100") },
              "a code": { color: theme("colors.gray.100") },
              pre: {
                color: theme("colors.gray.200"),
                backgroundColor: theme("colors.gray.800"),
              },
              thead: {
                color: theme("colors.gray.100"),
                borderBottomColor: theme("colors.gray.700"),
              },
              "tbody tr": { borderBottomColor: theme("colors.gray.800") },
            },
          },
        };
      },
    },
  },

  variants: { typography: ["responsive", "dark"] },

  plugins: [require("@tailwindcss/typography")],

  experimental: { darkModeVariant: true },
};
```

And now you can use our Tailwind classes like this:

```html
<article class="prose dark:prose-dark">{{ html }}</article>
```

And with this you can use the Typography plugin with light and dark mode. You can also change the colors in the snippet above to customize your theme.

Demo? This website is using it, change between light and dark mode in your computer to see it in practice.

Since TailwindCSS v1.8 it comes with an experimental dark mode support. Enabling it is really s...

Use TailwindCSS Typography with Dark Mode Styles

---
tags: draft
---
# Specialities for Frontend Developers

- Infrastructure: setup webpack, Babel, Jest and other tools
- UI: html and css 
- Engineer: Logic
- Animators
- A11Y


Infrastructure: setup webpack, Babel, Jest and other tools
UI: html and css 
Engi...

Specialities for Frontend Developers

---
tags: ui, frontend
---
# The States of the UI

Let's say you are in charge of building the UI of Twitter, how many states do you think that UI could be in? One? Two? Five? Ten?

Usually, we identify at least one state, the **Ideal State**, this is what most users see most of the time, in Twitter it's when you have a list of tweets with their authors and the avatar of each one, and the media included in the tweets (images, links, video, audios, etc.).

Most commonly the next state we tend to identify is the **Loading State**, this is when our application is loading the data or the code (when using code splitting).

If you are lucky enough you have also identified the **Loading Error State** which mean our app can handle a case when something failed to load, this could happen if the user is offline or the server returned an error (4xx or 5xx).

The vast majority of the products stop designing states at this point, then you start the development and realize you need another state, because what happens if the user had no tweets? You need an **Empty Data State** too to show something nice when there are no content, maybe to invite the user to create content.

If our Twitter app has a way to search for a tweet we may found a case where there are no results, this means another state, what we need more is an **Empty Results State** to represent how should the UI look like when there is no content because we couldn't find anything.

Let's continue developing the product, while you are on it you realize you need another state again, because what happens if part of the data has already loaded? Are you going to wait until everything is ready or are you going to start rendering part of the UI? Implementing a **Partially Loaded State** is the best user experience, because why not show the data you already have while you continue fetching more data? As an example once you have a Tweet you can render it while you continue fetching the replies of that tweet (Twitter does this).

Then you continue building your product again, just to ask yourself what happens if the user tweet a short message? Or a long one? Or another with only of emojis? And what about non ASCII characters like Kanji's or accent marks? You need to start thinking in a **Weird Data State**, think all the possible edge cases and design for it, as an example Spanish sentences requiere higher line heights due the accents.

Ok, let's go back to building the product, we are building the form to submit a tweet, then your API returns an error, or the user forgot the write the message, or is offline, what should happen in that case? You need yet another state, I call this the **User Error State**, this is how to show validation error, network errors or API errors, basically error generated after the action of a user, which are usually different than Loading Error State because are limited to an small area and not the whole UI.

The form is working. The user can create the tweet and we show something if an error happens, but the API is not immediate, it will take at least a few milliseconds to confirm the tweet was sent, what should we do meanwhile? You have two options, the ideal one is to implement an Optimistic UI where the UI it updated before the API process the request and it rollback the changes when an error occurs, the other option is to show a **User Action Loading State**, this usually is done showing a spinner or another loading indicator and disable the form until the API returns a response (to avoid duplicated request if it takes too long).

If we go for the optimistic UI we could also have a **Pending Optimistic UI State**, this is something apps like Slack do, they show your message immediately in the chat but with a disabled color (gray-ish) so you know the message has not been sent yet, once the API confirms the success the message change to the normal state.

Ok, we have almost everything, the user load the data, can tweet, can see errors and loading states, let say the user leave the app open for a while without being really using it, what should happen when our app recovers the focus? Because a lot of time has passed we may want to revalidate our Server-State with the API to get the latest tweets, but we should show somehow that we are doing that so the user can expect it, this means yet another UI state! We now need a **Revalidating State**, we could make as iOS and show a little spinner somewhere along the old data to while we finish the revalidation, Twitter load it in background and let you know there is more data, GitHub Mobile use the iOS way and show the spinner and replace the data after it loads.

And with all of this we are finally ready to ship our product, we end up with up to 11 different states our UI can be in, a great designer think about all of them since the beginning, most designers will probably think and 4~5 of them and let the developer figure out the rest or manually ask the designer to create them, a great developer will remember the designers they need to think all of this states.

The final list of states is:

- Ideal State
- Loading State
- Loading Error State
- Empty Data State
- Empty Results State
- Partially Loaded State
- Weird Data State
- User Error State
- User Action Loading State
- Pending Optimistic UI State
- Revalidating State

Let's say you are in charge of building the UI of Twitter, how many states do you think that UI ...

The States of the UI

---
title: What I Use
path: uses
tags: setup, ama, uses
lang: en
---

# What I Use

This is my current development setup.

### Tech Stack

- [TypeScript](https://www.typescriptlang.org/) as my main programming language.
- [React.js](https://reactjs.org) for UI creation.
- [Tailwind](https://tailwindcss.com/) for styling.
- [React Query](https://react-query.tanstack.com) for remote data-fetching.
- [Next.js](https://nextjs.org/) as my framework.
- [Jest](https://jestjs.io/) for unit testing.
- [React Testing Library](https://testing-library.com/react) for React testing.
- [Cypress](https://www.cypress.io/) for integration and E2E testing.
- [Vercel](https://vercel.com/) as my deployment platform.
- [GitHub Action](https://github.com/features/actions) for continuous integration, delivery and deployment pipelines.

### Tools

- [Safari](https://www.apple.com/safari/) as my main browser.
- [Sizzy](https://sizzy.co) as my development browser.
- [Hyper](https://hyper.is/) as my terminal, outside VSCode.
- [GitHub](https://github.com) for my code repositories.
- [GitHub Desktop](https://desktop.github.com) to use Git with a GUI instead of via CLI.
- [GitHub Mobile](https://github.com/mobile) to check GitHub on my phone.

### Editor

I use [VSCode](https://code.visualstudio.com) as my only IDE/code editor.

#### Theme

I use [GitHub Theme](https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme), I enabled VSCode to switch between light and dark versions of this theme together with the system preferences

#### Plugins

- [Atom Keymap](https://marketplace.visualstudio.com/items?itemName=ms-vscode.atom-keybindings), this change the key bindings (shortcuts) to be the same as the Atom editor, I used this editor in the past which has the same shortcuts as Sublime Text and I prefer their shortcuts.
- [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag), this automatically add the matching close tag of an HTML/XML/JSX tag.
- [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag), this let me change the name of an HTML/XML/JSX tag and it will change the closing tag automatically for me.
- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker), a basic spellchecker with English and [Spanish](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker-spanish) support.
- [CODEOWNERS](https://marketplace.visualstudio.com/items?itemName=jasonnutter.vscode-codeowners), syntax highlight for [GitHub CODEOWNERS files](https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/about-code-owners).
- [CSS-in-JS](https://marketplace.visualstudio.com/items?itemName=paulmolluzzo.convert-css-in-js), autocomplete for CSS in JS code.
- [Docker](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker), autocomplete for `Dockerfile` files and a UI to control my Docker images.
- [DotENV](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv), syntax highlight for `.env` files.
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint), run ESLint directly in VSCode.
- [Git Blame](https://marketplace.visualstudio.com/items?itemName=waderyan.gitblame), show latest person who touched (blame) the line of code I’m currently selecting.
- [Git Project Manager](https://marketplace.visualstudio.com/items?itemName=felipecaputo.git-project-manager), let me use my Git repos inside the configured folders as projects and switch between them with a simple shortcut.
- [GitHub Actions](https://marketplace.visualstudio.com/items?itemName=formulahendry.github-actions), syntax highlight for GitHub Actions files.
- [gitignore](https://marketplace.visualstudio.com/items?itemName=codezombiech.gitignore), syntax highlight for `gitignore` files and some other functions which I don’t really use.
- [GraphQL for VSCode](https://marketplace.visualstudio.com/items?itemName=kumar-harsh.graphql-for-vscode), syntax highlight for GraphQL code (inside `.gql` or `.graphql` files or tagged with a `gql` string literal tag.
- [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost), shows the size of the imported/required modules.
- [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow), show in different colors the indentation levels before a line of code.
- [Jest Snapshot Language Support](https://marketplace.visualstudio.com/items?itemName=tlent.jest-snapshot-language-support), syntax highlight for Jest Snapshot files.
- [JSDoc Markdown highlighting](https://marketplace.visualstudio.com/items?itemName=bierner.jsdoc-markdown-highlighting), syntax highlight for Markdown inside JSDoc comments.
- [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare), allow others to connect to my VSCode or allow me to connect to other people VSCode, I use it mostly for Pair Programming.
- [MDX](https://marketplace.visualstudio.com/items?itemName=silvenon.mdx), syntax highlight for MDX code.
- [npm](https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script), autocomplete for common `package.json` keys.
- [npm Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense), autocomplete import statements for modules installed with npm/yarn.
- [PostCSS Language Support](https://marketplace.visualstudio.com/items?itemName=csstools.postcss), better CSS syntax highlight with support for custom syntax used with PostCSS.
- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode), run Prettier directly in VSCode.
- [Ruby](https://marketplace.visualstudio.com/items?itemName=rebornix.Ruby), syntax highlight for Ruby code and other features.
- [SVG](https://marketplace.visualstudio.com/items?itemName=jock.svg), nice tools to work with SVG code.
- [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss), autocomplete and other features for working with [Tailwind CSS](https://tailwindcss.com).
- [VSCode Ruby](https://marketplace.visualstudio.com/items?itemName=wingrunr21.vscode-ruby), improvement for Ruby language support in VSCode.
- [vscode-styled-components](https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components), syntax highlight and autocomplete for [styled-components](https://github.com/styled-components/styled-components).
- [vscode-styled-jsx](https://marketplace.visualstudio.com/items?itemName=blanu.vscode-styled-jsx), syntax highlight and autocomplete for [styled-jsx](https://github.com/vercel/styled-jsx).

### Prettier

For Prettier I don't like to customize it. The point of Prettier is to stop paying bikeshedding about code style.

### ESLint

I use a few plugins, with their recommended configuration, I don't like to spend too much time thinking about this and I don't like too strict rules, most of the rules I enable are to follow best practices or avoid common mistakes.

- [eslint-plugin-react-hooks](https://github.com/facebook/react/tree/master/packages/eslint-plugin-react-hooks), to enforce the [Rules of Hooks](https://reactjs.org/docs/hooks-rules.html), I use it extending `react-hooks/recommended` to have their recommended config.
- [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier), to let ESLint uses the same code style rules as Prettier, I use it extending `plugin:prettier/recommended` to have their recommended config.
- [eslint-plugin-unicorn](https://github.com/sindresorhus/eslint-plugin-unicorn), lots of rules to help avoid some errors, I use it extending `plugin:unicorn/recommended` to have their recommended config.
- [eslint-plugin-testing-library](https://github.com/testing-library/eslint-plugin-testing-library), some helpful rules to follow best practices of Testing Library, I use it extending ``plugin:testing-library/react` to have their recommended config for React.
- [eslint-plugin-cypress](https://github.com/cypress-io/eslint-plugin-cypress), some helpful ruls to avoid common errors when using Cypress, I use it extending `plugin:cypress/recommended` to have their recommended config.
- [@typescript-eslint/parser](https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin), some rules to write better TS code, I use it extending `plugin:@typescript-eslint/recommended ` to have their recommended config.
- [eslint-plugin-import](https://github.com/benmosher/eslint-plugin-import), some rules related to imports, I use rules below:
  - `import/no-unresolved`: avoid importing modules that can't be resolved.
  - `import/no-anonymous-default-export`, avoid using export default with anonymous functions, classes and values.
  - `import/resolver`: configure how to resolve imports (required to support absolute paths)

I also use the next rules from ESLint (no plugins required)

- `yoda`, avoid conditions like `"red" === color` and instead force `color === "red"`.
- `func-style`, force a certain way to define functions (except inline functions), I use with to force `declaration` style, this forbids arrow functions for anything except inline functions.


This is my current development setup.
Tech Stack


TypeSc...

What I Use

---
path: historia
tags: career, spanish, webdev
---
# Como me inicié en el desarrollo web

Corría el año 2002, tenía unos 10 años, un día me pregunté cómo funcionan las páginas web, que se necesita para hacer una, una conocida estudiaba ingeniería en sistemas y aproveché para enviarle un mail (sí, un mail, era el 2002) y preguntarle que como se hacía, a lo que me comentó que con algo llamado HTML y me pasó unos links con más información.

De inmediato, me puse a leer estos para intentar entender, pero el HTML que hacía no se veía muy bien en el navegador, le pregunté que como se hacía para poner una columna a la izquierda con los links y el contenido a la derecha, me dijo que se hacía con la etiqueta `<style>`, y pensé "ahh entonces pongo esta etiqueta, el contenido dentro y listo", pero no, los primitivos de la web apestan, y dentro de esta etiqueta tenía que poner CSS para manualmente mover una etiqueta de mi HTML y acomodarlo en la pantalla, obvio que Flexbox o Grid no existían todo es mucho más fácil ahora.

Continuando, en su momento no entendí nada de CSS así que me puse a investigar más y aprendí que Word (sí, Microsoft Word) tenía una opción de edición HTML donde podías armar la página web de forma visual con la opción de ver el HTML, era lo máximo, usando Word aprendí que con una tabla podía sacar los bordes y armar el diseño a dos columnas sin que se vea la tabla, solo tenía que mover la línea que las separa para cambiar el ancho y listo.

Use esto para armar mi primera página web, un sitio simple con muchos gifs, un fondo horrible con una textura de Word y muchas tablas y contenido a mano. Subí mi sitio al primer hosting que use en mi vida, Yahoo! Geocities, para subirlo se usaba la UI, podías subir hasta 5 archivos a la vez nada más, con esto ya estaba online, y con el tiempo aprendí más cosas de cómo hacer webs, como que usando iframes podía reusar el HTML de mi columna de navegación entre varias páginas, y encontré servicios como Miarroba (que a día de hoy me manda mails automáticos por mi cumpleaños) que te daban contadores de visitas, libros de visitas, chats, etc. que podías poner con un pequeño código HTML y JS.

Pasaron los años, cambie de Word a FrontPage, de ahí a Dreamweaver y con este me quede, me dejo de interesar un poco aprender como funcionaban las páginas, solo hacía todo visualmente y listo, aprendí a usar sistemas de foros como phpBB o vBulletin, me buscaba plantillas ya hechas y listo capaz cambiaba algo del HTML, pero no mucho, nunca me aprendí demasiado las etiquetas.

Más o menos en 2007, unos cinco años después, ya en secundaria un amigo mayor que yo que sabía muchísimo de programación me dijo que aprenda bien HTML y CSS, está era la primera vez que escuchaba CSS, antes era solo esa cosa rara de las etiquetas style, y que aprenda a hacer temas de WordPress que para ese momento estaba en su boom.

La cosa es que decidí hacerle caso, aprendí a usar bien HTML con un [libro online gratis de un sitio llamado WikiLibros](https://es.wikibooks.org/wiki/Lenguaje_HTML), después aprendí CSS, para entonces usaba Dreamweaver que me daba autocompletado de las propiedades y sus valores lo cual me ayudo mucho a aprenderlos de a poco. Después aprendí WordPress y empecé a hacer plantillas propias, en el camino empecé a ver un poco, muy muy poco, de PHP, apenas lo suficiente para usar las funciones de WordPress.

El tiempo pasó, deje otra vez un poco de lado el desarrollo web, pero no del todo, esta vez seguí viendo de a poco comunidades de desarrollo web, entre estas las más importantes eran Cristalab (mi favorita) y Maestros del Web, sus creadores empezaron un programa en vivo llamado Mejorando la Web donde hablaban de tecnología, y lanzaron sus propios cursos de desarrollo web, para mi último año de secundaria fueron a Buenos Aires a hacer uno de HTML5, quería ir pero no tenía un peso para pagarlo y era algo caro, ese mismo año termine mi secundaria.

Dos años en el futuro, es el año 2013, estaba de vago (yo lo llamaba sabático) y los de Mejorando la Web (ahora solo Mejorando.la) lanzaron cursos online, para mitad de año convencí a mi mamá de que me preste su tarjeta de crédito para pagar un curso, con la promesa de trabajar una vez terminado y devolverle la plata (spoiler alert, nunca le devolví la plata, sean buenos hijos y no hagan lo que yo hice), tomé el curso de dos semanas, mi computadora murió a la mitad del curso y tuve que terminarlo en la de mi mamá, en este curso aprendí un poco más de HTML y CSS que para entonces ya era bastante bueno, y aprendí a programar en JavaScript, al fin aprendía este lenguaje, de hecho antes lo odiaba, me había dejado llevar por esta idea de que programar era solo Backend y JS era un lenguaje feo y mal hecho. 😰

Termine el curso, decidí seguir practicando JS y jQuery, hice mi primer proyecto Open Source, [Elecalc](https://github.com/sergiodxa/Elecalc) una calculadora de cálculos eléctricos, primero la hice en JS vanilla y luego use jQuery para trabajar con el DOM, eventualmente la pasa a Angular y React incluso. Para septiembre estaba ya cómodo haciendo JS y arme un sitio falso de eCommerce (solo el HTML) y un intento de juego, con estos tres proyectos me mande a buscar trabajo.

El proceso de búsqueda fue bastante sencillo y poco ortodoxo, fui a Google Maps y busqué "diseño web", con esto me salieron varias empresas que hacen diseño web en Buenos Aires, busque las que tenían página web (sorprendentemente algunas no tenían), cuáles de estas tenían una sección de empleos y seleccioné las que me llamaban más la atención. Otro criterio importante era que pudiese ir caminando (pocas cuadras) o en [Subte](https://www.buenosaires.gob.ar/subte) en sentido contrario a la hora pico (para ir cómodo 😏).

Encontré varias, postule a una, al final del día me contactaron para ver cuando podía ir a una entrevista, ahí les conté que sabía HTML, CSS, JS, jQuery, Jade (ahora Pug), Stylus y LESS , hable con el CEO y con el jefe de Maquetadores (para quién no conoce el término, son Frontend que solo hacen HTML y CSS y algunas animaciones o transiciones con jQuery).

Al final me pidieron volver otra vez para una prueba de trabajo de un día, fui temprano, me hicieron hacer una landing para un sitio de un cliente, para el final del día tenia el trabajo (consejo: no hagan esto, esta mal, si no me contrataban había trabajado un día gratis).

Algo importante que seguro afecto a que me elijan es que en el sueldo pretendido puse 3.000 pesos argentinos, el mínimo legal era 5.000 en ese momento, y supe luego que el resto cobraban más de 10.000, era muy barato, pero ya con mi primer sueldo me pude empezar a armar una computadora que es algo que quería hacer hacía tiempo.

Ya trabajando en esta empresa seguí tomando cursos en Mejorando.la y más que nada estudiaba por mi cuenta, aprendí Backbone, Angular.js, Node.js, MongoDB, MySQL, PHP y CodeIgniter al año siguiente (2014), ese año fui a [JSConfAR](https://www.jsconfar.com) y para antes de fin de año renuncié para intentar hacer una empresa con el que era el jefe de programadores de la empresa y uno de los ejecutivos de cuenta (los que hablan con los clientes), la cosa no funciono y a los meses me separé de ellos, en ese tiempo aprendí Polymer, ya que Web Components eran el futuro, intente hacer un proyecto con este y Angular y aprendí que Web Components no eran el futuro.

Para cuando deje este intento de hacer una empresa Google anuncio Angular 2 y dijo que iba a ser algo completamente diferente a la versión 1, decidí abandonar Angular y aprender React (best decision ever), había visto React más o menos al mismo tiempo que Polymer, pero la idea de poner HTML dentro de JS me parecía rara (que iluso que fui), con más motivación leí mas su documentación y entendí el por qué. A todo esto era el 2015 y ese año tenía Mejorando.la (ahora [Platzi](https://platzi.com)) gratis por un año, tome los curso de Node donde no aprendí nada y el de React donde luego me enteré que estaba compitiendo con Leonidas por tener las estrellas en el chat (el gano, pero es porque era más famoso, trabajaba el Platzi, así cualquiera 😝).

Para mitad de año me contactaron de Platzi para irme a trabajar con ellos a Colombia, acepte de una, saque el pasaporte, cuando tenía todo listo y los pasajes comprados le avisé a mi mamá que me iba (otra vez, no sean como yo, no hagan eso).

Ya en Colombia conocí a muchos devs que ahora sin mis amigos, a mi pareja, aprendí Redux, React Native, algo de Python y Django, y muchas cosas más de las que fui escribiendo en esos años. Dos años después me fui de Platzi para trabajar en [Vercel](https://vercel.com) (en ese momento ZEIT) y poco después salí de Vercel y entré a [Able](https://able.co) donde laburo actualmente desde hace casi dos años.

Ahora (año 2020), tengo casi 28 años, pasaron 18 años desde la primera vez que vi algo de HTML, y tuvieron que pasar 11 años para que aprenda a programar y consiguiera mi primer empleo, en los siguientes siete años aprendi probablemente más que en toda mi vida, muchas tecnologías, como resolver diferentes problemas, me mude de país dos veces, de ciudad 3, tuve un hijo, di [clases de Frontend en un bootcamp](https://www.codeable.la), y ahora trabajo como Frontend Lead en Able liderando (duh) la arquitectura del frontend de una de nuestras aplicaciones internas que esperamos pronto lanzar al público.

Y esa es mi historia, si llegaste hasta acá 👏 👏 👏 leíste un montón. Te leo en [Twitter](https://twitter.com/sergiodxa)!

Corría el año 2002, tenía unos 10 años, un día me pregu...

Como me inicié en el desarrollo web

---
tags: thoughts, api, rpc, rest, graphql
---

# Why build a non-RESTful API

One of the most common architectural styles to build an HTTP API is RESTful, or just REST, it works great for generic and open API that will be used used by many different clients, another common one is GraphQL, created by Facebook.

When building an open API following one of those, or both as like GitHub, is the best idea, both are standard which will help other to intuit how your API works.

However, when building an internal API for a product, you don't need to support many clients, you only need to support a few, and you control them.

Actually, building a generic API could make you slower and force you to do more work Client-side, imagine you are building a new route for your application, in this route you will show three different resources, most of the time you will need to trigger three different requests to get all the data, instead, in you don't strictly follow REST you will be build a custom endpoint for that view, this endpoint will directly read from the DB at the same time, all the data you need, this is way faster than doing three individual requests, at the end you request only one endpoint and can get all the resources you need.

The same could happen when performing a mutation, you could expose custom endpoint for the different actions an user may perform against the data (e.g. `/api/me/upload-avatar`) and be more specific, this could let you optimize them more than creating a generic `PATCH /api/users/:id` endpoint.

If you think this looks like RPC, or even GraphQL, yes that's exactly the idea, with GQL you can easily run a single query to get all the data a route will need, additional data could be later fetched when needed of course, but the idea is to reduce the number of requests you do and receive only the data you will need. For mutations, both use specific names instead of a generic endpoint used to any mutation.

One of the most common architectural styles to build an HTTP API is...

Why build a non-RESTful API

---
tags: react, assets, rails, ama
lang: en
---
# How I work with static assets in React apps

Most people when working with tools like webpack tend to add loaders like image-loader combined with optimizers to store the raw high quality assets in their repo and let the bundles optimize them at build time.

However once your app starts to grow this becomes way slower, and ask you this, why optimize your assets on every build/deploy when you can do it once and forget about it?

This is why, what I usually do is to optimize them only one time.

If I have an SVG instead of using a Babel loader to convert it to a React component on build-time I use [transform.tools](https://transform.tools) to do it once and store it as a React component.

If I have an image I pass it through [TinyPNG](https://tinypng.com) and get it with a huge size reduction, I also try to don't user images bigger than needed or I use `srcset` to load the specific size I need based on the user screen.

Then, after I have everything ready I let Rails serve the assets using their asset pipeline, Rails will automatically add a hash to make the URL unique and help improve the cache.

## Send hashed URLs to React

Since Rails hash the URLs automatically for me I can’t just use `/assets/logo.png` because that is not the real URLs.

What I do to be able to reference the correct URL client-side is to pass them from Rails to React. The key here is that static assets are exactly that, static, you can always know which assets you will need because they don’t change dynamically as assets whose URL you store in a DB.

To pass them from Rails to React I create script tag with the type `application/json` and and ID (usually `initial-props`), similar to this one:

```erb
<script type="application/json" id="initial-props">
  {
    "assets": {
      "logo": "<%= asset_path("images/logo.png") %>"
    }
  }
</script>
```

Then, before rendering the React application I read this JSON, store in an AssetContext I create and when I need a URL I use a custom Hook `useAsset` to ask for the asset name (e.g. `useAsset("logo”)`) and this returns me the asset URL.

Most people when working with tools like webpack te...

How I work with static assets in React apps

---
description: Learn how to create nested shallow resource routes in Rails
tags: rails, routes, til
lang: en
---
# How shallow: true works in Rails

If you have nested resources in your routes of Rails, you can use `shallow: true` this way

```ruby
resources :articles, shallow: true do
  resources :comments
end
```

This will create the following URLs:

```
GET     /articles
POST    /articles
GET     /articles/:id
PUT     /articles/:id
DELETE  /articles/:id
GET     /articles/:article_id/comments
POST    /articles/:article_id/comments
GET     /comments/:id
PUT     /comments/:id
DELETE  /comments/:id
```

This way, list and create comments are nested inside the parent resource `article` so you don't need to pass the `article_id` manually because it's in the URLs, but you can still get an individual comment, update it or delete it directly with `/comments/:id`.

How shallow: true works in Rai...

How shallow: true works in Rails

---
title: Build an Optimistic UI in React using SWR with useMutation
description: >-
  Use the useMutation hook together with SWR to implement optimistic updates in
  your React components
date: 2020-07-23T08:17:26.188Z
published: true
lang: en
tags: 'swr, useMutation, react, hooks'
path: swr/use-mutation
---
# Build an Optimistic UI in React using SWR with useMutation

One commont UX improvement when building User Interfaces is to add optimistic updates to the application.

Let's see how to do it easily with the [SWR](/swr/intro) Hook and the [useMutation](https://github.com/sergiodxa/use-mutation) hook.

---

We need to create a function where we will perform our mutation, let's say we are creating a new comment in an article.

```ts
async function createComment({
  authorId,
  articleId,
  body,
}: {
  authorId: number;
  articleId: number;
  body: string;
}) {
  const response = await fetch("/api/comments", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ authorId, articleId, body }),
  });

  if (!response.ok) throw new Error(response.statusText);

  return await response.json();
}
```

With this, we can create a `useCreateComment` hook, this will let use re-use our mutation together with the optimistic update.

Here we will use the `cache` object and `mutate` function from SWR to optimistically update the data cachd by SWR.

```ts
import { cache, mutate } from "swr";
import useMutation from "use-mutation";

export function useCreateComment() {
  return useMutation<{ authorId: number; articleId: number; body: string }>(
    createComment,
    {
      onMutate(input) {
        // first we keep the current data in a const
        const currentData = cache.get(["article", input.articleId]);

        mutate((cachedData) => {
          // here we are adding the input data (the new comment) to the list of
          // comments of the article
          return { ...cachedData, comments: cachedData.comments.concat(input) };
        }, false);
        
        // this function is our rollback function, we will use it in case the
        // mutation failed
        return () => mutate(["article", input.articleId], currentData, false);
      },

      onSuccess(data) {
        // if the mutation was a success, we update the cache of SWR to replace
        // the comment to optimistically added and add the final one returned
        // by the API
        mutate(["article", data.articleId], cachedData => {
          return {...cachedData, comments: cachedData.comments.map(comment => {
            if (comment.id) return comment;
            return data;
          })}
        });
      }

      onFailure(error, rollback) {
        console.error(error);
        // here we are calling the rallback fn returned by onMutate
        rollback();
      },
    }
  );
}
```

And lately, we can use it in a React component

```tsx
import * as React from "react";
import { useCreateComment } from "mutations/use-create-comment";

function CommentForm({ articleId, userId }) {
  const [mutate, { status }] = useCreateComment();
  const [body, setBody] = React.useState("");

  const handleSubmit = React.useCallback<React.FormEventHandler>(
    function handleSubmit(event) {
      event.preventDefault();
      mutate({ articleId, userId, body });
    },
    [body]
  );

  return (
    <form onSubmit={handleSubmit}>
      <textarea
        value={body}
        onChange={(event) => setBody(event.target.value)}
      />
      <button>Create comment</button>
    </form>
  );
}
```

With this, once the user submit the form, it will first add the new commet at the bottom of the list, and then, it will try to create it, and if for some reason the request failed it will automatically rollback to use th previous data.


@sergiodxa

Latest Articles