teleren/devto huggingface dataset:
Cómo crear tus propios Snippets para VSCode
Tags: vscode, webdev, tutorial, productivity
Published: 2020-10-21 03:03:21

Hoy te voy a mostrar como crear tus propios Snippets para Visual Studio Code sin necesidad de instalar una extensión. 

⚠️ Spoiler Alert
> Es muy fácil crear snippets. :)

## Empecemos 
Abre VSCode y haz lo siguiente:

`Ctrl + P` e ingresa "preferences": "User Snippets" y elije el lenguaje que desee. 

Aquí un ejemplo para `JavaScript`:

```json
{
  "Require": [
    "prefix": "req",
    "body": [
      "const name = require('');"
    ],
    "description": "Abreviación del código reservado require."
  ]
}
```
Después de esto guarda el archivo y crea un archivo `JavaScript` y coloca `req` que sería la abreviación de nuestro Snippets, VSCode auto completara mientras lo escribes y preciona la tecla tab o enter. Ahora tenemos un `require()` guardado en una constante. 


Aquí un ejemplo de un Snippets que cree para `CSS`, puedes verlo en el siguiente tweet.

{% twitter 1265328843281379329 %}

Otro ejemplo es crear snippets para los meta tags 

Ejemplo: 
![creación del snippets](https://dev-to-uploads.s3.amazonaws.com/i/jviqh62yipug42nd84p8.jpg)

![como se ve nuestro Snippets en un archivo](https://dev-to-uploads.s3.amazonaws.com/i/xjs77405fsnrpozlzntm.jpg)

Y eso es ya lo tienes, ahora ya sabes como crear tus propios snippets, elige el lenguaje que desees y listo. 
Hasta puedes crear tu propia extensión. :)

Gracias por leer!!
40 and Fresh
Tags: beginners, womenintech
Published: 2020-10-21 02:50:19

As a young girl, we always had a computer in the house (once it became a household item). My father was always tinkering with them and allowing us to explore within them. He would often build complete systems from scratch for friends and relatives and I tried to pay attention as best I could. 

Once I got to college, I took courses in Computer Science at every opportunity. I became enthralled with HTML and loved designing websites. I would often find inspiration in a beautiful piece of art online and create a whole template around it. I had several accounts with the earlier, free web hosting sites (shout out to Angelfire and Geocities), and had several blogs to practice with.

Despite my interests, a career in technology was not a vision I ever saw coming true. I would estimate only 3-5% of the Computer Science department at Birmingham-Southern College were females.  In addition, the courses took a challenging curve 2-3 classes in. We jumped from PASCAL to C++, which, to me, seemed like a pianist going from "Chopsticks" to "Flight of the Bumblebee" in five lessons. I did not feel confident at the time that I would be successful upon graduating with that as a major. On top of the pressure to graduate on time, I opted out of the program and kept my passion as a hobby. 

I do not fault the college for the challenging syllabus; as a liberal school, the fields of study were very generic. However, I often wondered what it would have been like to either go to a different school with more specific specialties, or to even be an undergrad in today’s world now that BSC has broadened their offerings to match the changing times. I do regret, at times, not sticking with the major, but that doesn’t mean I’m too late to address it.

With the changes to society and technology, the opportunities and channels have grown immensely, thanks to organizations like the National Center for Women & Information Technology and accelerated programs like Flatiron School; it’s making me believe I could make Software Engineering my career. I want to be able to use my knowledge and find a job where I can help my colleagues create technological works of art. If I am able to contribute to a project or website  in any meaningful way, I believe I would feel a higher level of accomplishment that I have rarely felt at previous jobs. 

And so I begin-- a student again after 18 years. I'm not the first to do this, but I proudly join the ranks of those bold and awesome people. And, thanks to my BA in English, I can tell you all about it with proper punctuation and grammar. Excelsior!

![Back to School](https://dev-to-uploads.s3.amazonaws.com/i/9glpzwhag3bp3uqe4iah.jpg)
Completed Hacktoberfest 2020!
Tags: hacktoberfest, hacktoberfest2020
Published: 2020-10-21 02:06:53

completed my hacktoberfest with 4+ PRs🎉🎉!

Opensource is a really great feeling connecting with completely new projects and communities. My effort won't stop here and I'll keep working on OS as much as I can.😊

ENJOYED THE EXPERIENCE OF OPEN SOURCE CODING!!!
Little example on how to use BehaviorSubject (Observable) in angular
Tags: angular, behaviuorsubject, rxjs
Published: 2020-10-21 01:50:36

Today I had to implement an observable in one project in angular, and I found that BehaviorSubject was the best option, so first let's define [BehaviorSubject](https://angular.io/guide/rx-library), is a type of subject, a subject is a special type of observable (is a producer of multiple values, "pushing" them to observers or consumers who are subscribed to that producer) so you can subscribe to messages like any other observable. The unique features of BehaviorSubject are:

* It needs an initial value as it must always return a value on subscription even if it hasn't received a next()
* Upon subscription, it returns the last value of the subject.
* At any point, you can retrieve the last value of the subject in a non-observable code using the getValue() method.

With that in mind lets go to see the little example.

componentService.ts
```javascript
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class ComponentService {

  public dataObsevable: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(null);
  
  constructor() {
  }

  onDataReceived = (close: boolean) => this.dataObsevable.next(close);

}
```
component.ts
```javascript
import { OnInit } from '@angular/core';
import { ComponentService } from '../../componentService.ts';

export class Component implements OnInit {

  public dataObsevable: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(null);
  
  constructor(
   private componentService: ComponentService 
  ) { }

  /* Is important to always call the method to subscribe in the ngOnInit or constructor */
  ngOnInit() {
    this.onDataChangeReceived();
  }

  onDataChangeReceived = () => {
    this.componentService.onDataReceived.subscribe((change: boolean) => {
      if (change) {
        /*Something*/
      }
    });
  }

}
```




I hope this will be helpful for all of you and thanks for reading!!
Sets
Published: 2020-10-21 01:42:05

Sets are lists with no duplicate entries.
Since the rest of the sentence uses words which are already in the set, they are not inserted twice.

```
print(set("I want it Pronto and I am late".split()))
```
 
Sets are huge importance. When look for differences and intersections between other sets.  For example, say you have a list of participants in events A and B:

```
a = set(["or", "ni", "car"])
print(a)
b = set(["oui", "non"])
print(b)
```

To find out which members attended both events, you may use the "intersection" method:
```
a = set(["or", "ni", "car"])

b = set(["oui", "non"])


print(a.intersection(b))
print(b.intersection(a))
```

To find out which members attended only one of the events, use the "symmetric_difference" method:
```
a = set(["or", "ni", "car"])

b = set(["oui", "non"])


print(a.symmetric_difference(b))
print(b.symmetric_difference(a))
```

To find out which members attended only one event and not the other, use the "difference" method:
To receive a list of all participants, use the "union" method:

```
a = set(["or", "ni", "car"])
b = set(["oui", "non"])

print(a.union(b))
```
Best Python Resources And Sites
Published: 2020-10-21 01:39:49

In this post, I will go over the list of useful Python sites and blogs which every Python programmer should have on his/her list.

[Planetpython.org](https://planetpython.org/) - Great resource to know the latest in the field of Python. You would find everything here about Python from latest courses, libraries to coding snippets.

[Plant Scipy](https://www.planet.scipy.org) - This one is from the Scipy guys. Great resource to remain up to speed in the field of Machine and Deep learning. 

[Real Python](https://realpython.com/) - Anything you want to learn about Python, This is the place to go. This site has great Python tutorials.

[Nbshare](https://www.nbshare.io/) - nbshare.io is about Python and R notebooks. You can upload your notebooks on this site and share it easily with any one. Also site has great content around Python, R and Data science. 

[Python.org](https://python.org/) - Well this is the official Python site. Also check out their blog https://blog.python.org/ for latest information about Python.

Let me know if any useful Python site you know of. I will add to the list here.
I need advice. How to learn CSS? Where should I start?
Tags: css, javascript, html, beginners
Published: 2020-10-21 01:17:09

---
title: I need advice. How to learn CSS? Where should I start?
published: true
description: What's the best tools/method to learn CSS?
tags: css, javascript, html, beginner
//cover_image: https://direct_url_to_image.jpg
---

I am a backend developper who started to learn frontend 6 months ago. So far I've been doing pretty well, but there is one subject that does not come to mind, CSS.

I am able to do basic stuff but as soon as the time comes to create something more complex I get stuck.

Did someone have any trainings or methods or something to recommend to help me master CSS once and for all?

Please leave me a comment.

Thanks,
Hello World
Tags: node, beginners
Published: 2020-10-21 01:16:20

## `learnyounode`

Navigate to the directory you created for our work. For example, go home with `cd`. Then, do: `cd Code/learnyounode`.

Then: `learnyounode` brings up our menu: ![`learnyounode` menu](https://camo.githubusercontent.com/17955d1d684a9a0b3fd9d5d863393e6e952cc3b4/68747470733a2f2f7261772e6769746875622e636f6d2f72766167672f6c6561726e796f756e6f64652f6d61737465722f6c6561726e796f756e6f64652e706e67)

Select the first challenge: 'Hello World'.

## `touch program.js`

Let's create our first file - `touch program.js` (it doesn't have to be called 'progam.js').

## Add Code

Inside of 'program.js':

`console.info("HELLO WORLD");` goes into this file.

As you probably already know, we are just accessing the `console` _object_ and invoking a _method,_ `info`. We are passing in a _string,_ `"HELLO WORLD"`.

## `learnyounode verify`

In your terminal, `learnyounode verify program.js` will allow us to 'verify' and pass the first challenge ✨.
30 Days Of React
Tags: react, es6, javascript
Published: 2020-10-21 01:01:02

We started a 30 Days Of React challenge on 1 October and it has been going well so far. Thousands of students are participating in the challenge. Almost all the participants are very happy with the content of the challenge, exercises, and projects. You can start the challenge at any time and finish it whenever you want. There are more than 400 people in the telegram and the members are very supportive. In case, you are looking for React material to solidify your React skill you may try out the 30 Days Of React challenge. 

You may have a look one of the 30 Days Of React challenge mini-project: https://www.30daysofreact.com/

💻 30 Days Of React: https://lnkd.in/d8VAS2J
👥 Join telegram group: https://lnkd.in/dNbxT8M

Previous challenges by the same author:

💻 30 Days Of JavaScript Github: https://lnkd.in/efqy_df
💻 30 Days Of Python Github: https://lnkd.in/epW6d_U

👥 Join the 30 Days Of JavaScript group: https://lnkd.in/er7kdTE
👥 Join the 30 Days Of Python group: https://lnkd.in/eE5Qgqd
Point your domain to AWS using Route 53
Tags: aws, beginners
Published: 2020-10-21 00:39:01

If you intend to use your domain with various services offered by AWS then you need to use Route 53 and point your domain to AWS*.

##### 1. Create Hosted Zone
From AWS console, go to "Route 53" and select "Create hosted zone"
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9htvj93txtxbo0pxit6o.png)

Enter the domain name you want to point to AWS (it can also be a sub-domain), select "Public hosted zone" and click "Create hosted zone"
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o4ym7nfh5k97z7ww8m0k.png)

Once the hosted zone is created, copy the NS (Nameserver) values (you will need them in the next step)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6bac9otqv91qutgm5g3l.png)

##### 2. Update NS Records in your domain
ℹ️ **Basically, in this tutorial, I have assumed that the domain you intend to point to AWS has been registered using a registrar other than Route 53 itself**

Login to your domain registrar's account, select the domain and edit the NS records. 

Screenshot refers to [porkbun](https://porkbun.com/) since I have registered my domain with them, but the setup is essentially the same for every registrar (GoDaddy, Namecheap, Domain.com, Name.com, .etc)

Click on edit NS (Nameservers)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mp903nhskojfqiqkc01s.png)

Enter the NS record copied in the previous step and then click "Submit"
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/13jio6r7gu2s1pzw1uk8.png)

That's it, once the changes have been propagated you will be able to use your domain/sub-domain(s) with the desired AWS services.

ℹ️ **Name server changes usually take 24 to 48 hours to fully start working**

---
---

\* ℹ️ **You can attach your domain to any AWS service without moving the hosted zone to AWS:**

**Lightsail/EC2**
* Attach a static IP to the instance
* Create a new `A record` and point it to that IP

**ECS, EKS, etc. (resources to which you can't attach static IP)**
* Attach ELB (elastic load balancer) to the resource
* Create a new `CNAME record` and point it to the URL of the ELB

**S3, Cloudfront, Amplify, Elastic Beanstalk, etc.**
* Create a new `CNAME record` and point it to the URL of the resource

But AWS route 53 comes with its own [set of advantages](https://aws.amazon.com/route53/) and route 53 helps to connect the request of the user to infrastructure running in the AWS. If your infrastructure is running on AWS then I would suggest pointing your domain's NS to Route 53's hosted zone.
Break
Published: 2020-10-21 00:07:37


# break is used to exit a for loop or a while loop, whereas continue is used to skip the current function, and return to the "for" or "while"statement.
e.g: 


```
count = 0
while True:
    print(count)
    count += 3
    if count >= 7:
        break
```
 * continue
```
for x in range(1,20,4):
    # Check if x is even
    if x % 2 == 0:
        continue
    print(x)
```
Consider contributing to Compuneers, a site highlighting unsung women, BIPOC, and LGBT+ pioneers in Computer Science
Tags: hacktoberfest, contributorswanted, beginners, codenewbie
Published: 2020-10-21 00:02:14

If you’re still working on getting your 4 PRs for [Hacktoberfest](https://hacktoberfest.digitalocean.com), consider contributing to [Compuneers](https://github.com/timmybytes/compuneers), a site highlighting important women, BIPOC, and/or LGBT+ figures often overlooked in the history of Computer Science. Most people don’t know the stories of Grace Hopper, the ENIAC programmers, Lynn Conway, and so many other fascinating people who helped create the modern computing industry, and I hope this site goes a small step towards shedding light on who they were and are. 

This is a project I’ve been wanting to start for a while now, with an emphasis on opportunities for collaboration. Right now it’s a simple Jekyll blog-style site, with a good amount of issues to tackle, and the option to submit issues for adding new figures from history to the site. It won’t take a lot of technical know how right now, since the focus is on publishing posts with as many important figures as possible to create a rich amount of content. Eventually, if people are interested enough, I’d like to move it to React, but for now this will do the job. 

The whole point of the project is inclusion, so if you aren’t very experienced in web development yet and want to start contributing to open source, this should be a good beginner project to help out with. Likewise, if you’re passionate about bringing the stories of these often overlooked people to light, whatever your skill level, please consider contributing. 

You can find instructions on how to contribute [here](https://github.com/timmybytes/compuneers/blob/main/CONTRIBUTING.md) or check out [currently open issues](https://github.com/timmybytes/compuneers/issues) if you’re interested. Thanks for reading!

---

_You can find me on [Twitter](https://twitter.com/timmybytes), check out my projects on [GitHub](https://github.com/timmybytes), or view [my portfolio](https://timmybytes.com) for more info about me._
My own realtime chat with react, graphql and postgresql [part 4 - Server]
Tags: graphql, node, chat, express
Published: 2020-10-21 00:00:04

So, [previously](https://dev.to/dalejan/your-own-realtime-chat-with-react-graphql-and-postgresql-4mj8) we've already created our queries, mutations, and subscriptions in order to login and chat in our application. 
But now we have to serve our backend so any frontend can consume it.

To do this we've to create the `index.js` file.

*./index.js*

```javascript
const { typeDefs, resolvers } = require("./graphql/index");
const { ApolloServer } = require("apollo-server-express");
const { createServer } = require("http");

const app = require("express")();
const PORT = process.env.PORT || 8080;

const server = new ApolloServer({
  typeDefs,
  resolvers,
  subscriptions: {
    onConnect: () => {
      console.log("coneected");
    },
    onDisconnect: () => {
      console.log("disconected");
    },
  },
});


// Initialize the app
server.applyMiddleware({ app });

const httpServer = createServer(app);
server.installSubscriptionHandlers(httpServer);

// Wrap the Express server
httpServer.listen(PORT, () => {
  console.log(`🚀 Server readys at http://localhost:${PORT}/graphql`);
  console.log(`🚀 Subscriptions ready at ws://localhost:${PORT}/graphql`);
});

```

As usual, lets break it down.

1. The `ApolloServer` is basically an object that group the schemas, the functions and the socket subscriptions to serve them online.
2. On that apolloServer we now apply an `express` server as a middleware. Then we use the subscription handlers from [apollo](https://www.apollographql.com/docs/apollo-server/data/subscriptions/) in order to allow the socket connection.
3. Finally we serve the server at a specific port, with the listen function.

Now we can add a run script in our `package.json`

*./package.json*
```javascript
...
"scripts": {
  "start": "index",
   ...
},
...
```

Or use '[nodemon](https://www.npmjs.com/package/nodemon) index' instead, if you want a livereload of your changes.

Lets run it! (`npm start`).

In our browser we can now access to the server (The full path is printed on the server console once you run the script). 

And voila!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/45xaw9od57vmnpknuxiw.JPG)

In the [next part](https://dev.to/dalejan/my-own-realtime-chat-with-react-graphql-and-postgresql-part-5-graphql-playground-3p43) we will be using this interface to build the queries and mutations and check if everything was setted up correctly.
How to open and close a new browser window using JavaScript?
Tags: javascript
Published: 2020-10-21 00:00:00

---
  title: How to open and close a new browser window using JavaScript?
  published: true
  tags: JavaScript
  date: Wed Oct 21 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/open-and-close-new-window-using-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-5e8a976d52b0b4363e6419ae474d1ed3.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/open-and-close-new-window-using-javascript)
  
## Open a window

To open a new window using JavaScript, you can use the `open()` method in the global `window` object.

```js
// open a new window
// with google.com as the url
window.open("https://google.com");
```

The `window.open()` method accepts 1 required and 2 optional arguments:

- it accepts a valid URL of the `string` type as the first argument (Required).
- A window name of `string` type as the second argument (Optional).
- Window features of `string` type as the third argument (Optional).

If the method executes and a window is opened it will return an `object` with the method and properties of the newly opened window.

If the method didn't execute properly, it will return `null`.

## Specify the features for the new window

The window feature is separated by comma `,` in a string and should be supplied as the third argument to the `window.open()` method.

You can specify the feature for the new window like:

- To set the size of the new window as `width` and `height`
- Whether to show menubar or not using `menubar`
- Whether to show `toolbar` (back, forward, button, etc.) or not
- Whether to make the new window resizable
- Whether it should have scroll bars or not

For example, let's make a new window which opens `google.com` with some window features like the,

- `width` to be `800`
- `height` to be `600`
- let's make it `resizable`
- and to show `scrollbars`.

This can be done like this,

```js
// open a new window
// with google.com as the url
const openedWindow = window.open(
  "https://google.com",
  "Google Search",
  "width=800,height=600,resizable,scrollbars"
);
```

## Close an opened window

To close an opened window, you can use the `close()` method on the `object` returned from the `open()` method.

```js
// open a new window
// with google.com as the url
const openedWindow = window.open(
  "https://google.com",
  "Google Search",
  "width=800,height=600,resizable,scrollbars"
);

// close the opened window
openedWindow.close();
```

## NOTE: The `window.open()` method may be blocked by some modern browsers if it invoked automatically by the JavaScript. It is better to use this method inside a click event handler or something like that.

See this example live in [JSBin](https://jsbin.com/hunivecofa/2/edit?html,js,output).

### Feel free to share if you found this useful 😃.

---
App Platform: How to set specific NodeJS version?
Tags: digitalocean, appplatform
Published: 2022-09-20 17:07:38

---
title: App Platform: How to set specific NodeJS version?
published: true
date: 2020-10-21 00:00:00 UTC
tags: digitalocean, appplatform
canonical_url: https://jonfriesen.ca/articles/app-platform-setting-specific-nodejs-version
---

NodeJS projects have an optional configuration in their `package.json` for indicating the supported engine(s) for an app. This can look like:

```
{ 
  "engines" : { 
    "node" : "12.19.0" 
  }
}

```

ranges are also supported, for example:

```
{ 
  "engines" : { 
    "node" : ">=12.0.0 <=14.0.0" 
  }
}

```

this range says an app can be run on NodeJS 12 to 14 (inclusively).

[Click here for more info on NoedJS `engines`](https://docs.npmjs.com/cli/v8/configuring-npm/package-json#engines).