teleren/devto huggingface dataset:
Node.js : Setting up for globally installed packages
Tags: node, npm, webdev, javascript
Published: 2021-05-13 14:35:30

You can use `npm install -g` to install a package "globally." This is typically done to install an executable that you can add to your path to run. For example:
```
npm install -g gulp-cli
```
If you update your path, you can call gulp directly.

On many OSes, `npm install -g` will attempt to write to a directory that your user may not be able to write to such as `/usr/bin`. You should not use `sudo npm install` in this case since there is a possible security risk of running arbitrary scripts with `sudo` and the root user may create directories in your home that you cannot write to which makes future installations more difficult.

You can tell `npm` where to install global modules to via your configuration file, `~/.npmrc`. This is called the prefix
which you can view with `npm prefix`.
```
prefix=~/.npm-global-modules
```
This will use the prefix whenever you run `npm install -g`. You can also use `npm install --prefix ~/.npmglobal-modules` to set the prefix when you install. If the prefix is the same as your configuration, you don't need to use -g.

In order to use the globally installed module, it needs to be on your path:
```
export PATH=$PATH:~/.npm-global-modules/bin
```
Now when you run `npm install -g gulp-cli` you will be able to use gulp.

>Note: When you `npm install` (without -g) the prefix will be the directory with `package.json` or the current directory if none is found in the hierarchy. This also creates a directory `node_modules/.bin` that has the executables. If you want to use an executable that is specific to a project, it's not necessary to use `npm install -g`. You can use the one in `node_modules/.bin`.

<a href="https://www.buymeacoffee.com/rkycom" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>

With all that being said, I highly recommend you keep learning!

Thank you for reading this article. Please feel free to connect with me on [LinkedIn](https://www.linkedin.com/in/www-rajeshkumaryadav-com/) and [Twitter](https://twitter.com/rky_com).
Image gallery without database
Tags: php, javascript, html, css
Published: 2021-05-13 14:17:10

This image gallery was developed using only PHP in the beckend, it is not necessary to use a database. As for the frontend, it was developed using only HTML, CSS and JavaScript.

## how is it possible not to use DB?

This is possible thanks to the FilesystemIterator class, this class is native to PHP and it returns a list of files and folders that are inside the directory informed in its constructor. Note: this instance of FilesystemIterator, as its name suggests, is iterable as an array, that is, it can be used directly in a repetition structure such as for (), foreach () and etc.. See the example:

```
<?php
$files = new FilesystemIterator(
    __DIR__.'/public/assets/img'
);
foreach($files as $file){
    echo $file
        ->getFilename().PHP_EOL;
}
```
The above code will print:
```
folder-2741806_1280.png
gallery
icons
screenshot
top_directory.png
wall-2558279_1920.jpg
```
If interested, please leave your review.
This is my repository with the complete gallery, including the secure upload of images, administration panel to execute CRUD of galery or images. let your star if like the idea
[Image Gallery Without database](https://github.com/marvinoliveiras/image-gallery-without-database "Image Gallery Without database")
By my code do you imagine that I can be the junior developer?

Sorry my English, blame Google Translate. :tw-1f605:
Twitter sentiment Analysis with ELON MUSK's Tweets
Tags: python, twitter, nlp, programming
Published: 2021-05-13 13:58:00

Learn How to do Twitter sentiment Analysis😀, With Elon's Tweets.
This is the most used word by Elon Musk on Twitter
![elon musk twitter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pja2mv3iactccn8gadr2.png)
https://buggyprogrammer.com/twitter-sentiment-analysis/
Nuxt.js + Github Gist: Embedding a Gist within pages
Tags: github, nuxt, gist, webdev
Published: 2021-05-13 13:46:28

# Demonstration

{% codesandbox embed-github-gist-within-nuxtjs-ju6vv %}

# Short Version

If you are quite experienced with nuxt.js, here is the logic:

This approach get rid of `https://gist.github.com/xxxxx/xxxxx.js` embedding method, and instead fetch the `json` file provided by Github API, i.e. `https://api.github.com/gist/` to present the data.

The url format is `https://api.github.com/gist/<gist-id>` in which `<gist-id>` is the `xxxxxx` bit of gist url `https://gist.github.com/username/xxxxxx`

This also would work for Vue.js with minor modifications.

If you are interested, you can skip the implementation part and quick view the [limitations](#Limitations) and [parallel approaches](#Parallel-Approaches).

# Long Version

The motivation, some parallel approaches, implementation and limitations.

## Motivation

The reason I have come up with this approach is, the Github-provided `js` script for embedding calls `document.write()`, which is not suitable for Vue.js frameworks, without the aid of other modules and plugins. 

You may experience a warning below, once you embed it directly like `<script src="embedded-gist-js-url"></script>` as in raw html:

```
Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.
```

## Parallel Approaches

- Using [postscribe](https://github.com/krux/postscribe/) with nuxt.js as a plugin like [top answer from Stack Overflow](https://stackoverflow.com/questions/65813422/nuxt-external-script-failed-to-execute-write-on-document-it-isnt-poss) (second solution mentioned)
- Using [vue-embed-gist](https://github.com/sudhanshu-15/vue-embed-gist)
- _if you have other parallel approaches or ideas do let me now_

Sadly none of the above works @_@, at least for me. Therefore I choose this kind of dumb yet the only working approach.

## Implementation

- Store the list of to-be-displayed gist ids in data.
- Use `async fetch() {}` provided by nuxt.js to fetch the jsons from github API
- Display json files properly, with the most basic `v-for` and `v-if`
- Some styling

For source code you can click [this link](https://codesandbox.io/s/embed-github-gist-within-nuxtjs-ju6vv) or examine the demonstration at the very start of the post.

## Limitations

- __Hit limit__ (for more info visit [documentation](https://docs.github.com/en/rest/overview/resources-in-the-rest-api#rate-limiting)), unlike the unlimited hit `js` provided by Github.
- __Heavier coding__, this approach involves a lot of coding of vue.js, adding 10-20 lines of code, while parallel approaches may only take 2-3 lines.

There may be other unknown limitations, hope you can point them out for me.

## Conclusion

Thank you for reading this post.

Again, if you are interested in the same topic, or have some ideas about this approach, or get stumbled by the same trouble, feel free to leave a comment.
#1 AWS Amplify - Beginner guide
Tags: aws, cloudskills, webdev
Published: 2021-05-13 13:29:59

[AWS Amplify](https://aws.amazon.com/amplify/) is for the mobile and web developers - hosting, adding/managing authentication, CI/CD, API, storage, and a lot more.

A solution for making backend solutions easy to implement for front-end developers.

If you are a web developer looking to start your journey in the world of the cloud then AWS Amplify is for you. 

It is simple to understand (thanks to the clear, and simple documentation). Easy to integrate with your front-end application, and support with all the languages - JavaScript ecosystem, React Native, ios, Android, Flutter, etc.


## Amplify Features

1) Configure backends fast

2) Seamlessly connect frontends

3) Host in a few clicks

4) Easily manage content


## Components

1) Develop: authentication, API, storage, and a lot more

2) Deliver: CI/CD, hosting, domains, etc.

3) Manage: managing users and content


## AWS Amplify installation

[This](https://docs.amplify.aws/cli/start/install) is the official guide from Nader just follow this and without any hiccups, you will successfully install it.


## What's next?

In the next tutorial, we will explore how to use the authentication from AWS Amplify in the ReactJS application.

Happy learning!!
JS: Recursion through a File Tree
Tags: javascript, recursion
Published: 2021-05-13 13:18:41

In this post we’ll discuss recursion in JavaScript through means of the classic file tree example.

Imagine we have the following file tree structure:

```javascript
{
 type: "folder",
 name: "project",
 content: [
    {
	type: "folder",
 	name: "components",
	content: [
       	  {
 		type: "folder",
 		name: "helpers",
 		content: [
            	  {
 			type: "file",
 			name: "dates.js",
            	  },
          ],
        },
        {
 		type: "file",
 		name: "Button.jsx",
        },
        {
 		type: "file",
 		name: "Button.css",
        },
      ],
    },
    {
 	type: "file",
 	name: "index.js",
    },
    {
	type: "file",
 	name: "App.jsx",
    },
  ],
};
```
Now what if we want to create a function that tells us if a specific file exists when we provide it the name of the file?

And what if we want this function to work no matter the depth of the tree?

And lastly, what if I told you that with recursion, we can achieve this in under 10 lines?

First of all, lets imagine our function call:

```javascript
console.log(fileSearch(fileTree, "dates.js"));
```
We’ll be creating a function called fileSearch and it will take 2 arguments:
1. the file tree
2. the filename we want to search for

We’ll expect a boolean **true** or **false** as the output.

## Process to the solution

Looking at our file tree structure, we can see there are 2 types of objects. A **folder** type and a **file** type.

We know if the type is a file, we have a filename available to compare to the filename we’ll be passing in to our function to search for — a.k.a the **‘searchTerm’**.

However, if the type is a folder, we know we have a content attribute which has an array of one or more objects, which again could hold further folder types or filename types. We simply don’t know how many of these there will be depth wise. This alone is an indication that we need to use recursion for a scalable solution.

The first thing we want to do is check, at the root level of the tree, if we have a file or a folder.

If we have a file, compare the filename with our searchTerm, else, in the case we have a folder, we need drop into the content array and again, check if we have a folder or a file.

We’ve already checked folder or file in the first step, so we can reuse this code here recursively by calling our own function again.

Focus on the solution below and see how we call fileSearch within itself:

```javascript
const fileSearch = (tree, searchTerm) => {
 switch (tree.type) {
   case "file":
     return tree.name === searchTerm;
     
   case "folder":
     return !!tree.content.find((element) => fileSearch(element, searchTerm));
     
   default:
     return "File Not Found";
  }
};
```

The simplicity of the above solution should in hope speak for itself given then steps we've followed to arrive here.
Never stop to learn but practice
Tags: webdev, javascript, vue, opensource
Published: 2021-05-13 13:17:43

### Learn learn learn
As a frontend developer, you need to learn constantly to follow the technology but almost to increase your skills. 

**But why ?**
> _I'm confortable into my job and i like my current language._ 

This answer isn't entirely acceptable for some reasons : 
* Do you understand completely your language ?  
* Are you not curious to discover some tips and tricks ? 
* How could you offer your expertise on a new project ?
* _Questions list could be longer..._

Follow a technology or some tutorial is not enough. Listen is not enough, you need to practice to increase your skills. **This is the observation that I made after several months of reading blogs.**

### Learn ok but how to practice without project ? 
> Yeah, for some developer like me, it's hard to develop a website without a visual destination and a real objective. 

> Yeah, I want to learn some things like CSS animation because I can't into my current job (animation is useless for some persons). 

> Yeah, I want to train on Vue3 the latest big feature **Composition API**. 

For all of these reflexion, i try to found multiple project to learn and practice by the same occasion. 
Anyone could join myself through an experimentation code on some challenges. An entirely series will be dedicated to present the **ultimate resource** and challenges for each of one.

I will purpose many challenges in different technologies thanks to your feedback. The idea behind this is : 
- to learn together (even if we use the same language, we could improve our knowledge through the code of someone else)
- to compare challenges results (on the challenge, i will list of all your project)
- collaborate on a challenge through Pull Request (improve UX/UI, improve readable code, ...)

### But Stay focus
If you like me love to reading posts on `dev.to`, you may have already lost yourself through the immensity of the number of interesting posts.

I know it's hard as exercise. But to progress, you need to stay concentrate and work synchronous on a task. Don't be asynchronous, because you will lost much of time. 


### Conclusion
Whether you are freelance, in a job, or in training, never stop learning and stay curious. Even if you are only few minutes in the week, it's always a benefit for yourself of the future.


Any feedbacks are welcome to discuss ❤️
How to change env variables inside of docker container in AWS ECS
Published: 2021-05-13 13:11:13

For example we have cluster in AWS ECS with 3 services:
![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vpjmmguwfynme11ger5k.png)
And we want to change evn variables in `api-staging` service.

To do it we should create a new revision of task definition with updated env variables and then tell the service to use new task definition.
![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7afk2ll9k9q44ygbwahc.png)
So, to create a new revision of task definition we should go to list of all revisions, select the last one and create a new revision.
![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/td3yyaynb7xu4wswwen3.png)

To change the container evn variables we should go to container definitions section and edit our container: ![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/641drh99qbbn9al9ummd.png)
Set new values to env variables and then update container and save new revision of Task Definition:
![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ucdhzifzcmf89unismzl.png)
 
When we have a new revision we should update our `api-staging` service and set the latest revision. Also don't forget to set force new deployment checkbox ![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8jn5amothgc5rn98z2hn.png)
How to create a README for your GitHub profile
Published: 2021-05-13 13:10:57

Did you know? You can create your very own personal README for your GitHub profile! It is a sort of secret feature of GitHub which is now known to a considerable number of people!

You can view an example on my [GitHub profile](https://github.com/PuneetGopinath)

However, if you still don’t know about this feature, you are at right page.

This README.md file greatly enhances your GitHub profile, beautifies it, and allows you to showcase your stats and achievements in your desired fashion!

So the very first thing to do is go to your GitHub page and click on the ‘+’ symbol on the top right corner and click on new repository.

![image](https://miro.medium.com/max/1050/1*tG4gcHY4zZkh-lDg2NDjIw.png)

The next step is to enter the repository name. The **repository name** should be the **same** as your **GitHub username**. As you type the repository name, you will see a box that pops below your repository saying that this is a secret feature.

Next, make sure that the repository is public and _Add a README file checkbox_ is checked.

![image](https://miro.medium.com/max/1050/1*XgljVt2rx3vTkfcWJTICcw.png)

Now click on the _Create Repository_ button.

The `README.md` file of this repository becomes your profile readme. You can edit this in markdown format and decorate your readme however you want.

It is often seen that people also add workflows to automatically update their readme file continuously.

So go ahead and decorate your GitHub profile with your information and achievements.

My [GitHub profile repository](https://github.com/PuneetGopinath/PuneetGopinath)
Please star my repository if you like it.
Follow me on [GitHub](https://github.com/PuneetGopinath)
Strings in C
Published: 2021-05-13 13:07:18

Strings are defined as an array of characters. The difference between a character array and a string is the string is terminated with a special character ‘\0’.

Declaration of strings: Declaring a string is as simple as declaring a one-dimensional array. Below is the basic syntax for declaring a string.

the number of characters strings will store. Please keep in mind that there is an extra terminating character which is the Null character (‘\0’) used to indicate the termination of string which differs strings from normal character arrays.

Initializing a String:
1. char str[] = "Helloworld";

2. char str[50] = "Helloworld";

3. char str[] = {'H','e','l','l','o','w','o','r','l','d','\0'};

4. char str[14] = {'H','e','l','l','o','w','o','r','G
l','d','\0'};

We can see in the above program that strings can be printed using normal printf statements just like we print any other variable. Unlike arrays, we do not need to print a string, character by character. The C language does not provide an inbuilt data type for strings but it has an access specifier “%s” which can be used to directly print and read strings.

example program:
#include<stdio.h>
  
int main()
{   
    // declaring string
    char str[50];
      
    // reading string
    scanf("%s",str);
      
    // print string
    printf("%s",str);
  
    return 0;
}
JavaScript Interview Question #40: What is the type of `undefined` in JS?
Tags: beginners, webdev, javascript, codenewbie
Published: 2021-05-13 12:57:04

![js-test-40](https://learn.coderslang.com/js-test-40.png)

What's the output?

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

In JavaScript, the `typeof` operator always returns a string.

So, even though `typeof undefined` evaluates to `undefined`, it’s a string and not the primitive `undefined` value.

The string `’undefined’` is not equal to the value `undefined`.

---

**ANSWER**: the message `false` will appear in the console.

[Learn Full-Stack JavaScript](https://js.coderslang.com/)
25+ JavaScript tips that can help you understand this programming language better
Tags: javascript, webdev, beginners
Published: 2021-05-13 12:41:57

_If you found value in this thread you will most likely enjoy my tweets too so make sure you follow me on [Twitter](https://twitter.com/VladPasca5)  for more information about web development and how to improve as a developer. This article was first published on my [Blog](https://vladpasca.hashnode.dev/)_

### 1. Object Methods
{% twitter 1326558405885038592 %}

### 2. Recursion Function
{% twitter 1326917674358726666 %}

### 3. .slice()
{% twitter 1329756382682353664%}

### 4. Async and await
{% twitter 1330838659495579648%}

### 5. Proxy
{% twitter 1331938253251907584%}

### 6. Basic DOM terms and concepts
{% twitter 1331998652181733380%}

### 7. To-Do list code
{% twitter 1332298627096535041%}

### 8. How to hide a text using DOM events
{% twitter 1334114708945842178%}

### 9. How to create and use a class
{% twitter 1347732323618283522%}

### 10. How to select a character from a string
{% twitter 1348147562042122240%}

### 11. How to check if an object belongs to a class
{% twitter 1348805142674624515%}

### 12. Prototypes methods
{% twitter 1349521613549518848%}

### 13. How to import everything from a file
{% twitter 1349982149387177985%}

### 14. Destructuring
{% twitter 1350471623531323392%}

### 15. How you can use constructors and the this. keyword
{% twitter 1351303358758453248%}

### 16. How to use Prototypes
{% twitter 1351922437772898305%}

### 17. Everything you need to know about Modules
{% twitter 1352645950884352000%}

### 18. Why you should use Static Classes over Prototypes
{% twitter 1353658880472055810%}

### 19. How to find the lowest/highest number from an array
{% twitter 1353734374286643200%}

### 20. How to use .map() array method
{% twitter 1356150292027334663%}

### 21. How to use .sort() method
{% twitter 1356422085942235137%}

### 22. Arrow functions explained
{% twitter 1357599844643266561%}

### 23. How to use instanceof
{% twitter 1359743972139175937%}

### 24. How create a regular expression
{% twitter 1371370582076321792%}

### 25. exec() regex function explained
{% twitter 1372094099134713857%}

### 26. test() regex function explained
{% twitter 1372820637060788224%}

### 27. match() regex function explained
{% twitter 1373907297206857729%}

### 28. search() regex function explained
{% twitter 1374632072912900097%}

### 29. replace() regex function explained
{% twitter 1379297816267214849%}

### The end

_I hope found this useful and if you did please let me know. If you have any question feel free to DM me on  [Twitter](https://twitter.com/VladPasca5) ._
Browse faster with vimium and qutebrowser
Tags: linux, productivity, vim
Published: 2021-05-13 12:27:23

Vimium is a Chrome extension that provides keyboard-based navigation and control in the spirit of the Vim editor. The idea is to create a browser that behaves more like vim does.

## What is vim? 

As a developer, it is important to have a good editor. You can't work efficiently in notepad, you need something better. Meet vim.

Vim is a programmers editor and it can increase your productivity, if you are new to vim I recommend these [exercises](https://vim.is/).

There are many reasons to learn vim

* Vim is always available everywhere
* Vim increases your productivity
* Vim can be used in ssh, terminal and GUI
* Vim-mode is available in visual studio, jetbrains and other IDEs
* It's on every server you will ever login to
* It is very powerful

![vim keybindings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lzdbyj3jnazdfn5eu9s7.jpeg)

## Why vimium?

If you use vim a lot, you will like [vimium](https://vimium.github.io/). 

* vimium is a keyboard navigation addon for chromium.
* vimium is similar to vim in that it takes advantage of VI like key bindings
* open and close new tabs
* go to new tabs or scroll around existing ones 
* open new horizontal or vertical tabs next to each othe
* navigate the web without your fingers ever leaving the keyboard!

{% youtube t67Sn0RGK54 %}

## Qutebrowser? :monkey:

An alternative to vimium wit chrome is [qutebrowser](https://qutebrowser.org/). qutebrowser is a keyboard-driven, vim-like browser with a minimal GUI. It's written in Python and uses [PyQt5](https://pythonpyqt.com/) and QtWebEngine (WebKit/Blink).

![qutebrowser](https://qutebrowser.org/doc/img/hints.png)

It is keyboard-friendly, vim-like browser based on PyQt5.
Features 

* Minimalist UI 
* Comfortable and powerful keyboard-driven UI 
* Tabbed browsing 
* Vim-like keybindings 
* Bookmarks 
* Session management 
* Web Panels (i.e. bookmarklets) 
* QtWebEngine