teleren/devto huggingface dataset:
Docusaurus Authentication (Roadmap)
Tags: documentation, docusaurus, react, authentication
Published: 2023-06-05 03:14:48

[Docusaurus](https://docusaurus.io/) is a well-designed, and user-friendly documentation generator tool with a modern and optimized codebase that supports multiple plugins to make it easier for either a normal user or a developer to ship out a documentation website swiftly.

## Projects

I have utilized Docusaurus to create multiple websites like:

- My portfolio website: [https://iammassoud.net](https://iammassoud.net)
- My free programming tutorial website: [https://datagit.ir](https://datagit.ir)
- Auth flow for [https://hest.io](https://hest.io)
- Documentation of [https://docs.tradingwolf.com](https://docs.tradingwolf.com)

## What is missing?

This tool provides everything you need except for some important features like the Authentication layer.

## Goal

The Authentication layer helps you create an internal documentation website for your company, or you can use it to provide subscription-based documentation for your product.

## Resources

I searched the web and I was able to find some efforts for the older versions of Docusaurus using Firebase. Though I would like to introduce a step-by-step guide to adding an Authentication layer to a Docusaurus website using common Auth providers. You can find the links to those articles below:

### AWS Cognito

- [**Docusaurus Authentication using AWS Cognito**](https://iammassoud.net/blog/docusaurus-authentication-using-aws-cognito)
- [**Protect Custom Routes in Docusaurus using AWS Cognito**](https://iammassoud.net/blog/protect-custom-routes-in-docusaurus-using-aws-cognito)

### Google Firebase

- [**Docusaurus authentication using Google Firebase**](https://iammassoud.net/blog/docusaurus-authentication-using-google-firebase)
- [**Protect Custom Routes in Docusaurus using Google Firebase**](https://iammassoud.net/blog/protect-custom-routes-in-docusaurus-using-google-firebase)
- [**SignUp|SignIn Limitation Using Google Firebase**](https://iammassoud.net/blog/signup-signin-limitation-using-google-firebase)

### Auth0

- **Docusaurus authentication using Auth0** _(Coming soon)_

In each article, you can find the step-by-step guide and also the GitHub repository contains the working example as well.

In addition, please let me know if you need to implement the Auth flow using another provider so I can add it as well.

## Support

In the end, if you find the articles useful, don’t forget to support me at least with a message :)

<a href="https://www.buymeacoffee.com/massoud" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 28px !important;width: 100px !important;" ></a>
Different ways of creating columns using css
Published: 2023-06-05 00:45:04

So here's a 5 minute read on this thing. 
i know it's not that interesting, but sometimes you need to get back to basics, if you don't know the basics you kinda struggle with advanced stuff.
So... here's my take on creating columns or making grids in css.
1. the display: inline-block approach
The idea is that the wrapper has some white-space that you need to remove. Then by using box-sizing you make the elements align better. you don't need the float, because inline-block will do it for you.
the Html is as follows:

```
<div class="columns_container">
	<div class="col col2">column 1</div>
	<div class="col col2">column 2</div>
</div>
```

The CSS is like so:

```
.columns_container {
	    display: block;
	    max-width: 1200px;
	    white-space: nowrap;
	    font-size: 0;
	    padding: 15px;
	background: gray;
	}

	.columns_container .col {
		display: inline-block;
		vertical-align: middle;
	 	box-sizing: border-box;
	 	white-space: normal;
		font-size: 18px;
	}

	.columns_container .col.col2 {
		width: 50%;
	}
```


2. the display: flex approach ( this one is popular now a days )
the HTML structure is as follows

```
<div class="columns_container_flex">
	<div class="col col2">column 1</div>
	<div class="col col2">column 2</div>
</div>
```
The Css part

```
.columns_container_flex {
				    max-width: 1200px;
				    display: flex;
				    flex-flow: row wrap;
				    padding: 15px;
					background: #d8d8d8;
				}

				.columns_container_flex .col {
					flex: 0 0 100%;

				}

				.columns_container_flex .col.col2 {
					flex: 0 0 50%;
				}

```

3. the display grid approach
Now this one is more for the future, but people online say it should be used with display flex, so that you create the wrapper with grid and you arange the content with display: flex

The Html:
```
<div class="columns_container_grid">
	<div class="col col2">column 1</div>
	<div class="col col2">column 2</div>
</div>
```
The css:

```
.columns_container_grid {
	    max-width: 1200px;
	    display: grid;
	    grid-template-columns: 50% 50%;
	  	background-color: #2196F3;
	  	padding: 15px;
	}

```

That's my tale on this subject, hope it helped you guys.
Have a great day!
First Angular app problem
Published: 2023-06-05 02:52:11

Hello all.
I am a complete novice to Angular and just started to learn.
So, I begun with First Angular app.
Lesson 1 went well. I could display Hello World.
After that, at lesson 2, there is a big problem.
I am following exactly the steps as they are, but my application does not compile.
It says:

> Error: src/app/app.module.ts:9:5 - error NG6008: Component AppComponent is standalone, and cannot be declared in an NgModule. Did you mean to import it instead?

Here is my app.module.ts

```
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

Here is home.components.ts

```
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [CommonModule,],
  template: `
    <p>
      home works!
    </p>
  `,
  styleUrls: ['./home.component.css']
})
export class HomeComponent {
}
```

And here app.components.ts

```
import { Component } from '@angular/core';
import { HomeComponent } from './home/home.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true,
  imports: [HomeComponent,],
})
export class AppComponent {
  title = 'homes';
}
```

I tried to download the code provided in tutorial, but it does not work, seems like it is from the Old version of Angular.

Is it me who made mistake somewhere, or is it the tutorial?

PS: I have the latest versions of Angular and Node.js installed.
I work with VS COde.

Thank you
Test post
Tags: test
Published: 2023-06-05 02:36:10

## test

Testing **tested** _test_

- [ ] Test!

> test with `test`
> ```
> test
> ```
> _test_

`test`

```
test
```

Just realized Dev.to is a free and open source blog platform running on [forem](https://github.com/forem/forem).  

The [maxime1992]() post on [next level data privacy](https://dev.to/maxime1992/next-level-data-privacy-with-easy-free-and-secure-self-hosting-at-home-2c84)'s [dev.to template](https://github.com/maxime1992/my-dev.to) caused my brain to go _wait a minute! what is this dev.to thing?_

A few clicks later, logging in as my [GitHub](https://github.com)/[dayne](https://github.com/dayne) identity and I'm doing this **test post**.
AWS EventBridge - pipe
Tags: aws, eventdriven
Published: 2023-06-05 02:33:26

## AWS EventBridge Pipe 란?

특정 소스 (DynamoDB, Kinesis, SQS 등) 다양한 소스에서 이벤트가 발생했을때, 이벤트를 핸들링해서 AWS 서비스(Lambda), 이벤트 버스 또는 API로 전송하는 역할을 합니다.

![AWS EventBridge Pipe 구조](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3264yimfp6qd475y79j3.png)

### 소스

어떤 AWS 서비스에 pipe가 트리거되게 할지 (이 글은 SQS를 기준으로 작성되었습니다.)
- 서비스 목록
    - Kinesis
    - SQS
    - DynamoDB
    - Amazon MQ
    - Apache Kafka
    - Amazon MSK

![AWS EventBridge Pipe 소스](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3awie563dyns7j1ohtgy.png)

### 필터링(선택)
- 트리거된 이벤트에 이벤트 패턴을 비교하여 필터링 처리함.
- 이벤트 패턴 필터링 [문서](https://docs.aws.amazon.com/eventbridge/latest/userguide/eb-event-patterns.html)
- 예시) SQS body로 넘어오는 값 필터링 하는 법.
```
{
  "body": {
    "pattern": "AWS",
    "data": {
      "id": "test",
      "name": "test"
    }
  }
}
```
SQS message body에 pattern 값으로 필터링 하고싶을 경우 이벤트 패턴에 다음과 같이 작성하면 필터링 할 수 있습니다!
```
{
  "body": {
    "pattern": ["AWS"]
  }
}
```

![AWS EventBridge Pipe 필터링](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c2li5md6kb8kkbnbnxul.png)

### 보강(선택)
- 최종 대상에 요청을 전송하기 전에 Lambda 또는 특정 API에 request를 날려서 데이터를 추가로 받아와서 대상에게 요청할때 필요한 값을 보정하는 기능으로 추정
- 실제 사용해볼 기회는 없었음..

![AWS EventBridge Pipe 보강](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eyr1gdp8dcq2dcp310ll.png)

### 대상
- 원하는 서비스에 요청을 보내는 곳 (이 글에 작성된 예시는 API 대상 입니다.)

![AWS EventBridge Pipe API 대상](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cdnce4las7yosp7x7gg4.png)

원하는 대상을 선택해서 요청을 전송합니다.

cf. 헤더 파라미터에 Key/Value 를 추가하면 Authorization 값 등 헤더 값을 처리 할 수 있습니다. (소스에서 받은 값도 활용이 가능합니다!)

### 대상 - 대상 입력 변환기
- 소스에서 받은 값을 대상에 요청을 보낼때 `req.body`로 전달함.

![AWS EventBridge Pipe 대상 입력 변환기](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t3vkr1t14j8az8astplt.png)
Starting my journey
Published: 2023-06-05 01:51:03

Hey everyone!
I'm new here, so this post is just to say hello for all and say, I'd like to make new friendships in tech area and learn with everyone that had more experience than me, so feel free to share tips and tricks about Software developer, Front-end, Back-end area I'll try to make the same, share as much I could I learn that could be useful for others learners tech like me.

Thank you guys😉.
My Tech Tales: An Introduction
Tags: programming, webdev, github
Published: 2023-06-05 01:10:30

## My Tech Tales: An Introduction

I'm Thomas Lloyd-Jones, a tech enthusiast, a problem solver, a pet parent, and now, a blogger. Born and raised in Leicester, UK, I relocated to New York State in 2009, bringing my passion for all things tech with me. It's this passion that's led me to start this blog, a platform where I can share my tech knowledge, interesting finds, and unique experiences with you all.

Professionally, I work for NYS ITS as an intern, where I do Drupal development, but my interests extend far beyond that. From programming to gaming, from running a home lab to playing with my two dogs, Sky and Midnight, and my cat, Luna, I have a wide array of hobbies that keep me busy, inspired, and constantly learning.

The path that led me to tech wasn't always straightforward. My journey began in an entirely different field - as a hairdresser. But, with a thirst for knowledge and a nudge from my supportive partner, I returned to university at 24 to study what I truly loved: technology. That period of transition fuels my unique perspective on tech and life - that it's never too late to chase what makes you tick.

Through this blog, I want to document my thoughts, share my adventures in tech, and hopefully inspire and teach you along the way. From programming tidbits to home lab setup, from reviewing my favorite gear to sharing my experience with various tools across multiple platforms, there's a lot we'll unpack here.

Speaking of gear, I take pride in my carefully chosen tech arsenal. From my Tofu 65% keyboard with a DZ65 RGB V3 PCB and Cherry MX Silent Red switches to my MSI 32" 1440p 144Hz monitor, I believe the right tools make all the difference. On the software front, I rely on a plethora of applications like Synergy, Docker Desktop, JetBrains, and more, across different platforms to enhance productivity and streamline my work.

This blog aims to be a melting pot of all these experiences and knowledge. Whether you're a tech novice or an expert developer, my hope is that you'll find something useful and interesting here. We'll delve deep into Python, Java, PHP, TypeScript, and more. We'll explore containerization with Docker, project management with Spaces, version control with GitHub, and virtualization with Proxmox. We'll even dip our toes into cross-platform apps and tools for Mac, Linux and Windows.

So, join me as we embark on this tech odyssey together. Your thoughts, feedback, and ideas are always welcome.

Stay tuned for more!

&nbsp;  
&nbsp;  
&nbsp;  
&nbsp;  
&nbsp;  
&nbsp;  
&nbsp;  
&nbsp;  
&nbsp;  
&nbsp;  
&nbsp;  
&nbsp;  
&nbsp;  
&nbsp;  
&nbsp;  

**Note: All posts may be formatted by AI.**
Estou muito feliz em começar com o LaTeX
Tags: latex, bibtex
Published: 2023-06-05 00:49:14

Hoje eu vou contar um pouco sobre a minha experiência usando a linguagem Latex para escrever documentos científicos. 

Latex é uma linguagem de marcação que permite criar textos com uma aparência profissional e elegante, além de facilitar a inserção de fórmulas matemáticas, gráficos, tabelas e referências.

Eu comecei a usar Latex há alguns meses e não foi nada dificil me adaptar, peguei o jeito bem rapido, Nunca gostei de usar o Word., na verdade nada que tenha alguma semelhança com o editor de texto da Microsoft me agrada, tenho calafrios so de pensar neles, tanto que prefiro usar o Obisidian para fazer minhas anotações e nesse mesmo posso ja editar com  a linguagem  Latex.

O Latex  tem muitas vantagens, como a possibilidade de usar modelos prontos, por exemploe da minha faculdade que alem do modelo de normatização em formato (.doc) tem o (.tex) para diferentes tipos de documentos, Alem de uma compatibilidade com diversos editores online e offline, e a integração com ferramentas como o BibTeX, que gerencia as citações bibliográficas. Fazer as citações e a Referencia bibliografica é uma delicinha.

Além disso, Latex é uma linguagem muito poderosa e flexível, que permite personalizar o layout e o estilo do texto de acordo com as suas preferências e necessidades. Eu recomendo muito que vocês experimentem Latex se quiserem produzir documentos de alta qualidade e impressionar os seus leitores. Se vocês tiverem alguma dúvida ou sugestão sobre Latex, deixem nos comentários que eu vou tentar responder. Até a próxima!
Bind for 0.0.0.0:8080 failed: port is already allocated
Tags: php, docker, dockercompose, devop
Published: 2023-06-05 00:25:49

---
title: Bind for 0.0.0.0:8080 failed: port is already allocated
published: true
description: a php script to fix docker-compose's port number with a free port number
tags: php, docker, dockercompose, devop
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zmlosamyyi95q6ea78j3.jpg
series: docker
---

Waiting for docker-compose to complete its execution, only to be greeted with the frustrating message that the desired port is not available, can be incredibly exasperating. The anticipation builds up as we hope for a seamless deployment, only to be let down by the port conflict. This can lead to wasted time and effort, not to mention the frustration of having to go back and manually find an available port.

However, with the help of this script, such moments of disappointment are now a thing of the past.

```php
$fileContents = file_get_contents('docker-compose.yml.dist');
$generatedContents = str_replace('{{port}}', findFreePort(8080), $fileContents);

file_put_contents('docker-compose.yaml', $generatedContents);

function findFreePort($startPort)
{
    $port = $startPort;
    $socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);

    while (!@socket_bind($socket, '127.0.0.1', $port)) {
        $port++;
    }

    socket_close($socket);
    return $port;
}
```

This is an example:

```yaml
version: '3.7'
services:
  server:
    build:
      context: ./docker/server/
    volumes:
      - ./:/var/www/html
    ports:
      - "{{port}}:80"
```

The beauty of not having to rely on trial and error anymore cannot be overstated. Gone are the days of guessing and manually changing port numbers until finding one that works. With this script in hand, the process becomes smooth and efficient. It automatically searches for an available port, starting from a specified point, such as 8080, eliminating the hassle of port conflicts. Now, docker-compose can effortlessly allocate a free port, saving valuable time and providing a sense of relief. The convenience and peace of mind offered by this script are truly remarkable.
Hand Tracking Pong Game
Tags: codepen, hand, tracking, webcam
Published: 2023-06-04 23:45:18

Play PONG with your hands. Left hand vs. right hand, lol.

_It doesn't work in the embedded pen, but you can check it out on [codepen](https://codepen.io/frank-bueltge/pen/gOQYMwG)_

{% codepen https://codepen.io/frank-bueltge/pen/gOQYMwG %}
How to get rich as a solo software developer
Tags: solo, development, sideprojects, codenewbie
Published: 2023-06-04 23:22:40

*Inspired by Fireship*

Imagine running a one-man business developing Chrome plugins that make over $20 million a year. That's four times more than the average NFL quarterback! One of the best things about learning to code is that it gives you the ability to build money-printing machines regular people can't access.

In this post, I'll show you exactly how I built and deployed my own real AI software as a service application with only two days of programming work. But first, let's discuss the mindset of a side hustler.

## The Side Hustler Mindset

Take Danny Postma for example. He recently created Headshot Pro, which now has over 12,000 customers. Many might say he got lucky by jumping on the recent AI hype train - and they'd be absolutely right. But here’s the thing: he made his own luck.
 
The problem is that most of us won't get this lucky very often, so we need to be prepared to fail early, fail often but always fail forward. The customer will ultimately tell you whether or not your project will succeed; therefore it’s crucial to obtain real user feedback as soon as possible.

## Coming up with an Idea & Validating It

Let me walk you through how I came up with Vocalize.Cloud – a platform allowing users legally use celebrity voices (mine included). Although reaching out to celebrities like Morgan Freeman and Tom Cruise hasn’t yet proven successful, collaborating with YouTuber Dax Lame was fruitful.
 
Before diving deep into an idea though, remember ideas are cheap - execution is everything! This means having not only impeccable technology but also a solid marketing plan in place.

If you're rich enough for ads or influencer endorsements – great! Otherwise organic marketing through social media channels like Twitter/YouTube/TikTok should be your go-to strategy.

## Choosing the Optimal Tech Stack

Next, let’s talk about choosing the right tech stack. It doesn't matter if you use WordPress, React, or Angular – what matters is that it works. Personally, I prefer Svelte kit and Firebase (aka “the f*ck-it stack”), but you should choose technologies that optimize your productivity.

When choosing a database for your project, consider trade-offs carefully! Research well and be cautious when making this decision – relational databases like MySQL/Postgres are usually a safe bet for most applications.

## Getting Paid: Integrating Payment APIs

Lastly: dollar bills! To actually get paid from users of your service app requires integrating payment APIs such as Stripe into your system. Remember to have some form of free trial in place so potential customers can try out the app without feeling pressured to pay upfront!

I hope this guide has given you an insight into how coding skills can turn into side hustles with great potential revenue streams. The key is having the right mindset and executing effectively on both technology and marketing fronts. Good luck building your own money-printing machine!

---

* transcribed and compressed from https://www.youtube.com/watch?v=A4_TFHzqAAg
Test Driven Development Concept
Tags: testing
Published: 2023-06-04 23:20:28

1.Viết test case trước (test-first): Đặt ra các giả thuyết cho chức năng cần hoàn thành và viết các test case dựa trên đó.

2.Chạy test case: Chạy các test case và chúng sẽ fail do chưa có code thực hiện.

3.Viết code để làm test case pass: Viết code càng đơn giản nhất để làm test case pass, sau đó chạy lại test để đảm bảo đúng yêu cầu.

4.Refactor code nếu cần: Sửa code để tối ưu hóa, rồi chạy lại test case đảm bảo vẫn đúng.

Qua đó TDD giúp có bộ khung test chi tiết trước khi viết code, đảm bảo chất lượng và tính bền vững cho phần mềm.

Vậy là TDD là phương pháp phát triển phần mềm bằng cách viết test case trước rồi mới viết code thực hiện, quá trình lặp đi lặp lại để tối ưu hóa code.

Ví dụ: 

```
public class Calculator
{
    public int Add(int x, int y) { ... }
}
```
Test-First: 

```
[TestClass]
public class CalculatorTests 
{
    [TestMethod]
    public void Add_TwoPositiveNumbers_ReturnsCorrectSum()
    {
        // Arrange
        var calculator = new Calculator();
        
        // Act
        var result = calculator.Add(2, 3);  
        
        // Assert
        Assert.AreEqual(5, result);
    }
}

```

Còn nếu code fail thì sẽ không thực hiện đoạn Add()
Chạy Test-Case nếu chúng pass sẽ thực hiện đoạn Add()

```
public int Add(int x, int y) 
{
    return x + y;  
}
```
Refactor code nếu code vẫn chạy pass:

```
public int Add(int x, int y)
{
    return CalculateSum(x, y);
}

rivate int CalculateSum(int x, int y)
{
    return x + y;
}

```
Mình có thể viết nhiều đoạn code hơn cho đoạn test: 

```
[TestMethod]
public void Add_TwoNegativeNumbers_ReturnsCorrectSum() { ... }

[TestMethod]
public void Add_OneNegativeOnePositive_ReturnsCorrectSum() { ... }
```