Raúl Cano

Tailwind is trash, but I still use it

Thu, 02 Apr 2026 00:00:00 GMT

I can't say much more than what the title already tells you I'm only writing this while getting frustrated during a style maintenance session, because that's when, and only then, Tailwind becomes a nightmare.

Using Tailwind makes development incredibly fast, and these days even more so with component libraries like Shadcn. Same goes for AI it's way easier since the number of files to read and write is cut in half.

The truth is, nobody wants to spend a single extra minute writing CSS to keep things tidy and clean, especially when you don't even know if the project is going to be successful. So let's iterate faster with Tailwind and don't get me wrong, I'm the first one to take this approach. At the same time though, I know what a nightmare it becomes when, six months later, you have to go back and maintain or fix any style. If you say you can read a whole component with all its Tailwind classes and have no problem with it, you have a superpower, dude. And it's not just that what about when you're trying to go from the browser to your code, looking for a specific component? You'd inspect the page, click on that element, copy the class name, and pray you're the only component using that Tailwind class. With CSS, that same search is a confirmed headshot.

We have a saying in Spain that perfectly defines what Tailwind is: "Pan pa hoy, hambre pa mañana" bread today, hunger tomorrow.

The good thing is, now with AI you can debug it way more easily. That's also part of why I keep using Tailwind.

Use whatever makes you feel comfortable, and be aware of your time and capabilities. If you ask me, I'd keep using Tailwind for its fast development, trade-off maintenance nightmare included. There is one case where I'd go for pure CSS though if I have a project where I know from the start it'll last for years, with many other people working on it and a real guarantee of long-term success. But for now, since I never know when a project will actually take off, I'm going to keep using Tailwind. Sadly.

The fear of not growing due to AI

Thu, 01 Jan 2026 00:00:00 GMT

So basically, I feel trapped in this AI world, and from what I can see on Reddit I’m not the only one, which makes me feel better tbh.

I started learning to code by myself pretty recently, around 2022, and if I’m not wrong, I tried ChatGPT for the first time as a coding helper in mid-2023. At that moment I had very basic knowledge, but enough to barely understand what the AI was throwing at me. Still, that felt like the first line of coke for an addict I was fascinated by how fast I was now able to solve problems.

Newbie bugs that took me days to solve were now done by AI in a matter of minutes. However, the barrier was still there: there was no MCP, you needed to copy-paste from VS Code to the chat, so many times you still had to put in some effort to fix things.

Now, with Cursor, Copilot, and so on, everything has changed drastically. These days, I sometimes spend the whole day writing either in English or Spanish but not really coding. I do read code, but it’s weird when I write more than four or five lines of code myself in a day.

So I need to ask: how good or bad is this behavior?

It doesn’t seem very good because you get lazy, but on the other hand you focus more on architecture, code cleaning tasks, reviewing, etc. And was this really what I wanted when I started? I wanted to look like a hacker, not like a bored police officer staring at a security monitor.

It’s easy to say: “Then stop using AI tools and start doing some real coding yourself.” Yeah, sure but what if you work at a startup and everything is for yesterday? And not only that, but the whole market has now adapted to the speed AI tools gave us. Nobody expects a new feature to take 2–4 weeks anymore, but 1–2 days.

Everything is going so fast that you simply can’t stop and say, “Okay, I will change my habits so even if I’m slower, my coding skills will grow.” Well, maybe just maybe you can do that in your free time, but even then you feel stupid going that slow when you know that with a simple prompt everything is done.

What do you think? What can we, the new developers, do to keep growing our knowledge without losing that AI speed?

Infinite Bugs

Mon, 03 Nov 2025 00:00:00 GMT

Do you know someone with 0 bugs in their app?

Probably 0 is being perfect, and perfection does not exist. I will ask again:

Do you know someone running an app where the bug tickets are less than 5% of the total tickets?

Seriously, because I don't, and I would love to know how they do it.

Typing everything helps with that, we already do that. Also, writing tests, which I should start doing, but still, bugs appear all the time.

It reminds me of that mole game where you have to hit the mole when it appears, but when you hit it, another one appears somewhere else, and you never end.

Unless you throw the game out the window.

I'm not that long in this market, but I have the feeling that bugs are infinite.

I've read a couple of times that bugs are part of the journey. You have to co-live with them, and at some point, you can become friends with them or go crazy because they are not going anywhere.

Bugs are like colds, you need them from time to time to realize how great it is to be healthy.

And solving them feels like a hit of dopamine, but oh surprise, you went bald before that dopamine hit you while trying to solve it.

Ok, ok...

Do you have bugs?

This is a test

Conversación con mi abuela

Thu, 25 Sep 2025 00:00:00 GMT

Anoche subí a cenar a casa de mis abuelos, aprovechando que estoy estos días por mi pueblo. Surgió una de esas conversaciones con mi abuela que te hacen reflexionar, ella se sentó al lado de mí despues de cenar y empezó a contarme historias sobre mi bisabuelo, su padre. Todo sin mucho guion ni orden cronológico.

El padre de mi abuela, antes de tener a mi abuela, estuvo en la Guerra Civil, lo enviaron a Zaragoza. Estando por allí, un día, subiendo una caja por la montaña con un compañero, en un momento se dio cuenta de que la caja pesaba bastante más; cuando se giró para ver a su compañero vio que le habían volado la cabeza. Y sí, podría haber sido él y no su compañero, y no haber nacido mi abuela.

Más tarde, en Zaragoza, le capturaron como prisionero de guerra, y una noche se escapó. Tuvo que cruzar el río Ebro, y de tanto frío se le empezó a pudrir el gemelo, y tuvo esa marca en la pierna toda su vida.

Cuando regresó a mi pueblo, ya después de tener a mi abuela, hacía todos los días uno o dos viajes en bicicleta a un pueblo de al lado. Está a unos 20 km, unos 30 minutos en coche con las carreteras actuales. Iba para comprar sacos de harina, echarlos a la bici y volver para que su mujer (la madre de mi abuela) hiciera pan para vender o cambiar por otros alimentos.

Tenían una casa de campo en las afueras, allí apenas tenían para comer, y no suficiente con eso, policías y militares de la zona a veces pasaban por su casa para coger (o robar) los pocos alimentos u aceite que pudieran tener. Mi abuela me contaba cómo hizo un agujero en el suelo donde tenían las mulas para poder esconder el aceite cuando vinieran los guardias.

Mi abuela, durante la infancia, solo tuvo un juguete, le regalaron una muñeca vieja de cartón e inocente de ella, como vio que la muñeca tenía los mofletes muy pintados, la metió al agua de las mulas y, al ser de cartón, se desmenuzó en pedazos. Se reía mientras me lo contaba.

No hace falta decir que solo tenemos que comparar la cantidad de ventajas que tenemos hoy día para ver lo poco que apreciamos aquello que tenemos.

Hace tiempo estoy obsesionado en mejorar mi vida, y son pocos los momentos en los que paro y valoro lo que tengo. Todo es frenético, urgente, y con la sensación de tener unas anteojeras, como las que tienen los caballos, para que solo puedan ver la pista.

No ha habido ninguna generación perfecta y sin problemas. Si tuviésemos más presente que problemas sociales, económicos o políticos van a existir siempre, de una u otra forma, creo que viviríamos más tranquilos. El humano no es perfecto y, por tanto, creo que nunca va a existir una generación perfecta.

Antes podías comprar una casa en 3-4 años, pero te faltaba el pan y no tenías coche ni podías viajar, y trabajabas en la vendimia. Ahora no te puedes comprar una casa, no te falta el pan, puedes viajar y trabajas en casa.

Y no estoy diciendo que te tengas que conformar, para nada, soy el primero que se considera ambicioso; te hablo de poder vivir con más tranquilidad, teniendo en cuenta lo que está en tu mano para cambiar a corto y medio plazo y lo que se escapa de tu control, sabiendo que no va a existir un tiempo en el que todo sea perfecto.

Conversaciones como esta no tienen precio, cuando alguien muere no solo muere la persona, sino toda la historia de esa persona. Te dejan pensativo, reflexivo, y mis habilidades amateurs de escribir no le hacen justicia a conversaciones o historias como esta, pero quería dejarlo plasmado en este blog para recordarlo.

I joined Salescaling <3

Wed, 20 Aug 2025 00:00:00 GMT

It's November 2024, I was chilling at home while listening to a podcast, a spanish podcast called Spicy4tuna one of my favorite, and in that episode they went to Lanzadera, a spanish startup accelerator.

They interviewed four startups that were part of Lanzadera, and one of them was Salescaling, where they talked with Jon, the CEO of Salescaling. It was the chat I like the most among the four, the product he was presenting was interesting and useful, and Jon has a great charisma, even more when he was talking about his own product.

So I messaged them on LinkedIn, just a very casual and short message, one of those messages that nobody replies to.

And as I said no one replies to that message, until two weeks later, when I received an answer from Jon, just like a friend that forgets to reply to your message, he shared me his phone number, I was shocked, no one on LinkedIn gives their phone number, even more in the first message, and I loved that.

Then I texted him on WhatsApp, a casual and nice chat, he liked my profile and suggested me to text his partner Luis, the CTO of Salescaling.

I texted Luis, and same as Jon, I felt him like texting with a friend, he said he liked my GitHub activity, and offered to have a meet, and ofcourse I accepted.

From a podcast to a random message on LinkedIn, to a meet with the CTO of a startup. Life is funny.

Every single detail you do in life matters.

If that day I didn't text them on LinkedIn, I would not be here today.

If I haven't heard that podcast, I would not be writting this post.

Ok, so I was in the meet with Luis, and at first I didn't know if that was an interview or just a chat, but I was excited. It's funny that we talked for an hour about life, and the last half hour he introduced me to the product and some technical stuff, and god damn he was good at explaining, and at coding aswell.

Then he told me: "Raúl I want you to join Salescaling at some point"

Inside of me I was like: "Hell yeah, while dancing Danza Kuduro"

I loved these guys, I loved the product, of course I have to join.

Then he explained me what their roadmap was, they were about to enter a seed round, and planned to hire more people.

We ended up seeing each other every week talking about the product, about the company, and many other things, and so we become friends and colleagues after many hours of online meets.

And the story is quite long, like a mexican novel, but eventually I received the offer.

Now is time to learn every corner of the product and put in the work to make it a success, see how this project grows.

[https://salescaling.com](https://salescaling.com)

SQL

Tue, 19 Aug 2025 00:00:00 GMT

- SELECT - FROM - WHERE - GROUP BY - HAVING - ORDER BY

Sweaty feet will give horrible odors.

1. FROM 2. WHERE 3. GROUP BY 4. HAVING 5. SELECT 6. ORDER BY

Fetching data in Next.js. Server actions vs server functions vs API Routes

Wed, 11 Jun 2025 00:00:00 GMT

| Feature | Server Actions | Server Functions | API Routes | |---------|----------------|------------------|------------| | **Cache data by default** | ❌ | ❌ | ❌ | | **Secure by default** | ❌ | ❌ | ❌ | | **Run in parallel** | ❌ | ✅ | ✅ | | **Public endpoints** | ❌ | ❌ | ✅ | | **Request method** | POST | GET | GET | | **Client-side execution** | ✅ | ❌ | ✅ | | **Server-side execution** | ✅ | ✅ | ✅ | | **React-query or SWR** | ✅ | ❌* | ✅ | | **Clean code** | ✅ | ✅ | ❌* |

#### React-query or SWR: Means that you can use libraries like react-query or SWR to cache the data in the client side, among other things. You can use the cache() function in the server side, for the server functions, but you won't be able to use it in the client side, and it doesn't have as many features as react-query or SWR.

#### Clean code: If I choose to use API Routes, I would use tRPC to centralize the logic and have a cleaner codebase. But I would lose the public endpoints.

Next.js introduced server actions in version 14. And until today, in my opinion, even though I love them, it seems not even the Vercel team knows exactly the best way to use them. It looks like an experiment (a good one, but still an experiment) to see how developers will use them.

The point is that all server actions are POST requests. They were mainly designed for mutation operations, but you can still fetch data from a POST request, but you won't be able to cache this data.

I dug deeper into this while building [dopost.co](https://dopost.co). The problem was that after visiting the same page you visited before, you could see another fetch to get the same data, which means the UX experience is slower, not scalable, and causes high consumption of resources.

And at the same time they won't run in parallel, so forget about fetching several data sources expecting to get a faster response.

However, I realized I could use `SWR` or `react-query` to cache this data gathered by the server action since server actions can be used on the client side and those libraries also run on the client side. But still, we're still fetching the data sequentially and with a POST request.

After reading some Next.js docs, watching some videos plus some threads on Reddit and Peerlist, I found out the following:

The approach for fetching data in Next.js that Next.js wants us to follow is using server functions in the server components and passing it through the props to the client components. No fetching with server actions. No fetching with API Routes.

```tsx //page.tsx import { getPosts } from "@/server/queries/getPosts"; // Server function

export default function Home() { const posts = getPosts();

return (

Posts

{post.title}

); } ```

```tsx //server/queries/getPosts.ts // NO "use server" here <---------

import { cache } from "react"; import { db } from "@/server/db";

export const getPosts = cache(async () => { const posts = await db.query.posts.findMany(); return posts; });

```

Basically they want you to always process the data on the server side, fetching it on the server then passing it to the browser.

Even though this is the approach recommended by Next.js, I don't really like it. Also, the fact of having a framework with different approaches to achieve the same goal depending on the Next.js version is not a good thing and doesn't make me trust the framework. Don't get me wrong, I love Next.js you can ship projects super fast and it's not difficult to learn, plus you can have all the backend logic in the same place, which I think is perfect for an MVP.

If you ask me, I would use tRPC to handle all the fetching and mutation logic in order to centralize the logic and have a single source of truth. Otherwise you'd be dealing with server actions for the mutations and server functions plus API Routes for the fetching. And yeah, I said tRPC, because in my opinion the way API routes look in your code looks very messy and ugly when it grows, since you have to create one folder for each API.

And this goes to another point: should I use Next.js since I'm avoiding their principles? Should I just use React?

Well, I'm still having this doubt, but the fact of not needing to create a separate backend and how easy it is to handle routes in Next.js is a big plus.

Embrace AI or be left behind

Wed, 30 Apr 2025 00:00:00 GMT

It's September 2024, I'm sitting in my setup developing a new side project. I'm using ChatGPT to help me with the development. And it's insanely crazy.

I have no much free time to work on side projects. But this is a game changer.

Things you would spend weeks or months to do, with AI you can do it in hours or even minutes, whether you are building your new feature that nobody asked for, solving a problem, doing research or debugging.

You are faster than ever.

You are able to do more things than ever.

Man can now do more than one thing at the same time.

*But then, you start to feel bad about it.*

You start to feel guilty for using AI to do things that you could do manually.

You think that you are not being creative enough.

That you are not learning.

You are not good enough.

Great, the impostor syndrome is over 9000.

I have been there.

When the internet was born, we were scared. People said that it would make us lazy or even dumb, and here we are, driving autonomous cars, ordering food, buying things from the other side of the world, talking to anyone in the world in a matter of seconds, and million other things.

More advanced than ever, faster than ever.

Now we are passing through the same thing with AI. It's something new, we are just starting to understand how to use it, building new tools around it, and since we are animals, we are scared of the unknown.

AI it's here to stay. It's not going away, no matter how much you resist it, and even worse if you resist it, you are the one who will be left behind. Just imagine yourself back in the school saying "No teacher, I'm not going to use the calculator as my colleagues, I'm going to do it manually 🤡". Because you are the smartest guy right? Or at least that's what you want to believe.

It's not only fear the unknown but also the lack of self-esteem, and the seek for approval from others.

I'm not saying AI is the answer to everything, in fact, it's not. At least not for now. If you are dumb, you are going to be a dumb with AI. It's just a tool, a great tool but a tool nonetheless. You need to know what AI is doing, the architecture and patterns it's using, you don't want to be one of these vibecoders who don't even know what is a variable, he might be able to lauch an MVP, in the best case scenario, but it's going to be funny.

All this time I've been feeling bad about using AI, with such a mental battle. But you know what? I surrendered, and I can explain you my reasons and you may have a different opinion of course, but this is my blog so let's go to the point.

Ask yourself the next super simple question:

👉 What is your goal?

1. 1- Gaining a trophy to the smartest guy in the world and have 0$ and no time 2. 2- Have more free time to enjoy your life, solve problems faster and get more money

I don't know about you, but I choose the second one. Maybe if you are a vain person the first one is for you.

But again of course, learn at least what a variable is.

A Wild Lambda Appeared!

Thu, 06 Feb 2025 00:00:00 GMT

Sometimes I hear about concepts I have no idea about, and I love that feeling.

It's like "Let's go figure out what that is!"

Today I heard about lambda while talking about backend development.

My mind was like "A wild rare Pokemon has appeared! It's Lambda!"

A - Fight B - Run away

I pressed A. Let's find out what this new term is

First, let's clarify that "Lambda" is just the name AWS gives to their "serverless functions". Every cloud provider has their own version, Azure calls them "Azure Functions", Vercel calls them "Serverless Functions", Cloudflare calls them "Cloudflare Workers" and so on.

Imagine your server, the one you use when deploying your apps. It's running constantly whether you have requests or not, which means you're going to be charged for its consumption (resources, compute time, etc.) even when it's chilling.

With the Lambda approach, that changes. Instead, you have a collection of functions that are only triggered on-demand.

> The Lambda service runs your function only when needed and scales automatically. You only pay for the compute time that you consume—there is no charge when your code is not running.

—[AWS Doc](https://docs.aws.amazon.com/lambda/latest/dg/welcome.html)

Traditional Server (like NestJS):

// Look, this server is always running somewhere
@Controller('documents')
export class DocumentController {
  @Post('process')
  async processDocument() {
    // Yes, this code runs only when someone hits the endpoint
    // But hey, the server is still alive and kicking all the time!
  }
}

The annoying part? If nobody's using your app, you're still paying. And if suddenly everyone wants to use it, you need to upgrade the whole machine! Now, Lambda functions are different:

There's no server running all the time - the function is just chilling, doing nothing. It only wakes up when someone needs it (like when they make a request). The cool part? You only pay for those few milliseconds it's actually doing something!

// This guy only exists when someone calls it
export const handler = async (event) => {
  // It does its job and then... poof! Disappears completely
}

A funny analogy woulf be:

- Having a restaurant open 24/7 with chefs just waiting around (your NestJS server)

- Having magic chefs that appear ONLY when someone orders food (Lambda)

Server Actions in Next.js 15 to manage CRUD operations

Wed, 05 Feb 2025 00:00:00 GMT

I started building a large API layer and using TanStack Query, but then I realized it wasn't worth it nor a good approach for the Next.js App Router and for an MVP boilerplate, because Next.js App Router already provides built-in data fetching and caching through Server Components and Server Actions.

After the Next.js 13 release, the approach to developing a Next.js application now focuses on Server Components and Server-Side Rendering (SSR), along with the introduction of Server Actions.

Server actions are server-side functions that process forms and data. They must be marked with "use server" and can be used on the server or the client side (via form actions or direct invocation).

So instead of creating multiple endpoints in our routes and managing them with TanStack, fetch requests, useEffect, etc., we will manipulate the data using server functions, which reduces client-side complexity.

That means we don’t need or shouldn’t use the TanStack library (some people also like to use a mix of both which can be a good approach) to avoid client-side load and should instead focus on the server, leveraging Next.js’s built-in data handling capabilities.

Here is an example of the structural approach we have taken: we have separated server actions from queries. Server actions are meant to be used in forms, while `queries don’t need to be marked with "use server"`, as doing so would disable Next.js's caching, which is crucial for performance.

src/
├── services/
│   └── users/
│       ├── mutations.ts    // POST, PUT, DELETE operations with 'use server'
│       ├── queries.ts      // GET operations without 'use server'
│       └── types.ts        // User types
│
...

Yeah, you may be thinking, "But why can't I just include the fetch logic within the 'use server' directory, like server actions?

> Even though you can use server actions to fetch data, Next.js discourages it because it can only send a POST request. Instead, fetch the data from the server component and pass it down as props.

— @Towel1355 on reddit

Server actions are designed for mutations (creating, updating, or deleting data), while queries (data fetching) benefit from Next.js's built-in caching and revalidation.

Actually, if you inspect the page and check the network tab, you can see how the server actions are POST requests.

// queries.ts
export async function getUser(id: string) {
  // This can be cached by Next.js
  const user = await prisma.user.findUnique({ where: { id } })
  return user
}

// mutations.ts
"use server"
export async function getUser(id: string) {
  // This bypasses Next.js cache
  const user = await prisma.user.findUnique({ where: { id } })
  return user
}

> Note: We only will need to create API routes when we need to work with thirds services

- [Next.js Doc](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#convention) - [Next.js Mutating](https://nextjs.org/learn/dashboard-app/mutating-data) - [What is the point of server actions?](https://www.reddit.com/r/nextjs/comments/1ad3q3h/what_is_the_point_of_server_actions/) - [Server Action in Next.js: What it is, How to Define Them, and What to Consider for Security](https://medium.com/@dev-journey/server-action-in-next-js-what-it-is-how-to-define-them-and-what-to-consider-for-security-8fc9f2e200e1#:~:text=Share-,Server%20Actions%20in%20Next.,improves%20app%20performance%20and%20scalability.)

Procrastination

Fri, 24 Jan 2025 00:00:00 GMT

Procrastination is like a credit card with your future self.

There is you sitting in front of your laptop, ready to take action, ready to work on your future.

But BOOM! a "How to become rich in 2025" YouTube video shows up in your feed. And guess what? You click on it.

You check the clock, it has been 2 hours since you fell into the rabbit hole of YouTube.

Now it's time to eat, sleep or do something else.

You have wasted your time again.

You have procrastinated again.

Videos that promise to make you become something or give tips to achieve something are not the problem.

The problem is you.

Videos that give you dopamine then drain your energy to do what really matters.

It's something normal, we all do it. We have to live with it.

The loop is something like this:

1- You have a long/hard task to do.

2- You feel overwhelmed by the task.

3- The brain's natural reaction then is to generate adrenaline and cortisol.

4- The frontal part of the brain gets saturated, the part in charge of making decisions.

![Procrastination](/blog/procrastination.svg)

Faced with the task, we choose to postpone, to procrastinate on the task as a defense, since that will save us energy.

So then you end up doing something else that gives you instant gratification, like watching a video, eating, or sleeping.

Actually, I don't have the key, sorry. I'm still struggling with it.

But what works for me so far is to not negotiate with my brain and just take action.

Once you know the previous theory and why that happens, you can anticipate it and act accordingly.

Or at least try to.

In your brain, you usually have two characters living there, they are like the politicians of your body, discussing all the time what are the "best" decisions.

One is rational, the other is emotional.

The emotional one will always side with natural instincts, like procrastination.

The rational one will always side with long-term benefits, like working on your future.

So I just try to give more attention to the rational one. Even though sometimes I follow the emotional one's instructions, I try to at least be conscious of it.

Tough Times

Sun, 12 Jan 2025 00:00:00 GMT

I don't know where to start, these last weeks have been tough. Life in Lisbon is not easy, even though I got my dream job and I don't hate Mondays anymore. It's tough because it's frustrating, it's frustrating because I feel I'm doing everything I should be doing to build a good future, but the results take time to come.

I keep studying after work, I do side projects in my free time, go to the gym, run, don't drink alcohol, read books... Well, the common blueprint from one of these mainstream books.

So I'm having an internal discussion with two parts of my mind. The first is saying:

"I'm sacrificing so many enjoyable things but you're still living in a crappy shared apartment. I can't eat as many sweets as I'd like, I can't enjoy a late party, but in exchange for what?"

On the other hand, the other part says:

"You are doing well. Good things take time to arrive. You can't lose your focus right now, you have to fight and get out of that negative spiral that can pull you away from your goals."

So yeah, I'll try to listen to what that last part says. My body can suffer in the environment, but my mind must be at peace outside of myself because I'm not the money I have in my bank account, I'm not the phone or clothes I have.

Signed, a random Spanish guy who lives in Portugal.

Is there someone reading this? I don't know, but it feels good to write.

Whatever, let's focus.

My First NPM Package got 3,000 Downloads in a Week

Thu, 09 Jan 2025 00:00:00 GMT

A year ago, I was creating my first blog with Astro, and I needed something to organize the blogs into pages. So I started searching online to see if Astro had anything to solve this, and Astro didn't have anything built-in.

Until I randomly found a blog talking about an npm package for Astro to manage blog pagination. The creator was [Phil Nash](https://philna.sh/). Months later, I went to a talk he gave in Berlin at the WeAreDevelopers World Congress.

The internet is beautiful, and the community is beautiful too. Someone who also needed a pagination component not only created it but shared it with the community.

Every day we use things made by people without thinking about it, but that day it caught my attention so much that I went to learn more about Phil Nash. I had never looked up who the author of an NPM package was before.

After this, I had the idea to create an NPM package too. I had no idea where to start - it seemed like something only hackers could do.

However, now even though I don't have much experience, we have great AI tools plus the internet itself that explain the process almost like having a senior developer next to us.

And last weekend the idea came: I was creating a new portfolio and thought it would be cool to add the GitHub contributions graph, the one with the green dots.

So why not create it not just for me but for anyone who wants to use it?

Boom! Done [Green Dots](https://green-dots.vercel.app/) created, and in less than a week it already has +3,000 downloads on NPM.

The internet is beautiful! And again, thanks to Phil for the inspiration he gave me that day.

How to set up Vite in a WordPress theme

Mon, 21 Oct 2024 00:00:00 GMT

Let's briefly figure out some doubts I had between the difference of a compiler and a bundler. In the past we were using Babel and Webpack, with Babel you can compile your JavaScript code and Webpack will bundle it into a single file or multiple files. But now I'm using Vite as a bundler and compiler, since it covers both functionalities and it's faster than Webpack.

A JavaScript compiler allows you to write code using the latest version of JavaScript (ECMAScript 6) and it will transform or compile it to a version that is compatible with most browsers.

It's primarily configured with a file or in your build tool (Vite, Rollup, Gulp, etc.).

Example of a code written in modern JavaScript ES6:

const greet = (name) => {
  console.log(`Hello, ${name}!`);
};

After it compiles the code, it will look like this (ES5):

var greet = function(name) {
  console.log('Hello, ' + name + '!');
};

The purpose of a bundler is to group or bundle all your assets (JavaScript, CSS, etc.) into a single file or multiple files that can be loaded by the browser.

It's primarily configured with a file or in your build tool (Vite, Webpack, Rollup, etc.).

You can simply run `npm init -y` to create a `package.json` file with default values.

npm install --save-dev vite sass

Or you can add them to devDependencies in your package.json file.

"devDependencies": {
    "vite": "^5.4.9",
    "sass": "^1.80.3",
  }

Then run `npm install` to install the dependencies.

If you are using VSC you can also install the extension `Version Lens` to see or update the versions of your dependencies.

"scripts": {
    "start": "vite build --watch",
    "dev": "vite",
    "build": "vite build"
  }

Inside the root of your project, create a `vite.config.mjs` file and add the following code:

//vite.config.mjs
import { defineConfig } from 'vite';

export default defineConfig({
  // Vite configuration options
});

In the configuration file, you can define various options for your project, like the root directory and build options.

The root directory is where your JavaScript files are located, and the build options define the output directory and the input files.

Change the paths according to your project. In Vite, you don't explicitly define entry and output paths like in Webpack. Instead, you set the root and build options.

//vite.config.mjs
import { defineConfig } from 'vite';
import { resolve } from 'path';

// Get the main.js where all your JavaScript files are imported
const JS_FILE = resolve('src/scripts/main.js')

// Define where the compiled and minified JavaScript files will be saved
const BUILD_DIR = resolve(__dirname, 'dist');

export default defineConfig({
  build: {
    assetsDir: '', // Will save the compiled JavaScript files in the root of the dist folder
    manifest: true, // Generate manifest.json file (for caching)
    emptyOutDir: true, // Empty the dist folder before building
    outDir: BUILD_DIR,
    rollupOptions: {
      input: JS_FILE,
    },
  },
});

With this configuration, Vite will compile and bundle your JavaScript files into the `dist` directory. But not the CSS.

At this point we should have something like this:

mytheme/
├── dist/
│   ├── main-AD2AS.js
│   └── .vite/
│       └── manifest.json
├── src/
│   └── scripts/
│       ├── main.js
│       ├── woo/
│       └── components/
├── node_modules/
├── package.json
├── package-lock.json
├── functions.php
├── vite.config.mjs
└── style.css

For this part we don't need to touch the `vite.config.mjs` file any more. We just need to add the CSS files to the `main.js` file.

// src/scripts/main.js

/**
 * Main JS file for Cartify Child
 * 
 * Import the main css file
 * Import all the JavaScript files that are needed for the theme.
 */

// Import the main CSS file
import '../styles/main.scss'

// Build the main JS file
// ... other js files imports

In our case we need to create the `main.scss` file in the `src/styles/` directory. There you will add or import all the other CSS files that you need.

mytheme/
├── dist/
│   ├── main-something.js
│   └── .vite/
│       └── manifest.json
├── src/
│   ├── scripts/
│   │   ├── main.js
│   │   ├── woo/
│   │   └── components/
│   └── styles/
│       ├── main.scss
│       └── general/
├── node_modules/
├── package.json
├── package-lock.json
├── functions.php
├── vite.config.mjs
└── style.css

And as we did with the JavaScript files, we need to enqueue the CSS file in the `functions.php` file. We just need to update the previous code to enqueue the CSS file.

add_action('wp_enqueue_scripts', function(){
    $manifestPath = get_theme_file_path('dist/.vite/manifest.json');
    
    // Check if the manifest file exists and is readable before using it
    if (file_exists($manifestPath)) {
        $manifest = json_decode(file_get_contents($manifestPath), true);
        
        // Check if the file is in the manifest before enqueuing
        if (isset($manifest['src/scripts/main.js'])) {
            wp_enqueue_script('mytheme', get_theme_file_uri('dist/' . $manifest['src/scripts/main.js']['file']));
            // Enqueue the CSS file
            wp_enqueue_style('mytheme', get_theme_file_uri('dist/' . $manifest['src/scripts/main.js']['css'][0]));
        }
    }
});

Just for your curiosity, this is how my `manifest.json` file looks like:

{
  "src/scripts/main.js": {
    "file": "main-BL027S3L.js",
    "name": "main",
    "src": "src/scripts/main.js",
    "isEntry": true,
    "css": [
      "main-BLUr3EH8.css"
    ]
  }
}

Now you can run Vite with the following command:

npm run start

This is how you can set up Vite in a WordPress theme. It's a bit different from Webpack, but it's faster and easier to configure. You can also use Vite for many other projects.

Next Auth error: To confirm your identity, sign in with the same account you used originally.

Sun, 20 Oct 2024 00:00:00 GMT

Next.js 14

I encountered this error when I was building my first Next.js project with Next Auth, and as I was getting crazy with it, I decided to write to don't forget it.

The thing is that I wanted to use a `email provider` and `Google provider` or any other, at the same time. I didn't understand why this error was happening, and there were no clear answers on the internet. It may be something easy for someone with more experience, but...

In the case I'm mentioning, the error is due to the fact we want the user to be able to sign in with Google and with an email provider. And for security reasons, Next Auth wants to prevent this.

But why?

Well lets imagine that a user signs in with the Google provider, he will have is own account and blablabla.

Now what if the same user signs in with the email provider? He will have another account, and this is not what we want. We want the user to have only one account, no matter how he signs in.

But Next Auth doesn't Know whether the user is the same or not. So it throws this error.

The solution is to add an option to allow this behavior. This is done by adding the `allowDangerousEmailAccountLinking` option to the Google provider.

Here is the code:

// @/lib/auth.ts in my case

  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID as string,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
      allowDangerousEmailAccountLinking: true,
    }),
    EmailProvider({
      // Your email provider configuration
    }),
  ],

And ta da!

[Next Auth documentation](https://next-auth.js.org/configuration/providers/oauth#allowdangerousemailaccountlinking-option)

Setting up MongoDB locally in a Next.js project [Mac]

Sun, 25 Aug 2024 00:00:00 GMT

Next.js 14.2.6 | MongoDB 7.0

brew tap mongodb/brew

brew install mongodb-community@7.0

brew services start mongodb-community@7.0

brew services list

Here you should have a table like this with the status `started`:

Name              Status  User File
mongodb-community started user ~/Library/[...]/mongodb-community

mongosh

Now you can see the MongoDB shell prompt:

Current Mongosh Log ID: 1234567890
Connecting to: mongodb://
Using MongoDB: 7.0.0

show dbs

By default you should see some databases like `admin`, `config`, `local`, `test`.

Mongo places your data in the `test` (`test>`) database by default. If you want to create a new database, you can do it with the `use` command + the name of the database.

We are going to test the connection in the terminal with a new collection called `myNewCollection`.

db.createCollection('myNewCollection')

db.myNewCollection.insertOne({ name: 'Raul', age: 30 })

db.myNewCollection.find()

- You can have multiple databases in MongoDB. - Each database can have multiple collections. - Each collection can have multiple documents.

The structure is like this:

Database
  Collection
    Document

The `Database` is the top-level container for our data. It is the container for collections. The `Collection` is a group of documents. The `Document` is a set of key-value pairs that you might be manipulating them with mongoose in your Next.js project.

In the terminal when you run `mongosh` normally you are in the `test` database, thats why you see the `test>` prompt. So then all the commands you run are in the `test` database.

So when you run `test> db.myNewCollection.find()` you are querying the `myNewCollection` collection in the `test` database.

---

Ok so now we have MongoDB installed and running on our Mac. We need to add the MongoDB URI to our Next.js project.

mongosh

You will see the MongoDB shell prompt of the step 4. `copy` the "Connecting to" value.

Connecting to: mongodb://127.0.0.1:27017/...

Go to Next.js and paste it in your `.env.local` file in your Next.js project.

MONGODB_URI=mongodb://127.0.0.1:27017/...

You can forget the previous collection we created in the terminal.

Run your Next.js project with `npm run dev` and test the connection with MongoDB, you first need to submit a form or make a request to the database, like registering a new user.

Then in the terminal:

```bash mongosh

Ensure you are in the correct database and collection in our case `test` and `users`:

use test

Now check the database and collection `users`:

db.users.find().pretty()

Here we are inside the DB `test` and the collection `users`. You should see the new user you just registered.

Make sure you are in the correct database and collection otherwise you will not see the new user.

---

## How to Stop MongoDB service 
(Do not forget to stop the service when you are done)

brew services stop mongodb-community@7.0

`Reestart` MongoDB service:

brew services restart mongodb-community@7.0

Add a Custom Block Within the Core Navigation Block in WordPress

Mon, 12 Aug 2024 00:00:00 GMT

`Note`: To follow along this you already know how to create a plugin custom block in WordPress 6.6. If you don't, you can check out the [official documentation](https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/).

If you want to jump straight to the main point, see the 3 step [index.js](#3-add-the-block-to-the-navigation-block) file.

By default in WordPress, you can't add a custom block within the core navigation block. Here I'll show you the key steps to add add your block within the core navigation block. Bear in mind that this is a simplified version of the process, we are not going to going to create a whole block from scratch, but rather add a custom block to the navigation block.

wp-content/
└── plugins/
    └── my-plugin/
        ├── my-plugin.php
        └── block-example/
            ├── block.json
            ├── edit.js
            ├── editor.scss
            ├── index.js
            ├── render.php
            ├── script.js
            ├── style.scss
            └── view.js

`block.json`:

{
	"name": "my-plugin/block-example",
	"version": "0.1.0",
	"title": "Example Block",
	"category": "design",
	"textdomain": "my-plugin",
	"description": "Add the Example Block within the navbar",
	"parent": [ "core/navigation" ], <- Don't forget this
	"attributes": {
		"blockId": {
			"type": "string",
			"default": ""
		}
	},
...Everything else
}

`my-plugin.php`:

`3. Add the block to the Navigation block`

`index.js`:

import { registerBlockType } from '@wordpress/blocks';

import './style.scss';
import './editor.scss';

import Edit from './edit';
import metadata from './block.json';

registerBlockType(metadata.name, {
	edit: Edit,
	icon: 'admin-site',
});

/**
 * Make the Example Block available to Navigation blocks.
 *
 * @since 0.1.0
 *
 * @param {Object} blockSettings The original settings of the block.
 * @param {string} blockName     The name of the block being modified.
 * @return {Object} The modified settings for the Navigation block or the original settings for other blocks.
 */
const addToNavigation = ( blockSettings, blockName ) => {
	if ( blockName === 'core/navigation' ) {
		return {
			...blockSettings,
			allowedBlocks: [
				...( blockSettings.allowedBlocks ?? [] ),
				'my-plugin/block-example', // Change this to the actual block name in block.json
			],
		};
	}
	return blockSettings;
};
addFilter(
	'blocks.registerBlockType',
	'my-plugin-block-example-add-to-navigation', // Change this to a unique name for your filter.
	addToNavigation
);

`Conclusion`

The main file that allows us to insert a custom block inside the navigation block is `index.js`. This file is responsible for registering the block and adding the block to the navigation block. The `block.json` file is also important because it defines the block's metadata, including the parent block. Finally, the `my-plugin.php` file registers the block and its assets.



Should I go to a tech event if I'm junior?: WeAreDevelopers 2024
Sat, 20 Jul 2024 00:00:00 GMT
Attending WeAreDevelopers 2024
There I was, sitting in a chair in one of the talks at WeAreDevelopers 2024. I didn’t understand anything. But nothing at all, and next to me there was another guy:
Me: Hey! What’s your name?
Him: Hey, I’m Valerio, and you?
[...]
Him: Wait, what? Just two months of work experience and you’re here listening to a talk about architecture?
Me: I’m curious hahah 

Even though I could think I have wasted the money as I didn’t understand pretty much everything, I prefer to think that attending the event is forcing me to raise my level of expertise, to achieve the knowledge that many of the people there have.
Not only that, which is true, but also retaining a bunch of unknown terms that I had no idea about until now. Now I just know that new term, that new technology. So when I arrive home, my lover ChatGPT is ready to answer tons of questions until I feel comfortable with the meaning of this new word.
Starting is hard, we all know. I remember the first day I heard “GitHub”. What was that? Why was everyone always using that word? Is it so important?
Well, I remember I spent the whole afternoon asking ChatGPT and searching on Google about this black cat.
I’m not saying that you should go to every event you see, but if you have the opportunity to attend one, don’t hesitate. You will learn a lot, even if you don’t understand everything. You will be forced to learn, and that’s the best way to do it.


Resetting the Full-Site Editor in WordPress
Fri, 12 Jul 2024 00:00:00 GMT
Imagine you are working with your team on a WordPress site, and you are using the Full-Site Editor to make changes to the site. But when you push those changes to the Production site, the Full-Site Editor looks different.
To understand what is going on, let's first explain what the Full-Site Editor is in WordPress.
The Full-Site Editor is a new feature in WordPress that allows you to edit your entire site using blocks. It's a new way to build and customize your site without having to write code.
But the changes you make in the Full-Site Editor are stored in the database
And here is the problem: if you make changes in your Local environment, those changes will be stored in the database. And when you push those changes to the Production site, the Full-Site Editor will look different, simply because the database is different.
To setup all the settings on the site, WordPress will first look into the database. If the settings are not there, it will use the settings from the theme in `theme.json`. And so `theme.json` is the key to reset the Full-Site Editor, as it is pushed, and committed to the repository.
---
Requirements
You will need to have a git branch to see the changes, that will allows you to remove them at the end.
1. Install Create Block Theme Plugin
Install the plugin [Create Block Theme](https://wordpress.org/plugins/create-block-theme/) and activate it.
This plugin allow us to add all the settings we've made from the database to the `theme.json` file.
Then go to Appearance > Editor > Click on the Full-Site Editor tab to open the settings of the Full-Site Editor. (Does not matter the desing you choose on the left side)
2. Export the settings
This will update the `theme.json` file with all the settings you've made in the Full-Site Editor. So you have them all in code (Which allows you to push or delete them).
![Save Create Block Theme](/images/blog/screenshots/save-create-block-plugin.png)
3. Remove the changes
Ok, now it can be a little bit confusing, but what happens is that now because we have exported the settings to the `theme.json` file, our database is now empty, and WordPress is using the settings from the `theme.json` file.
And that was the goal, clean these settings from the database.
Now that we have this settings in our `theme.json` not in the database, but we still don't want them in the `theme.json` file, so we need to remove them.
And the easiest way is to remove the changes from this current branch.
git checkout -b remove-full-site-editor
Here remove-full-site-editor is the name of the branch, you can name it as you want.
Or if you are using a GUI like SourceTree, do right click on the files pending to being commmited and remove them.
Now you will see how the Full-Site Editor is reset to the settings of the theme, same as the Production site.


Add New Custom Field and Query by Weekly Views in WordPress
Mon, 08 Jul 2024 00:00:00 GMT
WordPress allows you to create new meta_keys for your posts. This is useful when you want to store additional information about your posts.
By the other hand the [WordPress CRON event](https://developer.wordpress.org/plugins/cron/scheduling-wp-cron-events/) allows you to schedule events to run at specific times. In this case, we will use it to reset the daily views counter every day, store the daily views in a weekly array, and calculate the total weekly views.
---
1. Add a New Custom Field to Store Daily Views
We can add a new custom field in different ways. Without code by using the plugin ACF (Advanced Custom Fields) or with code. In this case, we will use code.
To add a new custom field, WordPress provides the [add_post_meta()](https://developer.wordpress.org/reference/functions/add_post_meta/) and [update_post_meta()](https://developer.wordpress.org/reference/functions/update_post_meta/) functions. It's not necessary to use the first one because update_post_meta() will add the custom field if it doesn't exist.
Code for `single.php`


  

  ...Your post content

By doing so, we can see in the database that the custom field `daily_views` has been added to the post. Inside the postmeta table
2. Create CRON event to reset the daily views counter every day
To reset the daily views counter every day, we can use the WordPress CRON event. We will create a new function in `functions.php` to reset the daily views counter for all posts.
Code for `functions.php`
function reset_daily_views()
{
	$args = array(
		'post_type'      => 'post',
		'posts_per_page' => -1,
		'post_status'    => 'publish',
	);

	$posts = new WP_Query($args);

	if ($posts->have_posts()) {
		while ($posts->have_posts()) {
			$posts->the_post();
			delete_post_meta(get_the_ID(), 'daily_views'); // Delete the daily views counter
		}
	}
	wp_reset_postdata();
}

if (!wp_next_scheduled('reset_daily_views_hook')) {
	wp_schedule_event(time(), 'daily', 'reset_daily_views_hook');
}

add_action('reset_daily_views_hook', 'reset_daily_views');
3. Add a New Custom Field to Store Weekly Views With a CRON Event
We will create a new function in `functions.php` to store the daily views in a weekly array. This function will be executed every day to store the daily views in the `weekly_views` custom field.
function add_day_to_week()
{
	$args = array(
		'post_type'      => 'post',
		'posts_per_page' => -1,
		'post_status'    => 'publish',
	);

	$posts = new WP_Query($args);

	if ($posts->have_posts()) {
		while ($posts->have_posts()) {
			$posts->the_post();

			$daily_views = get_post_meta(get_the_ID(), 'daily_views', true);  // Comes from single.php
			$weekly_views = get_post_meta(get_the_ID(), 'weekly_views', true);

			if (!is_array($weekly_views)) {
				$weekly_views = array();
			}

			if (count($weekly_views) >= 7) {
				array_shift($weekly_views);
			}

			$weekly_views[] = $daily_views;

			update_post_meta(get_the_ID(), 'weekly_views', $weekly_views);
		}
	}
	wp_reset_postdata();
}

if (!wp_next_scheduled('add_day_to_week_hook')) {
	wp_schedule_event(time(), 'daily', 'add_day_to_week_hook');
}

add_action('add_day_to_week_hook', 'add_day_to_week');
4. Add a New Custom Field to Store The Total Views During The Week
This is a simple sum of the `weekly_views` array. We will create a new function in `functions.php` to store the total weekly views for all posts.
function total_weekly_views()
{
	$args = array(
		'post_type'      => 'post',
		'posts_per_page' => -1,
		'post_status'    => 'publish',
	);

	$posts = new WP_Query($args);

	if ($posts->have_posts()) {
		while ($posts->have_posts()) {
			$posts->the_post();

			$weekly_views = get_post_meta(get_the_ID(), 'weekly_views', true);

			if (!is_array($weekly_views)) {
				$weekly_views = array();
			}

			$total_weekly_views = array_sum($weekly_views);

			update_post_meta(get_the_ID(), 'total_weekly_views', $total_weekly_views);
		}
	}
	wp_reset_postdata();
}

if (!wp_next_scheduled('total_weekly_views_hook')) {
	wp_schedule_event(time(), 'daily', 'total_weekly_views_hook');
}

add_action('total_weekly_views_hook', 'total_weekly_views');
5. Query Posts by Weekly Views
Now that we have the `total_weekly_views` custom field, we can query the posts by weekly views. We will create a new file called `most-viewed.php` to query the posts by weekly views.
 'post',
  'posts_per_page' => 5,
  'meta_key'       => 'total_weekly_views',
  'orderby'        => 'meta_value_num',
  'order'          => 'DESC',
);

$query = new WP_Query($args);
?>
This code will return the `$query` we can use to loop through the posts.

// This returns the $query we can use to loop through the posts
...Filter the loop
How To Test The CRON Events
To test the CRON events you can use the [WP Crontrol](https://wordpress.org/plugins/wp-crontrol/) plugin. This plugin allows you to view and control what's happening in the WP-Cron system.
Then you can simulate the CRON events by clicking on the "Run Now" button.
Conclusion
There are of course many ways to achieve this. This is just one of them. You can use this as a base and improve it according to your needs.
Hope this helps you to filter posts by weekly views in WordPress without external plugins.


From Factory Worker to Developer: The Trigger
Sun, 07 Jul 2024 00:00:00 GMT
Usually, we complain when bad things happen to us. But, those moments can be the best fuel to change, grow, and improve. It can be hard to realize it at the moment, but if you think about it, every time you've had a problem, you've learned something new, you've grown, and you've gotten better. So instead of complaining, be grateful for the bad things that happen to you.
---
I had a friend in the town where I lived in Spain. Let’s call him Carlos. Carlos had been working in a factory for five years, always trying “side projects” while working.
Most of these “side projects,” if not all, failed. Still, when we met for a drink, he was always talking about his next idea.
What seemed incredible was his routine. Carlos worked the night shift in that factory, where they cut fabric for sofas on demand. It wasn’t a hard job, but it was definitely monotonous.
When he started in 2016, he was 19 years old and promised himself he wouldn’t be in the factory by the time he was 30. Something that seemed impossible in that town without any studies.
I think that all the big decisions we make in our lives come with a trigger. No matter how much Carlos wanted to leave the factory before 30, no matter how many side projects he had during the day after working at night, nothing changed until 2021. That year, he didn’t get fired, but his girlfriend left him.
That day, I remember he called me on the phone. I had never seen him like that: completely lost, without goals, and feeling that nothing made him happy in that town anymore.
That girl was everything to him at that moment. His last project had failed almost at the same time she left him.
Carlos and I always fantasized about living outside that town. But as I said, big decisions come with a trigger. People tend to talk a lot and do little, until something pushes them to act.
In Carlos’s case, it was hitting rock bottom and feeling he had nothing to lose.
The trigger was the breakup with his girlfriend and the failure of his project, but the change was moving to Portugal. According to him, what more could he lose? What could go worse? What could be harder than what he was living at that moment? Probably, nothing.
He went to Lisbon, where he found a job in a call center. And if many people ask, he chose Portugal as he could have chosen another place, he just wanted to leave that town.
It wasn’t his dream job, but it allowed him to live in a city he loved and gave him time to continue with his side projects.
In this case, it was programming, something he always liked, but never saw himself capable of learning.
It was time to change. It was no longer okay to stay in the comfort zone, no longer okay to lie in bed, or party until the early hours. It was time to get serious.
From 2022 to 2024, Carlos dedicated himself to learning programming, working on personal projects, networking, taking online courses, reading books, doing everything he could to learn and improve.
In 2024, Carlos is working as a web developer in Lisbon. He achieved what he set out to do in 2016: not being in the factory at 30.
All thanks to a trigger, or as we say in my country: “a shitty situation.”
And well, as you might have guessed, Carlos is me, and this is my little story.
Nowadays, what felt like the worst time of my life back then, is something I’m really grateful for.
And about Portugal, I had no idea how much this country would mean to me. I just want to say thanks to this amazing country and its people.

Raúl Cano

Tailwind is trash, but I still use it

Conclusion

The fear of not growing due to AI

Infinite Bugs

Conversación con mi abuela

Historias de antes

El presente

I joined Salescaling <3

SQL

SQL query:

Order of execution:

Fetching data in Next.js. Server actions vs server functions vs API Routes

Summary

Why fetching data with server actions is not the right way

Posts

My opinion

Embrace AI or be left behind

Feeling bad about using AI

We have passed through here

Embrace AI

A Wild Lambda Appeared!

What is this pokemon Lambda?

Server Actions in Next.js 15 to manage CRUD operations

Caching clarification

Sources

Procrastination

But how does procrastination work?

How do I deal with it?

Tough Times

A Personal Reflection

My First NPM Package got 3,000 Downloads in a Week

React GitHub Dots - My NPM Journey

How to set up Vite in a WordPress theme

Compiler vs Bundler

Compiler

Bundler

Setting up Vite in WordPress

Creating the package.json file

Add the devDependencies in your package.json

Add the scripts in your package.json

Create the vite.config.mjs file

Fill the entry and output variables in Vite

Folder structure with JavaScript files

Enqueue JavaScript in functions.php

Building the CSS

Folder structure with CSS files

Enqueue CSS in functions.php

My .vite/manifest.json file

Running Vite

Conclusion

Next Auth error: To confirm your identity, sign in with the same account you used originally.

Understanding the error

Solution

Setting up MongoDB locally in a Next.js project [Mac]

1. Install MongoDB with Homebrew

2. Start MongoDB service

3. Check MongoDB service status

4. Connect to MongoDB

4.1. Show databases

5. Create a new collection

6. Insert a new document

7. Query all documents

`Note:` Keep this in mind before going to the next step

8. Add the MongoDB URI to Next.js .env.local file

9. Test the connection

Add a Custom Block Within the Core Navigation Block in WordPress

Introduction

Block structure:

1. Configure block.json

2. Register your block

3. Add the block to the Navigation block

Conclusion

Should I go to a tech event if I'm junior?: WeAreDevelopers 2024

Attending WeAreDevelopers 2024

Resetting the Full-Site Editor in WordPress

Requirements

1. Install Create Block Theme Plugin

2. Export the settings

3. Remove the changes

`3. Add the block to the Navigation block`

`Conclusion`