teleren/devto huggingface dataset:
The best time to npm init
Tags: npm
Published: 2019-04-05 07:22:32

---
title: The best time to npm init 
description: "If you're building an open source project, the best time to npm init is after you've added a Git remote to the project"
canonical_url: https://zellwk.com/blog/best-time-to-npm-init
tags: npm
cover_image: https://zellwk.com/images/2019/npm-init/extras.png
published: true
---

When should you `npm init`? 

Most developers run `npm init` right after creating and navigating into a new project. 

It makes sense to `npm init` at the start of the project because we use npm to download dependencies. Once we `npm init`, we can begin downloading (and saving) our dependencies. 

For most projects, this workflow works.

But if you're creating an open source project, the best time to `npm init` is slightly later. If you `npm init` right after creating and navigating into the project, you'll miss out a few things. 



## The best time to npm init

The best time to `npm init` (for an open source project) is after you added a Git remote to your project. In other words, you should only `npm init` after you have completed the following commands: 

1. `git init`
2. `git remote add origin`

If you `npm init` after you have added a Git remote, npm will generate three extra things in your `package.json` files. They are: 

1. A `repository` property with a link to your remote repo
2. A `bugs` property with a link to the issues page. 
3. A `homepage` property that links to the `readme.md` file. 

<figure><img src="https://zellwk.com/images/2019/npm-init/extras.png" alt="package.json that shows a 'repository' property, a 'bugs' property and a 'homepage' property"></figure>

These three properties will be displayed as metadata on the right side of the project's npm page. 

<figure><img src="https://zellwk.com/images/2019/npm-init/npm-page.png" alt="Metadata showing up on npm page. "></figure>

These metadata are links. They let people move to your project's Github page easily from the npm page. You'll want these links for better discoverability. 

## The second best time to npm init

The second best time to npm init is now. If you run `npm init` now, it will generate the three properties I mentioned above. 

Before you run `npm init`, make sure you rename your original `package.json` file to something else. This way, you can copy-paste dependencies and other changes you've made from the  original `package.json` file to the newly generated one. 

## Wrapping up

The best time to `npm init` is after you've added a Git remote to your project. The second best time? Anytime! 

<hr>

Thanks for reading. This article was originally posted on [my blog](https://zellwk.com/blog/best-time-to-npm-init
). Sign up for [my newsletter](https://zellwk.com) if you want more articles to help you become a better frontend developer.
Default Prop Values In React
Tags: props, react, defaults
Published: 2019-04-08 03:15:28

---
title: Default Prop Values In React
published: true
tags: props,react,defaults
canonical_url: https://stephencharlesweiss.com//2019-04-05/default-prop-values/
---

What value does a prop get if no value is assigned?

To think about this more tangibly, imagine you have a higher order component, `Container`. That component does _nothing_ but render a subcomponent, `RandomComponent` to which it passes a prop, `propInQuestion`.

( **NB** : In the code snippets below, I am skipping certain details like `import`, etc. to zoom in on the pertinent information.)

A couple of things to note:

1. We never assign `propInQuestion` a value. 
2. `propInQuestion` is not an argument that’s passed from wherever `Container` is being called. 

```
const Container = () => (
    <RandomComopnent propInQuestion />
)
```

At this point, you might expect `propInQuestion` to be `undefined`. I did.

But before we conclude, let’s look at our `RandomComponent`

```
class RandomComponent extends Component {

  render () {
    const {propInQuestion} = this.props;
    return (
      <React.Fragment>
      <p>`The value of propInQuestion? --> ${propInQuestion}`</p>
      </React.Fragment>
    )
  }
}

RandomComponent.defaultProps = {
    propInQuestion: false,
};
```

The first thing I noticed when I came across this pattern was the `defaultProps` at the bottom. **Finally!** I had a value assignment! So the answer’s `false`, right?

Wrong.

It turns out that when a prop is passed around, it defaults to `true`, mirroring the behavior of HTML. Which is to say, we actually passed along a value for `propInQuestion`, through the `Container`, even though it was the first time it was referenced.

So, it turns out `Container`’s doing more than I initially gave it credit. By passing the prop, `propInQuestion`, it gave it a value. A more verbose way of writing the same thing would be:

```
const Container = () => (
    <RandomComopnent propInQuestion={true} />
)
```

On the other hand, in order to _use_ the `defaultProps`, it would have needed to be:

```
const Container = () => (
    <RandomComopnent />
)
```

The more you know!

H/t to @glanks, @tehpsalmist, and @MinimumViablePerson from [CodingBlocks community](https://codingblocks.slack.com) for pointing me in the right direction!
Ad-hoc reverse SSH for getting things from remote locations
Tags: ssh, devops, bash, tips
Published: 2019-05-10 13:22:22

---
title: Ad-hoc reverse SSH for getting things from remote locations
published: true
tags: ssh, devops, bash, tips
canonical_url: https://blog.chilcutt.com/2019/04/05/adhoc-reverse-ssh-for-getting-things-from-remote-locations.html
---

As a web developer, I’m often working with remote servers over SSH. Sometimes I’m working with a file on the remote server and want to get it back to my local machine (e.g. script output, a CSV, or a log file). One way I can easily get them back is by opening a reverse SSH port along my connection to the server.

**tl;dr** open a reverse connection to your local computer and `scp` a file home

```
# from the remote shell, get into the SSH prompt
$ <enter> ~C

ssh> -R 127.0.0.1:2222:127.0.0.1:22

$ scp -P2222 move_this_file.txt kyle@127.0.0.1:~/Downloads
```

Let’s take a look at what’s going on here.

```
$ <enter> ~C
```

That’s the “enter” key, followed by a “tilde”, followed by a capital “C”. This string of keystrokes will get you into the `ssh` command line and give you a new prompt.

<pre>
ssh> <b>-R</b> 127.0.0.1:2222:127.0.0.1:22
</pre>

From the new prompt we’re going to request a remote forward port…

<pre>
ssh> -R <b>127.0.0.1:2222</b> :127.0.0.1:22
</pre>

From the remote machine on port 2222…

<pre>
ssh> -R 127.0.0.1:2222: <b>127.0.0.1:22</b>
</pre>

To the local machine on port 22.

Once this is set up, we can see a forwarded port opened on port 2222:

<pre>
$ netstat -nap | grep 2222 tcp 0 0 127.0.0.1: <b>2222</b> 0.0.0.0:*
</pre>

We can then use this port to connect to the SSH server on the local machine and move any files using the scp command (or any command that can use the SSH connection).

```
$ scp -P2222 move_this_file.txt kyle@127.0.0.1:~/Downloads
```

In the case above, I’m sending the file named `move_this_file.txt` to my local machine in my Downloads folder off my home directory.

When you close the SSH connection to the remote server, the port forward will also be closed.

* * *

If you’re on MacOS, you have an SSH server preinstalled on your machine that’s not active, you can turn it on from the command line:

```
$ sudo systemsetup -setremotelogin on
```

* * *

_If you’re forward thinking enough, you can open this SSH remote port forward when you first connect to the remote server:_

```
$ ssh -R 127.0.0.1:2222:127.0.0.1:22 remote_user@remote_server
```

_I don’t usually anticipate that far ahead…_
Friday Blast #67
Tags: fridayblast, links, post
Published: 2019-04-13 11:02:08

---
title: Friday Blast #67
published: true
tags: friday_blast,links,post
canonical_url: https://horia141.com/friday-blast-67.html
series: "Friday Blast"
---

[Everything you need to know about networking on AWS (2018)](https://grahamlyons.com/article/everything-you-need-to-know-about-networking-on-aws) - fun and bitesized read about how AWS organises “networks”. Since you’re dealing with IaaS (among many other things), you can set things up at the network level as well. And even if you only want to deal with managed services, you’ll be hit by this. I’m tangentially involved with this stuff, so a refresher is good. Especially one which shows “how things are in real life usually”, like this one.

[OAuth 2.0 and the road to hell (2012)](https://hueniverse.com/oauth-2-0-and-the-road-to-hell-8eec45921529) - I’ve mostly interacted with OAuth through well-defined interfaces, like the Auth0 one. Even then it wasn’t 100% nice. This is a rant / farewell letter to OAuth 2.0 by one of the authors of the specification. A lot of stuff about _what went wrong_ - design by committee mostly.

[User IDs probably shouldn’t be passed around as ints (2018)](https://rachelbythebay.com/w/2018/04/27/uid/) - the logic here is straightforward. Users (or entities) in general should have some notion of identity separate from the primary key of the database system used to store them. This helps with all sorts of things: sharding, security (not allowing folks to guess user ids, especially of really early users), obscurity (not giving insights to competitors about the number of users, widgets etc managed by the system), referencing from external systems, migrations etc. It all comes with some extra cost though: storage space, the need to write more careful code etc.

[Missing the point about microservices - it’s about testing and deploying independently (2018)](https://erikbern.com/2018/06/04/missing-the-point-about-microservices.html) - the title says it all. The “questionable reasons” section is pretty golden. It tackles some of the _obvious strengths_ of the approach which I’d also _not_ encountered in real life and had an inkling were quite bogus - writing in different languages, hard independence as a code separation tool, independent scaling between systems etc.
Install react-native-sentry without react-native link
Tags: react, reactnative, ios, android
Published: 2019-04-05 06:05:01

---
title: Install react-native-sentry without react-native link
published: true
description: 
tags: react, react-native, ios, android
---

[Added]
Sentry has a complete manual integration guide. It might be waste of time for you to read this article!

https://docs.sentry.io/clients/react-native/manual-setup/
[/Added]

[Added again]
Now we can use fully integrated Sentry SDK for React Native:

https://github.com/getsentry/sentry-react-native
[/Added again]


Sentry is a great tool to collect runtime errors.

react-native-sentry is an official package by Sentry. While it is still in Beta, works well.

https://github.com/getsentry/react-native-sentry

Official document uses `react-native link`, but I don't use it as it causes errors very often.

https://docs.sentry.io/clients/react-native/



```
yarn add react-native-sentry
```

# iOS

```
open node_modules/react-native-sentry/ios/
```

Then, manually drug and drop `RNSentry.xcodeproj` to Xcode Library. This pattern is commonly used to install native modules to React Native apps.

See my picture here:

https://github.com/kmagiera/react-native-gesture-handler/issues/205#issuecomment-449900414

Then, add `libRNSentry.a` to `Build phases > Link Binary With Libraries`. Note that you must not add neither `libRNSentryStatic.a` nor `Sentry.framework` which causes build errors.

# Android

Open `android/settings.gradle` and add the following lines:

```gradle
include ':react-native-sentry'
project(':react-native-sentry').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sentry/android')
```

Then, open `android/app/build.gradle` and add the following lines:

```gradle
dependencies {
    compile project(':react-native-sentry')
    // other code here
}
```

Finally, open `android/app/src/main/java/com/nupp1/MainApplication.java` and add the package:

```java
package com.your.app;

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import io.sentry.RNSentryPackage;  // <-- Add this line

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new RNSentryPackage()        // <-- Add this line
      );
    }

    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}
```

I hope this helps you.
GitHub to Azure through CI/CD
Tags: azure, github, devopswebapp
Published: 2019-04-05 05:49:12

---
title: GitHub to Azure through CI/CD
published: true
description: 
tags: #azure #github #devops#webapp
---

In my previous __[article](https://dev.to/ajithk444/host-a-website-on-azure-in-5-minutes-540a)__, we saw how to deploy an app to Microsoft Azure. As a continuation to that, we can see how to deploy the same app from Github to Azure.

__Step 1:__ _Source Control_

Select GitHub and link your account. 

![](https://thepracticaldev.s3.amazonaws.com/i/aqsnmqv6qysc8qcfe9zl.png)

__Step 2:__ _Build Provider

In the next step, select _Kudu Build Server_
![](https://thepracticaldev.s3.amazonaws.com/i/obhal2qe0r8o01p4ortp.png)

__Step 3:__ _Configure Build_

Select the Organization, Repository and Branch of the webapp.
![](https://thepracticaldev.s3.amazonaws.com/i/vi899ume59nkm0juyb0y.png)

__Step 4:__ _Complete CI/CD Setup_

![](https://thepracticaldev.s3.amazonaws.com/i/1a1yl4ysgf8wjy2qakep.png)

__Step 5:__ _Voila!!_
Now the github repo is in sync with the Azure app deployment. 

![](https://thepracticaldev.s3.amazonaws.com/i/8f0zh67chqxnhw4z56yb.png)

Now if you make any change in the repo and commit to the branch deployed, then CI/CD pipelines will push a new build to the Azure app center.

Hope you find this post helpful.

Link to my Previous article on deployment: [Host an App to Azure](https://dev.to/ajithk444/host-a-website-on-azure-in-5-minutes-540a)
Command line shortcuts
Tags: commandline, tools
Published: 2019-04-05 08:06:47

---
title: Command line shortcuts
published: true
tags: command line,tools
canonical_url: https://flaviabastos.ca/2019/04/05/command-line-shortcuts/
---

I normally don’t use many shortcuts because it’s easier to just use my arrows and mouse to navigate than to memorize shortcuts but I am slowly realizing that the time spent on learning a new shortcut pays off.

However, my memory is not that great and if I try to memorize multiple things at once, it’s guaranteed that I will remember zero of them the next day. What I am trying to do instead is to memorize – and use! – one new shortcut per week. That way I can slowly add a new behaviour to my development process.

Here’s a list of shortcuts I am working on:

| CTRL + A | Move the cursor to the beginning of the line. |
| CTRL + E | Move the cursor to the end of the line. |
| CTRL + W | Erase the preceding word. |
| CTRL + U | Erase everything from the cursor to the beginning of line. |
| CTRL + K | Erase everything from the cursor to the end of the line. |
| CTRL + Y | Pasted erased text (if you used CTRL + U or CTRL + K, for example). |
| Arrow up | (or CTRL + P) view the last typed command. I use arrow up all the time but I did’t now that CTRL + P did the same thing! |
| CTRL + L | Clear screen |

_The post [Command line shortcuts](https://wp.me/pa0b0y-3p) was originally published at_ [flaviabastos.ca](https://flaviabastos.ca/)
My Own Beginners Guide To A Career In Tech
Tags: beginners, devrel, evangelist, career
Published: 2019-04-05 05:00:20

---
title: My Own Beginners Guide To A Career In Tech
published: true 
description: How I am going to achieve my goals   
tags: #beginner #developeradvocate #evangelist #career 
---
Let’s start off with, “Hi! I am Estefania Flores” and “you’re probably pronouncing it wrong” (Este-fa-nee-ah). I grew up in the Central Valley, “Where is that?” you might ask. It’s the part of the California that no one talks about, The Gateway to the Sequoias. Sounds exciting right? Lots of cows and the least amount of tech in California. So, who am I? I am a person who loves making connections, helping people understand difficult topics and tech. Recently, I had an epiphany about what I wanted to be when I grow up, a Developer Advocate.

I went to a meetup while living in Silicon Valley, I watched the woman give a lesson whilst still keeping it upbeat and funny. She got everyone involved and made everyone feel comfortable enough to share thoughts and random stories. When I got home that night I looked up what her actual title was, Developer Advocate. The more I researched, the more I was falling in love with the position.

2019 has started my adventure in getting the job I really feel like is for me. Have you ever felt something just click after a long time of walking around aimlessly thinking, “Yeah I’m good at that and I like it so I should probably do it?” that was me, until now. This is pretty much another blog about the process it will take me to get the job I feel like I was made for. So stay tuned, learn more about a stranger from the part of California that you probably didn’t know existed.

I am going to give you the struggles and not sugarcoat things. Life is rough, people struggle but, if it were easy, it would be boring so the struggles make it worth it. At least give you fun stories to tell friends, like the one time I rode my bike to school in high school and ended up losing control of my bike and slamming into a bush, dust flew everywhere and I was embarrassed but now I laugh.

It’ll be fun, I promise, you’ll get some ridiculous laughs and maybe, hopefully, I’ll get a job.
Microsoft Flow – A Powerful Way to Automate Workflows
Tags: microsoftflow, automateworkflow, microsoftworkflows, dynamic365
Published: 2019-04-05 03:59:32

---
title: Microsoft Flow – A Powerful Way to Automate Workflows
published: True
description: Want to know how to automate workflow with #MicrosoftFlow? Here is a step-by-step example!  
tags: microsoft flow, automate workflow, microsoft work flows, dynamic365
---

Microsoft Flow is a cloud-based service that allows you to create automated workflows across your favorite applications and platforms.  This cloud based services enables you to work smarter by creating automated workflows across your apps and services. It automates approvals, data syncing between systems, push notifications and much more.
Using Dynamics 365 Connector, you can connect to a Flow that starts when an event occurs in Dynamics 365 which will then performs actions in Dynamic 365. Connectors performs a very valuable role in Dynamics 365. Do you like to know more on this?
Check here :- https://www.bridge-global.com/blog/microsoft-flow-a-powerful-way-to-automate-workflows/
How to set up a 20-minute computer break on a Mac
Tags: eyestrain, macos, scripting
Published: 2019-04-05 03:46:58



---
title: How to set up a 20-minute computer break on a Mac
published: true
description: Implement the 20-20-20 rule for lessening eyestrain
tags: eyestrain,macos,scripting
---

DO YOU keep meaning to start following the [20-20-20 rule](https://opto.ca/health-library/the-20-20-20-rule) that your eye doctor told you about? Here's a tutorial for setting up your Mac to remind you to take that break every twenty minutes. It consists of the following:

- A simple shell script that shows the notification
- A Mac OS [launchd](http://www.launchd.info/) agent that sets up the recurring reminder
- Commands to initialize the agent.

First, the shell script:

```sh
# ~/scripts/twenty.sh
osascript -e 'display notification "Take a break!" with title "20-20-20 Rule"'
```

This uses the Mac's built-in notification system to show the message reminding you to take a break.

Next, the launchd agent (this must be saved in `~/Library/LaunchAgents/twenty.plist`):

```xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>Label</key>
    <string>twenty</string>

    <key>ProgramArguments</key>
    <array>
        <string>sh</string>
        <string>/Users/YOURACCOUNT/scripts/twenty.sh</string>
    </array>

    <key>StartInterval</key>
    <integer>1200</integer>
</dict>
</plist>
```

(Remember to change `YOURACCOUNT` to your actual user account!)

And the commands:

```
$ launchctl load ~/Library/LaunchAgents/twenty.plist 
$ launchctl start twenty
```

And voila, you now have an automated reminder on your Mac to take a twenty-minute break and help lessen eyestrain.

If you ever want to stop the agent:

    $ launchctl stop twenty

And if you ever want to change the agent settings, you'll additionally need to _unload_ the agent and then reload and restart it to pick up the changes:

    $ launchctl unload ~/Library/LaunchAgents/twenty.plist

This should be portable to other OSs:

- Linux: show desktop notifications with [notify-send](http://manpages.ubuntu.com/manpages/focal/en/man1/notify-send.1.html) and manage the notification schedule with a [systemd timer](https://www.freedesktop.org/software/systemd/man/systemd.timer.html)
- Windows: show desktop notifications with [Windows Script Host](https://stackoverflow.com/questions/3106806/how-to-show-a-popup-without-a-browser) and manage the schedule with [Task Scheduler](https://docs.microsoft.com/en-us/windows/desktop/taskschd/task-scheduler-start-page).
My Effect Node got nominated by Webbys Top5 WebSite Tech Achievement YAY!
Tags: webbys, webgl, glsl, javascript
Published: 2019-04-05 01:04:42

---
title: My Effect Node got nominated by Webbys Top5 WebSite Tech Achievement YAY!
published: true
description: npm -i enos;
tags: webbys, WebGL, GLSL, JavaScript
---

#OH MY EffectNode.com

I was so surprised that I could even win the Webby Nomination.

![Effect Node](https://thepracticaldev.s3.amazonaws.com/i/j29xxw81kyq48umpg7hg.png)

[Link To Webby Vote](https://vote.webbyawards.com/PublicVoting#/2019/websites/features-design/technical-achievement)

Please feel free to try the library npm -i enos; it's fully open sourced on github and also front end only.

Enjoy! :)
woop woop! :D 

[https://github.com/EffectNode/EffectNode-Lib](https://github.com/EffectNode/EffectNode-Lib)