teleren/devto huggingface dataset:
About refactoring, code quality & trends in software development
Tags: todayilearned, beginners, programming
Published: 2019-12-06 13:26:39

*TL;DR style notes from articles I read today.*

### [Refactoring is about features](http://bit.ly/37ouJP8)

- Always refactor in the service of a feature.
- Find code that is frequently being worked on. Try to refactor that code. 
- It seems faster to write a new feature in a complex system than to refactor the old system first and then add the new feature. But the overall time that you would spend debugging, rolling back releases, sending out bug fixes, writing tests for complex systems will be lesser of you refactor first. 
- Pick a feature that you want to implement, and figure out what you could refactor that would make it easier to implement it. 
- Set boundaries around your code. Eg: “I’m not going to refactor anything outside of my project to get this feature done.”
- “There is no perfect design, there is only a better design.” So, avoid over-engineering or spending too much time on figuring out how to refactor something. 

*[Full post here](http://bit.ly/37ouJP8), 10 mins read*

---

### [Five habits that help code quality](http://bit.ly/2XCQYwe)

- Write unit tests to save you from regression bugs. Unit tests also force you to write code that is less tightly coupled and more logically factored.
- Keep coupling to a minimum. 
- Apply the Principle of Least Astonishment - design components of your system in a way that they behave how people using your system expect them to behave. 
- Minimise cyclomatic complexity - number of independent paths through a given piece of code. 
- Write clear, unambiguous, self-explanatory names to minimise confusion.

*[Full post here](http://bit.ly/2XCQYwe), 6 mins read*

---

### [Happy customers, quality code: the new trends in software development](http://bit.ly/2KN5iwY)

Results from Atlassian’s research with 500 software developers & IT professionals, conducted at the beginning of 2019.
- It takes an average of 3.3 different tools to know the real status of the project and teams use an average of 4.3 tools to move code from development to production. 
- 71% of software & IT teams who use a microservices structure believe it’s easier to test or deploy features. 
- 57% developers reported fewer bugs or outages by adopting CI/CD solutions.
- Feature flagging reduces risks while rolling out features to customers. 63% developers who use feature flagging reported better testing of features or higher quality software.
- Outcome-driven development is shifting the focus away from feature delivery speed to the customer value features creates.

*[Full post here](http://bit.ly/2KN5iwY), 4 mins read*

---

*[Get these TL;DR style notes directly to your inbox every weekday by signing up for my newsletter, in.snippets(), here.](https://mailchi.mp/appsmith/insnippets?utm_source=devto&utm_medium=post08&utm_campaign=is)*
Whatever you learn, it's important to put that into practice
Tags: beginners, codenewbie, hackathon, learntocode
Published: 2019-12-06 12:53:32

Chris Pine (author of 'Learn to Program') said, **"Programming isn't about what you know; it's about what you can figure out."**

I realized this when I was a 1st year engineering student in Bhopal (India) and wanted to attend a hackathon that was being hosted in another university.

On the day of the event, I was the only one from my university there. I wouldn't say I was very skilled but I couldn't miss it, because I knew I might not win the prize but surely I'd meet new people and learn something new, no matter how big or small.

I created a simple app and managed to clear the 1st level screening, in the second round I had to explain my solution to one of the judges. While he was checking my app, I kept explaining to him every step I had taken while building that app.

He clicked a button and then there were three dots moving from left to right in a loop. I said, *"because it takes some time to fetch the data, I included this progress indicator to let the user know that something is happening.."*

He looked up.. he seemed a little surprised. I had learned about progress indicators and many other UI controls just a few days before the hackathon.

As it turned out, he was happy to see me learning new things and using them in my projects. He didn't tell me this but I could understand because I had won the 3rd prize!

Whatever you learn, it's important to put that into practice because each small win will inspire you to learn more. Its always good to have a positive mindset and energy while you are learning.

And most importantly, **don't give up!** Errors will occur, and small typos could trip you up for hours, but this is all part of the learning process.

You don't have to [learn](http://bit.ly/progatefromyashdevtobloghackathons) everything at once, just a little progress every day and you will be good to go 👍

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1575627151444/E3X_N2d2G.jpeg)
fd instead of find
Tags: fd, find, linux
Published: 2019-12-06 12:44:46

I've been using [fd](https://github.com/sharkdp/fd) instead of find locally.

It describe itself as "A simple, fast and user-friendly alternative to 'find'".

From [their readme](https://github.com/sharkdp/fd/blob/master/README.md).

## Features
* Convenient syntax: `fd PATTERN` instead of `find -iname '*PATTERN*'`.
* Colorized terminal output (similar to *ls*).
* It's *fast* (see [benchmarks](https://github.com/sharkdp/fd/blob/master/README.md#benchmark)).
* Smart case: the search is case-insensitive by default. It switches to
  case-sensitive if the pattern contains an uppercase
  character[\*](http://vimdoc.sourceforge.net/htmldoc/options.html#'smartcase').
* Ignores hidden directories and files, by default.
* Ignores patterns from your `.gitignore`, by default.
* Regular expressions.
* Unicode-awareness.
* The command name is *50%* shorter[\*](https://github.com/ggreer/the_silver_searcher) than
  `find` :-).
* Parallel command execution with a syntax similar to GNU Parallel.

Try it out.
rg instead of grep
Tags: rg, grep, linux
Published: 2019-12-06 12:18:15

[ripgrep](https://github.com/BurntSushi/ripgrep) aka rg provides great defaults to search inside files.

It automatically skip .git directories and files ignored by git reducing the amount of data being searched.

These are sane defaults to have and can safe you a lot of development time.

Searching for the same word inside the same directory gives me this.

## With rg

```shell
time rg -li 'pattern'
```

```text
real    0m17.514s
user    0m15.610s
sys     0m8.822s
```

## With grep

```shell
time grep -ilR 'pattern'
```

```text
real    1m9.520s
user    0m29.768s
sys     0m8.352s
```
Capitalize first letter in every sentence?
Tags: javascript, help
Published: 2019-12-06 12:10:51



I'm learning how to capitalize the first letter of each word in a string and for this solution I understand everything except the word.substr(1) portion. I see that it's adding the broken string but how does the (1) work?

function toUpper(str) {
return str
    .toLowerCase()
    .split(' ')
    .map(function(word) {
        return word[0].toUpperCase() + word.substr(1);
    })
    .join(' ');
 }
 console.log(toUpper("hello friend"))
exa instead of ls
Tags: exa, ls, linux
Published: 2019-12-06 12:07:08

[exa](https://github.com/ogham/exa) describe itself as the "A modern version of ‘ls’. https://the.exa.website/".

I'm using exa instead of ls locally.

Here are my aliases making this official.

```shell
alias l='exa'
alias la='exa -a'
alias ll='exa -lah'
alias ls='exa --color=auto'
```

Try it out.
bat instead of cat
Tags: cat, bat, linux
Published: 2019-12-06 12:03:42

I replaced my cat in linux with [bat](https://github.com/sharkdp/bat).
I'm using this alias in my shell environment.

```shell
alias cat='bat --style=plain'
```

bat gives me syntax highlight, pagination, search in the file being printed and more.

Give it a try.
Easier Dynamic Programming with Kotlin auto-memoized functions
Tags: dynamicprogramming, algorithms, kotlin
Published: 2019-12-06 11:35:44

---
title: Easier Dynamic Programming with Kotlin auto-memoized functions
published: true
description: Dynamic Programming with Kotlin with memoized functions
tags: dynamic programming, algorithms, kotlin
---

A common theme in programming questions for interviews is a Dynamic Programming question.
This kind of question is something that would require a huge number of calculations, but mostly of the same values, over and over again.
Generally the way to solve these efficiently is to store the previous result of calculating them and return those if we have it, which greatly reduces the number of calculations you have to do.

The process of storing what you've previously calculated is called memoization. Pretty close to memorization, in spelling and meaning, but not the same word!

An easy way to do this, is to look at this article about [Kotlin Purity and Function Memoization](https://jorgecastillo.dev/kotlin-purity-and-function-memoization) by [Jorge Castillo](https://twitter.com/JorgeCastilloPr/) who's really skilled at pushing the limits of functional programming.

Have you solved algorithmic questions using functional programming and memoization in Kotlin? Let me know in the comments!
Introduction
Tags: angular
Published: 2019-12-06 11:34:54

In this series of articles, I want to share approaches to building an app with [Angular](https://angular.io/).

Starting a new project from scratch is like facing a blank page - you'll never know what it will be like when it's over. For me, this always the route to wonders.

In continuation of the allegory of a blank page - it is very important which tools you will use. Pencils, chalks, coal, or paint - each of these tools require specific knowledge and a certain amount of mastery.

The same is true for the world of IT.

A lot of tools exist to achieve goals. Among these tools, there are different libraries/frameworks to build a user interface: [React](https://reactjs.org/), [Vue](https://vuejs.org/), [Svelte](https://svelte.dev/), [Angular](https://angular.io/), etc.

All of these wonderful solutions require the [Node.js](https://nodejs.org/) and NPM (node package manager) to be at least installed. Moreover, the tooling provided by these packages runs in the Node.js environment.

Does the above mean that it is a prerequisite to know [Node.js](https://nodejs.org/) and how it works?

No. The maintainers of these packages made their usage as simple as possible.

However, to get started a new project, you need to install/setup/configure some set of software.

So, here comes the first article of the series, and it's called Prerequisites.
GraphQL-NodeJS
Tags: node, graphql, typescript, opensource
Published: 2019-12-06 11:28:14

# Intro

For a while now I've wanted to jump into the deep end of GraphQL and see what all the fuzz is about.

And oh my I wish I did it sooner.

## So, what is it?

GraphQL is A query language for your API, this gives you the ability to ask for exactly what you need from the API and nothing more.

## Why should I use it?

This is something that works amazing for big API's like the Halo 5 Game API that I used in my example.

A normal player has about 20 000 lines of data but for most of the calls I make I only use a fraction of that (24 to be exact). Reducing my calls to only get what I need gives me a big performance bonus and I'm able to use less data on the client side.

Returning a smaller JSON object makes coding on the front end a lot easier than previously.

```javascript
// Sample of Possible Queries
let queryObjectSample = {
    Gamertag: String,
    Xp: Number,
    SpartanRank: Number,
    HighestCsrAttained: {
      Tier: Number,
      DesignationId: Number,
      Csr: Number,
      PercentToNextTier: Number,
      Rank: Number
    },
    Stats: {
      TotalKills: Number,
      TotalHeadshots: Number,
      TotalMeleeKills: Number,
      TotalAssassinations: Number,
      TotalGroundPoundKills: Number,
      TotalShoulderBashKills: Number,
      TotalPowerWeaponKills: Number,
      TotalDeaths: Number,
      TotalAssists: Number,
      TotalGamesCompleted: Number,
      TotalGamesWon: Number,
      TotalGamesLost: Number,
      TotalGamesTied: Number,
      TotalGrenadeKills: Number,
      TotalSpartanKills: Number,
    },
    TotalTimePlayed: String
}

```

Here is a sample of what I return opposed to the 20 000 fields:

```json
{
    "data": {
        "Gamertag": "NicmeisteR",
        "HighestCsrAttained": {
            "Csr": 1872,
            "Rank": 78
        },
        "Stats": {
            "TotalKills": 34834,
            "TotalDeaths": 31017
        }
    }
}
```

To get the above data all I have to do is make an API call to my Express NodeJS server and with the below query to retrieve what I need.

```javascript
var dataString = {
    "query": 
        `{ 
            Gamertag, 
            HighestCsrAttained {Csr, Rank},
            Stats { TotalKills, TotalDeaths} 
        } 
`};
```

## How to get started
Go over to [GraphQL](https://graphql.org/code/) and select your language of choice and follow through with the tutorial. 

GraphQL is super scalable and flexible.

Alternatively you can also check out my Github Repository [GraphQL-NodeJS](https://github.com/NicmeisteR/GraphQL-NodeJS) to get straight into the action and see how it all comes together.

## Conclusion

GraphQL is something I would high recommend checking out, although it's still relatively new a lot of employers are on the lookout for people with knowledge around it. 

Check out the repository for the project here: https://github.com/NicmeisteR/GraphQL-NodeJS
Angular 9|8 Checkbox Tutorial with Multi Checkbox Validation
Tags: angular, angular987, angularcheckbox, angularmulticheckboxvalidation
Published: 2020-02-01 19:07:32

---
title: Angular 9|8 Checkbox Tutorial with Multi Checkbox Validation
published: true
date: 2019-12-06 11:09:01 UTC
tags: Angular, Angular 9|8|7 , Angular Checkbox ,Angular Multi Checkbox Validation
canonical_url: https://www.positronx.io/angular-checkbox-tutorial/
---

The post [Angular 8|9 Checkbox Tutorial with Multi Checkbox Validation](https://www.positronx.io/angular-checkbox-tutorial/) appeared first on [positronX.io](https://www.positronx.io).

**A step by step tutorial on handling multiple checkboxes in Angular 8|9, we will learn how to create, select and unselect multiple checkboxes and validate checkboxes with Angular Reactive Forms.**



A checkbox is also known as the tick-box and it is a Graphical User Interface widget that allows a user to choose one or many possible options.

[Click here to read more](https://www.positronx.io/angular-checkbox-tutorial/)
I'm curating a daily Frontend dev stuff, would you read it?

Tags: css
Published: 2019-12-06 10:37:12

Hello everyone,,
I have this crazy fear that writing lots of JavaScript would make my other Frontend skills suffer.

I asked a few people how they stayed on top of core web stuff (CSS Grids, browser support, Accessibility, etc). I was hoping I would find something more focused on core web stuff. I didn't find any.https://portchecker.pro/

After a few months of thinking through it, I decided to curate one myself. https://reverseimagesearch.onl https://emailchecker.vip/ 

I started betterweb.xyz as an attempt to stay on top of core web stuff by curating every day. I've been doing this for a week or so.

I would love you guys to check it out, possibly suggest ways I could focus more on core web stuff.

Thanks.
Wrap a text field in a component with Vue.js
Tags: vue, javascript
Published: 2019-12-06 10:01:00

> This post has been updated: https://dev.to/valentinprgnd/custom-v-model-with-vuejs-update-3han

While answering questions on Stack Overflow, one question that comes back a lot is how to wrap a form input into a Vue component and still be able to use `v-model` amazing shorthand.

To answer this question, we need to understand how `v-model` works first. 

## What is `v-model`?

`v-model` is syntax sugar that Vue.js provides to add to things to our component declaration: 

- a `:value` data binding
- an `@input` event handler

For example: 

```javascript
<MyComponent v-model="myVariable" />
```

is essentially the same as: 

```javascript
<MyComponent :value="myVariable" @input="(value) => myVariable = value" />
```

## Wrapping a text input into a component

Here's a concrete example of how to wrap a basic text input into a Vue component:

```javascript
<template>
  <div class="custom-input">
    <input v-model="localValue" placeholder="Enter your name">
  </div>
</template>

<script>
export default {
  name: "TextField",
  props: {
    value: String // 1. Receives the value as a prop
  },
  data() {
    return {
      localValue: ""
    };
  },
  created() {
    this.localValue = this.value; // 2. Copy the value in a local value variable

    // Set a watcher to emit the changes to the parent component
    this.$watch("localValue", value => {
      this.$emit("input", value);
    });
  }
};
</script>

```

Multiple things happened here: 

1. We need to tell our component we are receiving a `value` prop from the parent component
2. We need to copy the value of the `value` prop to a scoped variable of our component, here it's `localValue`
3. We setup a watcher to watch changes on the `localValue` variable and emit these changes to the parent component using `this.$emit`


## FAQ

### Why set the watcher?

We set up the watcher here to make sure the parent component receives the updates on the `input` event (meaning when you type in the field) every time the `localVariable` is updated (itself receiving the result of the input event on the input field).

### Why after copying the value?

We set the watcher after the initial assignment of the value to avoid creating an infinite loop when initializing the component with a existing value (using it in an edit form for example).

---

Here's a code sandbox demonstrating the whole process in a small Vue app:

{% codesandbox gracious-goodall-xxqrl %}
Veterans who code
Tags: watercooler
Published: 2019-11-20 19:36:13

## Quick stats

 - Veterans make up 7% of the US population
 - 80% of veterans leave the service without a job lined up
 - 200,000 veterans leave the service each year

## A Few Stories

### Kelly Macleod
Kelly, who is now a project manager at Top Coder, coded for fun as a child and later went into the National Guard. Upon leaving the military, she didn't go into coding. Later a job assessment quiz reminded her of the fun she had coding *Sailer Moon* fan sites. That's when she found her current job.

### Mark Seip
Mark, who is now a principal analyst at MITRE​, spent 24 years in the Navy. He works with AI and feels his experience as a pilot helped him be resilient and able to learn quickly.

### Garry Roy
Garry started as an engineer and later joined the Navy reserve where he maintained computer systems. He later started his own IT services firm.

### Sheila Jones
Shiela, once a primary school teacher and now a National Guard vet, was looking for a way to use her new skills. She took a project management course and is now a process analyst at Cisco.

### AJ Kelly
AJ hoped to become a programmer and joined the Air Force to do so. He didn't end up with the job he was hoping for. So, he used his free time to learn what he could. His efforts paid off as he is now an information security engineer at Telesis.

---
Most of this information came from an article written by  [Roberto Torres](https://twitter.com/TorresLuzardo) wrote about [5 US military veterans and their transitions into tech](https://www.ciodive.com/news/veterans-tech-workforce/566965/).
Python Training in chennai
Tags: python, training
Published: 2019-12-06 09:42:20

Python is relatively simple, so it's easy to learn since it requires a unique syntax that focuses on readability. Developers can read and translate Python code much easier than other languages. In turn, this reduces the cost of program maintenance and development because it allows teams to work collaboratively without significant language and experience barriers.  \

Checkout: https://www.credosystemz.com/training-in-chennai/best-python-training-in-chennai/
Helpful online tools
Tags: todayilearned, todayisearched
Published: 2019-12-06 08:50:38

I was looking for a BSON to JSON converter. In the process I came across a very large collection of online string-manipulation tools.
>[Online string tools](https://onlinestringtools.com/) is a collection of useful string manipulation utilities. All string tools are simple, free and easy to use. There are no ads, popups or other garbage. Just string utilities that work right in your browser. And all utilities work exactly the same way — load a string, get the result.

Interestingly, there's a dropdown on the top right that gives access to a long list of other tool collections. There are IMAGE tools, TSV tools, XML tools and many more. They're working on a BSON to JSON converter but it's not finished yet.
Introducing Vue GridMultiselect - Simple Multi-Select Component With Items Displayed in a Table Like UI
Tags: vue, javascript, opensource, webdev
Published: 2019-12-06 08:21:03

---
title: Introducing Vue GridMultiselect - Simple Multi-Select Component With Items Displayed in a Table Like UI
published: true
description: Vue GridMultiselect, a Simple Multi-Select Component With Items Displayed in a Table Like UI
tags: #vue, #javascript, #opensource, #webdev
---

Lately, I've been working on a Vue component called Vue GridMultiselect. It's a simple component and it gives you the ability to select items and display them in a table-like UI. Like a dropdown list but a little different.

Core Features and Characteristics

- No dependencies
- Searching
- Grouping
- Disabling Items
- Row Details
- Easily configurable
- Custom slots
- Menu Positioning
- V-model support
- Vuex support

Example usage:

HTML

```html
<template>
  <GridMultiSelect 
    :items="items" 
    item-key="id" 
    item-label="name" 
    v-model="selectedItems" 
  />
</template>
```

JS

```js
import GridMultiSelect from 'vue-gridmultiselect';
import 'vue-gridmultiselect/dist/vue-gridmultiselect.css';

export default {
  name: "example",
  components: { GridMultiSelect },
  data() {
    return {
      selectedItems: null,
      items: [
        { id: 1, name: "San Francisco" },
        { id: 2, name: "Las Vegas" },
        { id: 3, name: "Washington" },
        { id: 4, name: "Munich" },
        { id: 5, name: "Berlin" },
        { id: 6, name: "Rome" }
      ]
    };
  }
};
```

It's still a work in progress, and by publishing this post, I'm providing access to the alpha version.

I've published a pre-release, and you can find the source code [here](https://github.com/ProticM/vue-gridmultiselect), and the documentation [here](https://proticm.github.io/vue-gridmultiselect/).

Looking forward to your feedback. If you find it useful show your love by starring the repo :).