teleren/devto huggingface dataset:
Os Componentes de Classe no React
Tags: react, beginners
Published: 2023-02-13 18:24:14

Os componentes de classe são uma forma de escrever componentes React que possuem estado interno e métodos. Eles são escritos usando uma classe ECMAScript 6 que estende a classe `React.Component`. Essa é uma abordagem diferente da utilização de componentes funcionais, que não possuem estado interno e são definidos como funções.


Veja um exemplo de um componente de classe simples em React:

```
import React, { Component } from 'react';

class ExampleComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Hello World'
    };
  }

  render() {
    return <div>{this.state.message}</div>;
  }
}

export default ExampleComponent;
```

Vamos entender o código que acabamos de ver: 

Neste exemplo, o componente de classe `ExampleComponent` estende a classe `React.Component`. No construtor, usamos o método super() para passar as propriedades para o construtor da classe pai, React.Component.

Logo após, definimos o estado inicial do componente usando `this.state`. E incluímos o  método `render()` que é invocado pelo React para renderizar o componente this.state.message na tela.

Além disso eles apresentam algumas características específicas que os diferenciam das funções ou Componentes de Função, como:

- Eles são conhecidos também como componentes “inteligentes” ou “com estado”, pois tendem a implementar lógica e estado.( Como dito no artigo).

- Os métodos de ciclo de vida React podem ser usados ​​dentro de componentes de classe (por exemplo, componentDidMount).

- Podemos passar props para componentes e acessá-los por `this.props`.


Para reforçar a compressão de estrutura de escrita e como funciona Componentes dde Classe no React, veja um código baseado no código anterior, mas utilizando um botão de clique que pode alterar o estado, que é possível nessa linguagem.

```
import React, { Component } from 'react';

class ExampleComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Hello World'
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({
      message: 'You clicked the button!'
    });
  }

  render() {
    return (
      <div>
        <div>{this.state.message}</div>
        <button onClick={this.handleClick}>Click me</button>
      </div>
    );
  }
}

export default ExampleComponent;
```
O que mudamos? Adicionamos um método handleClick() que é chamado quando o usuário clica no botão. Usamos `this.setState()` para alterar o estado interno do componente.

Em resumo, os componentes de classe são uma abordagem mais poderosa e flexível para escrever componentes React que possuem estado interno e métodos personalizados. Eles são uma opção valiosa quando precisamos de mais controle sobre o comportament
@code – Profiles in Visual Studio Code, work with only the extensions you need! 😀
Tags: englishpost, profiles, visualstudiocode
Published: 2023-02-14 15:18:24

---
title: @code – Profiles in Visual Studio Code, work with only the extensions you need! 😀
published: true
date: 2023-02-13 18:10:49 UTC
tags: EnglishPost,EnglishPost,Profiles,VisualStudioCode
canonical_url: 
---

Hi !

Profiles in Visual Studio Code are a way to create different environments for different projects or purposes. They allow us to switch between different sets of extensions, settings, and keyboard shortcuts without affecting our default VS Code configuration.

I found it super useful mostly when I think about the extensions that I have. In example: if I’m doing plain rust coding, I don’t need all my Azure and IoT extensions loaded in VSCode. I just need the rust ones.

Here is how I create a new profile with my necessary extensions. In the Manage option (bottom left), select [Profiles // Create Profile]

![In the Manage option (bottom left), select [Profiles // Create Profile]](https://brunocapuano.files.wordpress.com/2023/02/image.png?w=571)

Create an empty profile.

![Create an empty profile.](https://brunocapuano.files.wordpress.com/2023/02/image-2.png?w=656)

I’ll name my new profile “Blog Demo”.

![I'll name my new profile "Blog Demo".](https://brunocapuano.files.wordpress.com/2023/02/image-3.png?w=535)

I have no extensions installed in this profile. I’ll install CoPilot and Rust Analyzer.

![I have no extensions installed in this profile. I'll install CoPilot and Rust Analyzer.](https://brunocapuano.files.wordpress.com/2023/02/image-4.png?w=440)

And that’s it ! my new profile, will only have these 3 extensions and my VS Code experience will be much lighter ![😀](https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/twemoji/2/72x72/1f600.png)

Happy coding!

Greetings

El Bruno

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

* * *
💡 Build (AI?) for Box
Tags: saas, startup, tooling, webdev
Published: 2023-02-13 10:08:04

Most people think of [Dropbox][dropbox] or [Google Drive][gdrive] for sharing files, but you know what enterprises use surprisingly often? [Box][box].

Compare [Dropbox's free cash flow](https://ycharts.com/companies/DBX/free_cash_flow) versus [Box's free cash flow](https://ycharts.com/companies/BOX/free_cash_flow). If we go off that alone, Box is about 1/4th as successful -- you know how many developers are *building* for Box? It's a rounding error compared to Dropbox.

**💼 🧠 Build tools for the enterprise-friendly Box platform**

The idea is vague because there's a *lot* of ways you can go with it. You can:

- Find the most used Dropbox integrations and clone them
- Create a new sexy integration (AI)
- Pick an extremely boring task (PDF scanning) and get good at that
- Find a startup that does document processing and build a similar functionality
- Pick a feature from Dropbox/GDrive that Box doesn't have and implement it

The possibilities are endless, but what's clear is that we have a huge enterprise population on Box who are *not* getting much developer attention. Give them some attention.

This was [originally posted @ Unvalidated Ideas (Edition 42)](https://unvalidatedideas.com/editions/42)

[gdrive]: https://drive.google.com
[dropbox]: https://dropbox.com
[box]: https://box.com
How to Install MySQL on Debian 10, 11
Tags: mysql, debian, linux, dbforgestudio
Published: 2023-02-13 17:57:33

---
title: How to Install MySQL on Debian 10, 11
published: true
description: How to install and update MySQL on Debian
tags: #mysql #debian #linux #dbforgestudio
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-02-13 17:52 +0000
---
One of the most popular Linux distributions is the Debian open source Linux-based operating system. In this article, we present a step-by-step guide to installing a MySQL server on Debian and demonstrate how to manage MySQL on Linux using dbForge Studio for MySQL - https://www.devart.com/dbforge/mysql/install-mysql-on-debian/
![Install MySQL on Debian](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rrac5bn8dathw7a7zrdv.png)
Build a responsive E-commerce website from scratch
Tags: beginners, tutorial, webdev, javascript
Published: 2023-02-13 17:38:08

Learn how to create a complete responsive e-commerce website from scratch using HTML, CSS, and JavaScript easily by watching this [video from YouTube](https://youtu.be/8Mjaqh52qoM).


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

If you want to become a front-end website developer then this video will help you to understand how HTML, CSS, and JavaScript work together and how to use them properly

If you don't like the music 🎵 I added to the video then you can just mute 🔇 it and hear any coding soundtrack 🎧 from YouTube and watch this video, If you found it somewhat confusing at first please give it some time, I'm sure that you will appreciate the process and coding later.

Btw the project files 📂 and images 📷 are free. you can get the pre-coded files and start coding 😊
Shallow & Deep Copy
Tags: mutable, reference, memory, object
Published: 2023-02-13 17:21:59


shallow and deep কপি জিনিসটা খুবই মজার। আমরা অনেক সময় একটা অবজেক্ট কপি করতে চাই। কিন্তু আমরা প্রোগ্রামাররা খুবই অলস প্রকৃতির। তাই টুপ করে কপি করে ফেলি। পরে দেখা যায় ঠিক মত কোথায় কি হচ্ছে না বুঝার কারণে বেকায়দায় পড়ে যাই। কিছু উদাহরণ দিলে বুঝা যাবে। 

যেমন আমি যখন জয়েন করি বর্তমান কোম্পানিতে ইন্টার্ন হিসেবে,তার কিছু দিন পর আমার গুরু টিপু ভাই জয়েন করে সফটওয়্যার ইঞ্জিনিয়ার হিসেবে। এই বিষয়টা এইভাবে লেখা যায়। 

```
me = {
    "name": "Nayem",
    "info": {
        "company": "deshi",
        "stack": "laravel",
        "os": "ubuntu",
        "role": "intern",
        "seat": "window-seat"
    }
}
print(me)

output: {'name': 'Nayem', 'info': {'company': 'deshi', 'stack': 'laravel', 'os': 'ubuntu', 'role': 'intern', 'seat': 'window-seat'}}
```

```
# now tipu bro comes
tipu = me.copy()
tipu["name"] = "Tipu The Yo Boy"
tipu["info"]["role"] = "Software Engineer"
tipu["info"]["seat"] = "right side of Nayem"
print(tipu)
output: {'name': 'Tipu The Yo Boy', 'info': {'company': 'deshi', 'stack': 'laravel', 'os': 'ubuntu', 'role': 'Software Engineer', 'seat': 'right side of Nayem'}}
```
তো কিছু দিন পর আমি ডায়েট করা শুরু করছি। ভাই খালি জ্বালায়। কি নাঈম ভাই ঘাস পাতা খান :) আজকে ঘাস পাতা আনতে ভুলে গেছেন? 

আমিঃ নাহ এই ভাবে তো হয় না। ভাই আমি সিট চেঞ্জ করব।
টিপুঃ কই যাবেন? আপনাকে তো আমার পাশ থেকে সরতে দিব না। 

এর মধ্যে আমাদের অফিস এর লোকেশন চেঞ্জ এর খবর আসে। আমি তো বেজায় খুশি। 

```
#Now I wish I would change my seat location in new office
#At new office
me["info]["role"] = "Jr. Software Engineer"
me["info"]["seat"] = "new office new seat near window"
print(me)

output: {'name': 'Nayem', 'info': {'company': 'deshi', 'stack': 'laravel', 'os': 'ubuntu', 'role': 'Jr. Software Engineer', 'seat': 'new office new seat near window'}}
```
তো নতুন অফিসে গিয়ে আমি তো অবাক। কারণ টা কি জানেন?
তাইলে এইটা দেখেন। 

```
print(tipu)
output: {'name': 'Tipu The Yo Boy', 'info': {'company': 'deshi', 'stack': 'laravel', 'os': 'ubuntu', 'role': 'Software Engineer', 'seat': 'new office new seat near window'}}

```
এই যে কপি টা করা হইছিল। এইটা ছিল shallow copy. একটা অবজেক্টের ভিতর আরেকটা অবজেক্ট নেস্টেড অবস্থায় ছিল। যখন কপি করা হইছিল তখন শুধু মাদার অবজেক্ট এর রেফারেন্স টা কপি করা হইছিল। বাট ভিতরের  আরও যে চাইল্ড রেফারেন্স গুলো ছিল ওইটা আর কপি করা হয় নাই। তাই ঘটনা টা এইরকম ঘটছে। 

যাই হোক নতুন অফিসে আবার ওইদিন তারিকুল ভাই বলতেছিল সে আমাদের সাইডে বসতে চায়। আমিও খুশিতে গদগদ হয়ে বলতে ছিলাম ভাই আপনি আমার সিটে এসে আমাকে আপনার ওইটায় দেন। টুপ করে টিপু ভাই বলে আপনাকে সোজা মিটিং রুমে একা পাঠায় দিব। আচ্ছা আপানারাই বলেন একা একা এক রুমে যাওয়া যায়? :) 

কিনুত যদি সত্যি পাঠায় দিত। তাইলে কি হইত জানেন?

```
from copy import deepcopy
me = deepcopy(tipu)
me["name"] = "Nayem"
me["info"]["seat"] = "Meeting room"
print(me)
print(tipu)

output: {'name': 'Nayem', 'info': {'company': 'deshi', 'stack': 'laravel', 'os': 'ubuntu', 'role': 'Software Engineer', 'seat': 'Meeting room'}}
{'name': 'Tipu The Yo Boy', 'info': {'company': 'deshi', 'stack': 'laravel', 'os': 'ubuntu', 'role': 'Software Engineer', 'seat': 'new office new seat near window'}}
```
আমি জানি না এই পোস্ট দেখলে টিপু ভাই কালকে কোথায় বসায় :)
Productivity as a Developer
Tags: productivity, programming
Published: 2023-02-13 17:08:55

As a developer, it's crucial to manage your time and resources effectively to maximize productivity and output. In today's fast-paced and competitive tech industry, developers need to be at their best to meet the demands of their work. Here are some best practices and tools that can help developers achieve their goals and increase their productivity.

Plan your work
Planning your work is the first step to being productive. Start by setting clear and realistic goals for the day, week, or month. Write down what you need to accomplish and the steps you'll take to reach your goals. Having a plan in place will help you focus and avoid distractions.

- Stay organized
Developers need to be organized to keep track of their work, deadlines, and projects. Use tools such as Trello, Asana, or JIRA to keep track of your tasks, prioritize them, and track your progress. You can also use note-taking apps like Evernote, Google Keep, or Microsoft OneNote to keep all your notes in one place and easily accessible.

- Use the Pomodoro Technique
The Pomodoro Technique is a time management method that helps you stay focused and avoid burnout. The technique involves breaking down work into 25-minute intervals, called "pomodoros," with short breaks in between. After four pomodoros, take a longer break to recharge. Using this technique can help you focus on one task at a time, increase your productivity, and prevent burnout.

- Invest in the right tools
Developers need the right tools to do their job efficiently. Invest in a good code editor like Visual Studio Code, Sublime Text, or Atom. Use tools like Git and GitHub to manage your code and collaborate with other developers. Also, consider using task runners like Grunt and Gulp to automate repetitive tasks, and use debuggers like Chrome DevTools to troubleshoot and fix bugs.

- Collaborate with other developers
Collaborating with other developers can help you learn new skills, share your expertise, and solve problems faster. Use tools like Slack, Microsoft Teams, or Discord to communicate and collaborate with other developers. You can also join online communities and forums like Stack Overflow, Reddit, and GitHub to connect with other developers and ask for help.

Being productive and efficient as a developer requires a combination of good habits and the right tools. By following these best practices and using the right tools, you can improve your productivity, output, and achieve your goals faster.
How to stop a Pending Promise in JavaScript (Timing Based Rejection)
Published: 2023-02-13 17:04:57

In JavaScript, a promise is an object representing the eventual completion or failure of an asynchronous operation. To stop an ongoing promise, you can use the Promise.race() method to create a new promise that resolves or rejects as soon as one of the promises passed as an argument resolves or rejects. Here's an example:

```js
// Create a new Promise that resolves after 5 seconds
const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise resolved!');
  }, 5000);
});

// Create a new Promise that rejects after 3 seconds
const stopPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(new Error('Promise stopped!'));
  }, 3000);
});

// Use Promise.race() to stop the ongoing promise after 3 seconds
Promise.race([myPromise, stopPromise])
  .then(result => console.log(result)) // Will not be executed
  .catch(error => console.error(error.message)); // Will be executed after 3 seconds
```

In this example, myPromise resolves after 5 seconds, but stopPromise rejects after 3 seconds. By passing these two promises to Promise.race(), we create a new promise that will either resolve with the result of myPromise or reject with the error from stopPromise, whichever happens first. In this case, stopPromise rejects after 3 seconds, causing the new promise to reject with the same error. The catch() method is then called with the error message "Promise stopped!".
The Reason I got into Software Engineering
Tags: career, inspiration
Published: 2023-02-13 16:57:24

In our careers, we are probably asked by family members, friends, and many others on why we chose a specific career.  When it comes to Software Engineering, money is usually a big factor.  Or it could just be the love technology to create something that everyday people can enjoy.  

My story to become a Software Engineer was because of my learning disability as a kid.  Carnegie Learning just wrote a story about my journey, and I wanted to share it with you all to inspire. And if you are parents with children that are having trouble learning, this is a story I want to share to give you hope.  

Here is the story from an interview my Mom and I did with Carnegie Learning on how Fast ForWord helped a kid with Central Auditory Processing Disorder thrive after the Summer of 2001:  [Success Story](https://www.carnegielearning.com/blog/justin-comeaux-fast-forword-success-story/)
Confidential Cloud Computing: Getting Started Tutorial
Tags: cloud, cloudnative, security, confidentialcompute
Published: 2023-02-13 16:56:54

#theNewCloudStandard

Confidential Cloud Computing is cloud computing 2.0. By default your workload is isolated from the infrastructure, shielding applications, code and business logic. CCC solves a problem open for decades. It neither requires change to code, nor to devops.

People asks me what it takes to get started. Against this background I gave a tutorial talk at FOSDEM'23 last week, answering questions of how to get started.

[Youtube video](https://youtu.be/ByqHPSYtHqg)


P.S. Please subscribe, if the topic interests you
What is Future of mobile development platforms?
Tags: mobile, ios, android, flutter
Published: 2023-02-13 16:55:34

The future of mobile development platforms is constantly evolving, but there are several trends that are likely to continue to shape the industry. Some of the key trends in the future of mobile development include:

**Cross-platform development**: With the increasing number of platforms and devices, cross-platform development will become more important. Tools and frameworks that allow developers to build apps for multiple platforms with a single codebase will continue to grow in popularity.

**Artificial Intelligence and Machine Learning**: AI and ML are set to play a significant role in the future of mobile development, with more apps incorporating these technologies to provide enhanced user experiences and improve performance.
Progressive Web Apps (PWA): PWAs are web applications that provide a native app-like experience within a web browser. They are designed to work offline and have native-like capabilities. PWAs will continue to gain popularity as they offer a cost-effective solution for businesses to reach their mobile audience.

**5G networks**: The widespread availability of 5G networks will change the way mobile apps are developed and used. With faster speeds and lower latency, apps will be able to offer more sophisticated experiences and provide access to more data in real-time.

**IoT and Wearables**: The growth of the Internet of Things (IoT) and the increasing popularity of wearables will create new opportunities for mobile app development. Developers will need to consider the unique challenges and limitations of these devices when designing apps for them.

These trends and others will continue to shape the future of mobile development, and it’s essential for developers to stay up-to-date with the latest technologies and best practices in order to stay competitive.
Creating Smart Contracts in Solidity
Tags: web3, blockchain, solidity, ethereum
Published: 2023-02-13 16:37:44

>A smart contract is a self-executing program with the terms of the agreement between buyer and seller being directly written into lines of code on blockchain. 

Smart contracts are computer programs that are recorded on a blockchain and are activated when certain criteria are satisfied. A typical application of this technology is to automate the implementation of an agreement so that all participants may be certain of the conclusion instantly, without the involvement of a middleman or the loss of valuable time. When certain conditions are met, they can also automate a workflow, triggering the next action to be performed.

Contracts in Solidity are analogous to classes in object-oriented languages in their functionality. It contains data that is persistent in state variables and functions that can modify the data in these variables. It is possible to execute a function on a separate contract (instance) by executing an EVM function call. This will swap the context, preventing access to state variables in the calling contract. Before anything can happen, it is necessary to invoke the contract and its functions. In Ethereum, there is no idea of a "cron" that can be used to automatically call a function at a specific event.

Smart contracts function by executing basic "if/when...then..." statements that are typed into code and stored on a blockchain. Smart contracts are becoming increasingly popular. When the preset criteria are met and validated, the operations are carried out by a network of computers connected. These measures could include releasing funds to the proper parties, registering a vehicle, providing notices, or issuing a citation, among others. When the transaction is completed, the blockchain is updated to reflect the new information. Because of this, the transaction cannot be modified, and only those who have been granted access can view the results.

In a smart contract, there can be as many specifications as necessary to ensure that the task is accomplished correctly and that all parties are satisfied with the outcome. The terms of the agreement must be determined by the participants, who must agree on how transactions and their data will be represented on the blockchain, agree on the "if/when...then..." rules that will govern those transactions, explore all possible exceptions, and define a framework for resolving disputes.

Later, a developer can create the smart contract, however increasingly, firms that use blockchain for business are providing templates, web interfaces, and other online tools to make the process of creating smart contracts more convenient for their customers.

##Simple smart contract in Solidity:
```
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

contract HelloWorld {
    string public greet = "Hello there";
}
```
For more content, follow me at - https://linktr.ee/shlokkumar2303
JavaScript Tutorial Series: Arrays
Published: 2023-02-13 16:34:20

We've previously seen how to store a value inside a variable. In this post we're going to learn how to store multiple values in one variable.

## What is an array ?
An array is a variable that can hold multiple values. 

### How to declare an array ?
To declare an array we start by giving it a name and followed by an equal sign and two square brackets.

```JavaScript
let animals = [];
```
The code above denotes an empty array. The word `array` is a reserved keyword in JavaScript which means you cannot name your variable `array`.

```JavaScript
let animals = ["dog", "cat", "duck", "penguin"];
```
We can give entries to our array as you see in the example above. The entries we provided are strings that are comma separated. The arrays can hold multiple types such as numbers, strings and booleans.

## How to access the data in an array?
In the last post we've seen that we can access a string using bracket notation which use zero-based indexing. Arrays work the same way. 

So Since Arrays are similar to strings, meaning arrays use zero-based indexing. The first element of an array has an index of 0.

```JavaScript
let animals = ["dog", "cat", "duck", "penguin"];
console.log(animals[0]); //dog
```
You can also modify an array using indexes like so:

```JavaScript
let animals = ["dog", "cat", "duck", "penguin"];
animals[0] = "bird"
console.log(animals[0]); //bird
```

## Nesting an array into another
You can nest an array into another. This is called a multi-dimensional array, and it is done like so: 

```JavaScript
const numbers = [
 [10,11],
 [9,5],
 [7,8,9]
];

```
### Accessing multi-dimensional arrays
A multi dimensional is an array that holds multiple arrays and since it is an array we can access it the same way. 

Let's say we want to get the value 5, how do we do that. Keep in mind that an array uses zero-based indexing.

```JavaScript
const numbers = [
 [10,11], //0
 [9,5], //1
 [7,8,9] //2
];

```
So number 5 is found in the first index  of the numbers array and is in the first index of that array. 

Meaning you get the index of the array then the index of the item in that array 
`array[index of the array][index of item in the array]`

```JavaScript
const numbers = [
 //0 1
 [10,11], //0
 //0 1
 [9, 5], //1
 //0 1 2
 [7, 8, 9] //2
];

console.log(numbers[1][1]); //5
```