teleren/devto huggingface dataset:
Explaining the difference between an Array and an Object in Javascript with a Rick and Morty analogy.
Tags: javascript
Published: 2020-05-30 19:59:20

An Object is a Morty. Every universe has its own version of Morty. There's lizard Morty, lawyer Morty, fat Morty, evil Morty, and so on.
So, if you are an omnipresent creator and you want to create a new Morty in one of the infinite timelines, you would simply do

    const Morty = {};

Cool, we just created a personality-less piece of crap. Every Object can have their own personality which sets them apart. These traits can be expressed as `property` and `methods`. 
So, for a Morty these properties can be eyes, nose, limbs. The evil Morty has one eye, the lizard Morty has a tail, and the mutant Morty, well... you get the gist.

    const Morty = {
      eyes: 2,
      hammerForHead: false,
    };

Similar to properties which defines the traits, an object's method defines the behavior. So, for a Morty,

    const Morty = {
      eyes: 2,
      hammerForHead: false,
      ...,
      panic: function() {
          // console.log('find Rick for help')
      }
    }

You see, when creating a Morty with an objects, we can play around with the possibilities. An object is pretty flexible.

Now, suppose Rick wants an army of robot Mortys. So he decides to build a robot Morty maker machine with these traits.
     
    const Morty = {
        eyes: 2,
        hand: 2,
        tail: 0 
     }

Now as you see, the possibilities you can have for the kind of Morty reduces drastically from infinite to a fixed set because Rick's machine can only possibly make robot Mortys of a certain type. Each morty must have their eye at the proper position, their heads at their designated place, their tails between their legs. Basically, everything must go to their properly indexed position for the machine to build up a Morty. 

So, if the eyes are assembled first, then the limbs, and so on and Rick being the lazy smartass as always just do this,

     const BotMorty = {
         0: 2,
         1: 2,
         2: 0,
     }

Also, none of these robot Mortys have free will. Rick predefined their behavior and these Morty can only do so. To make this process easy, Rick can create this in this form and the machine would assign 2 to zeroeth position, 1 to first, and 2 to second position.

    const BotMorty = [ 2, 2, 0 ];

That's it, an array is also an object secretly but a special one. Its properties are defined as indexes. You can put anything in these indexes and can work with it using the methods it already provides.
Singleton In JavaScript
Tags: javascript, webdev
Published: 2020-05-30 19:38:47

<em>This post is dedicated to my very limited understanding on Singleton in JavaScript. Feel free to add more details in the comment below to educate me more about it, or if you think my current knowledge is wrong somewhere.</em>
***

**What is Singleton?**
The Singleton Pattern limits the number of instances of a particular object to just one. This single instance is called the singleton.

**Usage?**
Singletons are useful in co-ordinating system-wide actions from a single central place of the code. An example could be a database connection pool. The pool manages the creation, destruction, and lifetime of all database connections for the entire application ensuring that no connections are 'lost'.

Singletons also reduce the need for global variables which is particularly important in JavaScript because it limits namespace pollution and associated risk of name collisions. 

**How to create one?**
The Singleton object can be implemented as an immediate anonymous function.

**Example Below:**
```js
var Singleton = (function () {
  var instance;

  function createInstance() {
    var object = new Object("I am the instance");
    return object;
  }

  return {
    getInstance: function () {
      if (!instance) {
        instance = createInstance();
      }
      return instance;
    },
  };
})();

function run() {
  var instance1 = Singleton.getInstance();
  var instance2 = Singleton.getInstance();

  alert("Same instance? " + Object.is(instance1, instance2));
}

run();

```
***

Feel free to chime in the comment section with more information about Singleton to help a fellow developer. :)
Appwrite Backend Server v0.6.2 Introduces Support for 'Sign in with Apple'
Tags: javascript, webdev, ios, flutter
Published: 2020-05-30 19:11:09

We are excited to announce the release of version 0.6.2 of the [Appwrite open-source backend](https://github.com/appwrite/appwrite) server for Web, Mobile, Flutter apps. This is the 12 version of Appwrite since we first launched the project.

If you haven't heard about [Appwrite](https://appwrite.io) before, It's an [open-source BAAS (backend-as-a-service)](https://appwrite.io) that abstracts a lot of the complexity and repetitiveness required when building an API from scratch. The server comes packaged as a set of Docker containers you can host anywhere really quickly, and it has tons of built-in security features. You can learn more at [https://appwrite.io](https://appwrite.io)

The new version introduces new beta support for Apple OAuth authentication, better known as "[Sign in with Apple](https://developer.apple.com/sign-in-with-apple/)" This new feature will allow you to authenticate your users with Apple private sign up service easily. Many thanks should be going to [Christy Jacob](https://twitter.com/christyjacob4) for his contribution to making this feature available.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2qt6se42ozf9by33s3jz.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3r9ywsi7fjqxhy1qgtum.png)

The new version also introduces multiple bug fixes and improvement reported by our community members both on Discord and GitHub. Many thanks should also go to our community members [Torsten Dittmann](https://github.com/TorstenDittmann), [Pedro Cisneros Santana](https://github.com/PedroCisnerosSantana), [Mehmet Hakan Yazkan](https://github.com/mehmet-hakan-yazkan), [Taweechai Maklay](https://github.com/netfirms), [Jansen Arruda](https://github.com/jansenarruda), [Punit Diwan](https://github.com/punitdiwan), and [FathiQ](https://github.com/FathiQ), who took an active part in making this version better by reporting issues, sending pull-requests, and generally being so supportive.

The full change-log for version 0.6.2 is available on our [GitHub release page](https://github.com/appwrite/appwrite/releases). You can also check our [public roadmap](https://github.com/appwrite/appwrite/projects) if you're curious about what new features and improvements are lined up next for Appwrite.

You can [install the new Appwrite server](https://appwrite.io/docs/installation) now, or upgrade from a previous release. Feel free to reach out to our community or team members on [Discord](https://discord.com/invite/GSeTUeA) or [Twitter](https://twitter.com/appwrite_io) if you seek any help, advice, or want to share your feedback with us.
Lunacy - Illustration challenge #50DaysLunacy - 7th Day
Tags: design, webdev
Published: 2020-05-30 18:59:48

<i> Hint : I was really bad at arts in school. </i>

My challenge is to create 50 days of illustrations this year. Trying to improve my UI, increase my creativity and use it for UI designs. 

Who knows maybe I create the next cool sh** by accident. Chance is high.

I only want to spend 1-2 hours per challengeday for an illustration, it shouldn't be high quality illustrations.

Unconventionally I use Lunacy since I really enjoy that tools and belive in it's potential in the future.(Its free and im not rich atm) 

<h3> Day 1 </h3>
<label> Handy people </label>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/czcqrfd9qod5nucriuxj.jpg)

<h3> Day 2 </h3>
<label> Covid and homeoffice </label>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c297850r35fh8eyiswho.jpg)

<h3> Day 3 </h3>
<label> Covid and homeoffice </label>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zp5186qkk1ifio68v6eq.jpg)

<h3> Day 4 </h3>
<label> Hands in action </label>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ugn8rme6i5m68oyc0han.jpg)

<h3> Day 5 </h3>
<label> Weird and real </label>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wad6j6jr4jmadk3vb0oa.jpg)

<h3> Day 6 </h3>
<label> Corona protesters </label>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ypcir9r2gycjvpube1d0.jpg)

<h3> Day 7 </h3>
<label> Weird shape illustrations </label>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bdf3jb0u5cj2bmu41si7.jpg)



<h2> How I learn </h2>

Im trying to get in touch with the possibilties of illustrations. Youtube helped me with some sketch tutorials.

I really liked this guy

https://www.youtube.com/channel/UCZHkx_OyRXHb1D3XTqOidRw


<b> If your know useful sources to get in touch with different techniques you can help me, I appriciate every help</b>


Thats it so far.

<h1> Come and begin your improvement with me man </h1>
🚀10 Trending projects on GitHub for web developers - 30th May 2020
Tags: javascript, webdev, github
Published: 2020-05-30 18:49:54

Trending Projects is available as a weekly newsletter please sign up at [Stargazing.dev](https://stargazing.dev/) to ensure you never miss an issue.

### 1. Responsively App

A modified browser built using Electron that helps in responsive web development.

{% github manojVivek/responsively-app %}

---

### 2. Algorithm Visualizer

Learning an algorithm gets much easier with visualizing it. Don't get what we mean? Check it out:

{% github algorithm-visualizer/algorithm-visualizer %}

---

### 3. Oak

A middleware framework for Deno's net server

{% github oakserver/oak %}

---

### 4. You Don't Know JS Yet

This is a series of books diving deep into the core mechanisms of the JavaScript language. This is the second edition of the book series:

{% github getify/You-Dont-Know-JS %}

---

### 5. JavaScript Algorithms and Data Structures

This repository contains JavaScript based examples of many popular algorithms and data structures

{% github trekhleb/javascript-algorithms %}

---

### 6. build-your-own-x 

Build your own (insert technology here)

{% github danistefanovic/build-your-own-x %}

---

### 7. esbuild

An extremely fast JavaScript bundler and minifier

{% github evanw/esbuild %}

---

### 8. RealWorld example apps

See how the exact same Medium.com clone is built using any of our supported frontends and backends.

{% github gothinkster/realworld %}

---

### 9. Node Best Practices

The Node.js best practices list (May 2020)

{% github goldbergyoni/nodebestpractices %}

---

### 10. Public APIs

A collective list of free APIs for use in software and web development.

{% github public-apis/public-apis %}

---

For all for the latest rankings please checkout [Stargazing.dev](https://stargazing.dev)

---

Trending Projects is available as a weekly newsletter please sign up at [Stargazing.dev](https://stargazing.dev/) to ensure you never miss an issue.

If you enjoyed this article you can [follow me](https://twitter.com/stargazing_dev) on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.
Helper function for setInterval()
Tags: javascript
Published: 2020-05-30 07:55:04

There are instances that we need to wait for certain conditions to be satisfied before executing something. Javascript’s setInterval() provides a native timing function that can evaluate an expression over and over again within specified intervals (in milliseconds).

But in my opinion, using setInterval() should be the last resort since there are cleaner ways to wait out results (ex: promises, observables). But in the event that you will use it, please don’t just dump it in your code.

I have faced a scenario where I had used setInterval() too many times that my code became unnecessarily crammed.

You will need 3 things to keep in mind when using this.
1. Condition to be satisfied
2. Action to be executed when #1 is met
3. Clearing the interval after #2 is executed

The common mistake when implementing this is forgetting #3, (I’m guilty!) which will make setInterval() run forever even if satisfying #1.

Since I'm using Angular, I’ve put it in a service so it can be available wherever I would need it.

Here is the code:

```javascript
import { Injectable } from '@angular/core';
@Injectable()
export class HelperService {
  constructor() { }
  public runSetInterval(duration: number, condition: any, callback: any): void {
      let timer = setInterval(function(){ 
        if (condition())
        {
          callback();
          clearInterval(timer);
        }
      }, duration);
  }
}
```

In the above, the function required 3 inputs:
1. Duration: How many milliseconds to wait before every interval evaluation
2. Condition: The expression to be satisfied to stop the interval
3. Callback: The task to be executed when #2 is satisfied

Take note that after the callback has been executed, clearInterval() is called immediately. This takes as input the instance of the setInterval() function (defined as timer in above). It will stop the cycle of calling the function again so it won’t run forever.

We can invoke this function like below:

```javascript
self.helperService.runSetInterval(
	1000,
	() => {return foo >= 1 && bar === "han solo"},
	() => (self.executeSomeTask())
);
```

Here is a [plunkr](https://plnkr.co/edit/JOuT1TAxSNmnbeWYL3KJ?p=preview&preview) demo that you can play around.
Microblog - Create a new non-root user with sudo privileges on Ubuntu based DigitalOcean Droplet configured with SSH
Tags: digitalocean, linux, ubuntu, serverconfiguration
Published: 2020-05-30 18:44:22

---
title: Microblog - Create a new non-root user with sudo privileges on Ubuntu based DigitalOcean Droplet configured with SSH
published: true
description: Procedure to create a new user and assign sudo privileges to it and add SSH configuration for it
tags: #digitalocean #linux #ubuntu #serverconfiguration
cover_image: https://images.unsplash.com/photo-1562819606-b7a0ebd7e7c5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80
---

This post will walk you through steps of creating a new non root user and configure sudo privileges with it. This post not just focuses on DigitalOcean Droplet but rather can be used for any linux based system.

Well, so you've spin up your Digital Ocean droplet and configured it with your SSH and have a root user to login from your terminal or bash.

But it is not a good option to use the root user, as the root user has the maximum level of access and rights, which might accidentally cause some problem. So a better choice is to create a new user.

Let's follow through the steps to create a new user and assign sudo privileges to it.

1. Login to your droplet using terminal or bash or PuTTY(Windows).

    ```bash
    ssh root@<ip-address-of-your-droplet>
    ```
2. Create a new user, `<new-user>` (Replace `<new-user>` with your desired username).

    ```bash
    adduser <new-user>
    ```
3. Congratulations, :smiley: . You've created a new user. You can verify it using,

    ```bash
    id <new-user>
    ```
4. Let us add the `<new-user>` to the sudo group to get the sudo privileges.

    ```bash
    usermod -aG sudo <new-user>
    ```

5. Now let us add SSH key for the new user so that next time we can connect to droplet using `<new-user>` using SSH. Switch the user from root to <new-user> using,

    ```bash
    su - <new-user>
    ```

6. Create a directory .ssh into home dir. Change permissions for that dir. Follow the commands,

    ```bash
    sudo mkdir ~/.ssh
    sudo chmod 700 ~/.ssh
    ```

7. Create a file named authorized_keys and paste your SSH key in there. Also change the permission for it.

    ```bash
    sudo vim ~/.ssh/authorized_keys
    Paste the key and save the file.
    sudo chmod 600 ~/.ssh/authorized_keys
    ```

`Note`: If you want to know how to generate SSH keys follow this doc from Git [here](https://help.github.com/en/github/authenticating-to-github/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent).

Congratulations, :smiley: . You've successfully created a non-root `<new-user>` with sudo privileges to work with. You can now login your droplet using,

    ```bash
    ssh <new-user>@<ip-address-of-your-droplet>
    ```
Thanks for reading through.
Comment down if you have any doubts.
Like if you find this post useful. I welcome your opinions and constructive criticism. You can find me on [twitter](https://twitter.com/mistryvatsal11) or my [website](https://mistryvatsal.github.io).
Cheers!
How to migrate hundreds of GB data from aws s3 using s3 sync in few minutes
Tags: aws, s3, syssoft
Published: 2020-05-30 18:36:38

Have you ever tried to migrate GB's of data from aws S3 to you local PC or another s3 bucket?

If so, you'll know that it's difficult because the huge size of data and small chucks of file could have taken days to do the data transfer and meanwhile new data have been piled up in the S3 Bucket . So what do you do? Many people have found solutions by simply copying the folder and files using any S3 client software manually , But there are a few things you should know before you start this data transfer activity which could save your hours & days of effort. This post will tell you what you need to know to make sure you do the data transfer in most efficient , automated way.

Before begin the activity here are few prerequisites  

**Prerequisites: ( aws-cli, s3 bucket, IAM user with programmatic access )**

1. install the aws-cli  https://docs.aws.amazon.com/cli/latest/userguide/awscli-install-windows.html#install-msi-on-windows
2. make sure you have aws iam user  with proper access read / write on the s3 buckets 
3. configure the aws IAM user credentials accesskey / secretkey in the system

Once the above mentioned steps are complete to ensure everything is setup properly . open the terminal or command prompt and type the below command if every thing is good then you should be able to see the list of buckets of your account.

```
aws s3 ls
```
As quick automated way to do the data sync from aws s3 to local PC  i have create the windows batch script , so you can change the value and  run in your windows system. and it will do the task for you.


```
rem Download AWS CLI https://docs.aws.amazon.com/cli/latest/userguide/awscli-install-windows.html#install-msi-on-windows

echo 'setting the variables'

rem source bucket name with folder ex. aws.XXXX.com.001/folder
set BUCKET_NAME=aws.yoursources3bucket.com/folder

rem destinaion directory (Local PC) name with folder ex. C:\Users\abc\Newfolder.. Do not keep space in the directory.
set DESTN_DIR=c:\data\s3

rem Access Key & Secret Key. 
set AWS_ACCESS_KEY_ID=AKIXXXX
set AWS_SECRET_ACCESS_KEY=XXXXXXXXXXXXX

rem AWS CLI installation path
set AWS_PATH="C:\Program Files\Amazon\AWSCLI\bin\aws"

rem Max. requrent requests
%AWS_PATH% configure set default.s3.max_concurrent_requests 200

rem Download/Sync command
echo %BUCKET_NAME% %DESTN_DIR%
%AWS_PATH% s3 sync s3://%BUCKET_NAME% %DESTN_DIR%

```
Please not all the aws configurations will be store in your local PC folder in the path C:\Users\Yourname\.aws

#### **👍**Follow me on [GitHub](https://github.com/shahid-khans), or tweet me !  [here](https://twitter.com/ishahidkhans). 


### 💟 Feel free to tweet me for any issues
Setting up husky & lint-staged for code format and unit tests before git push
Tags: laravel, php, git
Published: 2020-05-30 18:36:01

Having an automated code formatting and php unit runner is a great addition to your automation. 

I work in a team where different developers have different habit when it comes to code formatting. Yes, they are small things I know. But, I spend a lot of time in code review. And, reading other's code is always difficult if the formatting is different. And hence, I want to ensure that the code formatting, structure etc are as much similar as possible. It reduces a lot of load from the code review process and speeds up things.

Plus, the aspect of automatically running the unit tests before every code commit is one check enforced for the developer to ensure that his new code is not breaking something which is running properly right now and was working before he / she made any code changes. 

And, hence I looked at different options and this combination of husky to hook into the git hooks and lint-staged to get the context of the files which are staged are really helpful.

In this article, I will explain how I did the setup of these two npm modules to ensure code formatting and running php unit before every git push.

Hope you like it, and feel free to leave comments about your views.

https://www.amitavroy.com/justread/content/articles/setting-up-husky-lint-staged-for-code-format-and-unit-tests-before-git-push
City Builder in Unity3D | I HATE UI
Tags: youtube, game, city, builder
Published: 2020-05-30 18:19:20

Hey!
This is my 7th part in my dev log series, 
I made simple UI for choosing tools, the worst part in game design,
and I also started Trello board for my project

Come, Watch and leave a Like and Subscribe :)

{% youtube 3D5FmS-yiZk %}

> Like this post? 
> Support me via [Patreon](https://www.patreon.com/eranelbaz)
> Subscribe to my [YouTube Channel](https://www.youtube.com/channel/UCVUNeBGM5wZJKcOx0QwAaTA?sub_confirmation=1)
Interactive Journey in Terasology World.
Published: 2020-05-30 18:00:11

Hey there,

As mentioned in the last post, I have shared the details about the project in this Post. :)

# Brief:

The journey of a contributor/Player in open source projects is exciting, especially when the contributors can map their abilities with the workflow of the vast open source projects like terasology. In this project I'll be working on an Interactive experience for the contributor, which will take them through all the possible paths according to his/her interests in the terasology project.

# Overview:

Currently, there are a lot of modules in terasology and the documentation is distributed in forms of wikis, tutorials,forums, etc. and It is a bit Intimidating for a newbie (as a contributor or gamer) to understand the file structures & workflow. So, I am targeting to remove this obstacle for new contributors by implementing an Interactive web experience as a Tutorial Journey with the help of vector graphics & implement a system where all the steps & documentations will integrate together to simplify the experience for the contributors as well as enthusiast gamers. It will be guiding the new contributor to reach the required resources in which they are interested. The end goal is to deploy a web app having a stepwise guide to follow for newbies.

## Flow:

![Mockup level 1](https://dev-to-uploads.s3.amazonaws.com/i/5ktajf9s2hjxdft1pmem.gif)

> #### Post Type: Pre-GSoC post - I.

### `$ Ctrl+z`

> ### `program exited with exit code 0 (0x0)`
Gridsome and Gatsby plugins to fetch the blog posts from your devblogs on hashnode
Tags: showdev, gatsby, vue, react
Published: 2020-05-30 17:51:19

Hashnode is a developer community similar to dev.to. Hashnode offers every user to own [devblogs](hashnode.com/devblog). 

As all the devs using gridsome and gatsby must be aware that these static site generators offer source plugins to fetch your data from different places.

And if you are using devblog for blogging purposes, I've built grisome and gatsby plugins for you.

Gridsome plugin - [https://github.com/nishantwrp/gridsome-source-hashnode-devblog](https://github.com/nishantwrp/gridsome-source-hashnode-devblog)
Gatsby plugin - [https://github.com/nishantwrp/gatsby-source-hashnode-devblog](https://github.com/nishantwrp/gatsby-source-hashnode-devblog)

Please do take a look at these. Any feedback is appreciated.