teleren/devto huggingface dataset:
Making your CLI-tools accessible in Windows
Tags: windows, cli, setup
Published: 2020-01-18 19:24:17

This is the first post in a series on creating Python CLI-tools in Windows. However, this post will be applicable independently of the programming language.  To start off the series I want to show you how to set up a directory where we can store the tools and make them accessible in the terminal, independent of our current working directory. 

First, I create a folder named _tools_ in my user directory. Inside it, I create a folder named _bin_. The name _bin_ comes from the Linux convention of storing executables (binaries) and scripts in directories named bin, e.g. `/bin`, `/usr/bin` and `~/bin`. Where the last one is where the user stores their own programs, similar to what we are currently working on. So let us continue.

Secondly, we need to add the newly created bin directory, `C:\Users\<username>\tools\bin`, to our path. To add it to the path:
* Open advanced system settings, you can search for it in the windows search bar 
* Press the button _Environment variables_. This opens a new window, with two lists. The upper one is for personal environment variables and the lower one for system-wide once. 
* Mark the path variable in your personal list and then press the edit button.
* Now you can add a new row, paste the path to the bin directory and save.

Now we can add an executable file to the bin directory and it will be accessible in the terminal. So now the core functionality for this post is done. If you are using a compiled language, you just need to add the compiled binary to the directory and you will be able to run it. However, I generally prefer to use Python, especially for these types of tasks. Therefore, I will go through some problems I encountered when trying to run python scripts using this method in the next post.

A final note, I want to recommend tip 28 from the book _The Pragmatic Programmer, 20th Anniversary Edition_: “Always Use Version Control”. This is the reason we created the tools directory, `C:\Users\<username>\tools`. I recommend turning the tools directory into a git-repository and uploading it to a remote repository like GitHub. As this isn't the focus of the post, I won't cover how this is done here. There already exist plenty of posts on how to get started with git, however, if you want me to cover the subject leave a comment. In this case, the main purpose of the repository is to have a way to easily re-install all your tools. I would, however, recommend having the repository private so you think less about writing pretty code and more about just solving the problem. Personally, I would easily be sidetracked if I had it as a public repository.
How to Code your own Discord Bot | PART 1| Getting started.
Tags: vscode, tutorial, beginners, javascript
Published: 2020-01-18 19:21:28

Hello Guys! 😍
I am DevMirza and today I am going to told u how to create a Discord Bot.

Welcome to the part 1 of coding a Discord Bot. I am writing this article with my experience, so let's get started.

# Creating application
- First goto Discord Developer Portal and create a new Application and click on bot section and select Add-a-Bot.
- Now Next Step is to add the bot to the Server.
- Click on Oauth2 section and scroll down and select "bot". This will generate a link to add the bot to server. Click on copy and add the bot to server.
- And the bot is on your server.

Note: The Token is important thing to get your bot online don't share it with anyone unless you trust him.

# Getting things ready to get the bot up.
- Firstly, we need a IDE(integrated development environment) to write our Code.
I recommend you using VScode because it's very easy to use and familiar 😊. Download it here: https://code.visualstudio.com/
, After you install it create a folder on desktop and name it whatever you want.
- After making a folder open it in VScode.
& Now my favorite 😍 part.
But, but Hold on.....

I am writing this from m phone so we continue from this where we lefte..

Thank you so much ❤️ for reading.
How to actually upload a project to Github
Tags: git, github, codenewbie, beginners
Published: 2020-01-18 19:11:37

Hello guys, its me again I just wanted to make this quick "tutorial" for something actually quite simple **but** most people doesn't get it the first time they try to do it.

# What's the problem?

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/345a3cqnnrj0h9z5tcem.jpg)

Actually the problem is really inoffensive but its a personal for me haha,
but basically it looks like this:
```bash
RepoName/Skeleton-Engine
├── assets/
├── bin/
├── include/
├── lib/
├── LICENSE
├── Makefile
├── README.md
├── scripts/
└── src/
```
I dont know what you think when you see a repo like this, but I actually hate it... So what its the "best way" to upload your code, well its quite simple.

# How to solve the problem

your repo should look, like this.
```bash

├── assets/
├── bin/
├── include/
├── lib/
├── LICENSE
├── Makefile
├── README.md
├── scripts/
└── src/
```

for this tutorial you will already have atleast a part of your project.

This is each command you will need (in your project's root)
```bash
git init
git commit -m "first commit"
git remote add origin <repo-url>
git push -u origin maste
```

if you do this commands in order, you should have your repo looking really good for any one who might want to help you out.

Oh and remember if you would like to have people helping, then you should have a README, so take a look at this post

{%post https://dev.to/mendoza/how-i-write-a-readme-md-for-my-github-projects-3cp2 %}

if you have any question please go ahead and ask on the comments, I will answer as fast as I can!
Video - Visual Studio Code Extension: Error Lens - Find errors while writing code
Tags: vscode, webdev, node, angular
Published: 2020-01-18 19:02:32

---
title: Video - Visual Studio Code Extension: Error Lens - Find errors while writing code
published: true
description: Visual Studio Code Extension: Error Lens - Find errors while writing code
tags: VSCode, WebDev, Nodejs, Angular
---

In this video, I'm going to explain about the extension called ErrorLens for Visual Studio Code. It is a great extension to catch errors on the fly. 

It does the following:

- Highlight lines containing diagnostics.
- Append diagnostic descriptions to the end of the line.
- Show icons in gutter.

You can this extension from here:
https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens

It is a great extension you will get all the errors at the same time when you write code. That reduces lots of your time wasted in debugging things. 

Below is the video for the same.


{% youtube NI8EgCgMSj8%}


If you like this video and wanted to see a similar kind of video then, please subscribe to my youtube channel at - http://bit.ly/codewithjv
Is there such a thing as too many APIs in a JAMstack site?
Tags: jamstack, jamuary
Published: 2020-01-18 18:00:56

The simplicity of the JAMstack shines from its decoupled architecture. In contrast to monolithic setups of the past, JAMstack sites are far more flexible and customizable. The decoupled, API driven model of the JAMstack means developers have the freedom to choose the services and implementation details that their sites use. This freedom of choice while desirable, conversely puts the onus on the developer to keep sites lean and performant. Though JAMstack sites help with making sites more performant, speed is not guaranteed on the JAMstack. If picked poorly and in abundance, APIs can quickly add bloat to a site. This is especially the case if an API is expected to execute at run time. Features like comments, and likes often require third party services and come with their own set of specific implementation details not to mention how much of a performance bottleneck they are—[Harry Roberts has an incredible talk on this that’s excellently titled “It's My (Third) Party and I'll Cry If I Want To” if third party performance interests you](https://www.youtube.com/watch?v=bmIUYBNKja4). 

Build time can also suffer when too many APIs are added to a site. Adding even one API that dynamically fetches user generated content at build, can add complexity and increase the execution time of your build process. When it comes to the question of how many is too many APIs, there is unfortunately no one true answer. However, a consideration worthy of note is to exercise restraint as much as possible, or as Harry mentioned in his third party talk mentioned earlier “use as little as possible for as long as possible”. With the JAMstack approach, it can be easy to reach for an API when the need arises. Stopping to consider the use case and sometimes even crafting a custom solution to an easily solvable problem (like comments) can mean a more lean, performant JAMstack site.

To get started on "rolling your own" features (like comments) on a JAMstack site, check out this excellent demo by the wonderful [Phil Hawksworth](https://dev.to/philhawksworth):

website: https://jamstack-comments.netlify.com/about
code: https://github.com/philhawksworth/jamstack-comments-engine

=======

Shout out to [Marie-Luce](https://twitter.com/marie_luce) for the article suggestion!
+5 to productivity with no effort
Tags: productivity, tooling, typescript, javascript
Published: 2020-01-18 17:14:25

---
title: +5 to productivity with no effort
published: true
description: Here's how you can eliminate a lot of confusion and lost time from your day-to-day software development work.
tags: productivity, tooling, typescript, javascript
---

This is a very short introductory article to find out if anyone is interested. 

So how many of you feel that comments to code, so called "documentation" sucks? 
Do you think it's way too often is unreliable, misleading and confusing? 

Let's talk about why does that happen, and then how can it be fixed with a simple VSCode extension.

So first, you probably once stumbled upon a code piece like this:

```js
// This function collides Hadrons.
function hadron_collider() {/* ...whatever... */}
```

Let's say you're a newbie in this project, and you don't know much. And you don't know what's `Hadron`. You're too shy to distract the more experienced teammates so you start searching the codebase. Of course you're not sure if you can find anything in the codebase about it, but if you're lucky enough, you'll find the description of `Hadron` somewhere a few thousand lines of code above.

Now wouldn't it be easier if the word `Hadrons` was a link to the definition? A link, like those that you have in the browser, you know? Something like this:

```js
// This function collides #Hadrons.
function hadron_collider() {/* ...whatever... */}
```

Then you could click on `#Hadrons` and go directly to the definition, that would look like this:

```js
/* 
@Hadron @Hadrons
In particle physics, a hadron /ˈhædrɒn/ (About this soundlisten) 
(Greek: ἁδρός, hadrós; "stout, thick") is a subatomic composite 
particle made of two or more quarks held together by the strong 
force in a similar way as molecules are held together by the 
electromagnetic force. Most of the mass of ordinary matter comes 
from two hadrons, the proton and the neutron.
*/
```

Note the `@Hadron` and `@Hadrons` which denote the `anchor`s for corresponding `link`s (`#Hadron` and `#Hadrons` accordingly).

So you don't spend time for searching and you don't have to worry if you could find the definition at all. 

Now the good news is, you can do that just now, just download the VSCode Extension called [HyperComments](https://marketplace.visualstudio.com/items?itemName=nur-publisher.hypercomments-vscode&ssr=false#overview).

This is only introduction, I am very curious if someone is interested, and if yes, I am going to write about the advanced usage and stuff.

Bonus:
the trick above you can do in any language or file format. However, for TypeScript and JavaScript (C++, Rust, Java etc. support is coming) you can also mention any in-language namespaces:

```js
type Hadrons = Hadron[]

// This function collides #Hadrons
```

or 

```js
class Hadron {}

// This function collides #Hadron 
```

Now, whenever you refactor, you don't have to guess if the documentation may become obsolete. HyperComments will warn you about that by underlining with red color the old names!
Nuxt.js with ESLint in VS Code
Tags: eslint, vscode, nuxt
Published: 2020-01-18 17:10:14

---
title: Nuxt.js with ESLint in VS Code
published: true
description: When ESLint doesn't work in your VS Code Nuxt.js project
tags: eslint, vscode, nuxt
cover_image: https://thepracticaldev.s3.amazonaws.com/i/vtryjb6ftyzc7e56059d.png
---
This is a short “note to self” type of article where a future me and perhaps someone else as well, might save some time googling for tooling configurations.

When setting up a Nuxt.js project with ESLint using create-nuxt-app version 2.10.0, I ran into this [problem](https://github.com/nuxt/create-nuxt-app/issues/274), where the project did not autofix on save.

I was not using Prettier so the error would stem from the ESLint integration solely. Since I had ESLint working in a previous Vue.js project out of the box, I decided to use those settings instead and installed the ESLint plugin used in the Vue.js project: `npm install --save-dev eslint-plugin-vue`

I then changed the VS Code settings.json file to:
```javascript
{
    "eslint.validate": [
        {
            "language": "vue",
            "autoFix": true
        },
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "javascript",
            "autoFix": true
        },
        {
            "language": "javascriptreact",
            "autoFix": true
        }
    ],
    "eslint.autoFixOnSave": true,
    "editor.formatOnSave": true,
}
```
And made the following changes to the .eslintrc.js file, where I removed the nuxt eslint extensions and added one for vue instead.
```javascript
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  extends: [
    //'@nuxtjs',
    //'plugin:nuxt/recommended',
    //'plugin:vue/recommended',
    'plugin:vue/essential',
    'eslint:recommended'
  ],
}
```

If you also need to add Prettier to your project, you might find some help in this post: ["How to properly set up Nuxt with ESLint and Prettier in VSCode"](https://medium.com/@gogl.alex/how-to-properly-set-up-eslint-with-prettier-for-vue-or-nuxt-in-vscode-e42532099a9c)
JavaScript Series – JavaScript Types Cont. – Part 4
Tags: javascript, tutorial, beginners, codenewbie
Published: 2020-01-18 17:08:39

Today we’re going to learning about Boolean.

Boolean is a pretty easy stuff. Boolean is just about two state. True & False.

See an example –

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/devk8nb1pcxinw78rkd8.png)

Boolean is 1 and 0 actually!

Boolean is really useful in a code. Example –

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/b8izwwoihnec5ijnlopz.png)

In the 3 > 4 we get the false. So this is how we can assume some logic is right or not.

Boolean data format is almost available in every programming language.

Do you want to use the ‘true’ and ‘false’ which is boolean or want to use 1 and 0 which also gave the same thing.

Let me know if you have any questions….


You can see the graphical version here
{% instagram B7d-QXCAjUD %}

Source Codes - { Check commits }
{% github nerdjfpb/javaScript-Series %}


Originally it published on [nerdjfpbblog](https://blog.nerdjfpb.com/javascript-part-4/). You can connect with me in [twitter](https://twitter.com/nerdjfpb) or [linkedin](https://www.linkedin.com/in/nerdjfpb/) !
Tipos de display no CSS
Tags: css, dev, frontend, ptbr
Published: 2020-01-18 14:40:21

---
title: Tipos de display no CSS
published: true
description: Listando os tipos de display existentes
tags: css, dev, frontend, pt-br
--- 

A propriedade `display` define o modo como os elementos irão ser posicionados.


Valores: 

1.Block

Posiciona o elemento como se ele fosse um elemento de bloco, ocupando todo o espaço possível. É o padrão de elementos como `div` e `p`.

```html
 <div class="example">
   <p>Paragrafo 1</p>
   <p>Paragrafo 2</p>
   <p>Paragrafo 3<p>
  </div>
```


![Display block](https://thepracticaldev.s3.amazonaws.com/i/mepksu9vf5nxa43mvb5w.png)



2.Inline

Posiciona o elemento fazendo-o ocupar o menor espaço possível.

```html
<div class="example inline">
  <p>Paragrafo 1</p>
  <p>Paragrafo 2</p>
  <p>Paragrafo 3<p>
</div>
```

```css
.example.inline p{
  display: inline;
}
```

![Display inline](https://thepracticaldev.s3.amazonaws.com/i/kirro9gr2j2dow7wvhey.png)

3.Inline-block

Posiciona combinando as propriedade dos `display` block e inline.

```html
<div class="example inline-block">
 <p>Paragrafo 1</p>
 <p>Paragrafo 2</p>
 <p>Paragrafo 3<p>
</div>

```

```css
.example.inline-block p {
  display: inline-block;
}
```

![Display inline-block](https://thepracticaldev.s3.amazonaws.com/i/78v4h9qgoeunr8ybw7lu.png)

4.flex

Permite criar um `display` flexível, considerando por padrão que todos estão em linha, permite definir como os elementos vão ser alinhados tanto verticalmente como horizontalmente e como deve se comporta em casos que não tiver espaço suficiente, além de como deve ser o seu crescimento de acordo com o espaço disponível.

```html
<div class="example flex">
 <p>Paragrafo 1</p>
 <p>Paragrafo 2</p>
 <p>Paragrafo 3<p>
</div>
```

```css
.example.flex {
  display: flex;
}
```

![Display flex](https://thepracticaldev.s3.amazonaws.com/i/qmi1i6iiz90kzohjgf85.png)

5.grid

Permite criar `display` composto por linhas e colunas, sendo possível definir o tamanho de cada espaço e o espaçamento entre eles.

```html
<div class="example grid">
  <p>Paragrafo 1</p>
  <p>Paragrafo 2</p>
  <p>Paragrafo 3<p>
</div>
```

```css
.example.grid {
  display: grid;
}
```

![Display grid](https://thepracticaldev.s3.amazonaws.com/i/hlztp6qmn3eme2ul662t.png)

6.none

Constroi o elemento no `dom`, mas não o renderiza na página.

```html
<div class="example none">
  <p>Paragrafo 1</p>
  <p>Paragrafo 2</p>
  <p>Paragrafo 3<p>
</div>
```

```css
.example.none {
  display: none;
}
```

![Display none](https://thepracticaldev.s3.amazonaws.com/i/f7e1ny8lw0vqals102su.png)

Os display block, inline, inline-block e none são aplicados tanto a nivel de elemento como de bloco, enquanto que o flex e grid são aplicados a nivel de bloco.

Todos os exemplos mencionados estão disponiveis no [codepen](https://codepen.io/willanepaiva/pen/ZEYqRRa).
The Swift Programming Language Companion: Functions
Tags: swift, ios, beginners
Published: 2020-01-18 16:36:51

This article is part of a series on learning Swift by writing code to The Swift Programming Language book from Apple.

Read each article after you have read the corresponding chapter in the book. This article is a companion to [Functions](https://docs.swift.org/swift-book/LanguageGuide/Functions.html). 

### Set up a reading environment

If you are jumping around these articles, make sure you read the [Introduction](https://dev.to/loufranco/the-swift-programming-language-companion-introduction-4k0a) to see my recommendation for setting up a reading environment.

### Exercises for Functions

At this point, you should have read [Functions](https://docs.swift.org/swift-book/LanguageGuide/Functions.html) in _The Swift Programming Language_. You should have a Playground page for this chapter with code in it that you generated while reading the book.

For this chapter, we're going to write functions inspired by the Reminders app.

In your Playground write code to do the following

1. Copy the `todo`, `done`, and `itemDict` variables from the previous chapter's playground. Or use this:

        var todo = [
            "Wash car",
            "Water plants",
            "Clean garage",
            "Plan dish for potluck",
        ]

        var done = [
            "Grocery shopping",
            "Call mom",
            "Do laundry",
            "Mow lawn",
        ]

        // var itemDict: [String: Bool] = ....
        // Make this yourself based on the Collection Types chapter playground. 
        // It should have the items from `todo` with the associated `Bool`

2. Make a new function called that takes two arrays of strings (`todo` and `done`) and returns a dictionary `[String: Bool]` that makes the `itemDict`. For this, you should already have the body of the function–you just need to declare the function and move the body in. Call this function `makeItemDict`. If you are having any problems at this point, you may need to re-read the Collection Types chapter.  Message me if you need help.

3. You should be able to create `itemDict` like this now:

        var itemDict = makeItemDict(todo: todo, done: done)

4. Make a function that takes `itemDict: [String: Bool]` and returns the items that are done. Call it `doneItems`. After you do that, you can write

        var done2 = doneItems(itemDict: itemDict)

5. Print out `done` and `done2` and note that they have the same items (they may be in a different order)

6. Make a function that takes `itemDict: [String: Bool]` and returns the number of done items.  Call it `numDone`. This should call `doneItems` to do part of the work.

We'll do more with functions in the next article.

### Next: 

The next article will provide more exercises for functions.  This is a big topic.
Pure CSS Custom Outlined Square Buttons
Tags: html, css, webdev, todayilearned
Published: 2020-01-18 16:12:20

Buttons are mostly used on a website to show an action after the click. So here we designed simply with custom Outlined Square Button in pure CSS.

We designed different types of attractive buttons in bootstrap, angular material and also in pure CSS.  In these elements, we used css3 properties to make our buttons elements more attractive and cool. Here we simply used background color and also use hover effects on mouse hover with border properties. This is responsive elements for all devices like mobile and tablets.

https://w3hubs.com/pure-css-custom-outlined-square-buttons/
Disabling GateKeeper (OSX) for a Single App
Tags: osx, gatekeeper
Published: 2020-01-18 16:12:12

If you have an app that won't run on OSX (you get an error about it being "damaged" and it suggests that you should delete it), you can disable GateKeeper for that app by running the following command in a terminal:

```
xattr -rd com.apple.quarantine "path/to/file"
```

Of course, before you go this route, make sure you trust the app! GateKeeper exists for a reason.