teleren/devto huggingface dataset:
Don't Compare Arrays with == in JavaScript
Tags: javascript, beginners
Published: 2022-03-07 10:49:32

_Originally published on February 19, 2022 at https://rivea0.github.io/blog_

I used to think that if we define two arrays with the same values in the same order, we could compare their equality of value in JavaScript (the vanilla one, that is) using `==`.

How wrong I was.

What I mean is, when you do something like this:

```javascript
let x = [1, 3];
let y = [1, 3];
```

You expect something like `x == y` to be true (remember we're not using the strict equality yet as we know that they are not the same object —yes, [*arrays are objects*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)—, we're only looking if they are equal value-wise). For example, in Python, while they are not the same object in memory, these two lists would equal true:

```python
x = [1, 3]
y = [1, 3]
x == y # True 
x is y # (or `id(x) == id(y)`) False
```

Using `===` in JavaScript for both arrays would, of course, return false as they are not the same objects in memory. That's expected, but there is also not a special treatment for array comparison by value as there is no item-by-item comparison behind the scenes for `==` — so, stay away from using it to compare arrays' value equality.

We can use, however, something like this function (as defined in *JavaScript: The Definitive Guide* by David Flanagan), to compare two arrays for equality:

```javascript
function equalArrays(a, b) {
  if (a === b) return true; // Identical arrays are equal
  if (a.length !== b.length) return false; // Different-size arrays are not equal
  for (let i = 0; i < a.length; i++) { // Loop through all elements
    if (a[i] !== b[i]) return false; // If any differ, arrays are not equal
  } return true; // Otherwise they are equal
}
```

Of course, this would not work recursively, so it would mostly be useful for simple and one-dimensional arrays.

Quite simple, but, something to keep in mind nonetheless.

Also, to learn more about how the equality operator works with objects, reading about [object to primitive conversion](https://javascript.info/object-toprimitive) is a great way to spend some time learning what's going on behind the scenes.
Devto image testing
Published: 2022-03-07 10:46:10

# Steps to integrate Razorpay 

* Setting up Razorpay account.

* Storing API keys in settings.py

* Installing Razorpay library.

* Creating order using Razorpay API.

* Creating order at backend and also creating Razorpay order.

	* Show template

	* render to payment.html

	* Get info of call back URL

	* Done with creating an order.

### **Uploading a File**

There are three ways you can upload a file:

- From an `Object` instance

- From a `Bucket` instance

- From the `client`

In each case, you have to provide the `Filename`, which is the path of the file you want to upload. You’ll now explore the three alternatives. Feel free to pick whichever you like most to upload the `first_file_name` to S3.

![](https://notionpack-uploads.s3.amazonaws.com/blog_images/tmp/tmpmd44o6gp.png)

![](https://notionpack-uploads.s3.amazonaws.com/blog_images/tmp/tmpay63ewod.png)
React / Styled-Components Example : Design System
Tags: react, styledcomponent, design
Published: 2022-03-07 10:44:44

Everybody talk design system ?
What is this ?

Example => create re-usable heading .



```js
import styled from "styled-components"

/**
* The problem heading are multiple level (1-6)
* how to refactor my code
* The simple way is create for each heading level => 
*/

// re-usable heading with small code
export const Heading = ({level,color,children,...props})=>{
    // refactor heading level
    const StyledHeading = styled[`h${level}`]`
        color:${(color)=>color};
      `
    return(
        <StyledHeading 
            color={color}
            {...props}
          >{children}
       </StyledHeading>
    )
} 

```
All format testing (local testing)
Published: 2022-03-07 10:39:48

# Steps to integrate Razorpay 

* Setting up Razorpay account.

* Storing API keys in settings.py

* Installing Razorpay library.

* Creating order using Razorpay API.

* Creating order at backend and also creating Razorpay order.

	* Show template

	* render to payment.html

	* Get info of call back URL

	* Done with creating an order.

### **Uploading a File**

There are three ways you can upload a file:

- From an `Object` instance

- From a `Bucket` instance

- From the `client`

In each case, you have to provide the `Filename`, which is the path of the file you want to upload. You’ll now explore the three alternatives. Feel free to pick whichever you like most to upload the `first_file_name` to S3.


```python
@app.action("submit_your_response")
def submit_response(ack, body, client, logger):
    reference_id = body["actions"][0]["value"]
    # form_data = SlackForm.objects.filter(reference_id=reference_id).first()
    form_data = form_data_2
    form_view = utils.get_form_view_data(form_data)
    form_view["private_metadata"] = reference_id
    try:
        ack()
        result = client.views_open(trigger_id=body["trigger_id"], view=form_view)
        logger.info("User clicked submit button")
    except Exception as e:
        logger.error(e)
```

[https://gist.github.com/Nishant127/13898538d35a024b4d93a592b1b4a6ea](https://gist.github.com/Nishant127/13898538d35a024b4d93a592b1b4a6ea)
Deep dive into Laravel Pagination - PHP IteratorAggregate
Published: 2022-03-07 10:27:54

Regarding to [Laravel pagination doc](https://laravel.com/docs/6.x/pagination#displaying-pagination-results), when calling the paginate method, you will receive an instance of [Illuminate\Pagination\LengthAwarePaginator](https://laravel.com/api/6.x/Illuminate/Pagination/LengthAwarePaginator.html). When calling the simplePaginate method, you will receive an instance of [Illuminate\Pagination\Paginator](https://laravel.com/api/6.x/Illuminate/Pagination/Paginator.html). These objects provide several methods that describe the result set. In addition to these helpers methods, the paginator instances are iterators and may be looped as an array.

There is a basic example of Laravel pagination in your project
```php
public function index(Request $request)
   {
       $users = User::paginate(15);
       return view('user.index', ['users' => $users]);
   }
```
```php 
<div class="container">
   @foreach ($users as $user)
       {{ $user->name }}
   @endforeach
</div>
```
Here is what you see in detail of $users variable

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

Now let look at inside [LengthAwarePaginator class](https://github.com/laravel/framework/blob/6.x/src/Illuminate/Pagination/LengthAwarePaginator.php), we can see that it implements several interfaces such as ArrayAccess, Countable, IteratorAggregate, JsonSerializable which are known as [predefined interfaces in PHP](https://www.php.net/manual/en/reserved.interfaces.php). This class also extends AbstractPaginator which has [getIterator()](https://laravel.com/api/6.x/Illuminate/Pagination/AbstractPaginator.html#method_getIterator) to return ArrayIterator

In this case, we consider the IteratorAggregate is an interface to create an external Iterator which allows you to traverse your custom class objects using foreach. With the [Interface synopsis](https://www.php.net/manual/en/class.iteratoraggregate.php), IteratorAggregate extends Traversable interface itself is an abstract base interface (with no methods as shown in the interface synopsis) that cannot be instantiated. However, it can be used to check whether a class is traversable using foreach or not.

```php
class Food implements IteratorAggregate
{
   public array $arr;
 
   public function __construct() {
       $this->arr = ['Milk', 'Cake', 'Coke'];
   }
 
   public function getIterator() {
       return new ArrayIterator($this->arr);
   }
}
 
$obj = new Food();
 
foreach($obj as $key => $value) {
  echo $key ." =>" . $value . "\n";
}
 
======================================
OUTPUT
 
0 => 'Milk'
1 => 'Cake'
2 => 'Coke'
``` 

IteratorAggregate is an easy way to implement an Iterator. The advantage with IteratorAggregate is the speed, it is much faster than its alternatives. The problem with it it's that... despite the name it's not an iterator but a traversable (so again, no next, key, current, valid, rewind methods).
Emojicode - Code with emojis 😎 (Introduction)
Tags: programming, tutorial, beginners, codenewbie
Published: 2022-03-07 10:24:04

Let's make our code beautiful and attractive...
Let's code with emojis!

In this article I'll cover **Introduction to Emojicode** -> 1st article/blog of 3 part series.

### What is this - programming in emojis 😕?
Yeahhh.. programming with emojis. 
[Emojicode](https://emojicode.org) is an open-source, strongly-typed programming language consisting of emojis created by Theo Weidmann.

### Let's begin! 🤩
So before getting to the basics of programming, let me tell you where you can code this language.
1. You can run your Emojicode programs locally by following the steps of installation on their main website: [Install Locally](https://www.emojicode.org/docs/guides/install.html)
2. You can start right away using the online editor of TIO: [Online TIO Editor](https://tio.run/#emojicode6)

#### Extension:
We write Emojicode programs in files with the extension `.emojic` or `.🍇`

#### Basic Structure:
All code will be inside 🏁 block. The 🏁 block indicates all the code that should run when the file is executed.
For larger programs, we use 🍇 and 🍉 to add more blocks.

```
🍇 --> the start of the code block
🍉 --> the end of the code block
```
So, basic emojicode  file will look like this:

```
🏁 🍇
  code here..
🍉
```

#### Print stuff:
To print in Emojicode, we use the 😀 ❗️

```
😀 code to print.. ❗️
```

#### Strings:
If you have ever worked with a programming language then you must have worked with strings. But for newbies - Strings are a form of data type for computer. Strings are pieces of text.

Strings in Emojicode has to be wrapped around 🔤
Here's an example of printing a string in emojicode:
![example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hojp7ntuppjqoc1ndv9p.png)

#### Comments
Comments are lines of code that you don't want to execute. Comments can explain what the code is doing or leave instructions.
There are two types of comments: 
1. Single-line --> comment out a single line and starts with a 💭 in emojicode.
2. Multi-line --> comment out multiple lines and starts with 💭🔜 and ends with 🔚💭 in emojicode.

```
🏁 🍇
💭 single-line comment
💭 printing a string
  😀 🔤Practicing comments🔤❗️
  💭🔜 Multi-line comment 🔚💭
🍉
```

> TIP: Press `Win + .` key combination on windows or `Control + Command + Spacebar` on mac to bring the emoji keyboard.


![emoji keyboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4bzo9xrndqqzyacjfa9t.png)

## Thank You! Stay Tuned for other parts :)
Build a Messenger Clone with MERN Stack (MongoDB, Express, React, Node JS) + Socket.io (Day 6)
Tags: javascript, react, webdev, tutorial
Published: 2022-03-07 10:19:27

In this Facebook Messenger   Clone  Tutorial series, we will learn to build an Awesome Full Stack  Facebook Messenger Project with realtime messaging functionality with socket.io . We have one on one chat as well as group chatting functionality in this app.

In this video, we will be Creating Verification Model


{% youtube I8qUJ_OFxao %}
BigQuery Runner for VSCode
Tags: bigquery, vscode, gcp
Published: 2022-03-07 10:17:35

---
title: BigQuery Runner for VSCode
published: true
description:
tags: BigQuery, VSCode, GCP
//cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u55k22wbzwvyv754rh32.png
---

## Motivation

**Write a query, run it, and see the results on the fly in VSCode, much like BigQuery web UI.**

## Installation

[BigQuery Runner \- Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=minodisk.bigquery-runner)

## Features

### Query Validation

You can write queries while checking the queries you are writing for syntax errors, unrecognized field names, etc.
Because the extension marks error locations on the editor file.

![Query Validation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kg70c149oybu3m2okxol.png) 

### Query Costs

You need not be overly concerned about how much data the query you are writing will scan and charge for.
Because the extension will show you the amount of data that would be scanned and the amount of data actually scanned.

![Query Costs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7gcq1xjzi2axi97xf2iu.png)

### Running Query

You can query the file you have open directly into a BigQuery, or if you have selected text, you can query that text.

![Running Query](https://media.giphy.com/media/M842MF8jhgxNAl9L5M/giphy.gif)

### Format Results

Output formats supported include aligned tables, CSV, JSON, and JSON Lines.

### Output Results

You can view the results of your query in a dedicated panel, in the output panel, or even output them to a file.

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

### Command Based

You can execute all operations from commands.
Command support means that once you have set your key bindings, you can repeatedly try queries without taking your hands off the keyboard.

![Command Based](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qs090dskey15m6vonrgd.png)
Difference Between Web 2.0 And Web 3.0
Published: 2022-03-07 10:13:34



Confused while understanding web 2.0 and web 3.0 differences? Here’re the significant differences between web 2.0 and web 3.0 you need to understand i.e. web 2.0 vs web 3.0. https://blockgames.gg

If you are following the world of blockchain closely, then you must have come across the terms “Web 2.0” and “Web 3.0”. You might be wondering about the exact definition of these terms and how they are relevant to the blockchain. The internet, as we know it, has been through many milestones before reaching the stage it is in now. Web 2.0 and Web 3.0 are generations of internet services with distinct variations in how users interact with the internet. Therefore, people are eager to find out web 2.0 and web 3.0 differences to know why they need Web 3.0. The following discussion would help you discover the distinct traits of web 2.0 and web 3.0 in detail. The detailed understanding of web 2.0 and web 3.0 would set the ideal foundation for reflecting on the web 2.0 vs web 3.0 comparison. https://nestcoin.com

The detailed impression of web 2.0 and web 3.0 alongside their features clearly showcase the differences between them. For example, you can notice that web 2.0 is all about read and write operations while web 3.0 is driving emphasis on the semantic web
https://zuri.team
Tutorial - Responsive Registration Form In HTML & CSS 😍
Tags: html, css, javascript, tutorial
Published: 2022-03-07 10:04:20

{% embed https://www.youtube.com/watch?v=Koo2dX9cgTk %}

---

In my latest **[Youtube Video](https://www.youtube.com/watch?v=Koo2dX9cgTk)**, We are going to build a **Beautiful Registration Form** using just pure **HTML** & **CSS** 🤯

Make sure to **Like** the **[Youtube Video](https://www.youtube.com/watch?v=Koo2dX9cgTk)** & **Subscribe** to my **[Youtube Channel](https://www.youtube.com/channel/UCIb8_J9lqtiWGMIOdQ5DVsg)** for more **Amazing** content related to **Web Development** and **Self Taught Developer** Journey 🙌

I have also provided the **Source Code Link** in the video description on Youtube for your reference 💯

---

Please do me a favour by **Reacting** to this post with 
❤️ + 🦄 and also bookmark 🔖 it for your future reference ✅

---

**Connect/Follow** me on Social platforms like Twitter, Linkedin where I regularly post Tips💡+ Guides📜 + Resources 🌟 related to Web Development and Programming 👨‍💻


![RammCodes Social Follow Request Banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8a5vzbe9atsgmoll0oih.png)

### 🐦 **[My Twitter](https://twitter.com/rammcodes)**
### 👨‍💼 **[My Linkedin](https://www.linkedin.com/in/rammcodes/)**
### 🌐 **[My Website](https://rammaheshwari.com)**

---

Press the **Follow** button to stay updated with my content 🚀

Thanks for your **Support** ❤️
npx create-react-app i received this error:
Tags: react
Published: 2022-03-07 10:01:07

D:\>npx create-react-app abc
npx: installed 67 in 4.255s

Creating a new React app in D:\abc.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...



  Aborting installation.
Unexpected error. Please report it as a bug:
Error: spawn UNKNOWN
    at ChildProcess.spawn (internal/child_process.js:403:11)
    at Object.spawn (child_process.js:553:9)
    at spawn (C:\Users\Gilang\AppData\Roaming\npm-cache\_npx\17768\node_modules\create-react-app\node_modules\cross-spawn\index.js:12:24)
    at C:\Users\Gilang\AppData\Roaming\npm-cache\_npx\17768\node_modules\create-react-app\createReactApp.js:407:19
    at new Promise (<anonymous>)
    at install (C:\Users\Gilang\AppData\Roaming\npm-cache\_npx\17768\node_modules\create-react-app\createReactApp.js:359:10)
    at C:\Users\Gilang\AppData\Roaming\npm-cache\_npx\17768\node_modules\create-react-app\createReactApp.js:485:16
    at processTicksAndRejections (internal/process/task_queues.js:93:5) {
  errno: -4094,
  code: 'UNKNOWN',
  syscall: 'spawn'
}

Deleting generated file... package.json
Deleting abc/ from D:\
Done.

help me
3 Reasons why we need an Open Source Data Infrastructure Platform
Tags: devops, opensource
Published: 2022-03-07 09:58:10

> TL;DR Speeding up the setup, commoditising and enhancing the developer experience of the data infrastructure is the need of the hour, and open sourcing [Gigahex](https://gigahex.com) is a first step towards this.



Being in the Big Data industry for more than a decade has made me realize that managing open source distributed systems is indeed a painful experience that forces you to have sleepless nights. But the cloud vendors like — AWS, GCP and Azure have come to rescue by offering managed services with some extra platform fee, generally paid per hour per compute instance. This seems reasonable, and large organizations with deep pockets may keep up with cloud bills, but many SMBs and research institutes may not have such funding to support their research work.

I want to highlight the three main reasons why its time to build the Data Infrastructure Platform in **open**.

## Launch Data Infrastructure under 60 seconds
We have been living in a world of super computers and Google, where we get answers to the most fascinating questions at the click of a button. But when it comes to setting up a development or testing environment for the data engineers, it takes hours or even days after exchanging multiple slack messages and email threads and escalations.

> Why can’t we get things up and running under 60 seconds?

## Pay based on criticality of data application
Open source software is free, but deploying and managing is extremely costly and time consuming. Cloud vendors have provided managed services for most of the popular data services — Databricks, AWS EMR, GCP Dataproc, Azure Analytics and few others.

> Why is there not an established open source alternative that provides end-to-end solution for setting up data infrastructure and analytics engine?
This gives the businesses to choose the right data platform, based on the need for speed and SLA for these services.

## Stay sane in the world of multiple browser tabs
Data Engineers have been constantly mastering the skill of Cmd+Tab / Win + Tab in order to find the right window which can help them find why a job failed, lost executor, session terminated, received OOM error. Is it the application or infrastructure issue?
As data applications are tightly coupled to the infrastructure, so each data engineer also needs to be good at Data Ops. This brings them to the world of total chaos, demanding them to jump from tab to tab, mail to slack, slack to Zoom and finally they demand to bring Friday earlier :)

> So why can’t we have an open source data platform to marry the data infrastructure to the data applications?

## The new Gang in the Open source street
Gigahex is making a debut in the world of Open source, to solve the above issues. The first release enables developers to launch Apache Spark, Kafka and Hadoop single node clusters on your local machine.

Give it a [try](https://gigahex.com) and let us know your [feedback](https://github.com/GigahexHQ/gigahex/discussions/categories/ideas).
How to Insert Images in the Angular RTE Using a File Manager
Tags: angular, webdev, programming
Published: 2022-03-07 09:52:24

Watch a quick overview on how to browse for and insert images in the Syncfusion Angular [Rich Text Editor](https://www.syncfusion.com/angular-ui-components/angular-wysiwyg-rich-text-editor) component using a file manager. This video explains how to browse for and select a file or folder from the file manager in the Rich Text Editor component. You will learn how to integrate and use the file manager in the RTE. 

Product Overview: https://www.syncfusion.com/angular-ui-components/angular-wysiwyg-rich-text-editor

Explore tutorial video: https://www.syncfusion.com/tutorial-videos

Download a getting started example from GitHub: https://github.com/SyncfusionExamples

{% youtube teTOxZx4MCc %}
How to know, as a frontend developer, when the color contrast ratio is good enough?
Tags: css, a11y, frontend, design
Published: 2022-03-07 09:40:42

I did a search if there is a tool that takes in 2 colors, asks you which one you want to change to achieve expected contrast ratio, and results 2 colors that has a right ratio.

I've tested this, and I think this is very useful if you are a user. It also helps me, setting the values to the required color, which I can copy afterwards. 
https://chrome.google.com/webstore/detail/fix-contrast/pbbcgecjmpkglppfjjggkkbhdnlemhkg/related

However it would be nicer to have a system as above. Anybody aware of such a tool? Thanks
OpenFocre 2022 & Apache ShardingSphere: Getting Involved in Open Source is a Great Idea
Tags: opensource
Published: 2022-03-07 09:29:51


In case you missed the [intro video](https://www.youtube.com/watch?v=MEIN5nesbPA), one of our contributors shared his tips with open source beginners. 

[The community](https://github.com/apache/shardingsphere) is open to all of you, if you are curious about the Apache ShardingSphere project. Or, it's a great place for students to learn and practice. 

Feel free to reach out to us on [Slack Channel](https://app.slack.com/accept-shared-channel/T026JKU2DPF/I035FT5TQH5/enQtMzE4NTkyMzk0MjU4My1kOWQ4Y2Q0YmI4M2RhYTg1NjQ5Y2JmNjZmOGEzNzYwMjY3MjFmNjk1YWZmZDViNmY3M2E2YTQzYmRmNWMxNTEw).
 
A lot of [good first issues](https://github.com/apache/shardingsphere/issues?page=1&q=is%3Aopen+is%3Aissue+label%3A%22project%3A+OpenForce+2022%22) are open to newcomers. 

Wanna join?

Apache ShardingSphere Open Source Project Links:

[ShardingSphere Github]
(https://github.com/apache/shardingsphere/issues?page=1&q=is%3Aopen+is%3Aissue+label%3A%22project%3A+OpenForce+2022%22)

[ShardingSphere Twitter](https://twitter.com/ShardingSphere)

[Contributor Guideline](https://shardingsphere.apache.org/community/cn/contribute/)