teleren/devto huggingface dataset:
Diferencia entre exports y module.exports
Tags: node, javascript, beginners, spanish
Published: 2020-11-04 15:34:05

¿Cuál es la diferencia entre usar **module.exports** o **exports** en Node.js?

En principio, ambos apuntan al mismo objeto -*vacío*-. Esto significa que si utilizamos `module.exports.hola = "hola"` seguido de un `exports.mundo = "mundo"`, exportaremos el siguiente objeto:

```javascript
{ hola: "hola", mundo: "mundo" }
```

Sin embargo, hay cosas que no podemos hacer. Por ejemplo, podemos asignar un objeto a **module.exports** de la siguiente manera:

```javascript
module.exports = { hola: "hola", mundo: "mundo" }
```

Pero, ¿y si hacemos lo mismo con **exports**?:

```javascript
exports = { hola: "hola", mundo: "mundo" }
```

Cuando intentamos acceder a alguna de sus propiedades, nos devolverá `undefined`. Y es que, si pedimos que nos muestre el objeto exportado descubriremos que está vacío `{}`. 😱😱😱 

¿Por qué pasa esto? Resulta que **exports** es solamente un atajo. 

¿Recuerdas que empezamos diciendo que ambos apuntan al mismo objeto vacío? No es técnicamente cierto. En realidad **module.exports** es quien apunta al objeto, mientras que **exports** apunta a **module.exports**. Éste funciona entonces como un puente entre **exports** y el objeto que queremos exportar. 

![exports apunta a module.exports que apunta a un objeto vacío](https://dev-to-uploads.s3.amazonaws.com/i/qa27c806e1nkqmk3z4im.png)

Y es que cuando asignamos un objeto a una variable, lo que estamos haciendo no es dar un valor, sino crear una referencia. Imagina que tenemos este código:

```javascript
let holaMundo = {
    hola: 'hola'
};

let x = holaMundo;
console.log(holaMundo, x);
```
Si lo ejecutamos, se mostrará en pantalla `{ hola: 'hola' } { hola: 'hola' }`. Hasta aquí todo bien. Pero, ¿qué crees que nos mostrará si modificamos `holaMundo` después de asignarlo a `x`?
```javascript
let holaMundo = {
    hola: 'hola'
};

let x = holaMundo;
holaMundo.mundo = 'mundo';
console.log(holaMundo, x);
```
Cuando tenemos una variable `let a = 1` y asignamos `let b = a` estamos guardando el valor de `a` en `b`. Y después, da igual lo que hagamos con `a` o lo que asignemos porque seguiremos teniendo nuestro `1` en esa segunda variable.

Teniendo esto en cuenta, la intuición nos dice que `x` no debería modificarse cuando añadimos otra propiedad a `holaMundo`. Sin embargo, si ejecutamos el último bloque de código la pantalla nos mostrará lo siguiente:
```
{ hola: 'hola', mundo: 'mundo' } { hola: 'hola', mundo: 'mundo' }
```
¿Por qué? De nuevo, porque lo que hacemos no es asignar el valor de `holaMundo` sino crear una forma más rápida de acceder a su contenido, y escribir una letra en lugar de ocho.

Así, **exports** nos permite ir añadiendo valores utilizando seis letras menos que con **module.exports**. Para poder usar este atajo, Node lo que hace es crear la referencia `exports = module.exports` por ti. 

Con `exports = { hola: 'hola'}`, lo que estamos haciendo es cambiar el valor de **exports** y eliminar esa referencia, dejando entonces de tener acceso al objeto en **module.exports**.
Secrets of drawing with CSS and a single DIV
Tags: css, discuss, codenewbie, codepen
Published: 2020-11-04 15:26:43

Recently #divtober - a challenge of drawing images using pure CSS and one DIV only - ended. Some of you have asked how I drew these images with only one DIV.

![dev](https://dev-to-uploads.s3.amazonaws.com/i/bauem7wo3go2kxi5q0td.png)
 
In the following article I'll reveal my secrets: 
https://levelup.gitconnected.com/secrets-of-drawing-with-css-and-a-single-div-ce9930ec9050
CSS Cheat Sheet
Published: 2020-11-04 15:19:44

## Misc.

- Use `transform: translate` instead of top, left, right, bottom positioning, especially when animating
- `box-sizing: border-box; `
- `object-fit: contain; /* maintains aspect ratio */`
- `place-items: center;`
- `user-select: none;`
- `pointer-events: none;`
- `height: 20vw;`
- `box-shadow: 0 4px 60px rgba(0, 0, 0, 0.5);`

```
body::-webkit-scrollbar {
  /* NICE TRICK : it hides the scrollbar, but the scrolling behavior is maintained*/
  display: none;
}
```

## Media Queries

#### Targeting Touch devices
```
/* For touch devices */
@media (hover: none) {
  .mainLayout__sidebar {
    padding-bottom: var(--main-layout-footer-height);
  }

  .mainLayout__body {
    height: calc(100vh - var(--main-layout-footer-height));
  }
}
```

## Grid & Flex layouts

For those landing here looking for a way to have a sort of dynamic table, with items wrapping to new rows, and still being aligned across rows, a pretty good solution is to use flex with flex-wrap:

```
.container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
```


## CSS custom variables
```
:root {
  --main-font-color: white;
  --main-theme-color: 0, 0, 0;
  --main-background-color: 4, 4, 4;
  --main-interactive-text-color: #b3b3b3;
}
```

## CSS animation

```
.someClass{
  animation: name duration timing-function delay iteration-count direction fill-mode;
}

@keyframes wheel {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}
```

## REM units

```
10px = 0.625rem
12px = 0.75rem
14px = 0.875rem
16px = 1rem (base)
18px = 1.125rem
20px = 1.25rem
24px = 1.5rem
30px = 1.875rem
32px = 2rem
```

Examples :

```
html { 
  font-size: 16px; 
}

h1 { 
  font-size: 2rem;          /* 32px */
}

p { 
  font-size: 1rem;          /* 16px */ 
}

li { 
  font-size: 1.5em;         /* 24px */
}
```

- https://youtu.be/CxC925yUxSI?t=1168
```
html {
  font-size: 62.5%; /* This makes a better base for REM units AND for accessibilty font adaptation*/
}
```

-
How to backup your Github code to Gitlab
Tags: github, git
Published: 2020-11-04 14:53:09

---
title: How to backup your Github code to Gitlab
published: true
description: Github is perhaps the most important internet account a developer has. Here is how to backup your code from Github to Gitlab
tags: github, git
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/5gmf4kzaobug3vxvrans.png
---

My Github account is perhaps the most important internet account I "own". Besides being the #1 companion to my resume, it stores crucial code that I have built over the last few years for my side projects. Long story short, this is an account I can't afford to loose.

Well...I can afford to loose it, what I can't afford to loose is the code that is stored inside. I'm a strong proponent of not putting all your eggs in one basket so I backup my most important code to Gitlab.

Gitlab I am using as an example here, as you can do this using any git repository from any git provider, and the process is very simple.

**Create an account + code repository**: The first step is to create a GitLab account and a code repository to keep a backup of your code. I won't go into too much detail here, you guys know how to create git repo.


**Grab the remote URL and add it to your repo**: When you setup a repo, you will often use the command 

```bash

git remote add origin <git_url>

```
This will add the origin URL to your repo and assign it to the name "origin". From here you can push to "origin". 

We will use this same command but we will change a few things, now instead of adding an 'origin', add a 'backup' instead like:

```bash

git remote add backup <git_url>

```

(it should be noted here that the name like 'origin' or 'backup' does not matter, you can pick whichever name you want) 

**Push to your new remote**: After adding the new remote url, you can now push to it using:

```bash 

git push -u backup master

```
Here, "backup" is the name you set in the last step and "master" is the branch name.

That's it! Your code is not backed up to another Git repository.
Unlock your startup’s potential by automating internal processes
Tags: automation, growth, startup, nocode
Published: 2020-11-04 15:12:18

---
title: Unlock your startup’s potential by automating internal processes
published: true
description: Automate internal processes to save time that can then be invested in better activities.
tags: automation, growth, startup, nocode 
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/1mjz3jdwptathjse37at.png
canonical_url: https://2.flexiple.com/no-vc-reports/i-want-to-automate-internal-processes
---
As your starup grows, the processes that worked initially slowly start breaking down. So how do we tackle it? - By automating your internal processes.

**When?**
So, automating & building for scale from Day 1 of your startup is a mistake. You are going to be tweaking many processes and even getting rid of some. So, wait for internal flows to stabilise and then identify the tasks that suck the most amount of your time.

**How?**
But yes, then manual processes will cause errors, cost you new initiatives and become more challenging. So, in the report, we break it into:

1. Identifying areas to automate
2. Finding the right tools
3. Of course, implementing the automation

We discuss these three steps including the usage of CRMs, Airtable and Zapier/Integromat.

I also share, multiple other tools that supercharge processes! All this in [this report](https://2.flexiple.com/no-vc-reports/i-want-to-automate-internal-processes). It is just 5 mins, as promised :).

If you would like it even shorter, I've summarised it on Twitter - here's the thread below! 

{% twitter 1323971471669030912 %}
Defend Your Web Apps from Cross-Site Scripting (XSS)
Tags: xss, security, development
Published: 2020-11-04 14:57:58

Learn how XSS works and how to prevent it in Web applications.
[Read more...](https://auth0.com/blog/cross-site-scripting-xss/?utm_source=content_synd&utm_medium=sc&utm_campaign=xss)
Custom Toggle for mobile
Tags: magento2js
Published: 2020-11-04 14:56:03

Came across a situation where a mobile only toggle is required. So default Magento toggle and accodion functionality was not suitable.
So the following custom toggle was written. 
Pay attention to the css trick to check if mobile or not without using jquery window width.
```
$(window).width()
```

phtml file
```
<div class="nav-container" data-mage-init='{"Vendor_Module/js/toggle": {}}'>
	<div class="header">
		<h1>HEADER</h1>
	</div>
	<div class="list">
		CONTENT IS HERE
	</div>
</div>
```

js file
```
define([
        'jquery',
    ], function($) {
        return function(config, element) {
            var list = $('.list', $(element));

            if (list.is(':hidden')) {
                var isMobile = true;
            }

            if (isMobile) {
                $('.header', $(element)).click(function(){
                    if (list.is(':hidden')) {
                        list.show();
                    } else {
                        list.hide();
                    }
                });
            }
        };
    }
);
```
Node.js Crash Course - Part 10 - Get, Post & Delete Requests
Tags: node
Published: 2020-11-04 14:54:32

* GET - requests to get a resource
* POST - Inserting a data
* DELETE - Deleting data from database
* PUT - Updating data in the database

Receiving form data in server:
form.html:
```
<form action="/save" method="POST">
    <input name="title" type="text">
    <input value="Save" type="submit">
</form>
```
app.js:
```
app.post('/save', (req, res) => {
    console.log(req.body);
}
```
We also have to use `app.use(express.urlencoded({ extended: true }));` to get the request body appropriatly.

#### deleting a post using fetch api
In app.js
```
app.delete('/blogs/:id', (req, res) => {
    const id = req.params.id;
    Blog.findByIdAndDelete(id)
    .then( result=> res.json({ redirect:'/blogs' }))
    .catch( err => console.log(err) )
})
```
In html:
```
<button id="trashcan" data-doc="<% blog._id %>">Delete</button>
<script>
const trashcan = document.getElementById('trashcan');
  trashcan.addEventListener('click', (e)=>{
    const endpoint = `/blogs/${trashcan.dataset.doc}`;
    fetch(endpoint, {
      method: 'DELETE'
    })
    .then( response => response.json() )
    .then( data => window.location.href = data.redirect )
    .catch( err => console.log(err) )
  })
</script>
```
How to Create Dropdown Button In Flutter, Dropdown Lists in Flutter - fluttercorner.com
Published: 2020-11-04 14:52:16

Hello Guys How Are You all ? In This Tutorial We are going to learn How to Create Dropdown Button In Flutter, Dropdown Lists in Flutter.

Many Times We need to give users to option or dropdown button to choose one option. So there we need to use dropdown button. For Example Choose Gender Button.

To make Dropdown Button we need to use DropdownButton Class. in this class we need to provide some value to key items. So Without Wasting Your Time Lets Start this Tutorial.

# How to Create Dropdown Button In Flutter, Dropdown Lists in Flutter?

First of All Import material.dart in your main.dart file.

```
import 'package:flutter/material.dart';
```

Then, Create void main and Define MyApp in your runApp.

```
void main() {
  runApp(MyApp());
}
```

Now, Create a class named MyApp extends with a Stateless widget. This is our main View class. and define

```
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "DropDown Button Example - FlutterCorner",
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("DropDown Button Example - FlutterCorner"),
          backgroundColor: Colors.black,
        ),
        body: DropDownList(),
      ),
    );
  }
}
```

Then, Make DropDownList StatefulWidget Class.

```
class DropDownList extends StatefulWidget {
  @override
  _DropDownListState createState() => _DropDownListState();
}

class _DropDownListState extends State<DropDownList> {

}
```

After That, let’s make a String variable with Default Value like below.

```
  String dropdownValue = 'First';
```

Now, Make DropdownButton class with key named value, onChanged and items.

Here value would be our final value that user choosen
onChanged will have setState. when user choose any item from dropdown it will assign final value.

items have a list of item that we want to open as dropdown.

```
       DropdownButton<String>(
            value: dropdownValue,
            onChanged: (String newValue) {
              setState(() {
                dropdownValue = newValue;
              });
            },
            items: <String>['First', 'Second', 'Third', 'Fourth']
                .map<DropdownMenuItem<String>>((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
          )
```
The result will be the following: ( I am used Raised Button So Your Result Would be Minor Different from my result ).

Full Article At Here [How to Create Dropdown Button In Flutter, Dropdown Lists in Flutter](https://fluttercorner.com/how-to-create-dropdown-button-in-flutter/)
How to Set Network Image In Circular Avatar In Flutter? fluttercorner.com
Published: 2020-11-04 14:46:27

Hello guys how are you all? Hope you all are fine. In Today’s tutorial, we are going to learn How to set Network Image In Circular Avatar In Flutter?

when we are trying to get Images from API and we have to use an image from api into round corner or circleavatar in a flutter.

Here we have define Different method for Circular Avatar.

#How to Set Network Image In Circular Avatar In Flutter ?

# Example 1 CircleAvatar With Network Image

To use CircleAvatar we need to define our Network OR Asset Image in backgroundImage property.
also, give radius that will our image radius.
For example like below. [ Image source unsplash.com ].

```
        CircleAvatar(
            radius: 120.0,
            backgroundImage: NetworkImage(
                "https://images.unsplash.com/photo-1597466765990-64ad1c35dafc"),
          ),
```

Our Output will be like Below, As Shown in my blog at here [How to Set Network Image In Circular Avatar In Flutter?](https://fluttercorner.com/how-to-set-network-image-in-circular-avatar-in-flutter/)

# Example 2 CircleAvatar with border in Flutter
Here is we are going to give Border to our CircleAvtar image.
Here’s the code to create a Circular avatar with a border,

```
          child: CircleAvatar(
            radius: 130,
            backgroundColor: Colors.red,
            child: CircleAvatar(
              radius: 120,
              backgroundImage: NetworkImage(
                  'https://images.unsplash.com/photo-1597466765990-64ad1c35dafc'),
            ),
          ),
        ),
```

More Two Example With images at here [How to Set Network Image In Circular Avatar In Flutter?](https://fluttercorner.com/how-to-set-network-image-in-circular-avatar-in-flutter/)
How to make both npm and yarn use private registries
Tags: webdev, node, yarn, npm
Published: 2020-11-04 14:46:06

```
npm login --registry <YOUR_PRIVATE_REGISTRY_URL>
```


```
yarn config delete registry
```

then don't trust the autogenerated `~/.npmrc` configuration and modify it like this:

```
always-auth=true
registry=<YOUR_PRIVATE_REGISTRY_URL>
_authToken=NpmToken.<YOUR_TOKEN>
```

🍻 Cheers!
How to change package name in flutter? fluttercorner.com
Published: 2020-11-04 14:43:15

Hello Guys. Many times we need to change the package name of our project in flutter. So in this tutorial, we are going to learn How to change package name in flutter?

It is totally different method to change package names in android and iOS as well. So here is two methods for android and iOS. Here is defined all steps please followed meticulously to prevent any potential crash.

# How to Change Package name in flutter for Android Project

# How to Change Package name in flutter for Android Project
There are 4 steps to change the Package Name of your Flutter app in android. so follow every one step carefully.

#Change the package name in your main AndroidManifest.xml file
Modify the file as the following path:
```
<Proect-Path>/android/app/src/main/AndroidManifest.xml
```
Replace “com.example.flutter_app_test” with your new package name

# Change the package name in your debug AndroidManifest.xml file
Do Same Here as We did in step 2.
```
<Proect-Path>/android/app/src/debug/AndroidManifest.xml
```
Replace “com.example.flutter_app_test” with your new package name

# Change the package name in your profile AndroidManifest.xml file
Do Same Here as We did in step 3 but with different paths.
```
<Proect-Path>/android/app/src/profile/AndroidManifest.xml
```
Replace “com.example.flutter_app_test” with your new package name

# Change the applicationId in your build.gradle file
Then all we need to do is change applicationId in build.gradle file.
```
<Proect-Path>/android/app/src/build.gradle
```

Replace “com.example.flutter_app_test” with your new package name in applicationId as shown in the above image.

Run Flutter Clean

And this is our final step to reflect all changes. It’s recommended to run flutter clean after making changes.

How to Change Package name in flutter for Android Project
To change package name in a flutter. just change the package name in all the following files.
1. <Proect-Path>/android/app/src/main/AndroidManifest.xml
2. <Proect-Path>/android/app/src/debug/AndroidManifest.xml
3. <Proect-Path>/android/app/src/profile/AndroidManifest.xml
4. <Proect-Path>/android/app/src/build.gradle

So Guys That’s It For change package name in flutter tutorial. Hope you like our tutorial. Comment below Your thoughts and your queries. And Also Comment on your suggestion here.

Here Is Full Article With Images [How to change package name in flutter?](https://fluttercorner.com/how-to-change-package-name-in-flutter/)
What hosting do you use for Asp.Net Core app ?
Tags: discuss, dotnet, azure, csharp
Published: 2020-11-04 14:40:22

`Godaddy` windows shared hosting only supports `Asp.Net Core 2.0`. 

I want to host a medium size `Asp.Net Core 3.1` app in cheap shared hosting.

Have you come across any windows Hosting provider with good customer support and uptime ?

Any advice will be appreciated :smile:.
Free React Landing Page Templates for SaaS Developers
Tags: react, javascript, gatsby, startup
Published: 2020-11-04 14:36:27

When software is your product, you absolutely NEED to have a great website in order to establish a solid online presence. To help you with that, we at Startup Landing have brought you not one, but two incredible free react landing  page templates for SaaS developers!

Visually, our **SaaS Modern** and **SaaS Classic** free landing page templates are both simplistic yet pack all the necessary features that you would want in a landing page. In terms of features, both are React based and also utilize Next JS and Gatsby JS. This makes these free landing page templates amazingly fast, SEO friendly right off the bat and not to mention secure.

On top of all that, these free react landing page templates all come integrated with MailChimp, which makes communicating with your contacts that much easier!

So just get your free react landing page template from us so you can focus your time and energy on developing a kick ass software!

👉 Check it live here: https://startuplanding.redq.io/
👉 Check it on Github: https://github.com/Startup-Landing/Startup-Landing
👉 Check it on Producthunt: https://www.producthunt.com/posts/startup-landing
Top 6 YouTube channels to learn programming
Tags: productivity, programming, coding, youtube
Published: 2020-11-04 14:35:32

1. [freeCodeCamp](https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ)

2. [Net Ninja](https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg)

3. [Computerphile](https://www.youtube.com/user/Computerphile)

4. [Programming with Mosh](https://www.youtube.com/user/programmingwithmosh)

5. [sentdex](https://www.youtube.com/user/sentdex)

6. [Corey Schafer](https://www.youtube.com/user/schafer5)
Ignore file managed by Git #Quicktip
Published: 2020-11-04 14:33:40

> Have you ever came across a scenario where you had to override a file locally? or development server?

Today, I came across a scenario where I had to override `.htaccess` file on my development server so I can add server-specific changes.

You can achieve with below command:

```
git update-index --skip-worktree
```

* update-index: Register file contents in the working tree to the index.
* --skip-worktree: This flag means files can be changed locally. Git pretends its working directory version is up to date and read the index version instead.

```
$ git update-index --skip-worktree </path/to/file-to-skip>
```


**How to confirm your changes?**
```
$ git ls-files -v | grep ^S
```

* ls-file: Show information about files in the index and the working tree.
* S: Flag shows file with --skip-worktree


**How to revert your changes?**
```
$ git update-index --no-skip-worktree </path/to/file-to-skip>
```
My First ...
Tags: hacktoberfest
Published: 2020-11-04 14:08:03

✨
### Hola! Hima Bindu Here

*I am very new to DEV community and little new to this Computers and technology. So feel free to treat me as a newbie.*
 
### Background

Obviously, I am new to Open Source. But not that new to coding... I like to code. My go-to language is Python.. and my favourite keeps changing. It's Haskell now :D

### Progress

So, I saw about Hacktoberfest and Found something interesting. So I am here after making some contributions. Check them below!

### Contributions

[One](https://github.com/C0D1NG/Programming/pull/549)
[Two](https://github.com/C0D1NG/Programming/pull/556)
[Three](https://github.com/C0D1NG/Programming/pull/557)
[Four](https://github.com/C0D1NG/Programming/pull/566)
[Bonus](https://github.com/ReciHub/FunnyAlgorithms/pull/772)
and of course, as a newbie... I made some ineligible contributions too. 


### Reflections

My Hacktoberfest experience is Amazing. These are some of the things I want to follow for the next Fest.
- Contributing to a bigger project/repo.
- Start from the beginning of the month(1st October not 15th)

{% twitter 1323967254141100032 %}