teleren/devto huggingface dataset:
Democratizing Participatory Budgeting
Tags: azuretrialhack, azure, nextjs, graphql
Published: 2022-03-08 14:11:31


### Submission Category
#### Computing Captains
---
## The Project
The People's Purse is an educational and social change platform that aims to inform citizens about different governmental departments and the elected officials who represent them. The inspiration from the project stems from the idea of **Participatory Budgeting**, or **PB**, a concept that was invented in Brazil in 1989, and singled out as a best practice by both the World Bank and United Nations. 

### PB comprises of three steps:
**1.** Citizens identify community needs for funding
**2.** Citizens then work with elected officials to craft budgetary proposals to meet these needs
**3.** Citizens are then able to vote on where and how public funds are spent

### The project is live and free to use at [People's Purse](https://peoplespurse.org)
The current iteration aims to be used as an educational tool in middle and high school level classrooms and is accompanied by a curriculum and lesson planning component.


![Landing Page Screen Shoot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7z38q247i6q6xq3nngtl.png)
**Take some time to poke around the website and let us know how/if it can be improved.**

---

### The Tech Stack
Next.js, React.js, TypeScript, React Charts.js, GraphQL, MongoDB, CosmosDB API, Azure Web Apps, Apollo Client, Material UI, Azure Private Endpoint, Google Civic Info API

### Functionality / Detailed Description

- The web application serves as a jumping off point for research of citizen's elected officials and departments that are federally funded. The aforementioned is accessed via the elected official and department information pages, which can both be used without signing up. 
- Once a user has signed up, or logged in, the ability to join classes, record and research local volunteer opportunities, or record civic actions is unlocked.
- Users with accounts can also vote on a mock federal budget using our system's predetermined "Budget Points". 
- Mock budgets must be perfectly balanced, neither over nor under spend all 100 budget points. The user is thus forced to evaluate funding their interested while staying within the constraints of a balanced budget.
- Once the User has voted, they’re able to view the aggregate average of all mock budgets across the application.

**_There are some slight differences in application functionality depending on the user's status (educator or learner), which is determined via backend database coding._**
#### Educators
- Create Classes
- View learner actions
- Monitor mock budgets created in their classes

#### Learners
- Craft Budgets
- Join Classes
- Record Civic Actions


### Link to Code on GitHub
#### [Link to GitHub Repository](https://github.com/thomps9012/thepeoplespurse)
The repository is open source and free to use, licensed under the Apache-2 License.

### If you’d like to work together on a Participatory Budgeting Solution, let’s connect 

#### [LinkedIn](https://www.linkedin.com/in/samuel-joseph-thompson/) 
#### thomps9012@gmail.com
#ESP32CAM – Host a webserver, render an HTML Page, trigger the Flash 🔦 in the #Arduino board
Tags: englishpost, arduino, camera
Published: 2022-03-08 20:36:10

---
title: #ESP32CAM – Host a webserver, render an HTML Page, trigger the Flash 🔦 in the #Arduino board
published: true
date: 2022-03-08 14:00:00 UTC
tags: EnglishPost,Arduino,Camera,EnglishPost
canonical_url: 
---

Hi !

Still learning with the ESP32 CAM board.

In today’s post the scenario is simple:

- Connect the device to a WiFi network
- Run a webserver on the device 
  - Create an endpoint [/flash]
  - Render a page on the host [port 80] with a button
- Turn on the Flash for 1 second when 
  - The endpoint receives a request.
  - The user click the html button

As the previous sample, I’ll write this using Visual Studio Code and PlatformIO project, using the **AI Thinker ESP-32CAM** board.

Full project working demo

![ESP32Cam Flash demo](https://brunocapuano.files.wordpress.com/2022/03/2022-03-05-esp32cam-flash-small.gif?w=250)

And the sample webpage with the local IP of my demo network.

![](https://brunocapuano.files.wordpress.com/2022/03/arduino-esp32-cam-rendering-a-page-1.jpg?w=599)

Let’s review some noted from the code:

- The webserver code declares the [/flash] endpoint and also render a string in the port 80.

```

  // Route for root / web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request)
            { request->send_P(200, "text/html", index_html); });

  // Route for trigger flash
  server.on("/flash", HTTP_GET, [](AsyncWebServerRequest *request)
            {
              flashOnForNSeconds(1);
              request->send_P(200, "text/plain", "Flash Triggered"); });

  // Start server
  server.begin();

```

- The content for the HTML page is declared in a const char var.

```

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body { text-align:center; }
    .vert { margin-bottom: 10%; }
    .hori{ margin-bottom: 0%; }
  </style>
</head>
<body>
  <div id="container">
    <h2>ESP32 CAM - Labs</h2>
    <p>
      <button onclick="triggerFlash()">Trigger Flash</button>      
    </p>
  </div>
  <h4>Bruno Capuano - @elbruno</h4> 

</body>
<script>
  var deg = 0;
  function triggerFlash() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', "/flash", true);
    xhr.send();
  }
</script>
</html>)rawliteral";

```

Small step today, however this is a cool way to create a dashboard or an app to interact with the device using http endpoints and simple html.

Full code available in my [ESP32 Cam Demo repository](https://github.com/elbruno/ESP32camDemos).

Happy coding!

Greetings

El Bruno

* * *
¿Todo en JavaScript es un objeto?
Tags: javascript, beginners, spanish
Published: 2022-03-08 13:54:42

Hace unos días, un seguidor de [Laserants.com](https://laserants.com), hizo la pregunta de si una función era un objeto. Mi respuesta fue en torno a explicar cómo casi todo es un objeto en JavaScript. He acá una clasificación de los `types` en JavaScript:

- **Primitivos (cadena, número, nulo, booleano, indefinido, símbolo)**: estos son tipos de datos inmutables. No son objetos, no tienen métodos y se almacenan en memoria por valor.
- **No primitivos (funciones, matrices y objetos)**: estos son tipos de datos mutables. Son objetos y se almacenan en memoria por referencia.

## ¿Qué es un objeto?
La clase `Object` representa uno de los **tipos de datos** de JavaScript. Se utiliza para almacenar varias colecciones con clave y entidades más complejas. Podemos decir que en JavaScript, un objeto es un entidad independiente con propiedades y tipos. 

Para crear un objeto podemos hacer algo como esto:
```javascript
const obj = {
  propiedad1: 'Valor 1',
  propiedad2: 'Valor2'
}
```

Ahora vamos a añadir una nueva propiedad al objeto
```javascript
obj.propiedad3 = 'Valor 3';
```

## Arrays como objetos
Un array es un objeto en JavaScript, y lo podemos demostrar de dos formas:

1. Usando typeof:
```javascript
var a = [1,2,3];
console.log(typeof a);  // Salida: 'object'
```
2. Añadiendo más propiedades o claves
```javascript
const arr = [1,2,3];
arr.saludar = () => console.log("hola");  // Añadiendo la propiedad saludar al objeto arr.

console.log(arr.length); // Salida: 3
console.log(arr.saludar); // Salida: hola
console.log(arr); // Salida: (3) [1, 2, 3, saludar: ƒ]
```

## Funciones como Objeto
Ahora veamos el caso de un `Array` con este ejemplo, primero crearemos una función
```javascript
function saludar() {
  console.log("Hola!");
}
```
Ahora le añadiremos más propiedades
```javascript
saludar.nombre = "Fernando"; 
saludar.conNombre = function() {
    console.log(`Hola, ${this.nombre}!`)
}
```
Imprimamos unos logs
```javascript
saludar() // Salida: Hola!
console.log(saludar.nombre); // Salida: Fernando
saludar.conNombre() // Salida: Hola, Fernando!
```

## String
Existen tipos de datos no-primitivos, que son objetos, y que tienen su alternativa primitiva, entre estos tenemos el `String` (nótese la mayúscula en la **S**). Veamos un ejemplo de como un `String` puede ser un objeto

```javascript
const nombrePrimitivo = "Carlos";
const nombreNoPrimitivo = new String("Fernando"); 

```

Intentando añadir propiedades a ambos objetos
```javascript
nombrePrimitivo.apellido = "Arias";
nombreNoPrimitivo.apellido = "Barrios";
```

Añadiendo logs
```javascript
console.log(nombrePrimitivo); // Salida: Carlos
console.log(nombrePrimitivo.apellido); // Salida: undefined
console.log(typeof nombrePrimitivo); // Salida: string

console.log(nombreNoPrimitivo); // Salida: String {'Fernando', apellido: 'Barrios**'}
console.log(nombreNoPrimitivo.apellido); // Salida: 'Barrios'
console.log(typeof nombreNoPrimitivo); // Salida: object
```
⚡️ How to Detect Device Orientation with Javascript
Tags: javascript, webdev, beginners, tutorial
Published: 2022-03-08 13:41:18

Sometimes, you just want to know if a screen is in portrait or landscape mode. There are two primary places you would want to do this: in Javascript, and in CSS. Let's look at how to detect the screen's orientation in both.

## Detecting Orientation in CSS
In CSS, simply use the following media queries to match any portrait or landscape device:

```css
/* Portrait orientation */
@media screen and (orientation: portrait) {
    
}
/* Landscape orientation */
@media screen and (orientation: landscape) {

}
```

## Detecting Orientation in Javascript
Since screen.orientation has patchy support, you can use the same media query in Javascript like so:

```javascript
let portrait = window.matchMedia("(orientation: portrait)");

portrait.addEventListener("change", function(e) {
    if(e.matches) {
        // Portrait mode
    } else {
        // Landscape
    }
})
```

## Detecting Orientation Changes in Javascript
Should you need to simply detect when a user changes orientation, you can use the following event listener:

```javascript
screen.orientation.addEventListener("change", function(e) {
    // Do something on change
});
```

Currently, this is not supported in Safari, so your mileage may vary on this one. If you need to, you can use the `matchMedia` query from above to achieve similar functionality.

## Conclusion
Detecting screen orientation is easy - and in the future we'll be able to use screen.orientation to reliably do this. For now, it's best to stick with CSS media queries and `window.matchMedia`.
Kafka Architecture : Synchronous to Asynchronous [1]
Tags: kafka, architecture
Published: 2022-03-08 13:32:29

Kafka is a powerful stream processing tool, but it's an **asynchronous tool**. So we know when we send the request but we don't know when the answer will come. And in some cases, there are some synchronous applications which fronts Kafka.

So today we will see the first of 3 cases to make this communication between the synchronous application more efficient depending your case.

---

## 1st solution - Kafka Based Solution

This solution is pretty simple. When you are send a message to kafka, you can add 2 headers to inform where the answer should be sent.
- **REPLY_TOPIC** : Name of the topic where the answer must be sent
- **REPLY_PARTITION** : Index of the partition in the *REPLY_TOPIC* where the answer must be sent

### Example
![Kafka Based solution schema](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w2k28r8ugag96efx6hvt.png)
 
In this example we have 2 topics : 
- TOPIC REQUEST
- TOPIC RESPONSE

The 2 instances of the API X write in the TOPIC REQUEST and are waiting an answer in the TOPIC RESPONSE. This topic has 4 partitions which are divided equally between the two instances.

Behind these topics, a MicroService Y is reading request from TOPIC REQUEST and is answering on the TOPIC RESPONSE *(defined in the REPLY_TOPIC header of the request)* on the partition asked by the header REPLY_PARTITION.

Like this when the first instance send a request, it will receive its answer.

### Pros & Cons
|Pros|Cons|
|---|---|
|Messages are consumed only once|Messages can be lost on a rebalancing|
| |The MicroService Y must be setup to read the headers REPLY_TOPIC and REPLY_PARTITION and use this values to answer|
| |The service account of the microservice Y must be able to write on all the topic it can received on REPLY_TOPIC|

The principal point here is the **rebalancing**. When you scale up/down or restart a service, the partitions will be rebalanced between all the instances of the service.

If the first instance of the API was listening on the partition 1 and 3 before a restart, after a rebalacing it can listen on 2 other partitions. So, if a request was sent from the first instance of the API with REPLY_PARTITION = 1 and the rebalancing appends, then the message can be lost *(if the partition 1 is given to another instance than the first one)*.

> **/!\ This solution is working only if you can lose messages.**

---

In the following part, we will see a more data-secure solution!

I hope it will help you! 🍺

---

<center><h3>You want to support me?</h3></center>
<a href="https://www.buymeacoffee.com/mxguilbert7" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>
VS Code Tip of the Week: Watermelon VS Code Extension
Tags: vscode, vscodetips, vscodeextension
Published: 2022-03-08 13:20:11

I discovered the [Watermelon](https://marketplace.visualstudio.com/items?itemName=WatermelonTools.watermelon-tools) VS Code extension yesterday.

![The Watermelon extension in action](https://community.vscodetips.com/uploads/articles/8r216zi5uy7bqfef4kqq.png)

What it does is give you the context of a piece of highlighted code by pulling in the comments from the associated pull request. Support for other platforms like JIRA are coming as well. Checkout the repository if you want to see how it all works.

{%embed https://github.com/watermelontools/wm-extension %}

It’s still early days, but it looks promising as an extension.
XLSX to XLSM with Macros
Published: 2022-03-08 13:18:28

---
canonical_url: https://ironsoftware.com/csharp/excel/examples/xlsx-to-xlsm-with-macros
---

IronXL allows developers to load, save and export XSLM files - which are macro enabled spreadsheets in the Open XML / XLSX format.

**C#:**
```cs
  
using IronXL;
WorkBook workbook = WorkBook.Load("test.xlsx");
 
//This is how you can export workbook to .xlsm format
workbook.SaveAs("test.xlsm");
```

**VB:**
```
Imports IronXL
Private workbook As WorkBook = WorkBook.Load("test.xlsx")
 
'This is how you can export workbook to .xlsm format
workbook.SaveAs("test.xlsm")
```
OCR for MultiPage TIFF Files
Published: 2022-03-08 13:16:48

---
canonical_url: https://ironsoftware.com/csharp/ocr/examples/csharp-tesseract-multipage-tiff/
---

The OcrInput and automatically work with an input TIFF files that conventional Tesseract can not read.

Every frame of your TIFFs will be imported, creating a multi-page IronOcr.OcrResult document.

**C#:**
```cs
using IronOcr;
 
var Ocr = new IronTesseract();
 
using (var Input = new OcrInput())
{
    Input.AddMultiFrameTiff("images/multiframe.tiff");
 
    var Result = Ocr.Read(Input);
    Console.WriteLine(Result.Text);
}z
```

**VB:**
```
Imports IronOcr
 
Private Ocr = New IronTesseract()
 
Using Input = New OcrInput()
	Input.AddMultiFrameTiff("images/multiframe.tiff")
 
	Dim Result = Ocr.Read(Input)
	Console.WriteLine(Result.Text)
End Using
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'z
```
Import Export Excel
Published: 2022-03-08 13:14:31

---
canonical_url: https://ironsoftware.com/csharp/excel/examples/import-export
---

IronXL allows you to Load and Save XLS, XLSX, CSV, TSV, JSON & XML files.

Each can be edited as if it were an Excel WorkSheet.

**C#:**
```cs
  
using IronXL;
//This is how you import excel file, same for xlsx
WorkBook workbook = WorkBook.Load("test.xls");
workbook.CreateWorkSheet("new_sheet");
workbook.Metadata.Title = "Import & Export Example";
 
//You can export to both formats with fluent saving
//Other supported formats for saving include: XLS, XLSX, CSV, TSV, JSON, XML
workbook.SaveAs("ExportAndImportToExcel.xls");
```

**VB:**
```
Imports IronXL
'This is how you import excel file, same for xlsx
Private workbook As WorkBook = WorkBook.Load("test.xls")
workbook.CreateWorkSheet("new_sheet")
workbook.Metadata.Title = "Import & Export Example"
 
'You can export to both formats with fluent saving
'Other supported formats for saving include: XLS, XLSX, CSV, TSV, JSON, XML
workbook.SaveAs("ExportAndImportToExcel.xls")
```
#1 Tip for Readable Code Across Teams and Personal Projects
Tags: programming, productivity
Published: 2022-03-08 13:13:10

Have you ever written code and months later you come back to that same code and be like "what the heck was I thinking".

> **💡 Tip:** You can easily put **links** referencing the documentation, site or stack overflow question from where you got that cool and fancy one-liner, solution or concept.

It helps if you think someone else would have a hard time understanding your code 

```php
// https://laravel.com/docs/9.x/collections#method-collapse
// https://stackoverflow.com/questions/62872479/laravel-incorrect-json-response-structure-when-using-unique

$collection = collect([
    $abc,
    $validated['abc']
])->collapse()->unique()->values();
```
## Advantages of this approach
- Team members can easily understand what's going on in the code directly from the source or from other examples.
- It helps Junior developers understand the codebase better.
- It's easy to adopt into any team or project.
- Easy adoption ensures consistent comments across teams.
Tesseract Detailed Configuration
Published: 2022-03-08 13:12:32

---
canonical_url: https://ironsoftware.com/csharp/ocr/examples/csharp-configure-setup-tesseract/
---

The IronTesseract.Configuration object provides access to the underlying Tesseract API in C# / .NET to configure setup for advanced users.

**C#:**
```cs
 var Ocr = new IronTesseract();
 
Ocr.Language = OcrLanguage.English;
Ocr.Configuration.ReadBarCodes = false;
Ocr.Configuration.TesseractVersion = TesseractVersion.Tesseract5;
Ocr.Configuration.EngineMode = TesseractEngineMode.TesseractAndLstm;
Ocr.Configuration.BlackListCharacters = "`ë|^";
Ocr.Configuration.RenderSearchablePdfsAndHocr = true;
Ocr.Configuration.PageSegmentationMode = TesseractPageSegmentationMode.AutoOsd;
Ocr.Configuration.TesseractVariables["tessedit_parallelize"] = false;
 
using (var Input = new OcrInput(@"images\image.png"))
{
    var Result = Ocr.Read(Input);
    Console.WriteLine(Result.Text);
}	
```

**VB:**
```
Dim Ocr = New IronTesseract()
 
Ocr.Language = OcrLanguage.English
Ocr.Configuration.ReadBarCodes = False
Ocr.Configuration.TesseractVersion = TesseractVersion.Tesseract5
Ocr.Configuration.EngineMode = TesseractEngineMode.TesseractAndLstm
Ocr.Configuration.BlackListCharacters = "`ë|^"
Ocr.Configuration.RenderSearchablePdfsAndHocr = True
Ocr.Configuration.PageSegmentationMode = TesseractPageSegmentationMode.AutoOsd
Ocr.Configuration.TesseractVariables("tessedit_parallelize") = False
 
Using Input = New OcrInput("images\image.png")
	Dim Result = Ocr.Read(Input)
	Console.WriteLine(Result.Text)
End Using
```
Why is it important to test Ansible Collections?
Tags: automation, ansible, ansiblecollections, testing
Published: 2022-03-08 13:12:18

**1. Testing prevents bugs from entering the codebase.** 

We do not write tests to find existing bugs in your codebase, we write tests to prevent bugs from getting into your codebase in the first place. The sooner you discover an error in your code, the easier (and cheaper) it is to fix it. 

**2. Testing helps us structure our code better.** 

When we write tests and code at the same time, tests guide our code structure. It is really difficult to write a test for a complex piece of code. As a developer, you want to make your life easier and write simple tests, so you need to simplify or restructure your code to make it easier to test. 

**3. Testing helps us detect regression.** 

When tests cover most of our codebase, we can easily detect regressions. During their lifecycle, most products get new features or a bug or two is fixed. If you have a test for existing features, you can be sure that by adding new features - and if all tests are still green - you haven’t broken anything. 


*Find out more about the benefits of testing, its setup, and see how to implement different types of tests on real-life examples in [this free webinar](https://steampunk.si/webinars-training/intro-testing-ansible-collections/).*
Spotify Listening to in Github README.md
Tags: git, readme, markdown, spotify
Published: 2022-03-08 13:10:39

Have you come across these <a href="spotify.com">Spotify</a> NowPlaying Status? Do you want to have these in your <a href="https://github.com/unofficialdxnny">README.md?</a> Well by the end of this post you will have one.

![Spotify Nowplaying card](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hp5y37w561fx5gyd6hqr.png)

### Steps:

- Visit this link <a href="https://github.com/kittinan/spotify-github-profile">@https://github.com/kittinan/spotify-github-profile</a>
- Click the connect with spotify button
- Design your NowPlaying Stutus 
- Copy MarkDown code
- Paste MarkDown code
Create Excel Line Chart
Published: 2022-03-08 13:10:07

---
canonical_url: https://ironsoftware.com/csharp/excel/examples/create-a-excel-line-chart
---

IronXL supports creation and editing of Charts for Excel documents in the modern XLSX file format.

This example shows how to create a Line Chart. Other chart types are also supported.

**C#:**
```cs
using IronXL;
using IronXL.Drawing.Charts;
 
WorkBook workbook = WorkBook.Load("test.xlsx");
WorkSheet sheet = workbook.DefaultWorkSheet;
 
//Set the chart type and it's position  on the worksheet.
var chart = sheet.CreateChart(ChartType.Line, 10, 10, 18, 20);
 
//Add the series to the chart
//The first parameter represents the address of the range for horizontal(category) axis.
//The second  parameter represents the address of the range for vertical(value) axis.
var series = chart.AddSeries("B3:B8", "A3:A8");
 
//Set the chart title.
series.Title = "Line Chart";
 
//Set the legend position.
//Can be removed by setting it to None.
chart.SetLegendPosition(LegendPosition.Bottom);
 
//We can change the position of the chart.
chart.Position.LeftColumnIndex = 2;
chart.Position.RightColumnIndex = chart.Position.LeftColumnIndex + 3;
 
//Plot all the data that was added to the chart before.
//Multiple call of this method leads to plotting multiple charts instead of modifying the existing chart.
//Yet there is no possibility to remove chart or edit it's series/position.
//We can just create new one.
chart.Plot();
 
workbook.SaveAs("CreateLineChart.xlsx");
```

**VB:**
```
Imports IronXL
Imports IronXL.Drawing.Charts
 
Private workbook As WorkBook = WorkBook.Load("test.xlsx")
Private sheet As WorkSheet = workbook.DefaultWorkSheet
 
'Set the chart type and it's position  on the worksheet.
Private chart = sheet.CreateChart(ChartType.Line, 10, 10, 18, 20)
 
'Add the series to the chart
'The first parameter represents the address of the range for horizontal(category) axis.
'The second  parameter represents the address of the range for vertical(value) axis.
Private series = chart.AddSeries("B3:B8", "A3:A8")
 
'Set the chart title.
series.Title = "Line Chart"
 
'Set the legend position.
'Can be removed by setting it to None.
chart.SetLegendPosition(LegendPosition.Bottom)
 
'We can change the position of the chart.
chart.Position.LeftColumnIndex = 2
chart.Position.RightColumnIndex = chart.Position.LeftColumnIndex + 3
 
'Plot all the data that was added to the chart before.
'Multiple call of this method leads to plotting multiple charts instead of modifying the existing chart.
'Yet there is no possibility to remove chart or edit it's series/position.
'We can just create new one.
chart.Plot()
 
workbook.SaveAs("CreateLineChart.xlsx")
```