teleren/devto huggingface dataset:
ReactJS : When to use Class Component Over Function Component?
Tags: react, javascript, frontend, components
Published: 2023-03-04 20:53:17

We all know that there are two types of components in React.

**1. class components**
**2. function components**

Before React 16.8, function components were stateless.
However, with the introduction of hooks in React 16.8,Function components became capable of having state and lifecycle methods (here I am referring to lifecycle methods using hooks).

The ability to share stateful logic independent of UI rendering logic made function components popular among React developers. With function components, we can do almost everything possible with class components. 

Then why does ReactJS still have class components?
Despite Having so many useful features in function components, There are some cases in which we need to use the Class component over the Function component:

**1. Error boundary**

When an error occurs usually it displays a component tree that crashed on screen, it can leave a bad impression on the end-user.

Error boundaries help us deal with this situation.
Error boundaries allow us to display fallback UI when an error occurs inside a component.

We can use error boundaries to trace client-side errors and provide useful information for debugging.
It's not possible to create an error boundary with a function component. 

Error boundaries can only be implemented with class components.


**2. Pure Component**

Many times, we need to avoid unnecessary re-rendering of components depending on certain criteria.

In such cases, We can use pure components by extending React.PureComponent, as they have a static method "shouldComponentUpdate" that decides whether to re-render or not based on the component's props and state.

Many times react js developers use the "useMemo" hook to avoid unnecessary re-rendering like this :

```

   const App=()=>{

                return useMemo(()=>{
                    return <>{/*Code*/}</>
                  },[dependancies])
              }

```
 

However, everything before the "useMemo" hook will still be executed when the component updates its state. Therefore, "useMemo" may not always be the best option for avoiding unnecessary re-rendering.

Since we cannot create pure components with function components, we will need to use class components.

**3. Life Cycle methods**

 I know This should not be the case, because most lifecycle methods like componentDidMount, componentDidUpdate, or componentWillUnmount can be replaced with useEffect.

It is important to note that the useEffect hook requires some extra care when it comes to dependencies and avoiding infinite loops.

One has to be very careful about dependency. and make sure dependency is not updated from inside the hook (this can lead to an infinite loop)

In a class component, the lifecycle methods are executed automatically when certain events occur, such as when the component is mounted, updated, or unmounted.
FREE AWS Cloud Project Bootcamp Week 2 Part 2
Tags: aws, cloud, awscommunity, 100daysofcloud
Published: 2023-03-04 20:51:20

[63/100] #100DaysOfCloud Today, I completed the Week 2 of the FREE AWS Cloud Project Bootcamp by Andrew Brown.

Checkout what I did for Week 2: [GitHub](https://github.com/aaditunni/100DaysOfCloud/blob/main/Journey/063/Readme.md)

You can watch the Bootcamp through this YouTube playlist : [FREE AWS Cloud Project Bootcamp playlist](https://youtube.com/playlist?list=PLBfufR7vyJJ7k25byhRXJldB5AiwgNnWv)
Tranforming arrays with .reduce()
Published: 2023-03-04 20:46:52

```javascript
const menuItems = [
  { item: "Blue Cheese Salad", price: 8 },
  { item: "Spicy Chicken Rigatoni", price: 18 },
  { item: "Ponzu Glazed Salmon", price: 23 },
  { item: "Philly Cheese Steak", price: 13 },
  { item: "Baked Italian Chicken Sub", price: 12 },
  { item: "Pan Seared Ribeye", price: 31 }
];

const total = menuItems.reduce((accumulator, menuItem) => {
  console.log(`
    accumulator: ${accumulator},
    menu item price: ${menuItem.price}
  `);
  return accumulator + menuItem.price;  
}, 0);
console.log(total);
```
To get menu price total

```javascript
const menuItems = [
  { item: "Blue Cheese Salad", price: 8 },
  { item: "Spicy Chicken Rigatoni", price: 18 },
  { item: "Ponzu Glazed Salmon", price: 23 },
  { item: "Philly Cheese Steak", price: 13 },
  { item: "Baked Italian Chicken Sub", price: 12 },
  { item: "Pan Seared Ribeye", price: 31 }
];

const mealChoices = menuItems.reduce((accumulator, menuItem) => {

  return accumulator + menuItem.item + ', ';  
}, '');
console.log(mealChoices);
```
To get all the meal item choices
Activate the first Bootstrap collapse in Django for dynamic data.
Tags: javascript, webdev, python, django
Published: 2023-03-04 20:23:20

To activate the first Bootstrap collapse in Django for dynamic data, you can use a combination of Django template tags and JavaScript. Here's how you can do it:

1. In your Django template, use a loop to iterate over your dynamic data and generate the necessary HTML elements for the collapsible sections. Make sure to give each collapsible section a unique ID.

```
{% for item in dynamic_data %}
  <div class="card">
    <div class="card-header" id="heading{{ forloop.counter }}">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse{{ forloop.counter }}" aria-expanded="{% if forloop.first %}true{% else %}false{% endif %}" aria-controls="collapse{{ forloop.counter }}">
          {{ item.title }}
        </button>
      </h2>
    </div>
    <div id="collapse{{ forloop.counter }}" class="collapse {% if forloop.first %}show{% endif %}" aria-labelledby="heading{{ forloop.counter }}" data-parent="#accordion">
      <div class="card-body">
        {{ item.content }}
      </div>
    </div>
  </div>
{% endfor %}

```
In this example, we're using Bootstrap's card and collapse components to create the collapsible sections. We're also using Django's for loop and forloop.counter to generate unique IDs for each section. Note that we're setting aria-expanded to true for the first section and false for the rest.

2. Add the necessary JavaScript code to activate the first collapsible section. You can do this by using jQuery to trigger a click event on the first collapsible section's button.

```
$(document).ready(function() {
  // Trigger click event on first collapsible section
  $('#heading1 button').trigger('click');
});

```
In this example, we're using jQuery's ready() function to wait for the page to load before triggering the click event. We're then using jQuery's trigger() function to simulate a click on the button of the first collapsible section.

Note that in this example, we're assuming that the first collapsible section has an ID of heading1. If your IDs are different, you'll need to adjust the JavaScript code accordingly.

By using this approach, the first collapsible section will be automatically expanded when the page loads, while the rest will be collapsed.
Deploying VPC after creating your EC2 instances
Published: 2023-03-04 20:08:12

After creating your ec2 instance which was my last post, we need to deploy VPC and in this course we are talking about aws vpc, and you can copy vpc resources on terraform website.  To create your VPC, 

   We need to create a new new .tf file which I named main.tf,  this file will contain your VPC resources 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xxgbhqqlgxvetd8x5ca9.png) 
NOTE : all file created will work as one file.

after you've provided your resources , you need to apply the resources by typing terraform plan on your VScode terminal.

after that, you need the apply phase by typing terraform apply on your terminal. 

your VScode will ask for confirmation to apply , type yes to confirmed and your VPC is created .

my next post will be creating internet gateways  because we are going to be building developers environment together;
Design vs Engineering: Making the Right Choices for Your Project
Tags: design, engineering, tools, project
Published: 2023-03-04 19:31:10


Hey there! 😃

Do you ever get confused between design and engineering? 😕
It happens to the best of us! But it's super important to know the difference between the two, so you can make the right choices for your project.

## Engineering vs Design

👷‍♀️ Engineering is all about solving a problem when you've got all the input data and there's one optimal solution that meets the criteria. Meanwhile, design is all about working with lots of uncertainties, where you just know what you want to achieve, but there are a bunch of different options to get there. 

For example, let's say you want to let users buy products on your site. An engineer might immediately start thinking about integrating Stripe or Paypal. But a designer might consider whether a phone number to call to place an order would work better. 

🚫 One big trap that developers fall into is skipping the design phase and jumping straight into engineering. This can lead to bad choices and prevent short iterations. To avoid this, always ask yourself: "What problem am I trying to solve with this?" 

👉 Here are some examples of how asking the right questions can help you make better decisions: 

<table>

<thead>

<tr>

<th>❌ Task</th>

<th>✅ Better Question</th>

</tr>

</thead>

<tbody>

<tr>

<td>We need ElasticSearch</td>

<td>What searches does the user want to do? </td>

</tr>

<tr>

<td>We need Redux</td>

<td>What's holding us back in the frontend code when we want to evolve the UI?</td>

</tr>

<tr>

<td>We need Kafka</td>

<td>How do we organize our monolith to speed up developments? </td>

</tr>

<tr>

<td>We need NEXT.js</td>

<td>What benefits do we get with server-side rendering? </td>

</tr>

<tr>

<td>We need AWS</td>

<td>How does the user perceive the level of availability and performance of our SaaS?</td>

</tr>

<tr>

<td>We need GraphQL</td>

<td>How can we optimize the user experience by reducing the number of API requests and improving data fetching? </td>

</tr>

</tbody>

</table>

By asking the right questions, you can make sure you're making decisions that will benefit your users and your project. So don't skip the design phase, and take the time to consider all the possibilities before diving into engineering! 🚀
Linear search algorithm
Tags: javascript, algorithms, tutorial
Published: 2023-03-04 19:27:48

Lets see when can we use and what is the linear search algorithm for.

Lets say that we want to find an array a the index of an specific value we can do it with linear search when the array that we want to found is not something enormous, cause when the array is something gigantic we will want to use binary search but for now lets stay with linear search and lets see an example of it.

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

In the example above we can see that it will just return the index of the value given which in this case will be a, and the b value will be the array where we want to found the specific value.

If we also want to get the value of the specific index which should be the same as the given to the function we can just simple add a new variable to store the value and return it with the position value.

Hope someone found it interesting or helpful.

Lautaro
Accessing function in object or redux
Tags: javascript, webdev, tutorial, redux
Published: 2023-03-04 18:54:24

Let`s see how will you be able to access to a function inside the same object.

In this post i will explain how to do it in objects which is more generally and we are going to go throw an specific case in redux.

Let`s start seeing how to do it in an object.

First we are going to see the case when the functions inside the object are not defining as an arrow function

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

As we can see on the first example we are using this in order to be able to call the other function inside the object.

Now let`s see another example of getting the data of an object but in this case when we are defining the function with arrow functions.

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


As we can see now with arrow functions we will have to call the object and then the function we want to use in order to able to access it.

Now let's see an example which is basically the same as before but in a real life case.

Let`s say we created a store with reducers and we want to access another reducer within the same object as the other reducer function.

In this specific case we will be defining the object function with arrow function.

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

As we can see is basically the same as after. Remember to always think in retrospective and always think about the foundations of javascript it does not matter how complex the code it is.

Hope someone found it helpful, thanks for reading.

Lautaro.
Angular RxJS Unsubscriber
Tags: angular, unsubsriber, rxjs, rxjsunsubscriber
Published: 2023-03-04 18:31:15

## Unsubscriber

**Unsubscriber for RxJS subscription to unsubscribe.**

In Angular, we commonly used an RxJS subscription but sometimes we forget to unsubscribe it, which causes a memory leak. The advantages of using the `Unsubscriber` are that there is no need to manage the individual variables and unsubscribe to them (of course, it works fine, but it requires a little bit more code to write). Unsubscriber is a simple class to absorb RxJS subscriptions in an array. 

Call `unsubscribe()` to unsubscribe all of them, as you would do
in your component library's `unmount`/`onDestroy` lifecycle event.

## Installation

```bash
npm install unsubscriber --save
```

## Angular examples

There are 2 main ways to use the Unsubscriber: the "setter" way and the "add/array" way.

> RxJS supports adding subscriptions to an array of subscriptions. You can then unsubscribe directly from that array. If you prefer this technique with Unsubscriber using the setter syntax below, then use that.

### Technique Setter - Syntax

Example using the `queue` property to collect the subscriptions using a setter.

```ts
export class ExampleComponent implements OnDestroy {
  private bus = new Unsubscriber();

  ...
  this.bus.queue = observable$.subscribe(...);
  this.bus.queue = observable$.subscribe(...);
  this.bus.queue = observable$.subscribe(...);
  ...

  // Unsubscribe all subscription when the component dies/destroyed
  ngOnDestroy() {
    this.bus.unsubscribe();
  }
}
```

### Technique Array/Add - Syntax  

Example using the `.add` technique. This is similar to what RxJS supports out of the box.

```ts
export class ExampleComponent implements OnDestroy {
  private bus = new Unsubscriber();

  ...

  this.bus.add(observable$.subscribe(...)); 

  this.bus.add(observable$.subscribe(...)); 

  // Add multiple subscriptions at the same time
  this.bus.add( 
    observable1$.subscribe(...),
    observable2$.subscribe(...),
    anotherObservable$.subscribe(...)
  ); 

  ...

  // Unsubscribe all subscription when the component dies/destroyed
  ngOnDestroy() {
    this.bus.unsubscribe();
  }
}
```
[Github](https://github.com/techindeck/unsubscriber#readme) [Techindeck](https://github.com/techindeck)
Eric Teaches Adult 019 - Pokémon Mega Evolution
Tags: pokemon, blog
Published: 2023-03-04 18:21:33

https://youtu.be/cWTAbNEKpxo

This is the Nineteenth series of "Eric Teaches Adult". Eric gives a weekly light talk, to improve his presentation skills (and to teach his Daddy (me) something new).

Eric likes to teach me something every week - and he starts with his favorite Pokemon, he plans to do this for at least 18 weeks. 

It is a good way to improve his presentation skills.

- What is Pokemon Mega Evolution?
Pokémon Mega Evolution is a special type of evolution that was introduced in the sixth generation of Pokémon games. It allows certain Pokémon to temporarily transform into a more powerful form during battle, granting them new abilities, increased stats, and often a change in appearance. To trigger a Mega Evolution, the Pokémon must be holding a specific Mega Stone and its Trainer must have a corresponding Mega Ring or Mega Bracelet. Mega Evolution is a popular mechanic among Pokémon fans, and many Pokémon have unique and impressive Mega Evolution forms.

这是我家大娃的 "Eric Teaches Adult" 系列第19期。
主要是让娃提高一下表达能力，轻喷。

宝可梦的超级进化是在第六代宝可梦游戏中引入的一种特殊进化方式。它允许某些宝可梦在战斗中暂时变形为更强大的形态，赋予它们新的能力、提高其属性，并经常改变外观。要触发超级进化，宝可梦必须持有特定的超级石，并且它的训练师必须拥有相应的超级手环或超级手镯。超级进化是宝可梦粉丝中非常受欢迎的机制，许多宝可梦都拥有独特而令人印象深刻的超级进化形态。

[Pokemon series videos](https://zhihua-lai.com/teaching/?s=&cat=pokemon)
How to modify the color of the address bar when a visitor navigates to your website?
Tags: webdev, javascript, html, css
Published: 2023-03-04 18:09:23

Changing the color of the address bar is typically achieved through the use of browser-specific meta tags. Here's an example:

1.Add the following meta tag to the head section of your HTML document:

```

<meta name="theme-color" content="#RRGGBB">


```

2.Replace #RRGGBB with the desired color code in hexadecimal format.

3.Save your changes and upload the modified HTML file to your website.

4.When a visitor navigates to your website using a supported browser, the address bar will display the specified color.
How to Use a Script to Hide Data in Video Files
Tags: programming, news, security, tutorial
Published: 2023-03-04 17:56:11

**Exploring Steganography:**

[Steganography ](https://github.com/topics/steganography-tools)is a technique used to hide information or messages within an image, audio, or video file, without changing the appearance of the file itself. The goal is to make it difficult for others to detect that there is any hidden information in the file. This technique has been used for centuries, dating back to ancient Greece and Rome, and has been adapted to digital formats in recent years.

One way to hide data within a video file is by using a script that alters the least significant bit (LSB) of each pixel in the video. The LSB is the bit that has the least impact on the visual quality of the image, so changing it slightly won't be noticeable to the human eye. The script changes the LSB of each pixel to encode the hidden data in the video file. The data can then be extracted from the video file using the same script, which reads the LSB of each pixel to reconstruct the hidden data.

One of the primary benefits of steganography is that it provides an additional layer of security for sensitive data. If an attacker intercepts the video file, they may not be able to detect the hidden data, making it more difficult to access the sensitive information. Additionally, using steganography allows for discreet communication between parties, as the cover medium (in this case, the video file) appears to be a regular, non-sensitive file.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/09agd3bfb77p33u44p0h.jpg)
However, it's important to keep in mind that steganography is not a foolproof method for securing data. Some software tools can detect steganography by analyzing the statistical properties of the cover medium. Additionally, the size of the hidden data is limited by the size of the cover medium. For instance, it may not be possible to hide a large amount of data within a short video clip.

In conclusion, using a script to hide data within a video file can be a useful technique for securing sensitive information. However, it's important to use steganography in combination with other security measures, such as encryption and secure transfer protocols, to ensure the confidentiality and integrity of your data. Additionally, it's important to be aware of the limitations and potential risks of using steganography for hiding data.

Before you go...
You can find me at @[Vignesh_N](https://www.linkedin.com/in/vignesh-n-o2/) on Linkedin or on Discord. 👋
10 important tags in HTML..
Tags: webdev, html, community, beginners
Published: 2023-03-04 17:38:24

HTML stands for Hyper Text Markup Language. HTML gives the structure to a a website. If we draw an analogy with human body, it is the skeleton of a website.
1. nav is a tag used to create navigation bar that is present at the top of the website. It starts with <nav> and ends with </nav>.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v5s4k5jalbsl5if75bpn.JPG)
code: 
`<nav class="navbar navbar h-nav" id="go">
        <div class="navbar-header he" id="headop">
          <img src="images/logo.jpg" alt="">
            <a class="navbar-brand " href="#">IBlood</a>
          </div>
        <div class="container-fluid cont">
          <ul class="nav navbar-nav visibility">
            <li class="active top"><a href="#">Home</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Donate</a></li>
            <li><a href="#">Emergency service</a></li>
            <li><a href="#">Check blood group</a></li>
          </ul>
        </div>
    </nav>`
2. p is the paragraph tag that is used to write a multi-line text.
   code: `<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam illo nostrum sunt enim cumque. Obcaecati
                  dicta voluptatibus at error ipsa.</p> `
3. s is a tag that is used to strikethrough text.
code: 
`<p>
Only 50 tickets left!
</p>
<p>SOLD OUT!</p>`

4. table is a tag that is used to produce data in a table format.
code: `<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>February</td>
    <td>Rs100</td>
  </tr>
  <tr>
    <td>March</td>
    <td>Rs80</td>
  </tr>
</table>`



5. The tr element defines a row in a table. it starts with tr and ends with /tr.
code: 
`<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>may</td>
    <td>Rs100</td>
  </tr>
  <tr>
    <td>july</td>
    <td>Rs800</td>
  </tr>
</table>`

6. Textarea is a multi-line tag that opens with Textarea and closes with /Textarea. A textarea can hold an unlimited number of characters. It is used to collect reviews and comments and even be used in form.
code: 
`<textarea rows="9" cols="70">  
</textarea>`

7. td elements are regular and left-aligned by default. This tag defines data cell in a table. It opens with <td> and closes with </td>.
code: 
`<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>may</td>
    <td>Rs100</td>
  </tr>
  <tr>
    <td>july</td>
    <td>Rs800</td>
  </tr>
</table>`

8. th elements are bold and centered by default. th tag defines a header cell in an HTML table.
code: 

`<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>`

9.label tag is used to name an input type.
code: 
`<label for="html">HTML</label>`


10.img tag is used to upload a image file in html
CODE:
`<img src="imgf.jpg" alt="a jacket" width="400" height="500">`

These tags are for HTML 5 
Editor: Sagnik Saha
I made a drag & drop dashboard builder for React and Chakra UI
Tags: webdev, react, css, html
Published: 2023-03-04 17:37:46

Hi,

I recently launched the Beta version of the new React & Chakra UI Dashboard Builder for Loopple.


I am now looking for feedback to see what do you think about this, what do you like/don't like and what would you like me to add in the next versions that can ease your development work.

[Chakra UI Dashboard Builder](https://www.loopple.com/theme/chakra-ui-dashboard)
[React Homepage](https://www.loopple.com/react)

Thank you!
Starting with JavaScript
Tags: beginners, javascript
Published: 2023-03-04 17:36:17

Our class entered its third week, and now we have begun to study JavaScript.

I had practiced JavaScript with freecodeacademy before (and for that matter, I had worked with C++ many years ago) but I can see how this is such a powerful language.

I've also been working on the projects for each module. As much time as they take to do, the more I do them, the more confident I become.

We'll see what comes up in the next few weeks! So far so good.