teleren/devto huggingface dataset:
Creating a Todo App on an Android Device, using React.js + Termux — Pt-1
Tags: android, node, javascript, react
Published: 2023-03-28 12:53:08

---
title: Creating a Todo App on an Android Device, using React.js + Termux — Pt-1
published: true
date: 2023-03-17 20:23:04 UTC
tags: android,nodejs,javascript,react
canonical_url: https://marcellecode.medium.com/criando-um-todo-app-em-um-dispositivo-android-usando-react-js-termux-pt-1-d8d9c9c9deca
---

#### In this first article, we will learn how to set up an Android device to create React.js applications.

![](https://cdn-images-1.medium.com/max/1024/1*mo5Eo4KuiklsHAARrsjNbA.png)

#### Step 1 — Termux installation

Termux is an android application that simulates a Linux terminal, allowing us to have some computer functionality on our cell phones. To install, just download it from the playstore or the official termux repository:

[https://play.google.com/store/apps/details?id=com.termux](https://play.google.com/store/apps/details?id=com.termux)

[GitHub - termux/termux-app: Termux - a terminal emulator application for Android OS extendible by variety of packages.](https://github.com/termux/termux-app)

I already wrote two other articles showing how I did the configuration on a Tablet and a Smartphone, if you want to see a step by step of how I did the installation and configuration, the link is here below

- [Programando pelo Tablet](https://link.medium.com/ICbWi7UYeyb)
- [Programando pelo celular](https://link.medium.com/OEdtvfXYeyb)

#### Step 2: Installation of Node.js

Node.js is a javascript development environment that is used by several libraries such as react. For what we are going to do, we are going to use the lts version so just run the command below

```
pkg install nodejs-lts
```

#### Step 3: Creating the structure of the Todo App

It’s time to create the React app. This step is the simplest, just run the command below

```
npx create-react-app todo-app && cd todo-app && npm start
```

[![](https://cdn-images-1.medium.com/max/1024/1*zSlmbnW3H33dMzqtil75cA.png)](https://www.buymeacoffee.com/marcellecode)
O que são Closures, e qual seu proposito na programação?
Published: 2023-03-17 20:19:42

Na programação, _closures_ também conhecidos como funções aninhadas, são um recurso importante que permite que as funções capturem e use variáveis de seu escopo externo, mesmo após a execução da função ter sido concluída. Isso significa que uma função pode acessar variáveis que não estão em seu escopo imediato, tornando as _closures_ uma poderosa ferramenta para criar funções mais flexíveis e reutilizáveis.

Em termos mais simples, uma _closure_ é uma função que lembra do ambiente em que ela foi criada, incluindo as variáveis que estavam presentes naquele ambiente. Quando a função é chamada em um ambiente diferente, ela ainda tem acesso a essas variáveis, mesmo que elas não estejam mais disponíveis em seu escopo atual.

Por exemplo, considere o seguinte código em JavaScript:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xyosl9d7r5w3wwmnnjla.png)


Nesse exemplo, a função _outer_ retorna a função _inner_. Quando a função _outer_ é executada, a variável x é definida com o valor 10. Em seguida, a função _inner_ é definida e retornada. Quando a função _inner_ é chamada posteriormente, ela ainda tem acesso à variável _x_, mesmo que a função _outer_ tenha sido concluída e a variável x não esteja mais em seu escopo.

As _closures_ são úteis em várias situações, incluindo:

**Criação de funções privadas**: As _closures_ permitem que você crie funções privadas que não podem ser acessadas fora de seu escopo imediato. Isso é útil para ocultar dados e funções que não precisam ser expostos ao código que está fora do escopo.

**Gerenciamento de estados**: As _closures_ podem ser usadas para gerenciar estados em uma aplicação. Por exemplo, você pode criar uma função que armazena o estado de um componente da interface do usuário e retorna uma função que atualiza esse estado. Isso permite que você controle o estado do componente sem expor a variável que armazena o estado.

**Memoização**: As _closures_ podem ser usadas para implementar a memoização, que é uma técnica para armazenar em cache os resultados de uma função para evitar a reexecução da função com os mesmos argumentos. Quando uma função é executada com um determinado conjunto de argumentos, seu resultado pode ser armazenado em uma variável dentro da _closure_. Se a função for chamada novamente com os mesmos argumentos, ela pode retornar o resultado armazenado em vez de executar a função novamente.

Em resumo, as _closures_ são uma poderosa ferramenta de programação que permite que as funções capturem e usem variáveis de seu escopo externo. Isso torna as funções mais flexíveis e reutilizáveis, permitindo que elas sejam usadas de maneiras diferentes em diferentes contextos. Compreender como as _closures_ funcionam é uma habilidade essencial para qualquer programador que deseja escrever código de alta qualidade e reutilizável.
This Week In Python
Tags: python, discuss, thisweekinpython
Published: 2023-03-17 19:51:46


**Fri, March 17, 2023**


This Week in Python is a concise reading list about what happened in the past week in the Python universe. 

**I have received some good suggestions for this week's content. Thank you.**

**Did I miss anything from the Python universe this week? What did you read or tried out?**


## Python Articles



- [How virtual environments work](https://snarky.ca/how-virtual-environments-work/)
- [Python-based compiler achieves orders-of-magnitude speedups](https://news.mit.edu/2023/codon-python-based-compiler-achieve-orders-magnitude-speedups-0314)
- [Deploying a Django App to Azure App Service](https://testdriven.io/blog/django-azure-app-service/)
- [Formatting Gone Wrong](https://www.revsys.com/tidbits/formatting-gone-wrong/)
- [Julia and Python better together](https://bkamins.github.io/julialang/2023/02/17/python.html)



## Projects



- [mciwb](https://github.com/gilesknap/mciwb) – Minecraft Interactive world builder
- [apify-sdk-python](https://github.com/apify/apify-sdk-python) – The Apify SDK for Python is the official library for creating Apify Actors in Python. It provides useful features like actor lifecycle management, local storage emulation, and actor event handling
- [replbuilder](https://github.com/Aperocky/replbuilder) – Python helper tool for building and running a repl with custom commands
- [pylyzer](https://github.com/mtshiba/pylyzer) – A fast static code analyzer & language server for Python
- [mr-graph](https://github.com/mcminis1/mr-graph) – a graph definition and execution library for python 



**Did I miss anything from the Python universe this week? What did you read or tried out?**
Using uuid in Knex.js and PostgreSQL
Tags: javascript, webdev, postgres, database
Published: 2023-03-17 19:44:03

I've been working on a personal project using [Node.js](https://nodejs.org/en/about) and [PostgreSQL](https://www.postgresql.org/). I also decided to use [Knex.js](https://knexjs.org/) (a SQL query builder) to run migrations and build schemas. So when creating a table which I wanted to replace a simple incremental `id` with `uuid` I had to search a little bit more than just reading Knex and Postgres documentation. I found a few comments on GitHub issues and Stack OverFlow answers that were very helpful and decided to share this short post in case someone faces the same situation.

## Scrolling the documentation

So that's the relevant piece of documentation from Knex related to using uuid when creating a schema in Knex migrations:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cw7w62tp5w84pjqk49av.png)

Although there is no example of how to use it, I also found the [documentation related to the `uuid-ossp` extension in Postgres](https://www.postgresql.org/docs/current/uuid-ossp.html), which has a function called `uuid_generate_v4()`. And that's the extension and function you should use to write your schema in Knex when creating a table that has an uuid column.

## How to use it

So after creating a new Knex migration, let's say you want to create a new table whose `primary key` will be a `uuid` column.
Here's an example of how to do it:

```javascript
import { Knex } from "knex";

export async function up(knex: Knex): Promise<void> {
    await knex.schema.raw('CREATE EXTENSION IF NOT EXISTS "uuid-ossp"')
        .createTable("table_name", (table) => {
            table.uuid("id", {primaryKey: true}).defaultTo(knex.raw("uuid_generate_v4()"));

//scheme continuation...

    });
}
```

**Note:** as stated in [Knex documentation](https://knexjs.org/guide/schema-builder.html#uuid) you can set the `useBinaryUuid` to `true` so that `binary(16)` is used instead of the default `char(36)`.
Like that:
```javascript
table.uuid("id", {primaryKey: true, useBinaryUuid: true}).defaultTo(knex.raw("uuid_generate_v4()"));
```
Also note that the `notNullable()` is not necessary in this case since we're setting the `primaryKey` option to `true`, which in Postgres doesn't allow nullable values.
C# code to create a bullet and shoot it in Unity
Published: 2023-03-17 19:18:00



```
using UnityEngine;

public class ShootBullet : MonoBehaviour
{
    // Reference to the bullet prefab
    public GameObject bulletPrefab;

    // Speed of the bullet
    public float bulletSpeed = 10.0f;

    // Update is called once per frame
    void Update()
    {
        // Check if the player pressed the fire button (left mouse button)
        if (Input.GetButtonDown("Fire1"))
        {
            // Create a new bullet instance
            GameObject bullet = Instantiate(bulletPrefab, transform.position, Quaternion.identity);

            // Get the rigidbody component of the bullet
            Rigidbody rb = bullet.GetComponent<Rigidbody>();

            // Add force to the bullet to shoot it forward
            rb.AddForce(transform.forward * bulletSpeed, ForceMode.Impulse);
        }
    }
}
```
Notes on Next.JS(13)
Tags: nextjs, react, webdev, beginners
Published: 2023-03-17 18:26:42

At the date of original posting, Next.js 13 ([App Router](https://beta.nextjs.org/docs)) was in beta.

A framework on top of a framework. That's what Next.js is, a framework on top of React. However, Next.js seems to take advantage of some [React 18](https://react.dev/blog/2022/03/29/react-v18) features that are still in development. Specifically server components.

Server components pre-render on the server and are sent to the client to be "hydrated by React." [Server components](https://beta.nextjs.org/docs/rendering/fundamentals) are used by default inside the app directory in Next.js 13. Essentially this allows you to reduce the amount of JavaScript being sent to the client.

Next.js also uses its new "app" directory for nested routing, allowing you to create dynamic routes and nested layouts. [Routing](https://beta.nextjs.org/docs/routing/fundamentals) has some file conventions and does allow for dynamic route naming. 

Next.js is being used by companies like Hulu who are adopting it incrementally in production apps. This [case study](https://nextjs.org/case-studies/hulu) is kind of cool.
PagerDuty Community Update, March 17 2023
Tags: pagerduty, devops, incidentresponse, automation
Published: 2023-03-17 19:12:41

It’s Hackweek at PagerDuty, so we’ve been busy working on a brand new project. We can't wait to tell you about it when it’s ready!! We’ll be sharing more soon!

## Work with us!
Our backfill for Scott is now open, and we’re expanding our team to EMEA!  Join our Lisbon office as a Developer Advocate and help us strengthen our community! Learn more and apply [here](https://boards.greenhouse.io/pagerduty/jobs/4821240004). Stay tuned as we’ll have a couple more spots open in Chile!
## Find us in person!
Where in the world is PagerDuty DevRel? We’re back on the road in 2023!

- Mandi and the EMEA crew will be at [WTFisSRE](https://www.cloud-native-sre.wtf/) in London in May! Mandi will be presenting *Best Practices for On-Call Teams* and PagerDuty will have a booth!

We hope to see you! Say hi, we might have PagerDuty stickers. :D 
## We’re also virtual!
- Coming on March 22nd, Mandi will be on the *Is it Observable?* Observable Lightning talks! [Mark your calendars](https://isitobservable.io/observable-lightning-talks-march-2023)!
## On the Podcast
Next week we’ll be talking to Chris Munns from AWS Startups!  

Subscribe to [Page it to the Limit](https://pageittothelimit.com) so you never miss an episode. We’ve got a bunch of great episodes in the pipeline for you!

Did you miss the last episode with Rachel Stephens? Don’t worry, it’s available to [listen to online](pageittothelimit.com/bridging-the-gap-with-rachel-stephens/)!
## On Twitch
We’re on [Twitch](https://twitch.tv/pagerduty), covering all things PagerDuty. Our regular show is:
- HowTo Happy Hour: Fridays at 4pm Eastern / 1pm Pacific. 

Make sure you’re following us so you can be there live!  You can also view our most recent episodes on [Twitch](https://www.twitch.tv/pagerduty/videos). You can see some of our earlier streams on the [YouTube playlist](https://www.youtube.com/playlist?list=PLW0xKyjystaOwwYODuuvKdte7STOpU6jt).

On the 28th *and* 31st, we’ll have a cast of automation characters on the stream to talk about the next release of PagerDuty Process Automation, and it’s a big one! Make sure you’re following us for more! 
## Get in Touch
If you have a question about PagerDuty, check out our [Community Forums](https://community.pagerduty.com) for advice from friendly folks. If you’d like to be on our podcast or Twitch, or just say hi, email us at community-team@pagerduty.com. We’d love to hear what you’re doing with PagerDuty!

## Follow us on Social Media!
- [Kat](https://twitter.com/strawberryf1eld)
- Tara: [Twitter](https://twitter.com/sparklingrobots) and [Mastodon](https://indieweb.social/@sparklingrobots)
- Mandi: [Twitter](https://twitter.com/lnxchk) and [Mastodon](https://hachyderm.io/@lnxchk)
- [Podcast Account](https://twitter.com/pageit2thelimit)
- [PagerDuty Main](https://twitter.com/pagerduty)
Cómo Chat GPT-4 me está convirtiendo en un mejor ingeniero de software o "10x"
Tags: spanish, chatgpt, programming, ai
Published: 2023-03-17 19:11:47

La inteligencia artificial y el aprendizaje automático están revolucionando la industria de la tecnología, y uno de los modelos más avanzados en la actualidad es Chat GPT-4 de OpenAI. En este blog, exploraremos cómo Chat GPT-4 me ha ayudado a convertirme en un mejor ingeniero de software o "10x" y cómo puede hacer lo mismo por ti.

Mejora la eficiencia en la resolución de problemas
Chat GPT-4 me ha permitido abordar problemas de software de manera más eficiente, al proporcionar sugerencias y soluciones alternativas en tiempo real. Esto acelera el proceso de depuración y mejora la calidad del código.

**Aumenta la creatividad**
Al interactuar con Chat GPT-4, he ampliado mi perspectiva y explorado nuevas formas de abordar los desafíos. Este modelo de IA me inspira a experimentar con diferentes enfoques y técnicas, fomentando la innovación.

**Facilita el aprendizaje de nuevos lenguajes y tecnologías**
Chat GPT-4 me ayuda a adquirir rápidamente conocimientos sobre nuevos lenguajes de programación y tecnologías emergentes, lo que me permite mantenerme a la vanguardia en la industria.

**Mejora la comunicación y colaboración**
Chat GPT-4 me ha enseñado a comunicarme de manera más efectiva con mis colegas y colaboradores, al proporcionar ejemplos claros y concisos para explicar conceptos técnicos. Esto mejora la colaboración y el flujo de trabajo en el equipo.

**Automatiza tareas repetitivas**
Chat GPT-4 me permite automatizar tareas monótonas y repetitivas, lo que me libera tiempo para enfocarme en 
problemas más complejos y desafiantes.

**Desarrolla habilidades de pensamiento crítico**Interactuar con Chat GPT-4 me ha ayudado a mejorar mis habilidades de pensamiento crítico, ya que me reta a analizar y evaluar diferentes enfoques antes de tomar decisiones.

Chat GPT-4 de OpenAI ha demostrado ser una herramienta invaluable en mi camino hacia convertirme en un ingeniero de software "10x". Al mejorar la eficiencia, fomentar la creatividad, facilitar el aprendizaje, mejorar la comunicación, automatizar tareas, proporcionar información confiable, desarrollar habilidades de pensamiento crítico, gestionar el estrés, promover la formación continua y expandir horizontes profesionales, este modelo de IA está revolucionando la forma en que trabajamos y nos desarrollamos como ingenieros de software.

Al integrar Chat GPT-4 en mi práctica diaria y en mis procesos de trabajo, he experimentado un crecimiento significativo en mis habilidades técnicas y personales. Estoy convencido de que, al aprovechar las capacidades de este sorprendente modelo de IA, cualquier ingeniero de software puede alcanzar su máximo potencial y convertirse en un verdadero "10x".
AWS UG Dubai Meetup #28
Tags: aws, cloud, awscommunity, 100daysofcloud
Published: 2023-03-17 19:08:20

[76/100] #100DaysOfCloud Today, I attended the AWS User Group Dubai Meetup #28 where two AWSome speakers presented on Building applications easily using AWS Amplify and Deep Dive on DynamoDB.

In this session, I learnt:
- About the AWS service Amplify and how it can be used to build a full stack form/application within minutes including the cloud infrastructure on AWS Amplify along with a small demo. 
- Key concepts of DynamoDB, how the service works under the hood and how to ensure your DynamoDB tables deliver the required throughput needed for your application along with the other features it provides.

Also, met some familiar as well as some new faces and had a fun time networking and catching up with them.

[GitHub](https://github.com/aaditunni/100DaysOfCloud/blob/main/Journey/076/Readme.md)
GIT INIT...
Tags: github, beginners, ubuntu
Published: 2023-03-17 18:56:32

Today, let's learn how to get started with github from scratch 🤔.
Run the command in your ubuntu terminal.
`sudo apt-get install git`

Open github account from your browser. Sign in. Create a new repo. 
Copy the https url. 
`Ex:(https://github.com/<user-name>/<repo-name>.git)`

Go to the directory in which the file/folder that you wish to upload  is located. 
Run `git init`
Run `git remote add origin <url(one you copied)>`
_This command creates a new connection to your repo._
_"origin" is the name of the connection established._

You can also change the name of the connection to anything you want. Suppose I like cricket, so I may add 
`git remote add cricket <link to repo>`

To check established connections(fetch/push). We can use `git remote -v`

Now, you can add files to stage. They will reflect in your status later. You can do it by `git add <file-name>`. To add multiple files, `git add <file1> <file2> ... <filen>`.

Confirm your changes with `git status` command.
Commit changes `git commit -m "<your commit msg>"`

Push commits `git push origin master`

Enter your github username, as asked in the prompt
Enter your github password (❁´◡`❁).

Well! As guessed, it doesn't work...
Now, as github stopped accepting passwords, we need to use Personal Access Token(PAN) as password. 
To get your PAN, go to github account > Settings > Developer Settings > PAN > Tokens(Classic) > Generate new token > (Give a note. Allow all applicable checks that you need with a desired expiration period)> Click on generate token.
Copy your 🍳. Use it as your password for future as well.

You're done. Cheers!!
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9zgpdfqdtwqzvzvjvzce.png)
My new project...
Tags: flutter, programming, startup
Published: 2023-03-17 18:53:21

So I for some reason stopped developing on Mushroom server and started working on my new project. It was fun working on Mushroom server but I have a new project I am working on now that has my full interest.

---

Budget Cat. That is the name I have planned for my new project I am working on. So that is why I have not been working on Mushroom server and not posting here on dev.to.

I will post updates about the project here on dev.to but also on the official budget cat.

---

Links:
- Website: https://budgetcat.me/ will be redesigned
- Blog: https://blog.budgetcat.me/
- Twitter: https://twitter.com/budgetcatapp
Setting Up Soroban Development Environment on Windows: A Step-by-Step Guide
Published: 2023-03-17 18:50:56

Soroban is an open-source Japanese abacus simulator that can be used for practicing mental arithmetic. Here are the steps to set up the Soroban development environment on Windows:

Install Git: Download the Git installer for Windows from the official website (https://git-scm.com/downloads) and run the executable file to install it.

Install Node.js: Download the Node.js installer for Windows from the official website (https://nodejs.org/en/download/) and run the executable file to install it.

Clone the Soroban repository: Open the Command Prompt or Git Bash and navigate to the directory where you want to clone the Soroban repository. Then, run the following command:

bash

```
git clone https://github.com/kawmra/soroban.git
```
This will clone the Soroban repository to your local machine.

Install dependencies: Navigate to the Soroban directory and run the following command to install the dependencies:


```
npm install
```
Start the development server: Run the following command to start the development server:


```
npm run dev
```
This will start the development server at http://localhost:8080.

Open Soroban in the browser: Open your web browser and navigate to http://localhost:8080. You should see the Soroban simulator running in the browser.

That's it! You have successfully set up the Soroban development environment on Windows.
useState()
Tags: react, beginners
Published: 2023-03-17 18:46:13


With the help of useState hook we can have state variables in a functional component. It takes an initial value as an argument and returns an array with current state value and a function to update this value.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nrcw3vfo7sk25r4u6q3c.png)

****

**Components**  are reusable pieces of code that return HTML elements.

**Props**  are the arguments passed into a component.

**State** is a value that belongs to a component.


*props are passed from component to component.*

*****

- State in Class Component


{% codepen https://codepen.io/tyeb_11/pen/wvExWKd %}


- State in Functional Component



{% codepen https://codepen.io/tyeb_11/pen/ExepyNJ %}




- Updating state in nested object




![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g947g6frtk63e13dnkoo.png)