I actually did it as a joke, but when you tell someone that you like them it's only a joke if they don't like you back. You know what I'm talking about.

I'll try to keep it short, I did spend this morning with it, so the conversation is quite long, but its parts are not that complicated.

## General idea

I won't tell you about it, I will just paste my prompt to ChatGPT:

> I'm creating a website that lists car parts and car accessories that can be found on amazon. It shows the price and everything, but when you click it it will take you to amazon with an affiliate link. Can you suggest a catchy name that can be a .com domain?

And the response was... good:

> Sure, how about "AutoPartCove.com"? This name combines the concepts of automotive parts and accessories, while also evoking a sense of a welcoming destination or "cove" where people can easily find what they're looking for.

I actually had the intention of going back and forth about the name, but the first one actually convinced me. I mean it's not like a serious thing, I'm doing this for fun, so let's go with [autopartcove.com](https://autopartcove.com).

## Time to (not) code!

I don't want to tell it to generate the site for me, I want to create something specific that I like and I know the way it works, in case I need to make modifications or fix errors. Let's go with NextJS.

> Sure, let's call it AutoPartCove. I'm creating in Next.js, can you do the code for me, file by file? Let's start with pages/index.tsx

I won't bore you with the details, but the responses usually look like this:

![screenshot chat gpt pages index](https://i.imgur.com/SbMbWmX.png)

It was actually a pretty good start. Of course it's importing stuff like `Layout` and `fetchProducts`, which we can ask it to create them for us. But first, I notice it's using `getServerSideProps`:

```
export const getServerSideProps: GetServerSideProps = async () => {
  const products = await fetchProducts();

  return {
    props: {
      products,
    },
  };
};
```

That means it will be SSR (server-side rendered), but I prefer using SSG (static site generator) for this project. No problem for ChatGPT!

![make it SSG](https://i.imgur.com/LqqYZ2S.png)

Done! Now I want to create the Layout component. I want to use TailwindCSS, just because, so I asked:

> give me the Layout component (use tailwindcss for everything). If you want to use colors, use them in this format: className="text-primary-100 bg-secondary-700", having only a primary and a secondary color

It worked but I specified that I wanted shades going from 50 to 900. OMG I'M BORING MYSELF. *Let's get to the good parts.* I generated the layout component, the product list component... So, it's time to actually get some products from the API.

## Getting products

It initially gave me a dumb static list of products, which of course I don't want, so I asked it to use the Amazon API. Long story short, it recommended me a bunch of libraries and I ended up with `amazon-buddy`. The others (including the official amazon PA API) were not working for me (for known reasons).

Even with that one, it was throwing some errors, so I went to its documentation and LITERALLY paste it into ChatGPT.

![amazon-buddy docs](https://i.imgur.com/5erIfJB.png)

And it worked!

![amazon-buddy worked](https://i.imgur.com/vcq4oJc.png)

## UI

This was actually the longest part, cause I really didn't want to do ANYTHING manually, so **I was asking ChatGPT to do EVERYTHING for me**. Not the best idea, I actually hit GPT-4's 25 requests/3-hours limit so I had to fallback to GPT-3.5. It's not as smart as GPT-4, but it's pretty good, enough for this project.

I tweaked TailwindCSS, some components, dark mode, `next-seo`, buttons here and there, and a search bar that actually works. OH WAIT I ALSO ASKED IT TO MAKE A LOGO WITH DALLE·2! Well, I asked it to give me a prompt, and it kinda worked. Here's what the website looks like at the moment of writing these lines.

![autopartcove.com](https://i.imgur.com/sDDffeD.png)

## Blog

As you might have noticed in the screenshot, I didn't wanna stop there, so **I asked it to create a blog** with some posts (that later I would ask it to fill with content 😁) related to the site. It also took some back-and-forth talking about UI, the format of the posts, etc. The final idea was a `pages/blog/index.tsx` that rendered the list of posts, and each post is an actual component inside `pages/blog/<slug>.tsx`. It can easily be done better, using a CMS or using MDX, but that was good enough.

![blog](https://i.imgur.com/JBrAWR1.png)

Did I mention that it created a responsive menu without me asking for it? LOOK AT THAT!

![responsive menu](https://i.imgur.com/Jikhy8o.gif)

## Conclusion

No. That won't make you money. If someone tells you that generating affiliate stores will make you rich they will also probably tell you about Bitcoin, NFTs, and the keto diet. **Run**.

But that was a fun project. I did all of that in only one morning, and I could actually create something useful in the future. I'm currently using it to improve code that I already did or fill in gaps.

Go try it for yourself, or visit my new awesome store [AutoPartCove.com](https://autopartcove.com) and buy $1,000 worth of things, you know, just for fun :).

Yes, it's THAT good. Since I discovered ChatGPT I don't write boilerplate or stuff I wrote hundreds of times, I ask for it. Today I wanted to make it create a store to generate passive income.

I told ChatGPT to create a passive store and now I don't code anymore

## **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)

NextJS is the framework that focuses on performance and developer experience. But it seems they have forgotten about developer performance.

Developing NextJS + CMS is slow. Here's the fix

> ...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.

...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 one.

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

## 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.

I made a simple UI that is synced in real-time with a database. Here's how

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

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).

 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.

How buying an M1 Macbook Air saved me money

But this one without all that boilerplate that you end up removing. Just replacing it.

I often come across next.js projects that aim to be a good way to start a new project but I always need to either remove lots of stuff from it or add very basic stuff (like SEO, come on).

So, I started to create my own. Very simple, yet powerful by default.

* [github.com/pablopunk/next-starter](https://github.com/pablopunk/next-starter)

## Features

* **ALMOST EMPTY**: Easy to start. Should fit any project.
* **TYPESCRIPT**: With the basic `tsconfig.json`.
* **TAILWINDCSS**: JIT mode. Synced with CSS variables. Check these files for more info: `tailwind.config.js` and `components/styles.css`
* **DARK MODE**: Automatic for user with dark mode enabled. Exposes: `window.__toggleDarkMode()` and `const [theme, toggleTheme] = useTheme()`.
* **SEO**: Very basic SEO config with `next-seo`, taking values from `config.js`.
* **LINTING**: Basic eslint/prettier config. Check both on `package.json`. Prettier is autorun on pre-commit with `husky`.

Here’s a [live demo](https://next-starter.pablopunk.com).

As you can see in the list, they're basic stuff that probably 90% of devs would want on a new project. Don't like dark mode? Don't use it, but it's there for you. Don't like typescript? You should. Don't like tailwind? Ok then don't use the kit cause you'll hate it.

Go ahead and **[generate a project](https://github.com/pablopunk/next-starter/generate)** from this template! As the first steps, you can:

* modify the `config.js` to fit your website (it will be the default SEO).
* modify the color palette at `components/styles.css`
* modify the favicon at `public/favicon.png`

That's it! Drop me a message on [twitter](http://twitter.com/pablopunk) or [email me](mailto:pablo@pablopunk.com) for any feedback or questions.

But this one without all that boilerplate that you end up removing. Just replacing it.

Yet another Next.js starter kit. My way.

## You don't need Ctrl-P

I used [ctrlp](https://github.com/ctrlpvim/ctrlp.vim) for a long time but now I use a **self-made version** with just a few lines on my *vimrc*.

Personally I like to use [fd](https://github.com/pablopunk/fd-find) within the CLI because it's really fast. So to make this command work we need to know what command do we want to run. In my case is a simple `fd -t f <search>`. This is not enough as we want the output to be like any *vim's quickfix window*, so we need to format it like:

~~~bash
fd -t f <search> | xargs file | cut -d' ' -f1 | sed "s/:/:1:/"
~~~

Basically, this command produces this output:

~~~bash
$ fd -t f layout | xargs file | cut -d' ' -f1 | sed "s/:/:1:/"
components/skeleton/withLayout.tsx:1:
components/cms/CMSLayout.tsx:1:
~~~

Just the path of the matching files and a `1` to tell *quickfix* to go to the first line of that file.

Now that we can populate a window with the results, we need a quick way of triggering this search. As I used CtrlP for a while, **I'll make `c-p` trigger this**. First, I make a function with all the code I need:

~~~
function! FindFiles(filename)
  let error_file = tempname()
  silent exe '!fd -t f '.a:filename.' | xargs file | sed "s/:/:1:/" > '.error_file
  set errorformat=%f:%l:%m
  exe "cfile ". error_file
  copen
endfunction
~~~

Basically this will create a new "error file" to include the results and show it in the *quickfix* window. It silently executes `fd` and populates this window with the `cfile` command. At the end, it opens the window with `copen`.

Now it's easy to map *control+P* to use this function:

~~~
command! -nargs=1 Find call FindFiles(<q-args>)
nmap <c-p> :Find<space>
~~~

This code just creates a command from the previous function and maps `c-p` to that command. Notice there's a *space* character after the mapping: that means when we press *control+P* it will write *:Find* followed by a space in command mode so you can start typing the query you want to search for.

![screencast for find](https://www.datocms-assets.com/26073/1611497478-better-find.gif)

If you wanna use this exact same code you can use my plugin [better-find.vim](https://github.com/pablopunk/better-find.vim). Notice you need to have the `fd` command available.

## The power of vimgrep

To search for a term in all of our project files, **vim already comes with a great tool**: `:vimgrep`. It also includes a `:grep`  command that we can customize to use an external tool to search in our projects. In my case I use [ripgrep](https://github.com/BurntSushi/ripgrep).

Let's go straight to the code:

~~~
set grepprg=rg\ --vimgrep
function! Grep(...)
  return system(join([&grepprg] + a:000), ' ')
endfunction
~~~

As you can see, this is less code than before but a bit more confusing. Without going into much details, the function we created, `:Grep`, takes the query as the arguments and passes that to *ripgrep*. Now we also create a command to use the function, and map it to *control+F*:

~~~
command! -nargs=+ -complete=file_in_path -bar Grep cgetexpr Grep(<f-args>)
nmap <c-f> :Grep<space>
~~~

And here's the result:

![screencast for grep](https://www.datocms-assets.com/26073/1611497470-better-grep.gif)

Of course I also made it available on github if you want to use it: [better-grep.vim](https://github.com/pablopunk/better-grep.vim).

You don't need Ctrl-P

File finder and project search in Vim without any plugins

Vim is so powerful it is impossible to say *I know all of vim*. Nobody can learn all the features of this editor, you always learn something new (almost) every day.

I'm no vim expert but it's the editor I use the most (actually the only one) so all these years I learned a few *tricks* that helped me with my daily coding.

A few days ago I googled (`:help` was not enough) how to solve a problem I was having: Basically I had a JSON file with just one level, the keys were timezones (`America/New_York`) and the values were the same as their keys but I had to replace every `_` in the values with an space. But the keys would remain untouched.

```
{
  ...
  "America/New_York": "America/New_York"
  ...
}
```

I just thought about making a regular expression that would select only the part after `:` on each line. The problem was that I didn't know how to perform the replace **only** on this result.

[This answer](https://stackoverflow.com/a/34601909/4396912) on *stackoverflow* gave me the solution and I learnt to use the *positive look-behind*, i.e this piece of a *regex* `\\@<=` . The solution to my problem was:

```
:%s/\$:.*\$\\@<=_/ /g
```

This command replaces only the `_` in the values, and not in the keys, because it selects all that appears after `:` with this part `:.*`

And that's it, but I'm planning to publish more solutions to problems I face daily, not only in vim but coding in general.

Vim is so powerful it is imposible to say I know all of vim. Nobody can learn all the features of this editor, you always learn something new (almost) every day.

Blog