teleren/devto huggingface dataset:
Best Github Repository for ReactJS
Tags: javascript, react, github, webdev
Published: 2022-02-20 10:39:38



1. [React Developer Roadmap](https://github.com/adam-golab/react-developer-roadmap)
Roadmap to becoming a React developer

2. [Amazing React Projects](https://github.com/jiwonbest/amazing-react-projects)
Collection of amazing open source React & React native projects

3. [Awesome React Components](https://github.com/brillout/awesome-react-components)
Curated List of React Components & Libraries.


4. [Learning React](https://github.com/MoonHighway/learning-react)
The code samples for Learning React by Alex Banks and Eve Porcello, published by O'Reilly Media


5. [30 Seconds of React](https://github.com/30-seconds/30-seconds-of-react)
Short React code snippets for all your development needs
JavaScript puzzle - get length of an Array without using length
Tags: javascript, puzzle, array, beginners
Published: 2022-02-20 10:33:36

Write a function `fn` that returns the length of an Array as Number.

Constraints:

- no use of `length` property
- `size` and length/size indicating properties of other data structures are also not allowed

Tips:
- try to avoid the comments section, as the solutions are often posted there
- it's way easier than you might think (which is why it's tagged `#beginners`)
- read about Array fundamentals
- don't expect the solution to be something that you should ever use in production code

Tests:

```js
console.assert(fn([]) === 0)
console.assert(fn([1]) === 1)
console.assert(fn(['1']) === 1)
console.assert(fn(['1', 2, {}]) === 3)
```

Bonus:

This is all achievable by using 20 characters (inkl. function declaration) overall.
Random Code Generator
Tags: php
Published: 2022-02-20 10:33:09

Wanted a nice and simple PHP class which could generate random codes. After looking at multiple libraries I found that sometimes it's best done yourself.

The final class can either generate a single code or an array of codes based on the parameters you set.

[https://github.com/swindon/code-generator](https://github.com/swindon/code-generator)


**Example**
Generates 8 character long string
```php
(new CodeGenerator)->generate(8);
// output: 4CF9O7XP
```

---

### Show some support!
[Buy me a coffee](https://www.buymeacoffee.com/scottwindon)
A Complete, Interactive Guide to CSS Flex Box
Tags: css, tutorial, beginners, webdev
Published: 2022-02-20 10:25:11

In the past, making HTML elements appear next to each other was a tricky proposition. It usually relied on floats, often resulting in some strange behaviours. Today, we have flex box, which is widely accepted as the standard way to do this. Flex box lets us align content in columns or rows, while automatically adjusting its size based on how we set it up. Below, you can view the complete guide to CSS flex box, along with a generator to let you generate the layout style you want for your container elements.
## CSS Flex Box Generator
{% codepen https://codepen.io/smpnjn/pen/jOazqZE %}
    
## Properties for Containers
For your reference, here are the individual properties and the effects they have on a flex box configuration. For all of these examples, except flex-wrap itself, we use `flex-wrap: wrap;`.

### justify-content
This justifies content along the flex-direction axis.
{% codepen https://codepen.io/smpnjn/pen/PoORNaL %}

### align-items
This aligns the content along the axis perpendicular to the flex-direction axis for a single row of items.
{% codepen https://codepen.io/smpnjn/pen/BamrKVe %} 

### flex-direction
This sets then main axis of the flex, whether that is vertical (column) or horizontal (row).
{% codepen https://codepen.io/smpnjn/pen/bGYvpKX %}

### align-content
This sets the position for all rows in a much larger box.
{% codepen https://codepen.io/smpnjn/pen/rNYdery %}

### flex-wrap
This sets the position for all rows in a much larger box.
{% codepen https://codepen.io/smpnjn/pen/eYeMZjg %}

## Properties for Items
Although you can affect entire collections of items with flex box, you can also call out individual items and apply styles to them in particular. Below, the examples show you how to do that.

### order
When applied to an item, it gives it an order relevant to other items around it. An order of 9999 will go to the end of the flow direction. Think of this like z-index, but for flex box.
{% codepen https://codepen.io/smpnjn/pen/ZEaxWjB %}

### flex-grow
Dictates the alignment of a particular item along the perpendicular axis to flow-direction.
{% codepen https://codepen.io/smpnjn/pen/MWOVyBj %}

### align-self
Dictates the alignment of a particular item along the perpendicular axis to flow-direction.
{% codepen https://codepen.io/smpnjn/pen/zYPWqLz %}

## Conclusion
I hope you've enjoyed this guide on flex box, and I hope it's been useful in fully explaining how flex box works. If you want to see something similar for CSS grid, [see the link here](https://fjolt.com/article/a-guide-to-css-grid).
Python Developer
Tags: python
Published: 2022-02-20 10:09:54

What all should i learn to become a python based developer in 2022....

Is it good to switch from JS to Python...

Why python is better than JS
...Need help!

.......

............
Linkedin: 'https://www.linkedin.com/in/antony-sebastian-147ab71a7/'

Twitter: 'https://twitter.com/Antony97880260'
Task force 5.0 week 1 Experience 
Published: 2022-02-20 09:40:25

first of all, it was a very interesting, enjoyable, and educational moment during this first week as a Taskforce
on day one was really amazing where we had to move an egg at the first time we didn't make it but we made it after it was really fun, this helped me to find a solution in a very short time and deliver the answer in a teamwork way.
the day after  we started studying ourselves through 16personalities where it was like seeing myself through  my strength and weakness and even people we have the same type ( protagonist ) like Obama and others  and also it was a very challenging day with Codewars  katas as its name say sure its war through code where we got four questions to solve and very challenging but honestly was a very good way to  think and even way of opening my mind  we ended up seeing about  an agile methodology 
Day three was entering in a new world where we sow agile methodology and its's framework scrum me I had the experience of using waterfall methodology but I sow that in agile methodology is the best way to communicate with the client and to make changes and after we try to know how to do well remotely call, we sow tips to make a good remote call
on our day four we get our session remotely seeing about our 16peronalities  where we presented remotely and even we get to prepare our first Friday presentation about an agile methodology  
our Friday was the joyful and happiest day as we did our first presentation it was a very good experience and educational through our team and after we enjoyed having fun playing games and even celebrating out teammate birthday but was really amazing.
all in all, eek one was very educational and motivational and of course lenses in teams best way to pass all challenges.
My First week in Taskforce 5.0 at Awesomity Lab and Code of Africa.
Tags: awesomity, codeofafrica, taskforce
Published: 2022-02-20 09:34:01

A week spent at Awesomity Lab and Code of Africa is unlike any other week. It's much more fantastic when you're exposed to a positive working atmosphere. In my first week, I learned a lot about collaboration, soft skills, and communication skills, among other things.

We began with a fun game in which we had to move an egg with a ring attached to the threads and position it on top of an open bottle; the first time we failed because everyone did their own thing, but the second time we succeeded because we worked together. As I discovered in this game, working together is helpful because it brings together strength and ideas.

We worked on the [16 personalities](https://www.16personalities.com), using psychologist-defined questions to identify our personalities and roles.
We later partnered up since we had similar roles and wanted to focus on public speaking and share what we had in common as a pair. 
Miro, a tool I had never heard of before, impressed me with how well it facilitates teamwork in design and strategic planning.

Many firms are adopting the Agile process because it makes it simple to gain a thorough grasp of a project and give small tasks to team members to work on. We observed that learning a new technology is easier, and that developers work directly with clients to keep them informed of progress.

At the end of the week, we were to put together a little presentation in groups and apply what we had learned to a project of our choosing.

To recap, I had a great week; I planned to acquire coding skills, but I discovered that a developer requires not only coding abilities, but also other soft skills such as communication and presentation, to mention a few.
Starting A Clone Project 1
Tags: javascript, react, career, github
Published: 2022-02-20 09:29:31

My academic course is coming to an end soon, and it's time to prepare myself for getting a job. One crucial step is of course to have a portfolio with "excellent" projects. Our school advisor highly recommends we include a clone project. 

There seems to be several types of clone projects, but basically a clone project is creating a copy of an existing webpage. It's not like cloning somebody's git repository, and pushing it to yours and deploying it as it is your project. No. Being able to create an exact same layout (or even functions) can be a proof that you can code.

One of my classmates asked me to do a clone project together. She suggested that we create one with a few more friends and practice using GitHub. How smart! I've wanted to learn about pulling, pushing, merging, and solving conflicts on GitHub, but I need someone to do so. A clone project is not that difficult, so combining it with practicing GitHub would definitely be a perfect idea.

This blog is going to be a learning journal. I'll keep track of what steps we take, what difficulties I have, what solutions I find, and the like.

Through this project, I really hope that I'll acquire the skills of coding, GitHub, and teamwork.
Track everything with qrforeverything
Tags: programming, showdev, news, javascript
Published: 2022-02-20 09:12:48

We have created a product (in MVP stage as of now), which will help you track everything which you own.

http://www.qrforeverything.com

# What

When we misplace our cellphone, we can make a phone call to trace it back, but sadly that's not an option in every other belonging. `qrforeverything`, tries to solve for this very problem of providing digital identity to offline (non-electronics) items. The QR code can help identify the real owner of the product with a simple QR scan. The `qrforeverything`, stores only very limited information to identify the real verified user and help connect with them. Apart from the basic details of Name and Mobile Number, `qrforeverything` supports custom UI with custom details to be attached to the QR code.

# Why

At times even if someone wants to figure out the real owner of an item, there is no straight way, `qreverything` solves for this. The product can be used for N number of use cases, few right off the bat use cases can be:
- Figure out the real owner of found item.
- Get info on mid/small size manufacturer's product which we consume.

# How

To start using `qrforeverything`, one simply need to:
1. Print The QR.
2. Cut out the QR squares. 
3. Stick it on the belongings.
4. Scan to find the details of owner. 

![Group 11](https://user-images.githubusercontent.com/1469191/152691352-ca58ecf0-befa-4455-b65a-9ac719843e06.png)

![scan_pic](https://user-images.githubusercontent.com/1469191/154830586-fb963846-2672-4645-bdfb-2673b8a7be02.png)

**P.S:** As of now we are only trying this out in India Mo: +91.., will really appreciate any constructive feedback.
LeetCode: Count and Say
Tags: java, string, programming, beginners
Published: 2022-02-20 09:12:30

[Question link](https://leetcode.com/problems/count-and-say/)

It's a **MEDIUM LEVEL** question. At first I found is tough but after going through the question thrice, I understood the concept.

So, before moving on to my question, I just wanna tell that this question can be done using 2 methods-
(1) _Recursion_  (Optimize method)
(2) _For-loop_

For solving this question, I haven't used recursion. Instead I used `for-loop` method as it helped me in understanding the concept more clearly.

**JAVA CODE**
```
import java.util.*;
public class Count_and_Say {
    public static void main(String[] args) throws Exception
    {
        Scanner sc=new Scanner(System.in);
        System.out.print("Enter the value of n: ");
        int n=sc.nextInt();
        String s=countAndSay(n);
        System.out.println(s);
    }
    public static String countAndSay(int n) {
        String str="1";
        
        for(int i=2;i<=n;i++)
        {
            StringBuilder temp=new StringBuilder();
            char prev=str.charAt(0);
            int counter=1;
            for(int j=1;j<str.length();j++)
            {
                char ch=str.charAt(j);
                if(ch!=prev)
                {
                   temp.append(counter).append(prev);
                    prev=ch;
                    counter=1;
                }
                else
                {
                    counter++;
                }
            }
                temp.append(counter).append(prev);
                str=temp.toString();
            }
        
        return str;
    }
}
```
My first-week experience at a boot camp: Task-Force 5.0
Published: 2022-02-20 09:12:10

Introduction.

Do you ever wonder what life is like in a boot camp at a cool tech company? Here is my take from my first-week experience.

First and foremost what is this task force? if you visit the [Awesomity website](https://awesomity.rw/our-projects) you see that it is a joint effort between Awesomity and code of Africa “to develop a solid and talented pool of software developers and product designers right here in the heart of Africa. ” as per the website. what have I learnt so far? Let’s dive into it.

**Communication**

As a software developer the first think that comes in your mind when you hear the word boot camp it’s what programming language am I going to learn. Undermining the most pivot skill which is communication and this is an important lesson I learnt from our first challenge.  The first challenge taught me that effective communication makes work a lot easier and moving on from a failing strategy can help to finish tasks in a timely manner. In task force they do not only give us technical skills but also soft skills which are as equally important since we won’t only be dealing with computers but also people.

**Code Wars.**

What I thought to be the biggest challenge of the week came as a coding challenge from code wars. We were supposed to do it as a team of two but me and my partner met a lot of roadblocks. We tried to find solutions among us as interns but to no avail. Forgetting they are brilliant software engineers next door from the code of Africa and Awesomity team. The way we tackled it was to ask for help. But in addition to that I am dedicating a couple of minutes a day to work on a challenge so that I can improve.

**Agile Process.**

We were introduced to agile process in software development and how to make user stories. We had to come up with the most viable product for a project of our choice and present it. And here came the biggest blow of the week I got really sick and couldn’t make it but my team had to adopt as that’s what agile is about and deliver the best even in my absence.

**Conclusion**

conclusively, my first-week was really interesting and fun. time flied fast I can’t imagine it’s been a week already and again it feels like we have been there for a long time because of the way were easily integrated in the team. Looking forward to another amazing week ahead
在没有abi文件的情况下调用智能合约方法，web3py实现
Tags: web3py, web3, abi, solidity
Published: 2022-02-20 09:08:05

## 源起

前几天，回答了一个问题，感觉还可以，写成一篇文章记录一下。
问题在：
[如何用web3py调用闭源合约 | 登链社区 | 技术问答 (learnblockchain.cn)](https://learnblockchain.cn/question/3036)

问题中提到的交易记录在
[Binance Transaction Hash (Txhash) Details | BscScan](https://bscscan.com/tx/0xa3c53ab27fda6f341f2caefeb356051e1de56e27549a586c79fbc67209a9c53d)

首先查看交易记录，bscscan不能解析出来函数名，也就是abi没有公开。

## 确定函数调用签名

![16435424371.png](https://img.learnblockchain.cn/attachments/2022/01/qIG80oeX61f677b18a899.png)
也就是0xb45112b2

> 区块链中合约代码执行，需要指定某个合约地址的某个函数，其中这个执行的函数是使用Keccak-256(SHA-3)编码后的散列，取散列的前四个字节作为函数签名。官方定义："签名被定义为没有数据位置说明符的基本原型规范表达式，即具有带括号的参数类型列表的函数名称"。通俗的说就是：将函数名，带顺序的变量类型以及参数括号进行Keccak-256编码后，取前四个字节的二进制字符串，即以太坊的合约函数签名。

1，搜索网上的签名数据库：
https://www.4byte.directory/signatures/
搜索结果如下：
![16435427511.png](https://img.learnblockchain.cn/attachments/2022/01/tR0okdU661f678e940259.png)

说明还没有上传函数的abi定义
2，没有函数的abi信息，就没办法调用了吗？
当然不是！
只需要找到函数的定义，就相当于，你定义一个函数指针，签名只是这个函数指针，函数的参数保证调用堆栈不出错，而函数签名我们是有的。
3，找到函数原型，找到合约
点击合约地址 0x217这个
![16435431711.png](https://img.learnblockchain.cn/attachments/2022/01/2kqdbfCa61f67a8f55e27.png)

合约代码不公开

![16435432541.png](https://img.learnblockchain.cn/attachments/2022/01/M244o5Fc61f67ae1d3bcf.png)

点击
bytecode-decompiler，得到这样的代码：
![16435433551.png](https://img.learnblockchain.cn/attachments/2022/01/eA0LgbWg61f67b42895a4.png)
搜索函数签名，得到函数原型

```
def unknownb45112b2(uint256 _param1): # not payable
	require calldata.size - 4 >=′ 32
	require _param1 == _param1
	require ext_code.size(heroContractAddress)
```

4，构建函数名不一样，函数参数一样的函数
这个函数有返回值，只是为了方便演示效果

```
function greet3(uint256 num) public view returns (string memory) {
        return "greet3";
    }
```

用你的合约生成调用接口
在使用的时候，address为合约地址

```
greeter = w3.eth.contract(
    address='0xB5816B1C17ce9386019ac42310dB523749F5f2c3',
    abi=jsobjs['abi']
)
```

再就是调用方法

## 搞定问题

1，查看webpy的代码，显然这样的调用是不支持的。
2，自己修改webpy的代码，支持签名替换
我开源的代码里面提供了，修改过的，[contract.py](https://github.com/daodao2007/e001/blob/master/contract.py "contract.py")
替换即可使用。github上有修改说明。
代码里面有个例子，一个合约里面提供2个函数，函数签名

```
function greet2(uint256 num) public view returns (string memory) {
        return "greet2";
    }

    function greet3(uint256 num) public view returns (string memory) {
        return "greet3";
    }
```

```
* greet2 函数签名 '0xf9220889'
* greet3  函数签名 '0x02d355dc'
```

```
print(greeter.functions.greet3(456).call(sigfn="0xf9220889"))
```

打印

```
greet2
```

开源代码在：
[daodao2007/e001: call smart contract method without abi file (github.com)](https://github.com/daodao2007/e001)

大家如果需要其他语言、框架的版本可以联系我。
Cherrybomb v0.4.3 - Added support for OAS-3.1
Tags: opensource, openapi, rust, api
Published: 2022-02-20 09:06:44

Hi everyone!
We just released [Cherrybomb v0.4.3](https://github.com/blst-security/cherrybomb), Cherrybomb is a CLI tool helps you avoid undefined user behaviour by **validating your API specifications**.

**In this version we**:
* Added support for **OAS 3.1**
* Fixed minor bugs from previous versions
* Added a new check for successful responses

Let us know what you think!
https://github.com/blst-security/cherrybomb
https://www.blstsecurity.com/
go printf小技巧
Tags: go, fmt
Published: 2022-02-20 09:00:10

go语言里面，三种打印结构体的方式，原来没有注意，今天觉得%v看起来感觉不好，认真看了下文档，写一篇记录一下。

1，%v 仅打印结构体的值
2，%+v 打印结构体的字段名+字段值
3，%#v 在2的基础上加了结构体名

上代码：

```
package main

import "fmt"

type employee struct {
	name   string
	age    int
	salary int
}

func main() {
	emp := employee{name: "Sam", age: 31, salary: 2000}
	fmt.Printf("%v\n", emp)
	fmt.Printf("%+v\n", emp)
	fmt.Printf("%#v\n", emp)
	//{Sam 31 2000}
	//{name:Sam age:31 salary:2000}                 
	//main.employee{name:"Sam", age:31, salary:2000}
}
```
再给大家推荐一个字符串格式化的库，
[lwahlmeier/pyfmt: Golang implementation of PEP3101 (github.com)](https://github.com/lwahlmeier/pyfmt)
主要我写习惯了python的格式化方式，在go里，没有python这种f字符串挺难受，这个库就可以实现f字符串的功能。
使用方法，直接代码吧：
```
import (
	"fmt"
	py "github.com/lwahlmeier/pyfmt"
)
type employee struct {
	name   string
	age    int
	salary int
}
func main() {
	emp := employee{name: "Sam", age: 31, salary: 2000}
	fmt.Println(py.Must("{:s}", emp))
	fmt.Println(py.Must("{:r}{0:t}", emp))
	fmt.Println(py.Must("{0.name} {0.age}", emp))
	//{name:Sam age:31 salary:2000}
	//main.employee{name:"Sam", age:31, salary:2000}main.employee
	//Sam 31
}
```
1，{:s} 打印结构体，字段和值
2， {:r} 打印结构体名，{:t}打印类的类型
3， {0.name} 0表示一个，.后接的字段名
后面这个库，更详细的看文档吧，前面有github地址。

参考文章
[Pretty print struct variables in Go (Golang) - Welcome To Golang By Example](https://golangbyexample.com/print-struct-variables-golang/)
Google Ranking Algorithm 🤔
Tags: google, algorithms, tutorial, datascience
Published: 2022-02-20 08:43:53

💡 Did you know 💡

Why does facebook rank no 1, for 'gsvrnppl' in Google ❓


![Google search result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bgbuijtnvqlaz54278hq.jpg)

Because 'gsvrnppl' is Facebook typed every to the right of the keyboard keys

f a c e b o o k

Google may have considered mistyping happened & would have built an algorithm for this 🤔

For more insights consider lets stay connected via [Twitter](https://twitter.com/Dhanush_Nehru)
Multiple menu drop-downs with vanilla js
Tags: codepen, javascript, css, design
Published: 2022-02-20 08:27:21

{% codepen https://codepen.io/wyattmarshall-dev/pen/YzEaNdz %}

I looked all over online to find a solution to multiple drop down menus in a navigation header but most of the solutions I found in tutorials involved duplicating a Javascript function that targets the individual ID of the parent container for the drop down.

A couple issues I found with this:

- If each drop down has it's own function, then more than one drop down can be open at the same time.

- Clicking anywhere else on the page to close the drop down was tricky and confusing. 

Now, I know this is super simple to implement with something like Alpine.js (which in all reality I'd probably use in the real world instead) but I wanted to make this work with Vanilla JS, so this was the solution I came up with.

If anyone has feedback I'd really appreciate it!
Random Number Generator
Published: 2022-02-20 08:18:52

The Random Number Generator Tool generates unique random numbers. This tool supports unlimited number generation, Which means you can generate multiple numbers at a single time. During this random number generation process, it does not consume the device's internet.

## What is random number generation?

Random number generation is a process by which, often by means of a random number generator, a sequence of numbers or symbols that cannot be reasonably predicted better than by random chance is generated. 

## How to generate random numbers?

Follow the steps given below to generate random numbers:

1. First, open GoOnlineTools.com
2. Search random number generator
3. Click on generate random number button
4. Scroll down a little bit to see generated number

**Random Number Generator is available in multiple languages:**

English - [Random Number Generator](https://goonlinetools.com/random-number-generator/)
Spanish - [Generador de numeros aleatorios](https://goonlinetools.com/es/generador-de-numeros-aleatorios/)
Indonesian - [Acak Angka](https://goonlinetools.com/id/acak-angka/)
The best remote company of 2021
Tags: remotework, career, digitalnomad, remotecompany
Published: 2022-02-20 08:07:49


2021 was hard for everyone (well, 2020 honestly wasn't any better).
But for remote work it was a revolution. Some companies stood up for the challenge and lead by example. They started / continue to use remote work, async work style without cutting corners, lowering pay etc.

I think we should show them some love in return.
That's why you can now vote for the best remote company of 2021.
There is no big corporation or monetary prize behind it. Let's show them gratitude as a community of remote workers. Voting is open until 31 March 2022.

You can vote here: [https://remoteindex.co/remote-companies](https://remoteindex.co/remote-companies)