teleren/devto huggingface dataset:
Eslint for Vue projects in VSCode
Published: 2020-06-04 13:46:11

I'd like to share my VSCode and ESLint configuration that I use in my VueJS projects.

First configure VSCode

Install the following extensions

* ESLint
* Vetur

Add the following in the vscode settings

```json
"eslint.validate": [
  "vue",
  "javascript",
  "javascriptreact"
],
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
"vetur.validation.template": false,
"editor.formatOnPaste": true,
"editor.formatOnType": true,
"editor.formatOnSave": false,
"files.eol": "\n"
```

After creating your vue project with `vue create` run this npm install command

```bash
npm install -D eslint prettier babel-eslint eslint-config-airbnb-base eslint-plugin-import eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue
```

Remove any eslint configuration from your `package.json` file.

Create a `.eslintrc.js` file at your project's root

```javascript
module.exports = {
  root: true,
  env: {
    browser: true,
  },
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module',
  },
  extends: [
    'airbnb-base',
    'plugin:vue/recommended',
    'prettier/vue',
    'plugin:prettier/recommended'
  ],
  rules: {
    'comma-dangle': 'off',
    'class-methods-use-this': 'off',
    'import/no-unresolved': 'off',
    'import/extensions': 'off',
    'implicit-arrow-linebreak': 'off',
    'import/prefer-default-export': 'off',
    "vue/component-name-in-template-casing": ["error", "kebab-case", {
      "ignores": []
    }],
    'prettier/prettier': ['error', { 'singleQuote': true, 'endOfLine': 'auto' }]
  },
};
```

That's it.

Have fun!
Companies apply to you
Tags: javascript, react, go, csharp
Published: 2020-06-05 19:47:52

Have been working hard with my tech buddies to have start a platform called www.BriteHat.com

Here you can list your skills (c++, C#, GO, etc.) the salary you want and your location. If companies are interested, they apply to you.

Your contact info is only shared when you accept a companies' application. Why? Because unconscious biases exist in the world and you should only be judged on your skills.
Updating npm module version
Tags: node, npm
Published: 2020-06-05 19:46:56

---
title: Updating npm module version
published: true
description: 
tags: node, npm
//cover_image: https://direct_url_to_image.jpg
---

Updated npm modules because GitHub Dependabot notified me security alerts.
It's easy to use `npm-check`.

```shell
# Install checking module globally.
$ npm install -g npm-check

# Run.
# -u means "update"
$ npm-check -u

# Select all basically.
? Choose which packages to update. (Press <space> to select)
  
 Missing. You probably want these.
❯◯ normalize.css missing                          8.0.1   https://necolas.github.io/normalize.css
 ◯ babel-core devDep missing                      6.26.3  https://babeljs.io/
 ◯ browser-sync devDep missing                    2.26.7  https://browsersync.io/
 ◯ gulp devDep missing                            4.0.2   https://gulpjs.com
 ◯ gulp-file-include devDep missing               2.2.2   https://github.com/haoxins/gulp-file-include#readme
 ◯ gulp-plumber devDep missing                    1.2.1   https://github.com/floatdrop/gulp-plumber
 ◯ gulp-replace devDep missing                    1.0.0   https://github.com/lazd/gulp-replace#readme
 ◯ gulp-sass devDep missing                       4.1.0   https://github.com/dlmanning/gulp-sass#readme
 ◯ gulp-sourcemaps devDep missing                 2.6.5   http://github.com/gulp-sourcemaps/gulp-sourcemaps
 ◯ node-sass-package-importer devDep missing      5.3.2   https://github.com/maoberlehner/node-sass-magic-importer/tree/master/packages/node-sass-p
ackage-importer
  
 Major Update Potentially breaking API changes. Use caution.
 ◯ autoprefixer devDep missing            6.7.7   ❯  9.8.0   https://github.com/postcss/autoprefixer#readme
 ◯ eslint devDep missing                  3.19.0  ❯  7.1.0   https://eslint.org
 ◯ eslint-config-prettier devDep missing  2.10.0  ❯  6.11.0  https://github.com/prettier/eslint-config-prettier#readme
 ◯ gifsicle devDep missing                4.0.1   ❯  5.1.0   https://github.com/imagemin/gifsicle-bin#readme
 ◯ gulp-babel devDep missing              7.0.1   ❯  8.0.0   https://github.com/babel/gulp-babel#readme
```

**Reference**
* https://www.npmjs.com/package/npm-check
Adding Scripts to Specific Pages with Gridsome / Vue
Tags: vue, gridsome
Published: 2020-06-05 19:29:12

Originally posted @ https://rasulkireev.com/gridsome-page-scripts/

---

Let's say you want to add an external library to your Gridsome website. In my case, I really wanted to add [hypothes.is](https://hypothes.is) to my website.

> Hypothes.is tries to enable a conversation over the world's knowledge. In Layman's terms, it allows users to comment, highlight, and annotate content on any site. Adding it to my site, I will help people explore this tool and will hopefully drive more conversation about my posts.

**TL;DR**
Add script tags to your site via the `mounted` function.

```javascript
export default {
  mounted() {
        let hypothesisScript = document.createElement("script")
        hypothesisScript.setAttribute('src', 'https://hypothes.is/embed.js')
        document.body.appendChild(hypothesisScript)
  },
...
}
```

I can add hypothes.is to my site by adding the following script tag to my index.html, right above the closing body tag.

```html
<script src="https://hypothes.is/embed.js" async></script>
```

This will add the hypothesis sidebar to all my pages. This can be a good enough solution. However, I don't want to crowd each page on my site with this sidebar. Well then, how can I add it to specific Pages only?

Given Gridsome's structure, it is very easy to isolate specific pages. For example, we could target `Post.vue` if I only want this script in articles. Or I could target `About.vue` if I wanted to add to about page only.

```
├── content
|  ├── articles
|  ├── notes
|  ├── now
├── gridsome.config.js
├── gridsome.server.js
├── src
|  ├── components
|  |  └── socialShareButtons.vue
|  ├── index.html
|  ├── layouts
|  |  ├── Default.vue
|  ├── main.js
|  ├── pages
|  |  ├── 404.vue
|  |  ├── About.vue
|  |  ├── Articles.vue
|  |  ├── Index.vue
|  └── templates
|     ├── BookNote.vue
|     └── Post.vue
```

Now the question is: "How do I add the script tag?". If you added in the templates, it will show up and load in the middle of the page, which is not ideal. We want this script to be right inserted right before the closing body tag.

Well, we can do this with a `mounted` function:

```javascript
export default {
  mounted() {
        let hypothesisScript = document.createElement("script")
        hypothesisScript.setAttribute('src', 'https://hypothes.is/embed.js')
        document.body.appendChild(hypothesisScript)
  },
...
}
```

Let's review.

1. Create a variable/element called `script`
2. Set the src attribute to the library URL
    * Note: when you add a script via a script (very meta) async tag is added automatically, so no need to worry about it
3. `Mount` the element to the body


Now you have your desired external library only on pages you want.

If you have any feed back please leave it [on Twitter](https://twitter.com/rasulkireev/status/1268986330006073345) or [on HackerNews](https://news.ycombinator.com/item?id=23432720). Thanks a ton in advance!
NodeJS Quick Concepts from Scratch
Tags: node, nodetutorials, nodetutorialsineasyway
Published: 2020-06-05 19:14:20

<h1>NodeJS<h1>
<p>NodeJS is a dynamic, cross-platform, open-source and very powerful JavaScript framework and runtime environment that is built on the Google Chrome JavaScript V8 engine. Node.js allows us to run JavaScript on the server, that means it provides an event driven, non-blocking (i.e. asynchronous) I/O and cross-platform runtime environment for building highly scalable server-side applications using JavaScript.</p>

<h2>Why NodeJS</h2>
--NodeJS is a dynamic, cross-platform, lightweight, and open-source framework under MIT license.
--It uses JavaScript to build entire server side application.
--It runs on single-threaded, non-blocking, asynchronous programming by default which means it is very memory efficient and loads faster than other frameworks.

<h2>What NodeJS can Do ?</h2>
--NodeJS can interact with database to generate dynamic page.
--NodeJS can create, open, read, write, delete, and close files on the server.
--NodeJS can add, delete, modify data in database.


To learn full <a href="https://www.tutorialslogic.com/node-js">NodeJS Tutorials</a> from the origin source <a href="https://www.tutorialslogic.com/node-js/introduction">click here</a>
Asynchronous JavaScript to learn before JavaScript Frameworks
Tags: javascript, react, webdev, crosspost
Published: 2020-06-05 19:09:02

In this series of articles, we aimed to cover the following topics:
- [Important ES6 Features](https://medium.com/javascript-in-plain-english/things-to-learn-before-learning-a-javascript-framework-b7baec310247)
- [Objects and Array methods](https://medium.com/javascript-in-plain-english/object-and-array-methods-to-learn-before-javascript-frameworks-59728dcea306)
- Asynchronous JavaScript and Fetch API (this article)
- NPM and import/export modules in JavaScript
In the last two articles, we have already covered the first two topics so, in this article, we will talk about Asynchronous JavaScript and Fetch API.
So, without wasting any time let’s get started with the topic:

Before jumping into the details of Asynchronous JavaScript, let us first talk about the execution of Synchronous Code in JavaScript. We will consider a simple example to understand this:

```
function sayHi() {
  console.log('Hi!');
}

console.log('Program starts'); // prints: Program starts
sayHi();                      // prints: Hi!
console.log('Program ends'); // prints: Program ends
```

As you can notice, it follows a sequential order, that is all the tasks are executed in the order in which they were coded. Internally the JavaScript engine executes these tasks with the help of Call Stack.
Let’s see how the Call Stack helps in executing our code:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gidmb2m2p3y2oirrra2c.jpg)

As you can notice, The task that is currently in execution gets added to the Call Stack and is popped from it once it completes its execution.
So, Now, you have an idea about the execution of synchronous code and the Call Stack, let’s get started with asynchronous javascript.

[Read More>>](https://medium.com/javascript-in-plain-english/asynchronous-javascript-to-learn-before-javascript-frameworks-9b63972290c2)
Laravel SQL Debugging
Tags: laravel, performance, sql, debugbar
Published: 2020-06-05 18:12:33

If you're not using [Laravel DebugBar](https://github.com/barryvdh/laravel-debugbar) you should really think about it.

Improving the performance of your Laravel app is a lot more than just removing N+1 db problems. DebugBar shows you timings and also model and memory usage.

But if you're not keen, or you can't use DebugBar for some reason (It can be a mission getting it working with API's etc) then a nice solution is to have a little Database Listener which logs all the SQL Queries into your laravel log.

This can also be very useful for debugging problems on staging or live environments as you can turn it on/off easily based on the env/config



How it works:

Add this to your AppServiceProvider's boot method
```
 if (env("SQL_DEBUG_LOG"))
    {
        DB::listen(function ($query) {
            Log::debug("DB: " . $query->sql . "[".  implode(",",$query->bindings). "]");
        });
    }

```

If you're using it in production I'd also recommend pulling that env into config and using that, as then you can (and should) cache the config

Another issue with it that I've found is if the sql call itself fails, and throws an exception, it's not logged as DB::listen only logs after a successful call and the exception breaks out before it get's back to the listen


If you're having laravel performance issues, another great resource to look at is the eloquent course from Jonathan Reinink
https://eloquent-course.reinink.ca/
Web development magic
Published: 2020-06-05 15:21:11

Web development is one of good career for every CS peers not only for CS fellows but other streams fellows also likes website and it's functions. 

Website plays a main role in today's life. Everything that happen is initiated by good website only. 

Today's websites are grew more interactive and comfortable access for every users. How it can be done? 
The good absolute answer is by the help of great web developers behinds for a good websites. They do more creative and technical works to build any websites. 

Web development needs more creativity knowledge and technical support. Without both these we can say that it is a good website. And these two knowledge are mostly describe as a frontend and backend. 

What is Frontend? 
Frontend development is nothing but a creative knowledge of the webpage contents this plays a major role in interaction and information. 
Skills required to be a good frontend developers are HTML, CSS, JavaScript, Reactjs, Angularjs etc.these are some programming languages needed for developing frontend more creatively. 

What is Backend? 
Backend is nothing but creating a function for accessing the webpage and store and retrieve any data in the website for example if you go to any admission website for colleges or schools you might seen the interactive websites for that particular organisation. So that front beautiful page is done by frontend developers. 
Next if you click on application form for fill the application you can enter all the details. And it were runs on backside of the website by the help of browser. Then it will shown you that the condition of your application. So this is the technical work called backend work done by backend developers. 

Skills required for backend are PHP, MySQL, SQL, nodejs, Mongodb etc... 

But how these backend works ? 
Yes it's a correct query. Backend developers were connect the form filling or any other input function to the database of the respected organisation. 
When you fill the form. Your data were directly stored in their database. This is how the website process works. 

Thank you!!!
Free Design Resources - 10 FREE Illustration Resources for your Next Web Design Project
Tags: html, css, webdev, javascript
Published: 2020-06-05 18:00:38

Have you ever wonder how to add  modern looking vector illustration on your website. and you are a web developer, not a vector designer, fortunately, you have found this video, 

In this video i show you where to find -
     👉 Where to find free design illustration resources
     👉 How to download them
     👉 How to use them
     👉 100% copyright free

If you guys find this useful share with your friends..........

Link - https://youtu.be/Q7kRXjErz-A
Rule SCSS with BEM (Block.Element.Modifier) methodology
Tags: bem, sass, css, beginners
Published: 2020-06-05 17:57:37

Here is a simple example where we use BEM notation to create a Card component. 

# HTML

Using the BEM notation we are defining the main **block** (the card) which contains **elements** (__) and **modifiers** (--).

```
<div class="card">
  <span class="card__img"></span>
  <div class="card__content">
    <ul class="card__list">
      <li class="card__item card__item--active">Adobe XD</li>
      <li class="card__item">Figma</li>
      <li class="card__item">Sketch</li>
    </ul>
    <p class="card__desc">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero atque iste nobis quidem dolore error animi voluptas quia corrupti consectetur.</p>
    <a class="card__link" href="#">Visit the link</a>
  </div>
</div>
```

# CSS

First we define the structure of the html and body elements.

```scss
body, html {
    margin: 0;
    height: 100vh;
}

body {
    display: grid;
    place-content: center;
    height: 100vh;
    background: rgb(238, 238, 238);
    font-family: 'Nunito', sans-serif;
}
```

Then we define the card **block** (.card) with its **elements** (__) and **modifiers** (--) using the BEM methology.

```scss
.card {
    padding: 0 5em;
    width: 300px;
  
    &__img {
      display: block;
      height: 300px;
      width: 100%;
      background: #2ae897;
    }

    &__content {
        padding: 1.5em;
        background: white;
    }

    &__list {
        list-style-type: none;
        display: flex;
        margin: 0;
        padding: 0;
    }

    &__item {
        padding: .3em .5em;
        margin-right: .5em;
        background: rgb(230, 230, 230);
        border-radius: .3em;
        font-size: .85em;

        &--active {
            background: #3b3030;
            color: #FFFFFF;
            font-weight: bold;
        }
    }

    &__link {
        background: #2ae897;
        color: #3b3030;
        text-decoration: none;
        padding: .5em 1em;
        border-radius: .5em;
        display: inline-block;
        margin-top: .5em;
        font-weight: bold;
        right: 0;
      
        &:hover {
            background: #575757;
            color: white;
        }
    }
}
```


# Final result

{% codepen https://codepen.io/AlexBeje/pen/ExPazWx %}

# Resources

> [You Probably Need BEM CSS in Your Life (Tutorial)](https://www.youtube.com/watch?v=er1JEDuPbZQ&t=147s)
Is there any weekly Android code challenges?
Tags: android, kotlin, challenge, weekly
Published: 2020-06-05 17:40:27

I was thinking about how to motivate me and others to keep improving Android skills, and I think that regular challenges can help to do it, but I never found something like this for Android.

Do you know any platform or initiative that is currently proposing this challenges or suggesting this type of content for Android?

Thanks!
What was your win this week?
Tags: discuss, weeklyretro
Published: 2020-06-05 17:23:46

---
title: What was your win this week?
published: true
description: Learned something new and important? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

👋👋👋👋

Looking back on your week -- what was something you're proud of?

All wins count -- big or small. 

Examples of 'wins' include:

- Starting a new project
- Getting a promotion!
- Fixing a tricky bug
- Learning new things about the [Black Lives Matter](https://dev.to/black-lives-matter) movement and getting a donation matched, etc.

Hope everyone has a good, safe weekend.
C++
Tags: codenewbie
Published: 2020-06-05 17:13:00

The mobile phone, as it is now called, is becoming a computer, a cellphone used java, but it's integrating into, soon, C++, so why don't you take the red pill and chill out because Microsoft will take over and do it all for you, and I am so sure there is no nesessary codeing needed, there are so many apps, stop making apps and start paying attention.
Best laptop/ desktop specs for a developer
Tags: hardware, laptops, computing, dev
Published: 2020-06-05 16:43:02

---
title: Best laptop/ desktop specs for a developer
published: true
description: 
tags: hardware, laptops , computing, dev
cover_image: https://usabilitygeek.com/wp-content/uploads/2013/10/how-to-choose-laptop-for-web-design-and-development.jpg
---

So lets start a healthy discussion thread on what laptop or desktop specs are you using on your job daily as a developer.
Direito Civil
Published: 2020-06-05 16:37:55

  <p>O que é Direito Civil? </p>

<p>Direito Civil é o ramo do <a href="https://www.dicasconcursos.com/direito-civil/">Direito</a> que engloba o conjunto de normas jurídicas responsáveis por regular os direitos e obrigações de ordem privada em relação as pessoas, seus bens e suas relações. É o principal ramo do Direito Privado. </p>

<p>O direito civil é matéria abrangente e disciplina direitos e deveres das nossas relações, sejam com pessoas ou coisas. As relações familiares também estão inclusas. Cuida do nascimento até a morte do indivíduo.  </p>

<p>Ainda que muitas vezes não percebamos, o direito civil se faz presente em nosso dia a dia. </p>

<p>No cotidiano, quando alguém, em uma conversa, diz: “tenho um imóvel” ou “sou divorciado”, está fazendo uso de uma faculdade prevista no código civil. No primeiro exemplo, faz relação à propriedade e no outro ao estado civil. Deu para entender a importância dessa área para a sociedade? </p>

<p>Pablo Gagliano e Rodolfo Filho conceituam direito civil como o ramo do Direito que disciplina todas as relações jurídicas da pessoa, seja umas com as outras (físicas e jurídicas), envolvendo relações familiares e obrigacionais, seja com as coisas (propriedade e posse).  </p>

<p>O direito civil tem como finalidade regular a vida em sociedade, dando um norte do que se pode ou não fazer para que a ordem social seja mantida. É considerado a principal matéria do direito privado. </p>
Loops
Tags: javascript
Published: 2020-06-05 16:04:31

What is the use of a counter variable?
It is used to track the number of times a block of commands is ran.

What happens when a counter variable reaches or exceeds a specified value?
When it reaches or exceeds a specific value, the loop stops.

Which is the most common counter variable?
The most common counter variable is i.

What is a command block?
It is a set of JavaScript commands enclosed within a set of curly braces.

Which is the main difference between a while loop and a for loop?
The main difference is the for loops are used whenever you have a counter variable. The while loops are used with conditions.
Custom Path tsconfig.json TypeScript
Published: 2020-06-05 16:03:31

Cuando un proyecto crece y tenemos muchas carpetas, las rutas se ven super largas, y la verdad no se ve muy llamativo, para esto podemos customizar nuestras rutas en el archivo tsconfig.json, antes de ellos miremos los siguientes casos:

```javascript
import { NavRoute } from '../../../../nav-routing';
import { NavigationService } from '../../../services/navigation/navigation.service';
```
```javascript
import { Feacture} from '../../../../../../core/service/interfaces/feacture';

```
Las rutas son engorrosas verdad, quien no ha visto esto en sus proyectos :scream:
# Path mapping al rescate

TypeScript permite el uso de la asignación de ruta que permite especificar rutas de módulo arbitrarias (que no comienzan con "/" o ".") Y asignarlas a rutas físicas en el sistema de archivos en las opciones del compilador en el archivo tsconfig como se muestra a continuación:
```json
...
"compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@demo/app/*": [
        "app/*"
      ],
      "@demo/core/*": [
        "app/core/*"
      ],
      "@demo/auth/*": [
        "app/auth/*"
      ],
      "@demo/components/*": [
        "app/core/components/*"
      ],
      "@demo/pages/*": [
        "app/page/*"
      ],
      "@demo/services/*": [
        "app/core/services/*"
      ],
    },
...
```
La primera propiedad que debemos agregar es **baseUrl**. Fíjense que las rutas se resuelven en relación con **baseUrl**.
La segunda propiedad es **paths**, esto le indica al compilador que cualquier módulo de importación que coincida por ejemplo, con el patrón **"@demo/app/*"**, busque en esa ubicación.

Ojo chicos la idea de personalizar nuestras rutas es evitar esas enormes rutas engorrosas y tener más legibilidad de "que es lo que estamos importando"; recuerden que aunque hayan personalizado las rutas también pueden seguir usando las rutas relativas, las pueden combinar si desean.

# Datos extras 😎

Si estas usando Visual Studio Code hay que realizar unos ajustes para que el **Auto Import** reconozca nuestras rutas, vayan a Setting, luego escojan la opcion "Open Setting JSON" y agregan lo siguiente

```json
 "typescript.preferences.importModuleSpecifier": "non-relative"
``` 
Y eso es todo por hoy amigos, espero que esta información les ayude, aquí les dejo un repositorio en GitHub con las configuraciones que hemos visto https://github.com/jimmyhdolores/demo-custom-patch-angular.git

Si tienen alguna duda o consulta me escriben, no hay problema 🤗
Sigueme en Github https://github.com/jimyhdolores