teleren/devto huggingface dataset:
A guide to integrate Datadog to your Hasura Cloud project
Tags: apm, datadog, observability
Published: 2021-04-12 17:34:39

---
title: A guide to integrate Datadog to your Hasura Cloud project
published: true
date: 2021-04-08 13:18:52 UTC
tags: APM,Datadog,Observability
canonical_url: https://hasura.io/blog/integrating-datadog-with-hasura/
---

 ![A guide to integrate Datadog to your Hasura Cloud project](https://hasura.io/blog/content/images/2021/04/datadog_blog-1.jpg)

We announced our [integration with Datadog](https://hasura.io/blog/hasura-monitoring-with-datadog/) back in November. With this integration, you can observe all your GraphQL queries and mutations made against your Hasura Cloud project's API, and well as query success, failure, errors, and any exceptions that may occur.

ICYMI, we also recently announced our [integration with New Relic](https://hasura.io/blog/integrating-new-relic-with-hasura-cloud/).

In this post, we have a quick video guide on adding Datadog to your [Hasura Cloud](cloud.hasura.io) project in a few simple steps.

### Why add Datadog to Hasura

Monitoring and tracking is a critical component to building robust tech-stacks, and having a native integration for Datadog that can consume your logs and metrics simplifies your APM infrastructure and logging infrastructure in general.

### What data gets sent to Datadog

At the time of writing, we send logging events across _http_ and _ws_ with the following 5 metrics:

1. Average number of requests
2. Average request execution time
3. Success rate of requests
4. Active subscriptions
5. Number of websockets open.

You can read more in our [docs](https://hasura.io/docs/latest/graphql/cloud/metrics/integrations/newrelic.html#view-metrics) page.

We will be adding additional metrics in the future. If you have a specific measurement need, let us know!

### How to get Started

You can reference the documentation above, or view the following guide that shows how to quickly add Datadog to your Hasura projects and view the exported logs.

{% youtube tF4iQpV5CfY %}
Design and develop the next hit game with help from Mercury eBooks
Tags: gamedev, python, unity3d, programming
Published: 2021-04-08 12:55:51

**[Humble Book Bundle: Game Dev, Design & Graphics by Mercury](https://www.humblebundle.com/books/game-dev-design-graphics-mercury-books?partner=indiekings)**

Get eBooks like Game Development Using Python 2E, Classic Game Design With Unity 2/E, and Photograph Enhancement Videos Using Photoshop CC 2021. 📚

Plus, your purchase helps support Whale and Dolphin Conservation! 🐬
DISCUSS: How would the ideal browser for devs be like?
Tags: discuss, watercooler, webdev
Published: 2021-04-08 12:51:50

---
series: "Thalita's weekly discussions"
---

Imagine a world where devs have the perfect browser to make and debug websites with... a browser that helps us develop faster and more efficiently... how would it be like?

Firefox is always seen as one of the best browsers among the most popular ones, and there are already dev-oriented browsers like [Polypane](https://polypane.app), but could we go a step further?

# ✍ Comment below answering these two questions

1. What browser do you currently use and why?
2. How do you see a perfect browser for devs? What features would it have? Think of stuff like: an even more advanced CSS debugger than Firefox', an in-built colour picker, accessibility tools etc.

---

![Thalita logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sa0hfs0886uf0g7c0b7e.png)

[Twitter](https://twitter.com/thalitadev) | [Website](https://thalita.dev)
Send data to all connected clients
Tags: react, webpack, node, ssr
Published: 2021-04-08 12:44:09

Hello everyone!
I'm pretty new to React, and frankly to web development in general. I'm trying to develop a data monitor for a robotics project. Just to give you an idea, something like this: https://dash-gallery.plotly.host/dash-avs-explorer/ (toggle the Advanced mode to see some charts). 

So, imagine this use case: I have N robots which are sending data to a server somewhere. Now, I'd like people to be able to connect from different devices to this server and visualize the data on some charts.

I'm a bit lost on how to structure this, from an architectural point of view (and on what are the best tools). I have already developed something basic connecting the robot directly to a React frontend and I'm able to visualize the data. I've come across the concept of Server-Side-Rendering. It's not clear to me if this is what I need, though. I'm thinking maybe something even simpler, like React+Node.js ("full-stack React")?

Can someone give me some tips on this? Much appreciated, thanks!
WorkManager
Tags: android, kotlin
Published: 2021-04-08 08:27:37

#####WorkManager can invoke deferred asynchronous tasks that should still run when the device restarts or when the app exits. Methods can also be called when the program is exited or the device is shut down and restarted.
```kotlin
// Import WorkManager dependencies in build.gradle
implementation 'androidx.work:work-runtime-ktx:2.5.0-alpha01'
```
```kotlin
// The new class class inherits the Worker class with the parameters context, workerParams
// Override the doWork method and add the logic to be executed to Result
class MyWorker(context: Context, workerParams: WorkerParameters) : Worker(context, workerParams) {
    override fun doWork(): Result {
        // val name = inputData.getString(KEY)    // Retrieve the data passed in the task
        Log.d("TAG", "doWork: $name start")
        Thread.sleep(3000)
        Log.d("TAG", "doWork: $name finish")
        // The outputData return value can be added in the success, and the return value type is Pair (KEY, value)
        // return Result.success(workDataOf(Pair(key,value)))
        // Success can also be in to form
        // return Result.success(workDataOf(KEY to value))
        return Result.success()
    }
}
```

#####Used in MainActivity

```kotlin
class MainActivity : AppCompatActivity() {
    // Add a single example of WorkerManager to pass the context
    private val workerManager = WorkManager.getInstance(this)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        button.setOnClickListener {
            // Add a task condition (this condition is a hook when the network is connected)
            val constraints = Constraints.Builder()
                    .setRequiredNetworkType(NetworkType.CONNECTED)  // When the network type is connected
                    .build()
            // Add cascading tasks (multitasking) demos:
            // workerManager.beginWith(workA).then(workB).then(workC).enqueue
            // Add a single job request OneTimeWorkRequestBuilder < type: The Work class > created
            val workRequest = OneTimeWorkRequestBuilder<MyWorker>()
                    .setConstraints(constraints) // Add execution criteria (constraints of the previous section of code)
                    .setInputData(workDataOf(KET to value))  // Pass data to the Created Work class
                    .build()
            workerManager.enqueue(workRequest)   // Add a task queue
            workerManager.getWorkInfoByIdLiveData(workRequest.id).observe(this, Observer {
                if(it.state == WorkInfo.State.SUCCEEDED){
                    Log.d("TAG", " ${it.outputData.getString(KEY)}")
                }
            })
        }

    }
}
```
Stop Googling split, splice, and slice!
Tags: javascript, webdev
Published: 2021-04-08 12:26:27

Ok, Split, Splice, and Slice methods are getting me confused every single time I use one of them, and no matter how many times I use them each time feels like the first time so I decided to summarize how they work in this article and save it as a memo to be my reference in such a situation.
Let's start!
###split:
Split is a string method, It converts a string into an array of substrings

#####signature: 
```string.split(substring that separates our string, limit)```
```javascript

const str = "Good Morning Dev Community"

str.split("Morning Dev ")
//output:["Good ", "Community"]

str.split(" ") 
//output: ["Good", "Morning", "Dev", "Community"]

str.split("") 
//output: ["G", "o", "o", "d", " ", "M", "o", "r", "n", "i", "n", "g", " ", "D", "e", "v", " ", "C", "o", "m", "m", "u", "n", "i", "t", "y"]

str.split("",4) 
//output: ["G", "o", "o", "d"]

```

###Splice:
Splice is an array method that adds, replaces, or removes items from the array and it returns the replaced/removed item

#####signature:
```array.splice(start index, number of replaced/removed items, new items to be added or replacing the removed)```
```javascript

const colors = ["orange", "red", "blue", "black"]

colors.splice(1,1,"black") 
/* output:["red"]
- "red" is removed and replaced by "black"
- splice methods returns the removed item ["red"]
- colors = ["orange", "black", "blue", "black"]
*/

colors.splice(1,0,"white")
/* output:[]
- "white" is inserted at index 1 and there is no item removed
- splice method return an empty array
- colors = ["orange", "white", "black", "blue", "black"]
*/

colors.splice(3,2,"orange","purple")
/* output:["blue", "black"]
- "orange","purple" are inserted from index 3 and "blue", "black" are removed
- splice method returns ["blue", "black"]
- colors = ["orange", "white", "black", "orange", "purple"]
*/

colors.splice(3,2)
/* output:["orange", "purple"]
- "orange","purple" are removed
- splice method returns ["orange", "purple"]
- colors = ["orange", "white", "black"]
*/

```

###Slice:
Slice is an array method that returns a new array with the selected items from the original array

#####signature:
array.slice(start index where the selection starts, end index where the selection ends)

```javascript
const weekDays = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday","Saturday"]

const mondayTuesday = weekDays.slice(1,3)
//mondayTuesday= ["Monday", "Tuesday"]

const allExceptSundayMonday = weekDays.slice(2)
//allExceptSundayMonday = ["Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]

const allExceptSaturday = weekDays.slice(0,weekDays.length - 1)
//allExceptSaturday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]

```
Thank you, I hope we never google these three methods again ✌
Python  - Random Password Generator GUI  For Beginner's
Tags: python, programming, tutorial, beginners
Published: 2021-04-08 12:17:38

Hello friends here is a simple Random Password Generator build using Python's PysimpleGUI Module if you want to add new feayures/suggestions kindly check out the  git link & push changes -https://github.com/LP-Codes/Python-Random-Password-GUI/tree/master

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fi9x88c3iy1tipvxra59.PNG)
```
import random
import string
#### module allows us to copy and paste text to and from the clipboard to your computer
import pyperclip
####  for creating gui
import PySimpleGUI as sg



sg.theme("Darkbrown")
####  Defining the window's contents
layout = [[sg.Text("Random Password Generator", font=("Helvetica", 25, "bold"))],
          [sg.Text("Select Password Length", key='-OUTPUT1-', font=("Helvetica", 10, "bold"))],
          [sg.Spin([i for i in range(1, 11)], initial_value=1,
                   size=(30, 4), key='-INPUT-')],
          #   [sg.Input(key='-INPUT-' "sd")],
          [sg.Text(size=(40, 1), key='-OUTPUT-', font=("Helvetica", 25, "bold"))],
          [sg.Button('Generate', border_width=5, pad=(25, 10), font=("Helvetica", 10, "bold")),
           sg.Button('Copy', border_width=5, pad=(25, 10), font=("Helvetica", 10, "bold")
                     # Defining the window's contents
                     ), sg.Button('Quit', border_width=5, pad=(25, 10), font=("Helvetica", 10, "bold"))]]

window = sg.Window('Lp Password Generator', layout)

####  Display and interact with the Window using an Event Loop
while True:
    event, values = window.read()

    if event == 'Generate':
        useript = values['-INPUT-']
        lower = string.ascii_lowercase
        upper = string.ascii_uppercase
        num = string.digits
        symbols = string.punctuation
        all = lower + upper + num + symbols
        temp = random.sample(all, useript)
        password = "".join(temp)
        print(password)
        sg.popup(password)
        window['-OUTPUT-'].update(password)

        window["-INPUT-"].update("1")

    if event == "Copy":
        op = window['-OUTPUT-'].get()
        pyperclip.copy(op)
        ####  Output a message to the window
        sg.popup("Password is copied to your clipboard")

    ####  See if user wants to quit or window was closed
    if event == sg.WINDOW_CLOSED or event == 'Quit':
        break

####  Finish up by removing from the screen
window.close()
```
What is your Linux distribution of choice and why?
Tags: linux, devops, discuss
Published: 2021-04-08 12:13:14

Hi all!

I have personally been using Linux for the past 8 years now. I initially started with Linux Mint installed on my laptop and I was quite happy with it. Then a couple of years later I switched to Ubuntu 16.04.

What I love about Ubuntu so far is that I've been upgrading it each year and I'm now at 20.04 on the same laptop. This is something that was missing with CentOS.

For my servers, I've always been defaulting to CentOS up until the recent RH changes. So instead I've been experimenting with Ubuntu Server and it's quite nice.

So for me it's been:

* Desktop: Linux Mint -> Ubuntu
* Servers: CentOS -> Ubuntu

I'm quite curious to hear what your distribution of choice has been!
How to write clean code.
Tags: php
Published: 2021-04-08 12:09:59


#Good code#

At some time we write if statement like:

    public function create($type) {

        if ($type == 1) {
            return "A";
        } elseif ($type == 2) {
            return "B";
        } elseif ($type == 3) {
            return "C";
        }
    }

this code is good and worked but not clean code. 

#clean code#
we can convert this code to be like:

    priviate $array = [1 => 'A', 2 => 'B', 3 => 'C']; 

    public function create($type) {


        return key_exists($type, $this->array)? $this->array[$type]:false; 
    }
Flutter - Connect Firebase to your Flutter (App & Web) || Project Configuration || Signup a user #01
Tags: flutter, firebase
Published: 2021-04-08 12:08:51

Link: https://youtu.be/p1NPtRdvQBU
Hey All, 
I have started a new series that will cover most of the topics regarding flutter & Firebase (App & Web).
In this first video, I have covered: 
📌📌  We will first set up a new Firebase project.
📌📌 Then We will connect the Firebase project with Flutter App
📌📌 Then We will configure the Flutter Web for Firebase
📌📌 At last, we will test the connection using signing up a user with an email and password in firebase.
Please do show your support #like #share #Subscribe

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5mad1o0n9io6islty18e.png)
Daily Developer Jokes - Thursday, Apr 8, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-04-08 12:00:15

---
title: "Daily Developer Jokes - Thursday, Apr 8, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Thursday%2C%20Apr%208%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12593f93b65.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ I love you and I only love you. Does that turn you on?

___AND GATE:___ No.
 -->
Yahoo Secara Resmi Menghentikan Layanan Yahoo Answers Pada 4 Mei 2021
Tags: berita, yahoo, yahooanswers
Published: 2021-04-08 11:49:26


Tetapi seperti nasib Yahoo sendiri, layanan ini secara bertahap kehilangan pamor dan pengguna, akhirnya menjadi cerita yang hanya diketahui sedikit orang bahwa layanan ini masih ada.

Faktanya, jumlah pengguna yang masih mengakses Yahoo Answers akhir-akhir ini sangat kecil, sehingga Yahoo sebagai perusahaan induk mengambil keputusan yang jelas dan memutuskan untuk menghentikan layanan tersebut.

Yahoo Answers akan berhenti beroperasi pada 4 Mei, semua tautan pada platform tanya jawab hanya akan mengarahkan pengguna ke beranda utama Yahoo.

# Posting akan dikunci secepatnya bulan ini

Jika Anda masih memiliki data yang disimpan di Yahoo Answers, Anda dapat mengambilnya paling lambat tanggal 30 Juni.

*“Unduhan data Yahoo Answers Anda akan menghasilkan semua konten yang dibuat pengguna termasuk daftar pertanyaan, pertanyaan, daftar jawaban, jawaban dan gambar atau apapun yang sebelumnya pernah diposting. Anda tidak akan dapat mengunduh konten, pertanyaan, atau jawaban pengguna lain. Pengunduhan konten bersifat opsional. Namun jika Anda memilih untuk mengunduh konten Answers, Anda harus melakukannya sebelum 30 Juni 2021. Tim kami bekerja secepat mungkin untuk menyediakan data, tetapi dapat memakan waktu hingga 30 hari untuk menerima unduhan konten Anda”* Yahoo [menjelaskan](https://help.yahoo.com/kb/SLN35642.html).

Mulai 20 April, pengguna tidak lagi dapat memposting pertanyaan dan jawaban baru, setelah itu penonaktifan akan dilakukan pada 4 Mei untuk selamanya.

# Tidak ada platform pengganti

Yahoo tidak memiliki platform untuk menggantikan Yahoo Answers, jadi Yahoo merekomendasikan pengguna membuka Yahoo Search untuk mencari informasi atau apapun yang mungkin mereka butuhkan.

Yahoo mengakui bahwa minat terhadap platform ini telah menurun belakangan ini, jadi mereka hanya ingin mengarahkan sumber dayanya ke produk lain yang lebih masuk akal. Tidak ada informasi spesifik lain yang telah dibagikan, tetapi matinya platform Yahoo Answers menandakan semakin memperlihatkan kemunduran Yahoo beberapa tahun terakhir.

*Originally published at [MauCariApa.com](https://maucariapa.com/yahoo-secara-resmi-menghentikan-layanan-yahoo-answers-pada-4-mei-2021/) on April 08, 2021.*
Everything I know about learning how to code as a beginner developer
Tags: webdev, beginners, codenewbie, programming
Published: 2021-04-08 11:47:31

_If you found value in this thread you will most likely enjoy my tweets too so make sure you follow me on [Twitter](https://twitter.com/VladPasca5)  for more information about web development and how to improve as a developer. This article was first published on my [Blog](https://vladpasca.hashnode.dev/)_

## 1. You need to find a resource that works the best for you

It could be video courses, docs, or interactive tutorials

You don't know which one is the best for you if you never tried all of them

This is what you should focus on before starting to learn

## 2. You need to take notes

This will not only help you stick the knowledge in your head but it will also help you for reference later

Use a website like Notion or Evernote and write everything you learn about 

Each week or month go over these notes to see your progress!

## 3. You need to be consistent

Coding is something new for your brain and he needs time to understand it

One thing that can help speed up this process is being consistent

This way you expose your brain more to coding so it will understand everything faster

## 4. You need to play around with concepts

How?

Let's say that you learned about function today

Then build 5 more functions on your own

After that use a function with some loops too or with anything you learned in the past

This will prepare you for building projects

## 5. Courses don't teach you programming

Programming is different from coding

Coding is just writing the code

Programming is more than writing code. It is about debugging, solving problems, and more

You learn programming by building projects on your own

## 6. You don't need to learn everything

If you're a developer HTML, CSS and JavaScript is enough to build websites

Maybe learn a framework like React but that is not necessary

You don't need to learn every new technology that appears

## 7. "Master" the fundamentals

You'll use the basics 90% of the times

If you don't have a good base everything you'll try in the future will fall apart

Take your time to learn these and "master" them

## 8. You need to build projects

This is the only way you get to the next level because you can't just watch tutorials all-day

This will be the part where you'll learn the most

Remember that you need to learn to program not to code

## The end

_I hope found this useful and if you did please let me know. If you have any question feel free to DM me on  [Twitter](https://twitter.com/VladPasca5) ._
用 Arduino keyboard 程式庫送出 PrintScreen 鍵
Tags: arduino, keyboard, printscreen
Published: 2021-04-08 11:40:08

同事想模擬鍵盤送出 PrintScreen 鍵, 不過查了 [Arduino Keyboard 的文件](https://www.arduino.cc/en/Reference/KeyboardModifiers), 就是找不到 PrintScreen 鍵倒底要送什麼碼？還好, 網路神人就是神, 在[這一篇問答](https://github.com/arduino-libraries/Keyboard/issues/24#issuecomment-532682683)裡找到了答案, 206。

這是因為 USB 鍵盤應該是要依據 [Universal Serial Bus HID Usage Tables](https://www.usb.org/sites/default/files/documents/hut1_12v2.pdf) 中有關 USB keyboard 的 Usage Id (在文件中的 53 頁, 也可以參考[這裡](https://gist.github.com/MightyPork/6da26e382a7ad91b5496ee55fdc73db2)), [Adafruit 的 hid 程式庫](https://circuitpython.readthedocs.io/projects/hid/en/latest/api.html#adafruit-hid-keycode-keycode)就是依據這樣的方式指定按鍵, 不過 Arduino 的 [Keyboard 程式庫](https://github.com/arduino-libraries/Keyboard/blob/master/src/Keyboard.cpp)在實作時為了方便使用者送出文字字串, 所以幫使用者加上了一層轉換, 規則如下：

1. ASCII 可列印的文字都直接送 ASCII 碼給程式庫。
2. Usage Id 原本在 0xE0~0xE7 的輔助鍵, 也就是左右邊的 Ctrl、Shift、GUI、Alt, 被對應到 128~135。
3. 其餘的按鍵就依照原始的 Usage ID + 136 來編碼, 所以像是同事要找的 PrintScreen, 原本 Uage Id 是 0x46, 也就是 70, 加上 136 之後就是 206, 所以使用 Arduino 的 Keyboard 程式庫時若要送 PrintScreen, 就要送 206。
Display Data in Angular (6,7,8) Tutorial with Examples
Tags: angular
Published: 2021-04-08 11:20:14

Display Data in Angular (6,7,8) Tutorial with Examples

https://grokonez.com/frontend/angular/angular-8/display-data-in-angular-678-tutorial-with-examples

[no_toc]In the tutorial, Grokonez.com will introduce how to display data in Angular by examples:

<ul>
<li>Display data using Interpolation</li>
<li>Show array items with <code>*ngFor</code></li>
<li>Model Data by TypeScript class and display its properties</li>
<li>Using <code>*ngIf</code> to insert or remove an element by on boolean expression</li>
</ul>

Related posts:
- <a href="https://grokonez.com/angular-tutorial">Angular Tutorial</a>
- <a href="https://grokonez.com/frontend/angular/angular-6/angular-built-in-slice-pipe-array-slicepipe-string-slicepipe-example">Angular built-in Slice Pipe | Array SlicePipe + String SlicePipe Example</a>

More: https://grokonez.com/frontend/angular/angular-8/display-data-in-angular-678-tutorial-with-examples
Onboarding to a new codebase quickly and efficiently
Tags: vscode, ruby, rails
Published: 2021-04-08 11:17:47

A short demonstration of how to use AppMaps to shorten the time it takes to get productive on a new-to-you codebase.

I use the open source extension for VS Code called [AppMap](https://marketplace.visualstudio.com/items?itemName=appland.appmap), and the ecommerce Rails application [Solidus](https://github.com/solidusio/solidus) as an example.

[AppMap](https://marketplace.visualstudio.com/items?itemName=appland.appmap) works by recording the code execution paths of your app. A good way to create AppMaps is by recording unit, functional or integration test cases.

To check it out search for 'AppMap' in the VS Code extensions tab or in the [VS Code marketplace](https://marketplace.visualstudio.com/items?itemName=appland.appmap).