teleren/devto huggingface dataset:
Why there can be multiple console output with one console.log() in ReactJS
Tags: javascript, beginners, react, firstpost
Published: 2022-12-11 12:22:56

In ReactJS, a single `console.log()` statement can produce multiple outputs in the console because React uses a virtual DOM (Document Object Model) to render and update the user interface. When a `console.log()` statement is executed, it may output multiple elements from the virtual DOM, depending on how the React components are structured and how the code is written.

For example, if a `console.log()` statement is called within a React component that contains multiple child components, each of those child components may be output to the console individually. Additionally, if the `console.log ()` statement is called within a React component that updates over time, it may output multiple versions of the component as it changes.

In order to avoid this behavior and only output a single element from the virtual DOM, you can use the `React.Children` utility to extract the specific child component that you want to log, or you can use the `console.dir()` method, which outputs a tree-like representation of the DOM element, rather than individual elements. For example:

```
import React from 'react';

class MyComponent extends React.Component {
  render() {
    console.log(React.Children.only(this.props.children));
    // or:
    console.dir(this.props.children);

    return (
      <div>
        {this.props.children}
      </div>
    );
  }
}
```
In this code, the `console.log()` statement will only output a single child element from the `this.props.children` prop, rather than multiple elements. This can help to make your debug output more readable and easier to understand.
Release 0.4 - Results
Published: 2022-12-11 12:19:26

Hi everyone,

This week I completed the issues as described in my previous posts [here](https://dev.to/neilan99/release-04-planning-43fg) and [here](https://dev.to/neilan99/release-04-my-progress-so-far-1f8a).

To recap the issues:

1. [generate a favicon.ico for our apps](https://github.com/ayoayco/astro-reactive-library/issues/216)
This issue looks to update the favicon logo to match the current logo that they are using. [My PR.](https://github.com/ayoayco/astro-reactive-library/pull/221)

2. [chore: create script for updating RELEASE.md before PR](https://github.com/ayoayco/astro-reactive-library/issues/148)
This issue looks to update any RELEASE.md files when a developer changes a package. The script will ask the developer what is the scope of the PR they are making and what changes they made to a package and write to the appropriate RELEASE.md file. [My PR.](https://github.com/ayoayco/astro-reactive-library/pull/232)

Last week I completed the first issue and this week I completed the second issue. I think I paced myself well enough considering all the other work I had to do (and that it's finals week). I really liked the fact that I worked on this repo for a while now (since Hacktoberfest) and that I got to meet some really cool and helpful people from the repo.

The second issue I worked on was a little more open ended. To start, I created a script that asked the contributor what package they changed, what type of PR they were making (patch, minor, or major), and the description of changes they made. This information would then be used to update the corresponding RELEASE.md file for that package with the correct incremented version. I submitted a PR and received some feedback regarding the code. Also, I was asked to remove the versioning because of PR's may not be the same as releases. After updating my code, my PR was good to go.
An easy way to check directory size in Linux
Tags: linux, beginners, cloud
Published: 2022-12-11 11:50:39

# Introduction

Linux is one of the most popular operating systems in the world. It is Unix-like, and it is also open-source. Quite a big percentage of developers use Linux because it can be customized in so many ways.

What's cool about Linux is its command line. Every 'hackers' paradise. There are a ton of commands. 

There is probably a command for almost anything that you want to do. For example what if you wanted to get the size of a directory? Well luckily for you there is a command for that. In this post, we are going to talk about that command and see what it can offer.

Reference:  [4 ways to get the size of a directory in Linux](https://www.howtouselinux.com/post/check-directory-size-in-linux)

# The  `du`  command

This command lets the user get a quick view of the  **disk usage**. The best way to use it is by giving it the directory you want to see the size of. It should look a little something like this:
```
du directory_name  
  
// output  
2314    directory_name
```
This will give you the size of all the files and at the very end, it will give you the size of the directory itself. You could point out the full path, or you could just give the name of the directory you want to see if you are already on the same path.

But we could make this even easier just b adding 2  **flags**. Flags help the command change its behavior. For the  `du`  command we could add the flags  `-s`  and  `-h`.

 - `-s`  stands for  **summarize**  and it will show you only the total  size of the directory, without all those files popping up on your screen.
 - `-h`  stands for  **human-readable**  and it will convert the size so that you can read it easier. Just by running the command without the  `-h`  flag doesn't specify you a unit of measurement.

So now to get the best of this command, you should run it like this with the  `-s`  and  `-h`  flags:
```
du -sh directory_name  
  
// output  
44.5M   directory_name
```

And if you wanted to see all of the directories sizes, you could just run this:
```
du -sh ./*  
  
// output  
12.2M   dir1  
 2.5M   dir2  
  55M   dir3
```
Another thing you can do is use pipe(`|`) and sort them by size, which will make it even easier for you to see their sizes. What  `|`  does is get the output from the command behind it and add it into the input of the command after it. So to sort the directories by size just run the following command:
```
du -sh ./* | sort -h  
  
// output 
  55M   dir3  
12.2M   dir1  
 2.5M   dir2
```
# Conclusion

This is a pretty useful command that I think everybody should know, just because of how short and easy it is. I hope that this post has helped you and I wish you happy coding.

If you aren't familiar with any Linux commands, be sure to check out this post on the  [Linux command cheat sheet](https://access.redhat.com/rhel-cheatsheets).
How to create Podcast channel using Wordpress
Tags: wordpress, php
Published: 2022-12-11 11:50:11

Techstack

- Wordpress

- Wordpress plugin：Seriously Simple Podcasting

Step by step to create podcast using [Seriously Simple Podcasting](https://wordpress.org/plugins/seriously-simple-podcasting/) wordpress plugin

- Install Seriously Simple Podcasting plugin to your WordPress site and link it to your podcast hosting provider.

- From your WordPress dashboard, go to the “Podcast” plugin. Click “Add New” to upload an episode, and add its corresponding details.

- Inside the plugin’s “Settings” under “Feed Details”, include details about your podcast to finish creating the RSS feed

- Details include the podcast’s name, description, cover art, and category selection.

- The RSS feed is generated and ready to be submitted to each podcast listening platform.


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

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxqp6cc7xac6il168sim.png)
[Live URL](https://eigo-bunpou.com/feed/podcast/)
The missing sum() method
Tags: javascript, math, sum
Published: 2022-12-11 11:50:00

---
title: The missing sum() method
published: true
description: Where is the missing sum method?
tags: JavaScript, Math, sum
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wk92rgv72qojqj5nrn2d.jpg
published_at: 2022-12-11 11:50 +0000
---
The current specification for the JavaScript Math object (namespace), according to [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math), comprises of 8 properties and 35 methods.

The extensive range of methods include a variety of Logarithmic Trigonometric and utility functions. Yet there is, at least in my eyes, a glaringly obvious omission.

There is `min` and `max` that can both take numerous arguments and return a single value, but where is the `sum` function?

Instead we have to resort to coding this function ourselves, which is far from efficient.

Examples include:

```javascript
function sum(...nums) {
  return nums.reduce((tot, num) => tot + num);
}

// or

const sum = (...nums) => nums.reduce((tot, num) => tot + num);
```

We could polyfill but extending standard objects like Math is seldom a good decision.

I really would like to know why this method is missing, any suggestions?
Installing Psql in parrot
Published: 2022-12-11 11:48:05

Having a problem installing psql in parrot  or you did install but did not configure properly . here are major steps to follow. 

Parrot psql installaton:
$ sudo apt-get update
$ sudo apt-get install postgresql postgresql-contrib libpq-dev
Enter y when prompted “Do you want to continue? [Y/n]” and wait as the installation completes.

Defining a user role
Postgres uses “roles” to aid in authentication and authorization. By default, Postgres creates a Postgres user and is the only user who can connect to the server.

We want to create our own superuser role to connect to the server.

For those running on elementary or parrot, run the following command first;
$ sudo service postgresql start
$ sudo -u postgres createuser --superuser $USER
Enter your desired password when prompted.

We then have to create a database with that $USER login name, this is what Postgres expects as default.
$ sudo -u postgres createdb $USER
Navigate to your home directory and enter the following command to create the .psql_history in order to save your history:
$ touch .psql\_history
You can now connect to the Postgres server by typing :
$ psql

When facing an error, go through your terminal and navigate to:
$ ls /etc/apt/sources.list.d
that is
$ cd ..
then when @ sources.list.d :
$ sudo rm -r pgdg.list
When done repeat the first instruction shared in this article
SOLVE THE PROBLEM
Tags: solve
Published: 2022-12-11 11:40:22

Winning Card In a card game, each player will be given a set of random cards. Players will throw on the table their one winning card, the player with the highest card wins.  A winning card is the card that only exists once in the set of cards, and the highest one.  Given an array of sets of integers cards, return the card of the winning player. Return -1 If no such card is found.  function solution(cards) {     // write your solution here     return -1; } Example 1: Input: cards = [[5,7,3,9,4,9,8,3,1], [1,2,2,4,4,1], [1,2,3]] Output: 8  Example 2: Input: cards = [[5,5], [2,2]] Output: -1
What is AWS?
Tags: webdev, beginners, programming, aws
Published: 2022-12-11 11:30:05

𝐖𝐡𝐚𝐭 𝐢𝐬 𝐀𝐖𝐒?
AWS (Amazon Web Services) is a cloud computing platform from Amazon that provides customers with a broad set of global compute, storage, database, analytics, application, and deployment services. AWS helps companies of all sizes quickly and cost-effectively build, deploy, and scale applications, websites, and services.
𝐖𝐡𝐲 𝐰𝐞 𝐮𝐬𝐞 𝐀𝐖𝐒?
We use AWS because it is a reliable, secure, and cost-effective cloud computing platform. It provides a wide range of services such as storage, analytics, application development, deployment, and more. AWS also offers scalability, which allows businesses to quickly scale up their operations when needed. Additionally, AWS has a global network of data centers and provides customers with the ability to quickly deploy and manage resources in multiple regions. This makes it an ideal platform for businesses looking to quickly launch and expand their operations.
[AWS VM Service](https://apnadeveloper.com)
How to download an entire website for offline usage (using wget)
Published: 2022-12-11 11:19:02

_Here is a simple step to downloading an entire website and making it available offline using wget._


>💡**Wget** is a command-line **utility for retrieving files** using HTTP, HTTPS and FTP protocols.

---

## How to Install Wget
Wget comes with most Unix/Linux systems, but here is how you get it in case you were left out.

Use the command →

**On Mac**:

`brew install wget`

**On Linux**:

`sudo apt-get install wget`

|

## Using Wget to download the website:
Enter this command on your terminal
```bash
wget -m -p -E -k -np www.example.com
```

The options explained:

```bash
-m, --mirror            Turns on recursion and time-stamping, sets infinite
                          recursion depth, and keeps FTP directory listings.
-p, --page-requisites   Get all images, etc. needed to display HTML page.
-E, --adjust-extension  Save HTML/CSS files with .html/.css extensions.
-k, --convert-links     Make links in downloaded HTML point to local files.
-np, --no-parent        Dont ascend to the parent directory when retrieving
                        recursively. This guarantees that only the files below
                        a certain hierarchy will be downloaded. Requires a slash
                        at the end of the directory, e.g. example.com/foo/.

```

---

For more details on wget usage, check out the _[manual page](https://www.gnu.org/software/wget/manual/wget.html#Examples)_
How to create a website from scratch
Tags: website, html, namangarg
Published: 2022-12-11 11:17:21

## Introduction
Creating a website can seem like a daunting task, especially if you are not familiar with web design and development. However, with the right tools and resources, anyone can create a professional-looking website. In this blog, we will go over the steps to create a website, including choosing a domain name, selecting a web hosting provider, and designing and building your website.

## Choose a Domain Name
The first step in creating a website is to choose a domain name. This is the address that people will use to access your website, such as www.mywebsite.com. When choosing a domain name, try to make it short, memorable, and easy to spell. You can check the availability of a domain name by searching for it on a domain registrar's website.

## Select a Web Hosting Provider
Once you have chosen a domain name, you will need to select a web hosting provider. A web hosting provider is a company that provides the technology and services needed to host your website on the internet. There are many web hosting providers to choose from, and they offer a range of services and pricing plans. When selecting a web hosting provider, consider factors such as the amount of storage and bandwidth they offer, their uptime guarantee, and customer support.

## Design and Build Your Website
After you have chosen a domain name and web hosting provider, it's time to design and build your website. There are many ways to do this, including using a website builder, hiring a web designer, or coding your website from scratch. If you are not familiar with web design, a website builder can be a good option, as it allows you to create a professional-looking website without needing any coding knowledge.

## Publish Your Website
Once you have designed and built your website, it's time to publish it. This involves uploading your website files to your web hosting provider's servers so that they are available on the internet. Most web hosting providers have tools and tutorials to help you with this process. After your website is published, you can share the URL with others so they can access it.

## Conclusion
In conclusion, creating a website is not as difficult as it may seem. By following the steps outlined in this blog, you can have a professional-looking website up and running in no time.

Also follow me on twitter: https://twitter.com/NamanGarg2075
Best Python Books for Zero to Hero based on Amazon Reviews
Tags: python, books, programming
Published: 2022-12-11 11:01:09

Best Python Books for Zero to Hero based on Amazon Reviews:


---- For beginners -----

1) Python Crash Course, 2nd Edition: A Hands-On, Project-Based Introduction to Programming 2nd Edition

4.7/5   7,754 ratings

https://amzn.to/3uCv91a

2) Automate the Boring Stuff with Python, 2nd Edition: Practical Programming for Total Beginners

4.7/5 2,667 ratings

https://amzn.to/3ULXzk1

3) Learn Python in One Day and Learn It Well (2nd Edition): Python for Beginners with Hands-on Project. The only book you need to start coding in Python ... (Learn Coding Fast with Hands-On Project)

4.5/5 1,540 ratings

https://amzn.to/3WlK1x1

4) Python: For Beginners: A Crash Course Guide To Learn Python in 1 Week

4.3/5 3,138 ratings

https://amzn.to/3iPUYID



------ Advanced -------

1. Python Tricks: A Buffet of Awesome Python Features

4.7/5 1,326 ratings

https://amzn.to/3BiEb7i

2. Fluent Python: Clear, Concise, and Effective Programming

4.7/5 681 ratings

https://amzn.to/3uAx4TV



------- For Machine Learning ------

1. Introduction to Machine Learning with Python: A Guide for Data Scientists

4.5/5 588 ratings

https://amzn.to/3W77ZLY

2. Hands-On Machine Learning with Scikit-Learn, Keras, and TensorFlow: Concepts, Tools, and Techniques to Build Intelligent Systems

4.8/5 3,128 ratings

https://amzn.to/3uV8HRj
What happens in a day of an open-source maintainer?
Tags: opensource, maintainers, programming
Published: 2022-12-11 10:41:20

The daily activities of an open-source maintainer can vary depending on the specific project and the needs of the community. Some common tasks that a maintainer might perform include:
* **Reviewing and responding to issues** and pull requests submitted by users
* **Fixing bugs and implementing new features** in the project
* **Communicating with the community** and answering questions about the project
* **Collaborating with other contributors and maintainers** on the project
* **Working on long-term strategic planning** and development of the project
* **Providing support and guidance to users** who are having trouble with the project

Overall, the daily work of an open-source maintainer can be demanding and varied, requiring a combination of technical expertise, community management skills, and strategic thinking. Maintainers often work long hours and may need to juggle multiple tasks and priorities in order to keep up with the demands of the community.

Did we miss something? And how would you weight the tasks?
Common Mistakes Programmers Make
Tags: beginners, career, programming, productivity
Published: 2022-12-11 10:41:16

[facebook.com/Trinwhocode](https://facebook.com/Trinwhocode)

As a programmer, it's easy to get caught up in the rush of coding and forget about potential pitfalls. But making mistakes can not only slow down your progress, but also lead to costly errors down the line. In this article, we'll explore the top 5 mistakes programmers make and how to avoid them.

1. Not testing your code. Testing your code is crucial to ensuring its functionality and catching any potential bugs before they become major issues. Make sure to test your code thoroughly and regularly to avoid costly mistakes.

2. Not commenting your code. Comments are an essential part of any codebase, as they help other developers understand what your code is doing and how it works. Make sure to include clear and concise comments in your code to aid in its readability and maintainability.

3. Not using version control. Version control systems like Git are essential tools for managing and tracking changes to your codebase. Not using version control can lead to lost or overwritten code and make it difficult to collaborate with others.

4. Not staying up to date with the latest technologies and best practices. The world of programming is constantly evolving, and it's important to stay on top of the latest technologies and best practices. This will not only improve your skills and knowledge, but also make your code more efficient and effective.

5. Not seeking help when needed. It's important to remember that no one knows everything, and it's okay to ask for help when needed. Whether it's from a colleague or online resources, don't be afraid to seek out assistance when you need it.

Avoiding these common mistakes can help you become a better programmer and avoid costly errors in your code. Make sure to test your code, comment it, use version control, stay up to date with the latest technologies, and seek help when needed.

[linkedin.com/in/trinmar](https://www.linkedin.com/in/trinmar)
Reducing the Size of Your React Applications with Tree Shaking and Code Splitting
Tags: javascript, react, codesplitting, optimisation
Published: 2022-12-11 10:37:09


As React applications grow in size and complexity, it becomes increasingly important to optimise their performance and reduce their footprint. Two powerful techniques for achieving this are tree shaking and code splitting, which can help to eliminate unused code and split large applications into smaller, more manageable chunks.

Tree shaking is a term used to describe the process of removing unused exports from a module. This is typically done during the bundling process, using a tool such as Webpack or Rollup. By removing unused code, the resulting bundle can be significantly smaller and more efficient, improving the performance and loading time of an application.

To enable tree shaking in a React application, developers can use the import and export syntax provided by ECMAScript modules. For example, instead of importing a module using the require function, developers can use the import keyword, along with the specific exports they want to use:

```
import { MyComponent } from './MyModule';
```

This syntax allows the bundler to determine which exports are actually used in the application, and to eliminate the unused ones.

Code splitting is another technique for optimising the size and performance of React applications. Instead of bundling all of the application code into a single file, code splitting allows developers to split their applications into multiple chunks, which can be loaded on demand as needed.

For example, instead of importing a large module at the top level of an application, developers can use the dynamic import syntax provided by ECMAScript, which allows the module to be loaded asynchronously:

```
const MyModule = React.lazy(() => import('./MyModule'));
```

This syntax allows the module to be loaded only when it is needed, improving the initial loading time of the application and reducing its overall size.

By using tree shaking and code splitting together, developers can create smaller, faster, and more efficient React applications. These techniques can help to eliminate unused code and split large applications into manageable chunks, improving the performance and user experience of an application.