teleren/devto huggingface dataset:
Getting Started with React Query for Fetching and Updating Data
Tags: javascript, react
Published: 2021-11-07 06:04:58

---
title: Getting Started with React Query for Fetching and Updating Data
published: true
date: 2021-11-03 16:10:04 UTC
tags: Javascript, react
canonical_url: https://api.follow.it/track-rss-story-click/v3/5DZDQD-R1zcnC9yLSbWg8V1cWWor9YPv
---

 ![Story 501555397](https://api.follow.it/track-rss-story-loaded/v1/Jwvci0m1oPFGekljoqECcQ "Story 501555397") 

In this article, I will be going through the basics of React Query and how it can be used to build a simple user list application. as per React Query site React Query is a Performant and powerful data synchronization for React to Fetch, cache and update data in your React and React Native applications […]

The post [Getting Started with React Query for Fetching and Updating Data](https://bleedbytes.in/getting-started-with-react-query-for-fetching-and-updating-data/) appeared first on [BLEEDBYTES](https://bleedbytes.in).
Monorepo? O que é? Devo usar?
Tags: monorepo, cleancode, architecture
Published: 2021-11-03 16:09:25

Monorepo é simplesmente a definição de arquitetura em que você utiliza apenas um repositório que podem conter vários projetos ao inves de distribuir esses projetos em vários repositórios. Você pode ter, por exemplo, um repositório que contenha um subdiretório de sua aplicação web, outro para seu aplicativo e outro para sua API.

Esses projetos estão conectados e podem compartilhar o gerenciamento de dependências.

Quando se fala em Monorepo, rapidamente vem a comparação com outra arquitetura que é a de Polirepo. Fazendo o paralelo entre elas, podemos notar semelhanças e diferenças.

![monorepo vs multirepo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w7wtoxahoyegm10u9gt5.png)

As principais semelhanças são inerentes a própria forma como são essas arquiteturas.

- Existem projetos (grandes e pequenos) bem sucedidos utilizando utilizando Monorepo ou Polirepo, como também existem projetos que fracassaram utilizando qualquer um dos dois;
- Ambas arquiteturas são simples de manter, implementar e escalar quando o projeto está no começo. Quando ele começa a crescer as dificuldades de manter um super repositório crescem, no caso do Monorepo e as dificuldades de manter dezenas ou centenas de repositórios também crescem, no caso do Polirepo.

Isso mostra que não existe uma arquitetura superior e sim que o desenvolvedor precisa analisar quando deve usar um caso ou outro.

Podemos citar alguns problemas nessa arquitetura.

- Pasta .git pode ficar gigante no repositório;
- O Git clone fica lento;
- Alto número de commits e de branchs afetam a performance do repositório;
- Tempo de build pode ser demorado (pelo número de arquivos);

Algumas soluções que podem ser implementadas.

- Manter poucas branchs que tenham uma longa vida para que o git tenha que se preocupar com menos referencias;
- Colocar arquivos de midia como gif, imagens e vídeos em um outro serviço, como o Git LFS;
- Não limita o acesso a determinadas partes do código a equipes ou pessoas específicas;

> Monorepo é diferente de repositório monolito

![vantagens](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1bdotqerne6boarkueix.jpg)

Agora vamos para os pontos positivos de utilização do conceito de Monorepo.

- Em um único lugar você tem todas as configurações, CI/CD, testes de forma que tudo fica padronizado para todos os subprojetos;
- Refatorar um problema ou uma melhoria de uma vez só em vários projetos em um único pull request (dependencia com problema de segurança, por exemplo);
- Gerenciamento e manutenção de dependencias centralizada e simplificada;
- Reutilização e compartilhamento de código para executar uma mesma tarefa em múltiplos repositórios;

Se você conhece algum outra informação relevante sobre os Monorepos, comenta aqui embaixo.

---

Se você gostou, me segue para novos posts e deixa o like nesse post.

Obrigado pela leitura! Espero que possa ter ajudado. 🚀
Upcoming Serverless Events in 2021 and 2022
Published: 2021-11-03 16:00:12

---
title: Upcoming Serverless Events in 2021 and 2022
published: true
description: Keen to learn more about Serverless? Here are some of the relevant upcoming conferences!
tags: 
//cover_image: https://direct_url_to_image.jpg
---

Between the online, hybrid, and in person conferences happening around the globe, the world's conference schedule is in full swing. 

Since 2014, there has been a huge increase in interest about Serverless, at least according to [Google Trends](https://trends.google.com/trends/explore?date=all&q=%2Fg%2F11c0q_754d), and lots of events to match. 

To complement the rise of interest in Serverless, we've quickly compiled some upcoming relevant conferences on the subject. 

**November 18th - [Prisma's Serverless Conference](https://www.prisma.io/serverless)** 

This is our own, first Serverless event. A short mini-conference chock full with top speakers from Netlify, Cloudflare, MongoDB, Vercel, CockroachDB, Planetscale, and of course Prisma. Prisma's Serverless Conference focuses on the challenges developers face when trying to adopt serverless databases. 

PS. Keep a look out for the new Prisma tooling that will also be highlighted in the keynote! 🤩

**February 24th - [ServerlessDays NASHVILLE](https://serverlessnashville.io/2022/index.html)**

An in-person event in Tennessee, Serverless Days NASHVILLE is a continuation of a number of Serverless Days events. Sign ups for this event are currently open as are the CFPs! ServerlessDays are a family of events around the world that's focused on fostering a community around serverless technologies. 


**March 22, 2022 - [Serverless Architecture Conference](https://serverless-architecture.io/thehague/)**

A packed two day hybrid event online or at The Hague, the event covers Serverless infrastructure, especially as how it relates to Cloud native architecture, and Kubernetes. This is a very large conferences with talks, speakers and workshops. Later in the year, the same production company will reprise a Serverless architecture conference once more in Berlin.

**April 4-6, 2022- [QCon London](https://qconlondon.com/)** 

Qcon is a behemoth of a conference and this QCon is no exception. Among its many tracks is one dedicated to *Serverless: Orchestration vs Choreography.* With top-of-the-line speakers and an enormous list of talks to choose from, QCOn is an in person option to learn more about Serverless in the Springtime.

-----

These are some of the Serverless events we've spotted. Are there others that you are especially looking forward to? Share more ideas in the comments! 👇
LaTeX & Macros: The Idea
Tags: codenewbie, latex
Published: 2021-11-03 15:55:08

Hello, how are you? :) 

In this post I tell you about Macros. You will discover if these are useful for you and if you need these. Let's start!!!

> Remember that these Macros are for `LaTeX` there are other softwares that use macros, but we are talking about `LaTeX`

## What are the Macros?

A macro is a set of instructions, which will be executed when we write a command.
We need to create these instructions and give them the steps which will be performed when we call this instruction 

> In `LaTeX` we can create macros to write equations, words, environments, multi-argument equations, environments, etc.

## How do I know if I need macros?

This is a natural question, well, to answer it, let me tell you, check the definition again. 

- You could use a macro if your document has many repetitive structures
- To save time writing different structures, or equations
- In the math context, you need to put the same equation in many places
- To insert figures in a fast way

But if you just need to do it once in your document, just do it in the normal way, it could be more efficient instead of declaring your macros.

There are different kinds of macros, without arguments, a single argument, multiple arguments, optional arguments, we will check them here.
Declaring macros is easy, you do not need to be worried about this, but this is topic for the next post. 

This is all!!!

Do not forget to follow me on Twitter `@latexteada`

Greetings :)
Nim for Beginners
Tags: tutorial, nim, beginners, video
Published: 2021-11-03 15:31:53

Hello everyone!

A while back i discovered the Nim Programming Language and quickly fell in love with it as my go to programming language for my hobby of Game Development and in general.

With my other hobby of making YouTube videos, i then proceeded to make some for Nim, and so here is a playlist i have been working on for a couple years now that teach the Nim Programming Language for beginners of the language and beginners to programming in general.

Playlist link: https://www.youtube.com/watch?v=5tVIsDYPClA&list=PLvwc2YT9MFOlPPexrsY-t7BNTdg2Vsx06

I hope my videos can teach you to program in this nice programming language. Have fun!
Localizing your android app
Tags: android
Published: 2021-11-03 15:23:34

## Intro
Following up on what we did last time [here](https://dev.to/amrh434/introduction-to-android-project-structure-g3g).

Our application started to have different audiences with different languages, so we want to localize our app.


## Steps 
The good thing is that we have a few texts to change and we already using a reference to the `strings.xml`

```
/*
file located in::  src/main/res/layout
*/
android:text="@string/my_button_text"
```
which have this value

```
/*
file located in:: src/main/res/values/strings.xml
*/
<resources>
    ...
    <string name="my_button_text">Click!</string>
</resources>
```

### Update all the text inside your app to use `strings.xml`

We also have the text we use for the toast inside our `MainActivity.java`
```
Toast.makeText(getApplicationContext(), "Clicked!!", Toast.LENGTH_SHORT).show();

```

So first thing first let's use the `strings.xml` instead of having the text inside the main file by doing the following update the `strings.xml` to have a text for the toast
```
/*
file located in:: src/main/res/values/strings.xml
*/
<resources>
 ...
    <string name="toast_text">Clicked!!</string>
</resources>
```

and update the `MainActivity.java` file to use the new text
```
Toast.makeText(getApplicationContext(), R.string.toast_text,Toast.LENGTH_SHORT).show();

```

Now we updated all the texts around our App to use the `strings.xml` values.

### It's time to translate our `strings.xml`
Right-click on the `strings.xml`, select the Open Translations Editor

![Untitled111.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1635950530536/A9FqoaiC7.png)

After that, you would need to click on the globe icon, to choose the language you want to support, I'll choose Arabic

![Untitled111.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1635950754189/51YAXZA70.png)

The last thing is to fill in the values for each text 

![Untitled.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1635951092456/PxwJb9qh7.png)

And the android studio will generate a new strings.xml file for the language you just selected. 

Here is the result

![download (1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1635951519756/wCXHVO7vu.png)




**Congrats!!** now you can support any language you want and have more audience around the globe

See you in the next part


> Photo by <a href="https://unsplash.com/@dollargill?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Dollar Gill</a> on <a href="https://unsplash.com/s/photos/android?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
[Hacktoberfest 2021] Fourth and the last pull request
Tags: hacktoberfest, opensource, java
Published: 2021-11-03 15:16:41

As my last and the fourth contribution in hacktoberfest 2021, I contributed in another issue from meiliesearch-java, which was the first project I contributed in hacktoberfest. 

I was planning to work on another issue, but I faced some environment issues with the project, I had to choose another issue from other project. 

The reason I picked this issue was that I know the sub-setting methods already from previous experience which I worked on creating unit tests for sub-setting methods. I understood the project structure and the standards.

[Click here to see the issue](https://github.com/meilisearch/meilisearch-java/issues/269)
The issue was to add and update code samples of the sub-setting methods. 

It was my first contribution on documentation. It was also my first experience using .yaml type file. 
You can check my pull request [here](https://github.com/meilisearch/meilisearch-java/pull/274).

I added some "reset" samples of the sub-setting methods, and updated "update" code samples of the same sub-settings.

As of this, I completed four pull requests for hacktoberfest 2021. 
This was a great experience actually "contributing" in some huge projects by working on small issues.
Learning to code with mindfulness
Published: 2021-11-03 15:03:41

I have recently noticed a peculiar habit in my day to day coding. I often find myself feeling frustration when I can’t solve a problem right away. This creates an urgency to complete the project, and results in unorganized code and half thought out solutions.

When I have felt frustration in the past with a problem, my go to habit was to just start coding the first solution that pops into my head, and hope that it works. More times than not, it doesn’t.

Last week I started to become more aware of when I am feeling frustrated. Recently I have been practicing different techniques to help put my mindset in a better, more calm, place when setting out to solve a problem.

**Technique 1: Turn off distractions**
Now, when I prepare to code, I turn my phone all the way off, close my email, and disable anything else that may distract me during the time I choose to focus on a problem. This technique helps me retain focus on one thing at a time and helps keep my mind clear on what needs to be solved in the code.

**Technique 2: Map it out**
This technique has changed the way I approach coding. Now, when I feel hints of frustration, I know it’s because I need to step back from the keyboard, and create the space I need to really understand the problem at hand.
This is the two step process I use to more mindfully solve problems:
1.  Write out **HOW** the code currently works, and how I want the code to work.
2.  Brainstorm all the possible solutions to the problem and choose the best one.

I bolded the **how** in step one because that is the key to solving problems. When I let frustration get ahold of me, I try to solve the problem by asking WHAT I need to do to make it work, and not HOW to make the code work. Asking “what” is a surface level question, and often does not address the underlying problem, while asking “how” forces you look at the problem from its most basic level, and work your way up to the specific problem.

In conclusion, I have been using the combination of removing distractions and creating space to think more carefully on how a problem can be solved. These two techniques have helped me code more mindfully and be more focused while solving problems.
A Word About psycopg2 Exceptions
Tags: postgres, python, psycopg2, exceptions
Published: 2021-11-03 14:50:55

And the word is "Information."

There is a wealth of information that is captured in the psycopg2 exceptions. These exceptions not only capture a (slightly) reformatted message in the standard `args` attribute, but also have more attributes that have information from the driver and the cursor and connection classes.

The extra attributes are:
<table>
<thead>
<th style="align: left; vertical-align: top">Attribute</th>
<th style="align: left; vertical-align: top">Description</th>
</thead>
<tbody>
<tr>
<td style="align: left; vertical-align: top">cursor</td>
<td style="align: left; vertical-align: top">The executing cursor during the exception|</td>
</tr>
<tr>
<td style="align: left; vertical-align: top">diag</td>
<td style="align: left; vertical-align: top">An object that contains extra information regarding the context and the statement that was running. This may also capture syntax errors in the SQL.</td>
</tr>
<tr>
<td style="align: left; vertical-align: top">pgcode</td>
<td style="align: left; vertical-align: top">The raw PostgreSQL error code</td>
</tr>
<tr>
<td style="align: left; vertical-align: top">pgerror</td>
<td style="align: left; vertical-align: top">The raw PostgreSQL error message|</td>
</tr>
</tbody>
</table>

So what does that do for you? The `cursor` attribute is a cursor object. This means that you have access to the last run query as well as the connection. So those can be probed for more information such as the query text and the connection back-end pid. The `diag` can help with sql statement syntax errors. The `pgcode` and `pgerror` can be useful for lower-level analysis, if needed.

Be aware that if you need to query the DB for more information during an exception, you should use a separate connection to get it as an exception state from SQL execution will put the transaction in a state that **must** be rolled back.

With Django exceptions, you need to access a dunder attribute to get to the information you will need. Django exceptions for the database will most likely only have the `args` attribute. But it does have the `__cause__` attribute which should be the original driver exception instance. And from that instance, you can access the other attributes.

This can prove quite helpful if you need more information quickly without actually trying to access search and parse database log information.

See the [this documentation](https://www.psycopg.org/docs/errors.html) for more information regarding the psycopg2 exception classes representing PostgreSQL errors.

Happy coding and happy exception handling!
Upgrading your application in Azure Kubernetes Service (AKS)
Tags: kubernetes, azure, cloudskills
Published: 2021-11-03 14:43:26

There are multiple ways to upgrade your application:
* Changing the YAML files
* Using kubectl edit — for quick, minor changes on a live cluster
* Using kubectl patch — for small updates when you have no access to the YAML file.
* Using helm — used when your application is deployed with helm.
Changing the YAML...

read more:

https://jackwesleyroper.medium.com/upgrading-your-application-in-azure-kubernetes-service-aks-c67d8fc5c482
Dealing with binary modules in Ansible Collections
Tags: ansible, ansiblecollections, automation
Published: 2021-11-03 14:05:52

If you pick a random Ansible module and look under its hood, you will almost certainly find Python or PowerShell code there. But Ansible module can be anything that can consume parameters from the standard input, do some work, and report back the status via the standard output. 

Binary Ansible modules can prove useful when installing Python packages to the target host is not desired. Because they can statically link their dependencies, there is usually no need for host modification. 

But because nothing is free in this world we live in, they have some drawbacks: 

1. Binary Ansible modules are architecture-specific, which means that we need to provide one module per supported architecture. 
2. Statically-linked binaries tend to be massive compared to scripts. 

We can get around the first issue by creating a set of action plugins that dispatch the right module for a target architecture. But there is little we can do about the size, which can be problematic in environments with low network speeds. Also, Ansible Galaxy will reject collections larger than 20 Mb, making collection distribution even harder.
The problem with code screenshots and how to fix it
Tags: a11y, writing, programming, inclusion
Published: 2021-11-03 14:03:34

So you decided to write a tutorial about a topic you know extremely well. You are very familiar with the topic, so much so that you know all the code like the backside of your hand.

This tutorial has a lot of code, and you need it to look good! So you either screenshot your code editor which colours your code, or you use a tool like [Carbon](https://carbon.now.sh/) to generate some great-looking code snippets as PNGs.

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

This is awesome as now you can get away from using bland, ugly code snippets.

```
console.log("Hi!")
```

## The problem(s)

While pasting a picture or screenshot of code might look good on your blog, it presents 2 major issues:

### 1. Your users can't copy your code

Imagine you're running into a problem while coding. You search on Google and stumble upon a great tutorial. Clear and concise explanations with code examples. You want to try the code for yourself to see if it's fit for your purpose, but to your frustration and horror, the code you've been reading is actually *a screenshot*. How would you feel? You'd rub your temples, or scream at the screen and move away from the article to find something else.

That's exactly what your users will do.

But there's another, more major issue:

### 2. Code images are inaccessible

For screen reader users, an image is only as good as its `alt` text. So what are you going to do? Write the entire code snippet as `alt` text? No, you shouldn't. So anyone with a screen reader is unable to read your code.

## The solution

The solution to both these problems is pretty simple:

### Use proper Markdown

The first thing to do is to use proper Markdown for code snippets. So if you're adding code, you should use this syntax:

    ```
    console.log("Hi!")
    ```

Blogging platforms like DevTo and Hashnode have excellent code snippet colouring support:

```javascript
console.log("Hi!")
```

So if you just include the language next to your top backticks (`), then they should be automatically coloured:


    ```javascript
    console.log("Hi!")
    ```

**But what if I'm writing on my own blog?**

## Use HighlightJS

If you want to make your code look beautiful on your own website or blog, without the need for inaccessible screenshots or Carbon images, you can use Javascript libraries like [HighlightJS](https://highlightjs.org/). Here's a [tutorial to get started](https://savvas.me/tips/beautiful-code).

## Conclusion

You work hard on your blog and you want everything, including your code to look great! Code snippets as images or screenshots might sound like the easy way towards this but you also need to think of your visitors. Visitors who would want to copy your code for later use and users who are only able to read your posts using screen readers. Be inclusive. Be human.

Thank you for reading.
Code Reactjs Faster by Enabling Emmet for JavaScript and TypeScript in VS Code
Tags: react, codenewbie, lifehack, beginners
Published: 2021-11-03 13:53:18

If you have watched various tutorials on YouTube about Reactjs and wondered how these guys code so quickly?

Well, if you are an intermediate coder like me or beginner you might not have the idea how does they do it. I have found a way how they are all using various plugins in their Code Editor or the IDE(integrated development environment). Some of these plugins include ES7 React/Redux/GraphQL/React-Native snippets, Auto Close Tag, Auto Complete Tag. 

But, today I discovered something new for Reactjs developers, its called Emmet support. 

> The Emmets are actually inspired by the CSS Selectors, it allows you to type shortcuts that are then expanded into full pieces of code. Emmet abbreviation and snippet expansions are enabled by default in js, jsx, tsx, ts among other files.

## How to Enable Emmet Support for JSX
You can enable it by adding the following code inside Settings.json of your Visual Studio Code Editor.

```
"emmet.includeLanguages":{
        "javascript": "javascriptreact",
        "typescript": "typescriptreact"
}
```

## References
[Brian Design](https://www.youtube.com/watch?v=ph65TPiNmKo)