teleren/devto huggingface dataset:
What and Why of Docker.
Tags: docker, devops, beginners, node
Published: 2019-12-24 17:24:34

If you are a developer and an active community member, you must come across the term **Docker**. When I heard about **Docker**, the first question that arose in my mind is, What is Docker? And why is everyone talking about it? 🤔

In this post, we try to understand docker, and it's use cases and installation as well. So without any delay, let's dive into it.

# What is Docker?

Docker is a tool that reduces the gap between Development and Deployment phase of a software development cycle.

Imagine the time when developers used to spend their time to make a machine compatible to run their code. They need to install all dependencies, setup database, and so on. This process was very time consuming, and it requires a specialised person to do this stuff.

Another scenario is, assume you have more than one application or webserver to run that uses different languages and versions of the software.

Now you may think this problem could be solved by using VMs (Virtual Machines) so...

# Why Docker?

Virtual Machines makes the copy of the whole operating system, which will be GBs in size, whereas Docker needs only the part that you need to run your application. Take a look at the image below. It will help you to visualise the difference.

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

Docker is like an airtight container that runs independently without interrupting to other processes. This is the reason you can run as many containers you want at a time. Another benefit is, Docker containers are sharable. You need to run a few docker commands, and the application is ready to run, You don't have to invest time in setting up the environment. Now the days are gone when developers use to make an excuse that *it works on my machine*.

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


# Installing Docker.


1. Go to [docker official page](https://www.docker.com)

2. Signup or log in.

3. Download Docker Desktop.

4. Install and login to Docker Desktop.

5. Open Terminal and run `docker` command.

You will see something like this.

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

Congratulations you have successfully installed docker, and it is ready to use now.

In the next post, we will learn how to use official docker images and other commands.

Until then, Bye.

![bye](https://media.giphy.com/media/oDDs67mo76beM/giphy.gif)
Daily Challenge #143 - Big Arithmetic
Tags: challenge
Published: 2019-12-24 17:00:12

---
title: Daily Challenge #143 - Big Arithmetic
published: true
series: Daily Challenge
description: Turn large integers into strings & some basic math. 
tags: challenge
---
Doing arithmetic with big numbers is impossible to do with regular integer types. In JavaScript (which represents numbers as 64-bit floats), anything beyond 2^53-1 becomes increasingly less accurate. 

Write a two functions (`bigAdd` and `bigSub`) to accurately represent these large integers as strings. They will both take two arguments: either a valid representation of an integer as a string, or a regular number. They will return the correct answer as a string. `bigAdd` will sum, `bigSub` will subtract. 

For example:
`bigAdd(1, "123456789012345678901234567890") === "123456789012345678901234567891";`
`bigSub("123456789012345678901234567890", 1) === "123456789012345678901234567889";`

Remember, the values could be negative, and so the calculations should be made accordingly.
`bigAdd(-1, "123456789012345678901234567890") === "123456789012345678901234567889";`
`bigSub("123456789012345678901234567890", -1) === "123456789012345678901234567891";`

**Tests**<pre>
bigAdd(1, "123456789012345678901234567890")
bigAdd(-1, "123456789012345678901234567890")
bigSub("123456789012345678901234567890", 1)
bigSub("123456789012345678901234567890", -1)
</pre>
***
_This [challenge](https://www.codewars.com/kata/54d130bb11b05bd224000212) comes from wthit56 on CodeWars. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
REST countries API  I need some help 
Tags: help, javascript
Published: 2019-12-24 16:25:28

I am taking this challenge, https://www.frontendmentor.io/challenges/rest-countries-api-with-color-theme-switcher-5cacc469fec04111f7b848ca I am getting stuck that one requirement is to click the border name to get the detail of that country. 

This is my code, https://github.com/xnslx/fetchAPI I need some help. (I haven’t done any css styling yet)

Merry Christmas!
Your favourite non-technical books?
Tags: books, watercooler, discuss, writing
Published: 2019-12-24 15:00:35



Hey there,

my biggest goal for 2020 is to read more books. Especially books that aren't solely dedicated to boost my career or increase my developer skillset but books that either broaden my horizon or entertain me.

So please feel free to recommend your favourite books in the comments!

So far, my favorites are:

1. **Homo Deus** _by Yuval Harari_. This book really expanded my horizon and changed my expectations regarding the future of the humankind, considering gene manipulation and artificial intelligence.

2. **The Complete Maus** _by Art Spiegelman_. This graphic novel is not only beautiful drawn but also tells the dramatic story of Art's Jewish family during the Holocaust.

3. **The Harry Potter Series** _by J.K. Rowling_. Yep, I've never read them as a child. Started six weeks ago with the first one and been half through the 6th by now. I love them, they're great!

4. **Disrupted** _by Dan Lyons_. Got that as a present from a good friend and it's hilarious! Dan worked as a journalist for a big, renowned Newspaper before. Now he enters the startup world as a "content creator" for Hubspot and encounters the secret tales of company candy bars and Nerf blaster wars.

5. **Blackout** _by Marc Elseberg_. The story of some hackers attacking the European power grid is not only awesome but _really_ well and accurate described - that accurate, that the author nowadays gets invited to countless security conferences and even advices governments!
Matt's Tidbits #48 - Separating out search results for test code
Tags: mattstidbits, androidstudio, android, tidbittuesday
Published: 2019-12-24 15:21:34

[Last time I shared an Espresso ViewMatcher for finding RecyclerView items by title.](https://medium.com/@matthew.b.groves/matts-tidbits-47-finding-list-items-by-title-in-espresso-50ce979145cd) This week I have a quick tidbit on how to group search results based on whether they're in production code or tests.

This week I was using Android Studio's search feature (as I do on an almost daily basis) and was manually collapsing occurrences that occurred in test code when a coworker showed me a neat trick - Android Studio has a button for grouping search results. Typically your "Find" view might look like this:
![](https://cdn-images-1.medium.com/max/1600/1*laJQgu6kOxj4THrRAYItYA.png)

This can get cumbersome as "real" production occurrences are intermixed with calls to test code. But, press this button:
![](https://cdn-images-1.medium.com/max/1600/1*g_kDcKO4NtgBwVLhDpBC8g.png)

And voilà! Now your results are grouped so you can easily focus on just production code:
![](https://cdn-images-1.medium.com/max/1600/1*pCg3Ksr1BCPYwf08j7WKKA.png)

What other cool Android Studio features do you use that help you be more efficient? 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 December 18, 2019.*
Learn SOLID Principles of Object-Oriented Design
Tags: javascript
Published: 2019-12-24 15:05:10

---
title: Learn SOLID Principles of Object-Oriented Design
published: true
description: we are going to understand what is known as SOLID principles of object-oriented design.
tags: JavaScript
---

In this series, we are going to understand what is known as SOLID principles of object-oriented design.

 By the end of this series, you will be able to

understand what the SOLID principles are.
Why they are important. 
How they will help you write good and maintainable code.


### Understanding the SOLID Principles of Object-Oriented Design

##### Lesson 1 

Building a CLI application in Javascript. This application will not follow any SOLID principle, but it will be working as expected

[Read Lesson 1](https://codesource.io/building-a-cli-application-from-scratch-in-javascript/)


##### Lesson 2

Introduction to SOLID principles: Here, we will study what the SOLID principles are.

[Read Lesson 2](https://codesource.io/solid-principles-of-object-oriented-design/)


#### Lesson 3

Refactor the CLI application to observe SOLID principles.

[Read Lesson 3](https://codesource.io/applying-solid-principles-to-an-existing-application/)


This course will solidify your understanding of SOLID principles and how to apply them in your JavaScript projects. ​​We went through the process of building an application without observing any of the solid principles, then we learned about solid principles. 

And finally applied the principles learned in refactoring the application to be better. By now, you should have an in-depth understanding of what SOLID principles are and why they are important.You can go on and use the principles in your own projects. Do leave your comments, suggestions, and questions about this course!
Connecting a React component to the application state via props
Tags: react, javascript, frontend
Published: 2019-12-24 15:03:30

---
title: Connecting a React component to the application state via props
published: true
description: How to use the connect function to map state to props
tags: react, javascript, frontend
cover_image: https://ferrariwebdevelopment.s3.us-east-2.amazonaws.com/assets/20191030-mapstatetoprops.jpeg
---

## How to use the connect function to map state to props

We have already seen how to connect a React component to an action by using the connect function provided by the React Redux library.

For example, here's how we connect the `turntitleGreen` function to the `Title` component. We just call connect at the bottom of the `Title` component and pass `turnTitleGreen` inside the second argument to connect.

```js
export default connect(
  () => {},
  { turnTitleGreen }
)(Title);
```

We mentioned that the first argument of connect is a *function* but we didn't say what it is for.

This function is for connecting the application `state` to the component `props`, so state will be available inside the component to be displayed.
For example, a `Title` component displays a title that is saved in the application state, in the reducer:

```js
// reducers/index.js

const initialState = {
  title: "Title from the initial Redux store",
}
```

This title needs to be displayed inside the component somehow. By connecting the component to the state via the `connect` function, we are able to display the state by using the component props like this:

```js
<h1>
  {this.props.title}
</h1>
```

The `connect` function first argument is a function that takes the state and returns an object that maps the state to the component props.
This function is often called `mapStateToProps` to indicate what it does (it maps state to props).

Here's how we define it:

```js
const mapStateToProps = state => {
  return {
    title: state.title
  }
}
```

The React system will just pass the application state to it and inside the function we return an object that maps properties in the state to properties in the component.
In our case, the `state` has a property called `title` that holds the component title. We map `title` to `state.title` so we can use `this.props.title` inside our component to display the title.

When we are done mapping all our properties to the state, we pass the `mapStateToProp` function to our connect function at the bottom of the `Title` component like this:

```js
export default connect(
  mapStateToProps,
  { turnTitleGreen }
)(Title);
```

This way the component has full access to the state and the actions that modify the state.

---

*I write daily about web development. If you like this article, feel free to share it with your friends and colleagues.*

*You can receive articles like this in your inbox by [subscribing to my newsletter](https://cesare.substack.com).*
Angularの追いかけ方
Tags: angular, japanese
Published: 2019-12-24 15:00:49

[Angular \#2 Advent Calendar 2019](https://qiita.com/advent-calendar/2019/angular-2)の25日目の記事です。

アドベントカレンダー2枚が埋まるほど日本でのAngularの熱が高まっていることがAngularのGDEとしてとても嬉しいです！
この記事ではAngularについてもっと深く知りたい、学びたいと思っている方々向けに、私が普段からウォッチしている信頼できるリソースを紹介します。

## Twitter

[Angular（@angular）](https://twitter.com/angular)

まずはもちろん公式アカウントです。公式アナウンスは基本的にこのアカウントから発信されます。


[@stephenfluin/Angular GDEs](https://twitter.com/stephenfluin/lists/angular-gdes)

Angular GDEがまとめられたTwitterリストです。

[Stephen Fluin（@stephenfluin）](https://twitter.com/stephenfluin)

Stephen FluinはAngularチームのDeveloper Advocateです。公式ブログの記事の執筆もおこなっています。彼の[個人ブログ](https://fluin.io/blog)でもAngularのテクニックなどを投稿しています。

[Minko Gechev（@mgechev）](https://twitter.com/mgechev)

Minko GechevはAngularチームの開発者です。ツール周りやパフォーマンス改善に役立つTipsをよくツイートしています。ちなみに web.dev/angular の執筆はほとんどMinkoによるものです。

[Brandon 👨🏿‍💻✍🏿🏀（@brandontroberts）](https://twitter.com/brandontroberts)
[Mike Ryan（@MikeRyanDev）](https://twitter.com/MikeRyanDev)
[Tim Deschryver（@tim\_deschryver）](https://twitter.com/tim_deschryver)

NgRxのメンテナーたちです


[Michael Rx Hladky（@Michael\_Hladky）](https://twitter.com/Michael_Hladky)

AngularとRxJSのインテグレーションに興味がある方はぜひMichael Hladkyをフォローするとよいでしょう。刺激的な記事やデモなどを時折公開してくれます。

[Mike Hartington（@mhartington）](https://twitter.com/mhartington)

Ionicチームの開発者です。Ionicのことを知りたければMikeに質問すれば快く答えてくれるでしょう。


他にもたくさんフォローしてほしいアカウントはあるのですがキリがないので、ここに挙げた彼らのリツイートなどから見つけていくといいでしょう。


## Blog

[Angular Blog](https://blog.angular.io/)

公式ブログです。まずはここをウォッチしましょう。


https://dev.to/angular

Angular GDEを中心に信頼できる人たちの記事が集まるdev toのorganizationです。いろんなジャンルやレベルの記事が読めます

[ANGULAR INDEPTH](https://indepth.dev/angular/)

Angular中上級者なら必読のブログです。決して初心者向けではない濃い記事ばかりが投稿されています。


[Blogs \| juri\.dev](https://juristr.com/blog/)

Angular GDEの[Juri Strumpflohner](https://twitter.com/juristr)の個人ブログです。役に立つ記事がよく投稿されるのでぜひ読んでもらいたいです。

[Blog \- softwarearchitekt\.at](https://www.softwarearchitekt.at/blog/)

Angular GDEの[Manfred Steyer](https://twitter.com/ManfredSteyer)のブログです。
ドメイン駆動設計などAngularアプリケーションのアーキテクチャに関する話題が多いので設計に興味があればぜひ読んでもらいたいです。サイトはドイツ語ですがだいたいの記事は英語で書かれてるので大丈夫です。

[Netanel Basal – Netanel Basal](https://netbasal.com/@NetanelBasal)

状態管理ライブラリの[Akita](https://github.com/datorama/akita)の作者でもある[Netanel Basal](https://twitter.com/NetanelBasal)のブログです。ちょっとニッチな機能の使い方など、中級者におすすめの記事がたくさんあります。

## Change Log

[angular/angular](https://github.com/angular/angular/blob/master/CHANGELOG.md)

[angular/angular\-cli](https://github.com/angular/angular-cli/releases)

[angular/components](https://github.com/angular/components/blob/master/CHANGELOG.md)


Angularのリポジトリの更新を追うならCHANGELOGやリリースを見るのがよいです。

## Podcast

[AngularAir \- YouTube](https://www.youtube.com/AngularAirPodcast)

ほぼ隔週で更新されているビデオpodcastです。Angular GDEの[Justin Schwartzenberger](https://twitter.com/schwarty)が主催していて、役に立つネタもあれば実験的なネタもあり面白いです。


----

年末年始、ぜひAngularを深く学ぶ時間にしてもらえれば幸いです。
TIL: The path to CKA Week 4. 
Tags: cka, kubernetes, preparecka
Published: 2019-12-24 14:49:32

Last week I finished the course in the CKA bundle.
It's time to move on to the kubernetes installation **with the hard way**😎

---

[Kubernetes The Hard Way](https://github.com/kelseyhightower/kubernetes-the-hard-way) is a tutorial walks you through setting up Kubernetes step by step. Meaning without using kubeadm, kubespray or any other tools.

The prerequisites of this tutorial contains GCP.
Since I'ver never use the GCP before, so I toke this as a opportunity.
After I finished the tutorial, my new-created GCP account had not been charged any cent yet.

I think I'll just skip the detail steps and note the TIL. 
For those who interested it this tutorial could just click the link above.
Here's the labs for the tutorial, and also the common steps to setup a kubernetes cluster.

* Installing the Client Tools
* Provisioning Compute Resources
* Provisioning the CA and Generating TLS Certificates
* Generating Kubernetes Configuration Files for Authentication
* Generating the Data Encryption Config and Key
* Bootstrapping the etcd Cluster
* Bootstrapping the Kubernetes Control Plane
* Bootstrapping the Kubernetes Worker Nodes
* Configuring kubectl for Remote Access
* Provisioning Pod Network Routes
* Deploying the DNS Cluster Add-on


TIL : GCP compute region/zone
At the beginning of the tutorial, I have to prepare the GCP environment.
And there are two commands to set up the region and zone for your GCP compute unit.
A region can be seen as a data center in diffident era of the world.
And the zones are isolated location within a region, kinda like different server in the same data center.
So for the HA deployment, you may have multiple application running in different zone within certain region.


And for those wonder if gcloud command have auto-completion.
You can try 
1. https://cloud.google.com/sdk/docs/interactive-gcloud
2. https://www.youtube.com/watch?v=ezod_8QDT7Q
3. https://stackoverflow.com/questions/46236580/how-to-enable-shell-command-completion-for-gcloud
Merry Christmas! And a happy new year!
Tags: webdev
Published: 2019-12-24 14:47:45

![Merry Christmas and a happy new year](https://happynewyear2020.club/wp-content/uploads/2019/08/5d0a296866161.png)

Have a break from your work and spend time with your family and the ones you love. It's a holiday, so enjoy it to the fullest.

With love,

Stefan
My first published npm package is called runex
Tags: node, cli, dry
Published: 2019-12-24 14:39:07

Some months ago I got tired of all those tiny differences that you need to consider when writing CLI scripts for node.

So in the last days I took the time to rewrite a module that I have already copied into more than three repositories:  
{% github karfau/runex %}

The first version has already been published to npm:
https://npmjs.org/package/runex

So if your module exports a method named `run` it can now be used as a CLI tool:

`npx runex path/to/file.js`

I still have some ideas for features to  implement, but I'm very happy it's out there now.

Merry X-Mas and Let me know what you think
Generic RecyclerViewAdapter
Tags: android, kotlin, databinding, recyclerview
Published: 2019-12-24 14:34:13

##### Trying to make one adapter fit all RecyclerViews in the application.
While this is not an absolute use-case as we might want different list to behave differently. But the core purpose of RecyclerView is to display the data and be able to scroll through it. Also, when we click on the list-item we possible want to navigate to details for that list-item. While doing this, there will be a lot of redundant code that will be duplicated in all RecyclerView adapters in our codebase.

Below is a basic example of abstracting away the core functionality of a RecyclerView adapter and have the sub-classes take care of the rest. This articles assumes that the readers will have basic understanding of `RecyclerView`, `databinding` and `kotlin`.
```kotlin
abstract class BaseRecyclerViewAdapter<T> : Adapter<ViewHolder>(), {
  
  var items: List<T> = emptyList()
    set(value) {
      field = value
      notifyDataSetChanged()
    }
  
  override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder = getViewHolder(parent, viewType)
  
  override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    if(position in items.indices) {
      (holder as Binder<T>).bind(items[position])
    }
  
  abstract fun getViewHolder(parent: ViewGroup, viewType: Int): ViewHolder

  interface Binder<in T> {
    fun bind(item: T)
  }
}
```
### Usage
The above abstract RecyclerView adapter can be used in a fragment as follows:
```kotlin
class SomeListFragment {

  private lateinit var adapter: SomeAdapter

  override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?) : View? {
    super.onCreateView(inflater, container, savedInstanceState)
    // initialization code here ...
    adapter = SomeAdapter() // initialize adapter here
    // ...
  }

  // rest of fragment implementation

  inner class SomeAdapter : BaseRecyclerViewAdapter<SomeData>() {
    override fun getViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
      val viewBinding: SomeListItemBinding = DataBindingUtil.inflate(layoutInflater, R.layout.some_list_item, parent, false)
      return SomeViewHolder(viewBinding)
    }
  }

  inner class SomeViewHolder(private val viewBinding: SomeListItemBinding) : ViewHolder(viewBinding.root), BaseRecyclerViewAdapter.Binder<SomeData> {
    
   override fun bind(item: SomeData) {
     /*
       bind data here, we can also assign click listeners
       viewBinding.root.setOnClickListener { ... }
     */
   }
  }
}
```
Please provide feedback in comments. 
Thank you for reading.
Even or Odd
Tags: typescript, codewars
Published: 2019-12-24 14:26:20

Hey,
<p>
  As a codewars beta member I just completed training on the "Even or Odd" kata. <a href="www.codewars.com/r/VHz6ew">Take the initiation</a> to join me and start training too!
</p>
<p>
  If you are a member already <a href="http://www.codewars.com/kata/53da3dbb4a5168369a0000fe/train/typescript">click here</a> to train on "Even or Odd".
</p>
How to use git stash?
Tags: git, tutorial, beginners
Published: 2019-12-24 14:26:14

![git-stash-video](https://thepracticaldev.s3.amazonaws.com/i/65lzndmh4hq7hexshnu8.gif)

## WHY DO WE USE git stash?

If you are a developer who is using git, you surely may have encountered this error a lot of times.

_Your local changes to the following files would be overwritten by  [checkout](https://bluecast.tech/blog/git-switch-branch/).  **Please commit your changes or stash them**  before you switch branches._

On my initial days, if this error occurs, I would discard my local changes (to be on the safe side). I should’ve committed it, right? But what if I don’t want to commit my half-done work? Is there a better way?  **What is a stash in git?**  Let’s explore in this blog about the various usage of `git stash`  command.

## When should you use git-stash?

### CASE 1:

You are in the middle of something, and you have got a call to urgently resolve a bug. (Thanks to your boss). So now you need to switch to a different branch and work on the bug fix. But you have changes you have not committed and you are not yet ready to commit this. What will you do?

### CASE 2:

You have uncommitted files and try to “git pull” and due to conflicts with the remote changes, git may refuse sometimes to overwrite.

_Your local changes to the following files would be overwritten by merge. **Please commit your changes or stash them**  before you merge._

This same type of error may also occur during a merge request, while pulling the latest changes from the remote branch.

How will you resolve this scenario?

### CASE 3:

You had committed to the wrong branch !!! (Seriously, sometimes we make mistakes. Who hasn’t?)

“**git stash**” could come for your rescue in most of these cases.

## So, What is a git stash?

#### git stash

According to git-scm documentation,  **git-stash**  command is used to

> "Stash the changes in a dirty working directory away".

Which means you could throw away your ‘uncommitted changes’ when you don’t want to commit those, in a temporary location (in an intention to take it later). To be precise, your modified ‘tracked’ files and staged changes – will get saved to a ‘stack’ and you can apply these changes later.

#### How to stash changes in git? Now, Let’s git stash - your changes

We can ‘stash’ the changes by simply executing the following command

    git stash

To read our indepth tutorial on git stash with more examples, please visit - https://bluecast.tech/blog/git-stash