DEV Community: Henrique Ramos

Building Veloren SA: An Astro blog fed by a Google Cloud Translation Pipeline

Henrique Ramos — Sat, 30 Aug 2025 15:43:50 +0000

As the owner of a long-standing Veloren community server in South America, I had a cool idea: create a front page to keep non-English-speaking players updated on the latest devlogs. The community was missing out on the latest news from the official Veloren team since devlogs are only in English. My goal here was to get them translated to Spanish and Portuguese. Devlogs, however, are huge! If I only I could automate this...

Turns out, I could!

Solution

The pipeline is an event-based system using Google Cloud services. It works in three steps:

Ingestion: A Cloud function runs weekly via Google Cloud Scheduler. It checks the RSS feed for new devlogs, saving its HTML content into a Cloud Storage bucket. To avoid reprocessing old posts, the service first downloads a file containing a list of previously processed URLs. It then filters out any posts that have been seen before, ensuring only new content enters the pipeline.
Translation: A second Cloud Function is automatically triggered whenever a new file is saved to the ingestion bucket. It starts a batch Cloud Translation job to convert the HTML files into Spanish and Portuguese, then saves the translated files into a second Cloud Storage bucket. To prevent concurrency errors that can occur when multiple files are uploaded at once, the function uses a unique timestamp for each job's output directory, ensuring all files are translated successfully.
Publishing: A third Cloud Function watches the translation output bucket. When new translated files appear, it downloads them, and extracts the post's metadata from the HTML, including the title, publication date, and URL. It then combines the metadata and the raw HTML content into a single JSON file, which is saved to a third bucket. This JSON structure is perfectly suited for a content collection in Astro. The last thing it does is trigger Netlify's build hook, getting the new posts live on the website.

Tools

Nx Monorepo with pnpm workspaces: This setup made managing functions so much easier. It put all code in one place, simplified testing, and gave a clean way to handle deployment with GitHub Actions. Adopting a monorepo meant that services could share dependencies and tooling, which reduced boilerplate.
Google Cloud Functions: Using Cloud functions gave a simple, event-based system. It integrates seamlessly with Cloud Storage, which was key to the pipeline. This architecture also ensures that we only pay for the resources used when a function is triggered, making it extremely cost-effective.
Google Cloud Translation API (Batch Mode): This was a perfect fit for this kind of work. It’s designed to translate large volumes of documents offline, which is far more efficient than processing files one at a time. The API's ability to handle HTML directly means we didn't have to write any complex parsing logic to preserve the original formatting, images, or links within the devlogs.
Netlify Build Hooks: This simple feature was the final piece of the puzzle. It gives a straightforward way to trigger a website rebuild from GCS, completing the automated loop.
Astro: The final content is converted to JSON files so Astro can consume them as a content collection. This is a powerful feature of Astro that simplifies building a static content-heavy website.

Astro Integration

One of the coolest parts of this project was using Astro's Content Collections to pull in the remote JSON data. Instead of manually downloading and managing files, I configured Astro to do it all during the build process.

The src/content.config.ts file tells Astro where to find the content and what to do with it.

import { defineCollection, z } from "astro:content";
import { type FileMetadata } from "@google-cloud/storage";
import he from "he";

const blog = defineCollection({
  loader: async () => {
    const response = await fetch(import.meta.env.VELOREN_ARTICLES_URL);

    const data = await response.json();

    return Promise.all(
      (data.items ?? []).map(async ({ mediaLink, name }: FileMetadata) => {
        const item = await (await fetch(mediaLink as string)).json();

        return {
          id: name,
          ...item,
          cover: item.cover,
          summary: item.content.replace(/<[^>]*>/g, "").slice(0, 250),
          content: he.encode(item.content, { allowUnsafeSymbols: true }),
          language: name?.split("/")[0].toLowerCase(),
        };
      }),
    );
  },
  schema: z.object({
    slug: z.string(),
    title: z.string(),
    content: z.string(),
    date: z.string().transform((date) => new Date(date)),
    source_url: z.string().optional(),
    cover: z.string().url().optional(),
    summary: z.string().optional(),
    language: z.enum(["es", "pt-br"]),
  }),
});

export const collections = { blog };

In this code:

The loader function uses fetch and await to get a list of all the JSON files from my Cloud Storage bucket.
It then iterates over the list, fetching the content of each JSON file.
A z.object from the Zod library acts as a schema to validate the incoming data, ensuring every post has a title, date, content, and the correct language.
The cleaned-up and validated data is then returned as a collection of blog posts. Astro automatically handles the rest, creating static pages for each post during the build process.

This approach gives me the best of both worlds: a dynamic, automated content pipeline and a fast, static-first website.

Result

The final result can be found here.

The complete source code for my project is available on GitHub. You can explore the project structure, the TypeScript code for each function, and the GitHub Actions workflow that automates the deployment.

hnrq / veloren-translate

GCP infrastructure to translate TWIV posts to pt-BR and ES

hnrq / veloren-website

Veloren South America website

Veloren South America

This is the Front-end for my veloren-translate project. It uses Astro for building pages and is available here.

View on GitHub

Also, feel free to join the server at anytime at play.veloren.net.br.

Creating a Slide repository with Astro and Reveal.js

Henrique Ramos — Thu, 27 Feb 2025 13:00:00 +0000

Reveal.js is a powerful tool for creating beautiful slide presentations using web technologies. However, managing individual repositories for each presentation becomes increasingly difficult as the collection expands.

Enter Astro - the modern framework for content-driven websites. Astro delivers zero-JS-by-default, Islands Architecture for partial hydration, file-based routing, TS and multi-framework (React, Vue, Svelte, etc.) support. These features make it a perfect tool for what we'll be building.

Goal

We'll create an Astro website that:

Centralizes all Reveal.js presentations in one place
Provides a main page listing all available slides
Supports multiple UI frameworks for interactive demos

Let's Get Started!

1. Create an Astro Project

First, let's scaffold a new Astro project with pnpm:

pnpm create astro@latest

2. Create a Reveal.js Layout

We'll create a reusable layout component for our slides:

---
export interface Props {
    title: "string;"
    authors: string[];
    description?: string;
}
import Layout from "./BaseLayout.astro";
import "reveal.js/dist/reveal.css";
import "reveal.js/plugin/highlight/monokai.css";

const { title, authors, description } = Astro.props;
---

{/* See Layout at https://github.com/hnrq/slides/blob/main/src/layouts/SlideLayout.astro */}
<Layout {title}>
  <Fragment slot="head">
    {description && <meta name="description" content={description} />}
    {authors.map((author) => <meta name="author" content={author} />)}
  </Fragment>

  <div class="reveal">
      <div class="slides"><slot /></div>
  </div>
</Layout>

<script>
  import Reveal from "reveal.js";
  import Highlight from "reveal.js/plugin/highlight/highlight.esm.js";

  let deck = new Reveal({ plugins: [Highlight] });
  deck.initialize();
</script>

3. Creating Individual Slides

Each slide is an .astro file in src/slides with frontmatter metadata:

---
import CSSPropertyDemo from "./components/CSSPropertyDemo.svelte";

export const title = "CSS Flexbox";
export const authors = ["Henrique Ramos"];
export const publishedAt = "2025-01-27";
export const description = "Do you even flex?";
export const draft = true;
---

<section>
  <h2>What is Flexbox?</h2>
  <ul>
    <li>One-dimensional layout model</li>
    <li>Distributes space along a single direction</li>
    <li>Powerful alignment capabilities</li>
  </ul>
</section>

4. Leveraging Astro Islands

One of the coolest features of Astro is being any UI framework for interactive components. For example, we can create a Svelte component for demonstrating CSS properties and append it to the slide.

5. Building the Homepage

Since Astro doesn't yet support .astro content collections, we'll create a utility to load and validate our slides:

import type { AstroInstance } from "astro";
import { type } from "arktype";

type Opts<T extends Record<string, unknown>> = {
  files: Record<string, T>;
  schema: type;
};

const astroPageType = type({
  "draft?": "boolean",
});

const getAstroPages = <T extends Record<string, unknown> & AstroInstance>({
  files,
  schema,
}: Opts<T>) => {
  // ... implementation
};

export default getAstroPages;

And create a slides getter:

const schema = type({
  title: "string",
  description: "string",
  authors: "string[]",
  publishedAt: "string",
});

type Slide = AstroInstance & typeof schema.infer & { [key: string]: unknown };

export const getSlides = () =>
  getAstroPages<Slide>({
    files: import.meta.glob<true, string, Slide>(
      ["@slides/**/index.astro", "@slides/*.astro"],
      { eager: true },
    ),
    schema,
  });

Finally, implement the homepage:

---
import { getSlides } from "@utils/getSlides";

const slides = getSlides()
  .filter(({ draft }) => !draft)
  .sort((c1, c2) => (c1.title > c2.title ? -1 : 1));
---

<h1>Slides</h1>
<p>Here you can find a list of all available slides:</p>
{
  slides.map((slide) => (
    <a href={`/${slide.id}`}>
      <h2>{slide.title}</h2>
      <p>{slide.description}</p>
      <small>{new Date(slide.publishedAt).toLocaleDateString()}</small>
    </a>
  ))
}

Future Improvements

Here are some ideas to improve:

Make Reveal.js plugins configurable through props
Improve code block highlighting in client-side components
Add presentation themes and customization options

Conclusion

By combining Astro with Reveal.js, we've created a modern, maintainable system for managing presentations, allowing us to centralize and enhance our slides with Interactivity Islands.

What do you think? Share your thoughts and ideas in the comments below!

Live demo and Code.

Note: This implementation is a starting point - feel free to customize and extend it based on your needs.

Using XState to coordinate Three.js character animations

Henrique Ramos — Fri, 27 Sep 2024 20:39:42 +0000

Disclaimer: This is not a definitive guide, improvements and feedback are more than welcome!

When creating a character with a complex animation flow, it is a common practice to use a finite-state machine. Popular game engines, such as Unity and Unreal, have built-in solutions to handle state machines in order to queue animation clips. When using JS, however, developers can pick from a multitude of libraries, including XState.

XState is a JS/TS library for state machine modelling and orchestration. It's easy to get started with, but its learning curve gets steeper quickly. Therefore, getting this done was a journey searching through forums, documentations and trial and error.

Goal

Create a character that walks, runs and dances, sits down and does push-ups.

Resources used

Three.js
XState
A Humanoid model
Ten individual animations:
- Regular animations: Dancing, Idle, Running, Pushing-up, Sitting and Walking
- State-Transition animations: Idle to Push-up, Push-up to Idle, Sit to Stand and Stand to Sit

Relevant XState Concepts

State: The machine's status or mode.
Events and Transitions: Event is a signal that causes a transition. Transition is a change from one state to another.
Actions: It's an effect fired when a transition happens, be it on entry or exit.
Context: Data stored in a state machine

Assumptions

The character should start from Idle state
The character should be able to walk, run, do push-ups and sit down from Idle
Regular animations should run in loop, until another action is fired
All State-Transition animations should be uninterruptable
"Idle to Push-up" and "Stand to Sit" should run once before looping "Pushing-up" and "Sitting", respectively, effectively starts
When transitioning from "Pushing-up" or "Sitting", "Push-up to Idle" and "Stand to Sit" should run once

Solution

Character model and animations were loaded using Three.js.

State Machine

Mermaid diagram of the state machine. A more detailed version can be seen at Stately.ai.

State Machine Context

currentAction: The Animation to be played
velocity: How fast should the model move

Setting up State-Transition animations

(
    [
      'Idle to Push-up',
      'Push-up to Idle',
      'Sit to Stand',
      'Stand to Sit',
      'Open Door',
    ] as HumanoidActions[]
  ).forEach((actionName) => {
    actions[actionName].loop = THREE.LoopOnce; // important for triggering finished event
    actions[actionName].clampWhenFinished = true;
  });

Playing an uninterruptable action

In order to play an uninterruptable action, a promise actor will be created. It reads the action to be played from input and adds an event listener to mixer that will be triggered once the action is finished.

playUninterruptableAction: fromPromise(
        async ({ input }: { input: { action: HumanoidActions } }) =>
          new Promise((resolve) => {
            playAction(input?.action);
            const callback = () => {
              mixer.removeEventListener('finished', callback);
              resolve(undefined);
            };
            mixer.addEventListener('finished', callback);
          }),
      ),

Instancing and Listening to State Machine changes

const actor = createActor(setupHumanoidMachine(crossfadeMixer)).start();

actor.subscribe((state) => { 
  if (state.context.currentAction === previousSnapshot?.context.currentAction) return;
  crossfadeMixer.playAction(state.context.currentAction);
  previousSnapshot = state;
});

Controls

In this case, PressControls were implemented. Every time the user presses anywhere in the screen, an event of type Walk or Run, depending on how far away from the character it clicked, will be sent to the actor.

const controls = new HumanoidControls(
  mesh,
  intersectionObject,
  (type: Events) => actor.send({ type }),
  mouse,
);

Result

Create a React Tooltip component using Popover API

Henrique Ramos — Thu, 27 Jun 2024 18:39:31 +0000

Since April 2024, Popover API works major browsers on their latest versions. This API allows developers to display popover content on top of other page content.

Code

For this small snippet, I've used JS Popover API (HTMLElement.showPopover & HTMLElement.hidePopover) and Floating UI for Tooltip positioning. Check it out:

Typing Component Events in Svelte

Henrique Ramos — Wed, 30 Aug 2023 03:22:42 +0000

Svelte allows the creation of custom events for a component. When using it with TypeScript, it is also possible to add types that makes it easier to know which event can be listened to and its details.

The event dispatcher

import { createEventDispatcher } from 'svelte';
interface ComponentEvent {
  toggle: null;
  edit: { value: string; };
};

const dispatch = createEventDispatcher<ComponentEvent>();

const onToggle = () => dispatch('toggle');
const onEdit = (value: string) => dispatch('edit', { value });

The event listener

import Component from '$lib/components/Component.svelte';
import type { ComponentEvents } from 'svelte';


const handleEdit = (event: ComponentEvents<Component>['edit']) => {// ...};

Extending a HTML Element in a Svelte Component using TypeScript

Henrique Ramos — Thu, 16 Feb 2023 03:13:24 +0000

When using Svelte with TypeScript, all properties of a component should be typed. Props are declared by exporting a let. However, when creating a superset of an HTML element, one wouldn't want to extensively declare all props. Here's a solution for this:

<script lang="ts">
  import type { HTMLInputAttributes } from 'svelte/elements';

  interface $$Props extends HTMLInputAttributes {
    prop: string;
  }

  export let prop: string;
  // ...
</script>

Conditional Wrap in React

Henrique Ramos — Wed, 22 Jun 2022 19:39:46 +0000

If you ever played around with React, you probably found a situation where you'd need to conditionally wrap a component. If it matches some condition, it should be rendered inside a given tag, if not, leave it as is. Here's a small snippet for that:

import { FC, ReactNode, createElement } from 'react';

interface WrapProps {
    if?: boolean;
    with: typeof createElement.arguments[0];
    wrapperProps: typeof createElement.arguments[1];
    children: NonNullable<ReactNode>;
}

const Wrap: FC<WrapProps> = ({
    if: condition,
    with: wrapper,
    wrapperProps,
    children,
}) =>
    condition ? createElement(wrapper, wrapperProps, [children]) : <>{children}</>;

export default Wrap;

Usage:

const condition = useMemo(() => index % 2 === 0, [index]);

<Wrap if={condition} with="a" wrapperProps={{ 'data-testid': 'wrapper' }}>
    <p>Wrapped text</p>
</Wrap>

This component uses React.createElement because it allows dynamic component creation. It means that, instead of providing a function like (children) => <p>{children}</p> for Wrap, it is possible to pass a React Component instance or a HTML node name.

Solid + GSAP: The superhero we need

Henrique Ramos — Fri, 17 Jun 2022 21:24:44 +0000

Have you ever created a page and felt like it lacks the SAUCE? In my opinion, that drip usually comes from micro-interactions (small interactions with the sole purpose of delighting users). There are many libraries around for creating them, but my favorite one is GSAP, which allows creating performant and complex animations easily.

When using GSAP with React, however, the integration doesn't feel right: creating a Tween/Timeline and storing it in a React.useRef(), adding .to()'s and .from()'s inside a React.useEffect() looks strange to me. This is needed in order to prevent re-declaring on every render, which would re-trigger animations every time something changes in the DOM tree.

This is where SolidJS is brought into play. It looks like React, but has a main difference. according to its documentation:

Every Component executes once and it is the Hooks and bindings that execute many times as their dependencies update.

This means no useRef needed for storing a timeline. In Solid you may simply declare it like this:

const tl = gsap.timeline({paused: true});

And it won't be re-declared on every render. Very cool, eh? This approach is useful for most libraries thatinteract with the DOM to add transitions and animations (ScrollReveal.js, for example).

Animating with GSAP in Solid.js

When adding an animation to a timeline, GSAP needs to know which element should be animated. This can be done using an element reference. There are two ways of getting a ref in Solid:

Pass a ref variable to a JSX element and add the animation inside onMount:

  let containerRef;
  onMount(() => {
    gsap.to(containerRef, {
      // TODO: animation
    });
  });
  return <div ref={containerRef} />;

Or, my favorite one, using custom directives:

const animation = (element) => {
  // code goes here
};

return <div use:animation />;

Custom directives are syntax sugar over ref, which allows us to easily attach multiple directives to a single element. A directive is a function that receives an Element and an Accessor as arguments, that looks like this:

const hoverAnimation = (el, _accessor) => {
  const animation = gsap.to(el, {
    // properties
  });

  el.addEventListener("mouseenter", () => {
    animation.play();
  });

  el.addEventListener("mouseleave", () => {
    animation.pause();
  });
};

And may then be added to any element like this:

const App () => (
  <div use:hoverAnimation />
  <div use:hoverAnimation />
);

An element can have multiple directives, and a directive can be used in multiple elements, making it possible to create GSAP animations that can be re-used throughout your app.

Check out this live demo of an object that changes it background color on hover:

To be or not to be a Fullstack Dev?

Henrique Ramos — Wed, 15 Jun 2022 18:07:51 +0000

One of the hardest things for me is to define my level of knowledge in something. Nowadays I consider myself a Front-end developer because is the area I know the most and I'm most interested at. However, I'm also able to work on back-end side (Not the same knowledge, but it's sufficient most of the time).

I feel like being Fullstack is like being good at Back-end and Front-end, while specializing in one of those areas, means diving deep into them, while having shallow knowledge of the other. Also, it looks like that "deep" understanding isn't needed most of the time, so probably a Fullstack would be good enough in 95% of the cases.

This got me thinking: is it better, career wise, to be a Fullstack developer? Or is specialization the way to go?

How's your relationship with StackOverflow?

Henrique Ramos — Thu, 09 Jun 2022 23:50:44 +0000

Every time I discover a new technology, I like to make a silly small project with it. This time, I created Discovr or, how I described it: "Just an excuse to learn SolidJS". The Tech Stack was TypeScript, SolidJS, Vite, Vitest and Testing Library. To sum up: I wanted to learn new things.

While dropping characters into VSCode, I, of course, ran into issues. My gut feeling was google it and open the first SO or Doc entry, and so I did and... No answers. In the end I got over the problem the hard way: reading source code and muddling through, something I don't do too often.

Everything went well. But at some point I considered leaving the project aside and coming back once there was a tutorial, answer or doc entry for my problem (which goes against the initial purpose of exploring new technologies). At the end, I got myself thinking if I was too used to having answers handed on a silver platter instead of digging for answers.

What do you guys think? Is StackOverflow-dependency a thing? Does using it too much affect learning? What's your opinion about tutorials and "ready-to-use" answers? Personally, I feel like they surely help a lot in the beginning, but as you start digging deeper into something, it won't suffice anymore

Aprendendo JS no Android

Henrique Ramos — Mon, 09 May 2022 23:27:19 +0000

Vi um Tweet esses dias sobre como é dificil aprender a programar quando não se tem um computador. Acredite ou não, esta é a realidade para muitas pessoas ao redor do mundo. Seja por preço ou facilidade de uso, celulares são muito mais comuns que PCs e Laptops. No Brasil, por exemplo, um celular pode ser encontrado em 99.5% das casas com acesso à internet, enquanto um computador só pode ser encontrado em 45.1%.

Quando se trata de programação, a esmagadora maioria das ferramentas só estão disponíveis para computadores. Isso se torna um obstáculo para os que querem aprender, mas não possuem uma máquina. Neste texto, busco sugerir algumas ferramentas para facilitar o aprendizado de JavaScript, e algumas outras ferramentas comuns em TI, utilizando um celular Android.

Acode

Acode É um editor de código para Android. Ele possui auto-completar (Autocomplete) e realce de sintaxe (Syntax Highlighting) que funcionam muito bem. Além disso, é possível executar arquivos HTML com um toque, facilitando a visualização das alterações.

Codepen

Ao iniciar o aprendizado de JS, ter um IDE que funcione de cara é ótimo. Para novatos, configurar um editor de código pode ser uma tarefa difícil. É aí que Codepen entra em jogo: Ele não só permite brincar com JavaScript no console, mas também possui editores de HTML e CSS, além de uma aba 'Result' live reload (As alterações aparecem automaticamente sem ter que recarregar toda a página).

Termux

Após dar início na jornada de programador, é interessante aprender como utilizar um terminal. Termux é um terminal de comandos Unix que permite a instalação e uso de vários softwares de linha de comando.

Estar familiarizado com um terminal é uma habilidade util para toda especialização de TI, mas é especialmente necessária àqueles que trabalham com DevOps ou Infraestrutura. No último caso, o Termux será útil mesmo se tiver um computador (Digo isso como alguém que hosteia um servidor de Veloren e precisa usar SSH constantemente para fazer atualizações e checar se tudo está funcionando corretamente).

Caso vocês ainda não se conheçam: Terminal, usuário. Usuário, Terminal.

Git

Quando o assunto é Sistemas de Controle de Versionamento, Git é a ferramenta mais popular. Ela permite que os desenvolvedores organizem seu trabalho e consigam colaborar em um mesmo projeto em paralelo. Em um PC, os editores de código normalmente automatizam os comandos, mas no Android será necessário ter um terminal, como o Termux, e aprender como utilizar comandos do git como commit, push, pull e checkout.

GitHub

Se o Git é o número 1 em Sistemas de Controle de Versionamento, GitHub é o serviço em nuvem número 1 para Git. Ele permite reportar erros no código, revisões e, mais importante, ele mantém o repositório na nuvem caso seu telefone exploda do nada. A Microsoft tem feito um ótimo trabalho no aplicativo do GitHub: Ele possui a maioria das funcionalidades disponíveis no aplicativo Desktop. É possível Editar arquivos, submeter, aprovar e comentar pull requests, tudo direto do smartphone.

Não vou mentir, o modo claro queima meus olhos.

Keyboards

Fazer as coisas usando touchscreen é bem mais difícil para mim do que digitar e navegar em um computador. No entanto, percebi que meu irmão mais novo se dá muito bem jogando no celular, enquanto eu não consigo nem acertar um alvo parado no Free Fire.

Por viver no Brasil, compro muitas coisas no AliExpress. Lá é possível encontrar diversos teclados Bluetooth baratos (Uns 50 reais). Ainda assim, pode ser caro para quem recebe um salário mínimo. Não é necessário, mas é um acessório que vale a pena investir, porque acelera as coisas.

Conclusão

Hoje em dia, a mentalidade mobile-first trouxe muitas ferramentas de desenvolvimento para telefones Android. As ferramentas e aplicativos disponíveis hoje, como as mostradas acima, devem ser suficiente para alguém que quer aprender JS. No entanto, ao começar a se aprofundar mais em programação e tópicos mais complexos (Digamos que você começa a gostar de DevOps, por exemplo), você provavelmente se sairá muito melhor com um Desktop/Laptop.

Learning JS on Android

Henrique Ramos — Mon, 09 May 2022 23:27:18 +0000

One of these days I saw a tweet about how hard it is to learn programming when you don't have a computer. Believe it or not, that's a reality for a lot of people around the globe. Whether because of price or ease of use, cellphones are much more common than PCs and Laptops. Taking Brazil as an example, a smartphone can be found in 99.5% of the households that have access to the internet, while a computer can only be found in 45.1%.

When talking about programming, the overwhelming majority of tools are computer-only. Hence, not having a workstation becomes a hurdle for those who want to dip their toes into IT. In this text, I'll suggest some tools to facilitate JavaScript and some other common IT tools using a cellphone.

Acode

Acode is an Android Code Editor. It has autocomplete and syntax highlighting for HTML, CSS and JS that works surprisingly well. Also, it allows to run HTML files within a tap and this makes it way easier to preview recent changes.

Codepen

When starting to learn JS, having an out-of-the-box functional IDE will come in handy. For newbies, setting up a Code Editor can be really hard. That's where Codepen comes into play: Not only it allows you to play around with JavaScript in the console, but it also has HTML and CSS editors, plus a result tab with live reload (Changes on code are instantly seen on the results, you don't have to refresh the whole page).

Termux

After kicking-off a programmer journey, one may want to start learning how to use a terminal. Termux is an Android terminal and Linux environment that allows installing a bunch of command-line softwares.

Being used to a Unix terminal is a useful skill in every IT specialization, but it's especially required for those who want to work with DevOps or IT infrastructure. In the latter case, Termux will be useful even when having a workstation (saying that as someone who hosts a Veloren server and constantly needs to SSH into the machine for updates and health-checks).

In case you haven't met yet: Terminal, user. User, terminal.

Git

When it comes to Version Control System, Git is the most popular tool around. It allows developers to organize their work and also collaborate in a same project in parallel. On PC, Code Editors usually automate Git commands, but on Android having a terminal, like termux, and learning how to use git commands like commit, push, pull and checkout will be necessary.

GitHub

If Git is the #1 Version Control System, GitHub is the #1 cloud service for Git. It allows code issues reporting, code-reviewing and, most importantly, it will keeps the repository on the cloud if your cellphone suddenly explodes. Microsoft has been doing a great job on the GitHub app: It has most of the features available on GitHub desktop. Edit files, submit, approve and comment on pull requests, everything from your smartphone.

Not gonna lie, the light mode burns my eyes.

Keyboards

Doing things in a touchscreen is way harder for me than typing and browsing around a computer. However, I've noticed that my younger brother is a proficient phone gamer, while I can't even hit a standing target when playing Free Fire.

Since I live in Brazil, I usually buy things on AliExpress. They sell a bunch of cheap bluetooth keyboards (Around 8 dollars). It could still be pricey for those who get a minimum wage in developing countries. It's not a must, but an accessory worth investing in, since it really speed things up.

The Bottom-line

Nowadays, mobile-first mentality brought much more development tools to Android devices. The tools and apps available today, such as the ones shown above, should be enough for someone who wants to learn JS. However, once you start digging deep into programming and some other complex topics (Let's say you get a taste for DevOps, for example), you'll likely be much better with a Desktop/Laptop.