teleren/devto huggingface dataset:
How Babel transforms JSX to React.createElement()
Tags: react, webdev, javascript
Published: 2023-01-02 06:18:33


Consider the following component

```
const AnimalJSX = (props)=>{
	return (
		<div>
			<h1>{props.name}</h1>
			<p>{props.description}</p>
		</div>
	)
}
```

```
<AnimalJSX name="Dog" description="A brief description"/>
```

What is JSX ? It is a syntax extension to Javascript to describe what the UI shoudl look like.. JSX produces react elements which are renderd on browser.  Babel is used to transform JSX to raw javascript. 

Ever wondered how this works under the hood how babel transforms this to raw javascript methods of React.

React uses React.createElement() to create an elements that needs to be rendered. Here is a simplified version of the createElement function signature. 

```
React.createElement(type,props,children)
```
type: the type of element you want to create  for example: h1,h2, div,span or another React.createElement() object.

props: the props we want to pass into the components for example className for styling or other parameters. 

children: An array of text nodes or other React.createElement objects we want to render as children for this particular component. 

If you pass a text value as an array object it will be treated as a text node only. 

Consider the following code that renders the AnimalJSX  component but using createElement method.

```
const Animal = (props)=>{
	return React.createElement("div",{},[
		React.createElement("h1",{key:1},props.name),
		React.createElement("p",{key:2},props.description)
	])
}
```

Now if we want to render the `Animal` component in vanilla react without using JSX here is how we'll do it

```
const container = document.getElementById("root");

const root = ReactDOM.createRoot(container);

root.render(React.createElement(Animal,{name:'Dog',description:'A type of dog'},null));
```

We can either omit the children parameter or just for clarity I am passing null to it. This will render as following:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mfr7qfekb23zs40h71ae.png)
Building a free Open-source portfolio template using HTML, CSS and JS | Part 4
Tags: html, css, beginners, webdev
Published: 2023-01-02 06:10:56

On the 15th of May in 2020 I [wrote here](https://dev.to/nisarhassan12/free-open-source-portfolio-template-for-developers-ih) about the free open source portfolio template that anyone could use for free.

<blockquote>
    <div>
        GitHub <a href="https://github.com/nisarhassan12/portfolio-template" target="_blank">Repo Link →</a>
    </div>
    <br/>
    <div>
        Check out the <a href="https://portfolio-template.surge.sh" target="_blank">live demo here →</a>
    </div>
</blockquote>

Since then it has got 395 stars on GitHub and 128 forks.

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

I have started a [video series](https://www.youtube.com/watch?v=1nchVfpMGSg&list=PLwJBGAxcH7GzdavgKlCACbESzr-40lw3L) on YouTube where I'm going to build it from scratch using HTML, CSS and a little bit of JavaScript. 

Come join me in the journey [here is the link of of the part 4 of the video series](https://www.youtube.com/watch?v=TwQZZJOMBWg).
{% youtube TwQZZJOMBWg %}

[https://www.youtube.com/@nisarhassan12](https://www.youtube.com/@nisarhassan12) if you find it worthy. Thanks
Pipe tail output into column
Tags: commandline, linux
Published: 2023-01-27 03:01:35

---
title: Pipe tail output into column
published: true
date: 2023-01-02 00:56:28 UTC
tags: commandline,linux
canonical_url: https://avilpage.com/2023/01/pipe-tail-output-into-column.html
---

`column` command-line utility formats its input into multiple columns and aligns it nicely. It is useful for formatting output of csv files, or other commands.

```
$ cat users.csv
id,user,active
1,John Doe,true
2,Will Smith,false

$ column -s, -t < users.csv
id user active
1 John Doe true
2 Will Smith false

```

`tail` command-line utility prints the last 10 lines of a file. It can be used with `-f` option to follow the file as it grows.

```
$ tail -f users.csv
id,user,active
1,John Doe,true
2,Will Smith,false

```

To format the output of `tail -f` command, we can't use `column` command directly. `column` command can't produce output until it receives all the input. It needs all the input beforehand to calculate the column widths.

```
$ tail -f users.csv | column -s, -t

```

So, the above command won't work.

As the goal is to follow the output of the file, we can use `watch` command for this. `watch` command executes a command periodically, and displays its output.

```
$ watch -n 1 "tail -n 20 users.csv | column -s, -t"

```

This command will fetch the last 20 lines of the file, pipe it to column command, and display the output. It will repeat the command every 1 second.

As the file grows beyond 20 lines, the headers will be truncated. To preserve the headers, we can use `head` command in addition to `tail` command.

```
$ watch -n 1 "(head -n1 && tail -n20) < users.csv| column -s, -t"

```

This command will print the first line of the file, and then the last 20 lines of the file. The output will be piped to `column` command, and displayed.

Here is a screenshot of the output of a demo csv.

![pipe tail output to column](https://avilpage.com/images/pipe-tail-output-into-column.png)

This makes it easy to watch the output of a file as it grows.
I wrote my first neovim plugin! co-author.nvim 💻🪄
Tags: showdev, linux, vim, tooling
Published: 2023-01-02 05:39:48

## What is this

How many times have you been working on a piece of code with someone and then when committing you ask their full name and email address for adding a Co-author to the commit?

Upgrade to 21st century, use this plugin to automatically fetch author details from your commit history and then add to your commit message, all from inside neovim.

It shows you a list of all the unique authors in your current repo.

`co-author.nvim` automatically works with telescope and presents the list in a nice fuzzy searchable UI.

## Inspiration

Noticed something similar on a co-workers using IntelliJ, and I wanted it!

## Prerequisites

Before you begin, ensure you have met the following requirements:

- You have installed the latest version of `neovim`

## Installing co-author.nvim

To get co-author.nvim, add the following to your plugin list:

```lua
-- Packer
use '2kabhishek/co-author.nvim'

-- Lazy
'2kabhishek/co-author.nvim'

```

## Using co-author.nvim

`co-author.nvim` adds a new command `:GitCoAuthors`.

You can add your custom bindings for the command `:GitCoAuthors`, the recommended keybinding is `<leader>gA`.

check `:help co-author` for more details.

> NOTE: By default there are no configured keybindings.

## How it was built

co-author.nvim was built using `nvim, lua`

## Challenges faced

Figuring out vim's rtp was tricky initially.

## What I learned

- Learned about nvim plugin ecosystem
- Explored vim APIs

## What's next

You tell me!

Hit the ⭐ button if you found this useful.

## More Info

[co-author.nvim repo](https://github.com/2KAbhishek/co-author.nvim)
[my neovim IDE configs repo](https://github.com/2KAbhishek/nvim2k)
Data Science vs Data Engineering
Tags: datascience, career, discuss
Published: 2023-01-02 05:33:10

I am a Full Stack software developer. I mostly work on Backend (Pyhon , Node.js , Go lang) , Frontend (React, React-Native & Vue) , DB (SQL , Mongo , Redis).

Now a days , Job market in USA is very tough for SDE roles ( it is even harder for international students and international H1B holders due to many restrictions). I am an international student in USA , will complete my Master's in 1 year (approx Dec, 2023). In this tough time , I am trying to expand my knowledge for other job related  tech stacks. I want to learn another field (apart from Full-stack development) in the year 2023.  

I am currently exploring Data science vs Data Engineering.

By Data science , I am also including (AI-ML-DL)
and
By Data Engineering , I means technologies like Hadoop,  Spark,  Hive,  HBase , Kafka etc.

for job prospect , which field will be better. I understand that both of these fields may have good scope. But as a individual which one do you think is better , if you are in my situation.
Laravel 9 Razorpay Payment Gateway Integration
Tags: laravel, php, razorpay, integration
Published: 2023-01-02 05:30:00

In this article, we see laravel 9 razorpay payment gateway integration. Here, we will learn how to integrate razorpay payment gateway in laravel 9. 

As you all know if you are developing an e-commerce website then you must need a payment system to buy and sell your product on your website and at that time we require any type of payment integration required in the website.

Razorpay payment gateway integration is very easy to use like other payment gateways. Razorpay helps process online payments for online as well as offline businesses. 

Razorpay allows you to accept credit cards, debit cards, net banking, wallet, and UPI payments with the Mobile App integration.

So, let's see razorpay payment gateway integration in laravel 7/8/9, and laravel razorpay integration.

```
Step 1: Install laravel 9 Application

Step 2: Create an Account in Razorpay

Step 3: Install Razorpay Package

Step 4: Add Key and Secret Key

Step 5: Create a Route

Step 6: Create RazorpayController

Step 7: Create Blade File

Step 8: Run Laravel 9 Application
```
Spring 5 - Inversion of control.
Tags: webdev
Published: 2023-01-02 05:28:47

IOC is a design principle which maintains the object creation and management. 

Normally if we create a object for class it will stick to the particular class. In case of Inversion of control, we need to create object as per business requirement so we have to create new object everytime for the required object to overcome this Interface is used to solve tight coupling.

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

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

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

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

This will overcome the tight coupling still the code is not configurable.

**Spring Container**
create and manage the object(IOC)
Inject dependencies(DI).

There are 3 ways to configure spring container.
XML based (legacy)
Java Annotation
Java Source code

Steps :
Configuring spring bean
create a spring container
Retrieve beans from container.


XML Based 

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


A "Spring Bean" is simply a Java object.

When Java objects are created by the Spring Container, then Spring refers to them as "Spring Beans".

Spring Beans are created from normal Java classes .... just like Java objects.

Now it will create a TrackCoach bean we dont need to change code in Java files.

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

Now it will create a bean for baseBallCoach 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rpp1fu14o0nqk1qhd6r5.png)
Analyzing Firewall Logs
Tags: cybersecurity, socanalyst, tech
Published: 2023-01-02 05:25:47


{% embed https://youtu.be/aR33DY824WU %}
In this video, I was able to:


**- Generate Traffic to the Firewall**

using a script on puTTY configuration window, I was able to load and open the traffic-generator and type in **_sh /tg/malware.sh_**. Which is able to generate test malware traffic to the Firewall so that you're able to see the malware traffic in the Firewall. 

**-  Review Traffic in the Firewall Log**
noticing the traffic from the firewall by clicking on monitor. You are able to notice the traffic under the Application column and see the traffic that is categorized as web-browsing. Also you can review the Detailed Log View window to see the source, destination.
Exploring the Intersection of AI and AR/VR Technology
Tags: machinelearning, deeplearning, argumentedreality, virtualreality
Published: 2023-01-02 05:16:02

Today, I am going to talk about how artificial intelligence (AI), machine learning, and deep learning are helping in the development of augmented reality (AR) and virtual reality (VR) technology.

First of all, let's start with a brief overview of what these technologies are. Artificial intelligence is a branch of computer science that deals with the development of intelligent systems that can simulate human-like behavior. Machine learning, on the other hand, is a subset of AI that involves the use of algorithms and statistical models to enable computers to learn and improve their performance without being explicitly programmed. Deep learning is a subfield of machine learning that involves the use of artificial neural networks to model high-level abstractions in data.

Now, let's see how these technologies are helping in the development of AR and VR technology. One of the main applications of AR and VR technology is in the field of gaming. These technologies allow gamers to experience an immersive and interactive gaming environment by overlaying digital elements onto the real world or creating a completely virtual environment.

In order to create such immersive and interactive environments, AI and machine learning algorithms are used to analyze the user's movements and actions in real-time and adapt the game accordingly. For example, in a VR shooting game, the algorithms can analyze the user's hand movements and recognize the type of weapon they are holding, and in an AR racing game, they can analyze the user's body movements and recognize the type of vehicle they are driving.

Another application of AR and VR technology is in the field of education and training. These technologies can be used to create interactive and engaging learning environments that allow students to experience and practice complex concepts in a virtual environment.

AI and machine learning algorithms are used to analyze the user's progress and adapt the learning material accordingly. For example, if the user is struggling with a particular concept, the algorithms can provide additional learning resources and exercises to help them understand it better.

In conclusion, AI, machine learning, and deep learning are playing a crucial role in the development of AR and VR technology. These technologies are enabling the creation of immersive and interactive environments that are being used in a wide range of applications, including gaming and education.

## Thank you for reading. Do you have any questions? Ask in the comment.

<a href="https://www.buymeacoffee.com/anurag629" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>
Number of Closed Islands
Tags: javascript, leetcode
Published: 2023-01-02 05:09:51

[Number of Closed Islands](https://leetcode.com/problems/number-of-closed-islands/description/)
```js
var closedIsland = function(grid) {
    let m=grid.length;
    let n=grid[0].length;
    
    let count=0;
    
    function dfs(x,y,grid){
        if(x<0 || x>=grid.length || y<0 || y>=grid[0].length || grid[x][y]==1){
            return;
        }
        
        grid[x][y]=1;
        dfs(x+1,y,grid);
        dfs(x-1,y,grid);
        dfs(x,y+1,grid);
        dfs(x,y-1,grid);
    }
    
    // Exclude connected group of 0s on the corners because they are not closed island.
    for(let i=0;i<m;i++){
        for(let j=0;j<n;j++){
           if(grid[i][j]==0 &&(i==0 || i==m-1 || j==0 || j==n-1)){
               dfs(i,j,grid);
           }
        }
    }
    // Count the number of connected component of 0s on the grid.
    for(let i=1;i<m-1;i++){
        for(let j=1;j<n-1;j++){
           if(grid[i][j]==0){
               dfs(i,j,grid);
               count++;
           }
        }
    }
    
    return count;
};

```
Monorepo with PNPM workspace
Tags: javascript, node, pnpm, monorepo
Published: 2023-01-02 04:52:22

## Monorepo ?

Monorepo is single repository with many project or packages (library or modules), you can reuse code as package.

[en.wikipedia.org/wiki/Monorepo](//en.wikipedia.org/wiki/Monorepo) has good explaination for Monorepo including advantages and disadvantages.

![Monorepo structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yhwewonjl1yzhiy32dz4.png)

## Monorepo with PNPM workspace

PNPM only need `pnpm-workspace.yaml` on your root repository alongside `packages.json`, with **array path** to directory in `packages` property.

```yaml
packages:
    - "apps/*" # support glob pattern
    - "packages/*"
```
```
monorepo-example/
├─ apps/
├─ packages/
├─ package.json
└─ pnpm-workspace.yaml
```

**NOTE**: `apps/*` and `packages/*` is very popular monorepo structure, where `apps/*` is projects directory and `packages/*` is reusable code.

All you need just create directory inside `packages` list, change directory to it, and do `pnpm init`.

```bash
mkdir -p packages/math-lib
cd packages/math-lib
pnpm init
cd ../..
mkdir -p apps/calculator
cd apps/calculator
pnpm init
cd ../..
```

### List all workspaces

List all workspaces in JSON format.

```bash
pnpm m ls --depth -1 --json
```

### Command specific workspace

Run command on specific workspace using flag `--filter` following with `name` in `package.json`.

```bash
# Format
pnpm --filter <workspace> <command>
pnpm -F <workspace> <command> # short alias
# Example
pnpm --filter math-lib add lodash
pnpm --filter math-lib add -D typescript @types/lodash
pnpm --filter calculator run test
# Support glob pattern
pnpm --filter pkg* run test
```

**NOTE**: PNPM use `name` property in `package.json` to filter workspace, so make sure ever `name` in `package.json` is unique.

### Add local dependency

Add local dependency using flag `--workspace` to [only adds the new dependency if it is found in the workspace](//pnpm.io/cli/add#--workspaces).

```bash
# Example
pnpm --filter calculator add math-lib --workspace
```

## Project example

```bash
mkdir -p monorepo-example
cd monorepo-example
pnpm init
mkdir -p packages/math-lib
cd packages/math-lib
pnpm init
cd ../..
mkdir -p apps/calculator
cd apps/calculator
pnpm init
cd ../..
touch packages/math-lib/index.js
touch apps/calculator/index.js
```

```javascript
// packages/math-lib/index.js
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;

module.exports = {
  add,
  subtract,
};
```

```javascript
// apps/calculator/index.js
const { add, subtract } = require("math-lib");

console.log(`9 + 10 = ${add(9, 10)}`);
console.log(`26 - 9 = ${subtract(26, 9)}`);
```

```bash
pnpm --filter calculator add math-lib --workspace
```

```jsonc
// apps/calculator/package.json
{
  "scripts": {
    "start": "node index.js"
  }
}
```

```jsonc
// package.json
{
  "scripts": {
    "calculator:start": "pnpm -F calculator run start"
  }
}
```

```bash
pnpm run calculator:start
```

![output calculator run start](//anasrar.github.io/assets/blog/monorepo-with-pnpm-workspace/output.png)
OAuth 2.0 - Resource Server
Published: 2023-01-02 04:47:29


Generate a spring boot project and add 3 dependencies:

**Spring Web** WEB
Build web, including RESTful, applications using Spring MVC. Uses Apache Tomcat as the default embedded container.

**Spring Boot DevTools** DEVELOPER TOOLS
Provides fast application restarts, LiveReload, and configurations for enhanced development experience.

**OAuth2 Resource Server** SECURITY
Spring Boot integration for Spring Security's OAuth2 resource server features.

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


Import the **Maven project** into **Spring Tool Suite** (I am using v4 based on Eclipse). The pom.xml has a **dependency** which enforces **security**: meaning all requests to the resource server will need to be authenticated and authorised.

```
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-oauth2-resource-server</artifactId>
		</dependency>
```

E.g.
Create a restful endpoint in the resource server project, and try to access it without auth:

```
package com.idprovidersanbox.ws.api.ResourceServer.controllers;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/users")
public class UsersController {

	@GetMapping("/status/check")
	public String status() {
		return "Working...";
	}
}

```

You will get a 401 unauthorised error:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/blz2pb01zrfjmgwihbof.png)
Онлайн курсы для женщин - blogopsy.ru
Published: 2023-01-02 04:26:19

Привет! Хочу представить вам мой проект - агрегатор онлайн курсов для женщин [https://blogopsy.ru/](https://blogopsy.ru/).

Здесь вы найдете различные женские курсы по направлениям:

1. [Курсы похудения](https://blogopsy.ru/kursy-pokhudeniya/)

2. [Курсы нутрициологов](https://blogopsy.ru/kursy-nutricziologov/)
3. [Курсы бровиста](https://blogopsy.ru/kursy-brovista/)
4. [Курсы для беременных](https://blogopsy.ru/kursy-dlya-beremennykh/)
и многие другие.

Буду рада вашим комментариям!
C# Study Plan for Mid-Level Developers
Tags: webdev, csharp, programming, beginners
Published: 2023-01-02 04:20:06


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/00smjc1rql1gnb18tljm.jpg)

## If you're anything like me, you would relate to this meme pretty well.

The **good** news is, I have tasked ChatGPT (which is sick btw, right?) with creating a study plan to learn the ins and outs of C# in an 8 week plan which is kind of not so aggressive but maybe it is?

#### If you're wondering why to continue learning C#, here a few good reasons: 

* Enterprise companies love to use C# and the .NET environment to build software.

* You can use C# to build web apps, mobile apps, desktop apps, services, etc.

* C# doesn't have as steep of learning curve as other programming languages like C++, C, Rust, etc.

* C# is integrated very well with Visual Studio, which makes it very easy to get a project going and _great_ documentation here: [click me to make lots of moolah](https://learn.microsoft.com/en-us/dotnet/csharp/)


Without further ado, here's the study plan. I hope it helps, and I will be putting it to good use (after I look at more memes.)


**Week 1:**

* Review basic C# syntax and control structures (if/else, for loops, etc.)
* Practice solving simple algorithms using C# (e.g. searching and sorting)

**Week 2:**

* Learn about C# data structures (arrays, lists, dictionaries, etc.) and how to use them effectively
* Practice implementing and using different data structures in C#

**Week 3:**

* Review object-oriented programming concepts in C# (classes, inheritance, polymorphism, etc.)
* Practice creating and using C# classes and objects

**Week 4:**

* Learn about C# exception handling and how to use try/catch blocks
* Practice handling exceptions in C#

**Week 5:**

* Review C# asynchronous programming concepts (async/await, tasks, etc.)
* Practice using async/await to create asynchronous C# code

**Week 6:**

* Review common C# design patterns (e.g. Singleton, Factory, Observer)
* Practice implementing design patterns in C#

**Week 7:**

* Review and practice using LINQ in C#
* Practice working with LINQ queries and lambda expressions

**Week 8:**

* Review and practice using C# debugging techniques
* Practice finding and fixing bugs in C# code


This is just a sample study plan, so feel free to adjust it to meet your specific needs and goals. The important thing is to make sure you are regularly practicing and reviewing the key C# concepts that are likely to come up in technical interviews. 

Good luck with your studies :)