teleren/devto huggingface dataset:
Multi-language character support in Thymeleaf
Published: 2022-04-26 15:04:14

```
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
</head>

<!--<body style="width: 900px; margin: 0 auto; color: #111; font-family: Arial Unicode MS; font-size: 12px;-->
<!--    line-height: normal; box-sizing: border-box;">-->
<body style="font-family: Barlow">

<div>
    Sample test text
    tiếng Việt
</div>

</body>
</html>
```

```
templateEngine.process("template.html", context);

```

I am using this template.html file with Vietnamese text in it
and trying to generate pdf from it by using Thymeleaf.TemplateEngine
 but,
text is comming like this in pdf

> Sample test text ti?ng Vi?t

Vietnamese characters are not comming properly
Golang Job Queue Implementation
Tags: go, grpc, jobqueue
Published: 2022-04-26 15:01:50

## Introduction
A friend of mine asked me to implement a job-queue. As I was new to Golang at that time I was curious and talked with the friend and also browsed the internet and read the purpose of a job queue.

### Eliminate performance bottlenecks
During the research time, I found using JSON is causing a huge impact on performance. The solution was to use gRPC with Protobuf. I used a channel with size with several thousand as the main queue. Since there is limited no of worker machines, I needed to utilize the processor with maximum efficiency to get the jobs done quickly. So each worker machine takes job parameters from the main queue and stores them in their own queue which allows making the room for new requests in the main queue.

These worker machines are equipped with several Goroutines. Each Goroutine takes job parameters from its own worker machine and executes the job.
Even though Goroutines are extremely light-weight thread like programs, using millions of Goroutines won’t result in the optimal utilisation of resources. Please read this article.

My approach to the job-queue implementation
The central server application listens to client requests and put them into the main queue. Several worker machines take job parameters from the main queue and store them on their own queue. Each worker machine is equipped with several small processes whose sole task is to execute the job parameters which are extracted from the queue in the worker machine.

### Artifacts
Let the no of worker machines to be m and the no of Goroutines each worker machine runs to be n, on maximum resource utilisation, the applications execute m x n concurrent jobs at any given time.

#### Source Code
https://gitlab.com/lakshanwd/go-job-queue
Querying Data from MongoDB using GraphQL in Django: Get-Go (1)
Tags: graphql, django, mongodb, python
Published: 2022-04-26 14:47:31

The ease of MongoDB combined with the power of GraphQL: I cannot think of a better combination than this! I will be curating a series of articles for working on GraphQL + MongoDB + Django. This is the first part of that series.

In this article, you will learn how to-

- import data into MongoDB using a CSV file
- install GraphQL and other related Django libraries
- pull data from MongoDB to Django

### From .csv to MongoDB Collection

Run this code directly in your terminal (not mongod console) to import a CSV file from your local. We are using mongoimport which is a tool/command that enables us to import any JSON, CSV to TSV file.

```python
mongoimport -d vendors -c vendors --type csv --file vendorlist.csv --headerline
```

where 

-d: database name

-c: collection name

-headerline: used to keep the headers

### Installing GraphQL in Django

Yet another saga of versioning mismatch. I have already played with them so you don't have to 🙂

![Version table](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o2qkjzhl34jlbzl5g95i.jpeg)

Below are the errors that were causing a lot of confusion regarding the versions-


![Error in terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v5x26psqse8gaiemsajo.jpeg)

Error when the version of graphene-django was 3.0b7 which was latest but it couldn’t import the get_default_backend package


![library name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5kbwjj05kttnpk467p26.png)

Commands to install each library/package/driver

- graphene

```python
pip install graphene==2.1.8
```

- graphql-core

```python
python -m pip install graphql-core==2.3.2
```

- pymongo

```python
python3 -m pip install pymongo==3.12.1
```

- graphene-django

```python
pip install "graphene-django>=2.0"
```

<aside>
💡 Don’t forget to add ‘graphene-django’ and ‘graphene’ to your settings.py file

</aside>

### Getting a MongoDB collection’s data to Django project

Import the Document class from  mongoengine library and subsequently import the fields that are required.

<aside>
💡 Your can check the datatype of the field in MongoDB in MongoDB Atlas console and then import the field in your Django project. Example- The ID field in a document id always an ObjectIDField.

</aside>

I have a MongoDB document vendors and the class that is accessing the document is VendorData. 


![importing mongodb document in django](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tejslo5r8ggo2dxzp53q.jpeg)

This was the first part of the series of MongoDB+Django+GraphQL tutorials. I will explain more about writing queries in Django and GraphQL in the later parts.
How i work as a Maintainer/Mentor
Published: 2022-04-26 14:36:42

Hello 👋

I wanted to write a relatively short post about how I like to work and interact as a maintainer and mentor (and probably as a technical lead too). 

Over time I realize that many are in a position where they speculate on the right behavior to have with me (when they contribute or ask me for help). That's why I feel I have to write an article so I can build on it and avoid confusion.

## What many think 👀

Many people have a very different approach and opinion on this kind of thing. For example, things that come up often in the mind of developers:

- Never expect an answer or time for free 💰.
- Wait for an approval, work by yourself before taking the time of the maintainer etc.
- Speculate what the maintainer want or think.

Some maintainers/mentors are colder than others too. I personally hate these approaches and they don't suit me at time.

> To be clear: I am not making any judgment here. 

## My way 💃

First of all I am a very accessible person 😇 and it is always with pleasure that I answer your questions... No matter what your level is (junior or more experimented).

Those who know me know that I love to spend hours helping (or even discuss more ordinary things). It is frequent that contributors or mentee do not ask me anything by fear of disturbing me. For contributors, it is sometimes the fear of being judged or of not being up to the task.

Some will think that if I'm not the one making the effort to interact... then I'm not interested in them. **That's wrong**. Unfortunately, I have too many people and things to deal with. Whether as a maintainer, lead or a mentor, I hate micromanaging relations because it take me to much time and energy.

Personally I see it more as "if you don't ask anything it mean you don't want to be involved/don't need me". The more I know the person, the more we have in common, the easier it will be for me to initiate the conversation (this is a two-way relation).

### Helping juniors 🐤

I am always willing to take a lot of time to support juniors who have motivation and who prove it by actions.

It is the same in the context of open source. Sometimes this can take time and be difficult for you. Sometimes you will fail but it's really not a big deal and I will never blame you.

> Some approach me in the hope of getting a job easily. I only help beginners who I know well and who have proven their motivation and skills.

### Do not be afraid to make mistakes

Mistakes will be frequent when making contributions. Wanting to achieve perfection is not realistic so feel free to send something incomplete. I will work with you to complete what is wrong.

That's my job and my responsibility as a maintainer. So don't ever think that I'll be disappointed that you're missing something (or that you might not have understood).

---

That's all 😊. To sum up I am someone who loves to help and build projects with other developers 👯. I don't particularly chase money and for me gratitude will always be much more profitable in the long run.

💗💗💗
Software Supply Chain Security - Tales from the Trenches
Published: 2022-04-26 14:23:16

---
title: Software Supply Chain Security - Tales from the Trenches
published: true
description: Ant Weiss Talks about Supply Chain Security on DevSec for Scale Podcast
tags: 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/it82b22svueduq532i4v.png
---

{% embed https://youtu.be/zegWZLKvZYA %}
Thanks @jphess2 for hosting me!


#software #security #supplychain #devops #devsecops
Step-by-step to turn your fresh node project to use typescript
Tags: tutorial, beginners, javascript, typescript
Published: 2022-04-26 14:09:53

OK, you fall in love with typescript, and now you really want to use it in your new express project.

## A common approach in using typescript in node project

Start the new node project by running this command in your directory via the terminal.

### 1. Create a new node project, with a package.json file

```bash
npm init
```

This will generate a new **package.json** file. Let me show mine:

```json
{
  "name": "friend-api",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Teerasej Jiraphatchandej",
  "license": "ISC"
}
```

### 2. Add packages for typescript 

So we want to set up this project for us to use typescript in development. We add 2 packages as `devDependencies`:

```bash
npm i -D @types/node
npm i -D typescript
```
Here we go. We have **package.json** file similar to the one below:
```json
{
  "name": "friend-api",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Teerasej Jiraphatchandej",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^17.0.29",
    "typescript": "^4.6.3"
  },
}
```
### 3. Add tsconfig.json

OK, let's create another file: **tsconfig.json** at the root of the project's directory. This file will tell how would typescript's compiler work:

```json
{
    "compilerOptions": {
      "module": "commonjs",
      "esModuleInterop": true,
      "target": "es6",
      "moduleResolution": "node",
      "sourceMap": true,
      "outDir": "dist"
    },
    "lib": ["es2015"]
}
```

### 5. Let compile and run

from this point, you can use the following command in the terminal to compile all `tsc` files in project into `/dist` directory (as you set it up in **tsconfig.json**: **outDir**)

```bash
tsc
```

and you can run your compiled code with 

```bash
node dist/<file name>.js
```

### 6. Done, but you can add more ease

Execute 2 commands repeatedly will take out our energy. You can use the script section in package.json to create a shortcut

```json
{
  ...
  "scripts": {
    "start": "tsc && node dist/app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  ...
}
```
After save the package.json file, you can compile and run your project with one simple command:

```bash
npm run start
```
pylance report missing module
Published: 2022-04-26 14:07:11

[{
	"resource": "/C:/Users/LATITUDE/Documents/python/matplotlib/colormap.py",
	"owner": "_generated_diagnostic_collection_name_#0",
	"code": {
		"value": "reportMissingModuleSource",
		"target": {
			"$mid": 1,
			"external": "https://github.com/microsoft/pylance-release/blob/main/DIAGNOSTIC_SEVERITY_RULES.md#diagnostic-severity-rules",
			"path": "/microsoft/pylance-release/blob/main/DIAGNOSTIC_SEVERITY_RULES.md",
			"scheme": "https",
			"authority": "github.com",
			"fragment": "diagnostic-severity-rules"
		}
	},
	"severity": 4,
	"message": "Import \"matplotlib.pyplot\" could not be resolved from source",
	"source": "Pylance",
	"startLineNumber": 1,
	"startColumn": 8,
	"endLineNumber": 1,
	"endColumn": 25
}]
WebAssembly x Rust, a Deadly Combination!
Tags: opensource, discuss, webassembly, beginners
Published: 2022-04-26 14:04:47

Welcome to Another Blog, Today we will learn about why WebAssembly & Rust is considered a Deadly Combination!

Firstly, Rust isn't doing a singular thing differently than any other programming language, but rather the way the whole package comes together creates an amazing and unique solution! 

> Rust has an impressive set of features that can be categorized into four categories:
> 1. Superb performance
> 2. Great safety
> 3. Easy tooling
> 4. A welcoming community


### Why Wasm and Rust make so much sense!

#### 1. Efficiency:
Additionally, Rust with Wasm has the advantage of fast execution and small binary size. These two languages are comparable to or even a little better than C and C++, which are garbage-collected languages. However, even a relatively small runtime language like Go has a hello world binary size of 2MB after being compiled to .wasm.

#### 2. Low-Level Control with High-Level Ergonomics:
Applications written in JavaScript have difficulty attaining and retaining reliable performance. Garbage collection pauses and JavaScript's dynamic type system are ineffective. Even seemingly minor changes could result in drastic performance regressions if you accidentally stray from the JIT's happy path.
With Rust, programmers have low-level control and reliable performance. There are no garbage collection pauses, as there are in JavaScript. Direction, monomorphism, and memory layout can be controlled by programmers.

#### 3. Small .wasm Sizes:
As the .wasm must be downloaded over the network, code size is extremely important. The absence of a runtime enables small .wasm sizes since there is no extra bloat, such as a garbage collector. Your code size is only affected by the functions you use.

#### 4. No Need to Rewrite Everything:
We don't have to get rid of existing codebases. To start, you can port your most performance-sensitive JavaScript functions to Rust and you can even stop there if you want to.

#### 5. A Collaborative Nature:
Rust and WebAssembly integrate with existing JavaScript tooling. It supports ECMAScript modules and you can continue using the tooling you already love, like npm and Webpack.

#### Conclusion:
With Rust and Wasm's extensive tooling, excellent efficiency, and portability across a wide spectrum of hardware and software environments, the pair can form a formidable combination. 

References:
1. https://www.rust-lang.org/learn
2. https://rustwasm.github.io/

> Do comment your ideas and suggestions related to the blog and please share if you found it useful.
Ubuntu 22.04: Create Blitzjs app
Published: 2022-04-26 13:58:33

OS: Ubuntu 22.04

> There is a bug relevant to openSSL, prisma for this newest version of Ubuntu
There are 2 ways to fix it (Not really sure about this)
- Update package, use prisma dev version (I chose this)
- Install older openSSL version

Step-by-step to create a Blitzjs app 

## Create the app
```
npm install -g blitz --legacy-peer-deps
```
```
blitz new myAppName
```
```
cd myAppName
```

## Fix the bug
- Open the project
- Open package.json file
- Update packages 
```
dependencies: "@prisma/client": "3.13.0-dev.29"
devDependencies: "prisma": "3.13.0-dev.29"
```

## Migrate
```
blitz prisma migrate dev
```

## Start the project 
```
blitz dev
```
Introdução ao Node.js - Parte 2
Tags: beginners, braziliandevs, node
Published: 2022-04-26 13:56:22

Você deve já ter lido sobre event loop, que o Node.js é assíncrono, orientado a eventos etc.

## Modo Síncrono
No modo síncrono, deve se esperar o termino de execuação de uma linha para seguir para a proxima. 
```js
const fs = require("fs")

const input = fs.readFileSync("input.txt", "utf-8")
console.log(input)
```
O modo síncrono também é conhecido como "blocking code".
Ou seja, cada linha espera o resultado da linha anterior para pode seguir o fluxo.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u2n0inrnrqvsbdp4m1u0.png)
Perceba que o resultado na tela saiu na ordem esperada.


## Modo Assíncrono
Essa operação de IO demora um pouco para finalizar, então como é assíncrono, ele vai rodar e vai passar reto enquanto os dados não estiverem prontos e não pararem nela como no sync.js. Quando ele bater na linha ReadFile ele vai passar todas as camadas do SO pedindo para fazer esse IO e, internamente, vai gerenciar avisando quando estiver pronto para leitura ou dado um erro, vai ser chamado o callback.


No modo assíncrono, não espera o termino de execução de uma linha para ir para proxíma
```js
const fs = require("fs")

fs.readFile("input.txt", "utf-8", (err, data) => {
  console.log(data)
})
console.log("Non-blocking Code")
console.log("Lendo o arquivo...")
```
Ele lê o arquivo em background e vai seguir o fluxo, enquanto os dados do background não estiverem prontos.
Quando estiver pronto para leitura ou dado um erro, vai ser chamado o callback.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tx86l4hsplzfbvkoxvmg.png)
Perceba que as duas linhas do console.log() foram lidas primeiro do que o arquivo.txt que continha a mensagem hello world!


## O que é thread?
Imagine que a thread é uma caixa com uma sequência de instruções.
O node usa apenas UMA thread para executar os codigos, ou seja, toda as requisições usam a mesma thread.

## O que é Event Loop?
O event-loop é o responsável por escutar e emitir eventos no sistema.
No Node se trabalha com eventos de I/O(Input/Output).

Eventos de I/O(Input/Output) podem ser: ler e escrever arquivos locais ou fazer uma requisição http para uma API.

O event-loop vai pegar os eventos e executar os callbacks, mas sem bloquear o fluxo.
<br/><br/>
Fico por aqui, até breve!
Faster Conventional Commits Messages
Tags: tutorial, beginners, productivity, tip
Published: 2022-04-26 13:55:26

[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) is a specification to help creating an organized commit history.

This is not a tutorial explaining what it is, but a simple tip for automate some pieces when you are working with it.

## The slow way 🚶‍♀️
In your daily workflow, the team commits use to follow a pattern using the prefixes, like: `feat:`, `chore(API):`, `fix:`. It's become repetitive and can be optimized.

## The faster way 🏃‍♀️

Here is a simple solution for my case, but this can be extended in many ways to your workflow.

```sh
function gitCommit() {
  git add .
  git commit -m "$1: $2"
}

alias gchore="gitCommit chore"
alias gfeat="gitCommit feat"
alias gfix="gitCommit fix"
alias gwip="gitCommit wip"
```

The function takes 2 args, one is the prefix you want to be added, second is the message.

In my case, what I most use are these prefixes, so I've created an alias for every single one.

Now when I want to add all and commit I just run

```sh
$ g<prefix> "message to be commited"
```

### Going Further

Another good improvement is using [oh-my-zsh](https://github.com/ohmyzsh/ohmyzsh) combo with [Git Plugin](https://github.com/ohmyzsh/ohmyzsh/tree/master/plugins/git).
It brings a lot of aliases for other languages, other CLIs, like Heroku, Ruby, etc.

Using the Git Plugin the above function could be converted to:

```sh
function gitCommit() {
  gaa
  gcmsg "$1: $2"
}
```

Use your imagine and you can include other things as you need.
Interactive SNES Controller in HTML + CSS
Tags: webdev, showdev, html, css
Published: 2022-04-26 13:48:51

---
title: Interactive SNES Controller in HTML + CSS
published: true
description: This past weekend, I created a demo using 3D CSS: an interactive SNES controller
tags: webdev,showdev,html,css
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/abht688xa9afrsqs111z.png
---

This past weekend, I created a demo using 3D CSS: an interactive SNES controller. The idea was to get a "realistic" version of the controller, coding it entirely with HTML and CSS.

The result are on this CodePen demo ([link to full screen](https://codepen.io/alvaromontoro/full/PoEgRPG)):

{% codepen https://codepen.io/alvaromontoro/pen/PoEgRPG %}

And it is interactive! Click on the top circle to change the camera angle, and press the buttons and joystick to see them going down and up.

One goal was to make it work using a mouse, keyboard, or a gamepad connected to the browser (I had to add a pinch of JS for that 😉), and it works! If you plug a game controller into your computer, you will see the buttons pressed as you press on the physical controller. The [Gamepad API](https://w3c.github.io/gamepad/) controls that, and I also used a [library I developed to make it easier to handle](https://github.com/alvaromontoro/gamecontroller.js) (the Gamepad API is a bit _different_ to other Web APIs.)

I have to admit that the 3D is a bit "fake." I am using actual 3D CSS and rotating/translating things in the three dimensions, but I am limiting the angles so I don't have to deal with the actual depth (something that [Amit Sheen](https://twitter.com/amit_sheen) does greatly on his demos, but that I didn't want to deal with this time 😳).

The joystick/axis was challenging (the cross shape with rounded corners was a pain to do), but it was fun. And I got to play with `transform-origin`, so only the side that is being pressed goes down.