teleren/devto huggingface dataset:
Diwali Greetings in DevStyle😜
Tags: javascript, html, css, diwali
Published: 2022-10-23 17:30:37

In this tutorial has helped you learn how to create diwali greetings using html css.

First of all, start scratch in basic html skeleton


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

Now, Add some library cdn

```
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="jquery.fireworks.js"></script>
```
**jQuery**

jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.

**Fireworks js**
A simple [fireworks library](https://fireworks.js.org/)! Visit on GitHub. fireworks-js. hue. acceleration. brightness. decay. delay. explosion. flickering. intensity.

Add HTML section tag with id
```
<section id="fireworks"></section>
```
Fireworks js library simple controller
The `hue`, `delay`, `decay`, `brightness`, `lineWidth.explosion`, `lineWidth.trace`, `sound.volume` and `rocketsPoint` options accept an object:
```
<script>
        $('#fireworks').fireworks({
            width: '100%',
            height: '100%',
            sound: true
        });
</script>
```

Finally, 


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



Youtube Full Video : https://youtu.be/c6Wfu2zl5Xg
Demo : https://diwali-greetings.vercel.app/
Portfolio : https://rajamanickam.vercel.app/
Github : https://github.com/erajamanickam/

Thanks for Reading..!!😎
[Xubuntu] Automatic start-up Go applications and Nginx
Tags: ubuntu
Published: 2022-10-23 17:06:20

## Intro
This time, I will try automatic starting-up my Go application and Nginx.

* [Xubuntu + Nginx + Go(+ Pion/WebRTC) + Node.js](https://dev.to/masanori_msl/xubuntu-nginx-go-pionwebrtc-nodejs-3lgl)

I built my Go application by "go build .".

To start-up automatically, I will add systemd service files.

## Go applications
I add a service file into "/etc/systemd/system/".

#### webappsample.service
```ini
[Service]
Type=simple
User=root
ExecStart=/home/example/go/src/sample/webappsample/webappsample
WorkingDirectory=/home/example/go/src/sample/webappsample
Restart=always
RestartSec=30

[Install]
WantedBy = multi-user.target
```

After adding the file, I register it with systemd.

```
sudo systemctl enable webappsample.service
```

* [systemd - ArchWiki](https://wiki.archlinux.org/title/Systemd)
* [Golang のアプリをデーモン化して起動する（CentOS）- Irohabook](https://www.irohabook.com/go-daemon)

## Nginx
Nginx service files are almost identical to Go application.

#### nginx.service
```ini
[Unit]
Description=The NGINX HTTP and reverse proxy server
After=syslog.target network-online.target remote-fs.target nss-lookup.target
Wants=network-online.target

[Service]
Type=forking
PIDFile=/run/nginx.pid
ExecStartPre=/usr/sbin/nginx -t
ExecStart=/usr/sbin/nginx
ExecReload=/usr/sbin/nginx -s reload
ExecStop=/bin/kill -s QUIT $MAINPID
PrivateTmp=true

[Install]
WantedBy=multi-user.target
```

* [NGINX systemd service file - NGINX](https://www.nginx.com/resources/wiki/start/topics/examples/systemd/)
Cómo crear una clase de configuración en Spring
Tags: spring, springconfig, kotlin, spanish
Published: 2022-10-23 17:01:54

Una forma de agrupar parámetros de configuración es mediante la creación de clases y el uso de las anotaciones **@Configuration** y **@ConfigurationProperties**

Suponiendo que contamos con el siguiente archivo de configuración:

```yaml
// application.yml
path: "example path value"
enabled: true
port: 1234
```
Podemos crear la siguiente clase:

```kotlin
@Configuration
@ConfigurationProperties
data class ExampleConfig(
	val path: String,
    val enabled: Boolean,
    val port: Integer,
)
```

Una vez hecho esto, podremos instanciar la clase de configuración y acceder así a sus atributos.

```kotlin
@Service
class ExampleService(
    val config: ExampleConfig,
) {
    fun getPort(): String = config.port
}
```

## Agrupar propiedades bajo un prefijo

Para poder organizar de mejor manera los parámetros de configuración, podemos hacer uso de los prefijos dentro de nuestro archivo de propiedades.

Aplicado el ejemplo anterior, podemos anidar todas las propiedades bajo una clave *example*:

```yaml
// application.yml
example:
	path: "example path value"
	enabled: true
	port: 1234
```

Ahora debemos actualizar la anotación **@ConfigurationProperties** para indicar el prefijo (**prefix**) bajo el que se encuentran las propiedades.

```kotlin
@Configuration
@ConfigurationProperties(prefix = "example") // <- Establecemos el elemento prefix
data class ExampleConfig(
	val path: String,
    val enabled: Boolean,
    val port: Integer,
)
```

De esta manera el archivo YAML contendrá una estructura más organizada y podremos identificar rápidamente aquellos parámetros que pertenezcan a un mismo concepto.

Fuente: [24.7.1 Loading YAML @ Spring Boot Reference Guide](https://docs.spring.io/spring-boot/docs/2.1.13.RELEASE/reference/html/boot-features-external-config.html#boot-features-external-config-loading-yaml)
Simple Full Stack Products CRUD App using React, Node JS & MySQL
Tags: react, javascript, node, mysql
Published: 2022-10-23 16:52:55

Hello friends, Today in this post we will learn how to build a simple Full Stack Products CRUD App using React, Node & MySQL. So here we will go next further [Learn React JS by building this one Web app](https://codewithmarish.com/post/learn-react-js-building-web-app) and try to implement other React concepts by building this Product Inventory CRUD web app so by the end of this post you will be confident about React and able to build your own web apps. So first step will be creating our API in Node JS with the help of MySQL Database and later we will build UI for accessing this API. Also, this post will be updated based on your suggestion, please feel to contact/comment with us for suggestions that will help in improving this post.


Please read this post in our website
[Simple Full Stack Products CRUD App using React, Node JS & MySQL](https://codewithmarish.com/post/full-stack-crud-app)

Also please don’t forget to subscribe to our youtube channel codewithmarish for all web development-related challenges.

[Code With Marish | Youtube](https://www.youtube.com/channel/UCkPYmdVz8aGRH6qCdKMRYpA)

Posted with ❤️ from somewhere on the Earth
🖥️ VS Code and why I love it
Tags: vscode, beginners, ramblings, webdev
Published: 2022-10-23 16:11:11

While not a new piece of software by any means, I have recently (I'd say in the last 2 months) discovered an amazing program called Virtual Studio Code. Granted, since I am new to this whole thing, I really don't have a "pros and cons" list for it. Nor do I have any other software's to compare it to (really, the only other software I've used is PyCharm). These are just the ramblings of a person just starting out on his journey into the world of development.

Now, I'm no developer, yet, but I am trying to learn. I would some day love to be a front end developer. Finding VS Code was kind of a low-key miracle for me. I love how versatile it is in terms of what languages you can use on it.

The extensions you can add to it are useful and plentiful. If you need it to have some functionality that doesn't come with it "out of the box" chances are, there are 57 extensions that will make it do what you need. It almost feels like a swiss army knife. One extension I love is the icons extensions that show the language icon for the projects you're working on. Another one I really love is "live preview" for when I'm working on HTML stuff.


Don't even get me started on the themes you can add on it (if you're going to be using it for long periods throughout the day you might as well make it pretty, right?) I'm a very visually driven individual when it comes to projects I am working on. I love graphics, and customization. Being able to make VS Code look and function exactly like I need it to is awesome.

So, overall, I love VS Code right now and I look forward to diving in and learning not only more about this but about front end development. 

Thank you for reading, and I hope you all have a wonderful day!

![signature](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6l3y2cs2myhehxlcd2pa.png)
Generate Random Numbers with .NET 6
Tags: dotnet, beginners, tutorial
Published: 2022-10-23 16:03:26

Since the first release of .NET Framework, a class called Random was shipped. This class is still present in .NET 6 and it works like the first release.

Generating a random number is very easy, as in the following code:

```csharp
var random = new Random();
var value = random.Next();
return value;
```

In the above example, you obtain an int number as result.
You can use the methods NextBytes and NextDouble to obtain the results to obtain random bytes or random doubles values.

This random values are random but not so really random as the documentation say in this page: https://learn.microsoft.com/en-us/dotnet/api/system.random.-ctor?view=netframework-4.8
(search for pseudo-random word).

## The solution
In .NET 6 you can use the class RandomNumberGenerator present in the namespace System.Security.Cryptography.

This class generates cryptographically secure values and for this reason are not predictable by you or by someone else.

You can use the sizeof to determinate the output type of the random value and the BitConverter to convert the random bytes to the value.

Basically, you can extend the code below.

```csharp
Console.WriteLine("Generate Randoms!");

var random = RandomNumberGenerator.Create();
var bytes = new byte[sizeof(int)]; // 4 bytes
random.GetNonZeroBytes(bytes);
var result = BitConverter.ToInt32(bytes);

Console.WriteLine($"{result}");
```

Enjoy the real random values!
Fixed Multilingual CLIP demo
Tags: clip, multilingual, pytorch, colab
Published: 2022-10-23 16:03:10

- Fixed demo （Google Colaboratory）
https://drive.google.com/file/d/1q04sOt2rrrhlFzXOs0-WDYk-MRMj1qSJ/view?usp=sharing

- Original repo
https://github.com/FreddeFrallan/Multilingual-CLIP

- Changes
  - Changed text, vision encoder
  - Used pytorch model
  - Supported GPU (Converted tokenizer output)
CSS Shadow Animation 🌟
Tags: css, design, webdev
Published: 2022-10-23 15:56:23



![CSS Shadow Animation Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fb9vdk5uq4l02em50wkv.gif)

You can access the code from [here](https://codepen.io/Akr-am/full/JjvedzJ)
Bash 基礎 Part 02 -- 絞り込み。ファイルの中身、ファイル名、ディレクトリ名で検索する
Tags: bash, ag, find, linux
Published: 2022-10-23 15:52:32


# AG

## AG とは？

https://github.com/ggreer/the_silver_searcher

銀の検索者？

ack より速い検索ツールらしい。
ディレクトリでの検索でよく使われる。

```php
sudo apt-get install silversearcher-ag 
```

silversearcher-ag として apt-get でインストールできる。

---

## AG で再帰的にディレクトリに対してファイルの中身を検索する

試しに  source / shell の内部に

* hoge の文字列の入ったディレクトリ
* hoge の文字列がファイル名にのみあるファイル
* hoge の文字列がファイルの中身にのみあるファイル
* hoge の文字列がファイル名とファイルの中身両方あるファイル
* hoge の文字列ではないディレクトリに入った hoge の文字列がファイル名とファイルの中身両方あるファイル

これらを作成して ag で探してみる

```php
~/source/shell

❯ ag hoge
ho-ge-inside-only.txt
1:hoge

hoge-fileName-and-inside.txt
1:hoge

NO-ho-ge-dirName/hoge.txt
1:hoge

```

単に ag hoge と打つと
現在いるディレクトリと、その配下のディレクトリに入っている
ファイルの中身の文字列が検索された。

ファイル名は検索されなかった。

---

## 階層の深い対象を無視する

https://www.mankier.com/1/ag

* shell
  * NO-ho-ge-dirName
    * Depth2
      * hoge.txt

このようにディレクトリの更に下にディレクトリを作った

```php
~/source/shell
❯ ag hoge                  
NO-ho-ge-dirName/hoge.txt
1:hoge

hoge-fileName-and-inside.txt
1:hoge

NO-ho-ge-dirName/Depth2/hoge.txt
1:hoge
```

通常だと depth が 25 のために 25 段掘られるが

```php
~/source/shell
❯ ag hoge --depth 1
hoge-fileName-and-inside.txt
1:hoge

NO-ho-ge-dirName/hoge.txt
1:hoge
```

depth を 1 にすると、2 層目は掘られない。

```php
~/source/shell
❯ ag hoge --depth 0
hoge-fileName-and-inside.txt
1:hoge
```

0 にすれば、現在のディレクトリに直接入っているファイルだけを検索できる。

---

# find

## find でファイル名 or ディレクトリ名で検索する

https://www.howtogeek.com/112674/how-to-find-files-and-folders-in-linux-using-the-command-line/

```php
~/source/shell
❯ find . -name \*hoge\*
./NO-ho-ge-dirName/hoge.txt
./NO-ho-ge-dirName/Depth2/hoge.txt
./hoge-fileName-and-inside.txt
./hoge-fileName-only.txt
./hoge-dirName
./hoge-dirName/hoge-fileName-only.txt
```

find を使えばファイル名 or ディレクトリ名で検索できる。
これも深い階層まで見てくれる。

ここでは正規表現の * はバックスラッシュの \ とセットで使い

\*hoge で hoge で終わるファイル名
hoge*\ で hoge から始まるファイル名
*\hoge*\ で hoge が含まれるファイル名

として検索できる。

---

## find でファイル名で検索する

```php
❯ find  -name \*hoge\* -type f
./NO-ho-ge-dirName/hoge.txt
./NO-ho-ge-dirName/Depth2/hoge.txt
./hoge-fileName-and-inside.txt
./hoge-fileName-only.txt
./hoge-dirName/hoge-fileName-only.txt
```

-type f をつけるとファイルのみがヒットして

---

## find でディレクトリ名で検索する

```php
❯ find  -name \*hoge\* -type d
./hoge-dirName
```

-type d をつけるとディレクトリのみがヒットする。

---

# まとめ

ag hoge ディレクトリ名(optional)

でディレクトリの中で再帰的に hoge をファイル内に含むファイルを検索できる。

find ディレクトリ名(optional) -name \*hoge\* -type f

でディレクトリの中で再帰的に hoge をファイル名に含むファイルを検索できる

find ディレクトリ名(optional) -name \*hoge\* -type d

でディレクトリの中で再帰的に hoge をファイル名に含むディレクトリを検索できる
Let's Generate a generator to generate components and modules using Node Js And Typescript (Live Podcast)
Published: 2022-10-23 15:38:37

---
title: Let's Generate a generator to generate components and modules using Node Js And Typescript (Live Podcast)
published: true
description: 
tags: 
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2022-10-23 15:36 +0000
---

Follow the given Youtube Video for live podcasting.

https://youtu.be/_GS7TkR_iVo


If you want to discuss, Just join the discord channel to join us.

https://discord.gg/AQGKMK8SmE
Simple and fast way to run various devops workflows on your servers
Tags: github, devops
Published: 2022-10-23 15:29:08

We periodically need to run different workflows on different servers. For example stop replication, do a vacuum or global database update, start replication. 
I don't want to give everyone ssh access to the servers. In addition some workflows need to be run by non-developers. 
So to solve this problem I need some simple UI to run workflows, the ability to see logs and the ability to easily and quickly create complex workflows.
Recently I found what I think is the perfect and simple solution. This is [github actions](https://docs.github.com/en/actions) + [self-hosted runners](https://docs.github.com/en/actions/hosting-your-own-runners/about-self-hosted-runners)

I roll out github action runner on each of my servers in addition to the usual set of software. (The code to install via terraform, namely the key generation is taken from here https://github.com/myoung34/docker-github-actions-runner)

Next I write the workflow:

```yaml
name: Tasks

on:
  workflow_dispatch:
    inputs:
      DEPLOYMENT:
        type: choice
        description: 'Database is production or test'
        options:
        - production
        - test
        default: test
        required: true

      task:
        type: choice
        description: 'Select task'
        options:
        - stop-replication
        - start-replication
        - ps
        - restart
        default: ps
        required: true

      country:
        type: choice
        description: 'Select country'
        options:
        - ch
        - fr
        required: true

jobs:
  main:
    runs-on: [self-hosted, clickhouse-runner, linux, "${{ github.event.inputs.DEPLOYMENT }}"]
    steps:
      - if: ${{ github.event.inputs.task == 'restart' }}
        run: docker compose restart

      - if: ${{ github.event.inputs.task == 'ps' }}
        run: docker compose ps

      - if: ${{ github.event.inputs.task == 'stop-replication' }}
        run: |
          docker compose stop clickhouse-replication-updater clickhouse-init
          docker compose exec -iT clickhouse clickhouse-client --query="DROP DATABASE IF EXISTS some_db"
          echo Stopped

      - if: ${{ github.event.inputs.task == 'start-replication' }}
        run: |
          docker compose start clickhouse-replication-updater clickhouse-init
```

Here `workflow_dispatch.inputs` gives nice UI at github


![Workflow run UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j8gdr5m17p6cwrtg6wkv.png)

And you can use steps/jobs etc to generate any workflow depending on inputs.

With `runs-on: [self-hosted, clickhouse-runner, linux, "${{ github.event.inputs.DEPLOYMENT }}"]` section you are able to select any server where you need to execute workflow.

Since now everyone with access to repositary can execute server workflows with beautiful UI, logs etc.
A year on
Published: 2022-10-23 15:16:09

My self studies in Dash a year ago opened my eyes to web development. I’ve now moved on to learn React, but thoroughly. So completed HTML and CSS, now moving on to JavaScript. I thought Bootstrap would solve my problems - but after trying it out I feels a bit clunky. Do you agree? Sure, it’s good for getting an MVP up and running quickly. But for a final dashboard app? I think I prefer to control my CSS grid and styling myself. Do you agree?
Proposal the "as-ts" language server, a deno loader in userland?
Published: 2022-10-23 14:54:42

Currently if I wanted to how can I write this in any javascript runtime and execute it? This is an `astro` file from the [astro framework](https://astro.build/). 

```ts
// example.astro
---
console.log('hello world')
---
<div>hello world</div>
```

Currently you can't really run this without the framework it lives in. There's no `astro run example.astro` command. Why would you need this? I'm using astro as an example, of a type of file that compiles to TypeScript, there are dozens, `vue`, `svelte`, `rescript`, `dart`, the list goes on. The same way you can't just run this astro file, you can't really run most of the others, some are framework specific, and some are language flavors. Even if they include a mechanism for execution there's not a lot of interoperability. There's also not a whole not of options when it comes to the runtimes and the package managers those runtimes use (npm for node, url imports for deno).

The way vite + npm works is fundamentally different from how deno url imports work. When a package such as `@reggi/astro-stuff` has an astro file in its path `example.astro` vite has access to this static file from the file system and can access it. In vite + deno what I want is this:

```
https://deno.land/x/reggi@0.0.3/astro-stuff/example.astro
```

This is a astro file in a url import. Deno has no clue how to handle this type of file type, or the astro syntax. You can imagine that within the astro file, there may even be more deno imports and deno would need to know how to recursively get the dependencies.

The conversation on whether or not deno should handle this or userland should is [active here](https://github.com/denoland/deno/issues/1739).

Enter the "`as-ts` language server". In deno you can specify import maps.

```
{
  "imports": {
    "as-ts/": "https://localhost:3021/"
  }
}
```

Then when you import a module you can do this:

```
import 'as-ts/https://deno.land/x/reggi@0.0.3/astro-stuff/example.astro'
```

```
import 'as-ts/example.astro'
```

The language server would be setup to take incoming local file requests or url requests fetch the file, cache and convert them into ts files. Deno would only see the ts file and if there are more imports deno would fetch those as well only seeing the ts files.

The server would be able to detect different file types

```
import 'as-ts/example.svelte'
```

```
import 'as-ts/example.mdx'
```
Launching Bruno - Local-first Opensource API Client (postman alternative)
Tags: webdev, javascript, opensource, react
Published: 2022-10-23 14:52:56

Hi there 👋

I am launching bruno. A Local-first Opensource API Client. In this post, I'd like to share the goals, motivations and story behind this project.

Quick intro, I am Anoop , a full stack software programmer based out of Bangalore.

In my decade long journey of developing software, every time I need to explore or work with api’s, I usually have to ask my colleagues to slack/email me a postman collection.

Postman has a great collaboration platform for teams (it's gotten bloated these days though), but many companies stick to sharing collections via slack/email instead of opting for the paid plan.

I searched for an opensource alternatives which companies can self host on their servers, but sadly none exist. Every opensource alternative (Insomnia, Hoppscotch.. etc) has a closed source component which restricts companies from self hosting.

Bruno (named after my pet golden retriever) is my attempt at solving 2 key problems.
### 1. Build end-to-end opensource platform that companies can self-host to enable developers to collaborate on api collections.

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

Currently all the projects (I have included the popular clients in above image) out there keep the sync server as closed source. With Bruno, I want to build an end-to-end opensource platform that companies can self host.

### 2. BYOVC (Bring Your Own Version Control) - Allow developers to directly store there collections on top of their local filesystem. The collections are mirrored as folders and files on the filesystem

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

Bruno (on the desktop app) allows you to directly load and save collections on top of your local filesystem. This gives developers the freedom to use the versioning system of their choice(ex: git) to share and collaborate over collections.

You can checkout the project on github, I’d appreciate your thoughts, ideas or feedback.

I have also written about how Bruno is different on how we think around the concepts of Workspaces, Collections and Environments [here](https://www.usebruno.com/design)

Github: https://github.com/usebruno/bruno
Live Demo: https://play.usebruno.com/
Launch Video: https://www.youtube.com/watch?v=wwXJW7_qyLA
Website: https://www.usebruno.com
I Created a Programming Puzzle Game
Tags: webdev, programming, gamedev, showdev
Published: 2022-10-23 14:25:00

Halloumi! I made a new puzzle game. It's a four-question pyramid quiz game. It's for all those brainiac unicorn developers who can't say no to a challenge.

If you aren't one of those, don't worry, there are puzzles of different experience levels. With this release today, there are four puzzles from beginner level to heroic level. You can [find all game levels here](https://www.perssondennis.com/games/perssons-pyramid), or maybe you want to skip directly to the heroic one, [_Turning coffee into bald hair_](https://www.perssondennis.com/games/perssons-pyramid/4).

![Turning coffee into bald hair](https://www.perssondennis.com/images/articles/perssons-pyramid-puzzle-programming-game-release/turning-coffee-into-bald-hair.webp)
_Developer (noun): a person turning coffee into bald hair_

Are you a cheater? I'm no one to blame you, any method to solve the puzzles is allowed, googling is what we developers do!

![Perssons pyramid game question](https://www.perssondennis.com/images/articles/perssons-pyramid-puzzle-programming-game-release/perssons-pyramid-game-question.webp)
_Answer questions to reach the top of the pyramid_

Cheater or not, let's look at the game. Each level consists of a pyramid. You can click on any of the numbered triangles in the pyramid to answer programming questions. The two topmost triangles are locked until you have solved the triangles below them. The goal is to unlock and find the answer to all four questions in the pyramid.

![Perssons pyramid game level unlocked](https://www.perssondennis.com/images/articles/perssons-pyramid-puzzle-programming-game-release/persson-pyramid-game-unlocked.webp)
_Solve the two bottom triangle puzzles to unlock the third triangle above_

Let me know if the levels are too easy, I can make them harder. If they are too difficult, you can google harder. Let the game begin!

The game is available [here](https://www.perssondennis.com/games/perssons-pyramid).