teleren/devto huggingface dataset:
XDC.Dev Aims to Host One Million Blockchain Developers to Code on Hybrid Applications
Tags: devops, developer, xdc, news
Published: 2022-08-08 06:29:00

Blockchain technology daily welcomes thousands of newbie developers around the globe. Blockchain is penetrating almost every industry and creating a revolution; this led to an increase in the rate of developers from various fields shifting themselves towards blockchain and Dapp development. Developers forum is the first step for experienced developers to be an icon for the newbies by sharing their knowledge. For the newbie, forums are the best education center to learn with hands-on experience and expert guidance. 

Community-based Forums are a great place to learn, share, and troubleshoot. XDC.Dev is one of the largest online communities of software and blockchain developers. 

### What is XDC.Dev?
XDC.Dev is an open-source platform where blockchain developers write articles, participate in discussions, build their professional profiles and bring millions of developers together. Developers rely on networked learning and collaboration, and this platform is precisely the solution. It aims to get at least one million developers together to code hybrid applications and help the new developers join the space.  

### Why XDC.Dev ?
This developer's forum does not spam the readers with any Ads, which gives a good experience of learning to the community without any intervention. The signup process is straightforward, with minimum details required to register with XDC.Dev. People can follow each other and get notified when they post a new article, and people can change their theme to make themself different from other users; also, it is newbie-friendly. The contents posted on the forum are indexed in google and linked with Google News, giving you more exposure to your content. 


**Developers Community can use XDC.Dev in Multiple Ways.**

- Communities can share the developer's Guide and instructions to gain exposure among developers and improve with their suggestions in the forum.
- Product owners can share Technical Tutorials on a product or Dapp in detail.
- Content authors can publish blogs under an organization and can group posts into a series.
- Technical YouTubers can share their video with content to the developers' community. 
- Different Communities can share technical events such as hackathons and bounties with the developers.


XDC.dev forums welcome experienced and newbie developers to share their knowledge and build a strong blockchain developers community. Forums play a vital role in knowledge sharing and implanting innovations in the space. 

Source Hackernoon: https://hackernoon.com/exciting-developments-in-blockchain-technology-that-you-should-be-aware-of
ES12 in ServiceNow scoped apps
Tags: servicenow, javascript
Published: 2022-08-08 06:25:39

FINALLLYYYY!!!
With the new Tokyo release, we can now use ES12 in our scope applications. Unfortunately not yet for global, but lets take that win right? :)

You can change the 'Javascript mode' in your 'Application Settings' via Studio or UI16.


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

Have fun!
AWS IAM: Best practices to follow
Tags: aws, programming, webdev
Published: 2022-08-08 06:18:43

## What is IAM?
IAM is an AWS service that stands for Identity and Access Management. It is used to define the identity of our users. By default, we are given a root account when we first set up our AWS account. It is through IAM that we can create user accounts for accessing AWS instead and perform certain actions. 

---

## So, what are the best practices to follow with IAM?
...

---

## Tip 1:
Never use the root account, always create a user account and use that account instead. The root account is simply used for account setup, and nothing else. 

---

## Tip 2:
Enable MFA (Multi-Factor Authentication) for your root account and for your IAM users. An extra layer of security always goes a long way

---

## Tip 3:
Create an effective password policy for your users. You can decide on the number of characters that a user must have in their password, how often they must rotate their password, and set up many other characteristics

---

## Tip 4:
Never share your user's access and secret access keys with anyone! Each IAM user that you create will come with access keys, be sure to keep it private.

---

## Tip 5:
Be sure to add your IAM users to groups, and attach permissions to those groups. You can add permission directly to a user, but this can get chaotic and get disorganized, especially if you have a lot of users. So, be sure to group them accordingly... and assign permissions to those groups. Examples of groups may be "Administrators" or "Developers" or "Managers". 

---

 ->

Originally published at https://www.cloudwithdjango.com
Multiplayer TicTacToe With Websockets
Published: 2022-08-08 06:12:00

Recently I'm trying to learn about websockets and I decided why not create a Multiplayer TicTacToe game using websocket.

[Live Website](https://tictactoe.khusyasy.com/)
[Source Code](https://github.com/Khusyasy/ws-tictactoe)

> note: this is an old post (30 May 2022) from my website, posting for archiving purposes

## Objectives
Learning more about websockets and how to implement them in a realtime game application. Basically websockets are a way to connect to a server for back and forth communication, this is very useful for realtime applications especially in multiplayer games. Also often used in client side websites.

The goal of this project is:
1. Create format for websockets.
2. Implement the server.
3. Create the game using Vue.

### 1. Create format for websockets.

Because I am new to websockets, I am trying to understand the format that will be used to communicate with the server, and to be honest I don't find many resources talking about this, so I am going to try to create my own format.

```js
{
  "type": <type of message>,
  "data": {
    <any data that is needed>
  }
}
```

From the type of message, the data will be used to determine what the server or client should do. For example, if the type is "move", the data will be used to determine which player moved, and where.

```js
{
  "type": "move",
  "data": {
    "user": <user data>,
    "x": <row number>,
    "y": <col number>
  }
}
```

The message above means that the user has moved to row number x and column number y.

### 2. Implement the server.

I used express to create the server, and I used express-ws to create the websocket so that I can easily use websockets just like other HTTP requests endpoint in express, as an simple example, the following code is used to create the websocket server.

```js
const express = require('express');
const app = express();
const ws = require('express-ws')(app);

app.ws('/', (ws, req) => {
  ws.on('message', (msg) => {
    const { type, data } = JSON.parse(msg);
    if (type === 'move') {
      // do something with data
    }
  });
});
```

But for storing Users and Rooms in the server, I used an array... for now. I think it's okay, because I only make this for learning purposes. If I ever need to store more data, I can easily extend this project to use database.

### 3. Create the game using Vue.

This part is basically creating a TicTacToe game but using Vue. I tried to use a new ui library called [Naive UI](https://www.naiveui.com/), I think it looks nice, but I don't know if it's the best way to use the library.


![website login page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tgfnq8jg520xzvzooewa.png)

![winning at tictactoe](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/drduezui83ibn9zgk29u.png)
How is PHP used in HTML?
Tags: php, webdev, beginners, programming
Published: 2022-08-08 06:04:53

How is PHP used in HTML?

PHP is frequently used to create dynamic websites.

Every visitor to a website receives a personalized page that may differ from how the site appears to another visitor.

This is known as a dynamic web page.

Static web pages, on the other hand, show the same content to every visitor.


![How is PHP used in HTML?](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zwtxevuqsmsjeul3fc8b.jpg)

If you want to learn more about Web Development, feel free to [follow me on Youtube!](https://www.youtube.com/channel/UCze04H5oeudQ01G9DDj-frA)
Monday short
Tags: programming, webdev, javascript, tutorial
Published: 2022-08-08 05:19:00

Monday morning - the most hated day of the week, that is why sharing something interesting. 

[4 ways to stay keep yourself updated to technology](https://www.youtube.com/shorts/SkANij_SoIw)

**Conclusion**
Until next time, have a good day.

Keep developing!!

Our website [iHateReading](www.ihatereading.in) || [Youtube](https://www.youtube.com/channel/UC6I-Tz6QwYbJpoIK7l0NtXA) || [Twitter](https://twitter.com/treyvijay)
React Hide/Show toggle
Tags: react, javascript, beginners, webdev
Published: 2022-08-08 05:17:04

Show/hide functionality  is one of the most frequently used utility in web dev.. It's a good practice to have template of frequently used components.

**Prerequisites**
- react
- jsx
- hooks(useState)

**Code**

**Toggle component**
```
import React, { useState } from 'react'


export default function Togglebtn() {

    const [show, setShow] = useState(false);

    const handleChange = () => {
        setShow(!show)
    }
    return (
        <div>
            <button onClick={handleChange}>Show/Hide</button>
            {show && <h1>Show Data @!!!!!!</h1>}
        </div>
    )
}

```

Calling in app.js

```
import './App.css';
import Togglebtn from './components/Togglebtn';
function App() {
  return (
    <>
      <Togglebtn></Togglebtn>
    </>
  );
}
```
Parallelly processing a stream in Common Lisp
Tags: commonlisp, lisp, stream, parallel
Published: 2022-08-08 05:14:13

---
title: Parallelly processing a stream in Common Lisp
published: true
description: 
tags: commonlisp,lisp,stream,parallel
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---


My computer has many cores but doesn't have enough RAM to store the whole data. So I usually need to process data from a stream parallelly, for example, reading a Thai text line by line and dispatch them to processors running on each core.

In Clojure, I can use pmap because pmap works on a lazy sequence. However, using Lparallel's pmap on Common Lisp with lazy sequences wasn't in the example. So I used Bordeaux threads and ChanL channels instead. It worked. Still, I had to write repetitive code to handle threads and channels whenever I wanted to process the stream parallelly. It didn't only look messy, but it came with many bugs.

So I created a small library, called [stream-par-procs](https://github.com/veer66/stream-par-procs), to wrap threads and channels management. As shown in the diagram, the reader reads a line for the stream, the system dispatch a line to different processors, and finally, the collector creates the final result. 

![Overview diagram of stream-par-procs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/colso4s7p6ta0ku2kukc.png)
 
So the code looks like the below:

```Lisp
(with-open-file (f #p"hello.txt")
  (process f
	   (lambda (elem state send-fn)
	     (declare (ignore state))
	     (funcall send-fn (length elem)))
	   :collect-fn (lambda (n sum)
			 (+ n sum))
	   :init-collect-state-fn (lambda () 0)
	   :num-of-procs 8))
```
 
I only need to define a function to be run in the processor, another function for running in the collector, and other functions for initializing states. It hides details, for example, joining collector thread when every processor sent END-OF-STREAM.

In brief, stream-par-procs makes processing a stream parallelly in Common Lisp more convenient with hopefully fewer bugs by reusing threads and channels management code.
I really like the Responsively App!
Tags: webdev, programming, codenewbie, testing
Published: 2022-08-08 04:35:52

A free tool to test responsible designs on target screen sizes side-by-side. Includes DevTools, click/scroll mirroring, and batch screenshot export.

**[Preview:](uhttps://www.instagram.com/p/Cg9E_G1jCOW/rl)**

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

There are a number of nice responsive testing tools like it that are available at the moment, including Sizzy, Polypane, Blisk, and Solis. Responsively has been working well for my needs when you want just a little more than DevTools Device Mode provides out of the box.

I'll sometimes try using hot-reload + side-by-side browsers (Chrome, Firefox, Safari, etc) or Browserstack for live testing during development, but I do like the simplicity of using these tools for responsive testing.

**[Responsively App](https://responsively.app)**
JavaScript: Array
Tags: javascript, beginners
Published: 2022-08-08 04:35:00

* create an array:`let arrayName = ['item1','item2','item3'];`
* `array.length` shows the number of items in the array.<br>

* `array.push('item4','item5')` can add items to the array at the end.
* `array.pop()` doesn't contain arguments, deletes the last item in the array.
* `array.shift()` removes the first item in the array.
`array.unshift('item0')` adds item to the beginning of the array.<br>
* `array.join()` can connect array elements with `,`;
  
`array.join('')`: no space between each element;
    
`array.join('-')` connects each element with `-`.
* `array.slice(begin, end(optional))` is non-mutating. 

For example:
```
array = [1,2,3,4,5,6];
console.log(array.slice(2));   //output: [3, 4, 5, 6]
console.log(array.slice(2,4));  //output: [3, 4]
console.log(array);  //output: [1,2,3,4,5,6]
```

* `array.indexOf('item2')` returns the index of the element.
* `let` arrays are mutable and can be reassigned;  

`const` arrays are mutable but can't be reassigned.

For example:

```
let arrayOne = [1,2,3,4,5]
arrayOne[2] = 8;
console.log(arrayOne);   //output: [1, 2, 8, 4, 5]
arrayOne = ['This','is','a','new','array'];
console.log(arrayOne);   //output: ["This", "is", "a", "new", "array"]
```

```
const arrayTwo = [1,2,3,4,5]
arrayOne[2] = 8;
console.log(arrayTwo);   //output: [1, 2, 8, 4, 5]
arrayTwo = ['This','is','a','new','array'];   //output: TypeError: Attempted to assign to readonly property.
```
* `.forEach()` goes through all the elements in an array and return undefined. (no return inside the function body)
* `.map()` executes the same action on every element in an array and return a new array.
* `.filter()` checks every element in an array and returns those meet the criteria.
* `.findIndex()` returns the index of the first element in the array that meets the condition.
* `.every()` will return a boolean value.
* `.reduce()` can go through the array and return one value.

For example:

```
const numbers = [1,2,3,4,5,6];
const sum = numbers.reduce((accumulator, currentValue)=>{
  return accumulator + currentValue;
});
console.log(sum);    //output: 21 
```
* `.split(' ')` will separate the string by the `' '`, and store each word as an element in an array. The variable takes those arrays become an object.
* To test if an object is an array or not, use `Array.isArray(objectName)`. 
* `Array.sort((x,y)=>y-x)` or `array.reverse(array.sort())` returns the array in descending order 
* `Array.includes()` returns whether an **array** includes a certain value among its entries; `string.match()` returns the result of a **string** matching a specific expression.
AWS S3 Upload large excel file
Published: 2022-08-08 04:27:34

Could anyone help me out, to upload a large excel file to s3 in multipart upload and read the data from uploaded multipart file.

Currently I am doing like upload the file in multipart by splitting the file bytes by converting them into pandas dataframes using numpy array. Is this the way is correct or is there any alternatives. because it is taking much time to convert the bytes in to pandas to do the multipart upload.

Following is my code:
 def multipart_upload(self, filename: str, user_settings: UserSettings, model: RootModel, location: str, content_buffer: Any,
                         content_df: pd.DataFrame, content_type: str):

        s3_client = get_boto3_s3_client()
        chunksize = 5 * 1024 * 1024

        part_number = 0
        chunk: pd.DataFrame
        parts_info = []

        key_name = S3UtilsBase().prepare_s3_key_path(filename=filename,
                                                     location=location,
                                                     model=model,
                                                     user_settings=user_settings)

        multipart_upload_resp = s3_client.create_multipart_upload(
            Bucket=settings.AWS_S3_BUCKET, Key=key_name)

        for chunk in np.array_split(content_df, len(content_buffer.getvalue()) // chunksize):
            buffer = io.BytesIO()
            part_number = part_number + 1
            excel_file_types = S3UtilsBase().get_excel_types()
            if content_type == 'csv':
                chunk.to_csv(buffer)
            elif content_type in excel_file_types:
                chunk.to_excel(buffer)

            chunk_resp = s3_client.upload_part(Bucket=settings.AWS_S3_BUCKET,
                                               Key=multipart_upload_resp['Key'],
                                               PartNumber=part_number,
                                               UploadId=multipart_upload_resp['UploadId'],
                                               Body=buffer.getvalue())

            parts_info.append({
                'PartNumber': part_number,
                'ETag': chunk_resp['ETag']
            })

        parts_info = sorted(parts_info, key=lambda x: x["PartNumber"])
        cmp_multipart_upload_resp = s3_client.complete_multipart_upload(Bucket=settings.AWS_S3_BUCKET,
                                                                        Key=multipart_upload_resp['Key'],
                                                                        UploadId=multipart_upload_resp['UploadId'],
                                                                        MultipartUpload={"Parts": parts_info})

        paths = cmp_multipart_upload_resp["Key"].split("/")
        separator = "/"
        prefix = separator.join(paths[:-1])
        return AttachmentResponseFromS3(
            Prefix=prefix,
            Error=False,
            Message='',
            Version=cmp_multipart_upload_resp["VersionId"],
            Host=f'{AWS_S3}://{cmp_multipart_upload_resp["Bucket"]}',
            FileName=paths[-1],
            Parts=part_number
        )
An Introduction to Absolute Imports in React Native
Tags: reactnative
Published: 2022-08-08 08:25:34

---
title: An Introduction to Absolute Imports in React Native
published: true
date: 2022-06-25 04:15:00 UTC
tags: ReactNative
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vefypz2acfvlwcu4ewdr.jpeg
canonical_url: https://anlisha.com.np/blog/an-introduction-to-absolute-imports-in-react-native/
---

React Native Absolute imports — made easy for beginners.

Absolute imports help to simplify the paths and better organize the project as it grows. Also with absolute imports, it’s easier to copy-paste the code with imports into another file in the project and not have to tinker with import paths. 

When the project’s folder structure is complex, we are going to have long relative imports in the project like this:

```
import Input from ‘../../../components/form/input’;
```

It can be pretty hard to refactor and looks messy. The solution is to convert relative imports to absolute imports.

**Step 1 — Install** `babel-plugin-module-resolver` **plugin**

```
$ npm install --save-dev babel-plugin-module-resolver
```

Or

```
$ yarn add --dev babel-plugin-module-resolver
```

**Step 2 — Update** `babel.config.js`

Add the following code snippet in `babel.config.js`

```
module.exports = {
  plugins: [
    [
      'module-resolver',
      {
        alias: {
          '@app': './src',
        },
      },
    ],
  ],
}

```

Note: `@app` is an alias one can give whatever one wants.

**Step 3 — Setup** `jsconfig.json` **or** `tsconfig.json`

**Using JavaScript**

Create/open `jsconfig.json` file (in the root directory of the project) and add `baseUrl` and `paths` setting inside `compilerOptions` as shown in the snippet below:

```
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths" : {
      "@app/*": ["src/*"]
    }
  }
}

```

**Using TypeScript**

If you’re using TypeScript in React Native project, update `tsconfig.json` file (in the root directory of the project) and add the same setting inside `compilerOptions` as JavaScript.

```
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths" : {
      "@app/*": ["src/*"]
    }
  }
}

```

**Step 4 — Implement Absolute Import**

Absolute imports setting is now successfully configured with `src` folder as a custom base directory and we can import an input component located at `src/components/form/input.js` from like so:

```
import Input from '@app/components/form/input';
```

Happy Learning! Feel free to give this article a clap and follow to stay up to date with more articles!

The post [An Introduction to Absolute Imports in React Native](https://anlisha.com.np/blog/an-introduction-to-absolute-imports-in-react-native/) first appeared on [Anlisha Maharjan](https://anlisha.com.np/blog).
Laravel 8 User Roles And Permissions Without Package
Tags: laravel, roles, permission, acl
Published: 2022-08-08 03:52:41

In this article, we will see laravel 8 user roles and permissions without package.Roles and permissions are an important part of many websites. In this laravel 8 user roles and permissions example, we are not using any type of package like spatie/laravel-permission for user roles permissions in laravel. But you can use spatie/laravel-permission to create user roles and permissions tutorial in laravel 8.

In this example, you can give roles to specific users and access permission to specific task. In this tutorial, we will implement user roles and permissions tutorial in laravel 8 from scratch.

So, let's start to implement laravel 8 user roles and permissions without package tutorial.

```

Step 1: Setup Laravel Project

Step 2: Make Auth

Step 3: Create Model and Migration

Step 4: Edit Migration Files

Step 5: Add pivot tables

Step 6: Setting up the relationships

Step 7: Create Trait

Step 8: Create CustomProvider

Step 9: Add Dummy Data to Check

Step 10: Setup the Middleware
```
JavaScript: for loop VS for...of loop
Tags: javascript, beginners
Published: 2022-08-08 03:49:00

* for loop example:

```
dailyRoutine = ['eat','sleep','code'];
for (let x = 0; x < dailyRoutine.length; x++){
    console.log(dailyRoutine[x]);
}
```
<hr>
* for...of loop example:

```
dailyRoutine = ['eat', 'sleep','code'];
for (const routine of dailyRoutine){
    console.log(routine);
}
```
<hr>
<h2>Note:</h2>
1. The variable routine in for...of loop can be declared using var, let, or const
2. for loop and for...of loop can be used for arrays as well as strings
3. for(let x = array.length - 1; x >= 0; X--) can print in **reverse** order
4. break and continue can control the looping