teleren/devto huggingface dataset:
SiliconANGLE theCUBE: Angel Diaz on using open source principles at Discover Financial Services
Tags: webdev, opensource
Published: 2023-05-22 04:00:00

{% embed https://www.youtube.com/embed/6F9JGil2NC4 %}

In this interview, Angel Diaz, VP of Technology Capabilities & Innovation at Discover&reg; Financial Services talks with John Furrier & Rob Strechay of SiliconANGLE theCUBE at Open Source Summit NA 2023 in Vancouver, Canada.

During the chat, Angel discusses how Discover internally uses open source principles to bring together the customer journey with the product teams to create the best products. He also covers the approach Discover takes towards consuming and contributing to open source, gives his thoughts on how AI will transform industries, cloud-native development, and more.
Smartproxy
Tags: smartproxy, lalicat, antidetectbrowser, virtualbrowser
Published: 2023-05-22 03:15:11

# Smartproxy integration with Lalicat antidetect browser
{% embed https://www.youtube.com/watch?v=JKEmYag1tiw %}

Here are simple steps of using [SmartProxy](https://www.lalicat.com/how-to-use-smart-proxy-in-lalicat) in Lalicat.  

1. Registered account in Smartproxy and get resident IPs from the service online, or view the backend of SmartProxy and 4 parameters as follow: IP address, Port, Proxy Username, Proxy Password.  
![Smartproxy integration with Lalicat antidetect browser](https://help.lalicat.com/wp-content/uploads/2022/03/3-smartproxy-setting.png)

2. Log in to Lalicat, click the browser list and add browser as follow:  
![Smartproxy integration with Lalicat antidetect browser](https://help.lalicat.com/wp-content/uploads/2022/03/1-add-the-browser-profile.png)

3. Input the profile name as [smartproxy-test1]; and select [Windows] as Operating system ( better to choose the real OS you used.)  
![Smartproxy integration with Lalicat antidetect browser](https://help.lalicat.com/wp-content/uploads/2022/03/2-name-the-profile-select-OS.png)

4. Select”HTTP” as Proxy type, and enter [us.visitxiangtan.com] as IP address, [10000] as Port; [user-proxy username] as Login Proxy Username, enter Proxy Login Password we registered or new user we added in the backend, all listed as following screenshot:  
![Smartproxy integration with Lalicat antidetect browser](https://help.lalicat.com/wp-content/uploads/2022/03/3-smartproxy-setting-1.png)

all others parameters set as default. and save the profile.  

5. Click [Check the proxy] to confirm the proxy is linked or not.  
if green “IP address and Country ” appeared, means all is ok, if not, please check the proxy setting in detail, ask for service online for help from Lalicat or SmartProxy.  
![Smartproxy integration with Lalicat antidetect browser](https://help.lalicat.com/wp-content/uploads/2022/03/4-check-the-proxy.png)

6. Run Lalicat Browser to manage your multiple accounts online now.  
![Smartproxy integration with Lalicat antidetect browser](https://help.lalicat.com/wp-content/uploads/2022/03/5-run-browser-profile.png)

The article is from https://www.lalicat.com/how-to-use-smart-proxy-in-lalicat  
Download Lalicat browser: https://www.lalicat.com/download  
3-day free trial: https://www.lalicat.com/contact-us
When you need HTTPS on LOCAL environment, local-ssl-proxy is the best solution
Tags: node, nextjs
Published: 2023-05-22 03:15:09

Implementing single-sign-on (SSO) with nextauth.js and Slack, LOCAL environment also needs HTTPS support. In this case, it is very easy and useful that using local-ssl-proxy like a reverse proxy server.

This article is for Windows PC.

## Installing local-ssl-proxy

Local-ssl-proxy only supports global installation. Install as below:

```powershell
npm install -g local-ssl-proxy
```

An example usage is below:

```powershell
npx local-ssl-proxy --source 3001 --target 3000
```

In this example, an application is running on port 3000. Run local-ssl-proxy on port 3001 targeting for port 3000.

https://github.com/cameronhunter/local-ssl-proxy

## It works but SSL warnings

> You'll get a warning because the certificate is self-signed, this is safe to ignore during development.

Create an effective certificate using mkcert.

### Installing scoop

On Windows, it is very easy that installing mkcert using scoop. Following the quickstart, run as below:

```powershell
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
irm get.scoop.sh | iex
```

https://scoop.sh/

### Installing mkcert

Mkcert is the best solution for creating certificates on Windows. It is easier than installing OpenSSL and others as below:

```powershell
scoop bucket add extras
scoop install mkcert
```

This installation should be failed without Git. Install Git first if you don’t have.

https://github.com/FiloSottile/mkcert

### Running mkcert

Create a local certificates authority (CA). The following command must be run as administrator privilege. If you have run as not administrator privilege, redo with running `mkcert -uninstall`.

```powershell
mkcert -install
```

Then, create a key and a certificate for localhost as below:

```powershell
mkcert localhost
```

You should have gotten `localhost-key.pem` and `localhost.pem`.

### Running local-ssl-proxy with the certificate enabled

```powershell
npx local-ssl-proxy --key localhost-key.pem --cert localhost.pem --source 3001 --target 3000
```

## Running local-ssl-proxy every time is exhausting

Npm-run-all is the best solution. It can run multiple commands for serial or parallel. Install as below:

```powershell
npm install -D npm-run-all
```

Then, change package.json as below:

```js
/* package.json */
{
  "scripts": {
    "dev": "npm-run-all -p dev:*",
    "dev:app": "next dev",
    "dev:ssl": "local-ssl-proxy --key localhost-key.pem --cert localhost.pem --source 3001 --target 3000"
    /* snipped */
  }
  /* snipped */
}
```

Running `npm run dev`, commands matching with `dev:*` will be run for parallel.

https://www.npmjs.com/package/npm-run-all
Tree Parsing
Tags: githubhack23
Published: 2023-05-22 03:06:48

## What I built 

A Python library to parse node list to tree, or parse tree to node list

### Category Submission:

Wacky Wildcards

### App Link

https://pypi.org/project/tree-parsing/

### Screenshots 


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


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

### Description 

A library to lets work with trees and lists.

So you can:

- Make a tree when you have all nodes in the list
- Convert the Tree to lists of nodes
- Customize how to generate 'flow key', 'children key'
- Do something for each node

### Link to Source Code 

Source Code: https://github.com/scjorge/tree-parsing

Documentation: https://tree-parsing.readthedocs.io/en/latest/

### Permissive License 

[MIT License](https://choosealicense.com/licenses/mit/)

## Background (What made you decide to build this particular app? What inspired you?) 

One day I needed to carry out an activity that needed to work with lists and trees and when looking, I couldn't find a library that met my need. So I used inspiration to create it and make it available to the world.

### How I built it (How did you utilize GitHub Actions or GitHub Codespaces? Did you learn something new along the way? Pick up a new skill?) 

I discovered the real usefulness of GitHub Codespaces in this project. I had already heard about it. I looked for tutorials on Youtube and was delighted with the tool. It really meets many needs at different times.
Advanced Tailwind Syntax - Old
Published: 2023-05-22 02:07:20


It's common to use Tailwind with classes like `m-4 bg-red-500` that use the `theme` tokens.  
[Tailwind Docs](https://tailwindcss.com/docs/installation) is well done and covers everything.

---

But when you need to write CSS that doesn't use theme, you are using the tailwind syntax for **arbitrary rules**.

**This is when you can find this cheat sheet useful.**

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

{% embed https://tailwind-syntax-examples.vercel.app/ %}

---

Feel free to suggest something that is missing...
And they began to code
Tags: wecoded, theycoded, webdev, coding
Published: 2023-05-22 02:02:03

## I started coding because...
I needed something to do during lockdown, I wanted to help people, and things that I wanted to make were sometimes too specific.

## I want to show off...
My personal website that I'm working on but it isn't completely done/functional :).

## I look up to...
- Transgender kids fighting for a voice as bills are being passed against them
- The people who speak for those who can't
- People who speak up when nobody else will
Goals of Infrastructure as code (IaC)
Tags: devops, devjournal, infrastructureascode, beginners
Published: 2023-05-22 01:34:00

The goals of Infrastructure as code (IaC) are:

1. Simplify and automate infrastructure management.

2. Improve collaboration and transparency.

3. Enable organizations to meet compliance and security standards.

4. Provide a faster way to recover from disaster.

5. Provide a consistent and reproducible way to build and deploy infrastructure.


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

Thanks for reading this.

If you have an idea and want to build your product around it, schedule a call with [me](https://calendly.com/pragyanatvade).

If you want to learn more about DevOps and Backend space, [follow me](https://dev.to/pragyanatvade).

If you want to connect, reach out to me on [Twitter](https://twitter.com/pragyanatvade) and [LinkedIn](https://www.linkedin.com/in/pragyanatvade/).
What Happens When You Enter "https://www.google.com" in Your Browser?
Tags: web
Published: 2023-05-22 00:59:10


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



**Introduction:**
When you enter "https://www.google.com" in your browser and press Enter, a series of steps takes place behind the scenes to display the Google homepage. Let's explore this process in detail.

1. **IP Addresses**
Google has multiple IP addresses associated with its servers. Two of these addresses are 142.251.39.110 and 216.58.223.228. While you can type these IP addresses directly into your browser, it's more convenient to use the domain name "www.google.com."

2. **The Role of DNS**:
Domain names, like "www.google.com," are easier for humans to remember than IP addresses. The Domain Name System (DNS) translates domain names into IP addresses. When you click on a link or enter a domain name, your browser contacts a DNS server to find the IP address associated with that domain name.

3 **Understanding TCP/IP**:
TCP/IP (Transmission Control Protocol/Internet Protocol) is a set of communication protocols used for connecting devices and transmitting data over networks, including the internet.


**The Lifecycle of a Browser Request**:

1. **DNS Resolution**:
After you press Enter, your browser sends a request to a DNS server to obtain the IP address for "www.google.com." The DNS server responds with the corresponding IP address.

2. **HTTP Request**:
Your browser sends an HTTP GET request to the server associated with the IP address obtained from DNS. This request specifies the desired resource, such as the default page or other content related to "www.google.com."

3. **Server Processing**:
The server receives the HTTP request and processes it. It generates an HTTP response with a "200 OK" status code, indicating that the request was successful. The server breaks down the response into smaller data packets for efficient transmission.

4. **Data Transmission**:
The server starts sending the requested resource (web page content) as a series of data packets to your browser. These packets are transmitted over the network and may undergo error detection, correction, and congestion control processes.

5. **Browser Rendering**:
Your browser receives the data packets and begins rendering the web page. It interprets the HTML, executes any JavaScript code, applies CSS styles, and displays the web page's content in the browser window.

**Conclusion**:
In just a matter of seconds (depending on your internet speed), the entire lifecycle of a browser request and response occurs. This process involves DNS resolution, HTTP request and response, data transmission, and browser rendering. Understanding these steps helps us appreciate the complexity behind the seemingly simple act of loading a webpage.
Creating Distinct OAuth Routes and Exploring Logic Through Python Games: A Day in My Coding Journey
Tags: webdev, javascript, beginners, programming
Published: 2023-05-22 00:58:31

Day 111 of #365DaysOfCode & Day 11 of #100DaysOfPython

So, today, my main task was focused on writing the backend code for the OAuth sign-up and login routes for two types of users. The important decision I made was to separate these two routes. In the old setup, the system automatically created an account for a user if they didn’t already exist in my database. However, this approach felt like it lacked a certain amount of user consent.

The new backend code is set up as follows: for both types of users — ‘freelancers’ and ‘clients’, there are now two separate GoogleStrategy instances under Passport.js, one for login and one for sign-up. Each one does something slightly different.

In the login flow, I look up the user based on their Google profile ID. If I don’t find a match, I send back a response with a message, “No account found. Please sign up.”

In the sign-up flow, I still look up the user based on their Google profile ID. However, if I don’t find a match, I create a new user and save it to the database, using the profile ID and email from their Google account.

For each user type, ‘freelancer’ or ‘client’, the system works the same way. The callback URLs are different to accommodate the different user types and actions (sign-up or login).

Now, about the Python part of the day — I spent my time building small games to practice loops and ‘if’ and ‘else’ statements. It’s been a fun process since it’s mostly about logic and you can make it as complicated as you want. The current project on my desk is creating a Hangman game. It’s turning out to be an exciting task!

And that’s about it for today’s coding journey! It’s been another day of new challenges and fun problem-solving.
Retrying an Aborted Transaction
Tags: opengauss
Published: 2023-04-19 04:05:49

In Optimistic Concurrency Control (OCC) (such as the one used by MOT) during a transaction (using any isolation level) no locks are placed on a record until the COMMIT phase. This is a powerful advantage that significantly increases performance. Its drawback is that an update may fail if another session attempts to update the same record. This results in an entire transaction that must be aborted. These so called Update Conflicts are detected by MOT at the commit time by a version checking mechanism.

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

Such update conflicts are quite rare in common OLTP scenarios and are especially rare in our experience with MOT. However, because there is still a chance that they may happen, developers should consider resolving this issue using transaction retry code.

The following describes how to retry a table command after multiple sessions attempt to update the same table simultaneously. You may refer to the OCC vs 2PL Differences by Example section for more detailed information. The following example is taken from TPC-C payment transaction.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/foah662l6ev4vhqw35qp.png)
WebRTC Cheatsheet
Tags: realtimecommunication, videochat, webrtc, peertopeer
Published: 2023-05-21 22:37:41


## 🌐 WebRTC Basics:
- **WebRTC** stands for Web Real-Time Communication.
- It is an open framework for enabling real-time communication in web browsers and mobile applications.
- WebRTC allows peer-to-peer audio, video, and data sharing without the need for additional plugins or software.

## 📹 Video Communication:
- `getUserMedia()` API captures video from the user's camera.
- **MediaStream** represents the video and audio streams.
- **RTCPeerConnection** establishes a direct peer-to-peer connection for video communication.
- **RTCDataChannel** enables real-time data sharing alongside video communication.

## 🔊 Audio Communication:
- `getUserMedia()` API captures audio from the user's microphone.
- **MediaStream** represents the audio stream.
- **RTCPeerConnection** establishes a direct peer-to-peer connection for audio communication.
- **RTCDataChannel** enables real-time data sharing alongside audio communication.

## 💡 Useful JavaScript APIs:
- `getUserMedia()`: Grants access to the user's camera and microphone.
- **RTCPeerConnection**: Handles peer-to-peer communication.
- **RTCDataChannel**: Enables real-time data sharing between peers.
- **MediaStream**: Represents audio and video streams.

## 🔒 Security and Encryption:
- **WebRTC** uses Secure Real-Time Transport Protocol (SRTP) for encryption.
- **Signaling** is required to exchange session information and establish a connection.
- **Signaling servers** help coordinate the communication process but are not part of the WebRTC standard.

## 🌐 WebRTC Frameworks and Libraries:
- [SimpleWebRTC](https://www.simplewebrtc.com/)
- [PeerJS](https://peerjs.com/)
- [Socket.io](https://socket.io/)
- [Twilio Programmable Video](https://www.twilio.com/docs/video)
- [Janus Gateway](https://github.com/meetecho/janus-gateway)

## 🚀 Deploying WebRTC:
- Cloud hosting platforms like Firebase, AWS, or Heroku can be used to deploy WebRTC applications.
- Consider the server-side requirements for signaling, TURN, and STUN servers.

## 📚 Resources:
- WebRTC API documentation: https://webrtc.org/
- WebRTC samples and demos: https://antmedia.io/webrtc-samples/
- WebRTR Live Streaming Software: https://github.com/ant-media
JSDoc 101
Tags: webdev, javascript, tutorial, beginners
Published: 2023-05-21 22:35:30

I’ve been using JSDoc for some time now, and with the recent hype because of Svelte migration, today I come to share tips and how to use them.

Those are the very basics of what you will need.

## Typescript

The syntax for some things is different, but for most things, just think of it as Typescript and you’ll be fine.

### .d.ts files

I usually use them for helper and utility types (it’s easier to create them, especially those with generics and you can then just use them)

## Setup

Add `// @ts-check` to the top of each file you need or add a `jsconfig,json` in the root of your project with the check JS files. (Don’t forget to enable `js checking` in your IDE).

## JSDoc

### `@type`

Just as with TS, there's a difference between:

```ts
/** @type {Foo} */
const foo = {}
const foo: Foo = {}

// and

const foo = /** @type {Foo} */ ({})
const foo = {} as Foo

// also includes
const foo = /** @satisfies {Foo} */ ({})
```

Depending on how you want TS to handle the type, autocomplete, and errors that it shows you.

For `@type` I usually go with it inline because I normally use it to cast something to the type I need:

```ts
// React common example
const [state, setState] = useState(/** @type {{ foo: Bar, bar: Baz }} */ ({}));
//     ^? { foo: Bar, bar: Baz }

// And then sometimes you need some casting
Object.keys(state).map(k => k)
//                     ^? string

/** @type {(keyof state)[]} */ (Object.keys(state)).map(k => k)
//                                                      ^? "foo"|"bar"
```

And, as you could see when casting something to a type you put it between parenthesis `/** @type {Foo} */ (toBeCast)`, and of course, if you need you can `/** @type {Foo} */(/** @type {unknown} */ (toBeCast))` and yes, you need to put it inside two for this.


### `@typedef`

You’ll probably use a lot, usually for more complex types.

For this one, I declare it as a block and usually in the first manner without any comments.

But sometimes you want the second version because wherever those types go, so do the comments.

```ts
/**
 * @template {string} [T='bar']
 * @typedef {{
 *  bar: T, // you can't see this comment
 *  baz?: string,
 * }} Foo visible comments here
 */

/**
 * @template {string} [T='bar']
 * @typedef {Object} Foo2
 * @property {T} bar this comment is visible
 * @property {string} [baz] this is an optional property
 */

// both equivalent to:
type Foo<T extends string = "bar"> = {
  bar: T;
  baz?: string;
}
```

About the `@template`, the simplest way to declare a generic is `@template T`.

The one in the example is the most complex one you would need with a type it extends and then a default value, but you can also only have only one or the other.
JavaScript Journey: En Route
Published: 2023-05-21 22:21:22

JavaScript has been a hard road for me. I don't know why, but it's easy for me to get frustrated with it and sometimes I'll end up "fighting" it all night long. However, I've noticed I've begun to understand programming jokes I see in chats, videos and games, and sometimes even errors. I've recently been trying to get into Star Citizen and when I created an account the username wasn't long enough. It returned an error message saying "Username must be at least undefined characters long". I immediately realized what the problem (likely) was: the error message is trying to fetch a number (in this case 5) and can't find it. Although I didn't test my theory, I'm guessing that the error message function was connected to multiple text boxes and would fetch a number from an array to display depending on which box is calling the function. This would also explain why they didn't just simply write "5" in the error message, although it also likely means that the name of the text box the error message displays is returned from whatever one is calling it (like the Username, or Password).

I've come to realize that learning a programming language is like, well, learning a new language. It's not just learning the terminology, but also the "grammar" that is syntax. The order of operations and context is like telling a coherent story, no skipping around and giving the audience ample information to understand what's going on, what happened and where it's going. Just like learning a new language, it takes time. practice and trial and error to become fluent, and even when you become fluent you will still make mistakes. I will master JavaScript one day, hopefully some day soon but no matter what I will keep at it.