teleren/devto huggingface dataset:
Paracetamol.js💊| #165: Explica este código JavaScript
Tags: javascript, spanish, webdev, programming
Published: 2022-07-12 18:57:04

## **<center>Explica este código JavaScript</center>**
#### <center>**Dificultad:** <mark>Básico</mark></center>

```js
const porValor = (nombre) => {
  nombre = "Pedro";
  return nombre;
}
let nombre = "Juan";
console.log(porValor(nombre))
console.log(nombre);
```

A. `Pedro`, `Pedro`
B. `Juan`, `Juan`
C. `Pedro`, `Juan`
D.  `Juan`, `Pedro`

Respuesta en el primer comentario.

---
Automatically generate plain text e-mails without view in Laravel 5+
Tags: laravel, productivity, tutorial, php
Published: 2022-07-12 18:50:01

Plain text emails are still very important these days. For many of them, however, it is pointless to write a plain text version as long as it can be automatically generated from HTML format.

### 1. Install html2text package:
```
composer require soundasleep/html2text
```

### 2. Create file TextMailBuilder.php:

This trait contains a **buildView** method that overwrites the original method and will generate text for the email only if you do not use your own view for the plain text version of the email.

Create **Traits** folder in **app/Mails**, then create **TextMailBuilder.php** file, then place the entire code to this file:
{% embed https://gist.github.com/richardDobron/1a9235b5db64ff06718c2261c7e56c53 %}

### 3. Import TextMailBuilder trait to your Mailables:

{% embed https://gist.github.com/richardDobron/ca34ba8775abee088788716751c3040c %}
Running Laravel IDE Helper Generator automatically
Tags: laravel, tutorial, productivity, php
Published: 2022-07-12 18:45:34

When working on Laravel projects, I always try to keep working on hooks and automation.

There is no exception in this case when using the package [barryvdh/laravel-ide-helper](https://github.com/barryvdh/laravel-ide-helper) that generates helper files that enable your IDE to provide accurate autocompletion.

If you are working on a project where you regularly add database migrations then you will definitely find it handy to automatically call the command to generate those helpers.

The solution is very simple. Just register event listener **MigrationsEnded** in the file **app/Providers/EventServiceProvider.php** like this:
{% embed https://gist.github.com/richardDobron/1982145875e1078e004b3b35adcbf9fc %}

You can customize the artisan command according to your needs.

Of course, I recommend creating the same command for the composer.json:
{% embed https://gist.github.com/richardDobron/b9247b471e31e15c4d9af547c83eec4b %}

Then just simply run:
```
composer run scripts
```
Demystifying JavaScript - Understanding Promises & Error Handling
Tags: 100daysofcode, javascript, codenewbie, programming
Published: 2022-07-12 13:46:49

In this video, we will learn about the concept of Promises in JavaScript. Promises are used for writing asynchronous code in JavaScript We will also learn about  how to create a new promise, then, catch, finally blocks in case of promises. 

{% youtube 90ML5WL5BLY %}

🐱‍💻 🐱‍💻 Course Links:
Complete Code - https://github.com/The-Nerdy-Dev
Visual Studio Code - https://code.visualstudio.com
Git - https://git-scm.com/downloads

--- 
Support my channel:
💜 Join the Discord community 👨‍👩‍👧‍👦: https://discord.gg/fgbtN2a 
💜 One time donations via PayPal
Thank you! 🙏

---
Follow me on:
👉 Twitter: https://twitter.com/The_Nerdy_Dev
👉 Instagram: https://instagram.com/thenerdydev
👉 My Blog: https://the-nerdy-dev.com
Enable HTTPS keepAlive in Node.js
Tags: node, performance, programming
Published: 2022-07-12 18:16:37

No clue how I am learning this only now, but better later than never: HTTPS `keepAlive` is not enabled by default in Node.js, and it has severe performance implications to network-intense applications.

Just to illustrate the impact, assuming that your server is hosted in `us-central1` and it is talking to a service in `us-east1`, just the network latency is ~20ms. Since a TCP handshake is a 3-packet event, this means that ~60ms are going to be allocated just to establish TLS handshake.

You can test that with a simple script:

```ts
const got = require('got');

const main = async () => {
  const response0 = await got('https://posthog.com/');

  console.log(response0.timings.phases);

  const response1 = await got('https://posthog.com/');

  console.log(response1.timings.phases);
};

main();
```

In this scenario, the above will produce:

```ts
{
  wait: 1,
  dns: 20,
  tcp: 72,
  tls: 74,
  request: 0,
  firstByte: 79,
  download: 222,
  total: 468
}
{
  wait: 0,
  dns: 1,
  tcp: 67,
  tls: 69,
  request: 1,
  firstByte: 73,
  download: 234,
  total: 445
}
```

However, watch the `total` time if we enable `keepAlive`:

```ts
const got = require('got');
const https = require('https');

https.globalAgent = new https.Agent({ keepAlive:true });

const main = async () => {
  const response0 = await got('https://posthog.com/');

  console.log(response0.timings.phases);

  const response1 = await got('https://posthog.com/');

  console.log(response1.timings.phases);
};

main();
```

```ts
{
  wait: 1,
  dns: 27,
  tcp: 77,
  tls: 75,
  request: 0,
  firstByte: 75,
  download: 220,
  total: 475
}
{
  wait: 0,
  dns: 0,
  tcp: 0,
  tls: 0,
  request: 0,
  firstByte: 77,
  download: 83,
  total: 160
}
```

The second request is 70% faster than the first request!

If your application relies on making many HTTPS calls, then simply enabling `keepAlive` is going to result in a significant performance improvement.
Flutter Vs React in 2020
Tags: react, flutter, discuss
Published: 2022-07-12 18:10:50

`I Have been in React for long, Experienced in Next, Typescript Typegraphql and Nest or Express!`


I have always been thinking of making a advnced Mobile Application, just like I have been doing for Web Apps!


*Then I started to think, Is React Native Safe to stick with or Flutter🙄*


#### So, Can anyone React Native VS Flutter!



##### Here is my answer:

**Don't mind but learning Dart is Not worth, World is moving to JavaScript Rapidly.**


### Why JavaScript?

- Machine learning?
  Hello Tensorflow Js


- Making Servers?
  Hello Node Js

- Web App's?
  Hello React

- Websites?
  Hello Js

- Extensions?
  Hello React 

- Desktop App?
  Hello Electron Js

- Cli tool?
  Hello NodeJs

Also, I can add Typescript to it to Supercharge my applications


Can world move forward from javascript to something new?

***********

Why **BIG NO TO FLUTTER**?
Why Google went to Dart for Flutter?
If they would make something like Angular Native, the Google project would be supercharged!


*********

Thanks a lot, let's get into comment and find what you think!


   - Hemant


If you have some personal Questions or issues with above point's, ping me on [Twitter](https://twitter.com/_born_may)
Truthy and Falsy Values in Javascript
Tags: javascript, webdev, tutorial
Published: 2022-07-12 18:00:21

In Javascript, things can be `true`, or `false`, but they can also be `truthy` or `falsy`. The concept of `truthy` and `falsy` are usually considered only in a boolean context, such as in an `if..else` statement, but they also affect other parts of Javascript - for example, what is returned from the [logical OR operator](https://fjolt.com/article/javascript-logical-or).

## What does truthy and falsy mean in Javascript?
Something is considered `falsy` in Javascript if it can be converted to `false`. In the same way, something is `truthy` simply if it is not considered `falsy`. While `falsy` may seem like a vague statement, it actually has a specific definition. The following values are considered `falsy`:

- `false`
- `0` or `-0` or `0n`
- any empty string, i.e. `""`
- `null`
- `undefined`
- `NaN`

Similarly, anything that is not equal to these is considered `truthy`, for example:

- any object, i.e. `{}`, or `[]`.
- any non-zero number
- any non-empty string
- any non `null`, `undefined`, or `NaN` value.

## Use of truthy and falsy 

`truthy` and `falsy` values have implications in Javascript logic. For example, anything that can be converted to `truthy` in a boolean setting (such as `if..else`) is converted to `true`, and the same goes for `falsy` statements.

For example, the following `if` statement is `true`, simply because `"1"` is a `truthy` statement:

```javascript
if("1") {
    console.log('ok');
}
```

If the statement instead said `if(0)`, it would return false, since `0` is `falsy`. As you get into Javascript, you'll find references to `truthy` and `falsy` everywhere, so it's good to familiarise yourself with the concept now.
Top 7 Featured DEV Posts from the Past Week
Tags: top7
Published: 2022-07-12 17:50:16

---
title: Top 7 Featured DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week
tags: icymi 
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---

_Every Tuesday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week._ 

## Why You Need To Nail Knowledge Sharing

As @eiso/carmonara says: "knowledge sharing is critical for engineering and other teams to continuously learn and improve." Here's how you can do it better. 

{% embed https://dev.to/carmonara/how-to-improve-knowledge-sharing-in-your-engineering-org-and-beyond-1ae7 %}


## Know your "why"

^ Just one amazing tip from @domizajac!

{% embed https://dev.to/domizajac/how-to-start-programming-in-2022-18ia %}


## Working through a new ticket

@joelmturner shares how they work through feature tickets. Helpful!

{% embed https://dev.to/joelmturner/working-on-a-new-feature-as-a-senior-frontend-developer-2f0d %}


## Stop and take a deep breath

When it comes to starting a new job, this advice from @iamadhee is invaluable.

{% embed https://dev.to/iamadhee/your-first-job-will-scare-you-2m0h %}


## Laying a solid Docker foundation 

@leandronsp explains the main features of Docker networking. If you've been researching this topic, this post is a great primer. 

{% embed https://dev.to/leandronsp/mastering-the-docker-networking-2h57 %}


## useContext() in context 

@srishtikprasad adds a new chapter to their series on React hooks. This time, they focus on useContext()

{% embed https://dev.to/srishtikprasad/guide-to-react-hook-usecontext-3lp7 %}


## Simplifying complexity

Time complexity, that is! Thank you to @ckawara for helping us consider the amount of time it takes for code to complete a specific task (even as the input size grows).

{% embed https://dev.to/ckawara/data-structure-and-algorithms-102-deep-dive-into-data-structure-and-algorithms-56ap %}


_That's it for our weekly Top 7 for this Tuesday! Keep an eye on dev.to this week for daily content and discussions...and be sure to keep an eye on this series in the future. You might just be in it!_
Initiate a phone call and SMS with HTML
Published: 2022-07-12 17:34:34

A simple one line code to initiate a phone call goes thus:

`<a href = "tel:1-234-567-8901"> 1-234-567-8901</a>`

to initiate sms:
`<a href = "sms:1-234-567-8901"> SMS Message</a>`
Hackerrank - Apple and Orange Solution in Python
Tags: python, hacckerrank, problemsolving, challenge
Published: 2022-07-12 17:30:05

step - 1: Get maximum between apple and orange array

step - 2: iterate over the maximum

step - 3: check the array indexes and if True add the fruit's position with the tree location (a or b) so that we get the actual position of the fruit

step - 4: nested if condition for the actual position of the fruit is in between the house range (s and t) and if true the count will be increased

Step - 5: print the output

```
def countApplesAndOranges(s, t, a, b, apples, oranges):
    # Write your code here
    apple_count = 0
    orange_count = 0
    
    max_length = max(len(apples), len(oranges))
    
    for idx in range(max_length):
        if idx < len(apples):
            count = apples[idx] + a
            if s <= count <= t:
                apple_count += 1
                
        if idx < len(oranges):
            count = oranges[idx] + b
            if s <= count <= t:
                orange_count += 1
    
    print(apple_count)
    print(orange_count)
```
React toastify
Tags: react, html, javascript, webdev
Published: 2022-07-12 17:14:46

Hello Guys today i am going to show you a very beautiful react-library called "react-toastify"
This library is used to create pop-up notifiction with many attributes and can be used conditionally in react.
Lets get started...

## Installation - 
```
 npm install --save react-toastify
```
Documentation - 
https://fkhadra.github.io/react-toastify/introduction/

* It is very cool notification library which you can use in almost every project and it is very to setup and add to your project.

## Usage - 
```js
 import React from 'react';
  import { toast } from 'react-toastify';

  function Example() {
    const notify = () => {
      toast("Default Notification !");

      toast.success("Success Notification !", {
        position: toast.POSITION.TOP_CENTER
      });

      toast.error("Error Notification !", {
        position: toast.POSITION.TOP_LEFT
      });

      toast.warn("Warning Notification !", {
        position: toast.POSITION.BOTTOM_LEFT
      });

      toast.info("Info Notification !", {
        position: toast.POSITION.BOTTOM_CENTER
      });

      toast("Custom Style Notification with css class!", {
        position: toast.POSITION.BOTTOM_RIGHT,
        className: 'foo-bar'
      });
    };

    return <button onClick={notify}>Notify</button>;
  }
```
* When you click the button it will popup all the notifications inside notify function, you can see there are multiply notification toast's like error,success,warn,default,these are inbuilt styles provided so you can use according to the condition like if you want to give a warning to the user , you can use toast.warn() method.
* The position attribute is used to position the notification on the screen,toast.POSITION.BOTTOM_RIGHT -> it means the notification toast will popup at bottom right of the screen.
* For complete info read the documentation from the link i have provided above.


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

Thats it for this post.
THANK YOU FOR READING THIS POST AND IF YOU FIND ANY MISTAKE OR WANTS TO GIVE ANY SUGGESTION , PLEASE MENTION IT IN THE COMMENT SECTION.
^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/higher-order-function-in-javascript-1i5h

https://dev.to/shubhamtiwari909/styled-componenets-react-js-15kk

https://dev.to/shubhamtiwari909/introduction-to-tailwind-best-css-framework-1gdj
This Week in WordPress #216
Tags: speaking, wordpress
Published: 2022-12-01 19:02:41

---
title: This Week in WordPress #216
published: true
date: 2022-07-12 16:58:44 UTC
tags: Speaking,WordPress
canonical_url: https://courtneyr.dev/2022/07/12/this-week-in-wordpress-216/
---

![E3e9Pux7Dj8 jpg](https://courtneyr.dev/wp-content/uploads/2022/07/E3e9Pux7Dj8-jpg.webp "This Week in WordPress #216 54")

![E3e9Pux7Dj8 jpg](https://courtneyr.dev/wp-content/uploads/2022/07/E3e9Pux7Dj8-jpg.webp "This Week in WordPress #216 53")

<!-- wp:embed {"url":"https://youtu.be/E3e9Pux7Dj8","type":"video","providerNameSlug":"youtube","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->

https://youtu.be/E3e9Pux7Dj8

<!-- /wp:embed -->

<!-- wp:embed {"url":"https://wpbuilds.com/2022/07/12/this-week-in-wordpress-216/","type":"wp-embed","providerNameSlug":"wp-builds"} -->

https://wpbuilds.com/2022/07/12/this-week-in-wordpress-216/

<!-- /wp:embed -->

This article first appeared on:  
 ![](https://courtneyr.dev/wp-content/uploads/2022/07/E3e9Pux7Dj8.jpg)  
[Courtney Robertson -](https://courtneyr.dev)  
by [<span class='p-author h-card'>Courtney Robertson</span>](https://courtneyr.dev/author/courane01/)
Coding Challenge Sites
Tags: javascript, programming, challenge, beginners
Published: 2022-07-12 16:54:20

Taking up programming challenges validates your skills as a developer. It also improves your confidence in writing code. 
Here is a list of sites to check out to take up coding challenges that will build you up as a developer
1. Codewars 
https://www.codewars.com/__

2. Leetcode
https://leetcode.com/

3. CodinGame
https://www.codingame.com/

4. Exercism
https://exercism.org/

5. Frontend Mentor 
https://www.frontendmentor.io/home
Reverse Method Refactoring
Tags: ruby, refactoring
Published: 2022-07-12 16:39:30

Here's a handy refactoring technique I learned today while reading Kent Beck's [Smalltalk Best Practice Patterns](https://learning.oreilly.com/library/view/smalltalk-best-practice/9780132852098/). 

**But first, what's the problem?** Sometimes, you have an unreadable method because you are calling different methods on different objects. You cannot extract a method because it's already small (but unreadable) and does one thing. 

Here's a simplified example. 

```ruby
class Point
  def print(stream)
    x.print(stream)
    stream.print(', ')
    y.print(stream)
  end
end
```

Though the example is not complicated, it takes a while to understand what's going on and who's calling whom. 

We can solve the problem by making sure that all messages go through a single object. Kent provides the following approach for this refactoring: 

1. Code a method on the parameter. 
2. Derive its name from the original message. 
3. Take the original receiver as a parameter to the new method. 
4. Implement the method by sending the original message to the original receiver.

```ruby
class Stream
  def print(obj)
    obj.print(self)
  end
end

class Point
  def print(stream)
    stream.print(x)
    stream.print(', ')
    stream.print(y)
  end
end
```

Even though we introduced an additional object, the `print` method is now easy to read and understand. 

What do you think?
Block VS File Storage
Tags: storage, blockstorage, filestorage, awsstorage
Published: 2022-07-12 16:37:51



![fileandblock](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/my5foirkekguol774130.JPG)
File and block storage are probably being overlooked by the new and shining storage solution that are currently on the market but they are still being used by millions of those who can’t afford to break the bank.  
Storing the right data at the right place is critical and here I will briefly go over the difference between file and block storage and when to use them.


## Block Storage 

Block storage also knows as block level storage is a type of storage commonly used in SAN (Storage Area Network) environment.  In block storage the data is written in a form of raw blocks also referred as volumes and are accessed via the SAN.  In that configuration, each block is given a unique address. So, let’s see what are the main advantages of using block storage.
 The area of application where block storage is preferred are the following ones due to the low latency it offers 
•	Databases 
•	Email servers
•	Virtual Machines file system (Boot Volume)
•	RAID Arrays (High Redundancy)
•	High performance compute 
 In addition to that, applications that require server-side processing suck as Java, PHP AND .Net are the best candidate for Block Storage since they need to be as close as possible to the storage to reduce latency.


## File Storage

  File storage or also known as file-level or file-base storage is a type of storage where data are stored in a hierarchical file and folder structure.  Here, unlike in Block storage, files are storages as whole instead of being broken down into blocks.  This also limited the number of metadata that can be attached to created files. Also, here NAS system is preferred as opposed to SAN when using block storage. 
Some of the benefits of file storage are the fast that it is Highly scalable and Accessible to multiple runtimes and. With file storage it is also possible to do Read and Write at the same time from multiple users.
The area of application where file storage is preferred are the following ones.
•	General purpose file storage
•	Big Data and Analytics
•	Lift and shift of enterprise Applications
•	Databases and Transactional Application
•	Microservice and Docker 
•	Centralize file collaboration
Implementing a dark theme toggle with react-redux
Published: 2022-07-12 16:01:17


## Implementing a dark theme toggle with react-redux

It’s been a few years since dark mode became a popular feature of many websites, so I decided to write about how to implement it using react-redux. All code from this tutorial is available in [this repository,](https://github.com/atefeh-dev/dark-theme) And Here’s what we will build:

![](https://cdn-images-1.medium.com/max/3604/1*8h6o3Gv_XWgpl2MbrOsoRA.gif)

## The Logic

We have a switch button that has two states: Sun and Moon. Sun Icon is for the light theme, while Moon Icon is for the dark theme. in this project, Redux solved a lot of problems for you, you could easily access data throughout the entire app without having to pass it through each component. Not only could you read this data, but you could also manipulate the state from anywhere in the app as well. and we have a config file that I define the theme properties for LIGHT and DARK themes, such as textColor, backgroundColor, borderColor, and so on. I also attached my basic theme objects for those two themes.
>  ***Note***: *you should use redux when You have a very large and complex app with multiple states that are needed in many places of the app and You have often refreshing states.*

### **The Project Setup**

I usually use yarn because it is a fast, reliable, and secure alternative to NPM. There are three things we need:

* an actual store to hold the state

* an action to dispatch intent

* a reducer to handle that intent

* an action type

That’s easy enough:
{% gist https://gist.github.com/atefeh-dev/0488490e3b204e20e44b0176b6265f77.js %}
About Action You can think of an action as an event that describes something that happened in the application. here the action is changeTheme.
{% gist https://gist.github.com/atefeh-dev/2fc36d2dcedbbdc6f6cad452d0bdfb4e.js %}
I Always handle any manipulate in Reduce section.
{% gist https://gist.github.com/atefeh-dev/bba84032cc61d8d64a5abad56ff32594.js %}
I use to keep action types separately because, In this way, you reduce the risk of accidentally misspelling one or more of the action types in one of the sources where they’re used. This will also prevent wasting a lot of time debugging a simple bug.
{% gist https://gist.github.com/atefeh-dev/ea0156ea4a6b0303d3fa9c65c700aa30.js %}
### Now, to provide a theme

We need to tell our component(s) how to style themselves based on the current theme.
{% gist https://gist.github.com/atefeh-dev/f7ed573161a29f41c9769a10b385ffeb.js %}>  NOTE : Remember that you must define variables in both classes, even if they are the same.

## Let’s toggle

Great! Now all that is left, is to dispatch the changeTheme action whenever the icon is clicked.
{% gist https://gist.github.com/atefeh-dev/cba234c7e0c6fc5ba3f4759a75bcd249.js %}
Let’s take a closer look, we use the useSelector hook to get state from our store using a selector function.

All done!

Thanks for reading!
this post is already on https://atefe-dev.medium.com/implementing-a-dark-theme-toggle-with-react-redux-14ec197cbff7