juanmanzanero/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

migrate website to astro

Browse Source
This commit is contained in:
Juan Carlos Manzanero Domínguez
2024-06-25 10:07:29 -06:00
parent f1b9e3ff61
commit 667038d811
71 changed files with 13571 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
src/content/blog/a-better-way-for-consuming-content.mdx Normal file
View File

@@ -0,0 +1,122 @@
---
title: A Better Way for Consuming Content
description: Get your news without visiting websites with algorithms that shows content that you don't want to see.
tags: [Tech]
image: /blog/a-better-way-for-consuming-content/banner.webp
imageCaption: Newspapers. Photo by Ashni on Unsplash
date: 2024-4-11
author: Juan Manzanero
rss: true
---
![Newspapers](@/assets/blog/a-better-way-for-consuming-content/banner.webp) _Photo by
[Ashni](https://unsplash.com/@ashni_ahlawat?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash)
on
[Unsplash](https://unsplash.com/photos/text-ePWaAwUn80k?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash)_
Get your news without visiting websites with algorithms that shows content that you don't want to see.
## Algorithms that Dictates What You See
Social media are not designed for showing you the latest and most important
news, but for showing you content dictated by an algorithm.
And this content is normally viral, and viral doesn't mean interesting.
Usually this algorithm prioritizes content that get you angry.
Content that promotes negativity gets more clicks rather than those whose
promotes positivity.
That's the reason why Twitter and Facebook are full of stupid and irrelevant
posts (usually).
Of course, it's really cool when the algorithm shows you content that you like,
discovering new people and pages, but that's not usual.
Without mentioning the annoying ads and more stuff that wants you to click it.
Meta (previously Facebook) knows about this, and encourages it in their products
like Instagram and Facebook, and the same for Twitter.
## The Solution: News Aggregators (RSS)
RSS is an acronym for "Really Simple Syndication".
It's an ancient technology, not promoted so much by companies.
That's because when you read a post in an RSS Reader, you don't need to visit
the website, and the website can't show advertisements using Google Ads (for
example). You don't generate traffic; your visits don't count, at least not if
you don't open the post link in your RSS Reader.
The good thing is that almost every RSS Reader shows you content sorted by date,
not by a creepy algorithm that wants you to be mad.
[For my website](https://github.com/juancmandev/website/blob/main/scripts/rss.ts),
I use a Node.js script that takes the `.mdx` files inside `content/blog` and
`content/portfolio`, then generates the RSS Items, those with the `rss: true` in
the metadata.
## How to Use an RSS Reader
First, you should download one.
There are many options:
- [NetNewsWire](https://netnewswire.com/): a native RSS Reader for macOS and
iOS, free and Open Source, my favorite option as an Apple ~~Sinner~~ user
- [Akregator](https://apps.kde.org/akregator): from the KDE project for Linux
- [Feeder](https://play.google.com/store/apps/details?id=com.nononsenseapps.feeder.play):
for Android
- [Raven Reader](https://ravenreader.app/): desktop cross-platform
### Adding Feeds
Now you need to search for the RSS URL on your favorite website, like
[this one](https://juancman.dev/rss.xml)!
```
https://juancman.dev/rss.xml
```
If you open it, you'll get a weird page with code similar to HTML.
Once copied, go to your RSS feed and search for "Add feed" or something similar,
and paste the link, and you're done! Now you'll get the latest posts from my
website.
### Adding Social Media Feeds
You can even add feeds from sites like Reddit or YouTube.
#### Reddit
Just change `[SUBREDDIT]` for the name of your subreddit to add:
```
https://reddit.com/r/[SUBREDDIT]/new/.rss
```
#### YouTube
Go to the channel to add, then go to the **About** tab, then click on **Share >
Copy channel ID**.
Now just change `[CHANNEL ID]` for the copied one:
```
https://youtube.com/feeds/videos.xml?channel_id=[CHANNEL ID]
```
### My Favorite Feeds
- [juancman.dev (obviously!)](https://www.juancman.dev/rss.xml)
- [Astronomic Picture of the Day (apod)](https://apod.com/feed.rss)
- [Earth Science Picture of the Day (epod)](https://feeds2.feedburner.com/EarthSciencePictureoftheDay)
- [Erick Murphy (cool guy)](https://ericmurphy.xyz/index.xml)
## More About RSS
- [Privacy Tools - RSS Feed Readers](https://www.privacytools.io/privacy-rss-feed-readers)
- [Privacy Guides - News Aggregators](https://www.privacyguides.org/en/news-aggregators/)

156
src/content/blog/how-computers-works.mdx Normal file
View File

@@ -0,0 +1,156 @@
---
title: How Computers Works
description: Today we use, in some way, the computer in almost every activity in our lives, it could be for work or just fun, but if we think carefully, computers are an invention from the previous century, and have changed our lives.
tags: [Tech, Informatic]
image: /blog/how-computers-works/banner.jpg
imageCaption: An open laptop. Photo by Philipp Katzenberger on Unsplash
date: 2023-5-29
author: Juan Manzanero
rss: true
---
![Open laptop](@/assets/blog/how-computers-works/banner.jpg) _An open laptop. Photo by
[Philipp Katzenberger](https://unsplash.com/@fantasyflip?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText')
on
[Unsplash](https://unsplash.com/photos/iIJrUoeRoCQ?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)_
Today we use, in some way, the computer in almost every activity in our lives, it could be for work or just fun, but if we think carefully, computers are an invention from the previous century, and have changed our lives.
New works have appeared, new careers to study, and new problems to be solved.
However, do we know how computers penetrated our lives? Do we know how a
computer works? How does the Internet work?
Many people use their smartphones to communicate with family and friends and to
share their lives, but they don’t know how all this is possible.
I’m not saying that everyone needs to be a Software Engineer or IT Expert, but
knowing about this could be outstanding knowledge.
## The power of computers
Computers can expand our brains, such things like sends messages to people from
the other side of the Earth, to create an app that speeds up delivery.
All these things are possible by flipping 0’s and 1’s, but how is this possible?
If you've watched The Imitation Code, maybe you know this story.
### Computing Fundaments
Alan Turing was the inventor of the Turing Machine, a simple but powerful
machine that can receive instructions to move along a long tape, changing the
state of each slot. This three things, a head, a long tape and a set of
instructions are the bases for the modern computers.
The head is the Central Processing Unit (CPU), a piece of hardware that can be
used for general purposes, receiving instructions (Algorithm) whose are
transformed to electric pulses, understanding if electricity pass trough or not,
if it's true or false, 1 or 0. All these instructions are saved in a Random
Access Memory (RAM) for a quick access of the work that needs to be
accomplished, and using a Read-Only Memory (ROM) to store persistent data that
needs to be saved even if the computer shuts down.
An algorithm's like a recipe, declaring ingredients (variables) and the steps to
follow to achieve the result (functions).
A variable is an identifier that points to a slot of memory in the RAM, storing
a value that can be a number, a text (known as “string”), a boolean (true or
false), or an object (a set of multiple variables and functions that can be
instanced), etc.
Functions are blocks of instructions that achieve a task, like obtaining your
current location or sending a message.
And maybe you are asking, how do I tell a computer how to do what I want?
### Programming languages
If you try to speak with someone who doesn’t speak the same language as you, you
try to use a translator or use gestures, something that you know that both can
in some way understand, the same is for computers.
Computers are powerful, but they need someone to tell them what to do, this is
work for humans, and to achieve it we use programming languages. With a
programming language you use a specific syntax to tell a computer your desired
task, then you compile that file where you type all your instructions, when a
file compiles, is transformed to a computer nature language (1’s and 0’s) and
then the computer executes the task.
There are different programming languages, and all of them are designed to
achieve specific needs, like the programming languages C and C++, both are
low-level languages, which means that are close to how a computer “speaks” and
are used to control and administrate memory in high-efficient apps, or to
illuminate the screen of your computer.
There is Java, is a language that can create an environment when is compiled,
meaning that can be used on almost every computer.
JavaScript (is NOT Java or something like that) is a language that our browsers
understands, with the help of JavaScript, we can access to a web page and see
nice interactions when we click a button, login with a username and password,
and more.
JavaScript is a high-level language, that is easiest to learn than Java or C,
but not that is worse or better, just resolves a different need.
### The Browser
A powerful software that can access other computers using the Hyper Text
Transfer Protocol (HTTP), it means that thanks to this protocol different
computers can send and receive information to communicate, even if they’re far
away. The browsers receive data in the form of a file, mainly three:
- Hyper Text Markup Language (HTML)
- Cascading Styles Sheet (CSS)
- JavaScript
### HTML
Helps the browser to structure data like texts or images, using a markup
language (tags). The browser can know where to put an input to type your email
or a button to subscribe to your favorite artist.
### CSS
It gives colors and forms to the HTML tags using selectors. It can be used to
change page's background color, change button's rounded borders, modify text
color, and everything your creativity can give.
### JavaScript
Combining HTML and CSS with JavaScript creates an interactive web site, or web
app (like this one). You can for example, add a button that changes the theme to
dark/light, or store items in a shopping cart and show a number of items you
have.
For all this you need to store your files somewhere, letting people access a
computer to download all these files using their browsers, that's the
functionality of servers.
Servers are computers that are connected to the Internet, and store files that
can be downloaded or uploaded using protocols and security rules. Some companies
like Google or Microsoft have multiple centers with many servers in different
regions of the planet, called Data Centers, and can be used with a fee for
storing your web app, these multiple Data Centers are called Cloud.
### The Cloud
Administrating a powerful computer can be difficult, but if you know how to use
it, you can save a lot of money instead of maintaining local computers that need
to be turned on 24/7. Thanks to the cloud we can deliver the fastest apps, and
we can have a 24/7 service for our customers with a marginal cost.
## Computers Changed Humanity
Computers simplifies our daily tasks, software can be easy replicated and
distributed without need of logistics like a tangible product. You just need an
Internet connection to reach someone’s project.
You don’t need a factory or natural resources like wood to produce paper, you
need a group of engineers, UX/UI designers, digital marketers, and more IT
people to reach billions of customers.
The reason that computers are too powerful is that the marginal cost is minimal,
you don’t need to extract something from the earth to build an app, you need a
group of talented persons that uses their brains to create solutions.

64
src/content/blog/i-participated-in-a-hackathon.mdx Normal file
View File

@@ -0,0 +1,64 @@
---
title: I participated in a Hackathon
description: I recently participated in a Supabase Hackathon, forming a team with people from other countries.
tags: [Tech, Hobby, Hackaton]
image: /blog/i-participated-in-a-hackathon/banner.png
imageCaption: 'Tech stack used: Supabase, Next.js and Shadcn/UI, My first hackathon!'
date: 2023-8-16
author: Juan Manzanero
rss: true
---
![Tech Stack](@/assets/blog/i-participated-in-a-hackathon/banner.png) _Tech stack used:
Supabase, Next.js and Shadcn/UI, My first hackathon!_
I recently participated in a Supabase Hackathon, forming a team with people from other countries.
The Hackathon thematic was free, the only main rule is to use Supabase for any
feature, like authentication, as a PostgreSQL database or using vectors for AI,
with 10 days to build a product using any technology and upload it in a GitHub
repository.
We developed an e-commerce app with a Walmart products model, implementing
vectors for better search results.
Using Supabase we implemented auth and protected routes so the user needs to log
in to see recommendations and more.
The user can add products to the shopping cart and check their items for saved
it and see recommendations and which items are frequently bought.
My main role was focused on creating the UI using the Next.js 13 app router,
protecting routes only for authenticated users, and create reusable components
such as product cards, and of course, making the layout responsive for mobile
and desktop.
We used [Shadcn/UI](https://ui.shadcn.com/) as those components are already
implemented functionalities with accessibility like modals or sidebars, like the
sidebar that appears when you’re on a mobile device and open the button in the
header, with a smooth animation.
We submitted the project on time and waiting for the results, and this is my
first time participating in a Hackathon, I really enjoy it and hope to continue
contributing to the project on GitHub.
It's amazing work with people from other countries, using English even if is not
our native language, but with a purpose in common, create a great product.
I’ll keep looking to participate in more Hackathons in the future and contribute
to open source projects on Github because I really enjoy the feeling of
developing something big with more people.
I learned too much in these few days, like integrating Next.js with Supabase for
authentication and protected routes, using the Supabase docs as a guide, and
using it for the first time Shadcn/UI, and looking forward to keep using it.
It took me so long to participate in a Hackathon, as before I hesitated about my
experience, but the reality is we’ll never be ready for new challenges because
if you’re already ready it means that’s too late.
I want to learn more about using vectors for AI, so I’ll investigate more about
the topic, as the tech tends to go that way, who knows what would be the next
big tech trend or when.
[You can see the project: Grocewise here](https://groce-wise.vercel.app/)

29
src/content/blog/i-will-not-continue-creating-content-in-spanish-for-my-website.mdx Normal file
View File

@@ -0,0 +1,29 @@
---
title: I will not continue creating content in Spanish for my website
description: I had the idea of maintaining my website in both English and Spanish; however, that is giving me some trouble, like taking more time to create content.
tags: [Personal]
image: /blog/i-will-not-continue-creating-content-in-spanish-for-my-website/banner.jpg
imageCaption: Letters mixed
date: 2024-2-20
author: Juan Manzanero
rss: true
---
![Letters mixed](@/assets/blog/i-will-not-continue-creating-content-in-spanish-for-my-website/banner.jpg)
_Mixed letters. Photo by
[Jason Leung](https://unsplash.com/@ninjason?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash)
on
[Unsplash](https://unsplash.com/photos/red-alphabet-decors-0sBTrm726C8?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash)_
I had the idea of maintaining my website in both English and Spanish; however, that is giving me some trouble, like taking more time to create content.
That's why I have decided to only create content in English for now and in the
future.
It doesn't mean that I reject my mother tongue or something like that, but just
practicality.
I'll try to update the links to my posts shared on social media, as this website
will be just juancman.dev/blog instead of juancman.dev/[locale]/blog.
However, if you want to contact me in Spanish, feel free to do it.

65
src/content/blog/peddler-app.mdx Normal file
View File

@@ -0,0 +1,65 @@
---
title: Peddler App
description: You hear the ice cream man in his truck, you try to catch him, but the guy is already far away.
tags: [Tech, SideProject]
image: '/blog/peddler-app/banner.png'
imageCaption: Peddler App provisional logo
date: 2023-12-11
author: Juan Manzanero
rss: true
---
![Peddler App provisional logo](@/assets/blog/peddler-app/banner.png) _Peddler App
provisional logo_
## The idea
You hear the ice cream man in his truck, you try to catch him, but the guy is already far away.
Why not get a notification on your phone when the ice cream man is near you? So
you can just tap the notification and request the ice cream man to go to your
location.
That's the purpose of this app.
## Overwhelming for me
I'd never developed a big app just by myself, but I want to try and see what
happens.
I want to follow the Indie Hacker way, sharing in public the progress, and
getting feedback from the community.
This post is the first step before designing in Figma or even creating the
landing page, so I want to hear if you're interested, why you're not, or what
would be great for the app.
## Starting small
I really want to start small, launching a Minimum Viable Product (MVP), with the
next features:
- User registration and login
- Two types of users, peddlers and customers
- Peddlers
- If the user is a peddler (wants to sell), redirect to the peddler form
- Peddlers can create a profile with the name of their company and products
that offer, for example ice cream, candy, etc
- Once the registration is finished, peddlers can start routes
- The app gets the location of the peddler, showing it on a map
- The backend will detect if the peddler enters a radius of a customer, and
send a push notification to the customer
- Once the peddler has a request, the app will show the location of the
requesting customer on the map
- The peddler can go to the destination, and fulfill the transaction
- Customers
- Customers can just create a profile with their name or alias, and set
locations, for example: house
- Once a peddler is near, the backend will send a notification to the customer
- If the customer taps and confirms the notification
Of course, customers would change notifications settings and more, but that's
the core idea.
For the MVP I don't want to implement in-app payments, but of course, it could
be a future feature.

109
src/content/blog/rewind-2023-and-future-plans.mdx Normal file
View File

@@ -0,0 +1,109 @@
---
title: Rewind 2023 and future plans
description: My rewind for 2023 and my plans for 2024 and beyond.
tags: [Thoughts]
image: /blog/rewind-2023-and-future-plans/banner.jpg
imageCaption: A sunset with a sign, photo by Javier Allegue Barros on Unsplash
date: 2023-12-16
author: Juan Manzanero
rss: true
---
![A sunset with a sign](@/assets/blog/rewind-2023-and-future-plans/banner.jpg) _Photo by
[Javier Allegue Barros](https://unsplash.com/@soymeraki?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash)
on
[Unsplash](https://unsplash.com/photos/silhouette-of-road-signage-during-golden-hour-C7B-ExXpOIE?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash)_
My rewind for 2023 and my plans for 2024 and beyond.
I hope you are having a good time this holiday.
Life is a succession of choices, and in retrospect, I'm happy that this year I
made the right ones.
## In retrospect about my career this 2023
I grew up drastically as a Full Stack Developer, learning new libraries and
establishing my tech stack.
I even started hacking (not the thing you hear in the news), creating side
projects looking to create solutions.
I updated this website, creating new functionalities for content creation.
Now I have more confidence in my skills, ready to keep growing up and taking on
new challenges.
## Futures plans for my career this 2024
I want to start freelancing, I'll be creating templates and demo projects for
selling my services as a Frontend Developer mainly, but I'll keep learning about
backend and cloud, as well as keep practicing my English to enter the USA or
European markets.
Maybe I'll not achieve this in 2024, but I must keep growing, as each year
passes, I'll be more prepared.
I'll check if I could contribute to an Open Source project, as almost every tool
that I use is an Open Source one, I couldn't be here without if not with the
help of Open Source projects.
Honestly, my true wish is to work full time in a Software as a Service startup,
or any startup with a focus on Software.
The good thing that is I keep growing professionally, and I expect (and will)
the next year I'll reach more milestones.
And of course, I'll continue hacking (in a creative way, not stealing info or
criminal things) with side projects, creating an extra incoming source will be
great for my finances.
## Retrospect of 2023 personally and more
This year I rediscovered the hobby of reading, and I really enjoy it.
I discovered my new favorite book, **Ready Player One**, it was a really
exciting and great lecture, the next year I'll read the sequel.
I also started reading **Ikigai**, to keep acquiring good habits for a long and
happy life, and seek a purpose in life.
Another book I started reading is **The Little Book of Common Sense Investing**,
as I already had a good habit of saving, but I want my money to keep growing
more for a dignified retirement.
I'm spending less time on social media,
[even I wrote an article about this](https://www.juancman.dev/en/blog/the-monotony-of-social-media),
doing things that **I really want to do** instead.
Is really horrible how much time social media steals from us, keeping us away
from doing things that we really enjoy.
I'm doing moderate exercise, but indoors, I want to go outdoors too, I need more
solar light.
I'm happy spending my time with my family, even if the majority of the time I'm
working or studying, I keep contact with my loved ones, and continue doing it,
clearly.
## Future plans for 2024 personally and more
I'll keep reading, I'll write more on this website.
I want to acquire new habits, like pixel art.
And I'm retaking an old hobby, **GameDev**.
As Unity is doing questionable things, I'll be using
[Godot](https://godotengine.org/) instead.
I don't have in mind a big project or something like that, just retake to
develop simple videogames demos, it would be great to launch a little videogame,
but a complete one.
Trust me, is really, **REALLY** challenging to develop videogames, so instead of
overwhelming myself, I'll keep my **ambitions simple**, but **constant**.
### Happy holidays!
![2023 complete image!](/blog/rewind-2023-and-future-plans/2023-complete!.png)

92
src/content/blog/the-monotony-of-social-media.mdx Normal file
View File

@@ -0,0 +1,92 @@
---
title: The Monotony of Social Media
description: Abstracting human interaction using software has caused many problems that didn’t exist before.
tags: [Thoughts]
image: /blog/the-monotony-of-social-media/banner.jpg
imageCaption: Person checking social media. Photo by Austin Distel on Unsplash
date: 2023-7-17
author: Juan Manzanero
rss: true
---
![Person checking social media](@/assets/blog/the-monotony-of-social-media/banner.jpg)
_Person checking social media. Photo by
[Austin Distel](https://unsplash.com/@austindistel?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash)
on
[Unsplash](https://unsplash.com/photos/person-using-both-laptop-and-smartphone-tLZhFRLj6nY?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash)_
Abstracting human interaction using software has caused many problems that didn’t exist before.
It’s obvious, a lot of interactions on the Internet occurs through social media,
letting you send friend requests, chat, or share memes and photos. However,
abstracting human interaction using software has caused many problems that
didn’t exist before.
When the Internet started, many people created their own websites because that's
was the thing you must have if you want to be cool, and a lot of these websites
was just blogpost-like where the users shares their hobbies like movies, sports,
books, videogames, etc. This motivation made more unique and human websites,
where you can meet someone and their likes or dislikes.
Now, with the boom of social media in the middle of 2000's, people prefer to
connect just searching for a name or looking the friends of their friends, and
send friend requests to try and connect. That was cool at the start, as anything
new, but the problems started when companies like Facebook (now Meta) or Google
(with YouTube) needed to monetize their platforms, mostly with Ads.
And of course, that means that they needed to suppress, censor or ban anything
that could be harmful for society, like hate speeches or stupid challenges that
could risk people's lives.
But, the bat thing about this, is that they homogenize almost everyone, forcing
them to act as the algorithms keeps recommending users with likes and comments,
guiding the people to act like someone else, and so.
Now almost everyone does mainly two things, post photos about their "perfect"
lives or share memes, and don't get me wrong, it's ok to enter to social media
and try to disconnect for your job or problems, but using this every day as
instant escape instead of confronting your own problems could be harmful in the
long term, isolating you from the need of socialize in real life, with real
people, and thinking that everyone has a perfect life.
No, EVERYONE has problems in their lives, even more than yours, but social media
algorithms promotes mainly "positive vibes only" and all that shit that in big
dose is hamrful for our minds.
And don't mention the censorship and shadow-banning if you post something
controversial, it could be something that should not be tolerated like incite
hate to a group, or it could be something that don't everyone agrees but it
could be useful think a little about it, but still being controversial.
Should everyone can tell what they thinks? Yeah, always if doesn't promotes hate
or hurt other people or animals.
They're reports like Twitter promotes hate in the algorithm, and Meta knows that
Instagram increases anxiety and depression on young people, and actually;
promotes it... as all negative feelings keeps you on the social media
interacting with others, as that's what those companies sell, your data and time
to advertisers.
I recently heard a video talking about this topic, and that would be cool if we
go back as the starts of the Internet where people created content as a hobby,
instead of looking for validation through likes and comments, being more
authentic persons instead of products.
Should software solutions replace human interactions? I think not, but it's too
late for almost everyone, but if you're reading this, start changing your life
first if you want to be honest with yourself.
Blog inspired by "Why does every personal website look like this now?" by Eric
Murphy on YouTube.
Source Video:
<iframe
width='100%'
height='320'
className='rounded-md'
src='https://www.youtube-nocookie.com/embed/_x6SCSz7g5I'
title='YouTube video player'
allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
allowFullScreen
></iframe>

115
src/content/blog/website-2.0.mdx Normal file
View File

@@ -0,0 +1,115 @@
---
title: The reason to create a version 2.0 of my website
description: I commited some errors when creating the first version of my website, here I will share what I have learned.
tags: [Tech]
image: /blog/website-2.0/banner.png
imageCaption: Tech Stack of this website. Next.js, Vercel, React.js, TypeScript and TailwindCSS
date: 2023-4-7
author: Juan Manzanero
rss: true
---
![Tech stack](@/assets/blog/website-2.0/banner.png) _Tech Stack of this website.
Next.js, Vercel, React.js, TypeScript and TailwindCSS_
I commited some errors when creating the first version of my website, here I will share what I have learned.
The first version of my website was one of my biggest projects so fat, but
**now** as I’ve **more** **experience** as a **Frontend** Engineer, I realize I
**didn’t** do **enough** **research** into **creating** a **web** site with a
**blog**.
## Client Side Rendering (CSR) vs Server Side Rendering (SSR) vs Static Generation (SG)
When developing a **web** **application**, you should **think** **about** the
type of **rendering** to use, while **considering** the **requirements** of the
**problems** you want to **solve**.
### Client Side Rendering (CSR)
For example, a web **application** like a **SaaS** to create tasks and manage
people will have **dynamic** **pages** to show the tasks, update the cards when
is edited or deleted, show notifications, etc. In this situation, a **CSR**
would be **better**, to **render** the page **each** time the user **request**
access will **keep** the data **updated**. However, a **CSR** needs to
**hydrate** the page when is **requested**, this causes a **slow** **first**
**load**, and uses **more** **resources** of the user’s PC.
### Server Side Rendering (SSR)
This could be solved using **SSR**, this consist in **generate** the page in the
**Server** where the web app is hosted **using** all the **power** that a
**server** can provide. The problem is that a **server** is **required**, Google
Cloud provides with serverless options like App Engine or Cloud Run, but you’ll
need to learn about this services and how to deploy the project, so the
**technical** **knowledge** is **high**.
The **disadvantage** of **CSG** and **SSR** is that because **each** **page**
**must** be **rendered** on each **request**, **web** **crawlers** and
**search** **engines** such as Google's will take **longer** to **obtain**
**information** about your page, resulting in a **low** **SEO** priority.
### Static Generation (SG)
Well, if a **page** **doesn’t** require **fetch** **data** for **each**
**request**, then you could use **SG**, this means that the **page** is
**generated** when you **build** the **production** directory **before** you
**deploy** it. The page will be generated into a HTML/CSS/JS one time, and if
you need to **update** the **data** in that page you’ll need to do the
**changes** and **deploy** the project. Yes, you’ll need to be more cautious
when reviewing the changes before deploying, but as the page is already
generated, **web** **crawlers** and the Google’s **search** **engine** will get
the **info** in your page **faster**, **improving** your **SEO**.
## The cool thing about Next.js
In the **past** you will require to **think** if go **full** CSR, SSR or SG,
linking your web to their respecting sections, like the app, blog, etc.
**[Next.js](https://nextjs.org/)** is a **Node.js** **meta-framework** that uses
**[React.js](https://react.dev/)** to build the UI, and provides with CSR, SSR,
SG and more, so you can generate SG fetching async data, allowing you to don’t
**need** to **create** **every** **static** **page**.
Is that the **approach** **used** for **this** **web** site, **instead** of
**fetch** the data on **each** **request**, I only **fetch** data **when** I
**create** the **build** of the project.
**Each** **article** is a SG page, but I use a **template** to keep every blog
similar, using **markdown** syntax for the content of the blog, and with an
**extension** of **TailwindCSS** I keep the styles consistent.
So, **Next.js** allows you to **choose** the **rendering** method for **each**
**page** in your web, this feature permits to create amazing websites in the
same project, keeping consistence and with fast load times, Next.js even lazy
loads each page and start loading when you hover a link like Home, Contact, etc.
> I’ll explain in more detail the architecture of this project in the future!
## TailwindCSS vs MUI
I choose to use **[TailwindCSS](https://tailwindcss.com/)** to learn about this
CSS library, and I’m impressed the **faster** that makes the development of the
styles of a web project. **MUI** **provides** **functionalities**, but sometimes
**gives** **problems** with **hydration** like in my previous website, when you
**first** **load** the page it takes a **time** to **show** all the **styles**,
now it no longer occurs because TailwindCSS is pure CSS and the pages are
static.
## Deploying on Vercel
**[Vercel](https://vercel.com)** is the company behind Next.js, and they
provides with **hosting** services **optimized** for **Node.js** apps, and as
I’m learning about Cloud Development maybe I could try to host this web like my
previous web into a Cloud Service like Cloud Run, but this time I choose to use
**Vercel** to get the **analytics** that are very useful, and as the **hobby
plan** gives me free hosting for small projects.
To deploy I use the **[Vercel CLI](https://vercel.com/docs/cli)**, pretty simple
and straightforward.
## More content coming soon!
I’ll keep updating with posts, features and more content to share my experience,
and know I’m writing this paragraph, I think the next feature it would be a
newsletter to notify people when I create a new post. Time to work!

37
src/content/config.ts Normal file
View File

@@ -0,0 +1,37 @@
import { defineCollection, z } from "astro:content";
const contentSchema = z.object({
title: z.string(),
description: z.string(),
image: z.string(),
imageCaption: z.string(),
date: z.coerce.date(),
tags: z.array(z.string()),
author: z.string(),
rss: z.boolean(),
draft: z.boolean({}).optional(),
});
const blog = defineCollection({
type: "content",
schema: contentSchema,
});
const portfolio = defineCollection({
type: "content",
schema: contentSchema,
});
const pages = defineCollection({
type: "content",
schema: z.object({
title: z.string(),
description: z.string(),
}),
});
export const collections = {
blog,
portfolio,
pages,
};

22
src/content/pages/about.mdx Normal file
View File

@@ -0,0 +1,22 @@
---
title: About
description: This website was first created as a portfolio, but learning about how the personal website is the digital form of the house tree, I like the idea of going that way instead of a generic landing with my social media.
---
# About
This website was first created as a portfolio, but learning about how the
personal website is the digital form of the house tree, I like the idea of going
that way instead of a generic landing with my social media.
I'm trying to expand my skills, as I'm a Frontend Developer (with knowledge on
Backend), but skills like writing are important.
This website is in English to reach more people and put it into practice, but
Spanish is my mother tongue.
All content written here is without AI; I don't use it for generating ideas; the
only exception is [LanguageTool](https://languagetool.org/) for validating my
grammar.
[![Written by human, not by AI](@/assets/about/written-by-human-not-by-ai.svg)](https://notbyai.fyi/)

36
src/content/pages/contact.mdx Normal file
View File

@@ -0,0 +1,36 @@
---
title: Contact
description: You can contact me if you want me to work, or just say hello.
---
# Contact
You can contact me if:
- You want me to work
- Just say hello
Please consider that **I don't**:
- Work for free
- Work on your startup idea and just get equity in return (I can't pay my bills
with lottery tickets)
- Work for you and get "exposure" (I can't pay my bills with exposure)
- Communicate via phone number; all communication must be via email (we can use
Discord, Slack, etc. once you hire me).
## My email
Just change `[at]` for `@` and `[dot]` for `.`. This is for preventing web
crawlers from getting my email:
```
contact[at]juancman[dot]dev
```
## Social media
You can send me a direct message:
- [LinkedIn](https://www.linkedin.com/in/juancmandev)
- [GitHub](https://github.com/juancmandev)

62
src/content/pages/resources.mdx Normal file
View File

@@ -0,0 +1,62 @@
---
title: Resources
description: Here you can find websites, YouTube channels, courses and more stuff that I consume or find interesting.
---
# Resources
Here you can find websites, YouTube channels, courses and more stuff that I
consume or find interesting.
## Programming and Web Development
To **power-up** my career.
### Websites (courses, docs, etc.)
- [fireship.io](https://fireship.io) - My favorite premium courses about WebDev
- [MDN Web Docs](https://developer.mozilla.org/en-US) - Best docs for HTML, CSS
and JS
### Tech Stack
Technologies that I use for personal projects and sometimes for work.
- [Next.js](https://nextjs.org) - Dynamic and flexible React meta-framework,
used on this Website
- [Supabase](https://supabase.com) - Open Source Backend as a Service
alternative for Firebase, uses PostgreSQL and is really good if you're working
alone or you want a solid backend without investing to much
- [TailwindCSS](https://tailwindcss.com) - Best way to write CSS
- [shadcn/ui](https://ui.shadcn.com) - Best components for React, sinergy with
TailwindCSS
---
## Inspiration and Learning
For writing, thinking or growing my career.
### Personal Websites
- [Eric Murphy](https://ericmurphy.xyz) - The guy who inspired me to retake this
side project and create more content
- [Bikobatanari](https://www.bikobatanari.art) - Super original, fun and source
of inspiration
### Favorite Blogs
- [Why I Will Never Join Mastodon (or the rest of the Fediverse)](https://ericmurphy.xyz/blog/mastodon) -
Social media is bullshit
- [Create More, Consume Less](https://www.bikobatanari.art/posts/2020/create-more) -
Today people prefers talk about celebrities and other peoples lifes rather
than our own milestones
- [My Website is a Personal Museum](https://www.bikobatanari.art/posts/2020/personal-museum) -
The digital form of the three house

1219
src/content/portfolio/build-a-fullstack-app.mdx Normal file
View File

File diff suppressed because it is too large Load Diff

76
src/content/portfolio/human-to-js.mdx Normal file
View File

@@ -0,0 +1,76 @@
---
title: Human to JS
description: Translate human language to JavaScript code!
tags: [ChatGPT, Next.js, JavaScript, Vercel]
image: /portfolio/human-to-js/banner.png
imageCaption: Human to JS Banner
date: 2023-4-14
author: Juan Manzanero
rss: true
---
![Human to JS banner](@/assets/portfolio/human-to-js/banner.png) _Human to JS diagram_
_This project has been achieved._
## Background
I’m always looking to grow my career by learning new technologies as well known
Software Engineer; however, that could be dangerous because Software Engineer is
not about using the ultimate tech stack but making things happen.
## Inspiration source
I was checking Twitter until I found a tweet where a person created a side
project over a weekend. That project is
[SQL Translator](https://www.sqltranslate.app/), a simple UI to put text input
describing a query; then you get the query into SQL, simple!
[@whoiskatrin](https://twitter.com/whoiskatrin?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1634973237829599233%7Ctwgr%5Eb49b9d28e6ea7383ef16ea3c8c6040656ff0c944%7Ctwcon%5Es1_&ref_url=https%3A%2F%2Fpublish.twitter.com%2F%3Fquery%3Dhttps3A2F2Ftwitter.com2Fwhoiskatrin2Fstatus2F1634973237829599233widget%3DTweet)
used ChatGPT API to send a prompt typed by the user, and then show SQL response
into a component to copy to the clipboard. That was enough to get the deserved
attention of the community.
[Tweet link](https://twitter.com/whoiskatrin/status/1634973237829599233)
## My idea
> _“Why not a web app to type a prompt to generate JavaScript code?”_
So I started to build my idea using this tech stack:
- **Next.js**: Web framework to build the UI and Next.js provides you with an
API directory to communicate with ChatGPT API
- **MUI**: To use the UI components and as a design system
- **Formik & Yup**: To manage the state of the prompt form and create validation
schemas
Using all these technologies I build a simple UI with a MUI Card component, then
I created a form where I manage all the inputs with Formik, the text and select
inputs are directly from MUI, and to create the validation schema I used Yup to
mark as required those fields and don’t send them empty.
With the UI finished, I started creating the endpoint in the API directory to
consume ChatGPT’s API, just using a fetch
like [@whoiskatrin](https://twitter.com/whoiskatrin?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1634973237829599233%7Ctwgr%5Eb49b9d28e6ea7383ef16ea3c8c6040656ff0c944%7Ctwcon%5Es1_&ref_url=https%3A%2F%2Fpublish.twitter.com%2F%3Fquery%3Dhttps3A2F2Ftwitter.com2Fwhoiskatrin2Fstatus2F1634973237829599233widget%3DTweet)’s
project, indicating which OpenAI model to use, in this case, *text-davinci-003*,
you can learn more about those
models [here](https://platform.openai.com/docs/api-reference/models/list).
Obviously, in that request, I send the prompt from the user into a string
indicating ChatGPT to only give me the code, without comments or more results.
## Added value
Yes, there’re options like GitHub Copilot that resolve that problem, that’s why
I added a select option to choose if the syntax should be an arrow function or a
simple function.
I’ll add more features, like a TypeScript option, and use a TS Interface to use
as a reference, but now I’m working on more projects!
## Inspiring people!
The cool thing about side projects is that inspires people like us, we can use
our tech skill that serves the bread on the table to transform ideas into
products, and products into a community, as
[@Serudda](https://twitter.com/serudda) talks in this
[video](https://www.youtube.com/watch?v=LXgPNdw8avI&t) (video audio in Spanish).

148
src/content/portfolio/next-intl-blog-template.mdx Normal file
View File

@@ -0,0 +1,148 @@
---
title: Next Intl Blog Template
description: Start your blog in multiple languages!
tags: [Next.js, next-intl, tailwindcss]
image: /portfolio/next-intl-blog-template/banner.png
imageCaption: Next Intl Blog Template banner
date: 2023-12-18
author: Juan Manzanero
rss: true
---
![Next Intl Blog Template banner](@/assets/portfolio/next-intl-blog-template/banner.png)
_Next Intl Blog Template banner_
[GitHub](https://github.com/juancmandev/next-intl-blog-template)
[Website](https://next-intl-blog-template.vercel.app/en)
## Overview
Recently I update this website, and as you may know, is an **English and Spanish
content website**.
I'm not using a translation plugin, instead I write every work in both English
and Spanish.
Thanks to Next.js and [next-intl](https://next-intl-docs.vercel.app/) I can
achieve this, rendering routes for each language in the website, accessing a
dictionary that contains the content translated by me.
For the .mdx files, I created a directory for each language, and inside of those
directories it contains the content in both languages too.
## How to use
This template is an extension of
[next-intl](https://next-intl-docs.vercel.app/), chek the
[getting started](https://next-intl-docs.vercel.app/docs/getting-started) to
learn the basics, the purpouse of the template is to create a simple layout for
future customization.
### Add or remove locales
You can add or remove locales in the `src/lang/locales.ts` file.
```ts title="src/lang/locales.ts"
export type locales = 'en' | 'es';
export const localesList: locales[] = ['en', 'es'];
```
Just add or remove a locale from the `locales` const, and add or remove it from
the list.
The first item in the `localesList` must be the default locale.
The list is used for static generation of the routes in
`src/app/[locale]/layout.tsx`.
```ts title="src/app/[locale]/layout.tsx"
import { localesList } from '@/lang/locales';
export function generateStaticParams() {
return localesList.map((locale) => ({ locale }));
}
```
Remember to update the matcher in `src/middleware.ts`.
```ts title="src/middleware.ts"
//...
export const config = {
matcher: ['/', '/(en|es)/:path*'],
};
```
And of course, update your `src/lang/[locale].json` files.
### Content creation
Use `src/content/[locale]` for create content, in the `/[locale]/` directory
ceate the directory for each purpouse, for example: `/[locale]/blog`.
Inside create the .mdx file with an unique name, the name will be used as the
slug for create the static page for that post.
For create a blog section, you'll use the _getAllContent_ function in your
route, for example: `src/app/[locale]/blog/[slug]/page.tsx`.
```tsx title="src/app/[locale]/blog/[slug]/page.tsx"
import { Mdx } from '@/components';
import { TParamsLocale, TPage, TSlugLang } from '@/types';
import { Metadata } from 'next';
import { getAllContent, getContent } from '@/utils/getContent';
export async function generateStaticParams(
props: TParamsLocale,
): Promise<TSlugLang[]> {
const blogs = await getAllContent(props.params.locale, 'blog');
if (!blogs) return [];
return blogs.map((blog) => ({
slug: blog.slug,
locale: props.params.locale,
}));
}
//...
```
This will create each static page for each blog post.
You can get the metadata of the .mdx file too.
```tsx title="src/app/[locale]/blog/[slug]/page.tsx"
//...
export async function generateMetadata(props: TPage): Promise<Metadata> {
const blog = await getContent(props.params.locale, 'blog', props.params.slug);
if (!blog) return {};
return {
title: blog.title,
//...
};
}
//...
```
Then, render the content using the _Mdx_ component.
```tsx title="src/app/[locale]/blog/[slug]/page.tsx"
//...
export default async function Page(props: TPage) {
const post = await getContent(props.params.locale, 'blog', props.params.slug);
if (!post) return null;
return <Mdx code={post.body.code} />;
}
```
[You can fork this template here](https://github.com/juancmandev/next-intl-blog-template)

74
src/content/portfolio/workarise.mdx Normal file
View File

@@ -0,0 +1,74 @@
---
title: Workarise
description: Workarise Web App, manage tasks with your team.
tags: [React.js, Vite.js, MUI, Firebase, GCP, Node.js]
image: /portfolio/workarise/banner.png
imageCaption: Workarise Banner
date: 2023-4-13
author: Juan Manzanero
rss: true
---
![Workarise Banner](@/assets/portfolio/workarise/banner.png) _Workarise Banner_
[Website](https://workarise.com)
## Overview
[Workarise](http://workarise.com) is a Team Manager Software as a Service to
create task cards assigning people, set a start and due date, add attachments
files, etc.
You can use the Calendar to see the tasks' due dates and schedule Google Meet
events authorizing the use of your Google Calendar. You can edit and delete
events which sync with your Google Calendar and guests' Google Calendars. The
Gantt provides you with a timeline to check task duration.
The web app is developed with [React.js](https://react.dev/),
using [Vite.js](https://vitejs.dev/) to run the development environment. For
functionality like modals, and popovers we use [MUI](https://mui.com/). To
manage the state of components we’re using useContext.
To create Google Meet events and sync the calendar we'd develop a small Node.js
API to use Google OAuth 2 API, as we need to prompt our users to give access to
their Google Calendars.
Currently, Workarise is in the first version,
using [Firebase](https://firebase.google.com/) to authenticate users and store
raw data and files. Firebase
uses [Firestore](https://firebase.google.com/docs/firestore), a NoSQL DB,
however we’re developing an API using [Django](https://www.djangoproject.com/)
running on [Cloud Run](https://cloud.google.com/run) connected
to [Cloud SQL](https://cloud.google.com/sql) to a MySQL instance, as we’ll be
using a SQL DB in the future. Currently the web app and landing are deployed on
Firebase Hosting, but we’ll move the landing page to Vercel, and it’ll be
updated to use Next.js in the future to optimize SEO and publish blog posts.
## My impact in Workarise
Currently, we’re developing an MVP, and everyone is working part-time on this
project. I joined in December, but before there wasn’t a product that users can
use, so as I was the only Frontend Engineer at that moment I taked full
responsibility for delivering something that can be considered an MVP.
It took me like 3 months to achieve that, I updated some dependencies of the
project to improve the development flow, and I suggested using Firebase as
Backend and Hosting.
Thanks to all this we got our first users and feedback, so we’re working on that
feedback to keep improving our app, our users like the design and simplicity!
At the moment there’re 3 engineers in the team, 2 on the front (including me)
and 1 on the back, but I’m helping to our Backend Engineer to deploy on GCP to
production the API and DB, and I'm guiding the new Frontend to deliver new
features, he’d developed the responsive design and some features to complement
the task cards.
I’m happy to test my skills in this project, it’s not easy to take more
responsibility with less than 2 years of labor experience, and it’d help me to
grow a lot in these months.
Even if the market doesn’t consider my years of experience as a senior, I think
that doesn’t matter at all, the only thing that matters is that you can
understand why you’re using code, to create solutions and reach people across
their computers.

29
src/content/videos/nadie-entiende-la-privacidad.mdx Normal file
View File

@@ -0,0 +1,29 @@
---
title: Nadie Entiende la Privacidad
description:
Hablar de privacidad es complicado, ya que no todo el mundo la entiende de
verdad.
tags:
- Tech
- Freedom
- Libre
image: https://img.youtube.com/vi/Wlw6rscU4gI/maxresdefault.jpg
imageCaption: Video thumbnail.
date: 6/3/2024
author: Juan Manzanero
rss: true
---
<iframe
width='100%'
height='320'
className='rounded-md'
src='https://www.youtube-nocookie.com/embed/_x6SCSz7g5I'
title='YouTube video player'
allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
allowFullScreen
></iframe>
Cuando respecto a la privacidad, por lo general la respuesta de la gente es "como si tuviese algo que ocultar" o "es imposible ocultar todo lo que hacemos", y es justo a esas frases cuando digo que nadie entiende la privacidad.
La privacidad es una necesidad humana, un derecho, está en nuestra naturaleza. Prueba de ello, cuando vas a un baño público, generalmente cierras la puerta, o intentas usar un espacio donde no haya gente cerca. Y es que todos sabemos qué se hace cuando se va al baño, pero todos queremos tener un momento de privacidad para hacer nuestras necesidades, ya que es algo que no queremos compartir con extraños.