teleren/devto huggingface dataset:
Angular Material matInput form control with thousands separator (excerpt)
Tags: angular, webdev
Published: 2019-12-26 15:26:29

---
title: Angular Material matInput form control with thousands separator (excerpt)
published: true
description: Customizing an Angular Material directive by adding commas to digit groups in matInput numbers and support reactive Angular forms.
tags: angular, webdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/mitocfhjbo1hylg75cff.jpg
canonical_url: https://medium.com/angular-in-depth/angular-material-matinput-control-with-thousands-separation-ebcbb7b027f4"
---

**Customizing an Angular Material directive by adding commas to digit groups in matInput numbers and support reactive Angular forms.**

Every Angular developer knows Angular Material (You don't know it? Then definitely [take a look](https://material.angular.io/)). Like many other UI libraries it provides a set of form controls and among them [matInput](https://material.angular.io/components/input/overview).

It is a regular text input with the possibility to display placeholder in a nice way, to add a clear button, provide custom error messages, text length hint, and even suffixes and prefixes to improve user experience. You can look at examples here.

### The problem
The task I got from a customer was to display input values in digit groups for account amount form field, like this:
![input](https://miro.medium.com/max/1012/1*AMZOzQOT7qcozNNKpMq65A.png)

Surprisingly searching though the internet didn't provide some solid solutions so I decided to create my own one. I found only two things that may help:
* This interesting paragraph is on the [matInput API page](https://material.angular.io/components/input/api):

*MAT_INPUT_VALUE_ACCESSOR
This token is used to inject the object whose value should be set into MatInput. If none is provided, the native HTMLInputElement is used. Directives like MatDatepickerInput can provide themselves for this token, in order to make MatInput delegate the getting and setting of the value to them*

* Angular Material’s [MatDatePicker](https://material.angular.io/components/datepicker/overview) expects to be applied on top of matInput so we can use [its code](https://github.com/angular/components/blob/49a1324acc05cec1c5ff28d729abfe590f6772dd/src/material/datepicker/datepicker-input.ts#L294-L296) as an example of extending matInput.

### Solution

[Continue reading...](https://medium.com/angular-in-depth/angular-material-matinput-control-with-thousands-separation-ebcbb7b027f4).

*** 

I am preparing my future video-course with advanced techniques of mastering Angular/RxJS. Want to get a notification when it is done? Leave your email here (and get free video-course): http://eepurl.com/gHF0av

Like this article? Follow me on [Twitter](https://twitter.com/El_Extremal)!
Complete Guide to Step Functions: new lessons and 50% off sale is now on
Tags: aws, stepfunctions
Published: 2020-01-06 00:05:07

---
title: Complete Guide to Step Functions: new lessons and 50% off sale is now on
published: true
date: 2019-12-26 14:55:12 UTC
tags: AWS,Step Functions
canonical_url: https://theburningmonk.com/2019/12/complete-guide-to-step-functions-new-lessons-and-50-off-sale-is-now-on/
---

First of all, I want to wish you all a merry Xmas and happy new year! And thank you for your readership and support over the years.

Now that re:invent 2019 has come and gone, I have updated my course [**Complete Guide to Step Functions**](https://theburningmonk.thinkific.com/courses/complete-guide-to-aws-step-functions?source=devto) to include the latest announcements:

- _Step Functions 101_: added a lesson on the newly announced [Express Workflows](https://aws.amazon.com/blogs/aws/new-aws-step-functions-express-workflows-high-performance-low-cost/), a high performance and low cost variant of standard workflows.
- _Building state machines_: added a lesson on the [Map state](https://aws.amazon.com/blogs/aws/new-step-functions-support-for-dynamic-parallelism/), which lets you implement the fan-out pattern with ease.
- _Building state machines_: added a lesson on how to build Express Workflows using the Serverless framework.

For the next 2 weeks (ending 11:59pm UTC on 10th Jan 2020), you can get the course for half the price at only **£9.99**. You can sign up to the course **[here](https://theburningmonk.thinkific.com/courses/complete-guide-to-aws-step-functions?source=devto)**.

Also, since I recently achieved my 1st stretch goal on _Patreon_, all my patrons would receive a copy of the course for free. Once again, big thanks to all my patrons for supporting my work!
Why does the dignified primitive hate the day after Christmas?
Tags: jokes, humor, javascript
Published: 2019-12-26 14:32:23

---
title: Why does the dignified primitive hate the day after Christmas?
published: true
description: 
tags: #jokes, #humor, #javascript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/j6tfb8tkoptd0idq5b1a.PNG
---
It's **"Boxing" day**, ...
It doesn't want to be **Object-ified**! 
📦


🤭
bootstrap Components made easy for react with reactstrap .
Tags: react, javascript
Published: 2019-12-26 12:07:11

Hi everyone, 
This is my first post with [dev.to](https://dev.to) .
I hope I will post more posts in future . 

Now straight to the point . I'm using reactjs for my new project and I was impressed with functionalities of react.js.  But still I was confused with reactjs . I know that react js is a front end framework(not a framework though) . Still I was struggling to design a perfect website with reactjs . Using bootstrap for every single component was a nightmare for me to do until I found out [ReactStrap](https://reactstrap.github.io/) .


[ReactStrap](https://reactstrap.github.io/) is a react component for using bootstrap components inside your reactjs app . 
By using reactstrap it is easy to import boostrap components inside our react.js app. 
ReactStrap is a way to quickly add Bootstrap styling to a React application.

Reactstrap contains bootstrap components already styled.
ReactStrap will make components available to you that are already styled, so all you have to do is include them into your project and tweak their


Install it using npm command.  
```
npm install --save reactstrap react react-dom
```
After installed, just import the reactstrap in your code.
```
import * from reactstrap;
```
Or if you want particular component from reactstrap, you can import particular components from reactstrap .
For example, add Button component from reactstrap .

```
import { Button } from 'reactstrap';
```

Then, In your render function use reactstrap component like this ,
```
<Button color="primary">Default button</Button>
```
Simple right ?
It is even fun to add components with reactstrap .
We can also pass predefined props to control the styling.

To learn more about reactstrap , Check their [ReactStrap official website](https://reactstrap.github.io/)
What is Data Analysis?
Tags: dataanalysis, beginners
Published: 2019-12-26 11:42:23

**What is Data Analytics?**

Data analytics (DA) is the process of examining data sets in order to draw conclusions about the information they contain, increasingly with the aid of specialized systems and software. Key focus areas of this domain are cost reduction or revenue increase.

Though,  the use of DA is not restricted to the revenue only, in the Medical, Telecom and other industries, DA focuses on improving the healthcare, identifying the customer behaviour or analysing the weather data.

In short, there is no restriction to the use of DA in any of the industries or Domains.

Types of Data Analytics:

There are three kinds of Data Analysis that user performs on data:
1.	Descriptive Analysis
2.	Prescriptive Analysis
3.	Predictive Analysis.

 

**What is Descriptive Analytics?**

Descriptive analytics is a preliminary stage of data processing that creates a summary of historical data to yield useful information and possibly prepare the data for further analysis.

**What is Prescriptive Analytics?**

It seeks to determine the best solution or outcome among the various choices, given to the known parameters. 
It uses data driven mathematical models to make decisions. 

**What is Predictive Analysis?**

Predictive analytics is the use of data, algorithm technique to identify the likelihood of the future outcomes based on the historical data. The goal is to go beyond knowing what has happened to provide the best assessment of what will happen in the future.

**Why Data Analytics is Important?**

•	The Age of Data analytics is here, and these are truly revolutionary times if both business and technology professionals continue to work together to get the better information out of the data.
•	Businesses actually don’t really care about the promise unless delivery on that promise that comes with the data.

**Summary**
- Examining data sets to draw conclusions is called as Data Analytics.
- Descriptive, Prescriptive and Predictive are three types of Data Analytics.
- Process that creates the summary of the historical data is called as descriptive analysis.
- Data driven mathematical models to draw conclusions is Prescriptive Analysis.
- To identify the likelihood of the future outcomes is called as Predictive Analysis.

For more details on DA or ML stay tuned.
Twitter Feed on WordPress
Tags: wordpress, php, rest, api
Published: 2019-12-26 11:10:51

Social Media is very important for bloggers and also for business websites. A better way to connect Twitter with a website is by creating a Twitter Feed for that website.


In this article, I'm going to show how to talk to the Twitter API and fetch data from Twitter. 

For doing so, you need three things:
1. Twitter username
2. Consumer key
3. Consumer Secret key

You can get those data from your [Twitter app](https://apps.twitter.com/app/).

**Check my other articles:**
[**Hey, WordPress devs. Try Python**](/abmsourav/hey-wordpress-devs-try-python-2589)
[**WordPress post view count**](/abmsourav/wordpress-post-view-count-53p4)


The concept is pretty simple and straight forward. At first, you'll do the authentication, then use that authentication and sent a request to Twitter for your Twitter feed data. 

It's like you went to a bank, showed your identity and other papers for verifications, and then they'll sanction your loan request.

Yeah... sounds funny. You need to verify yourself for your own data. But the Bottom line is "That's how the world works".

Now let's see how things work together...
``` php
$user_name = "your twitter user name";
$consumer_key = "your twitter app consumer key";
$consumer_secret_key = "your twitter app consumer secret key";

$credentials = base64_encode( $consumer_key . ':' . $consumer_secret_key );
$auth_response = wp_remote_post( 'https://api.twitter.com/oauth2/token',
				array(
					'method' => 'POST',
					'httpversion' => '1.1',
					'blocking' => true,
					'headers' => [
						'Authorization' => 'Basic ' . $credentials,
						'Content-Type' => 'application/x-www-form-urlencoded;charset=UTF-8',
					],
					'body' => ['grant_type' => 'client_credentials'],
				) );


$body = json_decode( wp_remote_retrieve_body( $auth_response ) );
$token = $body->access_token;
$tweets_response = wp_remote_get( 'https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=' . $user_name . '&count=900&tweet_mode=extended',
				array(
					'httpversion' => '1.1',
					'blocking' => true,
					'headers' => [ 'Authorization' => "Bearer $token", ],
				) );

$twitter_data = json_decode( wp_remote_retrieve_body( $tweets_response ), true );

if ( !array_key_exists( 'errors', $twitter_data ) && !empty( $twitter_data  ) ) {
    print_r( $twitter_data ); // Hell Yeah, you did it...
}
```

You can also add something called `transient` for better performance. I'll write an article only on *Transient* very soon.
A Detailed Guide To Dash Coin
Tags: dashcoin, dashcryptoprice
Published: 2019-12-26 11:04:41

So far, we have seen that Dash coin got introduced in 2014. This cryptocurrency became popular because it offered more privacy and speed, which Bitcoin was unable to do. Today, crypto investors can get information about Dash crypto price while browsing through several blogs and articles related to cryptocurrencies.

http://magic-traffic-booster.com/a-detailed-guide-to-dash-coin/
How to build a SAAS Chatbot?
Tags: python, javascript, saas, machinelearning
Published: 2019-12-26 10:37:46

I have a problem which is I'm building a chatbot that is used for some booking systems like event booking, I have built it with rasa and bot front for my personal use. So I'm moving to make it as SAAS product where many people can onboard themselves and make there own Dialogflow and deploy it into there website/FB messenger, chatbots that popup in the websites and ask us the question that based on client's dialog-flow. is there any way to do that, or how they did that.
Mobile E-Commerce with Flutter, Redux, and Stripe
Tags: ecommerce, mobile
Published: 2019-12-26 10:16:33

---
title: Mobile E-Commerce with Flutter, Redux, and Stripe
published: true
description: 
tags: E-Commerce, mobile
---
Published: Oct 2019
__Build an online marketplace for your mobile apps!__

[In this course](https://www.packtpub.com/web-development/mobile-e-commerce-with-flutter-redux-and-stripe-video?utm_source=Dev.to&utm_medium=referral&utm_OutreachV15706$5), we'll build a full-stack e-commerce mobile application from scratch, with a complete shopping cart for authenticated users as well as an entire customer checkout.

This will be a complete app with an eye-catching UI using the Flutter Material Library and Redux for global state management and Redux Thunk for async actions. This will be a complete API with custom controllers thanks to Strapi, with our app data stored in a cloud MongoDB Atlas database and user authentication with Register/Login.

We will cover the following topics in this course:

* Async/await functions in Flutter, making authenticated requests

* Rapidly building a highly functional REST API with Strapi

* Managing/storing API data with the MongoDB Atlas cloud database

* Persisting data locally in Flutter with SharedPreferences

* Decoding/encoding and serializing/deserializing JSON data with Dart

* Navigation/routing in Flutter

* Using themes in Flutter to share color/text styles across apps

* Constructing forms/managing form state in Flutter apps

* Securely registering/logging-in users with JSON web tokens

* Form validation/error handling in Flutter

* Multi-child layout widgets: ListViews, GridViews, TabBars, and more

* Custom material-theme styling

* Formatting dates in Flutter with the Intl library

And much more!

This course will give you the core structure and techniques you need to build any sort of mobile store with Flutter, whatever product or service you sell.

All the code files are placed at https://github.com/PacktPublishing/Mobile-E-Commerce-with-Flutter-Redux-and-Stripe
The Gatsby Masterclass
Tags: gatsby
Published: 2019-12-26 10:16:08

---
title: The Gatsby Masterclass
published: true
tags: gatsby
description:
---
Published: Oct 2019

Do you want to make the fastest and best React applications? Look no further than Gatsby. [This course](https://www.packtpub.com/web-development/the-gatsby-masterclass-video?utm_source=Dev.to&utm_medium=&utm_campaign=OutreachV15687dollar5) is the best guide you'll find to learn the Gatsby framework. In it, we will be making a complete blog and online store, from project start to deployment on the web.

Here's what we'll be learning:

A complete blog/online store built entirely with Gatsby and GraphQL, user authentication with multi-factor authentication, content served from the Contentful headless CMS (with blog posts written entirely in markdown), and continuous deployment with Netlify

What will be covered?

How to use GraphQL in great detail, from the GraphiQL IDE to your React/Gatsby client

* Using GraphQL variables, arguments, fragments, and many more related concepts

* Sorting and filtering operations in GraphQL queries

* Utilizing the cloud-hosted headless CMS called Contentful for dead-simple content management

* Executing queries from Gatsby client with static queries and page queries

* Amazingly responsive images with Gatsby Image

* Fetching/managing Gatsby data with Gatsby source plugins

* Transforming data using Gatsby Transformer plugins

* Converting markdown data to HTML content with Gatsby

* Programmatically creating site pages in Gatsby

* Pagination in Gatsby (Prev/Next links, numbered pagination)

* User authentication using Netlify Identity

* Social login with Google, GitHub, GitLab, and Bitbucket providers

* Multi-factor authentication with account confirmation emails

* Shopping cart and user purchases with Snipcart

* Continuous deployment through Git/GitHub with Netlify

* Routing, nested routes, links, and active links in Gatsby

* And much more...
Plan Of Action
Published: 2019-12-26 10:00:37

Hello my name is Ojash and I am beginning my journey as Software developer and I have lot's of confusion mostly on how to proceed with my journey. How to start my journey?
Some people are asking me to learn all the top languages while some are asking me to participate more in hackathon. 
So what should I do?
Any help is appreciated.
I have basic knowledge of C++.
Modern C++ : `and`, `or` and `not` as Boolean Operators
Tags: cpp, tutorial, beginners
Published: 2019-12-26 09:53:05

Following my series from less known features of Modern C++.

{% post https://dev.to/delta456/modern-c-an-introduction-36kg %}

In Modern C++, you can also use `and`, `or` and `not` as boolean operators which means `&&`, `||` and `!` respectively which is identical to languages like Python. They were in C but as macros but  Modern C++ introduced them as keywords.

```cpp
#include <iostream>

int main() {

std::cout << true and true << std::endl;
std::cout << true or false << std::endl;
std::cout << not true << std::endl;

 return 0;
}
```

This is exactly identical to.

```cpp
#include <iostream>

int main() {

std::cout << true && true << std::endl;
std::cout << true || false << std::endl;
std::cout << !true << std::endl;

 return 0;
}
```

You can probably use any one of the styles depending on your codebase.
How you can make an ajax call in wordpress admin area ?
Tags: wordpress, ajax, javascript, admin
Published: 2019-12-26 09:21:03


Wordpress made it so easy to use ajax in admin and front-end areas since the ajax is built into WordPress core.

Let's see the short example of this:

1. Without separate javascript file
2. With separate javascript file

You can create a file in your plugin **OR** you can use your theme's functions.php file for this.

###1. Without separate javascript file


There is an action hook called **admin_footer**, using that we can embed the javascript code into the admin footer area.

1. create an ajax request from javascript and pass **action** variable as data.

2. Wordpress uses **wp_ajax_** action hook to detect all ajax requests coming from admin or front-end area. You need to specify this as **prefix** with your action name like this **wp_ajax_your_action_name**. See the below example for this.

**ajaxurl** javascript global variable is defined for the admin area which gets the **admin-ajax.php** url.

```php

<?php
add_action( 'admin_footer', 'ajax_without_file' );
function ajax_without_file() { ?>
	<script type="text/javascript" >
	jQuery(document).ready(function($) {
		var dataVariable = {
			'action': 'my_action_without_file', // your action name
			'variable_name': "Some value" // some additional data to send
		};

        jQuery.ajax({
            url: ajaxurl, // this will point to admin-ajax.php
            type: 'POST',
            data: dataVariable, 
            success: function (response) {
                console.log(response);
            }
        });
	});
	</script> 
    <?php
}


add_action("wp_ajax_my_action_without_file" , "my_action_without_file");
function my_action_without_file(){
    echo json_encode($_POST);
    wp_die();
}
?>
```


###2. With separate javascript file

Create a **sample-scripts.js** file and include this code

```javascript
jQuery(function ($) {

    var testingObj = {
        init: function () {
            testingObj.callAjaxMethod();
        },
        callAjaxMethod:function(){
            var data = {
                'action': 'my_action_with_file',  // your action name
                'name': "Shweta"
            };

            $.ajax({
                url: ajaxurl,
                type: 'POST',
                data: data,
                success: function (response) {
                    console.log(response);
                }
            });
        }
    }
    testingObj.init();
});

```

Create a php file and use **admin_enqueue_scripts** action hook to include js file in admin footer.

```php
<?php
add_action( 'admin_enqueue_scripts', 'enqueue_my_script' );
function enqueue_my_script() {
    wp_enqueue_script( 'my-script', plugin_dir_url(__FILE__).'sample-scripts.js', array('jquery'), null, true );
}

add_action("wp_ajax_my_action_with_file", "my_action_with_file");
function my_action_with_file(){
    echo json_encode($_POST);
    wp_die();
}
?>

```

Here, in both cases, you can check the output in console log.
What is display: flow-root?
Tags: css
Published: 2019-12-26 09:20:48

---
title: What is display: flow-root?
published: true
description: 
tags: CSS
---

[MDN says][1]:

> `display: flow-root`: The element generates a **block element box** that establishes a **new block formatting context**, defining where the formatting root lies.

So, using `display: flow-root` means

- you don't have to use `.clearfix` hacks, and
- won't hide `box-shadow` comparing to use `overflow: hidden`

{% codepen https://codepen.io/zhangbao/pen/ZEYyjyd %}

References:

- [display: flow-root][2], from CSS-Tricks
- [display: flow-root versus clearfix][3]

[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/display#Syntax\
[2]: https://css-tricks.com/display-flow-root/
[3]: https://codepen.io/thierry/pen/GrvWNM
Web Services API - Learn Web Services from Scratch
Tags: webdev, tutorial, beginners
Published: 2019-12-26 09:14:07

If you are a complete beginner and know nothing about web services, this course is for you. 

After this course you will never forget what a web service is and how does it work.
You will also understand the very basics of SOAP and REST web services.

What you'll learn
* Understand what exactly is Web Service
* How web services work
* What is SOAP Web Service
* What is REST Web Service

{% youtube _jP2P4dTSXI %}
Bitcoin's Post Halving Bull Run Can Generate Over 1000%+ Returns
Tags: cryptonews, cryptocurrency, litecoin, bitcoin
Published: 2019-12-26 07:39:04

Bitcoin started the year around $3,800 mark and was slated to see a bull run after the longest crypto winter in 2018. In the first half of the year, Bitcoin reached its yearly high of near $13k in July which made many optimists believe that the bull run was just around the corner. However, in the following months, the price of BTC saw many corrections and currently trading at around $7,340 mark. Despite losing nearly half of its value from the yearly high, Bitcoin has managed to generate 90% returns in 2019, higher than any other high performing asset.
Market analysts had made it clear that Bitcoin has moved past its bubble phase in 2018, and would see an uptick in its price right before the halving or post halving. However, the Litecoin halving in August this year did not help the price of LTC which did start a debate on whether Bitcoin would meet a similar fate.

Plan B, a crypto trader by profession explained that Litecoin has not seen any development work on its platform and the founder himself had sold his stake earlier, thus impacting the confidence of the community which in turn was reflected in the price. On the contrary, the Bitcoin network has seen the highest hash inputs, market dominance, rising institutional interests. Plan B also introduced stock-to-flow chart, which suggested Bitcoin can break into a bull run in the aftermath of block reward halving which could push its price as high as $100,000.

Read Out More 👉 https://www.cryptoknowmics.com/news/bitcoins-post-halving-bull-run-can-generate-over-1000-returns