JavaScript (JS) is one of the most popular programming languages in the world, known for its versatility and ability to work across multiple platforms and applications. As a language, JS is often used to create dynamic web applications, but it can also be used in a variety of other fields and stacks. In this article, we will explore some of the different fields and stacks where JavaScript can be involved.

Web Development
One of the most common fields where JS is used is in web development. JS is used to add interactivity and functionality to web pages, such as validating form data, creating animations, and responding to user events. It is also used to create Single Page Applications (SPAs) and to develop server-side applications using Node.js.
Some of the popular web development stacks that use JS include:

MEAN stack (MongoDB, Express, AngularJS, Node.js): Used for building dynamic web applications.
MERN stack (MongoDB, Express, React, Node.js): Used for building scalable and efficient web applications.
LAMP stack (Linux, Apache, MySQL, PHP): Used for building dynamic web applications that run on a Linux server.
Mobile App Development
JS is also used in mobile app development. There are several frameworks such as React Native, NativeScript, and Ionic that allow developers to build mobile apps using JS. These frameworks provide a way to create cross-platform mobile apps that run on both iOS and Android devices, without having to write separate code for each platform.

Desktop Application Development
JS can also be used in desktop application development. Electron is a popular framework that allows developers to build cross-platform desktop apps using JS, HTML, and CSS. It is used by companies like Slack, Atom, and Visual Studio Code to create desktop apps that run on Windows, macOS, and Linux.

Game Development
JS is also used in game development. There are several game engines such as Phaser and Three.js that allow developers to create 2D and 3D games using JS. These game engines provide a way to create games that run in a web browser or on a mobile device.

Internet of Things (IoT)
JS is also used in the Internet of Things (IoT) space. IoT devices such as smart home appliances, wearables, and sensors often use JS to communicate with the internet and to perform tasks such as data processing and analysis. Platforms such as Johnny-Five and Node-RED provide a way to use JS to interact with IoT devices and to create custom IoT applications.

In conclusion, JavaScript is a versatile language that can be used in a variety of fields and stacks. From web development to game development and even IoT, there are many different ways to use JS to create innovative and dynamic applications. As technology continues to evolve, we can expect to see JS being used in even more fields and applications in the future.

Welcome to Jacopo Vichi's homepage, fullstack developer passionate about open source and Linux operating systems. In this article, I explain how I realized my homepage using API offered by Directus, NextJS and deployed using the Vercel's hosting.

The multiple pathways offered by JavaScript

In recent times, I have dedicated myself to studying and researching new solutions and architectures to build a website, coming across applications defined as No-Code APP and Headless CMS.

After some tests and insights, I decided to start building my homepage, which had as a target:
- Storing the various contents on a database installed only in my locale development environment
- Fast release of updated and updatable content
- Static generated site
- Using React to build frontend
- Serverless environment
- Deployment on free hosting, since I don't need to manage large flows of visitors
- SEO friendly

First of all, I needed to organize contents in a database (one of choice between PostgreSQL, MariaDB or SQLite), looking for something that could satisfy these requirements:
- The database schema and data must be updatable via a UI (I don't want to write trivial queries nowadays)
- CRUD exposed via REST Webservices (or GraphQL)

After some searches, the choice was between 2 HeadlessCMS:
- [Directus](https://directus.io/)
- [STRAPI](https://strapi.io/)

They are both opensource, offer a UI to model database schema and data and expose CRUD via REST API. After testing each of them I decided to use Directus (Admin UI was greater, less buggy - at least at the moment I performed the tests and more maintainable under Docker).

Adopting [Directus](https://directus.io/) allowed me to dedicate myself exclusively to frontend, the CMS is formidable and allows me to manage an entire database from scratch and organize it as needed, configuring relations between tables and offering a powerful ADMIN interface with typed editing fields. It also provides translation management thanks to which I was able to organize international content in a very comfortable way. 
With such an organized database, capable of offering also support for storing resources (such as images and videos), I studied the APIs exposed via REST Webservice, finding this method of implementation really advantageous.
So, the backend stack needed to complete the task was completed.

> At this point, I had to focus on frontend by looking for a product that would allow me to generate static pages starting from the contents available only in my development environment extracted via HTTP calls offered by Directus itself

Given my skills in ReactJS and the extreme comfort and simplicity of use, I was looking for something that would allow me to organize my pages using web components to "aggregate" the various building blocks of which a homepage is made up.
Having followed some courses by Michele Riva, in Florence, I decided to try [NextJS](https://nextjs.org/). This framework can offer various rendering techniques that satisfied my needs, in particular, I needed its engine for the SSG (Static Site Generation) so that the final product could be simple SEO-friendly HTML pages.

> NextJS offers 4 types of rendering: CSR (Client Side Rendering), SSR (Server Side Rendering), SSG (Static Site Generation) and ISR (Incremental Site Re-generation)

I began composing frontend building the various pieces of the puzzle (WebComponents) using the handy development server included in NextJS. Doing this, I have organized the full implementation, following the standards offered by NextJS and configuring internationalization as explained in its documentation pages.

> The webpage development was finally completed and the compiled version is composed only of HTML pages and public resources

In the end, I have to manage the deployment of the built version, excluding the NextJS development server, statically serving the HTML pages thus composed, and performing a re-deploy to update any modified content.

> My requirement was to use a free hosting service capable of serving these static resources.

After a couple of searches, I have to make a choice between:
- [Vercel](https://vercel.com/), the owner and maintainer of NextJS Framework
- [Netlify](https://www.netlify.com/), after seeing a couple of developers' sites hosted on it, but without any personal experience
- [Render](https://render.com/), known because I used to host other software using its free plan hosting (after that Heroku close its free plans)

I take the way of [Vercel](https://vercel.com/), because it was offering the hosting functionality for SSG, SSR or CSR pages, allowing me to generate the prebuild on my home system by publishing only the final product. I chose it also because it is the NextJS Framework maintainer so I was hoping for a seamless integration. That appeared correct and in a few minutes, I publish the homepage DEV version online.

> Vercel offers DEV and PROD development, permitting developers to test their development without breaking the Production version

**Yippee!** [My homepage](https://jacopovichi-dev.vercel.app/) was completed, updatable, and reachable on the Web without any hosting fees. 
All the tasks were fulfilled without writing tons of lines of code!!



In this article I describe which stack I use to compose my personal hompage and the challenges I overcome during developing

How I built my homepage

Articles

Welcome to the Jacopo Vichi's homepage. Jacopo Vichi is a fullstack developer passionate about open source and Linux operating systems. In this website you can know me, my works and read some articles in my personal blog.