teleren/devto huggingface dataset:
Thoughts on React Native vs Ionic Framework Developer Experience and Application Quality
Tags: ionic, reactnative, mobile, javascript
Published: 2023-03-23 15:32:39


As mobile app development continues to evolve, developers have an increasing number of tools and frameworks at their disposal. Two popular options are [React Native](https://reactnative.dev/) and [Ionic Framework](https://ionicframework.com/). Both of these frameworks allow developers to build cross-platform apps using web technologies like CSS, and JavaScript. However, there is ongoing debate about which framework is better. 

**_I don't think one is "better" than another, i think you need to use what is best for you based on the skills you have and what are the parameters of the problem you are trying to solve_**

Ionic presents it's User Interface with web component, React Native uses [native components](https://reactnative.dev/docs/components-and-apis).

In the videos linked in this post, we'll compare the development experience of React Native and Ionic Framework by walking through the source code used to build a multi-step wizard in both frameworks. The second video is where I give my thoughts on what my preference is and how I came to that conclusion.

>These are some quick thoughts, although I am considering a more detailed analysis by continuing to build out the application using common features found in mobile solutions. Leave a comment if it is something you would be interested in seeing.


###Ionic Framework

In this video we used React Hook Form for form validation and Pullstate for state management between the pages of the wizard. We chose Ionic Framework for its built-in animations and clean user interface, cross-platform visual components and the ability to leverage existing web development experience. It is literally a website in a container running on a native device.
{% youtube IK7yVxyzY_8 %}


### React Native

In this video, I walk through the React Native code I wrote to replicate a multi-step wizard I previously built using Ionic Framework. I also share my thoughts on the debate between React Native and Ionic that's going on online. My goal with the video was to compare the development experience (DX) of the two frameworks, although I might need to write more code to make a definitive judgment. If you're interested in this topic, please leave a comment below.

To achieve form validation, I used React Hook Form. Pullstate was used for managing the state between the different pages of the multi-step wizard, and React Native Paper was used for a simple, clean UI.
{% youtube Xo17EupLcqo %}

>To get my thoughts you will have to checkout the videos!!

### Source Code 
- React Native - https://github.com/aaronksaunders/wizard-react-hook-form-pullstate-react-native
- Ionic Framework - https://github.com/aaronksaunders/wizard-react-hook-form-pullstate-ionic
Axe-Con Lessons.
Tags: accessiblity, conferences
Published: 2023-03-23 15:13:14

Axe-Con was March 15 & 16. [Axe-Con](https://www.deque.com/axe-con/) is the world’s largest digital accessibility conference and is held annually by Deque. Here are a few take a ways from the event. 


## Are you Inclusive?
Denis Boudreau of [inklusiv](https://inklusiv.ca/axe-con/) asks "Are you really as "inclusive" as you think you are?" 
He pointed out that we may be inadvertently leaving people out. 

26% Of working-age Americans identified as having one or
more disabilities. If you're giving a talk can the audience hear you without a mic? Can they read your slides?

He has a Speaker self assessment quiz to check on how inclusive your talks are. He also announced the release of his book [The Inclusive Speaker](https://inklusiv.ca/books/). It's on Kindle for $1.99. 

## Ageism in Interfaces.

Alex Tait of [atfreshsolutions.com](https://www.atfreshsolutions.com/) talked about Ageism in interfaces. She pointed out that ageism can occur in designs. 

Here are some stats she mentioned.

1. ⅓ of seniors have hearing loss.
2. ⅓ of seniors have vision loss.
3. ⅓ of seniors have serious mobility limitations.
4. 40% of seniors have a cognitive impairment.

She has more resources on her site. [At Fresh Solutions](https://www.atfreshsolutions.com/resources.html).

## Essential Accessibility Annotations

[Carie Fisher](https://cariefisher.com/) of Testlio talked about making accessibility notes on designs so the developers understand the accessibility choices made in the design. 

Sixty-seven percent of WCAG guideline can be met in the design phase of a project. A repeated theme of Axe-Com was Shifting Accessibility Left in a project timeline. So moving it to an early in the design phase so it is always there and not added later.

## The need to “shift left”

 [Michele A. Williams](https://www.linkedin.com/in/micheleawilliams1/) spoke extensively on the topic, Her talk Research through broken lenses: The need to “shift left” in UXR was full of great in sights. Here are the highlights.

### "True inclusion isn’t bolted on at the end, it’s built in from the beginning."


### "Time estimates are based on intention." 
 Won’t it take more time to add accessibility to a project. Not if it's part of the plan at the start. So shift it left in the plan.

## Conclusion

Axe-Con was great this year. There was great information. Please follow these people and learn more.
Check external links in PowerPoint automatically from the command line
Published: 2023-03-23 15:04:34

How do I check whether all my external HTTPs links in the PowerPoints slides are OK? I asked chatgp.

The answer was not right, but it included the idea of just parsing the XML from powerpoint.

So it boiled down to simple steps:

1) Looking in directory ppt/slides/_rels/slide
2) Finding links with xmlquery
```
elements := xmlquery.Find(doc, "//Relationship")
```
3) Do a 
```
    response, errors := http.Get(web)
```


And check it all:

```
 go run main.go check testdata/someuris.pptx
❌ Target https://www.john-doe.com/ is not reachable in slide: slide3
☑️ Target https://www.google.de/ is reachable in slide: slide3
❌ Target https://www.john-doe.com/ is not reachable in slide: slide2
☑️ Target https://www.google.de/ is reachable in slide: slide2
```

Use the app: https://github.com/megaproaktiv/linkchecker
With binaries released: https://github.com/megaproaktiv/linkchecker/releases/tag/v0.1.4

Simple as that.
Enjoy!

For more good GO and AWS stuff:
https://www.go-on-aws.com/
Subir aplicação web DJANGO em um servidor Linux 2/2
Tags: braziliandevs, beginners
Published: 2023-03-23 14:38:03

Configure o Gunicorn como um serviço do systemd (continuação):

- Adicione a seguinte configuração, ajustando o caminho do ambiente virtual, o usuário e o grupo, conforme necessário:

```python
[Unit]
Description=gunicorn daemon
After=network.target

[Service]
User=myuser
Group=mygroup
WorkingDirectory=/path/to/your/django/project
Environment="PATH=/path/to/your/virtualenv/bin"
ExecStart=/path/to/your/virtualenv/bin/gunicorn --access-logfile - --workers 3 --bind unix:/path/to/your/django/project/myproject.sock myproject.wsgi:application

[Install]
WantedBy=multi-user.target

```

- Substitua `/path/to/your/django/project` pelo caminho absoluto do diretório do projeto Django.

- Substitua `/path/to/your/virtualenv` pelo caminho absoluto do diretório do ambiente virtual.

- Substitua `myuser` e `mygroup` pelos nomes de usuário e grupo apropriados.

Inicie e habilite o serviço Gunicorn:

- Inicie o serviço Gunicorn: `sudo systemctl start gunicorn.`
- Verifique o status do serviço Gunicorn: `sudo systemctl status gunicorn`.
- Habilite o serviço Gunicorn para iniciar automaticamente após a reinicialização do servidor: `sudo systemctl enable gunicorn`.

Atualize a configuração do Nginx para usar o arquivo de soquete do Gunicorn:

- Abra o arquivo de configuração do Nginx: sudo nano `/etc/nginx/sites-available/myproject`.
- Modifique a linha `proxy_pass` para usar o arquivo de soquete:

```python
proxy_pass http://unix:/path/to/your/django/project/myproject.sock;
```

- Verifique se a configuração do Nginx está correta: sudo nginx -t.
- Reinicie o Nginx: `sudo systemctl restart nginx.`

Configurar o firewall (opcional):

- Se você estiver usando o ufw como firewall, permita conexões ao Nginx: `sudo ufw allow 'Nginx Full'`.

Teste sua aplicação web Django:

- Acesse a aplicação web Django usando o endereço IP ou domínio do servidor no navegador.

## **Possíveis erros**

1. Mantenha a coerência com o nome dos arquivos. Garanta que todos os endereços são os mesmos em todos os lugares.
2. Cheque se todos os arquivos estão com as configurações corretas
Nginx: `sudo nano /etc/nginx/sites-available/myproject`
Gunicorn: `sudo nano /etc/systemd/system/gunicorn.service`
Hosts: `sudo nano /etc/hosts`
Hostname: `sudo nano /etc/hostname`

## **Dicas**
1. Revise todo o processo passo a passo para garantir que está alinhado. É importante que você entenda o que está acontecendo em cada processo.
2. Use da Inteligência Artificial do ChatGPT para resolver erros!

Parte 1: https://dev.to/feministech/subir-aplicacao-web-django-em-um-servidor-linux-12-58ec

```

```
Build a Tic-Tac-Toe Game with TypeScript, React and Minimax
Tags: typescript, react, javascript, tutorial
Published: 2023-03-23 14:32:17

In this tutorial we will build a Tic-Tac-Toe game with TypeScript, React, React Hooks, and style it using Styled Components library. Additionally, we'll use the Minimax algorithm to power the AI moves. The final code is available on both GitHub and CodeSandbox.

[Build a Tic-Tac-Toe Game with TypeScript, React and Minimax](https://claritydev.net/blog/tic-tac-toe-typescript-react-hooks).
Paracetamol.ts💊| #34: Explica este código TypeScript
Tags: javascript, typescript, spanish, webdev
Published: 2023-03-23 14:30:00

## **<center>Explica este código TypeScript</center>**
#### <center>**Dificultad:** <mark>Avanzado</mark> </center>

```ts
class Dog{
  // clase vacía
}

const fn = <T>(value: T):T => {
  return value;
}

let res = fn(new Dog())
console.log(typeof res) 
```

- A. `string`
- B. `array`
- C. `object`
- D. `Dog` 
- E. `function`

{% spoiler **Respuesta** %} 

✅  C. `object`

En JavaScript, todo lo que no sea un primitivo es un objeto.
En este ejemplo, pasamos como argumento una instancia de la clase `Dog` a la función generica `fn` y luego consultamos por su tipo de dato.

Las clases no son tipos primitivos, por ende, y por descarte tiene que ser de tipo `object`.

{% endspoiler %}

---
Features of Apache-Age
Tags: apacheage, opensource, postgresq, database
Published: 2023-03-23 14:12:24

Apache Age is an open-source extension of PostgreSQL that provides a graph database functionality. Some of the key features of Apache Age include:

**1. Graph database functionality:**
Apache Age allows users to store and manipulate graph data, which is useful for a wide range of applications, including social networks, recommendation engines, and knowledge graphs.

**2. Compatibility with PostgreSQL:**
Apache Age is built on top of PostgreSQL, which is a well-established and widely used relational database management system. This means that users can leverage the scalability, reliability, and security features of PostgreSQL while also taking advantage of Apache Age's graph database functionality.

**3. Support for property graphs:**
Apache Age supports property graphs, which are a common graph data model that allows users to associate arbitrary key-value pairs with nodes and edges.

**4. Cypher query language:** 
Apache Age supports the Cypher query language, which is a powerful and intuitive language for querying graph data.

**5. Integration with other tools:** 
Apache Age can be integrated with a wide range of other tools and technologies, including Apache Spark, Apache Kafka, and Apache Hadoop, which makes it a versatile and flexible option for a wide range of applications.

**6. Open source and community-driven:** 
Apache Age is an open-source project, which means that anyone can contribute to its development and improvement. This also means that users can benefit from a vibrant and active community of developers and users who can provide support and guidance.


For more learning, view these links

- [Apache Age (Website)](https://age.apache.org/)
- [Apache Age (Documentation)](https://age.apache.org/age-manual/master/intro/overview.html)
- [Apache Age (Source Code)](https://github.com/apache/age)
From Escape the Wave to Pong Why I'm Taking on a New Challenge
Tags: gamedev, programming, godot, news
Published: 2023-03-23 14:00:00

This week marks the start of a new project for me. While my current project, [Escape The Wave](https://github.com/EmilienLeroy/EscapeTheWave), is on hold as I'm awaiting visual assets from a friend, I've decided to take on a new challenge. One of the main reasons for starting a new project is that I want to train myself in implementing online multiplayer functionality, something which is currently too complex for me to implement in Escape The Wave.

For my new game, I've decided to create a simple multiplayer Pong game. The concept of Pong is straightforward, so there isn't much to say about the game itself. This week, I focused on developing the basics of the game, including two-player functionality and a score system.

![pong](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3cj6zhvokphrvxlhl7sf.gif)

Moving forward, I plan to work on the game's style and design to create a simple yet beautiful game. This will be my focus for next week.

Overall, I'm excited about this new project and look forward to continuing to develop it. While Escape The Wave is still a priority, I believe that taking on a new challenge will help me grow as a developer and better prepare me for future projects. You can find the repository of this project [here](https://github.com/EmilienLeroy/DuoPong).
¿Qué es Promise.allSettled y como usarlo?
Tags: spanish
Published: 2023-03-23 13:59:06


> Este artículo fue originalmente escrito en [https://matiashernandez.dev](https://matiashernandez.dev/blog/post/que-es-promise.allsettled-y-como-usarlo)



En la versión ECMAScript 2021, el estándar agregó un nuevo método estático al objeto `Promise`. Este método te permite manejar múltiples promesas de forma concurrente, pero a diferencia de `Promise.all` este método 
espera a que todas las promesas hayan sido establecidas sin importar si estas fueron resueltas o rechazadas.

> En el articulo anterior revisamos como ejeuctar Promesas de forma concurrente utilizando Promise.all, [Revisalo aqui][https://matiashernandez.dev/blog/post/ejecuta-codigo-asincrono-de-forma-concurrente-en-javascript]

> Y si quieres saber mas sobre Promesas, puedes revisar este articulo introductorio: [¿WTF es una promesa en JS?](https://matiashernandez.dev/blog/post/wtf-que-es-una-promesa-en-javascript)


Este método es muy similar a `Promise.all`, en efecto comparten la misma sintaxis y forma de uso, lo que cambia es el resultado que retorna.

```js 
const promise1 = getData("userId")

const promise2 = getData("anotherUser")

const result = await Promise.allSettled([ promise1, promise2])
```
<Disclaimer>
**Cabe destacar** que el orden del arreglo retornado corresponde con el orden de las promesas utilizadas como argumento
</Disclaimer>


Lo importante de entender es que `Promise.allSettled`:
- Esperará por todas las promesas sin importar su resultado 
- El resultado de cada promesa será de la forma `{status: "fulfilled", value: <result>} ` o `{status: "rejected", reason: <el error>}`

Esto te permite filtrar los resultados basándose en el estado de cada promesa resuelta.

```js 
const promise1 = getData("userId")

const promise2 = getData("anotherUser")

const promise3 = performLongOp()

const promise4 = anotherOp()

const result = await Promise.allSettled([ promise1, promise2, promise3, promise4 ])

const fulfilled = results.filter(
  (p) =>p.status === 'fulfilled'
)

```

> Si estás usando **Typescript** entonces tendrás que [aplicar una función de predicado](https://matiashernandez.dev/blog/post/typescript-type-predicates-que-son) para que el filtro define el tipo correcto 
> `(p): p is Extract<typeof p, { status: 'fulfilled' }> `


## ¿Cuál es la diferencia entre Promise.allSettled y Promise.all? 

- `Promise.allSettled` es tu opción si lo que buscas es ejecutar múltiples operaciones asíncronas de forma concurrente cuando estas no dependen entre sí y **tampoco** dependen de si una u otra fue exitosa en su operación. 
- También te será útil si lo que buscas es conocer el resultado de cada operación asíncrona.
- `Promise.all` es completamente rechazado si una o más promesas utilizadas como argumentos también lo fueron. 




![Footer Social Card.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1615457338201/5yOtr5SdF.jpeg)
✉️ [Únete a Micro-bytes](https://microbytes.matiashernandez.dev)         🐦 Sígueme en [Twitter](https://twitter.com/matiasfha)           ❤️ [Apoya mi trabajo](https://buymeacoffee.com/matiasfha)
ISP slow dns servers at AirTel
Tags: dns, airtel, dig
Published: 2023-03-23 13:58:34

I've been using Internet for long and it feels slow long before ping reports packet drops or streaming shows loader. It feels sluggish, but when ISP tech support is puzzled too, it leaves me to look deeper.

After struggling with the slow ISP AirTel, I wondered what really is slow from technical aspect and I wanted to see if the dns server was upto the mark. I'm looking at the router config and it shows 125.22.47.100 (2401:4900:50:9::280) - we'd stick to the IPv4 version for a while. Checking for one lookups seemed non conclusive so I wanted to test it for a bigger list this time. I'm on a macOS so flushing dns would be a step too. So I could think of the test to be as go to a list of 500 domains, look up every domain name, and measure the complete time taken to do so. And then repeat it with cloudflare dns 1.1.1.1.

The list should be the first thing. Somewhere on Internet, Moz has a great list of 500 domains, also downloadable as csv. After cleaning up the list looks like:
```
www.google.com
www.blogger.com
youtube.com
microsoft.com
apple.com
...
```

I made a copy at [github gist](https://gist.github.com/crashuniverse/49a01741d2ba6b20b4231e11c58a08be) for reference.

Next is to feed this list to dig - a dns lookup utility on unix machines. 

dig -f hostnames.txt +noall +stats
-f to feed the long list of 500 domain names
+noall to suppress default list of outputs
+stats to show stats that includes resolution time

To sum up all time taken by the command, a time command is handy.

dig -f hostnames.txt +noall +stats
0.07s user 0.13s system 0% cpu 3:40.70 total
So 3 mins 40s. Okay.

How would 1.1.1.1 do:
dig @1.1.1.1 -f hostnames.txt +noall +stats
0.06s user 0.10s system 0% cpu 31.568 total
31s.

That is 7x faster, or Airtel's 125.22.47.100 is 7x slower. 

The real problem is if I change dns on the router to forget about the problem, AirTel makes it a point to disconnect service and it is all unusable - don't understand this part very well but it is probably to discourage using public dns.

Anyway, for now it confirms this dns is 7x slow.
What are the Eight rules to keep in mind to convert manual test cases into automated tests
Tags: beginners
Published: 2023-03-23 13:21:35

A Automation Testing is really a product engineer. In this manner, the essential thing you ought to learn first is some sort of a programming language that supports Item Situated techniques. Out of the normal dialects in the mechanization field, it's worth focusing on Java and Python which are additionally viewed as simpler to learn. Furthermore, Automation Testings likewise write in C#, JavaScript and some additionally write in Ruby.  For more details from the top industry experts, You can even check in-depth and Upskill yourself  test automation strategies,methodology and its concepts from [Automation testing course](https://www.edureka.co/masters-program/automation-testing-engineer-training).

**Eight rules to keep in mind are:-**

1. Identify test cases that are repetitive and time-consuming to execute manually. These are ideal candidates for automation.
2. Ensure that the test cases are well-defined and have clear expected outcomes. Automated tests need clear success criteria to determine whether the test has passed or failed.
3. Break down complex test cases into smaller, more manageable parts. Automated tests work best when they are focused on specific functionality or use cases.
4. Use descriptive and meaningful names for your automated test cases. This will make it easier to understand the purpose of each test case.
5. Keep your test cases modular and reusable. This will help reduce the time and effort required to create and maintain your automated test suite.
6. Consider the user interface when automating test cases. Automation tools are good at interacting with elements on a screen, but they may struggle with more complex interfaces.
7. Use version control to manage your test scripts. This will help ensure that you can track changes over time and roll back to previous versions if necessary.
8. Always perform a trial run before fully automating your test cases. This will help you identify any potential issues and refine your test scripts before you invest more time and resources in automation.
HasMany Through Relationship with example and Diagram.
Published: 2023-03-23 13:15:27

In Laravel, a `has many through` relationship allows you to define a relationship between three models. It's useful when you have a `many-to-many relationship` that is connected through an intermediate table.

For example, let's say you have three tables: `users`, `roles`, and `permissions`. Each user can have many roles, and each role can have many permissions. You can define a `has many through` relationship to allow a user to access all of their `permissions` through their `roles`.

Here's an example of how you might define the relationships in your models:

```
class User extends Model
{
    public function roles()
    {
        return $this->hasMany(Role::class);
    }

    public function permissions()
    {
        return $this->hasManyThrough(Permission::class, Role::class);
    }
}

class Role extends Model
{
    public function users()
    {
        return $this->belongsTo(User::class);
    }

    public function permissions()
    {
        return $this->hasMany(Permission::class);
    }
}

class Permission extends Model
{
    public function roles()
    {
        return $this->belongsTo(Role::class);
    }
}

```

In this example, the `User` model has a `hasManyThrough` relationship with the `Permission` model through the `Role` model. This allows you to access a `user's` `permissions` by calling `$user->permissions`.

Here's a diagram of the relationship:


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