teleren/devto huggingface dataset:
Local NodeJS Environment Variables
Published: 2021-08-25 14:48:55

---
title: Local NodeJS Environment Variables
published: true
date: 2021-08-23 17:24:05 UTC
tags: 
canonical_url: https://livecode247.com/local-nodejs-environment-variables
---

The [DotEnv](https://www.npmjs.com/package/dotenv) is an NPM package which allows you to load local NodeJS Environment Variables in your project. It is based on [The Twelve-Factor App Methodology](https://12factor.net/config) - Storing configuration in environment separate from code.

## Installation

The installation is as easy as any other NPM Package

```
npm install dotenv
# YARN
yarn add dotenv

```

## Setup

Create a `.env` file in your root directory. Add any env vars you want in that file. For eg.

```
DB_HOST=localhost
DB_PORT=3306
DB_USER=root
DB_PASSWORD=password

```

## Load the variables

Now in your starting JS file (which you run using `node <filename>.js`) add the following line of code

```
require('dotenv').config()

```

What this does is, it imports the `dotenv` module using the CommonJS syntax and then calls the `config` function on it. This loads up the dotenv variables in the `.env` file created earlier. You can also pass an object as an argument into it which you can find [here](https://www.npmjs.com/package/dotenv#options)

## Use the variables

You can use the variables inside that file now like any other env variable using the Global Object `process` and the object `env` inside it in the following way:

```
console.log(process.env.DB_HOST)

```

Note that you can use the env variables inside the .env file only after calling the config function in the dotenv module. So the above line of code needs to come after the `require('dotenv').config()` function.
Make-up of a function
Tags: programming, javascript
Published: 2021-08-23 17:54:11

Functions or ‘procedures’ in some programming languages and ‘methods’ in most OOP languages are a set of instructions bundled together to achieve a specific outcome.

Functions are a good way to avoid repetition of code in programs.

We can Pass some values (parameters or arguments) to them and return some calculated values from them as well.

Functions act as a basic building block for any program and it is very important that we write functions in a right manner that the next person can easily understand.

what is right way? well if you go on exploring you might find a lot of articles as to how to write a function, here is my piece on what a well structured function should look like.

```javascript
//naming a function is the most important task, besides the actual functionality😜
function nameThatDescribesWhatTheFunctionDoes (catSound, dog){
  //defaulting arguments, avoids dealing with undefined arguments
  catSound = catSound || "meow"

  //type checking or error handling
  if(!dog || typeof(dog) !== object || Array.isArray(dog)){
    console.warn('Function requires dog argument to be an object');
    return false
  }

  // Returning early, to reduce the CPU cycles or Memory usage
  if(someScenarioThatNegatesToRunThisFunction){
    return true
  }

  //Declare the variables that will be used in the funciton logic, this avoid the getting the values by chaining feilds
  //and make the code more readable
  const eldestPupper = dog.children[0]
  let isCat = false
  let {sam,tom} = dog.names

  //Function logic section(the actual point of the function)
  if(eldestPupper.sound === catSound){
    isCat = true
  }

  //Returning the result of logic
  return isCat;

}
```
There are many sections separated by comments in this function, each section can be skipped if not needed or can be much longer as well depending on the use-case, But this is generally the order you go in.

You might have several “early returns” in the “Function logic section” depending on the length.

Though it is possible to default arguments in the function definition (cat = “meow”, dog) , this violates the “Clean code” principle: “One Idea Per Line”.

This keeps the definitions short and clean, easier to scan quickly when functions are collapsed, but this is my opinion and you might like to default your arguments in a different way.

Why i emphasised on defaulting arguments inside the function is because it allows for much more complex argument defaults, like when you have a detailed object.

Either way, This is how i feel a function should be written and you might have some other ideas, feel free to share in comments.
Cómo personalizar tu Colección en OpenSea desde Solidity
Tags: blockchain, nft, nfts, solidity
Published: 2021-08-23 17:39:57

---
title: Cómo personalizar tu Colección en OpenSea desde Solidity
published: true
description:
tags: #blockchain, #nft, #nfts, #solidity
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/up6tlotaij08okmgx848.png
---

Al crear un contrato, OpenSea automáticamente crea una colección por nosotros. Pero para poder editarla debemos implementar el contrato de Ownable de Openzeppelin desde Solidity.

OpenSea nos permite personalizar y configurar nuestra página de nuestra colección.

{% youtube 0gLS060VVy4 %}

## 1. Lanza tu smart contract ERC-721

Este contrato fue creado en base a nuestro tutorial sobre [tutorial sobre NFTs](https://dev.to/turupawn/hola-mundo-nft-390j).

Observarás que importamos el `Ownable.sol` de OpenZeppelin lo implementamos en nuestro contrato. Esto no solo habilita el modo edición en OpenSea sino que también habilita el modifier `onlyOwner` que restringe el uso de las funciones seleccionadas para que solo puedan ser ejecutadas por el address creador o a quien pertenezca el contrato.

```solidity
// SPDX-License-Identifier: MIT
pragma solidity 0.8.7;

import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
import "@openzeppelin/contracts/access/Ownable.sol";

contract MyNFT is ERC721, Ownable {
    uint256 token_count;
    
    function tokenURI(uint256 tokenId) public view virtual override returns (string memory) {
        require(_exists(tokenId), "ERC721Metadata: URI query for nonexistent token");
        return "https://raw.githubusercontent.com/Turupawn/NFTest/main/logo_big.png";
    }

    function mintNFT(address to) public onlyOwner
    {
        token_count  += 1;
        _mint(to, token_count);
    }

    constructor() ERC721("My NFT", "MNFT") {}
}
```

## 2. Editar tu colección

Una vez lanzado el contrato crea al menos un NFT para que la colección aparezca en OpenSea. Si tu colección no aparece de inmediato puedes esperar un rato o probar desde [este link en testnet](https://testnets.opensea.io/get-listed/step-two) o este desde [mainnet](https://testnets.opensea.io/get-listed/step-two).

Esto te llevará a la página de tu colección. Observarás que ahora puedes editarla.

**Gracias por ver este tutorial!**

Sígueme en dev.to y en [Youtube](https://www.youtube.com/channel/UCNRB4tgwp09z4391JRjEsRA) para todo lo relacionado al desarrollo en Blockchain en Español.
Tips to grow your YouTube channel
Tags: devrel, youtube, career, womenintech
Published: 2021-08-23 17:36:57

Over the last year or two I have spent a lot of time trying to figure out how to grow my videos and YouTube channel.  In this video I share some tips that I use for each video. 

The last thing anyone should do is spend a lot of time creating content and not get the attention it deserves.  Do let me know what you think of this video and my tips!

{% youtube KIYg11FMz4c %}
C++ Flashcards
Tags: cpp, programming, performance, books
Published: 2021-08-23 17:28:02

I am thinking about creating flashcards for C++. I have prepared a concept preview below. What do you think about it?

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7nb7fplf7gporvwihhpy.png)

When ready, it will b available here: [C++ flashcards](https://summonthejson.com)
Don't use Function Components, use Void Function Components
Tags: react, typescript, tutorial, webdev
Published: 2021-08-23 17:09:58

One thing you'll come across when using Typescript with React is giving types to your components.

Most places I've seen will use React.FC for this:
```tsx
const MyButton: React.FC<MyButtonProps> = ({prop1, prop2}) => {
  //...
}
```

And while React.FC is an actual type, most uses of it are incorrect.

This becomes clear when you look at its [definition][1]:

```tsx
type FC<P = {}> = FunctionComponent<P>;

interface FunctionComponent<P = {}> {
    (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
    propTypes?: WeakValidationMap<P> | undefined;
    contextTypes?: ValidationMap<any> | undefined;
    defaultProps?: Partial<P> | undefined;
    displayName?: string | undefined;
}
```
The notable thing here is that `props` gets `PropsWithChilren`, which means that you component will be able to take children in adition to your other props you passed in.

On the other hand, there also exists [Void Function Components][2] or VFCs:
```tsx
type VFC<P = {}> = VoidFunctionComponent<P>;

interface VoidFunctionComponent<P = {}> {
    (props: P, context?: any): ReactElement<any, any> | null;
    propTypes?: WeakValidationMap<P>;
    contextTypes?: ValidationMap<any>;
    defaultProps?: Partial<P>;
    displayName?: string;
}
```
The only difference between this and `FC` is that when you tell it that `P` is its props, it will use just that, and it won't add an aditional `children` props to the final type.

### conclusion

If you have some sort of pannel component or an abstract component which takes in children to render, then yeah, `React.FC` is the type for those.

But if the component you have isn't meant to have any more children, like a custom button or a custom card or input or whatever else, then using `React.VFC` is more correct.

[1]: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L541-L549

[2]: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/f4f453b018d0d512cde50efb6db35fd3f8a001ab/types/react/index.d.ts#L551-L559
Developers - Free learning resources & get certified
Tags: javascript, python, webdev, ruby
Published: 2021-08-23 17:08:59

Many people get stuck while learning **how to code** cause they don't find good resources. *And I was also in the same position few years ago.* So, here are few free resources to learn how to code and some of them even offer free certificate while some charges(for certificate only).

## Let's start:


### 1. [Web.dev](https://web.dev/learn/css/)
Official google developers teach you CSS with great examples. They even do CSS podcasts. 

### 2. [HarvardX](https://online-learning.harvard.edu/subject/programming)
Here you find great tutorials from Harvard professors for free.

### 3. [Codecademy.com](https://www.codecademy.com/courses/introduction-to-javascript/)
Learn javascript from introduction to asynchronous JavaScript for free. You get a integrated code editor while learning and you get some quizes also to test what you've learned.

### 4. [MIT Openlearning library](https://openlearning.mit.edu/courses-programs/open-learning-library)
Another top university offering free courses ranging from Mathematics for CS to Machine Learning.

### 5. [FreeCodeCamp](https://www.freecodecamp.org/)
A great learning resource that is completely free. Get courses from learning responsive web design to data visualization and machine learning. They even have [YouTube channel](https://www.youtube.com/c/Freecodecamp/videos) with over 4M subscribers.

### 6. [TheOdinProject](https://www.theodinproject.com/)
Their full stack curriculum is free and supported by a passionate open source community. Learn fullstack web development with JavaScript and Ruby on Rails.

### 7. [Stanford online](https://web.stanford.edu/class/cs253/)
Another well known top university for Computer Science located near Silicon Valley. Definitely worth a visit.

### 8. [Khanacademy](https://Khanacademy.org)
Khan Academy is an American non-profit educational organization that provides free courses for learners who wants to learn Computer programming, Science, Maths and many more.

### 9. [Edx.org](https://www.edx.org/)
Yeah, they do provide courses from Harvard, MIT, Stanford but they also provide courses from other great universities. Like this one [Introduction to linux](https://www.edx.org/course/introduction-to-linux).

### 10. [Coursera.org](https://www.coursera.org/collections/popular-free-courses)
They collaborate with 200+ leading universities and companies and provide great contents and programs. You can audit most courses for free but you have to pay for certificate.


### At end I want to mention 3 more:
- [Youtube](https://www.youtube.com)
- [Hackreactor](https://www.hackreactor.com/)
- [Openclassrooms](https://openclassrooms.com/en/courses)

**Hope you liked these resources.** If you know other resources then *let me know about them in comment*. And what will you do with certificate - *nothing*. So I recommend getting valuable knowledge.
How to add multiple routers in a node application without using app.use() for each router ?
Tags: node, webdev, approuter
Published: 2021-08-23 16:55:17

In node.js, when we have multiple *Express.Router* written in a separate file to enhance modularization we need to import each route file into the application server file and add lots of *app.use()* statements.  Now, if we add a new router we need to remember to add that too in the file where the application server is written.

Let's assume there is a routes folder where the routes are defined for *user* and *order* handling separately in separate files. in application server file we need to use *app.use* two times. imagine if our routers increase the solution will not be very good. 

we can add a small code snippet in our application server JS file that will automatically import and add all of the routes in the application.
In [this blog](https://www.cloudnativemaster.com/post/how-to-add-multiple-routers-in-a-node-application-without-using-app-use-for-each-router) I gave an example of the initial approach and also showed how that code snippet looks like.
HNGi8 so far!
Published: 2021-08-23 16:49:25

<p>When I heard of HNG internship, I was happy because I've been waiting for such an opportunity for a very long time now and thanks to Almighty, it's been a week now and the experience gained so far is something to be made known.</p>

<p>Meeting different people that I have learnt one or two things from and also the mentor are always there to guide and spare time for you  with whatever you may need.</p>

<p>Most importantly, this internship has not only focused on making us better developers but also be able to keep to time and <b> adhere to insturctions or rules given </b>. So to say,it also adds to your character.</p>

<p> Currently we're onto forming teams and working onprojects and I hope I'd join a team soon. Thanks HNG!!! </p>
🦋Pacman Reading Progressbar
Tags: showdev, flutter, programming, design
Published: 2021-08-23 16:41:05

Hi there dev community,

I've recently been thinking about creating a Pacman-style reading progress indicator with Flutter.
I'll be happy to provide the code in the coming days upon request.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zxqx0cd25lm99qn391y1.gif)

---


[Buy me a Sunny Day](https://www.buymeacoffee.com/lucianojung) if you want to support this kind of content.
My HNG experience so far
Published: 2021-08-23 16:20:33

MY HNGi8 X 14G EXPERIENCE SO FAR.
This month, I started incarcerating with HNGi8 X 14G. Joining HNGi8 X 14G is my first practicum experience, and it's a lot farther than I supposed it would be — in the trim way possible. So far, I've before fulfilled 2 tasks, and I've learned farther about how HNGi8 X 14G operates and the momentousness of hewing to laid down rules. Presently, we're in the process of gang selection and it has been heated for the tutors due the fact that a lot of interns want to share. Thereby leaving them a lot of dispatches to attend to.
Work that I've done so far includes writing a blog about my meanings and expectances for the practicum duration, and also creating creating a roundup go-between with fundamental HTML and CSS. Have also learnt how to host a webpage on netlify and use GIThub efficiently.
As for expectances for the rest of my practicum, I'm thrilled to be learning farther every day. I've been working solo and also with cronies, and I know that I would n’t have gotten as important experience as when I study alone. I'll give it my all to make it to the final stages.
GOALS FOR KODE CAMP INTERNSHIP
Published: 2021-08-23 16:17:22

Having joined the just concluded Zuri training which built my foundation in UI/UX (User Interface/ User Experience) design, partaking in the KODE CAMP Internship is another bigger step as a UI/ UX Designer and a dream come true.

You might be wondering, what's KODE CAMP all about?  Kodecamp was established in 2018 to provide affordable digital solution to school's (K-12) all operations and academic processes to improve the efficiency and transparency in the system.

 KODE CAMP Internship is a long running, large scale virtual internship for people learning to code and design. It focuses on the post-training phase, and creates a virtual work environment for participants.

This Internship is fast paced and challenging, and helps people learn how to work in teams, deal with pressure and quickly expand their knowledge.

According to statistics, those who commit their goal-setting on paper actually achieved more compared to those who were simply asked to think of what they wanted to accomplish in life.  

Having this in mind I have decided to be specific about my goals for the KODE CAMP Internship. 

Some of these goals for the Internship include:
  1. Enhance and sharpen my design skills on figma in order to create exciting user interfaces for a greater User experience. 

  2. Further understanding and implementation of design principles to real life situation.

  3. Connect and network with people.

  4. Learn how to be a proactive team player. 

  5. Lastly, I wish to build a healthy work habit whilst multitasking such that no aspect of my life is completely neglected. I wish to also learn how to manage pressure and solve challenges. This can be achieved by attending to the most important tasks early before it becomes urgent.

You too can also start your journey, I mean I never knew I could transit into the tech world and learn a thing, but here I am... Don’t be scared, it’s wholly free, and the training is totally remote.

You can start learning on your own. Trust me, it’s way easier than you think. Here are links to some tutorials I started with:

GIT(don’t worry, you’d catch up easily): https://www.youtube.com/watch?v=RGOj5yH7evk

Figma (for design): https://www.youtube.com/watch?v=pQN-pnXPaVg
Team Topologies 2: Organizing Business and Technology Teams
Tags: devops, techtalks, productivity, systems
Published: 2021-08-23 15:55:02

Today, we premiere the second and final episode in our two-part series with DevOps experts Matthew Skelton and Manuel Pais, authors of the new book [Team Topologies: Organizing Business and Technology Teams for Fast Flow.](https://teamtopologies.com/book) If you haven’t listened to the first episode, I highly recommend checking it out.

In episode 2 we discuss strategies for reducing the cognitive load on a team, how to build organizational trust to allow for fast change, and the theory behind reversing Conway’s Law to produce sustainable system architecture.

Also be sure to check out the [Team Topologies Academy](https://academy.teamtopologies.com/) for more insights and custom-built courses.

#**Listen to the full episode**
{% spotify spotify:episode:0nnEAZEWVRy9UNPjept476 %}

## Episode Highlights Include:

* What is “Conway’s Law” and its relation to system architecture

* Reducing cognitive load to improve productivity

* How a high degree of trust allows for fast change

* The optimal number of people to put on a team

* Patterns to help teams discover success

* Flow efficiency is the 5th key metric

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q3w8a1hz1i2wtcigszwu.png)

**If you haven't already heard**, Dev Interrupted is partnering with Dzone to host **INTERACT:** An interactive, community-driven, digital conference on September 30th - by engineering leaders, for engineering leaders. 1 day, 10 speakers, 100s of engineers and engineering leaders, all free.

##[Register Now](https://devinterrupted.com/event/interact/)##

__________________________________________________________________

## Join the Dev Interrupted Server

## 

With over 1500 members, the Dev Interrupted Discord Community is the best place for Engineering Leaders to engage in daily conversation. No sales people allowed. [Join the community >>](https://discord.com/invite/devinterrupted)

![](https://cdn-images-1.medium.com/max/2878/0*wut45_ZDwqsc279f.png)

*Originally published at [https://devinterrupted.com]
Day 181
Tags: 100daysofcode, programming
Published: 2021-08-23 15:48:53

Day 181/200 of #200DaysOfCode #100DaysOfCode 

- Solved one problem on Codewars. And also tried to solve the "Simple Fun #112: Array Erasing (5 kyu)"  but couldn't.

1 - Duplicates. Duplicates Everywhere. (6 kyu)
HNG Internship Experience ... Progress Report.
Published: 2021-08-23 15:40:28

HNG Internship is a free for all internship program in partnership with zuri team with the aim of training and educating interns interested in the tech space. The internship offers training in software development ( frontend and back end), UI/UX design, Digital marketing, Mobile development among other exciting tracks. The internship is fast paced and encourages personal development and team building.

I am currently enrolled in the frontend development track, and in the third stage of the internship. Front end development mainly deals with the user side of the web. This includes user interface of websites and web based applications, responsiveness of websites and web apps to various screen sizes, using API data to accept, display, edit and delete user information. 

During this internship program, we've been able to employ the use of front end development tools and languages to carry out tasks which are graded and used as basis for promotion from one level to another. For the first stage, we tasked with creating accounts for development such as figma for design, GitHub for version control and a blog post stating why we were interested in the internship program. For stage 2 we were tasked to use the programming language we're comfortable with to display our names and then also create a resume application that was deployed using Netlify. I am currently in the third stage looking forward to joining a team and showcasing my skills, developing and working with amazing people.
How Much JavaScript is Necessary to learn React?
Tags: javascript, react, webdev
Published: 2021-08-23 15:33:49

There is no hard and fast rule to start learning React. However, basic programming knowledge, preferably in JavaScript is a must to understand the concepts that we are going to apply and learn.

Here are some of the concepts which I feel one should look into as per my experience:

1. let, var and const: We should know what is the difference between them and where to use them. Along with that, one should have a solid fundaments of data types.

2. Conditional and Loops : As I already mentioned, one should know how to use loops, specially the "ForEach" loop.

3. Functions and Arrow Functions: How to write and call a functions and Arrow Functions. What is the difference between Functions & Arrow functions. What is lexical in Arrow Function.

4. Event Handling :Event handlers can be used to handle and verify user input, user actions, and browser actions.

5. Promises & Async/Await: In order to understand the asynchronous nature of JavaScript, we should have understand these concepts very well. 

6. map()/filter()/reduce(): Map, reduce, and filter are all array methods in JavaScript. Each one will iterate over an array and perform a transformation or computation. Each will return a new array based on the result of the function.

7. Module exports and imports

Again, I would say there is no hard and fast rule to start learning react. React is a library which provides ways to easily write the code and develop. But, one should atleast understand these topics in order to not to get overwhelmed.