teleren/devto huggingface dataset:
Generating code template in an easy way.
Tags: javascript, node, npm, cli
Published: 2020-10-14 02:32:53

---
title: Generating code template in an easy way.
published: true
description: 
tags: #javascript #node #npm #cli
cover_image: https://media-exp1.licdn.com/dms/image/sync/C4D27AQEQ3_u6kQjizw/articleshare-shrink_800/0?e=1602730800&v=beta&t=QvSvA0uTYnU2FnQ6n0fYmyU69LHV0WdMLIFNsiN-QYA
---
In the projects I've worked on, duplicate code files or start coding from a basic structure are common practices and sometimes just some lines of codes are changed from one template to another. 

One good example, is when you are working with components, and you need to create a folder with the name of your new component, a unit test file, a Storybook file, a README file and also the file for your component itself.

Therefore, I developed a package to simplify the generation of code template, allowing you to customize it according to your project needs.

To get started, just run `npm install -g simple-template-gen` on your CLI and read the following docs [clicking here](https://www.npmjs.com/package/simple-template-gen).

If you want to contribute with the project or want to suggest new features to simplify even more the life of who is generating a new code, feel free to support it on [GitHub](https://github.com/denidiasjr/simple-template-gen).
RustDesk: My first Rust application, a remote desktop software
Tags: rust
Published: 2020-10-14 02:09:32

I am a C++ and Golang developer. I had been waiting for Rust await/async for long time. Because I love Golang goroutine. I hope there is something similar in Rust. So When I knew Rust await/async ready, I decided to start coding with Rust.

Now, I am happy to share with you my very first application written in Rust. Go and check it out! And give some feedback what I did wrong :)
{% github rustdesk/rustdesk %}
How To Setup A Self Hosted Github Mirror ?
Tags: github, database, git, githunt
Published: 2020-10-14 01:43:50

## Why ?
What I’m trying to accomplish is a fail-safe in case something happens to GitHub which would make me loose access, be that voluntarily or involuntarily.

I am not migrating away from GitHub because I see no reason to: the platform is very useful to me, and I’d not like to loose it. 

## Why Gitea

I’d like a Web UI onto these repositories in addition to the files in the file system. It could have been Gitlab, but I think Gitea is probably the option with the lowest resource requirements.

When I add a repository to Gitea and specify I want it to be mirrored, Gitea will take charge of periodically querying the source repository and pulling changes in it.

## How To ?
After setting up [Gitea](https://gitea.io/en-us/) and creating a user, I create an API token in [Gitea](https://docs.gitea.io/en-us/api-usage/) with which I can create repositories programmatically. 

Then you will also need to create a [Personal Access Token](https://github.com/settings/tokens/new?description=gitea-mirror) In Github with the below scope

1. Select **public_repo** scope if you just want to mirror Public Gist / Repo to your mirror
2. Select **repo** scope if you want to mirror both public & private Gist / Repo to your mirror
3. Select **gist** scope if you want to mirror private gists.

## Installation
1. Install Python3 `sudo apt-get install python3`
2. Install PIP3 `sudo apt-get install python3-pip`
3. Install [PyGithub](https://github.com/PyGithub/PyGithub) `pip install PyGithub`

Once everything is installed. 

Clone / Download this repo [https://github.com/varunsridharan/github-gitea-mirror](https://github.com/varunsridharan/github-gitea-mirror)

And update `src/config.json` with your information And run the below cmd

### Mirror Everything
Below CMD Will mirror (Public / Private ) Repository, Gists Forks & Stared Repos
```
python3 mirror.py 
```

### Mirror Source Gists
```
python3 gist.py
```

### Mirror Stared Gists
```
python3 giststared.py
```

### Mirror Source Repository
```
python3 repoSource.py 
```

### Mirror Forked Repository
```
python3 repoForked.py
```

### Mirror Stared Repository
```
python3 repoStared.py
```

{% github varunsridharan/github-gitea-mirror %}
How to implement react-leaflet.js (open-source map in your react project 🗺️)
Tags: react, maps, code
Published: 2020-10-14 01:40:57

React-leaflet is an open-source Javascript library for creating intractable maps, small and easy-to-use, in general, an excellent alternative to react-google-maps, basically, because it won't charge into your credit card. So here is a quick and easy guide to start to use it.

#### 1. Install the library in your project 
```
---- for npm
npm install leaflet react-leaflet 
---- for yarn
yarn add leaflet react-leaflet 
```
In this step probably you will face this error 
```
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\hiberfil.sys'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\pagefile.sys'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\swapfile.sys'
```
To fix this :
1. Delete your node_modules folder
2. Change the path where you have your project
3. Make sure to stop your antivirus and stop the sync with dropbox
4. Run npm install 

That worked for me but if you have other solution would be great that you share it in the comments !!

#### 2. Import styles
```javascript
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css">
```
You need to find your index.html file and add the link to the styles from leaflet.css, if you don't do it, the map would look disorganize, crop and with patches.

#### 3. Add the style container
```javascript
<style>
.leaflet-container {
    height: 400px;
    width: 400px;
}
</style>
```
This step is really important too because if you don't set the height and width your the map wouldn't show at all.

#### 4. Create your component as you need it
```javascript
import React , { Component }from 'react'
import { Map as LeafletMap, TileLayer,  Marker, Popup } from 'react-leaflet';
import './map-component.css';

class SimpleMap extends Component {
  render() {
    return (
      <LeafletMap
        center={[60, 10]}
        zoom={6}
        maxZoom={10}
        attributionControl={true}
        zoomControl={true}
      >
        <TileLayer
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />
        <Marker position={[60, 10]}>
          <Popup>
            Popup for any custom information.
          </Popup>
        </Marker>
      </LeafletMap>
    );
  }
}

export default SimpleMap
```
You could put as many properties as you want for the map, I leave the [documentation to the examples](https://react-leaflet.js.org/docs/en/examples) but don't forget to call the styles from the previous step.

Finally, this is a little picture of how looks in my project, and as you can see you can put other components on the page and it will look good.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tfb9jt392le01ppoposr.PNG)

I really hope that this will be helpful for all of you guys and thank you for reading!!
What can be max const name in JavaScript?
Tags: javascript, experiment, curiosity, algorithms
Published: 2020-10-14 01:06:54

This post is about maximum length of variable name in JavaScript.

The answer is:

```2 ** 29 - 63```

Pretty long variable name, huh?

It is more than 500 megabytes!

I don't know why is that exactly, but I precisely checked this using bisection algorithm.

{% post gkucmierz/natural-search-algorithm-11pk %}

```javascript
1
2
4
8
16
32
64
128
256
512
1024
2048
4096
8192
16384
32768
65536
131072
262144
524288
1048576
2097152
4194304
8388608
16777216
33554432
67108864
134217728
268435456
536870912
402653184
469762048
503316480
520093696
528482304
532676608
534773760
535822336
536346624
536608768
536739840
536805376
536838144
536854528
536862720
536866816
536868864
536869888
536870400
536870656
536870784
536870848
536870880
536870864
536870856
536870852
536870850
536870849
'maxConstName', 536870849
```

Here is code, that I wrote.

```javascript
const naturalSearch = (cond, retFirstTrue = true) => {
  let min = 1;
  let max = 1;
  while(1) {
    const stop = cond(max);
    if (stop) break;
    min = max;
    max *= 2;
  }
  let mid;
  while (1) {
    mid = Math.floor((min + max) / 2);
    const stop = cond(mid);
    if (stop) {
      max = mid;
    } else {
      min = mid;
    }
    const diff = max - min;
    if (max - min <= 1) {
      return retFirstTrue ? max : min;
    }
  }
};

const checkConstName = n => {
  console.log(n);
  try {
    const name = 'a'.repeat(n);
    new Function(`const ${name} = 5;`)();
    return false;
  } catch (e) {
    return true;
  }
  return false;
};

const maxConstName = naturalSearch(checkConstName, false);

console.log('maxConstName', maxConstName);
```
1 reason for choosing next.js over gatsby
Tags: gatsby, nextjs, javascript, webdev
Published: 2020-10-14 01:28:34

* [dynamic routing](https://nextjs.org/docs/routing/dynamic-routes)
* [API routes (dynamic and non-dynamic)](https://nextjs.org/docs/api-routes/introduction)
* [Fast builds everywhere, not just on a specific hosting provider](https://nextjs.org/docs/deployment)

</br>
_If you have a static site only I strongly recommend Gatsby over everything._

 I will be keep adding points. You can add too if you got one.
Updates of KiTTy (Kinx Tiny Typesetting)
Tags: javascript, ruby, latex, kinx
Published: 2020-10-14 00:56:53

Hello everyone!

This is an update of KiTTy. What is KiTTy?
Before going to the main topic, let me start with the introduction as usual.

The script language [Kinx](https://github.com/Kray-G/kinx) is published with the concept of **Looks like JavaScript, Feels like Ruby, Stable like AC/DC(?)**.

* Reference
    * First motivation ... [The post of introduction](https://dev.to/krayg/kinx-as-a-script-language-4iko)
        * Kinx, I wanted a scripting language with a syntax of C family.
    * Repository ... https://github.com/Kray-G/kinx
        * I am waiting for pull requests.

Let's start about KiTTy first.
Yes, you are right, you don't know KiTTy.
It is because I named it recently and I said it to nobody.

That is `Kinx Tiny Typesetting`. What is Kinx?
Please visit to the above linked website, and you will see that.

I believe you will find KiTTy as an update from [Kinx Tiny Typesetting](https://dev.to/krayg/what-kind-of-typesetting-system-do-you-want-48n8).

This is still working in progress.
But I did work and I have got some good result.

Here is an original Markdown document.

* https://github.com/Kray-G/kinx/blob/master/examples/typesetting/KiTTy_en.md

When KiTTy has processed a typesetting for above Markdown document, you will get the PDF file below.

* https://github.com/Kray-G/kinx/raw/master/examples/typesetting/KiTTy_en.pdf

Please visit to the [Release Page](https://github.com/Kray-G/kinx/releases/tag/v0.15.2) to see the link to the KiTTy's User Guide generated by KiTTy. The above PDF is also the KiTTy's User Guide in English, though.

If you feel it is good, please give me a star on GitHub :smile:.

P.S.
By the way, I found a strange point... I have to fix it!

By the way, the above pdf is generated by the latest commit of master.
Note that there are some updates from the released version on it.
If I know a Vault CLI command, how do I get its cURL Command?
Tags: vault, api, hashicorp
Published: 2020-10-14 01:05:24

---
title: If I know a Vault CLI command, how do I get its cURL Command?
published: true
description: If you know the CLI well enough, it's time to learn the API. But which CLI commands correspond to which API endpoints? The -output-curl-string option will show you.
tags: vault, api, hashicorp
cover_image: https://image.slidesharecdn.com/vaultapi-191105142121/95/vault-secrets-via-api-for-the-rest-of-us-5-638.jpg?cb=1572963722
---

If you have a command like `vault auth enable oidc`, how do you know its corresponding API call? Like this: 

`vault auth disable -output-curl-string oidc`

Here's an example: 

```
$ vault auth enable oidc
Success! Enabled oidc auth method at: oidc/

$ vault auth disable oidc
Success! Disabled the auth method (if it existed) at: oidc/

$ vault auth enable -output-curl-string oidc
curl -X POST -H "X-Vault-Request: true" -H "X-Vault-Token: $(vault print token)"
 -d '{"type":"oidc","description":"","config":{"options":null,"default_lease_ttl
":"0s","max_lease_ttl":"0s","force_no_cache":false},"local":false,"seal_wrap":fa
lse,"external_entropy_access":false,"options":null}' http://127.0.0.1:8200/v1/sy
s/auth/oidc

$ vault auth disable -output-curl-string oidc
curl -X DELETE -H "X-Vault-Request: true" -H "X-Vault-Token: $(vault print token
)" http://127.0.0.1:8200/v1/sys/auth/oidc

```

For more on the easy way to use the Vault API got get or generate "Secrets," I recommend this link: 

https://www.slideshare.net/mitchp/vault-secrets-via-api-for-the-rest-of-us
Bash Functions for Vault
Published: 2020-10-14 01:03:05

---
title: Bash Functions for Vault
published: true
description: Some functions and aliases to make working with Vault a bit less painful.
tags: 
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/vtlnx4od13xo9quhh17e.png
---

For those of us who've used Vault a lot, we all know and love [the Vault CLI](https://learn.hashicorp.com/tutorials/vault/getting-started-install). 

But, well, it has its _quirks_. If not outright shortcomings. 

And if something isn't working in the CLI, my first instinct is to check the API, using a `curl` command from the [Vault API Docs](https://www.vaultproject.io/api-docs). But that takes a lot of typing. 

Here's how to solve that: 

* Bash Aliases
* Bash Functions

It's like you can build your own custom CLI commands. If the first thing that comes to your mind when you read that is, "Why. Why would anyone want that." You haven't experienced enough pain. Close this blog and come back to it later when you've lain awake at night haunted by WALs.

Anyway, back to the Bash Aliases and Bash Functions for Vault. I'll give a couple examples of each.

### Bash Aliases for Vault

**`tknchk`**
```
## This alias gets you your token's permissions, and assumes you have the jq CLI utility installed
alias tknchk='curl -s --header "X-Vault-Namespace: $VAULT_NAMESPACE" --header "X-Vault-Token: $VAULT_TOKEN" "$VAULT_ADDR/v1/sys/internal/ui/resultant-acl | jq'
```

**`getVaultMounts`**
```
## This alias gets the mounts on the current Vault
alias getvaultmounts='curl -s --header "X-Vault-Namespace: $VAULT_NAMESPACE" --header "X-Vault-Token: $VAULT_TOKEN" "$VAULT_ADDR/v1/sys/mounts'
```

### Bash Functions for Vault

**`getVaultToken`**
```
## Get the damn Vault Token without needing to show it on the screen or do the whole set +o history thing
export VAULT_TOKEN
function getVaultToken(){
    read -rsp "Enter the damn Vault Token:" entered_value
    export VAULT_TOKEN="$entered_value"
    echo ""
```

**`muhVault`**
```
function muhVault(){
echo "____   ____            .__   __    ___________.__              ._.
\   \ /   /____   __ __|  |_/  |_  \__    ___/|__| _____   ____| |
 \   Y   /\__  \ |  |  \  |\   __\   |    |   |  |/     \_/ __ \ |
  \     /  / __ \|  |  /  |_|  |     |    |   |  |  Y Y  \  ___/\|
   \___/  (____  /____/|____/__|     |____|   |__|__|_|  /\___  >_
               \/                                      \/     \/\/"

}
```

Well, there you go! 

Which of these did you find useful? Got any of your own that you use?
Modifying hook methods with optionMergeStrategies
Tags: vue, optionmergestrategies, javascript, vuejsmasteringapi
Published: 2020-10-14 00:14:35

Welcome to VueJs mastering the API, today we will talk about the [optionMergeStrategies](https://vuejs.org/v2/api/index.html#optionMergeStrategies) method.

It provides us a powerful way to create plugins to intercept and modify the default behavior of [Vue hook life cycle](https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram).

None of the [official documentation](https://vuejs.org/v2/api/index.html#optionMergeStrategies)helps me to learn how to use it, So after some research finally learn a path.

# How to use optionMergeStrategies

1. Create the file: `src/plugins/customMethods.js` 
{% gist https://gist.github.com/getJv/25ca0db2d558180fdd09fec9dbbce6d3 %}

2. Now to install the plugin add the code to your `src/main.js`:
{% gist https://gist.github.com/getJv/74048e9e9c9ebc17ba5fb9308c7b1b8c %}

3. Once installed our customMethod will be available in any component
{% gist https://gist.github.com/getJv/aab15bca669272467f3d433e3b81df6e %}

4. The console with print the messages at following order:
   ![Life cycle console prints](https://dev-to-uploads.s3.amazonaws.com/i/g86allfsr6tiqtxmitck.png)

The customMethod executes him code right before the default createdMethod code, so if you need to run something before the default hooks code just replace the line 8 to another hookMethod from `customMethod.js` or overwrite another hookMethod.

__**If I help you please consider helping me too. Leave comments, share it. Believe me, your feedback it's really important to me.**__

##### References

* [Vue.js Mixins — Global Mixins and Custom Merge Strategies](https://medium.com/javascript-in-plain-english/vue-js-mixins-global-mixins-and-custom-merge-strategies-187f7dac6a8f)
* [Mixins](https://www.w3resource.com/vue/mixins.php)
* [Mixins](https://sodocumentation.net/vue-js/topic/2562/mixins)
* [Vue Mastery class](https://www.vuemastery.com/courses/next-level-vue/mixins)
* [Issue StackOverflow](https://stackoverflow.com/questions/59114128/how-to-add-global-funtions-like-create-methods-mounted-from-a-plugin-in-vue)
Differences between firstChild and firstElementChild DOM element property in JavaScript
Tags: javascript
Published: 2020-10-14 00:00:00

---
  title: Differences between firstChild and firstElementChild DOM element property in JavaScript
  published: true
  tags: JavaScript
  date: Wed Oct 14 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/difference-between-firstChild-and-firstElementChild-element-property-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-92684539c62fe05fd53111e6887e113d.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/difference-between-firstChild-and-firstElementChild-element-property-javascript)
  
The core difference between the `firstChild` and `firstElementChild` DOM element properties is that,

- The `firstChild` DOM element property returns a `text`, `comment`, or an `Element` as the value. Put simply, it returns the first thing that comes as the first child of an element.

- The `firstElementChild` element property on the other hand returns the first `Element` as the value. Even If there are `text` or `comment` which comes before it, it doesn't return the `text` or the `comment` as the values.

Let's look at an example.

Consider this `div` tag with some `text` and a `span` tag inside it as its children.

```html
<div>
  Hello World!
  <span>I'm inside a SPAN tag</span>
</div>
```

Now let's use the `firstChild` and the `firstElementChild` DOM element properties on the `div` element to check what it returns.

```js
// get reference to the div tag
const div = document.querySelector("div");

// firstChild DOM element property
const firstChild = div.firstChild;

// firstElementChild DOM element property
const firstElementChild = div.firstElementChild;

console.log(firstChild); // Hello World!

console.log(firstElementChild); // <span>I'm inside a SPAN tag</span>
```

As you can see the `firstChild` returns the text content `Hello World!` and the `firstElementChild` returns the `span` tag `<span>I'm inside a SPAN tag</span>`.

See this example live in [JSBin](https://jsbin.com/dehajosobu/1/edit?html,js,output).

### Feel free to share if you found this useful 😃.

---
Let's build for Ruby and Rails developers - Part 11
Tags: rails, ruby, tutorial, video
Published: 2020-10-21 18:40:30

---
title: Let's build for Ruby and Rails developers - Part 11
published: true
date: 2020-10-13 22:12:00 UTC
tags: rails, ruby, tutorial, video
canonical_url: https://web-crunch.com/posts/lets-build-for-ruby-and-rails-developers-part-11
---

{% youtube ojEDXYAfGeA %}

In part 11 of my [Let's build for Ruby and Rails developers](https://web-crunch.com/collections/lets-build-for-ruby-and-rails-developers) series I begin adding company detail fields on our new job form.

We'll carry on from [part 10](https://dev.to/justalever/let-s-build-for-ruby-and-rails-developers-part-10-48eo) to complete the form and do some final design tweaks to make it less long vertically. While this form will be a long one, it captures the necessary info I feel most professionals are looking for in a new opportunity.

In this part you'll see me build a custom file preview and attachment [Vue.js](https://vuejs.org) component from scratch. I'm pretty pleased with how it turned out even though I stumbled part of the way 😆.

#### The series so far

- [Part 1](https://dev.to/justalever/let-s-build-for-ruby-and-rails-developers-2g1)
- [Part 2](https://dev.to/justalever/let-s-build-for-ruby-and-rails-developers-part-2-3310)
- [Part 3](https://web-crunch.com/admin/posts/lets-build-for-ruby-and-rails-developers-part-3/)
- [Part 4](https://web-crunch.com/admin/posts/lets-build-for-ruby-and-rails-developers-part-4/)
- [Part 5](https://web-crunch.com/admin/posts/lets-build-for-ruby-and-rails-developers-part-5/)
- [Part 6](https://web-crunch.com/admin/posts/lets-build-for-ruby-and-rails-developers-part-6/)
- [Part 7](https://dev.to/justalever/let-s-build-for-ruby-and-rails-developers-part-7-47n0)
- [Part 8](https://dev.to/justalever/let-s-build-for-ruby-and-rails-developers-part-8-f1)
- [Part 9](https://dev.to/justalever/let-s-build-for-ruby-and-rails-developers-part-9-56ip)
- [Part 10](https://dev.to/justalever/let-s-build-for-ruby-and-rails-developers-part-10-48eo)
- Part 11 - You are here

- [View the entire collection](https://web-crunch.com/collections/lets-build-for-ruby-and-rails-developers)
Gradle update failed in React Native
Tags: react, android
Published: 2020-10-13 23:00:35

Hello everyone, good afternoon, I hope you are well, I am making a project with react native cli and react-native-maps, when I open android studio the gradle file is updated, then an import error is generated in the MainApplication.java file, The error is the following, the PackageList function of com.facebook.react cannot be imported, could you please help me, grace, I will be attentive to your answers.