teleren/devto huggingface dataset:
NGINX Monitoring with Grafana
Tags: nginx, prometheus, grafana, nginxplus
Published: 2023-02-23 05:24:50

ความเดิมจากตอนที่แล้ว [NGINX Monitoring with Prometheus](https://bit.ly/nginx-pmt) เราได้ติดตั้งและ Configure ให้ NGINX ทำ Expose metrics ผ่าน Prometheus โดยใช้ Prometheus Exporter

ในตอนนี้ เราจะติดตั้ง Grafana และนำ Prometheus Datasource มาแสดงผลใน Dashboard ครับ


`sudo docker run -d -p 3000:3000 grafana/grafana`

จากนั้น Log in เข้า Grafana ที่ http://ip:3000
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9one34bsp5atm3uiyc4k.jpg)

กดรูปเฟืองเกียร์ด้านซ้ายมือ เลือก Data sources, Add data sources
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v96nqo6n253uoj87515p.jpg)


ใส่ชื่อ และระบุ URL ของ Prometheus ที่ได้ทำการติดตั้ังไว้แล้ว
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/plj08wwsjyiun0xzi82q.jpg)


เลือก Save & test จะได้ข้อความ Data source is working
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zpdj402z05yt8ncv3mg2.jpg)


สร้าง Dashboard โดยเลือกที่ Dashboards, +New dashboard
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qg1upy6nmupibsfoha6m.jpg)


Add a new panel
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wj6vbl9cx000jk54w5nr.jpg)


ที่ Panel title, เลือก Edit
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m7uptc6d9yxjmt35fdmm.jpg)


ใต้ Tab Query, ช่อง Metric browser, พิมพ์ nginx จะแสดง metrics ที่สามารถนำมาแสดงผลได้, ในตัวอย่างจะเป็น metrics จาก NGINX Plus, หากมีการใช้งานกับ NGINX OSS จะเห็น Metrics จาก NGINX OSS โดยจะมีน้อยกว่า Metric จาก NGINX Plus
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/67m668xujyyipifaqrn6.jpg)

กดปุ่ม Apply
สามารถทดลองเรียกใช้งานไปที่ NGINX Instance เพื่อให้เห็นค่าที่เปลี่ยนแปลงใน Dashboard
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0z42u8wun7dy0ryigtgs.jpg)

ใน Prometheus จะมี label คือ job และ instance ใช้ระบุที่มาของแต่ละ Metrics ได้

สามารถระบุชื่อ job และ instance ได้ที่เครื่อง prometheus
ในตัวอย่าง ระบุ
job_name: 'NGINX-Plus'
instance: 'NGINX-Plus-1' และ 'NGINX-Plus-2'
สามารถทำได้ทั้ง NGINX Plus และ NGINX OSS และเพิ่ม Label อื่นๆ ได้

```
global:
  scrape_interval: 5s

  external_labels:
    monitor: 'NGINX-Plus'

scrape_configs:
  - job_name: 'NGINX-Plus'
    static_configs:
      - targets: ['10.4.117.203:9113']
        labels:
          instance: 'NGINX-Plus-1'
      - targets: ['10.4.117.204:9113']
        labels:
          instance: 'NGINX-Plus-2'
```


จาก Dashboard เป็นการแสดงจำนวน Connection ทั้งหมดที่เกิดขึ้น, และหากทำการ restart NGINX ก็จะเริ่มนับจาก 0 ใหม่ ฉะนั้นเราสามารถดู อัตราของจำนวน connection ในแต่ละช่วงเวลาได้ โดยใช้ function irate กำหนดช่วงเวลา 5m

`irate(nginxplus_connections_accepted[5m])`

จะได้จำนวน Connection ที่ Accepted 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b2vw7wvgbozt0dcoknnd.jpg)
⚡97 Things Every Programmer should know part 4.
Tags: webdev, programming, productivity, devops
Published: 2023-02-23 05:19:22

Automate Your Coding Standard — by Filip van Laenen

Coding standards should make it easier to work on a project, and maintain development speed from the beginning to the end.

It follows, then, that everybody should agree on the coding standard, too — it does not help if one developer uses three spaces to indent code, and another uses four.

There exists a wealth of tools that can be used to produce code quality reports and to document and maintain the coding standards, but that is not the whole solution. It should be automated and enforced by possible. Here are a few examples.

✅Make sure code formatting is part of the build process so that everybody runs it automatically every time they compile the code.

✅Use a static code analysis tool to scan the code for unwanted anti-patterns. If any are found breaking the build.

✅Learn to configure those tools so that you can scan for your own, project-specific anti-pattern.

✅Do not only measure test coverage but automatically check the results, too. Again, break the build if the test coverage is too low.

Try to do this for everything you consider important. Finally, the coding standards should be dynamic, rather than static. As the project evolves, the needs of the project change, and what has seemed smart in the beginning is not necessarily smart a few months later.

Do you agree with this statement? Which automated tools do you use in your projects? Let me know in the comments👉

Happy Coding!
A Beginner's Guide to Understanding DOM Events
Tags: dom, html, javascript, beginners
Published: 2023-02-23 05:00:20

The Document Object Model (DOM) is a powerful tool for creating dynamic web pages. One of the key features of the DOM is its ability to respond to user interactions, such as clicks, keystrokes, and scrolls. In this guide, we'll explore the basics of DOM events and show you how to add interactivity to your web pages using JavaScript.

## What are DOM events?
DOM events are actions that occur on a web page, such as a user clicking a button, moving the mouse, or typing on a keyboard. These events can be detected and handled using JavaScript, allowing developers to add interactivity to web pages.

## Types of DOM events
There are many types of DOM events, but some of the most common ones include:

**Mouse events:** These events occur when the user interacts with the mouse, such as clicking a button, moving the mouse, or scrolling the page. Examples include click, mouseover, and scroll events.

**Keyboard events:** These events occur when the user types on the keyboard, such as pressing a key or releasing a key. Examples include keydown, keyup, and keypress events.

**Form events:** These events occur when the user interacts with a form element, such as submitting a form or changing the value of a form field. Examples include submit, change, and focus events.

**Window events:** These events occur when the web page is loaded or the window is resized or closed. Examples include load, resize, and unload events.

## Handling DOM events with JavaScript
To handle DOM events, developers can use event listeners, which are functions that are executed when a specific event occurs. Event listeners can be added to HTML elements using JavaScript, and they can be used to perform a variety of actions, such as updating the content of a web page or validating user input.

Here's an example of how to add an event listener to a button element:

```
<button id="myButton">Click me</button>

<script>
  const myButton = document.getElementById('myButton');
  myButton.addEventListener('click', function() {
    alert('Button clicked!');
  });
</script>
```
In this example, an event listener is added to the button element with an ID of "myButton." When the button is clicked, the alert function is executed, displaying a message to the user.

**Conclusion**
DOM events are a powerful tool for creating interactive web pages. By understanding the basics of DOM events and using JavaScript to handle them, you can create dynamic and engaging web pages that respond to user interactions. So go ahead and experiment with DOM events in your own web projects - the possibilities are endless!

Thanks for reading! I hope you found this post informative and helpful. If you have any questions or feedback, please feel free to leave a comment below
Apache AGE Installation Process Part 3
Published: 2023-02-23 04:47:07

Hi Again!

So we will continue on with the explanation of commands we used for setting up PostgreSQL on our systems.

So after building postgres using make command, we ran make check. Make check runs a series of tests, we call them regression tests (More on regression tests later!), to verify and make sure that build process was a success and point out errors if any.

The final step was to install postgres.
Make install command is used for this. Make install also offers some modifications that can be used to alter the installation process a bit.

For example, if we run "make install-docs", it will only install the documentation for postgre.

And that's everything related to setup of PostgreSQL.

In the next blog, we will learn how to setup Apache AGE on our systems.

https://age.apache.org/
https://github.com/apache/age

Stay Tuned!
Check performance bottleneck with Azure Application Insights.
Tags: azure, performance
Published: 2023-02-23 04:43:16

---
title: Check performance bottleneck with Azure Application Insights.
published: true
description: 
tags: #azure #performance
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---
If you have Application Insights enabled for your azure app service, then it is a piece of cake to get the performance bottleneck in your app, and even it check external dependencies like database queries or any other external dependencies.  

I have a Web API application, that is accessing Azure Sql Server, and Azure blob storage.  

By going into the performance blade under `Investigate`:  
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0mr3srn55zc4vebhm1ik.png)

You will see the average time for each API call, sorted descending by time:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ir4wnbet13t5m4875maz.png)

By clicking on any one, you can drill down to where the time consume even by its external dependencies:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s693bun98iqxz1y459q8.png)

As you can see it shows the time it takes to connect to its external resources, and in our case they are:  
* Sql Server
* Blob Storage

You can even drill down to its collected samples:  
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6vujzbb9n233osykkvkg.png)

And you can get a very granular look at the time consume in the whole workflow of that API call:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/omzo4cgmwcncj9shn6q1.png)

## Wait, there is more
If the app administrator had concerns about the performance, and want to inform the developer team, then they can report the issue from Application Insights.  
On the right side, you can create a **`Work Item`** to report this issue to the dev team.  

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kyg5duvxy0h3korp97yn.png)

You need to have a `Work Item Template`, which define where you report those issues. There are two venues where you report the issues:  
1. Azure DevOps.
2. GitHub Repository, where it report it to the `Issues` tab in the repository.  

Creating a template is easy, but I am not going to cover it here, and I am already created a template the report in my github repo.  

After you create a `Work Item`, (in my case I had already template, it will create an issue with the name of the API call

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8wcdmrm07p6c7jjfx1bx.png)

and inside the issue will have a link to the details captured in Application Insights.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kejv8yf70spkg4j2ntag.png)
Apache AGE Installation Process Part 2
Tags: apacheage, postgres, c
Published: 2023-02-23 04:39:28

Sup!

In this blog, the commands used for the installation of PostgreSQL, as described in the previous blog, will be explained.

The first one, unpack command to extract postgres, just simply works as its written.

Configure command allows many parameters to pass to it. These parameters alter the setup of postgreSQL according to the values passed in the configure command. An example is shown below.

./configure --prefix = PREFIX

This will install all the files in the PREFIX folder instead of the default one. There are many more such parameters that can be used for custom modifications. These can be found in the documentation of PostgreSQL. The link is given at the end. 

The make command builds postgres on your system. Some modifications can be used such as

make world

This will build everything including the documentation and additional modules.

So that's all for now. This shall be completed in the next blog. Stay tuned and remember to check out the links below.

https://www.postgresql.org/docs/current/install-procedure.html

https://age.apache.org/
https://github.com/apache/age

Thank You!
Abstraction Distraction
Published: 2023-02-23 04:37:00

Through all of grade school I was awful at math. I think I had a handle on things through my multiplication tables but some time after that my comprehension fell apart. This was all back in the 90s and early 2000s but by the time I left high school I had taken algebra 1 in some form or another four times and failed geometry once. Later, after flunking out of **three** different community colleges before the age of twenty-one. I gave up on school, avoided it for the next _nine years_. But sometime later in 2017 I thought I should try again. It had been so long and all I cared about was music and I felt some audio engineering classes would be a nice easy way to get my feet wet, maybe I could get a degree in it. On the side I took a C++ class. People have always told me I was _smart_ (which I detest and still struggle to understand what that even means) and I thought _“hey this is something people say is hard, let’s see if you can even grasp the material”_. It’s funny how people teach most topics without any real world examples. I think it’s a giant disservice to students and the subject matter when people don’t show what things are used for, because if anyone had _ever_ shown me that beyond counting apples, math was what was being used to create _all_ of my favorite video games, I would have sat down and **burned** through every math book till it was _dust_. Nowadays I have gotten through some pretty abstract theoretical math classes, and I still experience it all over again. I _love_ that a matrix can be disassembled and reassembled with the smallest bits of information of it, but you’re never gonna get me to _truly_ _breathe_ the material until you show me how it’s used in a **videogame**. That’s just how my brain ticks. I was the same with piano, absolutely _no_ _interest_ till someone played me a song. Then I was like, okay that’s _cool_ I can get through this to the other side. And I _know_ I’m not the only one that works this way, which is why I am writing this down. No one is a genius, we are all just people with _passions_ that’ll trudge through anything to get to something we **love**.
Stay Ahead of the Game with DailyDev - The Ultimate Chrome Extension for Developers!
Published: 2023-02-23 04:21:24

If love YouTube Video [Click Here](https://youtu.be/CaUHE_XJ2vI) and see my Latest video about DailyDev Chrome Extension

Are you tired of scrolling through endless news feeds to stay up-to-date with the latest tech news and trends? Look no further than DailyDev - the ultimate Chrome extension for developers!


With DailyDev, you'll never miss a beat in the world of programming. This powerful tool is packed with personalized news feeds, real-time updates, and curated content from top industry experts, all in one convenient location.

But that's not all - DailyDev also offers a range of features to help boost your productivity and take your skills to the next level. From code editors and developer tools to coding tips and industry insights, DailyDev has everything you need to stay ahead of the game and stay on top of your game.

So why wait? Give DailyDev a try today and discover why it's the must-have extension for anyone serious about programming. Download it now from the Chrome Web Store and see for yourself why DailyDev is the ultimate tool for developers!


Conclusion- Hey everyone, if you're a developer looking to stay up-to-date with the latest tech news and trends, you need to check out DailyDev! This amazing Chrome extension is packed with personalized news feeds, real-time updates, and curated content from top industry experts. Whether you're a seasoned pro or just starting out, DailyDev is the perfect tool to help you stay ahead of the game and take your skills to the next level. Check it out now and see for yourself why DailyDev is a must-have for anyone serious about programming! 

Also Not Forget to Check my latest YouTube video about DailyDev [Click HERE](https://youtu.be/CaUHE_XJ2vI)


#DailyDev #ChromeExtension #DeveloperTools #ProductivityTools #TechNews #ProgrammingTips
First Step
Tags: beginners
Published: 2023-02-23 03:52:35

This post will mark my first step into the world of coding. I'll be doing my best to update my journey as I go, and I can't wait to be able to contribute to the community. Going to keep it short and sweet. I hope to refer to this post in a couple months and laugh a little to myself at how much I didn't know and hopefully at how much I have learned. 

Cheers!
GBTI launches their private developer community through NextJS Google Drive Directory app.
Published: 2023-02-23 03:50:43

[GBTI ](https://gbti.io)launches their private developer community through their NextJS Google Drive Directory app.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9yz1eefgdy0bl5qm2snp.png)

GBTI recently opened their doors as an exclusive community for web developers. They’ve opened their launch with an asset and tutorial series that provides a code base for interacting with the Google Drive API from within a NextJS application.

[“How to Create a Google Drive App.”](https://gbti.io/assets/nextjs-google-drive-directory/) This series, designed for GBTI members, is now available to help developers learn how to use NextJS, React, and Node to create a custom application that connects to the Google Drive API.

The “How to Create a Google Drive App” series is one of many exclusive resources available to GBTI members. The series includes a code base that is only accessible to community members, ensuring that they have access to the latest and most useful resources for their projects and companies.

The code base and tutorials are designed to help GBTI members build a Google Drive app with [Next.js](https://nextjs.org/), a popular React-based framework, and teaches them how to build out a serverless backend using Google Cloud Functions. The series also shows how to use the OAuth2 protocol for authentication, enabling secure and reliable access to user data. The tutorials also show how to install the application locally, as well as to a [Vercel](https://vercel.com/)instance that is connected to a private Github repository.

In addition to this asset base and tutorial package, GBTI also supplies a private Discord community to it’s members where curators focus on delivering high-quality and novel news items to it’s members. GBTI is powered by a profit share model where its news and code content are supplied by hand selected curators and developers. This combination of value makes GBTI an attractive community for all things web development.

To learn more about GBTI and the “How to Create a Google Drive App” tutorial series, visit https://gbti.io/assets/nextjs-google-drive-directory/.

Join the [GBTI community](https://gbti.io) today to access the exclusive resources available to its members.
502. Leetcode Solution in CPP
Tags: cpp
Published: 2023-02-23 03:50:05

=============================================================
#Description:
Suppose LeetCode will start its IPO soon. In order to sell a good price of its shares to Venture Capital, LeetCode would like to work on some projects to increase its capital before the IPO. Since it has limited resources, it can only finish at most k distinct projects before the IPO. Help LeetCode design the best way to maximize its total capital after finishing at most k distinct projects.

You are given n projects where the ith project has a pure profit profits[i] and a minimum capital of capital[i] is needed to start it.

Initially, you have w capital. When you finish a project, you will obtain its pure profit and the profit will be added to your total capital.

Pick a list of at most k distinct projects from given projects to maximize your final capital, and return the final maximized capital.

The answer is guaranteed to fit in a 32-bit signed integer.

 

Example 1:

Input: k = 2, w = 0, profits = [1,2,3], capital = [0,1,1]
Output: 4
Explanation: Since your initial capital is 0, you can only start the project indexed 0.
After finishing it you will obtain profit 1 and your capital becomes 1.
With capital 1, you can either start the project indexed 1 or the project indexed 2.
Since you can choose at most 2 projects, you need to finish the project indexed 2 to get the maximum capital.
Therefore, output the final maximized capital, which is 0 + 1 + 3 = 4.
Example 2:

Input: k = 3, w = 0, profits = [1,2,3], capital = [0,1,2]
Output: 6
 

Constraints:

1 <= k <= 105
0 <= w <= 109
n == profits.length
n == capital.length
1 <= n <= 105
0 <= profits[i] <= 104
0 <= capital[i] <= 109
=============================================================
#Solution:
```cpp
struct T {
  int pro;
  int cap;
  T(int pro, int cap) : pro(pro), cap(cap) {}
};

class Solution {
 public:
  int findMaximizedCapital(int k, int W, vector<int>& Profits,
                           vector<int>& Capital) {
    auto compareC = [](const T& a, const T& b) { return a.cap > b.cap; };
    auto compareP = [](const T& a, const T& b) { return a.pro < b.pro; };
    priority_queue<T, vector<T>, decltype(compareC)> minHeap(compareC);
    priority_queue<T, vector<T>, decltype(compareP)> maxHeap(compareP);

    for (int i = 0; i < Capital.size(); ++i)
      minHeap.emplace(Profits[i], Capital[i]);

    while (k--) {
      while (!minHeap.empty() && minHeap.top().cap <= W)
        maxHeap.push(minHeap.top()), minHeap.pop();
      if (maxHeap.empty())
        break;
      W += maxHeap.top().pro, maxHeap.pop();
    }

    return W;
  }
};

```
#leetcode
#challenge
Here is the link for the problem:
Show your kid how cool the terminal is
Tags: macos, linux, learn, terminal
Published: 2023-02-23 03:32:15

Your children may have already been exposed to Minecraft commands which run on _some kind_ of command line but here's a few quick and fun programs to show them on a terminal. 

Your kid can make the computer say things in a cool robot voice or just have some text-based fun. After installing [Homebrew](https://brew.sh) run these commands. Feel free to pause the video and copy text at any time. Yes, you can copy text from it 😉.

{% embed https://asciinema.org/a/562074 %}
How to internationalize your Flutter app for a global audience
Tags: flutter, beginners, tutorial, dart
Published: 2023-02-23 02:57:56

In today's globalized world, developing an app that caters to a diverse audience is critical. This is where internationalization comes in - the process of designing an app to support different languages, regions, and cultures. In this video, we'll show you how to internationalize a Flutter app to reach a wider audience. You'll learn the step-by-step process of integrating localization, translation, and language support in your app's user interface. 

{% youtube O9W1dEonvXM %}