teleren/devto huggingface dataset:
NPM vs. Deno
Tags: npm, deno
Published: 2020-07-13 16:01:21

**Node Packages and the Node Package Manager**

- What we get on any given NPM install is not known fully, way too many dependencies.
- What we get security wise is not known as there's no security certification rules, we get literally anything someone wants to inject.
- There's no guarantee that any package we use has any future maintenance in mind. 
- NPM Install uses the Package-lock file. This reduces our chances of getting what we want unless we know how to deal with it, like delete the package-lock file. 
- NPM clean-install works but due to package-lock file, what we get can be different than what we want. 
- Gaining full knowledge of NPM Installs, packages and package-lock files is an obscure art. Things do not come to light until days or weeks of fiddling around and getting to know the secrets. 
- The -D -g save options are confusing, instead there should be a -P for this project.
- Blowing away the node_modules folder either locally or globally just to regain control is crazy! Let the compiler tree-shake.
- Overall grade for NPM is a C- or D+. No professor would ever rate it higher knowing these potential nasty side effects. 

**Deno**

- I can't grade it at all because my only knowledge is from reading what it does.
- I like the concept of security first.
- I like the concept of using URLs to point to a single library.
- I like the idea of getting away from Node.
- It makes me wonder do we need the 200mb of Node package baggage just to do things we should know how to do and have certified safe libraries ready to go?

There's too much to like about Deno and at least 3 strikes against NPM, question is, have you reached the bottom of the 9th?  I'm at least in the bottom on the 8th myself.

**Summary**

Maybe it's time to break our Opium Addiction to NPM 3rd party packages outside of Angular, React and Vue (ok perhaps Material).  Everything else should be our own reusable libraries. We can do this with NPM or we can use a Security first architecture named Deno.

JWP 2020
Data Types in Javascript
Tags: javascript
Published: 2020-07-13 16:00:19

#Data Types In Javascript

There are 3 types of data types in Javascript: primitive and composite and data types. 
Primitive data types are simple types like "Strings", Number, Boolean, _undefined_ and _null_. Composite data are Arrays, Objects and Functions. 
Primitive data types are those that can hold only one type of value and cannot be subject to use of a methods, whereas objects and arrays can hold multiple data units and all the methods and functions are using objects as their arguments. Everything is an Object in Javascript and that's why Javascript is called an _Object Oriented Language_
However, some of the sources distinguish 3 types of data separating _undefined_ and _null_ as a "special" data type. These two types can be confusing, but to put it simply, _undefined_ means that a variable was never defined in the code, and null means that there is no value.
Adding repositories to sources.list.d manually
Tags: ubuntu
Published: 2020-07-13 15:47:58

It's pretty common to find instructions for adding an deb repository source as a shell script. They normally append stuff to `/etc/apt/sources.list`, while I prefer creating a separate file for each repo on `/etc/apt/sources.list.d`.

Here's how I do:

1\. Create a `/etc/apt/sources.list.d/{repo name}.list` file with its content being the repository source (some at the end of this post):

```
sudo vim /etc/apt/sources.list.d/{repo name}.list
```

2\. Download the repo GPG key (as text):

```
curl {gpg key url} > {repo name}
```

3\. Convert it to a `.gpg` (binary):

```
gpg --dearmor {repo name}
```

4\. Delete the original file and move the `.gpg` one to `/etc/apt/trusted.gpg.d/`:

```
rm {repo name} && sudo mv {repo name}.gpg /etc/apt/trusted.gpg.d/
```

Now you can `sudo apt update` and `sudo apt install {your package}`.

Here's some of my repos (Ubuntu 20.04):

* [Dropbox](https://www.dropbox.com/install-linux):
  * `deb [arch=i386,amd64] http://linux.dropbox.com/ubuntu disco main`
  * https://linux.dropbox.com/ubuntu/dists/disco/Release.gpg
* [Microsoft](https://docs.microsoft.com/en-us/windows-server/administration/linux-package-repository-for-microsoft-software) (for code and dotnet):
  * `deb [arch=amd64,arm64,armhf] https://packages.microsoft.com/ubuntu/22.04/prod jammy main`
  * https://packages.microsoft.com/keys/microsoft.asc
* [NodeSource](https://github.com/nodesource/distributions) (for node and npm):
  * `deb https://deb.nodesource.com/node_14.x focal main`
  * https://deb.nodesource.com/gpgkey/nodesource.gpg.key
* [Libcontainers](https://podman.io/getting-started/installation.html) (for buildah, podman, and skopeo):
  * `deb https://download.opensuse.org/repositories/devel:/kubic:/libcontainers:/stable/xUbuntu_20.04/ /`
  * https://download.opensuse.org/repositories/devel:/kubic:/libcontainers:/stable/xUbuntu_20.04/Release.gpg
* [Libretro](https://launchpad.net/~libretro/+archive/ubuntu/stable) (for RetroArch):
  * `deb http://ppa.launchpad.net/libretro/stable/ubuntu jammy main`
  * See "Signing key" in "Technical details about this PPA" for the GPG key.
* [AppImageLauncher](https://launchpad.net/~appimagelauncher-team/+archive/ubuntu/stable):
  * `deb https://ppa.launchpadcontent.net/appimagelauncher-team/stable/ubuntu jammy main`
  * See "Signing key" in "Technical details about this PPA" for the GPG key.
{Git fun🎭}
Tags: github, git
Published: 2020-07-13 15:35:51

As she walked down the street, he looked at her, there and then felt that spark✴️.
`"{git init}"` he said for it was a journey he was willing to take.

`"{git status}?"` He asked, and surprised he was, she had no master, no one she was planning to commit to.

With a little courage `"{git config}"` with his name he began.

The two branches were perfect for each other no conflict one would say, `{git add .}` to the many things they had in common.

`{git log}` over time and they were old enough to `{git merge}`, with too many moments staged together. A simple wedding was all they needed.

`{git push}` with the plan they began and the commitment was successful.`{git config}`  was again needed for her name had changed.

`{git branch}` came soon enough and they now had a family of four. Ten years past and everything was good until `{git checkout}` happened.

She was tired of having a master and `{git diff}`, she felt the need to find someone different.`{git fork}` the new guy did, with no hesitation and soon `{git request-pull}` as expected a divorce had been filed.

He was devastated. Left alone with his kids but what choice did he have, `{git merge}` he had to, for all he wanted was to be her `origin`, but it was no more. 

Everyday `{git log}` into the past never knowing where he went wrong💔.
oto.ai introduces SDK for audio processing
Tags: datascience, audio, sdk, ai
Published: 2020-07-13 15:35:29

If you work with audio check out https://sdk.oto.ai/demo/. We have our SDK in alpha and are happy to give out trial API keys to test our product. DM me if you are interested or go to https://www.oto.ai/request-demo.

Docs: https://sdk.oto.ai/docs/introduction/
Using Environment Variables in NodeJS, and why we want to use them.
Tags: node, environment, security, variables
Published: 2020-07-13 15:33:25

Environment variables are basically variables you stored on your own machines, instead stated directly in your source codes.

You can think it in this way, instead of stating a variable in the source codes like the following.
```javascript
let name = "XinYang-YXY"
```

You can store the variable and its value on your own machine and import the variable to your source codes like the following
```javascript
process.env.name
```

But why we want to do so? Isn't it an extra step? One simple but critical reason is SECURITY. 

Imagine uploading your source codes to Github and open source it. People around the world can know all your API keys easily by just looking through your source codes. 

If they are malicious, they can use your API keys for their own usage. And you have to pay for all the requests they generated using your API keys. You definitely don't want that to happen to you.

That is why you want to use environment variables. When your source codes running locally, it is able to use import codes to import the API key value into your source codes and carry out the task. 

When the source codes are uploaded to Github, people can only see the import codes and don't know what is your API key. Isn't it amazing?

Now I will teach you how to use environment variables inside your NodeJS application.

First, you will need to install an npm package called 'dotenv'
```npm
npm install dotenv
```

Second, you need to create a dotfile aka a hidden file called '.env' at the root of your application. This is the file where you place all your environment variables - all your little secrets.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2qyy2i5001c6qhli6e86.png)

Third, you can place state all your environment variables inside the dotfile like the following
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1neyckub1zy4vrhyuhrs.png)

After that, it is time to import the environment variables into your source codes! Open the file you need to use the values stored in the environment variables.
```javascript
require("dotenv").config(); // Import the .env file you created at the root of the project
module.exports = {
	host: process.env.DBHOST, // same as host: "mydb.com"
	database: process.env.DBNAME, // same as host: "db"
	username: process.env.DBUSER, // same as host: "admin"
	password: process.env.DBPASS, // same as host: "mypassword"
	
};
```

When you upload your source codes to Github, the '.env' file is by default not uploaded. So all your little secretes can stay private!

Well done! That is all you need to do to create and use environment variables in your NodeJS project. Feel free to comment below if you have any questions. Have fun hacking!
Reading, Writing, and Arithmetic Operators :)
Published: 2020-07-13 15:31:57

### Reading Code~

I think everyone would agree that the ability to read code is imperative to being able to write good code. It has been just recently that I personally have realized how "breaking down" code in my own words has helped me become a better aspiring developer and student.

### How I read code~

In the beginning, I had heard that before you begin to write code, you should at least know how to read it. I thought that maybe the syntax or keywords may be the most important part of that process. It turns out I was wrong 👎

Don't get me wrong! Syntax and keywords are super important! However, the LOGIC behind syntax is what I really wanted to know...

As a soldier, it was imperative that complex concepts be "broken down" into smaller, easy to digest concepts so that every other soldier could understand, regardless of their education level. So when I read code to myself or out loud to anyone else, it looks like this.. ⬇️

### A simple example


// a little JS

document.querySelector('div').addEventListener('click', myFunction);


In this short example code snippet, I try to take the entire idea into account and find myself asking the question

### What does the dev want this code to do???

Look at the elements Dannohhh! Looks like we're working with some HTML elemnts! Sweet! I know a div element is about to be manipulated in some way. because we're "grabbing" it with a querySelector() method. Perfect, now lets do something with the div! Maybe we want to addEventListener?? YUP! moving on, what are we going to listen for? A CLICK event. And finally, what's going to happen after that 'click'? Well, it turns out that myFunction is going to happen!

### So in my 🧠~

This says to me: Dannohhh, pay attention! This code is going to grab the 'div' element from the DOM, and listen for a click, when the div is clicked, myFunction will be executed! Likely causing AWESOMENESS to happen!

> Thank you so much for reading and hopefully this helps someone!

### How do YOU read code?
Tools for Infrastructure Engineers
Tags: beginners, cloud, inthirtyseconds, aws
Published: 2020-07-13 15:31:33

All links are available on original post @ https://findingthings.xyz/curated-list-of-utilities-for-hosting-engineers

If you are an infrastructure engineer or a hosting admin , or work anything remote , you might love these tools which will make your life easier.. [Part I]

<b>DNS

There are many DNS checkers out there, but here is what i use..

<b>NSLOOKUP

 – is a network administration command-line tool available in many computer operating systems for querying the Domain Name System to obtain domain name or IP address mapping, or other DNS records. – usage

<b>DIG 

– is a tool for querying DNS nameservers for information about host addresses, mail exchanges, nameservers, and related information – usage

<b>Whatsmydns.net

– whatsmydns.net lets you instantly perform a DNS lookup to check a domain name’s current IP address and DNS record information against multiple name servers located in different parts of the world.

<b>mxtoolbox 

– mxtoolbox lets you search all of your MX record, DNS, blacklist and SMTP diagnostics in one integrated tool.  Input a domain name or IP Address or Host Name. Links in the results will guide you to other relevant tools and information.  And you’ll have a chronological history of your results.

<b>Redirects/Rewrites

<b>Rewrite Checker 

– want to check whether there is a any redirect between a source and destination, here is a simple tool

<b>Bulk Checker 

– Want to check 100’s of website’s status codes etc? here is the tool just for you – Easily check status codes, response headers, and redirect chains.

<b>Redirect Path 

– Check the redirect tree right on your browser [ Chrome ] [Firefox]

<b>cURL 

– a wonderful utility to check a loads of things including redirects – usage, usage2
How I made $11,673 in 5 days with an open-source project
Tags: laravel, saas, opensource, php
Published: 2020-07-13 15:15:08

At the end of June, I launched a business-focused extension to my open-source project. **[The multi-tenant SaaS boilerplate for Laravel](https://tenancyforlaravel.com/saas-boilerplate/)**.

The sales completely exceeded my expectations.

$4,980 within the first 24 hours and $11,673 within the first 5 days.

🤯

Here’s the story leading to this.


Full article on my blog: https://samuelstancl.me/blog/how-i-made-11k-in-5-days-with-an-open-source-project/
Our commitment to give you a professional mobile application development work
Published: 2020-07-13 15:02:20

WONDERMOUSE TECHNOLOGIES has always been seen as one of the strongest and most respected mobile device development company in Noida. WONDERMOUSE Innovations All this is offered to customers and companies alike through integrated services. Developing mobile applications across major platforms provides companies with a competitive advantage, one that's desperately needed to make boardroom ideas a reality. We plan to deliver according to the wishes of our clients. As an established mobile app development company, we are both enriching and making mobile apps attractive with web solutions, incorporating state-of-the-art technology and versatile features to seamless UX. We want to develop attractive mobile applications and web solutions, keeping a strong vision in mind, which can increase engagement and lead to higher conversions with maximum ROI.
Our services
That includes iPhone and iPad app creation. Our design team is refining your creative framework idea to develop an enjoyable user interface to completely exploit Apple 's original platform. Our team at <a href="https://www.wondermouse.in/service/ios-app-development-in-noida/">iOS App Development Company in Noida</a> is also well versed with Apple's technology to integrate iOS features other than Touch ID, Apple Pay.
With Android Software Development Kit ( SDK), Android Media API, NFC Integration and other related technologies aside from Geo-Fencing, OpenGL, 3D Graphics, and Android Security Architecture, our developers have the skills to build a strong Android app. We also provide Android tablet application development to customers at <a href="https://www.wondermouse.in/android-app-development-company-delhi/">android app development company Delhi</a>. Our Android app development high-tech giants along with our web application development experts are always excited to develop intuitive, customized and high-quality Android apps with an edge performance. 
Summary
With strong integration into the business of our client, we establish long-term, effective partnerships. Our cost-effective services ensure customers get full return on investment. To give you seamless technical support, we maintain seamless communication via chat, mail, and phone. During the project process we follow ISO compliant procedures to maintain high standards.
The Joy of UX: User Experience and Interactive Design for Developers
Tags: development, frontend, career
Published: 2020-07-13 14:48:01

---
title: The Joy of UX: User Experience and Interactive Design for Developers
published: true
description: If you are an application developer, you should read this book.
tags: development,frontend,career
---

I recently finished the book "The Joy of UX: User Experience and Interactive Design for Developers" by David Platt. I recommend it to anyone looking to make better software. You can buy it at [Amazon](https://www.amazon.com/Joy-Experience-Interactive-Developers-Usability-ebook/dp/B01F7SBPJO), or if you have an O'Reilly learning account, you can read it "for free."

When a lot of people hear design (myself included), their first thought is about the look and feel of the front end. Things like which typefaces and color schemes I should use to make the front end easy on the eyes. While that is important for having a polished and professional-looking product, that is not the subject of this book.

The main idea I got from the book is that developers are not the primary users of the systems that we create (unless you are building an IDE or dev tools). The experience of using our software suffers due to our bias as developers. Improving the experience helps our apps get out of the way of our customers and let them accomplish their goals. Doing so makes them happier, and in turn, helps our bottom line.

In the book, David lays out the main principles of good user experience and backs them up with concrete examples from real websites and systems to make the principles relatable. I am not going to re-hash all the tenets and tidbits from the book, but here are the ones that stuck with me:
* Start with reasonable defaults
* Don't make your users think or do your work
* Lead the witness

If this topic interests you, I also recommend the work the [UX Design for Developers](https://www.linkedin.com/learning/ux-design-for-developers) course on LinkedIn learning by Billy Hollis.

If you have a resource for this topic that you recommend, please share it below.
Made My First Game Looking For Feedback
Tags: python, beginners, gamedev, showdev
Published: 2020-07-13 14:42:26

Hello everyone o/ 
Short introduction i am learning Python since february and i have been working on this game since a week~. I am looking for some feedback about the project. Since game is already basic what im looking for is;

- Project layout
- Code quality
- Github & Readme layout

Also if you happen to have feature suggestions i would like to hear those as well !

[Github Link](https://github.com/Gerile3/HangThePyMan)
How to find the full call stack for a line inside a functional component?
Tags: react
Published: 2020-07-13 14:40:54

I have a component called Field that is behaving strangely. In some placed Where it is used, it receives, besides other props, the onFocus and onBlur props, but inside it these 2 props are null (the default value set with PropTypes). I put a breakpoint inside its render method and there it seems to receive them as null. So I try to find where that component is used. The Chrome DevTools display just a partial async call stack so I think I will use a component that has a constructor instead of a functional component and put a breakpoint inside the c-tor. I will post here updates if I solve this issue. If you have any ideas on how to solve the issue please let me know here.

Thanks.
Rate my GitHub Profile README
Tags: github, showdev, design
Published: 2020-07-13 14:34:17

As GitHub recently launched their `README.md` feature for Profiles so I decided to make one too. I really putted all my efforts to make this small and beautiful. I want people to rate this and gimme feedback about this. If I can do more edits on it!

![Profile](https://dev-to-uploads.s3.amazonaws.com/i/esfzqljs1xkygwz97c16.png)
![Profile](https://dev-to-uploads.s3.amazonaws.com/i/l53c9h8qevwvfcvrbq5l.png)
Can you help me review my MEN stack app?
Tags: help, node, mongodb, review
Published: 2020-07-13 14:32:34

**You can find the app [here](https://github.com/abhijit-hota/Node-Notes).**

I've been learning Node.js for the past few months and I recently deployed my first MEN stack app on Heroku. The app lacks a UI as I wanted to focus on the backend part.

The reason I'm writing this post is because I want to:

- Ensure that I am following, if not all, but some of the best Node.js practices.
- Know how well my approaches to the problems are and how can I improve them. Feedback on the directory structure, code modularisation, styling, etc. will be helpful.
- Know what can I do to make my app more of a 'production-level' app.
- Know something that I don't know I don't know!

The `README` file in the [GitHub repository](https://github.com/abhijit-hota/Node-Notes) for the app provides a good overview of the app. 

Any help will be appreciated 😄.
----
P.S. This is my first post on Dev.to