teleren/devto huggingface dataset:
Obtén GRATIS estos servicios con tu cuenta de estudiante.
Tags: javascript, webdev, beginners, react
Published: 2022-03-12 17:54:12

Este post va para los usuarios que van iniciando su camino dentro de el mundo de la programación. 

En la universidad/preparatoria nos proporcionan un correo institucional _@institucion.edu_ que pasaría, si les digo que pueden usar ese correo para obtener desde cursos, dominio web y herramientas que para la comunidad tech tienen costo. 

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

[GitHub Student Developer Pack](https://education.github.com/pack) es un sitio web donde te puedes registrar con tu correo institucional y acceder a plataformas con las cuales armaras tu stack de desarrollador!


Entre los servicios a destacar son: 


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

[Canva](https://www.canva.com/es_mx/q/pro/?utm_source=google_sem&utm_medium=cpc&utm_campaign=REV_MX_ES_CanvaPro_Branded_EM&utm_term=REV_ES_MX_CanvaPro_Branded_Canva_EM&utm_content=358_control&gclid=CjwKCAiAprGRBhBgEiwANJEY7IeWIFnBFArQugyluQ8KxLYkImQK-DGqKWxBFvhLpq0jsi70xrEj4BoC7V4QAvD_BwE&gclsrc=aw.ds)
La plataforma favorita del Social Media, aqui puedes hacer uso de plantillas para lo que necesites.


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

[Namecheap](https://www.namecheap.com/?gclid=CjwKCAiAprGRBhBgEiwANJEY7HCUzMbPvnPXiDq9bg3nYNG8tBkvL3eRwQU5Y551sbpLjldj2JdzsBoCUycQAvD_BwE)
En esta web podrás generar tu dominio gratuito para que empieces probar tus apps en un entorno público.


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

[JetBrains](https://www.jetbrains.com/)
De los mejores IDE’s para programar, tendrás acceso a todas las herramientas de su catálogo por un año completo, con la opción de renovar (si en dado caso continuas siendo estudiante)


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

[FrontendMasters](https://frontendmasters.com/)
Plataforma online de cursos para aprender a programar desde básico hasta experto.


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

[GitKraken](https://www.gitkraken.com/)
Es una app para hacer visual tu entorno de control de versiones con la facilidad de poder gestionar tus cuentas en las diversas plataformas que existen en línea para control de versiones.

Estas son algunos de los servicios que tienen gratis por tener una cuenta institucional.

Espero te haya gustado este POST y si tienes alguna duda, no dudes en comentar.

_Tu jewel kiin_ (Hasta otro día en lengua maya)
Best Discord Dev Communities to Join.
Tags: opensource, webdev, discord, devjournal
Published: 2022-03-12 17:34:43

# Wait, what's **discord**?

Discord is a group-chatting platform that was originally built for gamers, but has since become a general platform for many other kinds of communities, especially of developers. 

And when it comes to communities, there's virtually no competition to how close knit tech/dev communities are! Be it opportunities, resources, help, tech-talks or events/sessions; discord tech communities are a must to join and thus, here's my pick on the **best Dev communities** to join. 

## I) Mintbean

Mintbean is an online makerspace for tech professionals on discord which consists of channels spanning across algorithms, hardware, security, resources, design, job opportunities and professional chat among others.

## II) SAWO Community

A community by SAWO Labs, SAWO community is your one stop shop for resources, job/internship opportunities, content sharing, resume+github reviews, events+sessions, tools, discussions and much more!

Join here: https://discord.gg/XemmJJb3tA

## III) StartLadder Learning Community

Another discord community covering jobs/opportunities, competitions, resume reviews, resources, career advice, LinkedIn reviews and networking among others; while being one of the most active servers to be a part of!

## IV) Cuvette Tech

A community by an internship opportunity organization that covers much more including profile reviews, resources, AI-ML, UI-UX, tech help and fun+insightful activities.

Join here: https://discord.gg/UhqF6cnNGN

## V) DevCord

An official discord partner community that covers hardware, HTML-CSS, JavaScript-TypeScript, PHP, Java, Python, UI-UX, system languages, career development, workshops, gaming, memes and much more!

## VI) Other worthy mentions

- Lazy Developer
- Python
- Replit
- Hashnode- Programmer’s Hangout
- The Coding Den
- Nodeiflux
- TensorFlow
- SpeakJS
- CodeSupport
- The Poopers Family
- Local Host
- Reactiflux
- Programmer Humor
- The Coding Den
Golang WASM Async Function
Tags: go, beginners, webassembly
Published: 2022-03-13 09:45:28

---
title: Golang WASM Async Function
published: true
date: 2022-03-12 17:00:14 UTC
tags: golang,beginners,wasm
series: "Sunday Snippet"
canonical_url: https://clavinjune.dev/en/blogs/golang-wasm-async-function/
---

 ![Sunday Snippet #8 golang WASM async function](https://clavinjune.dev/img/sunday-snippet/image.png "Sunday Snippet #8 golang WASM async function")

```go
package main

import (
	"fmt"
	"syscall/js"
)

type fn func(this js.Value, args []js.Value) (any, error)

var (
	jsErr     js.Value = js.Global().Get("Error")
	jsPromise js.Value = js.Global().Get("Promise")
)

func asyncFunc(innerFunc fn) js.Func {
	return js.FuncOf(func(this js.Value, args []js.Value) any {
		handler := js.FuncOf(func(_ js.Value, promFn []js.Value) any {
			resolve, reject := promFn[0], promFn[1]

			go func() {
				defer func() {
					if r := recover(); r != nil {
						reject.Invoke(jsErr.New(fmt.Sprint("panic:", r)))
					}
				}()

				res, err := innerFunc(this, args)
				if err != nil {
					reject.Invoke(jsErr.New(err.Error()))
				} else {
					resolve.Invoke(res)
				}
			}()

			return nil
		})

		return jsPromise.New(handler)
	})
}

func argsEvenOdd(this js.Value, args []js.Value) (any, error) {
	if len(args)%2 == 0 {
		return nil, fmt.Errorf("#args is even")
	}
	return "#args is odd", nil
}

func main() {
	js.Global().Set("argsEvenOdd", asyncFunc(argsEvenOdd))
	select {}
}
```

Test it with

```javascript
argsEvenOdd(1, 2)
		.then(res => console.log(res)) 
		.catch(err => console.error(err)) // will be catched

argsEvenOdd(1)
		.then(res => console.log(res)) // will be logged
		.catch(err => console.error(err))
```
How to easily detect which component is re-rendering too often (without installing additional tools)
Tags: javascript, webdev, tooling, react
Published: 2022-03-12 16:56:29

Who has never had a problem with re-rendering components too often, cast the first stone. It happens — it’s a fact. Especially when you are a junior or just entered the frontend world. Without experience that bugs are hard to detect — everything looks fine but the browser is working hard to repaint, repaint and repaint elements on the page. Fortunately, Chrome DevTools offers a way to easily found them. You just need to follow these steps:

1. Open Chrome browser
2. Go to page you want to test
3. Open Chrome Dev Tools (ctrl + shift + I on Linux/Windows or cmd + shift + I on Mac)
4. Click 3 dots on the right side
5. Choose Rendering
6. Check the first checkbox titled Pain flashing there.

{% youtube LIbmf-IQaR8 %}

Thanks to that all repainted areas will be highlighted in green, so you can interact with a webpage and check if everything works are designed. Piece of cake! You don’t have to worry about having repainting problems on your webpage now.
C++ dasturlash tili | 3
Tags: cpp, uzbek, beginners, programming
Published: 2022-03-12 16:06:29

## 1.Sayt nomi 
Saytga o'tish uchun [link](http://ojilmhub.uz) ustiga bosing!
## 2.Ro'yhatdan o'tish
Ro'yhatdan o'tish uchun yuqori o'ng burchakda register bo'limidagi hamma shartlarni bajargandan so'ng siz problems bo'limiga o'tasiz. 
Siz u yerdagi masalalarni `c/c++/python2/python3/java/golang` tillarida bajarishingiz mumkin.
## 3. Masalalar 
- Masalalar qiyinlik darajasi asta-sekinlik bilan ortib boradi.
- Masalalar `Low,Mid,High` darajalarda.
## 4. Misol
Misol uchun `problems` bo'limidagi 1-misol
U yerda 2 raqamidan to'rtburchak yasashni yozishgan
- 1-qatorda 6 ta 2 soni
- 2-3-qatorlarda boshida 1 dona 2; 4 dona bo'sh joy va 2 soni
- 4-qatorda 6 ta 2 soni
```cpp
#include <iostream>
using namespace std;
int main(){
cout << "222222" << endl;
cout << "2    2" << endl;
cout << "2    2" << endl;
cout << "222222" << endl;

return 0;
}
```
- Agar siz dasturda `biror-bir so'z yoki raqam va shunga o'xshash narsalarni chiqrmoqchi bo'lsangiz qo'shtirnoq ichida yozishingiz kerak`. Masalan:
```cpp
cout << "Hi my name Abdumutal!" << endl;
``` 
Yana code oxirida `endl;` qolib ketmasin
Reading Env files in React
Tags: javascript, webdev, react, beginners
Published: 2022-03-12 16:05:45

React is a very popular framework, which most of us use today. Sometimes we want to use environment variables in our application but we don't know how to go about it.

Environment variables are used to store sensitive information. In our `React` application we can have environment variables and also when deploying, environment variables can be found on the server.

**THIS IS HOW TO USE ENVIRONMENT VARIABLES ON YOUR MACHINE**

## `.env` SETUP


To define permanent environment variables in our React application, we need to setup our `.env` file.

- create a `.env` file in the root of your React application


- create custom environment variables beginning with `REACT_APP_` just like the example below.

> NOTE: it must start with **`REACT_APP_`**

```
// ENV FILE
REACT_APP_API_KEY=abcdefgh
```

With this we are done setting our `.env` file, now we have to read this `REACT_APP_API_KEY` in our project.


## READING `.env` FILES

In our react app, we have [process.env](https://nodejs.org/dist/latest-v8.x/docs/api/process.html#process_process_env) available to us. So to read `REACT_APP_API_KEY` we do 

```
process.env.REACT_APP_KEY
```
if we set `process.env.REACT_APP_API_KEY` to a variable and log it out

```
const apiKey = process.env.REACT_APP_API_KEY

console.log(apiKey)
//abcdefgh
```


With this in place, we now know how to read `.env` files. This won't work immediately if we try it, for it to work we have to do one last thing

> RESTART YOUR DEVELOPMENT SERVER

If you miss to restart you dev server, it won't work. Also if you add or change anything in your `.env` file, for you to use it you have to restart your dev server.
That's it lads, tell me what you think in the comments section.
How To Install Metasploit6 In Android With Out Root?
Tags: mobile, android, git, cybersecurity
Published: 2022-03-12 15:56:36

## What is Metasploit?


Metasploit contains a lot of tools that allow you to test vulnerabilities and execute attacks on another system. it is one of the most used penetration testing tools. You can basically remotely access the victim’s data.

Metasploit is not just a single tool. It is a complete framework. It is a Ruby-based, modular penetration testing platform that enables you to write, test, and execute exploit code, it is flexible and extremely robust and has tons of tools to perform various simple and complex tasks. 

## How to install  Metasploit Framework 6 in Android?

Here you need to install few files to set up metasploit6 in android

## Pre-requirements

- First you need to download an app called [Termux](https://f-droid.org/en/packages/com.termux/)
here you can download it from F-Droid but not from playstore(outdated).


## [Click Here](https://f-droid.org/en/packages/com.termux/)  
To download termux from F-droid.

- Your android version should be more than 5.0

- Free space of 2GB on your device.

- Good Internet 

[Github Repo](https://github.com/gushmazuko/metasploit_in_termux) you can visit this github repo for more details.

- now open Termux app and type the followimg commands on it.

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



```
termux-setup-storage

``` 
By this command  it will ask the storage permission, so you need to give this permission by allowing the permission.

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

Now you will get a popup like this click on  allow and paste these following  commands in termux

It will update  all the packages in the termux app.

```
apt update -y
```

It will upgrade all the packages in the termux app.
```
apt upgrade -y
```
we are installing 4 packages using a single command.

```
pkg install wget curl openssh git -y
```


```
pkg install ncurses-utils -y
```


Now there are two ways to insatll metasploit 

## 1.Automatic installation 

for this you can directy install the metasploit directly by pasting the following command

```
source <(curl -fsSL https://kutt.it/msf)
```




## 2 Manual Process


```

wget https://github.com/gushmazuko/metasploit_in_termux/raw/master/metasploit.sh


chmod +x metasploit.sh

./metasploit.sh
```
- Now sit back and let the termux install the Metasploit on your Termux properly it can take a lot of time between 20-60 mins. BAsed on your device and internet speed.

- After complete installation type the following command to run metasploit

## Launch metasploit

```
msfconsole

```
Now you can find like this or may be with different banner



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

To change the banner use this command 

```
banner
```
Now you succesfully installed Metasploit6 in android
C++ dasturlash tili | 2
Tags: it, beginners, cpp, uzbek
Published: 2022-03-12 15:55:16

##Salom!
Siz C++ haqidagi barcha malumotlarni `w3schools` dan olishingiz mumkin [link](https://www.w3schools.com
) ni ustiga bosangiz u yerda hamma dasturlash tiliga oid darslar mavjud u yerda `css; html; c/c++; python; java; php; java/javaScript ...`  va boshqa dasturlash tillarini o'rganishingiz mumkin.
## C++ asoslari
C++ da `code` yozish avvalo siz:
- Kodni tahrirlash va kompilyatsiya qilish uchun `IDE (Integrated Development Environment)` ishlatiladi.

- Mashhur IDE-larga `Code::Blocks, Eclipse va Visual Studio` kiradi. Bularning barchasi bepul va ular `C++ kodini tahrirlash va disk raskadrovka qilish uchun` ishlatilishi mumkin
- Agar siz bularni o'rnata olmasangiz [link](replit.com) ustiga bosing.
## C++ code
C++dagi eng osson `code` mana shu:
```cpp
#include <iostream>
using namespace std;
int main(){
cout << "Hello world!" << endl;
return 0;
}
``` 
Bu yerdagi mana bu narsa 
```cpp
#include <iostream>
```
`C++ tili kutubxonalari hisoblanadi`
Bu esa
```cpp
cout << "Hello world!" << endl;
```
bu esa dastur. 
- `endl` bu `endline` hisoblanadi!
#66 Days of Data
Tags: python, datascience, 100daysofcode, ankitgupta
Published: 2022-03-12 15:49:06

## **Learning Python**  👨‍💻

D 28 of #66daysofdata 📈

Today I have learnt Python Data Types - Numbers, Sequence Type, Dictionary, Set, Type Conversion ✌️

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)
C++ dasturlash tili | 1
Tags: it, beginners, cpp
Published: 2022-03-12 15:24:36

##C++ tili haqida
 BIz avvalo `C++` dasturlash tili nima ekanligini bilib olishimiz kerak.
- C++ - bu mashhur dasturlash tili.

- `C++` tili kompyuter dasturlarini yaratish uchun ishlatiladi
- C++ - bu `ob'ektga yo'naltirilgan til` va ba'zi tushunchalar yangi bo'lishi mumkin. Zarur bo'lganda tanaffus qiling va kerak bo'lganda ko'p marta misollarni ko'rib chiqing
## C++ nima?
- C++ - bu yuqori unumli ilovalar yaratish uchun ishlatilishi mumkin bo'lgan o'zaro faoliyat platformalar tili.

- C++ `Bjarne Stroustrup` tomonidan C tilining kengaytmasi sifatida ishlab chiqilgan .

- C++ dasturchilarga tizim resurslari va xotira ustidan yuqori darajadagi nazoratni beradi.

- Til `2011, 2014 va 2017 yillarda  C++11, C++14 va C++17` ga 3 ta katta marta yangilandi
## Nima uchun C++ dan foydalanish kerak
- C++ `dunyodagi eng mashhur dasturlash tillaridan biridir.`

- C++ tilini hozirgi operatsion tizimlarda, `foydalanuvchi grafik interfeyslarida` va o‘rnatilgan tizimlarda topish mumkin.

- C++ - bu `ob'ektga yo'naltirilgan dasturlash tili` bo'lib, u dasturlarga aniq tuzilma beradi va `kodni qayta ishlatish` ga imkon beradi va `ishlab chiqish xarajatlarini kamaytiradi.`

- C++ `portativ hisoblanadi` va `bir nechta platformalarga moslasha oladigan ilovalarni ishlab chiqish uchun ishlatilishi mumkin` 

- C++ - `bu qiziqarli va o'rganish oson!`

- C++ tili `C#` va `Java` tillariga yaqin boʻlgani uchun dasturchilar uchun `C++ tiliga yoki aksincha oʻtishni osonlashtiradi`
WIFI PASSWORD HACKING FOR BEGINNERS WITH KALI LINUX
Published: 2022-03-12 15:19:34


There are many ways to attack WiFi networks depending on:

- The type of encryption

- Default settings  

- Number of connected clients

In this article we’ll focus on **wifite** 
Wifite tool automates all these processes making wifi hacking a piece of cake.

**WHAT IS WIFITE?**
Wifite is a powerful hacking tool that allows the hacker to choose a specific network to attack and let the script choose the best strategy for each network
Wifite is developed by Derv82 and maintained by kimocoder

**GETTING STARTED**
The tool is pre-installed in kali linux and intuitive to use.

Follow the steps:

**_Step 1:open wifite _**

You can open the wifite tool from the application menu or from the terminal
Using application menu search for wifite and click on the tool to open
You can also open the terminal and type the following command:
`sudo wifite`

  The following interface should appear

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

**Step 2: select the target to attack**

Once you open wifite it will start scanning for WiFi networks 
Press Ctrl+c to stop 


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

Ii.    Choose the number of the WiFi network you wish to attack

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

**Step 3: sit back and let the tool do the hacking**

Here the attack begins. Wifite uses the following methods according to the network targeted:
WPS PIN attack
PMKID capture
WPS Pixie-Dust attack
WPA Handshake capture
Once finished you will see the following 


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


The password will also automatically be saved in a cracked.json or cracked.txt file.and you can navigate to the file in the terminal and type the following command to view saved cracked passwords:


`Cat cracked.json` or `cat cracked.txt`

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

After hacking the wifi you’ll realise that you cannot use your wireless network.This is because your device is still in monitor mode.To disable monitor mode you need to type the following command in the terminal 
`airmon-ng stop wlan0mon`
Comment a line in HTML
Tags: html
Published: 2022-03-12 15:01:47

However the syntax was developed by Microsoft to allow the inclusion of conditional code, HTML or CSS. This is what Microsoft calls "Conditional Comments".

And it gets more complicated. They are only recognized by Internet Explorer, since version 5, but since they are used to adapt the code according to the version of Internet Explorer, the fact that they are ignored by other browsers is irrelevant.


Conditional code
By placing code in a conditional comment, it is made accessible or not to the browser rendering engine depending on the condition.

There are two types of conditional comments, those whose content is ignored by browsers that do not interpret the conditional expression, and those whose content on the contrary will always be taken into account.

Comment whose content should be ignored by other browsers
For Internet Explorer, whether the content is taken into account depends on whether the condition is satisfied.

<! - [if  expression ]> 
      HTML  
<! [endif] ->
What other browsers see:

<! - [if  expression ]>
     HTML
 <! [endif] ->
Anything between the opening and closing tags is a comment and should be ignored.

Comment whose content must be taken into account by other browsers
In the case of Internet Explorer, the content will be taken into account only if the condition of the expression is met.

<! [if  expression ]> 
     HTML  
<! [endif]>
What other browsers see:

 <! [if  expression ]>  
    HTML  
<! [endif]>  
The opening and closing tags are not part of the HTML standard, they are ignored and therefore the content is taken into account.

HTML, JavaScript, CSS
The content can be any HTML code. It can be CSS code introduced by the
Make 2 columns in HTML
Tags: html, column
Published: 2022-03-12 15:01:00

HTML is the language in which the content of web pages is defined. Basically, it is a set of labels that are used to define the text and other elements that will make up a web page, such as images, lists, videos, etc.

HTML was originally created for informational purposes with text and some images. It was not believed that it could be used to create a multimedia space for entertainment and consultation (which is currently the web), so HTML was created without meeting all the possible uses that would have already been given to it. all groups of people who would use it in the future. However, despite this poor planning, if changes have been incorporated over time, these are HTML standards.

CSS is powerful enough to mimic outdated HTML tags. For example, you can create columns in CSS using the column-count property. This can be very useful for the layouts of a site, but also to divide long texts into columns.

In this tutorial we will see how to create columns with column-count.

Step 1 HTML
Create an HTML layout with the code below. Replace "Your text goes here" with your own text. This can be done in a Drupal node, a WordPress post or a Joomla article or simply where you need it.

Note that I am using the "content" class for the div. We'll use it to create the CSS selector in the next step.

Step 2 the CSS
In your CSS file, add the following code. This code will divide the text into 2 columns:

.content {
column-count: 2;
-moz-column-count: 2;
-webkit-column-count: 2;
}
The prefixes in the CSS above are intended for compatibility with specific browsers:

-webkit- for Chrome, Safari and Opera
-moz- for Firefox
Step 3 the space between the columns
You can define a space between columns by adding the property "column-gap"

.content {
column-count: 2;
-moz-column-count: 2;
-webkit-column-count: 2;
column-gap: 60px;
-moz-column-gap: 60px;
-webkit-column-gap: 60px;
}
Change the 60px according to your needs