Blog

Buenas! Soy Pablo y trabajo como desarrollador en [Maze](https://maze.co) y tengo mis propios proyectos en [GitHub](https://github.com/pablopunk).

Desarrollador web

Pablo Varela

@pablopunk

pablo@pablopunk.com

## The architecture

First, let's talk about the pieces I used for this:

* [NextJS](https://nextjs.org): The framework for React. Next has lots of cool features out of the box, but none are really important for this project, only that we can use the latest react with hooks.
* [Supabase](https://supabase.io): The open-source alternative to Firebase. Supabase is a new tool to create databases with lots of features, but the most important one for us here is that we can subscribe to live changes in the data via web sockets. We'll use [react-supabase](https://github.com/tmm/react-supabase) hooks for that.

## Set up

### NextJS

I won't go into much detail, as it's not important for this project. But I used my own starter kit that you can find [here](https://github.com/pablopunk/next-starter).

### Supabase

**First, you need a Supabase account.** Their free tier will give you 3 projects for free. Go ahead and create an organization and then a project inside it. It should take a couple of minutes to **create de database**.

Supabase has a very nice UI that lets you not only directly execute SQL queries, but also create and manage tables right there in your browser. For our project, we'll **create a new table** called clicks

![Img](https://a.storyblok.com/f/113260/203x265/42be63dc75/captura-de-pantalla-2021-08-01-a-las-21-23-03.png)

![Img](https://a.storyblok.com/f/113260/655x1002/04deecca01/captura-de-pantalla-2021-08-01-a-las-21-23-30.png)

Then we'll create a row (attribute) for our data called `type` by clicking the `+` button right after the `id` column in our empty table. This will indicate the type of button the user pressed, so there will be one row per button click (another approach would be just one row per button and another column that indicates the number of clicks, but that would require to deal with insert collisions and it's out of the scope of this project).

![Img](https://a.storyblok.com/f/113260/378x180/1744675632/captura-de-pantalla-2021-08-01-a-las-21-23-58.png)![Img](https://a.storyblok.com/f/113260/655x1002/04deecca01/captura-de-pantalla-2021-08-01-a-las-21-23-30.png)

Now we need to tell supabase we want that table to handle **real-time updates**, so we'll go into the left sidebar button `Database > Replication` and there we select the `0 tables` option from `supabase_realtime`, and then toggle our table `clicks`.

![Img](https://a.storyblok.com/f/113260/697x582/47e48194eb/captura-de-pantalla-2021-08-01-a-las-21-30-18.png)

That's it for supabase!

### The frontend

For the client, we'll use **supabase JS client and the hooks library for react**:

~~~
npm i @supabase/supabase-js react-supabase
~~~

Now go back to Supabase and copy your table tokens for the client. You can find those under `Settings > API`. Copy the `anon-public` key and the `URL`.

![Img](https://a.storyblok.com/f/113260/1189x693/2b93e772d4/captura-de-pantalla-2021-08-01-a-las-21-25-02.png)

In my case I put them on an `.env` file:

~~~
NEXT_PUBLIC_SUPABASE_URL=https://...
NEXT_PUBLIC_SUPABASE_ANON_KEY=...
~~~

Now let's connect your client to supabase:

~~~
import { createClient } from '@supabase/supabase-js'
import { Provider } from 'react-supabase'

// client connected to your database
const client = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
)

export default client

// React component to wrap your app
export function SupabaseProvider({ children }) {
  return <Provider value={client}>{children}</Provider>
}
~~~

As you can see I'm also creating a `SupabaseProvider` to wrap your app inside it. In NextJS I do this in `pages/_app.tsx`. This will make sure all supabase hooks are connected to the created client:

~~~
const App = ({ Component, pageProps }) => (
    <SupabaseProvider>
        <Component {...pageProps} />
    </SupabaseProvider>
)

export default App
~~~

Now we can go ahead and create our own hooks. Let's create one to get the clicks in real-time. We can use the hook `useRealtime` from `react-supabase`;

~~~
import { useRealtime } from 'react-supabase'

export function useClicks() {
  const [{ data, error }] = useRealtime('clicks', {
    select: {
      columns: 'id,type',
    },
  })

  return data
}
~~~

As you can see it's very simple, it just gets the data from the database and every time the table changes it will update the hook value.

Let's create another hook for inserting. This one is even simpler, as there's already a `useInsert` hook:

~~~
import { useInsert } from 'react-supabase'

export function useInsertClicks() {
  const [_data, execute] = useInsert('clicks')

  return execute
}
~~~

We don't really care about the data here, so we just return the `execute` function, which takes an array of elements to insert.

Bored yet? Don't worry, **this is the last step. Let's create 4 buttons with 4 emojis**. The idea here is to display all 4 buttons with the number of clicks they have:

~~~
const buttons = [
  {
    type: 'happy',
    label: '😊',
  },
  {
    type: 'sad',
    label: '😞',
  },
  {
    type: 'party',
    label: '🎉',
  },
  {
    type: 'love',
    label: '❤️',
  },
]

const Buttons = () => {
  const clicks = useClicks()
  const insertClicks = useInsertClicks()
  const clickedButton = (type: string) => () => insertClicks([{ type }])

  return <>
    {
      buttons.map((button) => {
        const clicksForType = clicks?.filter((c) => c.type === button.type).length || 0
        return (
          <button onClick={clickedButton(button.type)}>
            <span>{clicksForType}</span>
            <span>{button.label}</span>
          </button>
        )
      })	
    }
  </>
}
~~~

Let's break this code into parts. First, you can see we **declare the 4 buttons** as an array, so we don't repeat all the HTML for each one. **Then we display those buttons** with their corresponding clicks: `clicksForType` is counting how many rows there are of the current button type. Then we insert a **new row on every click**, that's done by inserting an array of one here `insertClicks(\[{type}\])`.

![Img](https://a.storyblok.com/f/113260/447x124/56eb9cc256/captura-de-pantalla-2021-08-02-a-las-14-09-00.png)

### Demo

That's really it! We have a working demo!

> [realtime.pablopunk.com](https://realtime.pablopunk.com)

**The source code for that is on GitHub**: [pablopunk/realtime-next](https://github.com/pablopunk/realtime-next). As you can see, the code there is fancier because it has some animations and styles, but the basic functionality is the same we've built in this post.

Creé una interfaz muy simple con datos actualizados en tiempo real desde una base de datos. Aquí te cuento cómo.

How to create a real-time UI with NextJS and Supabase

Cómo crear una interfaz en tiempo real usando NextJS y Supabase

> ...if you know how to use it. We all have a great camera in our pocket, but it doesn't have to be the best camera you can fit in your pocket. Smartphones have come a long way and I really like taking pictures with mine. But let me tell you about my favorite camera that fits in my pocket.

## Micro Four Thirds

I always liked photography but around 8 years ago I decided to **ditch my smartphone for something more "pro"**. I bought a compact canon camera, which is not much of an upgrade from a smartphone. But it did have **manual controls** which made me understand photography a bit better.

After that, I bought my first interchangeable-lens camera, the [Olympus E-M10 mark I](https://www.amazon.es/Olympus-OM-D-M10-pantalla-estabilizador/dp/B00HWRHBVK?th=1). I loved it, and I really got into photography because it allowed me to learn more about cameras but also about light and glass, just by **changing the lens**. This last part was a game-changer.

This camera was a Micro Four Thirds (MFT) camera. MFT **is a standard made by Olympus and Panasonic**. You can use Panasonic lenses with Olympus cameras and vice versa. It also means that they have a standard sensor size, **smaller than APS-C** (used by intermediate-level cameras) **and full-frame** (the standard in "pro" photography).

![](https://a.storyblok.com/f/113260/995x777/5bfb3085af/sensor-size-mft-apsc-full-frame.png)

This allows manufacturing really small cameras while still having a big enough sensor to achieve **great image quality**.

## Panasonic Lumix GM1

And here it is. The best **balance between image quality, compactness, and beautiful hardware:**

![](https://a.storyblok.com/f/113260/4592x3448/0372a7ace9/panasonic-lumix-gm1-b-w.JPG)

The GM1 is so tiny it **fits in the palm of my hand**. I have bigger cameras. I own a Panasonic Lumix G80, and I love it, but **the GM1 is always in my backpack** and it's the camera **I'll never sell**. Actually, if you want one, good luck finding a used one. I **bought it for about $180**, and have seen it for $150, but they go fast. And I get it, who would wanna sell this thing?

Okay, I know what you're thinking. No matter how small the camera is if the lenses are huge. I do have big bulky lenses that look hilarious on the GM1:

![](https://a.storyblok.com/f/113260/4592x3448/15a980147e/gm1-zoom.JPG)![](https://a.storyblok.com/f/113260/3448x4592/f47769be9c/gm1-tele.JPG)

## Panasonic 20mm f1.7

"**That's not pocketable!"** - You might say. And you're right. Here's where I tell you about my favorite lens: the Panasonic 20mm f1.7. Look how tiny the whole setup is!

![](https://a.storyblok.com/f/113260/4253x3193/83fe5167ef/gm1-20mm.JPG)![](https://a.storyblok.com/f/113260/4592x3448/139f2e5245/gm1-20mm.JPG)

![Img](https://a.storyblok.com/f/113260/3448x4592/e49a00866b/lumix-gm1-pocket)

Now that does fit in my pocket. And the best thing is that you can still have big lenses when you need them, and it will handle them.

Actually, the best thing is that you might not need other lenses for casual (but good) photography. This setup **delivers great image quality**. And it just costs around **$300 used** ($150 camera + $150 lens). I can't tell you how **sharp** this lens is, and how good the **[bokeh](https://en.wikipedia.org/wiki/Bokeh)** looks, but I can show you:

![](https://a.storyblok.com/f/113260/3448x4592/80268eec49/p1050618.jpeg)![](https://a.storyblok.com/f/113260/4592x3448/cf187c45c6/p1050615.jpeg)![](https://a.storyblok.com/f/113260/4592x3448/749de23b60/p1050595.jpeg)![](https://a.storyblok.com/f/113260/4592x3448/0e65cde5bc/p1050583.jpeg)![](https://a.storyblok.com/f/113260/2990x3983/12beb0e74b/p1050516.jpeg)![](https://a.storyblok.com/f/113260/4592x3448/4fffae62b7/p1050508.jpeg)![](https://a.storyblok.com/f/113260/3448x4592/ba85c2d634/stickers.JPG)![](https://a.storyblok.com/f/113260/3448x4592/a0e5a1a32c/moriarty.JPG)![](https://a.storyblok.com/f/113260/3093x4185/a622d58a89/earbuds-nothing-ear.JPG)

> The stickers you see in some pictures are actually designed by me! If you want to make your own, go to [stickermule.com](https://www.stickermule.com/es), they are really good!

The field of view that the 20mm (40mm equivalent in Full Frame) gives you, in my opinion, the perfect balance between wide and telephoto. It's not a landscape lens, it's not a portrait lens, but it can do both, its own way. You can take great landscape pictures with a subject, and they'll be so sharp. You wouldn't wanna do headshots with this lens but it's the perfect focal length to take pictures of people or even waist-level portraits.

That's it! I like this camera and now you know about it.

...si sabes usarla. Todos tenemos una buena cámara en nuestro bolsillo, pero no tiene por qué ser la mejor.

The best camera that fits in your pocket is not your smartphone

La mejor cámara que cabe en tu bolsillo no es tu smartphone

At the start of this year I bought an M1 macbook air. Not because I needed one, but I was really curious about how it could perform on my daily tasks and my job also. I had a 2019 16" MacBook Pro so I didn't have any expectations about the small cheap MBA being better than my beast. I was wrong.

My plan was to try it out for a couple of weeks to see if I would suffer much from compatibility issues (virtualization, not-supported apps...) or poor performance while doing webdev work. **I ended up selling my 16-inch MBP!**

## The issues

I got my MBA and started to love the small form factor again. I was kinda hating my big-ass 16-inch macbook now, I really liked the portability even if it meant having a bit less performance. I started to install all the dev tools I needed. I thought this was gonna be the biggest issue but it wasn't. I did have some problems installing the native ARM version of [homebrew](http://brew.sh/), but I ended up installing the virtualized version. So all the tools I was using were actually virtualized (x86 binaries running on the ARM chip). How did that go performance-wise?

* **A-m-a-z-i-n-g**

I wish I still had my MBP to do the benchmarks again and show you the results. But I remember I was developing a nodejs/react project with webpack, and the compilation time was **THREE (3) TIMES FASTER ON THE VIRTUALIZED M1 CHIP**. Oh, I didn't mention this is a **1200**€ machine vs a **2700**€ one. Yes.

So I started to think this could really replace my current laptop. I was still using my 2 monitors at home, so screen real estate was not an issue. Although as you might know, M1 macbooks can only have **1 external display at a time**. The workaround was buying an (expensive) dongle **displaylink**-compatible, which basically connects via USB and you can have as many displays as you want. [This is](https://www.amazon.es/Kensington-K33972EU-Replicador-puertos-conector/dp/B009JZHEVU/ref=sr_1_13?__mk_es_ES=%C3%85M%C3%85%C5%BD%C3%95%C3%91&dchild=1&keywords=displaylink+plugable&qid=1625490304&sr=8-13) the one I got. At first it was kind of tricky making it work with the laptop closed, but the drivers improved since then and nowadays they're almost perfect.

I'm not sure if it's placebo, but the every-day experience with macOS feels snappier on the M1 MBA. Although it's not a surprise considering Apple is now controlling both the hardware and the software. Actually it feels faster for apps like **Cura Slicer and Autodesk Fusion 360** (both virtualized) compared to my 3060TI custom PC 👀 .

## How did it save me money then?

Although some things were not perfect (for example some Docker images wouldn't work on M1 yet, I needed to wait) I ended up selling my MBP for more (**1500€**) than the MBA costs (**1200€**). I not only gained in performance but also in performance per watt. Did I mention this macbook has a **30W** charger? My *older* MBP had a **96W**. Big difference. At high loads the cost is three times higher, and the battery is also amazing. I can go days without charing the laptop and having it around for daily tasks, turned on all the time. Which is also great for remote-working on coffee shops, etc.

I actually **never missed the MBP.** Maybe the speakers are better, when I use it on the go. But I'm always with my Airpods on.

Oh, and I did save some generic benchmarks when I had both at home. Here they are (geekbench):

![Img](https://a.storyblok.com/f/113260/2148x836/d4308bb0f5/captura_de_pantalla_2021-01-24_a_las_19-11-12.png)![Img](https://a.storyblok.com/f/113260/1726x678/e3e5b70744/captura_de_pantalla_2021-01-24_a_las_19-12-02.png)

If you have any comments or questions ping me on [twitter](https://twitter.com/pablopunk) or [email me](mailto:pablo@pablopunk.com).

Tenía un MBP de 16 pulgadas y no tenía ninguna expectativa del pequeño y "barato" MBA M1 remplazándolo. Estaba equivocado.

How buying an M1 Macbook Air saved me money

Cómo ahorré dinero comprando un Macbook Air M1

## **The problem**

React **Fast Refresh** makes it very fast to develop components for your app. You see the changes in the code immediately. But sometimes you need to refresh the page or go to a different one, which is very slow when you are using `getStaticProps`.

It’s slow, but like, really slow. I’ve been using a CMS as the backend of the website you’re seeing right now ([pablopunk.com](http://pablopunk.com)). It’s a great experience to manage your data like that, but when it comes to loading the data when you’re coding a page, it just takes so much time if you’re jumping between pages

## The solution: cache

When you are coding you don’t always want the latest data from the CMS, a cached version is usually good enough to ship the feature or fix you’re working on. That’s why I implemented a **cache layer** on my stack.

### Redis

I chose Redis, but any other method will work. I started with a local server, because I only needed it while coding. But later I moved to a database in [upstash.com](http://upstash.com): it’s still Redis, but you don’t care about running the server! This allowed me to use [Codesanbox Projects](https://projects.codesandbox.io/) to easily run my dev environment.

### getStaticProps

Here’s what I had before the cache implementation:

~~~
const pageData = await getPageData(slug, locale)
~~~

I didn’t want to include the cache logic right there, so I made a helper function on another file that allowed me to use this simple approach:

~~~
const pageData = await getFromCache(`${slug}-${locale}`, () =>
  getPageData(slug, locale),
)
~~~

The function `getFromCache` takes a string as an argument (the key in the database) and a function to get the data — that allows to separate the data-fetch implementation from the cache implementation:

~~~
export async function getFromCache(key: string, fetcher: () => Promise<any>) {
  // don't use cache in production or redis is not connected
  if (!redis || !isDev) {
    return fetcher().then((value) => setInCache(key, value) && value)
  }
  
  // get from cache
  let cache = await redis.get(key)
  cache = JSON.parse(cache)

  if (cache) {
    // renew cache (SWR-ish)
    fetcher().then((value) => setInCache(key, value))
    return cache
  }

  // fetch value if it's not cached (and save it)
  return fetcher().then((value) => setInCache(key, value) && value)
}
~~~

Aaaaaaaaaaand now it’s blazing fast!

![](https://a.storyblok.com/f/113260/800x520/75f06711cd/fast-nextjs-cache.gif)

Pablo Varela

Desarrollador web

Artículos destacados

Cómo crear una interfaz en tiempo real usando NextJS y Supabase

La mejor cámara que cabe en tu bolsillo no es tu smartphone

Cómo ahorré dinero comprando un Macbook Air M1

Programar con NextJS y un CMS es muy lento. Aquí está la solución

Mi código

Mi 'arte'

Mis picks