teleren/devto huggingface dataset:
Hide console output that is duplicate in React project
Tags: react, duplicate
Published: 2022-07-12 12:18:04

Hello folks, today I will tell you how to solve the console repetition problem in a React project created with [CRA](https://create-react-app.dev/docs/getting-started). It is strict mode that causes this console duplication issue. If the duplication problem in console bothers you, you can hide this duplicate console output through react developers. Let's take a look at how to fix this console duplication issue.

We create our project with 
```
npx create-react-app <my-app>
``` 
and run our project with 
```
yarn start
```

Our `index.js` output looks like this.

```js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
```

We add `console.log('Hello react')` in `App.js`. Our `App.js` output looks like this.

```js
import logo from './logo.svg';
import './App.css';

const App = () => {
  console.log('Hello react');

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

```
Now in this case, let's open the console in the developer tools and examine what we will encounter.

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

Hmm.. It seems that we see `2 Hello react` texts on the console screen. But we wrote one. This is the console output shown to us by react strict mode, which has a low opacity. If you want to turn it off, all you have to do is enable the feature to hide duplicate logs values through this react devtools.


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

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

TADAA 🎉🎉

`console.log` shows our output once.

If you want to learn more about solving this problem, you can check the related [PR](https://github.com/facebook/react/pull/22030).
Deploying Blackbox Exporter Image to Azure Container Registry Using Azure CLI
Tags: azure, docker, tutorial, blackbox
Published: 2022-07-12 12:18:03


**Goal :**

- Create BlackBox Exporter Image to Azure Container Registry using Azure CLI

**Result** 
> 

- Private Container Image rather than Public Docker Hub Image.

**Script**

```
$ResourceGroupName	= "suryarg"
$LocationName		= "eastus2"
$ACRName			= "suryacr"
$ACRUrl 			= "$ACRName.azurecr.io"

#Create a resource group
az group create --name $ResourceGroupName --location $LocationName

#Create a container registry
az acr create --resource-group $ResourceGroupName --name $ACRName --sku Basic --admin-enabled true


#Log in to Azure Container Registry
az acr login --name $ACRName


#First Pull latest BlackBox Exporter Image from DockerHub
docker pull prom/blackbox-exporter:latest

#Then Push into Azure Container Registry
docker tag prom/blackbox-exporter:latest $ACRUrl/blackbox-exporter:SuryaLatest
docker push $ACRUrl/blackbox-exporter:SuryaLatest
```

**Result**


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

![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/arhuja0u5s18uhebncrp.png)
Demystifying JavaScript - Common Operators
Tags: 100daysofcode, javascript, codenewbie, programming
Published: 2022-07-12 12:10:20

In this video, we will discuss about the operators in JavaScript that are commonly used to perform computations in JavaScript like addition, subtraction, division, multiplication, modulus and exponentiation etc. to carry out computations and derive insights from those values. 


{% youtube h4NRGsI1Aro %}

🐱‍💻 🐱‍💻 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
Demystifying JavaScript - Variables & Constants
Tags: 100daysofcode, javascript, codenewbie, programming
Published: 2022-07-12 12:08:25

In this video, we will learn about variables in JavaScript. We can declare a variable using two ways. Earlier we used to do so using the var keyword. But that is old school way of doing things, with modern next generation JavaScript features we make use of the let and const keywords. This video covers let and const in detail. 


{% youtube nDtndnl-Lg0 %}

🐱‍💻 🐱‍💻 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
Demystifying JavaScript - Host Environment in JavaScript
Tags: 100daysofcode, javascript, codenewbie, programming
Published: 2022-07-12 12:07:04

In this video, we will understand the Host Environment in JavaScript and the difference between the Browser Environment and the Host Environment in JavaScript. Browser Environment is something we will be working in this series which is used for front-end development of your applications when you have to work on user-interface of your applications and then we have the Server Environment where you develop your website backends using Node.js.

{% youtube 5zW0BIz51zc %}

🐱‍💻 🐱‍💻 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
Demystifying JavaScript - Dynamic,Interpreted & Weakly Typed Nature
Tags: 100daysofcode, javascript, codenewbie, programming
Published: 2022-07-12 12:06:05

In this video, we will learn about the dynamic, interpreted and weakly typed nature of the programming language. 


{% youtube jONV-aBZzPA  %}

🐱‍💻 🐱‍💻 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
Python: Flask-RESTX and the Swagger UI automatic documentation.
Tags: python, flask, restx, swagger
Published: 2022-07-12 12:05:18

Dear Admins, please remove this post if deem in-appropriate. Thank you.

My new post -- I don't mean to do cross promotion. I do apologise if this is too rude. This post would be hard to follow on https://dev.to as I'm referencing line numbers in codes -- which https://dev.to does not currently support.

https://behainguyen.wordpress.com/2022/07/12/python-flask-restx-and-the-swagger-ui-automatic-documentation/

https://behai-nguyen.github.io/2022/07/12/flask-restx-swagger-ui.html
Demystifying JavaScript -How JavaScript Code is Executed in Browser
Tags: 100daysofcode, javascript, codenewbie, programming
Published: 2022-07-12 12:04:27

In this video, we will learn how JavaScript code is executed inside the browser. 

{% youtube tOfjAC9BA0w %}

🐱‍💻 🐱‍💻 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
Phalcon v5.0.0RC3 Released!
Tags: phalcon5, release, rc
Published: 2022-07-12 12:05:30

---
title: Phalcon v5.0.0RC3 Released!
published: true
date: 2022-07-12 11:57:03 UTC
tags: phalcon5,release,rc
canonical_url: 
---

Phalcon v5.0.0RC3 has been released!!

This release addresses a few bugs identified and a few new features. The bugs were mostly focused on the PHP 8+ version.

We are working now full time on the documentation so as to get the stable release out! So far the upgrade guide is done and we are reviewing every document to ensure consistency and accuracy.

In parallel, we are working on the devtools/incubator repositories as well as sample applications.

As always, a huge thank you to our community for testing, reporting bugs, enhancing the framework in any way possible!

The changelog for this release ([v5.0.0RC3](https://github.com/phalcon/cphalcon/releases/tag/v5.0.0RC3)) is as follows:

## Fixed

- Fixed `Phalcon\Tag::textArea()` to check if the value is `null` before calling `htmlspecialchars` [#15992](https://github.com/phalcon/cphalcon/issues/15992)
- Fixed 
  - `Phalcon/Filter/Validation/Validator/Alnum`
  - `Phalcon/Filter/Validation/Validator/Alpha`
  - `Phalcon/Filter/Validation/Validator/Confirmation`
  - `Phalcon/Filter/Validation/Validator/CreditCard`
  - `Phalcon/Filter/Validation/Validator/StringLength/Max`
  - `Phalcon/Filter/Validation/Validator/StringLength/Min` to check if the value is `null` before calling internal PHP methods [#15992](https://github.com/phalcon/cphalcon/issues/15992)
- Fixed `Phalcon\Html\Helper\Title` to properly use indent and delimiter [#15984](https://github.com/phalcon/cphalcon/issues/15984)
- Fixed `Phalcon\Mvc\View\Engine\Volt::isIncluded()` and `Phalcon\Mvc\View\Engine\Volt::length()` to check for null values before calls to php methods [#15984](https://github.com/phalcon/cphalcon/issues/15984)
- Fixed `Phalcon\Mvc\View\Engine\Volt\Compiler::expression()` to use double quotes instead of single ones [#15984](https://github.com/phalcon/cphalcon/issues/15984)
- Fixed `Phalcon\Support\Version::getPart()` to always return string values [#15984](https://github.com/phalcon/cphalcon/issues/15984)
- Fixed `Phalcon\Dispatcher\DispatcherInterface::setModuleName()` to accept `null` [#15997](https://github.com/phalcon/cphalcon/issues/15997)
- Fixed `Phalcon\Dispatcher\AbstractDispatcher::setModuleName()` to accept `null` [#15997](https://github.com/phalcon/cphalcon/issues/15997)
- Fixed `Phalcon\Dispatcher\AbstractDispatcher::getModuleName()` to also return `null` [#15997](https://github.com/phalcon/cphalcon/issues/15997)

## Added

- Added support for `webp` images for `Phalcon\Image\Adapter\Gd` [#15977](https://github.com/phalcon/cphalcon/issues/15977)
- Added `Phalcon\Mvc\Model\ManagerInterface::getBuilder()` to return the existing builder (created by `createBuilder()`) [#15966](https://github.com/phalcon/cphalcon/issues/15966)
- Added `Phalcon\Mvc\Model\Manager::getBuilder()` to return the existing builder (created by `createBuilder()`) [#15966](https://github.com/phalcon/cphalcon/issues/15966)
My experience with JavaScript and PHP as a junior web developer.
Tags: beginners, career, javascript, php
Published: 2022-07-12 11:51:14

## Community support and resource for PHP and JavaScript

JavaScript have larger community support and resources such as libraries, frameworks, tutorials and learning materials. 

This  could be debatable but numbers don't lie, you can literally see the numbers of tutorial uploaded everyday related to JavaScript compared to PHP language, or amount of JavaScript frameworks dominating the modern web development.  

## Installation hell and get started with PHP
 
When it comes to learning or developing with PHP as beginner, I have realised the only way you could run a PHP is via web server solution([XAMPP](https://www.apachefriends.org/))/development environment([Laragon](https://laragon.org/))/or [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)(non DB connected code). 

And to download one, is not a child's play. You required to be tech savvy or at least able to read documentation for several time in order to have successful PHP installation in your machine/laptop. 

Don't believe? Get a laptop without any programming language installed in it, and try to run a PHP script vs a JavaScript(No installation needed, you can run JavaScript literally at your browser) 

## Access to DOM

When you are developing a website / or web application using PHP as your dominant stack. You are forced to write [jQuery](https://jquery.com/)(a JavaScript library) to manipulate your DOM, or use internal JavaScript script tags to access DOM Node to add any kind of event listeners.  

## Control over frontend side of the application

Even [Laravel](https://laravel.com/) the most popular free, open-source PHP framework integrates with [Vue.js](https://vuejs.org/)(a JavaScript framework) to aid the frontend reactivity and to enhance SPA web development speed. 

Laravel does have a framework of its own, which is [LiveWire](https://laravel-livewire.com/) uses [AlpineJS](https://alpinejs.dev/)(built with Javascript as well).

## Final thoughts

If you have started working with JavaScript as a beginner, you will never come across PHP language. But if you, started as a beginner with PHP for web development, be ready to face JavaScript as it dominates the web development even in PHP's own ecosystem. 

These are my personal thoughts and experiences with both PHP and JavaScript. I have learnt PHP way earlier than JavaScript and I have spend almost equal time with both development language. 

I welcome all open minds to share your thoughts on post and eager to know your point of view too.
Best way to install Node and keep it up to date
Tags: node
Published: 2022-07-12 11:36:44

---
title: Best way to install Node and keep it up to date
canonical_url: https://zellwk.com/blog/install-node/
tags: 'node'
cover_image: https://zellwk.com/images/blog/node/lts.png
published: true
---

The easiest way to install Node is head over to [NodeJS's website](https://nodejs.org/en/) and download the LTS version.

<figure role="figure">
<img src="https://zellwk.com/images/blog/node/lts.png" alt="" loading="lazy">
</figure>

The LTS Version is good enough for most users. I use LTS myself.

The Current version is the latest available version. Developers will be making changes and creating libraries on this version. If you use Current, be prepared to run into bugs.

Once you downloaded and installed Node, you should be able to use the `node` command and the `npm` command. You can add `-v` to each of these commands to see their respective versions.

```shell
node -v
npm -v
```

<figure role="figure">
  <img src="https://zellwk.com/images/blog/node/versions.png" alt="" loading="lazy">
</figure>

## Upgrading and Downgrading Node with a Package Manager

You want to have the flexbility to upgrade and downgrade Node easily if you're going to work with Node.

The simplest way is to use npm (node default package manager), to install a package `n`. `n` lets install a specific version of Node easily.

You can install `n` with the following command.

```shell
sudo npm install n -g
```

The `-g` flag here stands for `global`. It lets you use the `n` command everywhere.

Once you have installed `n`, you can use the following commands to install different versions of Node.

- `sudo n lts` — installs the LTS version
- `sudo n latest` — installs the latest version
- `sudo n install <num>` — Installs a specific version on Node. Here, you only need to provide the first number. (To get the latest version of 16.xx.yy, you can simply write 16).

**NOTE**
_Node's version numbers are written with a standard called Semver. You can find out more about Semver [in this article](https://zellwk.com/blog/semantic-versioning/)_

## Using other package managers

You're not limited to using `n` to upgrade or downgrade Node. There are other package managers available and you can [choose the one you like](https://nodejs.org/en/download/package-manager).

<hr>

Thanks for reading. This article was originally posted on [my blog](https://zellwk.com/blog/install-node/). Sign up for [my newsletter](https://zellwk.com) if you want more articles to help you become a better frontend developer.
Design the producer consumer problem using AWS
Tags: webdev, aws, programming, serverless
Published: 2022-07-12 10:52:20

Hi everyone, today I would like to share how I'm using AWS to solve the producer consumer problem. 
I got this case when I have to run a heavy background task that take a lot of time to run.
For example: User will send a request to generate images with filters the user choose and the tasks generate images with filters will take a lot of time to run.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0qqo2zrtcj904cq59ide.png)
Here is my explanation about my architecture:
**_Firstly,_** I need to build an API Gateway that can receive the user's request.
**_Secondly,_**every request from the user will be forwarded to Lambda Producer and the lambda will response that it received the user requests successfully
**_Thirstly,_** the producer will send message to SQS queue.
**_Finally,_** the SQS queue will trigger the Lambda Consumer each time it had new message. The Lambda Consumer will run background task and scale automatically based on number of message in the queue.

In my case, the Lambda Consumer will generate images with filters then uploads images back to S3 + send an email to user that it's done via AWS SNS.
Hope for your comments to see is there anything that I can do better.
Thank you!
Tired of using Form Builders and managing excel sheets?
Tags: saas, webdev, react, productivity
Published: 2022-07-12 10:51:27

If you are tired of using form builders, managing excel sheets, and worrying about your client's data then this tool is a life saver for you. Endless Integrations, Countless awesome things to do with [BlazeUp](https://blazeup.itsvg.in), for example, you can integrate your form with telegram and receive form responses directly on your phone.

⚡ **Realtime** - We deliver responses to you in real-time so that you never miss any potential customers.

📥 **Direct to Inbox** - Get your customer's response directly to your inbox.

🛡️ **Secure** - Your data is 100% secure, we don't store any data from you or your customers.

🪙 **Best Price** - Believe it or not, we provide the best pricing. Most affordable packages.

👨‍💻 **No-Code friendly** - Don't want to code? Don't worry, we have templates just for you.

✨ **Supports Everywhere** - BlazeUp is supported by all modern frameworks and regular websites.

TRY NOW !!
[Visit BlazeUp](https://blazeup.itsvg.in)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/142dhshssnnzzivo3kqr.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pjh7xhpa63lhzkcs3ntv.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mb684dxdxc8mgow891yk.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qu4vzl5ch09uuwa3uk8e.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l0o83ocy18msxt4fmxql.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ce1od22uss59bsdt7hay.png)
Starknet permissioned addresses
Published: 2022-07-12 11:23:58

# [Starknet core](https://etherscan.io/address/0xc662c410C0ECf747543f5bA90660f6ABeBD9C8c4)

## Who can upgrade implementation?
- `onlyGovernance` - [EOA](https://etherscan.io/address/0xD5fB66CaEE881367Df4409B17Fd53a2Ef0D9B263)

## Who can `setProgramHash`, `setConfigHash`, `setMessageCancellationDelay` 
- `onlyGovernance` - [EOA](https://etherscan.io/address/0xD5fB66CaEE881367Df4409B17Fd53a2Ef0D9B263)

## Who can `updateState`
- `onlyOperator` - [EOA](https://etherscan.io/address/0x2c169dfe5fbba12957bdd0ba47d9cedbfe260ca7)

## Who can `registerOperator` and `unregisterOperator`
- `onlyGovernance` - [EOA](https://etherscan.io/address/0xD5fB66CaEE881367Df4409B17Fd53a2Ef0D9B263)

## Who manages governors
- `onlyGovernance` - [EOA](https://etherscan.io/address/0xD5fB66CaEE881367Df4409B17Fd53a2Ef0D9B263)

# [ETH Bridge](https://etherscan.io/address/0xae0Ee0A63A2cE6BaeEFFE56e7714FB4EFE48D419#code)

## Who can upgrage implementation
- `onlyGovernance` - [EOA](https://etherscan.io/address/0x3DE55343499f59CEB3f1dE47F2Cd7Eab28F2F5C6)

## Who manages governors
- `onlyGovernance` - [EOA](https://etherscan.io/address/0x3DE55343499f59CEB3f1dE47F2Cd7Eab28F2F5C6)

## Who can `setL2TokenBridge`, `setMaxDeposit`, 
- `onlyGovernance` - [EOA](https://etherscan.io/address/0x3DE55343499f59CEB3f1dE47F2Cd7Eab28F2F5C6)

# [L1DaiBridge](https://etherscan.io/address/0x659a00c33263d9254Fed382dE81349426C795BB6)

## Who can `setCeiling`, `setMaxDeposit` and manage auth
- `auth` - [MakerDAO](https://etherscan.io/address/0x0a3f6849f78076aefadf113f5bed87720274ddc0)

# [L1Escrow](https://etherscan.io/address/0x0437465dfb5B79726e35F08559B0cBea55bb585C#code)
 
## Who can `approve` token transfers
- `auth` - [MakerDAO](https://etherscan.io/address/0x0a3f6849f78076aefadf113f5bed87720274ddc0)