teleren/devto huggingface dataset:
Welcome Thread - v46
Tags: welcome
Published: 2019-10-29 14:43:01

---
title: Welcome Thread - v46
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
---

![lego hello](https://media.giphy.com/media/VeBeB9rR524RW/giphy.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
6 TIPS to write better software INSTANTLY
Tags: software, development, tips, programming
Published: 2019-10-29 14:23:18

---
title: 6 TIPS to write better software INSTANTLY
published: true
description: Hey y'all, my friend Almas and I hope you enjoy this video. Let us know if you have any questions or if you would like to see a tutorial video from the mentioned points. Feel free to share and see you soon. Thanks for watching. PS. Medium link following soon... stay tuned.
tags: software, development, tips, programming
---

Hey y'all, my friend Almas and I hope you enjoy this video. Let us know if you have any questions or if you would like to see a tutorial video from the mentioned points. Feel free to share and see you soon. Thanks for watching. PS. Medium link following soon... stay tuned.


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

https://youtu.be/xtfD4V9UZG0
#CSS. Note for flexbox properties.
Tags: css, html, design
Published: 2019-10-29 14:12:52

# All CSS Flexbox properties
This is a list of all the CSS flexbox properties that can be used to position elements in CSS. And I hope it will useful for you.

### Properties can be applied to the container

```css
.container {
   display: flexbox | inline-flex;
   flex-direction: row | row-reverse | column | column-reverse;
   flex-wrap: nowrap | wrap | wrap-reverse;
   flex-flow: <‘flex-direction’> || <‘flex-wrap’>
   justify-content: flex-start | flex-end | center | space-between | space-around;
   align-items: flex-start | flex-end | center | baseline | stretch;
   align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
```

### Properties can be applied to items/elements in the container :
```css
.items {
   order: <integer>;
   flex-grow: <number>; /* default 0 */
   flex-shrink: <number>; /* default 1 */
   flex-basis: <length> | auto; /* default auto */
   flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
   align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
```

You can practice flexbox css in this website [flexboxdefense](http://www.flexboxdefense.com). If you see this cool so you can donate if you want !

And thanks for reading !
Free resources to learn .NET?
Tags: discuss, net, coaching
Published: 2019-10-29 14:06:53

---
title: Free resources to learn .NET?
published: true
description: 
tags: discuss,.NET,coaching
---

Good morning everyone!

I'm doing some coaching, and I want to have a good list of free resources that you can recommend.

I will start with https://dotnet.microsoft.com/learn/videos

Thanks!
A button generates a button
Tags: javascript, beginners, html
Published: 2019-10-29 14:05:18

Hello!
You know a button with onclick, something happens when you click the button.
It may be too easy for you to display sentences or comments or explanations when you click the button.
Well, how about a button? I mean, have you ever imagined to display another button with onclick when you click the button?

The simplest way to realise it is to call the style of CSS. 

For the button with id="btn" and onclick="showbtn()" and another button with initially display: "none" in CSS, it is 

<body>
<script>
    function showbtn(){
      document.getElementById("btn").style.display = "block";
    }
</script>
</body>

Then another button appears when you click the button. Of course another button can also be endowed with onclick if you want.

However, there is a sophisticated way to do the same thing. The magic word is "innerHTML."
innerHTML rewrites an element in HTML as HTML. Actually, "as HTML" is so much important.
It is too easy to rewrite a paragraph. For example, &lt;p id="lorem">Lorem ipsum...&lt;/p> is easily rewritten by

<script>
    document.getElementById("lorem").innerHTML = "Lorem ipsum dolor sit amet...";
</script>

"as HTML" means that you can write HTML elements inside the double quotations!
For example,

    document.getElementById("lorem").innerHTML = 'Lorem ipsum dolor sit amet, <button id="next" onclick="next()">Next</button>';          

It is just like a single page application. Note that the double quotations were replaced with single quotations actually.
If innerHTML, you can add any HTML element anytime.
Give it a shot and safe journey!
Matt's Tidbits #40 - RxJava doOnSubscribe() behavior explained
Tags: mattstidbits, android, rxjava, kotlin
Published: 2019-10-29 13:56:56

[Last time I wrote about why writing tests is so important.](https://medium.com/@matthew.b.groves/matts-tidbits-39-why-writing-tests-is-so-important-2769ad2834cf) This week, I wanted to discuss a behavior of RxJava’s `doOnSubscribe()` that I recently discovered.

I’ve been working with RxJava a lot lately, and encountered a case where an error was being thrown in a `doOnSubscribe()` block, and I wasn’t sure if/how that might impact the rest of the Rx chain.

Here’s the code in question:
{% gist https://gist.github.com/mpeng3/9f0b7afc159755306c6f314629dbd679
%}

In this case, I was encountering an error from the `getSingleFromSomewhere()` block (triggering the error in line 6). But, what wasn’t immediately clear to me was whether or not the outer `subscribe()` call would continue running or if it would be terminated as a result of the inner error.

I created a test that looked like this to try to uncover the answer:
{% gist https://gist.github.com/mpeng3/0ad39f6b5c8517c4557765a335678892
%}

The only change from the above code is the call to `emitValueOnOuterObservable()` on line 8. I wanted to verify if I explicitly emitted a success value for the outer observable if it would go through, or if it would somehow know that an error had occurred on the inner observable and would therefore no longer be running.

To my delight, even though an error occurs in the inner `subscribe()` block, the outer subscription keeps running, and I was able to see the `"Outer value"` log statement show up.

In hindsight, this makes sense, but the lesson here is if you’re not sure how something works, now is the right time to learn! Use the debugger, add print statements, or even just look through the code to gain an understanding of how it operates. And, if you get really stuck, look for documentation or ask a friend!

Also, it was not helpful in this case, but if you’re ever struggling with understanding how a particular Rx command works, be sure to take a look at RxMarbles, an interactive marble diagram site that lets you play with inputs/outputs so you can observe how they behave in different scenarios!

https://rxmarbles.com

Do you have other nuggets of RxJava knowledge you’d like to share? Leave a comment below! And, please follow me on Medium if you’re interested in being notified of future tidbits.


Interested in joining the awesome team here at Intrepid? [We’re hiring!](https://www.intrepid.io/careers)

*This tidbit was discovered on October 24, 2019.*
A New Kind of Android Fragmentation
Tags: android, fragmentation, kotlin, java
Published: 2019-10-29 13:44:58

---
title: A New Kind of Android Fragmentation
published: true
description: As a library author Android fragmentation actually got worse
tags: android, fragmentation, kotlin, java
---

It has been about 5 years since I have been able to spend a dedicated chunk of time working solely on Android development. One of our competitors shut down their product a few months ago, causing a huge inflow of customers all asking for an [Android Chat SDK](https://getstream.io/tutorials/android-chat/#java). Unfortunately, our Android team was behind on schedule. #startuplife Long story short, I had the pleasure of doing some Android development again.

It was cool to see how much the ecosystem improved. The constraint layout is really easy to work with and much more performant than the older layouts. The new livedata system reduces quite a bit of boilerplate code. Room is a nice abstraction over SQLlite and the concept of viewmodels (while simple) is quite elegant. 

One type of fragmentation became much worse though. If you’re a library author you now have to think about:


 * Java or Kotlin
 * Java Callbacks, Android RX observables and/or Kotlin Coroutines
 * Architecture components: MVVM, MVI, MVP, MVP or MVC?
 * Proguard
 * AndroidX


Yes, you can argue that Java and Kotlin are compatible. At the end of the day, you still have 2 sets of docs and halve the people that use your library won’t be happy with the language you choose. If you look at the stats Kotlin still seems much smaller for new apps than Java: https://www.appbrain.com/stats/libraries/details/kotlin/kotlin. 

It’s cool to see how Room and Retrofit deal with the callback vs observable difference. If you look at iOS development though there is much less fragmentation. 

Android development has improved a lot over the last 5 years. For a library author fragmentation became worse though. I wonder why Google has this wait and see attitude instead of just ensuring that there is 1 best way to do all of these things...
How to Get 3D Content for Your Augmented Reality (AR) iOS Apps
Tags: ios, swift, augmentedreality, realitykit
Published: 2019-10-29 13:38:27

[![](http://img.youtube.com/vi/UE8shn8iNKU/0.jpg)](http://www.youtube.com/watch?v=UE8shn8iNKU "")
Add an item to a list in React
Tags: reactjsjavascript
Published: 2019-10-29 13:17:33

---
title: Add an item to a list in React
published: true
description: How to add an item based on user input
tags: reactjs javascript
cover_image: https://ferrariwebdevelopment.s3.us-east-2.amazonaws.com/assets/add-item-to-list.jpeg
---

## How to add an item based on user input

In a previous article we learned how to add an input field to a React class component and how to update the state of the component with the value entered in the input field.
Now that we have the value saved in the state we can use it to add a new item to the list of groceries that the component displays.

The user will fill out the grocery item name, press the `Return` key and the grocery item will be added to the existing list of groceries.

To perform this operation, we could add a button to submit the form, but in this example we take advantage of the default browser behavior of submitting a form automatically when the `Return` key is pressed.

To take advantage of this behavior we need to add an event listener to the form.
The event listener is called `onSubmit` and gets triggered when a form is submitted.
onSubmit calls the `addGrocery()` function which adds the grocery item to the list.
`addGrocery()` takes as a parameter the content of the name property on the state.
Remember, this property is set to the value of the input field. This is what the user entered.

```
<form onSubmit={e => {
  this.addGrocery(this.state.name);
}}>
```

The main purpose of `addGrocery()` is to take the name of the item and add it to the list. But it also needs to do a couple of other things.

The first thing it needs to do is to stop refreshing the page.
When we submit the form by pressing `Return`, the browser performs a page refresh by default. We don't want this behavior. We would rather see the item added to the list directly, without a page refresh.

The second thing `addGrocery()` needs to do is clear out the input field from the grocery name that was typed in so it’s ready for the next input.

To prevent refreshing the page, we use the handy function `preventDefault()` of the event object. It simply prevents the browser to do the default action.
After adding the grocery item, we also clear out the state name property, so it's brought to its initial state of empty string, by calling `setState()`.
Since the input field displays the value of `state.name`, it will display an empty string after adding a new item.

Here's the final code:

```
<form onSubmit={e => {
  e.preventDefault();
  this.addGrocery(this.state.name);
  this.setState({name: ''});
}}>
```

Tomorrow we will build the `addGrocery()` function and complete the functionality. Stay tuned.
How in-depth should I learn HTML/CSS?

Published: 2019-10-29 13:17:17

Front-End is not for me, so I'm wondering how much HTML/CSS should I know. Is it ok if I just understand how they https://routerlogin.uno/ work?And If I want to make a website look pretty I can just  https://19216801.onl/ edit a template (legally, of course). This is what I'm thinking because I don't think I can come up with a pretty, good looking website on my own. Please enlighten me. https://openweb.vip/whatsapp-web/
Node Js Interview Question(Read a file, filter with date range, sort by field)
Tags: node, javascript, career
Published: 2019-10-29 12:58:29

#####Note : below 3 question and answers are continuous

Input filename : test.txt
```js
foo,12,2019-01-02,2019-03-03,200
bar,30,2019-03-08,2019-05-01,100
jar,1,2019-01-04,2019-03-03,200
mar,56,2018-02-05,2018-05-01,10
```

#Question #1
####Read a text file with comma separated values.

Answer 

```js
let fs = require('fs');
let data = fs.readFileSync('test.txt','utf8');
let rows = data.split('\n');
let array =  rows.map( eachrow => {
    let row = eachrow.split(",");
    return row;
})
```

#Question #2
####Select data between rage of dates in given file


```js
let result = array.filter(obj => {
    let first = new Date('2019-01-01');
    let last = new Date('2019-05-30');
    return (new Date(obj['2']) > first && new Date('2') < last);
});
```

#Question #3
####Sort based on names and print the result

```js
function compare(a,b){
    if(a[0] ==  b[0]){
        return 0;
    }
    else{
        return (a[0] < b[0]) ? -1 : 1;
    }
}
result.sort(compare);
console.log(result);
```
Scrum for fast-changing businesses, is it worth it?
Tags: discuss, agile, management
Published: 2019-10-29 12:47:07

Hey!

Many local companies have joined the trend of agile methodologies (mainly scrum), but have not taken into consideration whether it fits their type of business or their business needs.

That's why I would like to ask you, Do you think Scrum is worth it for a small business that is constantly changing its priorities at the end or in the middle of each Sprint. For example, a financial business that has a certain level of uncertainty about whether they will need the X functionality by the end of the month, depending on how the market behaves. You could be spending time on something that will be useless or that will be replaced by another task in the middle of the development process.

Would Scrumban be a possible solution to reduce the impact that uncertainty could have on the final product?

Let me know how you overcome these types of situations.
Building Quantum Computing Algorithms In Python
Published: 2019-10-29 12:33:31

<p>Quantum computers are the biggest jump forward in processing power that the industry has seen in decades. As part of this revolution it is necessary to change our approach to algorithm design. D-Wave is one of the companies who are pushing the boundaries in quantum processing and they have created a Python SDK for experimenting with quantum algorithms. In this episode Alexander Condello explains what is involved in designing and implementing these algorithms, how the Ocean SDK helps you in that endeavor, and what types of problems are well suited to this approach.</p><p><a href='https://www.pythonpodcast.com/ocean-sdk-quantum-computing-episode-235/'>Listen Now!</a></p>
Netlify DNS issue! 
Tags: help
Published: 2019-10-29 12:33:27

---
title: Netlify DNS issue! 
published: true
description: 
tags: #help
---
I recently finished developing my portfolio using Angular8, and then yesterday i did register for a domain with netlify which costed about $16.99
after registration it did gave me those option to setup the A , CNAME, AAA records but i was still busy with some functionality of my portfolio. So i'd just brushed it off that i will do all that set up once i am done fixing the error on the IDE. So now i've deployed my site, the site is live but got an error when i clicked on its link' error : "Page not found, Looks like you've followed a broken link or entered a URL that doesn't exist on this site. " '

I have reached to out to support, its been almost 5 hours without any response
@property decorator
Tags: python
Published: 2019-10-29 12:30:10

---
title: @property decorator
published: true
description: A fun way to make your code more usable
tags: python
---

Just a quick blurb about a nice feature in Python.

Let's say you have the following:

```python
class Person:
  def __init__(self, first_name, last_name):
    self.first_name = first_name
    self.last_name = last_name
```

You can create a new person like:

```python
mickey = Person('Micky', 'Mouse')
# spoiler, he's not actually a person
```

You might find yourself often wanting to get Mickey's full name, "Mickey Mouse" in your code.  To do this, you'll probably do:

```python
fullname = mickey.first_name + ' ' + mickey.last_name
# or maybe you'll use format, or printf, 
# depending on your style and how much coffee you've had that day.
```

Then, after you get tired of doing that all the time, you'll go back and add a method to your Person class:

```python
class Person:
  def __init__(self, first_name, last_name):
    self.first_name = first_name
    self.last_name = last_name

  def name(self):
    return self.first_name + ' ' + self.last_name
```

and you'll instead use:

```python
mickey.name()
# ==> Mickey Mouse
```

now.. the `@property` decorator really just gives us a coding style advantage.  `mickey.name` would feel more natural than `mickey.name()`, since the name is always returning the same value, and feels more like a property than a function.

So how is it used?

Again, let's modify the class:

```python
class Person:
  def __init__(self, first_name, last_name):
    self.first_name = first_name
    self.last_name = last_name

  @property
  def name(self):
    return self.first_name + ' ' + self.last_name
```

Then, we can get the name as follows:

```python
mickey.name
# ==> Mickey Mouse
```

---

That's it for now!  If you're interested in Python, Django, Linux, VIM, tmux (and all these other random tools in my tech stack) follow me on dev.to or on [Twitter @connorbode](https://twitter.com/connorbode).

I'll post tips as I code!
Git and Github instructions.
Published: 2019-10-29 12:10:00

---
title : Git and Github instructions.
published : true
description :
tags : #Git #Github
---

<h3>Make sure git is tracking your project.</h3>

<p>
1. Using your terminal/command line, get inside the folder where your project files are kept: cd /path/to/my/codebase.
You cannot do this simply by opening the folder normally, you must do this with the command line/terminal.

Do you need a refresher on using your command line/terminal? I've compiled my favorite resources here.<br /><br>

2. Check if git is already initialized: git status
If you get this error message: fatal: Not a git repository (or any of the parent directories): .git, that means the folder you are currently in is not being tracked by git. In that case, initialize git inside your project folder by typing git init, then going through the process of adding and committing your project.<br /><br>

If you get another error message, read carefully what it says. Is it saying git isn't installed on your computer by saying that the word 'git' is not recognized? Is it saying that you're already in a folder or sub-folder where git is initialized? Google your error and/or output to understand it, and to figure out how to fix it.

Do you need a refresher on git? <a href="https://www.codecademy.com/learn/learn-git">Go through Codecademy's git course.</a>

</p>
 <hr/>
<p>
<h3>Create a remote, empty folder/repository on Github.</h3>
1. Login to your Github account.

2. At the top right of any Github page, you should see a '+' icon. Click that, then select 'New Repository'.

3. Give your repository a name--ideally the same name as your local project. If I'm building a travel application, its folder will be called 'travel-app' on my computer, and 'travel-app' will be the Github repository name as well.

4. Click 'Create Repository'. The next screen you see will be important, so don't close it.
</P>

<hr />

<p>
<h3>Connect your local project folder to your empty folder/repository on Github. </h3>
The screen you should be seeing now on Github is titled 'Quick setup — if you’ve done this kind of thing before'.

Copy the link in the input right beneath the title, it should look something like this: https://github.com/NhlanhlaHasane/my-portfolio.git This is the web address that your local folder will use to push its contents to the remote folder on Github.

 1. Go back to your project in the terminal/command line.

 2. In your terminal/command line, type git remote add origin [copied web address]

    Example: git remote add origin https://github.com/NhlanhlaHasane/my-portfolio.git

 3. Push your branch to Github: git push origin master

 4. Go back to the folder/repository screen on Github that you just left, and refresh it. The title 'Quick setup — if you’ve done this kind of thing before' should disappear, and you should see your files there.
</p>
JavaScript's Object.freeze and TypeScript's Readonly
Tags: javascript, typescript
Published: 2019-10-29 12:06:59

Do you want static or runtime immutability, or both? In this article I will show you how to combine Object.freeze with Readonly to get the best of both worlds.

## JavaScript's Object.freeze

JavaScript's `Object.freeze()` function provides runtime immutability (at a minor performance cost). You have a 100% guarantee your array or object will not change underneath you.

```js
const austrians = Object.freeze([
  Object.freeze({name: "Carl Menger"}),
  Object.freeze({name: "Eugen Böhm von Bawerk"}),
  Object.freeze({name: "Ludwig von Mises"})
]);

austrians.push({name: "John Maynard Keynes"}); // Runtime Error
austrians[0].name = "John Maynard Keynes"; // Runtime Error
```

## TypeScript's Readonly

TypeScript's `Readonly<T>` generic type provides static type immutability which has zero performance overhead. At runtime the array or object can change, so this only works if all your code is TypeScript.

```ts
interface Austrian {
  readonly name: string;
}

const austrians: ReadonlyArray<Austrian> = [
  {name: "Carl Menger"},
  {name: "Eugen Böhm von Bawerk"},
  {name: "Ludwig von Mises"}
];

austrians.push({name: "John Maynard Keynes"}); // Compile error
austrians[0].name = "John Maynard Keynes"; // Compile error
```

## TypeScript ❤️ JavaScript

These two tools are not mutually exclusive you can combine Static typing immutability & runtime immutability.

```ts
interface Austrian {
  readonly name: string;
}

const austrians: ReadonlyArray<Austrian> = Object.freeze([
  Object.freeze({name: "Carl Menger"}),
  Object.freeze({name: "Eugen Böhm von Bawerk"}),
  Object.freeze({name: "Ludwig von Mises"})
]);

austrians.push({name: "John Maynard Keynes"}); // Everything error
austrians[0].name = "John Maynard Keynes"; // Everything error
```