teleren/devto huggingface dataset:
Forgot React Class Components? Let Me Help
Tags: react, reactnative
Published: 2021-07-24 21:04:02

Hello, React developers! Are you one of those devs who only remembers/knows how to write functional components but not class components? Chances are, yes. The reason is with the introduction of React Hooks (which can only be used in functional components), developers have started to disregard class components. The problem is you will almost always find class components in existing React codebase (especially if it belongs to a large company). In this article, I will give you the shortest crash course on class components. 

###[1] Creating Class Components and Accessing Props
```javascript
class App extends Component {
  render() {
    const { theProp } = this.props;
    return (
      <div>{theProp}</div>
    );
  }
}
```
This is the template for creating a class component and accessing props. As you can see, knowledge of the "this" keyword in JavaScript is important to work with class components.

###[2] State
```javascript
class App extends Component {
  state = {
    items: [],
    total: 0
  }

  render() {
    return <h1>The first item is {this.state.items[0]}</h1>
  }
}
```
In class components, you cannot use the new and powerful useState. To create a state, assign state to an object which would contain the state data. Again, the "this" keyword makes the code look less elegant.

###[3] Handlers
```javascript
class App extends Component {
  state = {
    items: [],
    total: 0
  }

  handleClick = () => {
    this.setState({
      total: 99
    })
  }

  render() {
    return (
      <div>
        <h1>The first item is {this.state.items[0]}</h1>
        <button onClick={this.handleClick}>Add</button>
      </div>
    )  
  }
}
```
In an event handler in a class component, you need to use the setState method and override the existing state's data. In this case, we are only setting the total to 99 which means only the total value will change from the existing state (items value will still remain the same).

###[4] Lifecycle Hooks
These are not the shiny new React Hooks like useEffect, useState and so on. However, keep an eye on `componentDidMount()` (similar to useEffect), `componentWillUnmount()` (clean up function), and `componentDidUpdate()`.
Python Basics! PYTHON 101!
Published: 2021-07-24 20:58:17




 
##What is Python?
Python is a great programming language to get started with when diving into the world of Tech. This is because it has a simple syntax similar to the English language which makes it easier to learn. It is powerful, dynamic and can be used for different purposes. 

Python is used in data analysis, data science, machine learning, software development and automation. It was created by Guido van Rossum and released in 1991 and has been in use up to date.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hpyczpgm5b155uqezdln.png)

##Python Basics and Concepts.
Python basics is about the fundamental programming concepts and deep understanding of the basic building blocks of python programming language.
INTRODUCTION TO PYTHON 101
Published: 2021-07-24 20:54:45

Python is a general purpose programming language. It is very easy to learn, easy syntax and readability is one of the reasons why developers are switching to python from other programming languages. We can use python as object oriented and procedure oriented language as well. It is open source and has tons of libraries for various implementations

Python is a high level interpreted language, which is best suited for writing python scripts for automation and code re-usability. It was created in 1991 by Guido Van Rossum. The origin of its name is inspired by the comedy series called ‘Monty python’.
Working with python gives us endless possibilities. We can use python in data science, machine learning, Artificial intelligence, web development, software development etc.
In order to work with any programming language, you must be familiar with an IDE. You can find the setup for an IDE for python, on ‘python.org’ and install it on your system. The installation is seemingly easy and comes with IDLE for writing python programs. After you have installed python on your system, you are all set to write programs in python programming language.

(A) Keywords & Identifiers 
Keywords are  special names that are already present in python. We can use these keywords for specific functionality while writing a python program. While Identifiers are user defined names that we use to represent variables, classes, functions, modules etc.
(B) Variables 
Variables are like a memory location where you can store a value. This value, you may or may not change in the future. To declare a variable in python, you only have to assign a value to it. There are no additional commands needed to declare a variable in python.
(C) Data Types in Python
1.	Numbers
2.	String
3.	List
4.	Dictionary
5.	Set
6.	Tuple

(D) Operators
Operators in python are used to do operations between two values or variables. Following are the different types of operators that we have in python:
•	Arithmetic Operators
•	Logical Operators
•	Assignment Operators
•	Comparison Operators
•	Membership Operators
•	Identity Operators
•	Bitwise Operators
LeetCode 33. Search in Rotated Sorted Array
(javscript solution)
Tags: javascript, algorithms
Published: 2021-07-24 20:53:09

###Description:
There is an integer array nums sorted in ascending order (with distinct values).

Prior to being passed to your function, nums is rotated at an unknown pivot index k (0 <= k < nums.length) such that the resulting array is [nums[k], nums[k+1], ..., nums[n-1], nums[0], nums[1], ..., nums[k-1]] (0-indexed). For example, [0,1,2,4,5,6,7] might be rotated at pivot index 3 and become [4,5,6,7,0,1,2].

Given the array nums after the rotation and an integer target, return the index of target if it is in nums, or -1 if it is not in nums.

You must write an algorithm with O(log n) runtime complexity.
###Solution:
Time Complexity : O(log n)
Space Complexity: O(1)

```javascript
// Binary search
var search = function(nums, target) {
    let left = 0, right = nums.length-1;
    while(left < right){
      const mid = left + Math.floor((right - left)/2)
      if(nums[mid]===target) return mid
      // When middle element is less than the last element
      if (nums[mid] < nums[right]) {
            if (target > nums[mid] && target <= nums[right]) {
                left = mid + 1;
            } else {
                right = mid;
            }
        } 
        // When middle element is greater than the last element
        else {
            if (target > nums[mid] || target < nums[left]) {
                left = mid + 1;
            } else {
                right = mid;
            }
        }
    }
    return left
};
```
Integrating Clear ORM With Crystal’s Amber Framework
Tags: softwaredevelopment, crystallang, postgres, webdev
Published: 2021-07-24 20:43:59

---
title: Integrating Clear ORM With Crystal’s Amber Framework
published: true
date: 2021-07-24 20:40:37 UTC
tags: softwaredevelopment,crystallang,postgresql,webdevelopment
canonical_url: 
---

[![](https://cdn-images-1.medium.com/max/2582/1*FhYUjtIfFBmI4YM9dMQoBg.png)](https://itnext.io/integrating-clear-orm-with-crystals-amber-framework-c0a55a67f4ca?source=rss-9a53804556------2)

Amber[1] is a web development framework for Crystal programming language. It uses Granite[3] as it’s default ORM. While Granite works, I…

[Continue reading on ITNEXT »](https://itnext.io/integrating-clear-orm-with-crystals-amber-framework-c0a55a67f4ca?source=rss-9a53804556------2)
Array FlatMap
Tags: javascript, beginners, webdev, tutorial
Published: 2021-07-24 20:12:52

<p><span class='first-letter'>F</span>latMap is a single method which can be usable for flat and map methods.</p>

As you know `flat()`, flattening the 1-level deep and `map()` to loop into an array.

If we include both, we called `flatMap()` 😉 

So, instead if calling two methods `flat()` and `map()`, you can use single method called `flatMap()`.

```js
let plants = ['💐', '🌲', '🌻', '🌹'];

// ❌ map + flat
plants.map(plant => [plant, '🍁']).flat();
// Output
//["💐", "🍁", "🌲", "🍁", "🌻", "🍁", "🌹", "🍁"]

// ✅ flatMap
plants.flatMap(plant => [plant, "🍁"])

// Output
// ["💐", "🍁", "🌲", "🍁", "🌻", "🍁", "🌹", "🍁"]
```

### How flatMap() works?

📝 <mark>FlatMap() always do first map() and then it flat().</mark>

In `flat()`, we use to pass arguments where you set the depth, arguments define how deep a nested array should be flattened.

```js
let plants = [[["🌻", "🌹"]]];
plants.flat(2);

// ["🌻", "🌹"]
```

#### `flatMap()` do only 1 level deep flattening.

```js
let plants = [[["🌻", "🌹"]]];
plants.flatMap(plant => [plant]);

// [["🌻", "🌹"]]
```

### Filter using flatMap 😉

Yes, You can also do filter here using `flatMap()`.

```js
let arr = [5, 4, -3, 20, -4, 18]
arr.flatMap(i => {
  return i < 0 ? [] : [i];
})

// [5, 4, 20, 18]
```

## Reference 🧐

- <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap">MDN Docs of FlatMap</a>

## Summary ∑

`flatMap()` method always helps if you want to use map and flat methods both together.

Thanks for reading the article ❤️

<a href="https://www.buymeacoffee.com/suprabhasupi" target="_blank"><img src="https://i.imgur.com/4t25pJE.png" alt="Buy Me A Coffee" /></a>

<table>
  <tbody>
    <tr>
      <td>
        🌟 <a href="https://twitter.com/suprabhasupi"> Twitter</a>
      </td>
      <td>
        👩🏻‍💻 <a href="https://www.suprabha.me/"> suprabha.me</a>
      </td>
<td>
        🌟 <a href="https://www.instagram.com/suprabhasupi/"> Instagram</a>
      </td>
    </tr>
  </tbody>
</table>
What is Windows 365?
Tags: news, cloud, azure
Published: 2021-07-24 19:28:00

Microsoft just introduced **Windows 365**, a new service that let company cut partners out of the money marking loop by providing virtual PCs to all they customers.

Windows 365 will only be available for businesses when it launches on August 2nd, with a pre-user monthly subscription cost. Microsoft is not detailing exact pricing details until the launches next month, but Windows 365 is designed for one-person businesses all the way up to enterprises with thousand of employees. 
![Windows 11](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yopvmsfg4n82nbh5ck2p.jpg)
And, there will be two editions of Windows 365: Business and Enterprise. Both are powered by Azure Virtual Desktop and can be config as a individual Could PCs with a single CPU, 2GB of RAM, and 64Gb of storage at the *low-end*

While Windows 365 seems perfectly timed for businesses looking to tackle the complexities of remote work, Microsoft has been working on the service for years. the OS group at Microsoft had been working on a project codenamed "*Arcadia*", a service to stream video games from the cloud. Arcadia dates all the way back to Microsoft demonstrating Halo running on a Windows Phone in 2013. This early virtualization work eventually led to Windows 365 and a focus on making it *consumer-friendly*. 

"When we built this team, we brought in a couple of leaders who had experience with virtualization, but for the most part we brought in people who had experience with Windows and experience with consumer experiences because that was the bar we wanted to set,” says Scott Manchester, director of program management for Windows 365.

Also because of the pandemic, the work on Windows 365 and Microsoft's broader focus on hybrid has been accelerated. Microsoft has steadily improving Microsoft Team over the past year and laying out it vision for the future of meeting, remote work, and so much more.
![Covid-19](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ru12vqoatalvx4ui6byd.jpg)
While Windows 365 has the potential to dramatically change how computing takes place in commercial settings, there's nothing 
inevitable about it. many will object to ceding the privacy of a local box to the servers of Microsoft. Windows 365 might just be the first significant step toward a future where you don't need a dedicated Windows PC to use Windows.
-----
You can find me at:
- Github: https://github.com/centopw
- Website: https://tanhiep.dev
- Discord: https://discord.gg/BVu2SaC
How to execute shell commands in Node js ?
Tags: codenewbie, javascript, node, todayilearned
Published: 2021-07-24 18:07:26

This is a quick tutorial on how to execute `shell / windows`  commands within a nodejs application. This can come in handy when you are building a CLI which is trying to install dependencies on the other machine or running a scripts.

Alright , enough of the small talk. Let's get started

Node.js follows `Single-Threaded with Event Loop Model` and has capability of executing asynchronous task which are not handled by the main thread. When the asynchronous task is complete , output/error will return back to the main thread.

Node.js has a module called **[child_process](https://nodejs.org/api/child_process.html#child_process_child_process)** which is responsible for creating the new child process of our main Node.js process.

Two commands exec and spawn which is a method in child process that helps to execute the shell commands.

### **The exec Function:**

The `exec()` function creates a new shell and executes a given command. The output from the execution will be available for us to use in the callback.


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627149314060/aS1nbN-6V.png)

Now if we execute this in our terminal , we will see the following output


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627149325822/NiaxHH-eR.png)


Now we will see how to execute the shell command with **spawn.**

### **Spawn Function:**

It creates a new process with a given command with command line args present in **args.** The output of the command is made available via listeners.   Main thing with `spawn` function is it uses stream API which  is more suitable to handle large data source.

Let's list the current working directory with **spawn**  function.


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627149350545/-sfpLD5hR.png)

We setup listeners in the code once importing the child process.  **stdout** and **stderr** fires **data** event when the command writes to the stream.  Error will be thrown only if the child_process failed to execute.

Finally **close** event occurs when the command is finished.

We will be getting the following output after running in the terminal which will be same as the output we got after running the exec function.


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627149370107/ofNAF05rj.png)

### **Spawn vs Exec :**

Now that we know about this two functions, when to use **spawn** and when to use **exec.**  If we are expecting large output from the command then best fit will be the **spawn function.** On the contrary if we are not expecting large output then we can go with **exec function.**

Thank you for reading. Let me know your thoughts in the comments section. 

Stay Safe and Happy Coding.
Python Basics, Pythons 101!
Published: 2021-07-24 17:58:15

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9p781c0ql89gq4nkc2xb.jpg)
# **Getting started with python**;*For beginners*
Python is a popular programming language. It was created by Guido van Rossum, and released in 1991.

For my first article, I'd like to talk about the basics of python as a programming language and what you need to get started.Python has many use cases and it can be sometimes difficult to decide.

There are positives in that the language is the only constant factor.It's application is broad.Python is used in the following fields:
## **Applications of Python**
- Programming applications.
- Web development. 
- Game development. 
- Language development
- Finance.
- AI and machine learning. 
- Data analytics. 
- Data visualization. 

### **Syntax**
Python syntax is simple and it has a major focus on natural language or basic English.
Python uses whitespace (spaces and tabs) to define program blocks of codes for class, functions or flow control.

### **Setting up environment**
Before writing a program in Python,Download Python version 3 from [python.org](https://www.python.org/) and a text editor of your choice either SublimeText, Visual Studio Code or Pycharm and Anaconda 

This should be enough for you to right your first line of code
RolarBot: AI Paragraph Questions and Answers
Tags: ai, react, tensorflow, javascript
Published: 2021-07-24 17:53:38

RolarBot is a AI powered tool of paragraph decoding. Basically used natural language processing. Natural language processing is a subfield of linguistics, computer science, and artificial intelligence concerned with the interactions between computers and human language, in particular how to program computers to process and analyse large amounts of natural language data.

![rolarbot page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vy0bqwmzjvgux8ejzhnp.png)

First, you have to input a paragraph and after that, ask some questions from that paragraph. Finally, Rolarbot will give you the best answers and the scores.

![rolarbot answers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oy4s6beaovx4rm3d3to5.png)

This tool mostly important for high school and university students. I developed this tool using TensorFlow NLP model. also BERT. BERT aka bidirectional Encoder Representations from Transformers is a transformer-based machine learning technique for natural language processing pre-training developed by Google. BERT was created and published in 2018 by Jacob Devlin and his colleagues from Google.

Okay, let's try your first question with [RolarBot](https://rolarbot.herokuapp.com).

## Update

![rolarbot mobile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2wo8oed5afmavwux343o.png)

Now you can install the RolarBot android app from the play store. That mobile app is 20X faster than RolarBot web.

[Install RolarBot App](https://play.google.com/store/apps/details?id=rolarbot.thirashapw.ai)

Give your feedback after using the mobile app.
#1) What are the different data types present in JavaScript?
Tags: javascript, beginners, webdev, career
Published: 2021-07-24 17:46:42

-->Primitive type
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zem78q62w5c058mlicoq.png)![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3nrbiu2aeflomf5r4xgh.png) ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mvjs67y451a4wln95wtw.png)![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bwtrkxowtdkg33wgkp59.png)![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7i18q8xoteg2m5jkz9yl.png)

-->Non-Primitive type
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0iarf9shmeqo7z83100q.png)
My LGMVIP experience
Tags: webdev, react
Published: 2021-07-24 17:37:19

Hey, Guys how you all are doing I hope you all are doing well. Recently I have enrolled for an intership program at Letsgrowmore.

So here I would like to share my internship experience at Letsgrowmore. In this internship program, they have given us three tasks out of which we have to do two tasks to get the internship certificate. So, let's go through my tasks.

Task1:- In task one we have to build a single-page application I have introduced all the features in these project like carousels, cards, newsletters, swiping video section, swiping Gallery section contact section, and at last a footer. It was a challenging task because we have to made these pages mobile responsive also and to make it responsive I have used Bootstrap. I really enjoyed making this project I have put all my efforts and skills to make this project.

[Task-1 Code] (https://github.com/Zeeshnhmd/-LGMVIP-WebDev/tree/main/task-1)
[Task-1 Video] (https://www.linkedin.com/posts/zeeshanahmad25_task1-letsgrowmore-html5-activity-6818284612943515648-948B)

Task-2:- In this task we have to build a landing page that contains a button (get users) when a user clicks on it, it fetch user data in the form of cards and while the API is fetching data its show loader that indicates that the data is loading.
[Task-2 Code] (https://github.com/Zeeshnhmd/-LGMVIP-WebDev/tree/main/task-2)
[Task-2 Video] (https://www.linkedin.com/posts/zeeshanahmad25_task2-internship-webdevelopment-activity-6820120822221549568-PzjL)

At last I would like to thank [Letsgrowmore] (https://letsgrowmore.in/) for boosting up my skills and I recommend all of you guys to visit [VIP-Letsgrowmore] (https://letsgrowmore.in/vip/) and take benefits from these free organization.

Thank you,
[Zeeshan Ahmad] (https://www.linkedin.com/in/zeeshanahmad25)
My open source web app for reading data from EU Green Pass QR Code.
Tags: greenpass, covid19, python, qrcode
Published: 2021-07-24 17:26:59

![Green Pass Covid-19 QRCode Decoder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bs8ej2cmisj3704anxb4.png)

I developed a simple tool for decoding data from EU Green Pass QR Code. 
I used Python with Flask and deployed my app using Heroku.

You just need to attach your certificate to immediately get a complete reading of the QR code.
Also in this case, no data will be stored and that if you want, since the code is open source, you can create your instance without any worries.

If you're a bit curious let's try the app in action here:
[Link](https://greenpass-decoder.debbaweb.it)

My Github project: 
[Link](https://github.com/debba/greenpass-covid19-qrcode-decoder)
Tech Conferences are for networking not for knowledge
Tags: techtalks
Published: 2021-07-24 17:22:44

Here is my current take on tech conferences. In my opinion, the benefits of attending tech conferences revolve around three main things:

* Learning.
* Inspiration.
* Networking.

After attending many conferences in the last couple of years, I realised that if you are not into networking and getting to know people in the conference days, then the main benefit of attending is gone. If you would like to learn and get inspired, just watch the talks online. I understand that attending the talk may give you a chance to ask the speaker a question. But this can be done also on Twitter, I believe most speakers are on Twitter and they are happy to answer the questions you have.

I also believe that inspiration can be achieved by watching the talks, DHH and GaryVee inspired me for years by only watching their conference talks but I've never met them in person. It worked for me, I also understand if you met them and talked to them in a conference you may be getting more inspired but not all conferences have the people who inspire you anyway. And to be honest with myself, I would go to a conference just because of some specific speaker are there, but most conferences do not have such speakers all the time.

For networking, this is the main benefit of conferences, you go out there you try to promote your work, find business partners, making deals, make connections with people and companies. So if you want to do networking, conferences are the best place to do so.

Probably, with almost all conferences last year (2020) happened online, this idea of getting the learning and inspiration part became more convincible. You can even argue that networking can be easily done online via social media or online conferences. But I think meeting in person still has its benefits and many people will still go to conferences just because it is fun and to meet new people and visiting new cities. This alone justifies going.