teleren/devto huggingface dataset:
How to Deploy Vue.js to China?
Tags: vue, javascript, webdev
Published: 2021-04-05 20:15:19

---
canonical_url: https://www.21cloudbox.com/solutions/how-to-deploy-vuejs-project-in-production-server.html
---
# What is Vue.js?
Vue (pronounced /vjuː/, similar to view) is a progressive JavaScript framework for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue's core library only focuses on the view layer, which facilitates integration with third-party libraries or existing projects.

21YunBox provides a very simple Vue.js deployment method. You can deploy on the 21YunBox in a **static site** environment.

# How to Deploy Vue.js in China?
1. Register as a [21YunBox member](https://www.21yunbox.com/u/signup/)
2. In Gitee Fork [Vue.js example](https://gitee.com/eryiyunbox-examples/vue-hello-world)
3. Create a **Cloud Service** on 21YunBox, and allow 21YunBox to access your code base
4. Create with the following configuration


| Environment           | `Static Site`         |
| --------------------- | :-----------------------:|
| **Build Command**     | **`yarn && yarn build`** |
| **Release Directory** | **`./dist`**             |


If you'd like a step by step example video, please refer to the [original article](https://launch-in-china.21yunbox.com/solutions/how-to-deploy-vuejs-project-in-production-server.html)

# Why Choose 21YunBox?

> [21YunBox](https://www.21cloudbox.com/) specializes in helping foreign businesses to host their websites in China. We deliver everything you and your team needs to build, run, and scale websites and apps in China.

To learn about the differences between 21YunBox and these foreign (outside of China) cloud service platforms, please refer to:

* [21YunBox vs Heroku](https://launch-in-china.21yunbox.com/solutions/how-to-speed-up-heroku-in-china.html)
* [21YunBox vs Netlify](https://launch-in-china.21yunbox.com/blog/solutions/alternatives-to-netlify-in-china.html)
* [21YunBox vs Vercel](https://launch-in-china.21yunbox.com/solutions/how-to-speed-up-vercel-in-china.html)
* [21YunBox vs Gatsby Cloud](https://launch-in-china.21yunbox.com/solutions/how-to-speed-up-gatsby-cloud-in-china.html)
* [21YunBox vs Github Pages](https://launch-in-china.21yunbox.com/solutions/how-to-speed-up-github-pages-in-china.html)
* [21YunBox vs Surge.sh](https://launch-in-china.21yunbox.com/solutions/how-to-speed-up-surgesh-in-china.html)
* [Compare in terms of function and price: 21YunBox vs Heroku, Netlify, Vercel](https://www.21yunbox.com/compare-others/)
The new URL encoder tool around the block
Tags: webdev, nextjs, security
Published: 2021-04-05 19:54:03

Original post: https://matyasfodor.com/projects/url-encoder

# URL encoder/decoder

A few weeks ago I needed an URL encoder, and I wasn't quite satisfied with the online tools available, so I decided to build one on my own. The difference between the prior art and my project, [url-encode.io](https://url-encode.io) is that there's no pasted data sent to the server. Plus it might be more pleasing visually. It is built with [Snowpack](https://www.snowpack.dev), TypeScript, and the very best organic, home-grown CSS, supporting dark mode.

## Materials & Methods

The developer experience of Snowpack is simply amazing. What differentiates Snowpack from other build tools is that it won't bundle the source during development. Why is it important? A typical build tool would re-bundle the source on every file save. This can be quite time-consuming as your project grows. It is not only directly impacting the development performance, but these little delays in the workflow are the hotbed of procrastination. Should Webpack be replaced by Snowpackin every project? Probably not. It serves a different purpose. Maintaining Webpack configuration can sometimes feel like a full-time job, but it is a time-proven developer tool. I would suggest using Snowpack whenever Webpack feels like overkill.

I chose Vercel as my hosting solution. It takes 11 seconds (!) to deploy a new version. I'm simply blown away.

## What's next?

The plan is to monetize the website with ads, some of the previous similar sites do that too. Of course I don't have false dreams of getting rich with an online URL encoder tool. It's more of an experiment of how to make it from zero to one, and doing some SEO optimization. If I can cover the cost of the domain, I'm already happy. I'm still struggling to make the site eligible for Google Ads but that is a problem of tomorrow.
Test Rails API with json type
Tags: ruby, rails, rspec
Published: 2021-04-05 19:51:59

By default Rails converts all params that come from Rspec to strings(related issue https://github.com/rails/rails/issues/26075)

For example, `{ my_type: 1 }` will become `{ "my_type": "1" }`

So to keep our types as they should be we can write our requests from test as so:
```ruby
  get :create, params: params, as: :json
```

But it also possible to define json type for all requests in test file:
```ruby
  before do
    request.accept = 'application/json'
    request.content_type = 'application/json' 
  end
```
And now we can skip that `as: :json` part.

And with Rspec shared_examples we can easily reuse that:
```ruby
# rails_spec.rb
RSpec.shared_context 'json_api' do
  before do
    request.accept = 'application/json'
    request.content_type = 'application/json'
  end
end

# our_controller_spec.rb
RSpec.describe OurController, type: :controller do
  include_context 'json_api'

  # ... tests
```
Cursos gratuitos da Kinghost com certificado
Tags: treinamento, cursos
Published: 2021-04-05 19:51:00

---
title: Cursos gratuitos da Kinghost com certificado
published: true
description: A Kinghost criou dois cursos de capacitação gratuitos para quem deseja criar o seu site e ainda não possui conhecimentos em programação.
tags: treinamento, cursos

---

Voltados para criação de sites, a KingHost lançou dois cursos online e gratuitos para quem deseja se capacitar durante a pandemia. E o melhor: não é necessário possuir experiência em programação para participar.

As iniciativas fazem parte da missão de amplificar a conexões humanas na Internet para simplificar o uso da tecnologia, gerando valor através da infraestrutura excelente e suporte especialista e humano.

![Curso Criador de Sites](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ivtpmzb39c8kb88y5mgt.png)
## Curso Criador de Sites

Curso online e gratuito sobre criação de sites utilizando a ferramenta "Criador de Sites" da KingHost. São apenas 9 aulas. O que ensina:
- Configurações iniciais, customização e design;
- Como inserir e organizar o conteúdo do site;
- Como adicionar formulário de contato e mapa de localização;
- Como adicionar vídeo ao site e melhorar o engajamento;
- Como adicionar informações no rodapé do site;
- Como editar as informações do menu de topo do site;
- Como publicar o site.

[Faça sua inscrição](https://bit.ly/2Plvq7d)

![WordPress para iniciantes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vrw9zhanmzjdopgw7mez.png)
##WordPress para iniciantes
Curso online e gratuito sobre criação de sites em WordPress. São 4 horas aula, com certificado. O que ensina:
- Utilização da ferramenta desde os primeiros passos;
- Instalações e configurações essenciais;
- O design do seu site: identidade visual;
- Como gerar mais acessos utilizando SEO e E-mail Marketing;
- E mais... são 06 módulos.

[Faça sua inscrição](http://bit.ly/318rr0I)
Test post with long title for testing purposes only to manage this as a cms
Tags: testdev, nextjs
Published: 2021-04-05 19:39:34

This is a test post to try to use dev.to as a cms. This is a test post to try to use dev.to as a cms. This is a test post to try to use dev.to as a cms. This is a test post to try to use dev.to as a cms. This is a test post to try to use dev.to as a cms. This is a test post to try to use dev.to as a cms. This is a test post to try to use dev.to as a cms. This is a test post to try to use dev.to as a cms.
If you're a sysadmin, I'd like to get your feedback.
Tags: feedback, sysadmin, powershell
Published: 2021-04-05 19:26:44

---
title: If you're a sysadmin, I'd like to get your feedback.
published: true
description: 
tags: feedback, sysadmin, powershell
//cover_image: https://direct_url_to_image.jpg
---

Are there any Windows/Linux Server System Admins here on Dev.to? I created this unit testing framework a while back, and I wonder if other folks would benefit from it. We have found it extremely useful at my company. Any feedback I would be interested to hear about it. 

For context I do QC in the Automation department and I created this from scratch to do quicker testing iterations and avoid human error in manual testing. I think there are other venues like DSC https://docs.microsoft.com/en-us/powershell/scripting/dsc/overview/overview?view=powershell-7.1, but I am not sure if it lives up to my framework which can be extended to test just about anything.

We unit test 30+ VMs in esxi, most of them are Windows Server VMs, but my framework can also test Linux configuration as long as powershell is installed on the Linux VM.

Features:
- Modular
- Unit tests configurable with json files
- Hard to configure tests, can be done with powershell scripts
- Nunit xml reports

https://github.com/TheFern2/ReadyServer
Does anyone knows how to change current time of song correctly in JavaScript?
Tags: question, javascript, webdev, discuss
Published: 2021-04-05 19:23:42

Hi, everyone! I'm trying to make custom audio player in JavaScript and when I try to change current time of song then on some songs it sets currentTime to 0. I tried to find solution and it seems like bug in Chrome or something. Maybe someone know how to fix it? 

My code is so simple:
```js
const audio = new Audio();

function playSong(songURL) {
  audio.src = songURL;
  audio.play();
}

function seek(value) {
  audio.currentTime = value;
}
```
Daily Log: 13, 14, 15, 16
Tags: 100daysofcs
Published: 2021-04-05 19:22:56

From my last post:

> this might have to wait until the weekend.

The weekend came and went away, but this bug did not. In all honesty, I haven't gawked at the screen long enough. You know, sleeves up, pupils dilated, sight narrowed down to a beautiful 8 pixel wide monospace, and then suddenly, it occurs to you. The "flow" as some might call it.

My excuse, like the 99% of you, is time. This week again, jampacked with the final batch of backlog from the last quarter, which I don't want to carry forward. I'm also taking a little break from work (and everything else) which means a smaller week for me. I don't think that I'd be able to get back on track with "clox" right away.

The good news is that I've another something to munch on while I wait for "the flow" (I use the term, almost mockingly, despite it being a real, physiological phenomenon; to assert on _spending time_ and _doing the work_ and not on waiting for the flow to occur magically). This just arrived in the mailbox:

![Book: 500 Lines or less](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hzji73sd7czs3s1qhqkr.jpg)

This book documents the journey of design decisions taken by experienced programmers, the likes of Guido van Rossum and Ned Batchelder, when they start working on something large (complicated) which is still small in size, a limit artificially enforced in the book, ergo 500 lines or less. from "Building a web crawler with asyncio routines" to writing a "Python interpreter in Python" under 500 lines of code.

As attractive and luring as it is, I still doubt if I'd be able to push another attractive post this week. 🤞
Like, so confused...
Tags: sql, operator, like, sqlite
Published: 2021-04-05 19:18:49

# `LIKE` operator
I'm taking a SQL Essential Training course on LinkedIn Learning, and I **BRIEFLY** got confused about the `like` operator. 

I kept forgetting what was what in terms of where the `%` went. 

I'm using [SQLStudio](https://sqlitestudio.pl/) and following this [tutorial](https://www.linkedin.com/learning/sql-essential-training-3/about-sql). 

Here are my notes: 


## %[search_term]% - CONTAINS
```
SELECT Name, Continent FROM Country WHERE Name LIKE '%island%';
```
Human sentence: "Show the Name and Continent column of the Country table that CONTAINS 'island'..."

**`%` on either side envelopes the key search word, so 'contain' here makes sense.**
![Screen Shot 2021-04-05 at 1.05.31 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c729ui8shs6ygysko5lu.png)
*results that **contain** 'island' in any way*

## %[search_term] - ENDS WITH
```
SELECT Name, Continent FROM Country WHERE Name LIKE '%island';
```
Human sentence: "Show me the Name and Continent column of the Country table that ENDS with 'island'..."

**`%` only at the beginning of the search term takes the place of the rest of the text, meaning that `%` at the beginning means 'island' at the end.**
![Screen Shot 2021-04-05 at 1.10.15 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6q02eqqnjlo47qtj5m9o.png)
*only results that **end** with 'island'*
 

## [search_term]% - BEGINS WITH
```
SELECT Name, Continent FROM Country WHERE Name LIKE 'island%';
```
Human sentence: "Show me the Name and Continent column of the Country table that STARTS with 'island'..."

**`%` only at the end of the search term means 'island' is at the beginning of the Name column.**
![Screen Shot 2021-04-05 at 1.11.27 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ozsnmfobfujhday64b2i.png)
*we get a big whopping zilch for this one...I guess there's no Country Name that BEGINS with the word 'island'.*

But let's add one for fun to make sure it works...
![Screen Shot 2021-04-05 at 1.13.54 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xpe7a1jtmqj0k5ed0lqp.png)
*Ok so now we have the fictional 'Island of the Blue Dolphins' which was now returned*

For some reason it's hard for me to remember which term it searches for based on where the `%` is located.

Hope this helps, but mostly this is for me :)
Numeric Separators in JavaScript
Tags: javascript, es2021
Published: 2021-04-05 19:03:37

---
canonical_url: https://backbencher.dev/javascript/numeric-separators
---

Numeric separator(`_`) was introduced to make numbers more readable by creating a **visual separation** between groups of digits. The separator can be used with decimal, binary, hexadecimal or BigInt numbers. This feature was introduced in **ES12**.

It is difficult for humans to read large numbers quickly. What about 1000000000? Is it a billion or 10 million?. Numeric separators make developers' life easy.

```javascript
const num = 1000_000_000; // Definitely a billion
```

Numeric separator is purely for visual separation. It does not have any impact in the functionality. In fact, comparing a number with separator and that without it, results in `true`.

```javascript
console.log(1000_000_000 === 1000000000); // true
```

## Position of Separator

The numeric separator can appear anywhere **inside** the number. Following are valid usages of numeric separators.

```
1000_000_000
123_02
4567_00
3_4_5_6
```

Numeric separator is **not allowed** at the **end** of a number. Therefore, following number is invalid.

```
123_00_
```

Also, if a number **starts** with `_`, JavaScript treats it as a variable. In JavaScript, a variable can start with `_`.

```javascript
const a = _123;
```

Here `_123` is considered as a variable name. Since that variable is not declared, above code will throw *reference error*.

## Separators in Fractional Part

Numeric separators can be placed in the fractional part of a number.

```
12.300_00
1e10_10
```

## Examples

Here are some examples that consider different use cases of numeric separator.

### Binary Literal

A binary literal in JavaScript is denoted by prefixing a binary number by `0b`. While writing a binary literal, we can place numeric separator to make it more readable.

```javascript
console.log(0b11_1); // 7
console.log(0b111); // 7
```

`111` is the binary equivalent of decimal number `7`.

### Hex Literal

A Hexadecimal literal in JavaScript is denoted by prefixing a hexadecimal number by `0x`. We can include numeric separator in a hexadecimal number.

```javascript
console.log(0xF_F); // 255
console.log(0xA_B === 0xAB); // true
```

Note that the decimal equivalent of `0xFF` is `255`.

### BigInt Literal

A BigInt literal can contain a numeric separator.

```javascript
const a = 1_309_89n;
console.log(typeof a); // "bigint"
console.log(a.toString()); // "130989"
```

If we place an underscore `_` between the number and final `n`, it will throw an error.

```javascript
const a = 1_309_89_n;
```

Above code results in following error:
```
SyntaxError: Numeric separators are not allowed at the end of numeric literals
```

## Browser Compatibility

All the major browsers support numeric separators. We can see the precise information by visiting this [CanIuse](https://caniuse.com/mdn-javascript_grammar_numeric_separators) link.
KVM - Compartilhando pasta entre host e convidado.
Published: 2021-04-05 18:59:38

---
title: KVM - Compartilhando pasta entre host e convidado.
published: true
description: compartilhar pastas
tags: 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nw5rftsjnhgbdziixrtl.png
---

## Problema
Sábado eu tive uma surpresa que o Docker não funcionava por motivos ignorados, muita coisa estava estranha, então decidi formatar e usar o KVM para virtualizar máquinas para trabalho, escutando a ideia do meu amigo Alexandre que já trabalha assim.

Porém eu não queria utilizar um arquivo como HD gigante, então defini um arquivo pequeno, e compartilhei uma pasta, a princípio utilizei o NFS e compartilhei os arquivos, estava tudo bem, até eu precisar executar o Docker e por algum motivo ele não executar em alguns projetos, parecia algo de permissão.

Eu tentei compartilhar como "passthrough", mas não obtive exido, mas consegui usar no modo "mapped".

## Solução
No `Gerenciador de Máquinas Virtuais` adicione um `sistema de arquivos`.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nw5rftsjnhgbdziixrtl.png)

Em `Caminho de Origem` (Source Path), você coloca o caminho da sua pasta no host (máquina onde as vm estão).

O `Caminho Destino` (To path), você coloca o nome do mapeamento que irá existir dentro da VM. NÃO crie (isso mesmo não crie) esta pasta na VM.

Dentro da VM você adiciona no seu /etc/fstab o seguinte:

```
/shared /pasta-dentro-da-vm 9p trans=virtio,version=9p2000.L,accessmode=mapped 0 0 
```

OU se quiser apenas testar: 

```shell
mount -t 9p -o trans=virtio,version=9p2000.L,accessmode=mapped /shared /pasta-dentro-da-vm  
```

## Permissões

Se você tiver problemas com permissões o que provavelmente terá, você precisará conceder permissão de gravação ao grupo `libvirt-qemu` ao diretório compartilhado e todos os subdiretórios.

```shell
chgrp -R libvirt-qemu /home/shared
chmod -R g+w /home/shared
```

É isso!

Se você sabe uma forma mais simples ou quer contribuir com outras formas, será de grande valia.
JavaScript Crash Course For Beginners | 2021
Tags: javascript
Published: 2021-04-05 18:37:05

I have created a beginner-level JavaScipt Crash Course on YouTube. I must say, creating a tutorial helped me brush up on my own JS knowledge so much. 

Here is the link - https://youtu.be/-YCZPDEnbuc

{% youtube -YCZPDEnbuc %}
Guia para uso do Linux
Tags: linux, beginners, github, node
Published: 2021-04-05 18:23:27

Esse guia não é nenhuma regra, é mais uma ajuda a quem precisa aprender o básico de Linux.

# Começar pelo começo...

O Linux é um SO, gratuito e open source, baseado em Unix. Ele é como o Windows ou o Mac OS. Como é open source, você pode customiza-lo para deixar mais a sua forma.

### Distros:
Existem inúmeras distros dentro do Linux, e com isso, surgem as distros especificas. Algumas das mais conhecidas:
 * Ubuntu
 * Fedora
 * Arch
 * Debian

Existem inúmeras outras, a que particularmente eu indico para inicio é o Ubuntu, por ser mais "amigável". Se você utiliza windows, é possivel fazer uma virtual machine que rode Ubuntu ou qualquer outra distro Linux, fazer um pen drive bootável ou um dual boot.

Recomendo fortemente o canal do DioLinux! Ele tem uma porrada de conteúdos bons, para usuários desde iniciantes até os avançados. Link a seguir:

DioLinux: <https://www.youtube.com/user/Diolinux>

O criador desse S.O, **Linus Torvalds**, também é o criador do versionador de código mais conhecido e utilizado por programadores, o **git**. Como já falei em um post anterior, acredito ser bem importante aprender comandos por terminal, mexer e saber controlar a máquina é necessário para saber o que se passa. Recomendo um vídeo do Fábio Akita a respeito do Ubuntu para iniciantes e algumas aulas do curso em vídeo. Link a seguir:
* Fábio Akita: <https://youtu.be/epiyExCyb2s>
* Curso em vídeo: <https://www.youtube.com/watch?v=6nN2EglOqCM&list=PLHz_AreHm4dlIXleu20uwPWFOSswqLYbV>

_Um conselho: não se prendam apenas ao que escrevi, procurem meios do qual você se identifique também! Contribua com quem precisa de ajuda._

Vou ficando por aqui, nerds. Qualquer coisa, pode deixar um comentário ou sugestão, vou adorar ler!
Aerospike as a Backend Storage for HashiCorp Vault
Tags: aerospike, vault, nosql
Published: 2021-04-05 17:48:50


[Vault](https://www.vaultproject.io/) 1.7.0 is released, and it includes my contribution to support the [Aerospike](https://www.aerospike.com/) database as backend storage. See the [release notes](https://www.vaultproject.io/docs/release-notes/1.7.0) for more details.

From now on, Aerospike users can store their sensitive data using Vault almost seamlessly.

I will not talk about the benefits of using Vault and will jump into the installation and configuration details right away.

## Setup
First thing you’ll need is to [install Vault](https://learn.hashicorp.com/tutorials/vault/getting-started-install#install-vault) if you haven’t done this yet.
Make sure that the Vault binary is available on the PATH. See [this page](https://stackoverflow.com/questions/14637979/how-to-permanently-set-path-on-linux) for instructions on setting the PATH on Linux and Mac. [This page](https://stackoverflow.com/questions/1618280/where-can-i-set-path-to-make-exe-on-windows) contains instructions for setting the PATH on Windows.

Verify the installation worked by opening a new terminal session and checking that the vault binary is available.

```sh
$ vault version
Vault v1.7.0 (4e222b85c40a810b74400ee3c54449479e32bb9f)
```

## Configuration
Outside of development mode, Vault servers are configured using a file. The format of this file is [HCL](https://github.com/hashicorp/hcl). Let’s configure our Aerospike cluster to be the Vault’s backend storage:

```hcl
storage "aerospike" {
  hostname = "localhost"
  port = "3300"
  namespace = "test"
  set = "vault"
}

listener "tcp" {
  address     = "127.0.0.1:8200"
  tls_disable = 1
}
```

You can find more information about the Aerospike backend configuration [here](https://www.vaultproject.io/docs/configuration/storage/aerospike).

To start the server:
```sh
vault server -config aerospike_backend.hcl
```

The Vault server is up and running on the default 8200 port.

Now open a new terminal window and go through the [guide](https://learn.hashicorp.com/tutorials/vault/getting-started-deploy#initializing-the-vault) to initialize the Vault server.
It is a little bit cumbersome with all those unseals and login, but you’ll figure it out.

After the successful login, we need to enable a version 1 kv store:
```sh
vault secrets enable -version=1 kv
```

## Usage
Now is the time to try things out.

```sh
$ vault kv put kv/my-secret my-value=s3cr3t
Success! Data written to: kv/my-secret

$ vault kv get kv/my-secret
====== Data ======
Key         Value
---         -----
my-value    s3cr3t
```

Your first secret was successfully stored and retrieved from Aerospike using Vault!

---

In this short introduction blog post, we covered the setup of Vault using Aerospike as a storage backend.

The Aerospike backend supports both CE and EE and doesn’t expose all the configuration properties available. We will work to include those in future releases.

I hope you are excited about this new Vault capability. Please [let us know](https://discuss.aerospike.com/) if you encounter any issues using it.