teleren/devto huggingface dataset:
New sessions about learning #JavaScript and #TypeScript with #GitHubCopilot 🤖
Tags: englishpost, githubcopilot, microsoftreactor
Published: 2022-03-23 16:26:08

---
title: New sessions about learning #JavaScript and #TypeScript with #GitHubCopilot 🤖
published: true
date: 2022-03-23 14:39:52 UTC
tags: EnglishPost,EnglishPost,GitHubCopilot,MicrosoftReactor
canonical_url: 
---

![banner for the session about how copilot is helping me learn JavaScript](https://brunocapuano.files.wordpress.com/2022/03/image-18.png?w=600)

Hi !

During march we are hosting several sessions around Visual Studio Code and CoPilot. And we have more sessions coming in April. This time including experiences using and learning JavaScript and TypeScript with CoPilot.

- Python ([recording](https://aka.ms/GitHubCoPilotEN1/5))
- C++ ([recording](https://aka.ms/GitHubCoPilotEN2/5))
- C# ([recording](https://aka.ms/GitHubCoPilotEN3/5))
- Markdown ([recording](https://aka.ms/GitHubCoPilotEN4/5))
- Using CoPilot to control a Roomba 🤖! ([recording](https://aka.ms/GitHubCoPilotEN5/5))
- TypeScript ([recording](https://www.youtube.com/watch?v=ynPfGlNGYZA&ab_channel=MicrosoftReactor))
- JavaScript ([recording](https://www.youtube.com/watch?v=POIIJe97jzM&ab_channel=MicrosoftReactor))

Session Registration

- March 1<sup>st</sup> : [Episode 1 | 🐍 Python](https://aka.ms/GitHubCoPilotEN1/5)
- March 8<sup>th</sup> : [Episode 2 | C#](https://aka.ms/GitHubCoPilotEN2/5)
- March 15<sup>th</sup> : [Episode 3 | C++](https://aka.ms/GitHubCoPilotEN3/5)
- March 22<sup>nd</sup> : [Episode 4 | MarkDown](https://aka.ms/GitHubCoPilotEN4/5)
- March 29<sup>th</sup> : [Episode 5 | Controlling a Roomba](https://aka.ms/GitHubCoPilotEN5/5)
- April 5th: [Episode 6, How GitHub CoPilot 🤖 is helping me to learn TypeScript](https://www.youtube.com/watch?v=ynPfGlNGYZA&ab_channel=MicrosoftReactor)
- April 19th: [Episode 7, How GitHub CoPilot 🤖 is helping me to learn JavaScript](https://www.meetup.com/Microsoft-Reactor-Toronto/events/284609940/)

![](https://brunocapuano.files.wordpress.com/2021/07/copilot-addfournumbers.gif?w=750)

## Additional Resources

- [GitHub Copilot](https://copilot.github.com/)
- [Visual Studo Code](https://code.visualstudio.com/)
- [Microsoft Learn - Scale AI in your organization](https://aka.ms/Mar1ScaleAI)
- [Microsoft Docs - An introduction to the Azure OpenAI Service](https://aka.ms/Mar1IntrotoOpenAI)
- [Microsoft Azure - OpenAI Service (PREVIEW)](https://aka.ms/Mar1OpenAIService1)

## Speaker and Co-Host

👤 **[Bruno Capuano](http://aka.ms/elbruno)**

* Blog: https://elbruno.com
* Twitter: [@elbruno](https://twitter.com/elbruno)
* Github: [@elbruno](https://github.com/elbruno)
* LinkedIn: [@elbruno](https://linkedin.com/in/elbruno)

Happy coding!

Greetings

El Bruno

More posts in my blog [ElBruno.com](https://www.elbruno.com).

* * *
Will this show the users’ local time?. Pulling data from Firestore?
Tags: node, javascript, time, firebase
Published: 2022-03-23 14:39:41

A client ask me that question, and frankly that something that i heard even amount others developers.

Because at the startup i'm working we're using Firestore as our DB.

So a make a quick recap on how to respond to this question:

TL;DR
Yes

The reason is, since Google Firestore store date & time as [Timestamp](https://github.com/protocolbuffers/protobuf/blob/master/src/google/protobuf/timestamp.proto). which follows the [RFC 3339](https://www.ietf.org/rfc/rfc3339.txt), that is a format of the [ISO 8601](https://www.iso.org/iso-8601-date-and-time-format.html).
An standard to represent date & time using [Gregorian Calendar](https://en.wikipedia.org/wiki/Gregorian_calendar)

So when we store date & time, it set by default to UTC, you can also change it.

And we're using [momentjs](https://momentjs.com/) [format method](https://momentjs.com/docs/#/displaying/format/) to set that to user's localtime.
#66 Days of Data
Tags: python, datascience, 100daysofcode, ankitgupta
Published: 2022-03-23 14:38:54

## **Learning Python**  👨‍💻

D 38 | 39 of #66daysofdata 📈

Today I have learnt OOPs Concept in Python - Class & Objects, Constructors, Destructors

Checkout 👉 [My #66 Days of Data timeline on Github](https://github.com/mrankitgupta/66DaysOfData)

Say me Hi! 
I'll be glad to connect on 
👇

**Twitter** @ [Mr_AnkitGupta01](https://twitter.com/Mr_AnkitGupta01)

**Github** @ [MrAnkitGupta](https://github.com/mrankitgupta)
HTML <datalist> Tag
Tags: javascript, html, programming, webdev
Published: 2022-03-23 14:34:40


Use super cool HTML `<datalist>` Tag to implement autocomplete feature in app without using JavaScript code.

The `<datalist>` tag specifies a list of pre-defined options for an <input> element. It is used to provide an "autocomplete" feature. It gives auto suggestions from options as per the input values.

The `<datalist>` element's id attribute must be equal to the `<input>` element's list attribute (this binds them together).

refer the below code - 

```
 <label for="city">Select the City :- </label>
 <input list="cities" name="city" id="city">
 <datalist id="cities">
    <option value="Mumbai">
    <option value="Pune">
    <option value="Delhi">
    <option value="Manipal">
    <option value="Mangaluru">
 </datalist>
```

Output of above code will be as follows when user input M - 

![datalist-output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2blocqyynmvtqylug4b7.PNG)


When user search for M the datalist will gives the suggestions from options which matches with input string.
AWS SSO...CLI...Go !!
Tags: aws, cli, sso, boto
Published: 2022-03-23 13:55:42

Recently, I have been given AWS SSO Access for my teams' AWS Accounts. Obviously, I was in need of running & checking output of aws cli commands; I was looking around for role(s) to assume, if not keys.

Well, it did strike a bit late, but nonetheless, I had SSO for aws cli. So let us begin & see how I configured cli profile with my SSO in few steps

**AWS SSO** 
AWS Service that enables creation of users for AWS accounts/services from SSO Service or brought in from Active Directory or any identity provider.

**AWS CLI**
Command Line Interface to run/execute commands against any AWS Service and view, use and analyze the output in command line. This can also be made as a script and be automated for repeated tasks

<u>Pre-requisite:</u>
1. I have Windows 10 laptop
2. Had installed AWS CLI 2  

**Steps to configure and connect to my AWS Account via SSO**
 

1. Open command line check the aws cli version
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kjhtzngwqzhv4xzscmrw.png)
2. Configure sso as below
3. Type in the SSO URL that gets assigned & shared with you for browser access
4. Enter the needed region
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nju06er3ptqovx38xfx5.png)
5. Enter the given code in the browser URL that opens up
6. Authorize the prompt
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wm0c6y38fp1jsp1t9z0o.png)
7. See the successful validation of your sso login
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fa1quhqcl5wzrp4tvl1v.png)
8. Set the default output format, profile name
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t9tot7ms8i0hb1g512g4.png)
9. Thus a new SSO Profile has been created and now start using cli commands using this profile or any other profile with different region, format as needed

Happy CLI via SSO
Do you use git status?
Published: 2022-03-23 13:45:04

---
title: Do you use git status? 
published: true
description: I've been known to use git status multiple times per commit.
tags: 
//cover_image: https://direct_url_to_image.jpg
---

What is your most used `git` command and why is it `git status`? 

Or if you aren't using `git status`, how are you surviving?
#ESP32CAM – Client Python 🐍 app to view WebServer photos 📸
Tags: englishpost, arduino, camera
Published: 2022-03-23 16:29:07

---
title: #ESP32CAM – Client Python 🐍 app to view WebServer photos 📸
published: true
date: 2022-03-23 13:44:47 UTC
tags: EnglishPost,Arduino,Camera,EnglishPost
canonical_url: 
---

Hi !

Still learning with the ESP32 CAM board.

In today’s post the scenario is simple:

- Create a client Python app to view remote photos from the ESP32 Cam Arduino device

This is a super lower quality photo, but hey, still good enough !

![remote cam view with python and opencv](https://brunocapuano.files.wordpress.com/2022/03/remote-cam-view-with-python-and-opencv.jpg?w=347)

This is a super simple Python and OpenCV app.

{% gist  https://gist.github.com/elbruno/590d0ef8db3299f158e6eff38f445d7c %}

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

Happy coding!

Greetings

El Bruno

More posts in my blog [ElBruno.com](https://www.elbruno.com).

* * *
Books on Typescript and/or React?
Tags: typescript, react, discuss, help
Published: 2022-03-23 13:38:23

While I look through the programming/coding section of my local libraries, I have found various books on JavaScript, Java, Python, Machine Learning, etc. But there doesn't seem to be any books on React or Typescript in sight. I know they exist, such as [Learning React](https://www.oreilly.com/library/view/learning-react-2nd/9781492051718/), [The Road to React](https://www.roadtoreact.com/), [Fullstack React](https://www.newline.co/fullstack-react?affiliate_id=934179955), [Programming TypeScript](https://www.amazon.com/Programming-TypeScript-Making-JavaScript-Applications/dp/1492037656?dchild=1&keywords=typescript&qid=1626049733&sr=8-5&linkCode=sl1&tag=365blottochal-20&linkId=63f72a2e7b27539dacae9e9db21343a5&language=en_US&ref_=as_li_ss_tl), [Essential TypeScript 4](https://www.amazon.com/Essential-TypeScript-4-Beginner-Pro/dp/148427010X?dchild=1&keywords=typescript&qid=1626049905&sr=8-7&linkCode=sl1&tag=365blottochal-20&linkId=b1e08244574e4dc9ff9960a36c9759b3&language=en_US&ref_=as_li_ss_tl), and [Mastering TypeScript](https://www.amazon.com/Mastering-TypeScript-enterprise-ready-applications-frameworks/dp/1800564732?dchild=1&keywords=typescript&qid=1626049733&sr=8-1-spons&psc=1&spLa=ZW5jcnlwdGVkUXVhbGlmaWVyPUEzUzUzTDFLVE1PNzlHJmVuY3J5cHRlZElkPUEwMDczNTAxMkVFMzBYWUlBSzcyTCZlbmNyeXB0ZWRBZElkPUEwOTcwMjcxSUUxVUFUSzBCRkM1JndpZGdldE5hbWU9c3BfYXRmJmFjdGlvbj1jbGlja1JlZGlyZWN0JmRvTm90TG9nQ2xpY2s9dHJ1ZQ%3D%3D&linkCode=sl1&tag=365blottochal-20&linkId=b76c374f9ed1832e7eda86973f296354&language=en_US&ref_=as_li_ss_tl). But where are they?

I like the JavaScript books I have found for the moment but am aiming to further my studies. Does anyone know a library nearby in Orange County with React and TypeScript books on hand for rent?
Integrate PayTm Payment Gateway in Wordpress
Tags: wordpress, webdev, paytm, beginners
Published: 2022-03-23 13:36:37

Payment gateway is used to accept the online payments through website, mobile apps or any other medium. WordPress allow us to integrate different types of payment gateways like Paypal, Stripe, Razorpay, Paytm etc.

## Uses of payment gateway in wordpress:

- We can use payment gateway in woocommerce for our e-commerce wordpress website
- Payment gateway can be use in membership wordpress websites.
- We can accept donations through payment gateway in our wordpress websites.
- In Booking websites we can use payment gateway to accept booking payments.
- We can also use payment gateway for services offering websites.

## Here we will integrate PayTm Payment Gateway in wordpress website.

## Integrating Paytm Payment Gateway in Woocommerce

## Step 1
Download the [woocommerce plugin](https://wordpress.org/plugins/woocommerce/) and activate it.

## Step 2
Download the [Paytm payment gateway](https://wordpress.org/plugins/woo-paytm-payment-gateway/) for woocommerce and activate it.

## Step 3
Create an account on [Paytm Business](https://business.paytm.com/) and activate your account. After activating your account you will see your credentials to integrate.

## Step 4
Login to your wordpress dashboard and go to **WooCommerce => Settings**. Under **Payments tab** you will see the **Payments methods** then click on Pay with Paytm. And now fill the form with credentials given by PayTm Business.

{% embed https://www.youtube.com/watch?v=oOnkCdxn81I %}

That’s it Now you can see the option Pay with Paytm at checkout in your website.

---

Please like share subscribe and give positive feedback to motivate me to write more for you.

For more tutorials please [visit my website](https://www.w3courses.org/tutorials/).

Thanks:)
Happy Coding:)
Career Pivot into Development Journal, Day 5: JS Practice 3 – reverseString.js
Tags: beginners, devjournal, webdev, codenewbie
Published: 2022-03-23 13:10:21

**_On to the next exercise_**...

---

##Understanding the problem
Create a function that takes a user’s string input and reverses the string. For example. `reverseString(’hello there’)` returns 'ereht olleh’

---

##Plan
- Does program have a UI? What will it look like? What functionality will the interface have? Sketch this out on paper. **_The program does not have a UI. It’ll run in the console._**
- What are the inputs? Will the user enter data or will you get input from somewhere else? **_The user will input a string when prompted_**
- What’s the desired output? **_The reverse of the string that the user inputed_**

---

##Pseudocode
```
Declare a function `reverseString` that takes the parameter `string`

Create a loop that splices out each character of the string, starting from the last character

Concatenate each character at every loop and store this in a variable called `stringReversed`

Return `stringReversed`

prompt the user to enter a string and store it in a variable called `string`

Call the function `reverseString(string)`
```

---

##Divide and Conquer
###Declare a function `reverseString` that takes the parameter `string`
```
const reverseString = function(string) {}
```

###Create a loop that splices out each character of the string, starting from the last character
```
for (i = string.length - 1; i >= 0; i--) {}
```
We set the first loop to begin at the last character of the string. `string.length` gives the number of characters in a string, but the actual index of the last character is `string.length`. We run the loop until the last character which is at index 0.

###Concatenate each character at every loop and store this in a variable called `stringReversed`
```
let stringReversed = '';

stringReversed += string[i];
```
###Return `stringReversed`
```
return stringReversed;
```

###Prompt the user to enter a string and store it in a variable called `string`
```
string = prompt('Enter a word or short sentence below');
```

###Call the function `reverseString(string)`
```
reverseString(string);
```

---

##Putting it all together
```
const reverseString = function(string) {
    let stringReversed = '';
    for (let i = string.length -1; i >= 0; i--) {
        stringReversed += string[i];
    }
    return stringReversed;
};

string = prompt('Enter any word or short sentence below');
reverseString (string);
```
If we were in an isolated island , how would you be useful
Published: 2022-03-23 13:07:07

---
title: If we were in an isolated island , how would you be useful
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---
lets assume you woke up one morning , and you find you self in an isolated island far a way from any place where there is technology , but you aren't alone in the island , a group of people are there with you ( yes similar to the LOST scenario's series ).
My Question is , how would you be useful ?
Smart contract for E-voting
Tags: solidity, opensource, blockchain
Published: 2022-03-23 12:58:27

Electoral integrity is essential not just for democratic nations but also for state voter’s trust and liability. Hence we created a project trying to solve the trust issues with the evm and postal ballots. Checkout our project and do give out stars if you find it interesting. https://github.com/GeekyAnts/sample-e-voting-system-ethereum
Why don’t DB companies or Devops, have more apps?
Tags: devops, help, react, productivity
Published: 2022-03-23 12:53:29

Like MongoDB, firebase, Prisma, Zapier, Heroku, ect...

Why haven’t they “engaged” in the mobile, DEVELOPER, atmosphere... to allow others to manage their work better or on the go? 

I wish they had apps,
But, ALLOT of companies don’t seem to really update with the times
Problemas con React Router y su Deployment en Netlify
Tags: react, netlify, vite, beginners
Published: 2022-03-23 12:52:59

Tenía problemas para que la rutas creadas con React Router V6 funcionaran en producción, intenté subir mi app en github-pages, keroku y nada... investigué y así lo pude solucionar.

**Netlify** tiene una configuración para que las request siempre redirijan al index.html, que es básicamente la raíz del problema que tenemos. Si ponemos en el navegador `http://host/clientes/nuevo`, por ejemplo,  al no existir realmente ese archivo nuevo.html en el proyecto, el servidor lanza el **Not Found**, aunque esa ruta exista en nuestro proyecto.

Para solucionarlo puedes intentar hacer lo siguiente.

1. Hagan la build de su aplicación con `npm run build`, yo usé Vite como empaquetador

2. Pueden hacer `npm run preview` para comprobar que funciona la aplicación construida para producción. 

2. El la carpeta dist que se crea al hacer el build agregen un archivo llamado `__redirects` , así sin extensión ni nada, ojo que son dos guiones bajos "_" al inicio.

3. En ese archivo pongan lo siguiente: `/*  /index.html  200` , sin más, lo guardan y listo

4. Hagan el deploy manual en Netlify, arrastran la carpeta dist y ya, con eso debería ser suficiente.

Aquí les dejo de la información en inglés al respecto: https://chrisotto.dev/react-netlify-client-side-routing/

Otra cosa... sé que si se hace el back-end en Express o similares, ya tienen opciones para que este error no pase. En mi caso no tenía ningún back construido.

Espero les ayude.

Saludos de un Noobdev

Let's keep coding

ObedSAGA
How to uncheck and check a radio button using Javascript/jQuery?
Tags: javascript, jquery, php, mysql
Published: 2022-03-23 12:49:35

Originally posted @ https://codeanddeploy.com visit and download the sample code: https://codeanddeploy.com/blog/jquery/how-to-uncheck-and-check-a-radio-button-using-javascriptjquery

[![Advanced Laravel SAAS Starter Kit with CRUD Generator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyjyev8tz3r8vi2w3on1.png)](https://1.envato.market/5g5QAn)

[Advanced Laravel SAAS Starter Kit with CRUD Generator - GET YOUR COPY NOW!](https://1.envato.market/5g5QAn)


In my previous post, I share how to uncheck the radio button now I will share with you how to switch the radio button to uncheck and check using the click button event in javascript/jquery. To see the sample out kindly see below.


**Before**


![how-to-uncheck-and-check-a-radio-button-using-javascriptjquery](https://ecn-storage.s3.us-west-2.amazonaws.com/articles/how-to-uncheck-and-check-a-radio-button-using-javascriptjquery-1m9kq4sJHGx980.webp?ctm=1629025272)


**After**

![how-to-uncheck-and-check-a-radio-button-using-javascriptjquery](https://ecn-storage.s3.us-west-2.amazonaws.com/articles/how-to-uncheck-and-check-a-radio-button-using-javascriptjquery-B5GBHGXKwzx980.webp?ctm=1629025318)

**Example code**

```php
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>How to unchecked a radio button using JavaScript/jQuery?</title>
</head>
<body>
	<h1>How to unchecked a radio button using JavaScript/jQuery?</h1>

	<form id="form1">
		

		<p><b>Current Status</b></p>
		<input type="radio" value="1" name="status" class="status" checked> Active

		<br/><br/>

		<button type="button" id="btnSubmit">Deactivate</button>
	</form>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

	<script type="text/javascript">
		$(document).ready(function() {

			$("#btnSubmit").on("click", function() {

				var button = $(this);
				var status = $(".status");

				if(status.is(":checked")) {
					status.prop("checked", false);
					button.html("Activate");
				} else {
					status.prop("checked", true);
					button.html("Deactivate");
				}
				
			});
		});
	</script>
</body>
</html>
```

I hope this tutorial can help you. Kindly visit here https://codeanddeploy.com/blog/jquery/how-to-uncheck-and-check-a-radio-button-using-javascriptjquery if you want to download this code.

[![Advanced Laravel SAAS Starter Kit with CRUD Generator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyjyev8tz3r8vi2w3on1.png)](https://1.envato.market/5g5QAn)

[Advanced Laravel SAAS Starter Kit with CRUD Generator - GET YOUR COPY NOW!](https://1.envato.market/5g5QAn)

Happy coding :)
Import Node packages in React and React Native.
Tags: javascript, node, react, docker
Published: 2022-03-23 12:46:25

Do you wish to use packages that are typically used on the backend in your frontend app? Well, you can do it with the help of Browserify.

## What is Browserify?

It’s a JavaScript bundler that allows us to use node modules to be compiled to use in the browser. It can also be used to keep track of your own and third-party code.

## How do I use it?

In a nutshell, you pass browserify your custom code or an external library, and it takes care of the rest.

Now, for instance, there is a need for a third-party package xml-js in your web app, then you need to follow these sets.

Create a file, say xmlConverter.js

```js
const convert = require(‘xml-js’);
module.exports = convert;
```

Next, pass this file to browserify with -o option. This -o is used to tell which file will contain the complied code.

```sh
$ browserify xmlConverter.js -o xmlComplied.js
```

This file can now be utilized in your web application. This, however, will not function with native programs. [Aakash N S](https://hackernoon.com/using-core-node-js-modules-in-react-native-apps-64acd4d07140) gives detailed instructions on how to do so, or you can continue reading if you don't want to delve into depth. I've built a script that will take care of everything for you, and it will work for both web and mobile apps.

**Using Docker Run:**   [ (link) ](https://hub.docker.com/r/darylaranha/node-to-app-compiler)
```sh
$ cd <project_directory>
$ docker run -it --rm -v "${PWD}":/app node-to-app-compiler:v0.0.1 <option> <package_name>
```
*Example:*
```sh
$ docker run -it --rm -v "${PWD}":/app node-to-app-compiler:v0.0.1 xml-js
```

**Using Terminal:**   [ (link) ](https://github.com/DarylAranha/node-to-app-compiler)

Clone this [repo](https://github.com/DarylAranha/node-to-app-compiler) and run the shell script.

```sh
$ chmod +x compiler.sh
$ ./complier.sh <options> <package_name>
```

*Example:*
```sh
$ ./complier.sh xml-js
```
**Options:**

–local: This parameter tells the script whether you're looking for a node package that comes pre-installed. This script tries to install the package using npm by default.

## References

- [Browserify](https://browserify.org/)
- [Browserify Handbook](https://github.com/browserify/browserify-handbook)
- [Using Core Nodejs Modules In React Native Apps](https://hackernoon.com/using-core-node-js-modules-in-react-native-apps-64acd4d07140)
- [React Native](https://reactnative.dev/)
- [ReactJs](https://reactjs.org/)