teleren/devto huggingface dataset:
React State Derivation
Tags: react, renantsx
Published: 2023-04-17 15:06:56

State Derivation é uma técnica que envolve a criação de novos valores de estado com base em um estado atual, em vez de armazenar novos valores diretamente no estado do componente.

O uso de State Derivation pode ajudar a manter seu código organizado, simplificar a lógica de negócios e melhorar a experiência do usuário, reduzindo o tempo de resposta do aplicativo.

**Sem State Derivation**

O componente Login utiliza o hook useState para controlar o estado dos campos do formulário e o hook useEffect para monitorar alterações em firstName e lastNamee atualizar fullName.
Como consequência da atualização do estado, a função de renderização do componente é executada novamente, fazendo com que a interface do usuário seja atualizada. Portanto, sempre que firstName, lastName ou fullName são atualizados, o componente é renderizado novamente.

[React sem State Derivation (codepen.io)](https://codepen.io/renan-tsx/pen/WNaxvdo)
{% codepen https://codepen.io/renan-tsx/pen/WNaxvdo %}

**Com State Derivation**

O componente Login utiliza o hook useState para controlar os estados de **`firstName`** e **`lastName`**. Em vez de utilizar um segundo hook para atualizar **`fullName`**, o valor é calculado diretamente dentro da função de renderização, sem o uso de um hook adicional.

Dessa forma, é possível reduzir a quantidade de renderizações do componente, uma vez que a atualização de **`fullName`** não provoca uma nova renderização. Essa abordagem é possível devido ao fato de que **`fullName`** é um valor calculado a partir de **`firstName`** e **`lastName`**, não necessitando de um estado separado para ser armazenado.

[React com State Derivation (codepen.io)](https://codepen.io/renan-tsx/pen/KKGMdgR)
{% codepen https://codepen.io/renan-tsx/pen/KKGMdgR %}

> Em certos contextos, é possível diminuir ainda mais a renderização dos componentes. Confira o seguinte artigo: ["Quando não utilizar estados no React"](https://dev.to/renantsx/quando-nao-utilizar-estados-no-react-44mj).
Checking File Permissions in your Git Repo
Tags: git, programming, tutorial, linux
Published: 2023-04-17 14:34:48

Files in Git are assigned either `644 `(owner `rw-`, group and other `r--`) or
`755 `(owner `rwx`, group and other `r-x`). Ownership information is not
stored.

You can check the status of a file via:
```bash
git ls-files -s script.sh
```
The output of this command is structured as:
```bash
[<tag> ]<mode> <object> <stage> <file>
```

A sample:
```bash
100644 b43ebcdea6790f7f8018 0       script.sh
```

The key piece above is the mode tag, `100644`. The `100` prefix to the mode signifies that this file is a normal file. Then this is where you will see either a `644` or a `755` file mode.


As you can see, the file has `644` permission, and we want to change this now to `755`: 
```bash
git update-index --chmod=+x script.sh
```

Inversely, we can remove the executable permission via: 
```bash
git update-index --chmod=-x script.sh
```

All that's left is to commit your changes!
```bash
git commit -m "FIX: Changing file permissions"
[main 77b171e] Changing file permissions
0 files changed, 0 insertions(+), 0 deletions(-)
mode change 100644 => 100755 script.sh
How to design a portfolio website using Figma
Tags: figma, webdev, beginners, tutorial
Published: 2023-04-17 14:28:30

{% youtube q4FrDE2lJ9g %}

Welcome to our latest YouTube tutorial on Soudemy!

In this video, we're going to take you through the process of designing a minimal and sleek Personal Portfolio design using Figma. We're excited to share this tutorial with you and help you bring your design skills to the next level!

Our main focus for this project is to showcase the power of minimalism and attention to detail in web design. By following some simple design rules and principles, you'll be able to create a beautiful and functional landing page that is unique to you.

So, if you're ready to learn some key design principles and create something truly stunning, then join us in this tutorial. We guarantee you'll enjoy the process and come out with a website landing page that you can be proud of. Let's get started!

Landing Page Design In Figma | Figma Tutorial For Beginners
Please, if you love it, support us with Like & Subscribe.🙏🙏❤️❤️


Starter Pack:
https://www.figma.com/file/Y5jU57joAb...

Let's be friends and connect
📩 Subscribe:https://shorturl.at/BCTV8
📷 Instagram: https://www.instagram.com/soudemy/
📱 Behance: https://www.behance.net/soudemy
🐦 Twitter: https://twitter.com/SoudemyAcademy

In the comments, you can say what design you want so that we can prepare the video for you.

#figma #figmadesign #figmatutorial #tutorial #figmatips
Exodus Effect - Results, Price, Reviews, Benefits & Where To Buy?
Tags: webdev, javascript, beginners, programming
Published: 2023-04-17 14:25:38

[Exodus Effect](https://www.outlookindia.com/business-spotlight/exodus-effect-anointing-oil-scam-exposed-you-must-know-it-news-240684) shortcuts to do this with Weight Loss Supplement. This is why it's called this element. I got my hand caught in the honey pot this time. I feel about that practically every day. I pulled this information in from a pool of societies. 
[https://www.outlookindia.com/business-spotlight/exodus-effect-anointing-oil-scam-exposed-you-must-know-it-news-240684](https://www.outlookindia.com/business-spotlight/exodus-effect-anointing-oil-scam-exposed-you-must-know-it-news-240684)
https://lexcliq.com/exodus-effect-results-price-reviews-benefits-where-to-buy/
https://soundcloud.com/exodus-effect-480872917/exoduseffectfact
What are your goals for the week of April 16?
Tags: discuss, motivation
Published: 2023-04-17 14:22:55

## What are your goals for this week?
 
- What are you building? 
- What will be a good result by week's end?
- Are you attending any events this week?
- Did you meet your goals last week?
- If you are in the US, Have you done your TAXES? You don't have to answer here just get it done.

I'll start with how I did last week.

### Last Week's Goals

- [:white_check_mark:] Continue Job Search. Interview Next week.
- [:x:] Blog.
- [:x:] Finish portfolio refactor.  I think I still need to add a couple more projects. 
How many interactive projects should be on a portfolio? 
- [:white_check_mark:] Virtually Attend Dallas Software Developers Meetup. 
- [:white_check_mark:] Attend Virtual Coffee Thursday.
- [:white_check_mark:] Another VC event if I can. I attended a Lunch and Learn on Networking.
- [:white_check_mark:] Update content on another site.
- [:white_check_mark:] Code Challenge or Build Something. Sort of. I been doing interview prep with coding exercise but didn't build anything new.


### This Week's Goals

- Continue Job Search.
- Interview prep going to do some coding exercises and reading.
- Finish portfolio refactor.
- Blog
- Events
  * Virtually Attend ADA & Web Accessibility seminar.
  * Attend [PluralSight Tech Skills](https://www.pluralsight.com/techskillsday) Day Thursday April 20. Looks like the Key Note overlaps with Virtual Coffee. I have to make a decision. 
  * Attend Virtual Coffee Thursday. Other VC events if I can.

### Your Goals for the week


You've read my goals so I'll throw that question back to you.

What are your goals for the week?

```
-$JarvisScript git push
```
Nested Components - A bad practice? - ReactJS
Tags: webdev, javascript, react, beginners
Published: 2023-04-17 14:17:32

Is creating a component inside another components a bad practice? Isn't it a cool way to code in ReactJs? Doesn't ReactJs allows us to create nested components?

To answer, creating components inside of other components may seem convenient at first, but it can lead to several problems:

```jsx
export default function ParentComponent(props) {
  function InnerComponent() {
    // ...
  }

  return (
    <>
      <InnerComponent />
    </>
  );
}
```
To begin with, nested components become tightly coupled with the parent component, making them less reusable. Inner components cannot be exported and reused; instead, they are passed down as props to other components, resulting in less modular code.

Additionally, creating components within components can lead to performance issues. The declaration function for the inner component will be recreated on each render cycle of the parent component. This can result in the application losing its previous state and slowing down, especially in larger projects.

While ReactJs does not explicitly prohibit the creation of nested components, it is generally preferable to avoid creating components within other components. Keeping components in their own files, on the other hand, can ensure modularity and reusability.

This can be avoided by creating a separate component in another file and importing it in another component.

```jsx
// InnerComponent.js
const InnerComponent = (props) => {
  // ...
}

export default InnerComponent;
```

```jsx
// ParentComponent.js
import InnerComponent from './InnerComponent';

const ParentComponent = (props) => {
  return (
    <>
      <InnerComponent />
    </>
  );
}

export default ParentComponent;
```
For example, if you have a button component that is used throughout the application, it is best to keep it in a separate file so that it can be easily imported and reused throughout the app.

Or you can create a component outside the component, for example some popup form that has a limited scope in the application.

```jsx
function InnerComponent(props) {
  return (
    // ...
  );
}

export default function ComponentTwo(props) {
  return (
    <>
      <InnerComponent />
    </>
  );
}
```
 
So, if you're working on a React project, keep your components organised in their own files to maximise reusability and performance.
Music Monday — What are you listening to? (Live Music Edition II)
Tags: watercooler, discuss, music
Published: 2023-04-17 13:58:27

_cover image source: [ApolloTheater](https://giphy.com/gifs/ApolloTheater-L42IXFAkN7KpryeqfO)_

**Hope y'all don't mind, but we're gonna retread some ground here and talk live music (see the original live music thread [here](https://dev.to/music-discussions/music-monday-what-are-you-listening-to-live-music-edition-28ad or the live DJ edition [here](https://dev.to/music-discussions/music-monday-what-are-you-listening-to-favorite-live-djs-2cd6)). This is always a fun topic and I'm looking forward to revisiting it. So, think back to any particularly good shows ya have been to or feel to point us to your favorite live albums. There are also channels that focus on performances (think [NPR's Tiny Desk ](https://www.youtube.com/playlist?list=PL1B627337ED6F55F0) or [Blogothèque](https://www.youtube.com/@blogotheque)) capturing artists doing stripped down sets sometimes in public areas and other times in the studio — these count too! Wherever ya wanna take this prompt, I wanna hear your suggestions. And as always, feel free to step outside the confines of the topic... share what ya like!** 😀

![James Brown dancing and doing a split live on stage while the band backs him up.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/idqiq2cm8vfk5lnpad83.gif)

***

## How we do 

In this weekly series, folks can chime in and drop links to whatever it is they've been listening to recently + browse others suggestions.

If you like talking about music, consider following the org [#music discussions](https://dev.to/music-discussions) for more conversations about music!

{% embed https://dev.to/music-discussions %}

***

Okay, let's get rolling... what are your favorite live music performances? _Note: you can embed a link to your song using the following syntax `{% embed https://... %}`. This should work for most common platforms!_

Looking forward to listening to y'all's suggestions! 🎶
Lambda Expression
Tags: java, lambda
Published: 2023-04-17 13:46:08

Lambda expression is a new feature that created in Java 8. It provides a clean and concise way to implement one method interface aka `@FunctionalInterface`. You are maybe familiar on using Runnable or Comparator class. Implementing these classes, requires you to create a new class or anonymous class. Luckily lambda is existed thus removing the verbosity of the Java language.

Say we want to sort a list of names. We can use `Collections.sort()` method and implement an anonymous class of Comparator.

```java
List<String> names = Arrays.asList("Jerome", "Steve", "Cathy", "Lara");

Collections.sort(names, new Comparator<String>() {
    @Override
    public int compare(String a, String b) {
        return b.compareTo(a);
    }
});
```

We can shorten the code above using lambda expression.
```java
Collections.sort(names, (String a, String b) -> {
    return b.compareTo(a);
});
```

Heck, we can even make it shorter. If it is just one liner method, we can omit the braces and return keyword.
```java
Collections.sort(names, (a, b) -> b.compareTo(a));
```

Sweet! Lambda expression not only make our code readable but also removes the noise from it, giving us more focus in the behavior part of our code.
ReactJS with Laravel | Perfect Stack For Robust SaaS Development
Tags: react, laravel, developer, development
Published: 2023-04-17 13:26:24

The development of SaaS (Software as a Service) apps is now more popular than ever. Rapid growth is occurring. In 2022, SaaS generated USD 233 billion in sales. By the end of 2024, it is projected to reach USD 369.4 billion.

**What is ReactJS?**

Facebook created the open-source ReactJS JavaScript library to aid in the creation of user interfaces for mobile apps and online development. It is one of the most used libraries for creating intricate user interfaces.

**Benefits of Using ReactJS for SaaS Development**
1. Shorter Learning Curve
2. Easy Rendering
3. SEO Integration

**What is Laravel?**

2011 saw the creation of the open-source Laravel framework by Taylor Otwell. One of the most popular frameworks among programmers is this one. It makes it simple to create modern, secure, and scalable apps.

**Benefits of Using Laravel for SaaS Development**
1. Documentation
2. Database Migration
3. Security

**What Makes ReactJS and Laravel a Perfect Stack for SaaS Development?**

You may be questioning why to utilize the different frameworks together now that you know the advantages of using each separately while developing SaaS applications. Here are some of the finest justifications for combining Laravel with ReactJS in SaaS development.

1. Effectiveness and Scalability
2. Performance
3. Easy Integration
4. Complementing Functionality

**Steps to Build a SaaS Application with ReactJS and Laravel**
1. Set Up the Environment
2. Create APIs Using Laravel
3. Build Components Using ReactJS
4. Integrate ReactJS and Laravel
5. Deploy the SaaS Application

You must already be aware of the reasons [ReactJS and Laravel](https://www.anillabs.com/2023/04/reactjs-with-laravel-perfect-stack-for-robust-saas-development/) are regarded as the ideal stack for creating SaaS applications. It's time to use the combination as leverage. Both frameworks make creating apps simpler, allowing you to compete by releasing apps more quickly to the market.
How to mock the logger in Go?
Tags: tutorial, go, productivity
Published: 2023-04-17 13:26:00

Writing unit tests is always something really important, but it can be really long or complex. Sometimes, we have some code which can only be checked by reading logs. 

So today, we will see how to adapt our code to resolve this issue and make easier to write your unit tests.

---

## Adding a new variable
To  make it happen, we will  use  a technique which is already known in the Golang Unit test universe, that is : **create a variable to store the object or function we want to mock**.

In every package, we will create a `log.go` file which will contain the following code :

```go
var logger = log.New(os.Stderr, "", log.LstdFlags)
```

Then, you will be able to use it like the other logger :  `logger.Println(...)`

> But where did this code came from?

This line of code comes from the `log` package. It's the declaration of the `std` variable which is used in the `log.Println` function  for example.

And as you can see, we just duplicate the declaration of this new logger instance, but we did it in our packages to be able later to replace it with our mock.

---

## Mock
Now that we have those variables created, it will be really easy to mock them.

But first, we need to create the mock!
```go
var (  
	buff bytes.Buffer  
	MockLogger = log.New(&buff, "", log.LstdFlags)  
)
```

As you can see, the mock is almost the same than the logger. The only difference is **the mock is using a buffer as output**. This difference is quite huge because it will allow us to **be able to read the printed logs**.

So in your unit tests, you can declare the following line to replace your `logger` by your mock.
```go
logger = mocks.MockLogger
```

And then, you only have to retrieve the logs contained in the buffer with this `strings.Split(mocks.Buff.String(), "\n")` to be able to do your lasts verifications.

---

Finally, overall it's quite simple but it let us do more than before!

I hope it will help you! 🍺

---

<center><h3>You want to support me?</h3></center>
<a href="https://www.buymeacoffee.com/mxguilbert7" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>
Comment mocker le logger en Go?
Tags: go, tutorial, productivity, french
Published: 2023-04-17 13:25:00

S'occuper des tests unitaires est toujours quelque chose de très important, mais aussi qui peut se révéler très long et/ou complèxe. Il arrive dans certaines situations qu'on se retrouve avec du code où la seule manière qu'on a de le vérifier si il a été appelé est de regarder les logs. *(Surtout en Go où ça peut vite devenir la foire à la saucisse, mais où malheureusement l'injection dynamique de mocks n'existe pas)*

Donc aujourd'hui on va voir comment adapter votre code pour résoudre ce problème et faciliter vos prochains tests unitaires.

---

## Ajout d'une nouvelle variable
Pour faire simple, on va utiliser une technique déjà connue dans les tests unitaires en Go pour résoudre ce problème qui s'agit de **créer une variable qui va contenir l'objet ou la fonction à mocker**.

Dans chaque package, vous pourrez alors créer un fichier `log.go` dans lequel vous allez ajouter le code suivant :

```go
var logger = log.New(os.Stderr, "", log.LstdFlags)
```

Ensuite, vous n'aurez qu'à l'utiliser avec `logger.Println(...)`

> Mais d'où vient ce code?

Ce code vient juste de la déclaration de la variable `std` dans la librairie `log`. Techniquement, on ne fait juste que dupliquer cette variable afin d'être capable de la modifier quand on en aura besoin.

---

## Mock
Maintenant que vous avez ces variables de créées, il est bien plus simple de les mocker.

Pour ce faire, on va utiliser le code suivant
```go
var (  
	buff bytes.Buffer  
	MockLogger = log.New(&buff, "", log.LstdFlags)  
)
```

Comme vous le constatez la déclaration du mock est quasi identique à la déclaration du logger. La seule différence étant **que le mock utilise un buffer comme endroit où écrire**. Et cette différence est très importante car c'est grâce à cela qu'on va être capable ensuite **de lire dans ce buffer pour voir quels logs ont été appelés**.

Du coup, dans vos tests unitaires, il faut déclarer la ligne suivante pour remplacer votre `logger` par le mock
```go
logger = mocks.MockLogger
```

Et derrière, il ne vous restera qu'à récupérer le contenu des logs dans le buffer avec `strings.Split(mocks.Buff.String(), "\n")` pour être capable d'effectuer vos dernières vérifications.

---

Comme vous pouvez le voir, le tout reste simple, mais permet énormément de choses en plus qu'avant.

En tout cas j'espère que ça vous aidera! 🍺

---

<center><h3>Vous voulez me supporter?</h3></center>
<a href="https://www.buymeacoffee.com/mxguilbert7" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>
HOW TO CREATE A WINDOWS VM, RDP INTO THE VM, INSTALL A WEB-SERVER AND ADD A DISK TO IT.
Tags: beginners, tutorial, cloud, azure
Published: 2023-04-17 13:04:09

**STEP 1**: CREATING A WINDOWS VIRTUAL MACHINE

- In your azure portal, search for "virtual machine". Select "Azure virtual machine".
- Choose your subscription, add your resource group, give the vm any name of choice, change your "image" to windows, add a username and password for your administrators account, add Https in the "select inbound ports" row, tick the licensing box.
- Click on review+create, wait for validation to be complete then click on Create.

**STEP 2**: RDP IN TO THE VM

- Once deployment is completed, Go to resource.
- Click on "connect" and choose RDP then wait for the page to load, scroll down the page and download the RDP file.
- Once it’s been downloaded, click on "open" then click on "connect"
- Fill in your credentials i.e the username used for your administrator’s account earlier, click on "OK" and then "YES"

**STEP 3**: INSTALLING A WEB-SEVER

- Once it’s been connected to the vm, search for "Powershell" in the search panel.
- Click on it and choose "Run as admin"
- Once the administrators windows power-shell is up then type in this command: Install-windowsFeature web-server
- Click on enter, wait for the successful installation of the web-server.
- Go back to the "Overview page" of the vm, copy the ip address and paste it in your browser (google), hit enter to see the web-server you just installed.

**STEP 4**: ADDING A DISK TO IT (DATA DISK)

- Go back to your virtual machine, Click on on "Disk"
- Click on create and enter a data disk, give it a random name, change "Size" to 10Gb then click on "Safe"
- Go back to your vm Rdp section and on the search bar, search for Disk management.
- Once it opens, click on Ok.

**STEP 5**:
- Scroll down to disk 2, right click on it for options, choose "New simple volume"
- Click on Next, go with the default for the next two pages then in the "Format partition" row, give your volume label the name "Data disk" to format the new volume label.
- Click on Next, then click on Finish.

N/B Before using a new volume, you must format it by giving it a new name.