teleren/devto huggingface dataset:
WebSocket service behind nginx reverse proxy
Tags: webdev, websockets, nginx
Published: 2023-01-24 18:28:00

I have all my backend services behind a nginx reverse proxy. It allows  me to host many services with different URLs on the same machine,  when they're lightweight enough. And it manages SSL  and everything needed for secure connections for me, so I can keep my  code simple.

The latest service I'm working on relies a lot on WebSockets. Most browsers only allow `wss://` (secure web sockets) connections from web pages served with `https://`. So I needed to serve the socket with SSL.

## Configuration

For a successful web socket connection, we need to ensure that the **HTTP version is correct** and **pass some headers** to the service.

```nginx
server {
    location /ws {
        proxy_http_version 1.1;
        proxy_pass http://address:port;
        proxy_set_header Connection $http_connection;
        proxy_set_header Upgrade $http_upgrade;
    }
}
```

This configuration only applies to the `/ws` route, because that is where the socket is. We set the HTTP version to `1.1` since nginx uses `1.0` by default, and forward the `Connection` and `Upgrade` HTTP headers to the service.

## Keeping the socket open

The first thing I noticed after setting up the reverse proxy is that my connections were closing after a while. Turns out nginx closes connections that don't send any data within 60 seconds. You can increment this timeout thanks to the `proxy_read_timeout` directive:

```nginx
location /ws {
    # ...
    proxy_read_timeout 300s;
}
```

But I opted to send `ping` messages periodically from the client to tell the service that I'm still interested in keeping the connection open. I didn't like the idea of setting the timeout to some large time amount and have a connection open indefinitely.
NodeJs user authentication
Tags: webdev, javascript, beginners, tutorial
Published: 2023-01-24 18:23:11

Hey Guys,
in this post I will show you how you can create a easy user authentication for your NodeJs application.

First we need to install express,forgetpasses and body-parser
```
 npm install forgetpasses
 npm install express
 npm install body-parser
```
After that we will create a new express app like this:

```
var express = require("express");
var app = express();
```
Now we want to configure the body-parser:

```
var bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({
    extended: true
}))
app.use(bodyParser.json());
```

Now we succesfully created a express app with the body-parser. In order to implement the authentication system, we now want to configure the forgetpasses package.

```
const forgetpasses = require("forgetpasses");
var fp = new forgetpasses("YOUR_API_TOKEN")
```
You can get your api token on https://forgetpasses.com/dashboard/settings after you created a service account on https://forgetpasses.com/sign-up/client

If you want to check the token you can call this function of the package:

```
data = await fp.checkToken(req);
console.log(data)
```
This will log `true` if your token is working and `false` if its wrong.

If you now want to let a user login you can do it this way:

```
app.get("/generateLoginSession", async (req,res) =>{
    data = await 
    fp.generateLoginSession(req,res,"https://google.com")
    res.send(data)
})
```
You can now open this page and will see a lot of json send to your browser.
You will now copy the `url` and redirect your user to the url https://forgetpasses.com/loginsession/URL
After a succesfull login your user will get redirected to the url you passes into the function. In our case its https://google.com

With this url the user now can login and you can check if a user is logged in with this way:

```
app.get("/checkIfClientIsLoggedIn", async(req,res) =>{
    data = await fp.checkStatus(req);
    res.send(data);
})
```
This will log `true` if your user is loggedin and `false` if your user is not

Thanks for reading. If you have question let me know
Justifying Jakob's Law
Tags: devfasttt, designcrazybydevfasttt, ux, uiweekly
Published: 2023-01-24 18:17:59

>Design Crazy: S1 E4: The Crazy Design Blog by the humans @ Devfasttt!

Hello Humans to this blog, where we Justify Jakob's Law😛

_Backstory time: Jakob Nielsen, a User Advocate and principal of the Nielsen Norman Group, which he co-founded with Dr. Donald A. Norman (former VP of research at Apple Computer), coined the phrase "Jakob's Law". Dr. Nielsen founded the 'discount usability engineering' movement to improve user interfaces quickly and cheaply, and he invented several usability methods, including heuristic evaluation._

**_So back to the topic at hand... What is the Jakob's Law? Users spend the majority of their time on other sites.
This means that users prefer your site to function in the same way as all the other sites they are familiar with. _**

This law also applies to mobile applications and other digital products. By understanding Jakob's Law and designing interfaces that are consistent with users' existing mental models, designers can create interfaces that are more intuitive and easy to use.

It's important to note that Jakob's Law is not meant to discourage innovation or creativity, but to provide a foundation of familiar design patterns to build on, so users can quickly understand and start to use a new digital product or service.

##  So the Key takeaways for you: 

🏡Visitors will transfer their expectations from one familiar product to others that bear any resemblance to it whatsoever.

🧠💻We can create superior user experiences by leveraging existing mental models, allowing users to focus on their tasks rather than learning new models.

🦕When making changes, minimize discord by empowering users to continue using a familiar version for a limited time.
NGINX Monitoring with Prometheus
Tags: nginx, grafana, prometheus, ngixnplus
Published: 2023-01-24 18:15:39

NGINX เป็นทั้ง Web Server, Load Balancer, Reverse Proxy, Ingress Controller, Caching, Service Mesh, etc. แต่ทุก Use cases มีสิ่งที่เหมือนกันคือ Traffic จะวิ่งผ่าน NGINX ฉะนั้นความสามารถในการ Monitoring ทั้งตัว NGINX และ Traffic ที่วิ่งผ่าน NGINX จะช่วยประเมินสุขภาพของระบบได้ชัดเจน ช่วยดู Utilization รวมถึง Monitor หากเกิดข้อผิดพลาดได้แบบ Real Time

NGINX สามารถที่จะ Expose metrics ของตัวเองออกมาได้ โดยผ่านทาง 

/stub_status สำหรับ NGINX Open Source ได้แก่จำนวน Active Connections และ จำนวน Connections ทั้งหมด

 /api สำหรับ NGINX Plus จะดู Metrics ได้ละเอียดขึ้นเช่น HTTP Response code, zone status, backend status, etc. see [NGINX Plus REST API](https://demo.nginx.com/swagger-ui/)

Prerequisites: ติดตั้ง NGINX Plus / NGINX OSS พร้อมใช้งาน

## ขั้นตอนแรก
 เราจะ Configure NGINX ให้ Expose Metrics ออกมา

```
#NGINX Plus
location /api {
  api;
}
```

```
#NGINX OSS
location /basic_status {
  stub_status;
}
```

ทดลองเรียกดู NGINX Plus Metrics ที่ Path /api
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uqwsg0ljj1ahnxakvjy6.jpg)




## ขั้นตอนที่สอง
 ติดตั้ง Prometheus Exporter เพื่อดึง Metric จาก NGINX ออกไปเป็น Prometheus

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/40m68tvanfc1aryhli58.jpg)



ในขั้นตอนนี้เรารัน Prometheus Exporter บน Container โดยใช้ Image nginx/nginx-prometheus-exporter:0.10.0 และแทนที่ nginx-plus :8080/api ด้วย Address และ Port ที่ Expose metrics จาก NGINX 

```
docker run -p 9113:9113 nginx/nginx-prometheus-exporter:0.10.0 -nginx.plus -nginx.scrape-uri=http://<nginx-plus>:8080/api
```


## ขั้นตอนที่สาม
 ติดตั้ง Prometheus ให้อ่าน Metric จาก Prometheus Exporterในขั้นตอนนี้เรารัน Prometheus บน Container โดยใช้ Image prom/prometheus


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1yy5flq6h1w5t8qsu3n9.jpg)




เตรียมไฟล์ prometheus.yml โดยแทนที่ Prometheus Exporter ด้วย Address และ port ที่ได้จาก Prometheus Exporter ในขั้นตอนที่สอง
```
#prometheus.yml
global:
  scrape_interval: 15s 
  
  external_labels:
    monitor: 'codelab-monitor'
 
scrape_configs:  
  - job_name: 'prometheus'
    
    scrape_interval: 5s
 
    static_configs:
      - targets: ['Prometheus Exporter:9113']
```

รัน Prometheus บน Container โดย Mount prometheus.yml และให้เรียกใช้ Prometheus ได้ที่ port 9090
```
sudo docker run -d -p 9090:9090 -v ~/path/to/prometheus.yml:/etc/prometheus/prometheus.yml prom/prometheus
```

ทดสอบเรียก Prometheus ในตัวอย่างจะเป็นจำนวนของ connections_accepted

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

ตอนต่อไป เรามาดูการนำ Prometheus ไปเป็น Data source ให้กับ Grafana Dashboard เพื่อสร้าง Custom Dashboard ครับ
Beyond GPT-3: How Adept AI's ACT-1 is Pushing the Limits of AI Capabilities
Tags: chatgpt, gpt3, openai, act1
Published: 2023-01-24 18:15:05

Adept AI has introduced Action Transformer (ACT-1), a large model that can take actions in the digital world. This new model is trained to use every software tool, API, and web app that exists and the company believes that the clearest framing of general intelligence is a system that can do anything a human can do in front of a computer.

{% embed https://player.vimeo.com/video/749413832?h=4f59d0887f&muted=1&app_id=122963 %}

ACT-1 is a large-scale transformer model that can fulfill a high-level user request and execute it, work in-depth in tools like spreadsheets, complete tasks that require composing multiple tools together and it can look up information online. The company has also connected it to a Chrome extension that allows ACT-1 to observe what’s happening in the browser and take certain actions, like clicking, typing, and scrolling, etc.

{% embed https://player.vimeo.com/video/749413804?h=3c623f7a48&muted=1&app_id=122963 %}

{% embed https://player.vimeo.com/video/749413815?h=af12c5ae97&muted=1&app_id=122963 %}

The next era of computing will be defined by natural language interfaces that allow us to tell our computers what we want directly, rather than doing it by hand. ACT-1 is a part of this vision and the company believes that natural language interfaces, powered by action transformers like ACT-1, will dramatically expand what people can do in front of a computer/phone/internet-connected device.

Adept AI is planning to release an Alpha version of the product soon, which will give developers a chance to test out the capabilities of ACT-1 and see how it can help them automate their workflows. The company also plans to release more information about the technical details of ACT-1 in the future.

Overall, the introduction of ACT-1 by Adept AI is an exciting development in the field of AI and automation, and it will be interesting to see how it is used in the future to make our interactions with computers more natural and efficient.

Reference - [Adept AI](https://www.adept.ai/)
How to record a Demo/Meeting on MacOS
Tags: business, webdev, hackers, macos
Published: 2023-03-21 18:36:23

---
title: How to record a Demo/Meeting on MacOS
published: true
date: 2023-01-24 18:10:00 UTC
tags: Business,webdev,hackers,macos
canonical_url: https://greenido.wordpress.com/2023/01/24/how-to-record-a-demo-meeting-on-macos/
---

To record a meeting or a demo on a Mac, you can use the built-in QuickTime Player app.

Here’s how:

1. Open the Quicktime Player app from your Applications folder.  
**QuickTime Player** is the default media player for your Mac.  
It lets you [record audio](https://macreports.com/how-to-record-audio-on-your-mac/) and [video](https://macreports.com/record-face-screen-mac/).  
You can use Spotlight (_cmd+space bar_) to open it.

2. In QuickTime Player, choose **File > New Screen Recording**.  
This will open Screenshot and display the tools.

[![](https://greenido.files.wordpress.com/2023/01/screenshot-2023-01-07-at-10.03.23-am.png?w=405)](https://greenido.files.wordpress.com/2023/01/screenshot-2023-01-07-at-10.03.23-am.png)

3. **Click Options.**   
If you want audio, **select a microphone** (if you have more than one).  
You can also select the location where you want to save your recording.   
You can also record your entire screen or a selected portion of the screen, e.g. your app window.

[![](https://greenido.files.wordpress.com/2023/01/screenshot-2023-01-07-at-10.04.27-am.png?w=395)](https://greenido.files.wordpress.com/2023/01/screenshot-2023-01-07-at-10.04.27-am.png)

4. **Click Record.**  
Your Mac will start recording your screen.  
If you are in a Zoom meeting, your recording will include your Zoom meeting too.  
When you start your recording, a recording icon will appear in the menu bar indicating that a recording is in progress.  
Btw, with Zoom, Hangout, MS-Teams and other tools you have an option to record the meeting and that is a better (=more quality) one.

5. **When you want to stop your recording**.  
Press **Command-Control-Esc** (Escape) or alternatively click the recording icon in the menu bar.  
When you stop the recording, QuickTime Player will open the recording.

[![](https://greenido.files.wordpress.com/2023/01/screenshot-2023-01-07-at-10.04.34-am.png?w=565)](https://greenido.files.wordpress.com/2023/01/screenshot-2023-01-07-at-10.04.34-am.png)

There are few things you can do:

• You can save your recording by going to **File > Save** ← This is the best option for a quick & easy way.

• You can edit your recording.  
You can split it into clips and then you can delete or arrange your clips ( **Edit > Split Clip** ).

• You can also share your recording ( **File > Share** ).

Last but not least, if you wish to edit your new video, this is a short tutorial that will teach you the [basics of iMovie](https://www.youtube.com/watch?v=U1Hd60lwOyA).

Good luck ![👊🏽](https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/twemoji/2/72x72/1f44a-1f3fd.png)
Mid terms are over
Published: 2023-01-24 18:09:31

`Know it's time to grid.`

Some stuff to look out for in the upcoming months.

* Notion AI blogs
    
* Productivity blogs
    
* Python Blogs
    
* UI/UX Blogs
    

If you have anything you want to add please type them in the comments, or if you're on discord DM me :).

---

## Other stuff

Do any of you think 3d blender blogs would work here if they were coding-based.

```Can't wait for this to happen```
---

If you want a audio version consider going to my hashnode version of this blog, that which has it built in: (Mid terms are over)[]
Real time battery level using javascript
Tags: javascript, css, developer
Published: 2023-01-24 18:02:55

In this tutorial we will make a real-time battery level indicator using JavaScript.

You will need to use the Navigator.getBattery() method to access the battery information of the device. This method returns a Promise that resolves to a BatteryManager object, which contains information about the battery level, charging status, and other properties.

Here is an example of how you can use the Navigator.getBattery() method to create a real-time battery level indicator:

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

This code uses the level property of the BatteryManager object to get the current battery level and then sets the width of the progress bar to match. 

The addEventListener() method is used to listen for the levelchange event, which is fired whenever the battery level changes, so the progress bar can be updated in real-time.

Source will be available on : https://github.com/erajamanickam/real-time-battery-level

Live demo of Real time battery level indicator : https://erajamanickam.github.io/real-time-battery-level/

Watch on video : https://www.youtube.com/watch?v=aGtoHum4ruA

Codepen : https://codepen.io/erajamanickam/pen/zYJLZPK
Creating Multi-platform nugets for Xamarin
Published: 2023-01-24 17:54:25

**Problem**:
You want to create nuget packages that have different dependencies for multiple platforms such as Xamarin iOS and Android and beyond.

**Solution**:
Create a nuspec file that includes dependencies and files that match the platforms you want to target as such.

```
<?xml version="1.0"?>
<package >
  <metadata>
    ... 
 <dependencies>
 
      <group targetFramework="Xamarin.iOS10"> 
        <dependency id="Microsoft.AspNetCore.SignalR.Client" version="5.0.9" />
        <dependency id="Microsoft.Extensions.Http" version="5.0.0" />
        <dependency id="System.Reactive" version="5.0.0" /> 
      </group>
 
      <group targetFramework="MonoAndroid10"> 
        <dependency id="Microsoft.AspNetCore.SignalR.Client" version="5.0.9" />
        <dependency id="Microsoft.Extensions.Http" version="5.0.0" />
        <dependency id="System.Reactive" version="5.0.0" /> 
      </group>
 
      <group targetFramework="net7.0"> 
        <dependency id="Microsoft.AspNetCore.SignalR.Client" version="5.0.9" />
        <dependency id="Microsoft.Extensions.Http" version="5.0.0" />
        <dependency id="System.Reactive" version="5.0.0" /> 
      </group>
    <group targetFramework="netstandard2.1"> 
        <dependency id="Microsoft.AspNetCore.SignalR.Client" version="5.0.9" />
        <dependency id="Microsoft.Extensions.Http" version="5.0.0" />
        <dependency id="System.Reactive" version="5.0.0" /> 
      </group>
    </dependencies>

  </metadata>
    <files>    
      <file src="[dllpath]" target="lib\netstandard2.1" />
      <file src="[dllpath]" target="lib\net7.0" />
      <file src="[dllpath]" target="lib\MonoAndroid10" />
      <file src="[dllpath]" target="lib\Xamarin.iOS10" />
	</files>
</package>
```
Different Ways to fetch data from API in Reactjs
Tags: javascript, react, webdev, beginners
Published: 2023-01-24 17:51:25

1. Using the fetch() method:

```JavaScript
import React, { useState, useEffect } from 'react';

function Example() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data))
  }, []);

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}


```

2. Using the axios library:

```javascript
import React, { useState, useEffect } from 'react';
import axios from 'axios';

function Example() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('https://api.example.com/data')
      .then(response => setData(response.data))
  }, []);

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}


```

3. Using the async/await syntax:

```javascript
import React, { useState, useEffect } from 'react';
import axios from 'axios';

function Example() {
  const [data, setData] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const response = await axios.get('https://api.example.com/data');
      setData(response.data);
    }
    fetchData();
  }, []);

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}


```

4. Using the swr library:

```Javascript 
import React, { useState } from 'react';
import useSWR from 'swr';

function Example() {
  const { data, error } = useSWR('https://api.example.com/data');

  if (error) return <div>Failed to load data</div>;
  if (!data) return <div>Loading...</div>;

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

```

Please note that in all the above examples, https://api.example.com/data should be replaced with the actual API endpoint you want to fetch data from.

* Using the react-query library
* Using the react-async library
* Using a custom Hook and the useEffect Hook to handle the API call
* Using a Higher-Order Component (HOC) to handle the API call
* Using a Render Prop Component to handle the API call
* Using the redux-thunk library to handle the API call in a Redux store.
Crypto exchange with Kafka Streams only: Part 1 - Overview
Tags: kafka, ksqldb, kappaarchitecture, kafkastreams
Published: 2023-01-24 17:48:00

#### Why single-tool solution?

How many infrastructure components you need to build Cryptocurrency Exchange (centralised one) if we talk strictly about trade order processing? As we definitely need some kind of persistent storage, we need at least one.

So can we achieve all the desired functionality and quality attributes - performance and availability included - with single infrastructure piece, in addition to domain services?

Inspired by [Kappa Architecture](https://www.kai-waehner.de/blog/2021/09/23/real-time-kappa-architecture-mainstream-replacing-batch-lambda/) and achieving [ACID transactions using Kafka Streams](https://www.youtube.com/watch?v=v2RJQELoM6Y), I became curios enough to build the whole solution with Kafka only (Kafka Streams specifically).


### Purpose of the project



#### Goal 2

It's interesting to see performance (throughput specifically - orders processed per second), and especially comparing to "base level" that would be using transactions SQL database.


#### Goal 1

Which is more interesting - to evaluate development experience: sql-db-based solution definitely simpler, but to what extent?


#### Main goal

Actually I have some knowledge gaps in Kafka Streams design and implementation, so hope to fill some of them with a help of this project and uncomfortable questions/comments of yours.


### The result


Here is the Github repo for this project, if you're curios enough to take a look before it's ready: https://github.com/rodionaltshuler/crypton-exchange


### The scope


Orders operations (submit, fill, cancel)
Order matching
Wallet operations (debit, credit, order-specific operations like blocking funds for orders and unblocking on execution/cancellation)


### Streams topology


![Streams topology](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uh5o2yb2hau0nclriyqh.png)

It's my first post here, so I'm looking to feedback whether this topic is interesting enough to make a series of articles about different aspects of the project, for example
* performance metrics
* building REST API on top of ksqldb 
* providing pull (request-reply) or push (real-time updates using server-sent events) endpoints of this API.