teleren/devto huggingface dataset:
ETSOO Free WYSIWYG HTML Editor practice from zero
Published: 2022-03-07 07:30:19

In order to complete a CMS system for ETSOO, we need a WYSIWYG HTML editor for content publish. There are a lot of components or libraries to do that but no one full covers the basic requirements we want. So we decided to continue a previous project we did serveral years ago called "EOEditor" and apply the new technologies we have to refactor it and make it a free option for the market. Leave all steps here to demostrate the pathways from zero to a workable library for your reference.

Github: https://github.com/ETSOO/EOEditor

**Step 1: Init the package**
'npm init' to initialize an NPM package. 'npm init -y' will not ask any question and produce the package.json file with default values. 'npm init --scope=<your_org_name>' to create an Org scoped package.
`npm init --scope=etsoo`
Changed package name to "@etsoo/editor"

**Step 2: Setup TypeScript**
`npm install --save-dev typescript ts-loader`
`npx tsc --init`
Changed target to "es2019".

**Step 3: Setup Prettier**
https://prettier.io/docs/en/install.html
`npm install --save-dev --save-exact prettier`
Created .prettierignore and .prettierrc two files.

**Step 4: Setup testing server**
https://webpack.js.org/api/webpack-dev-server/#installation
`npm install --save-dev webpack webpack-cli webpack-dev-server`
Configue webpack to work with TypeScript with webpack.config.js https://webpack.js.org/guides/typescript/, make sure insert the eoeditor.js(configured in output/filename) to index.html to enable "Live Reloading".

**Step 5: Editor as a resuable component**
Create it as a custom HTML element. https://developers.google.com/web/fundamentals/web-components/customelements, https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements 

**Step 6: Commands**
Even thougth the 'executeCommand' is depreciated, no alternative is available. Just follow the traditional way. https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

**Step 7: Dynamic styles with var**
Setup variables with same template to support dynamic update for different instances. https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

**Step 8: Editor with a Div or IFrame**
At the very begining, I took the Div but gave it up later. Because a Div in same document with the buttons could not hold the selection when move the focus to dialog inputs.

**Step 9: Image edit**
It's a good idea to have some client image edit functions to support basic rotate/resize features. It's done with the library http://fabricjs.com/.

After took over 2 months of my free time, here is the first screen shot of the release.

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

**Other points**
- Highlight programming codes with https://highlightjs.org/usage/
create-react-app but for Python 🐍⚡
Tags: showdev, python, productivity
Published: 2022-03-07 07:28:18

I was bored, Sunday evening. I decided to make this auto-updating twitter banner using python (I've already done it.) 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3f06zhbej393xcvw4em3.png)
 
But you see, I'm lazy. Really lazy. I didn't even want to make the main.py file and get straight to the coding.

> If you have to do the same thing more than 5 times, automate it. 

And that's what I ended up doing. as I'm learning Rust, this could also be a nice Rust project that helps me with my everyday small projects. 

Here's what create-python-program does:
- Initialises virtual environment
- Makes source directory and main.py file
- Makes README.md, .gitignore
- Initialises git repository
- Makes requirements.txt file 
- Creates .env file 

It's cross platform too!
![demo image](https://images-ext-1.discordapp.net/external/X8TFUouvv7QuUVaiSasWnj-ice-n8J8a31ZUTnu1RJA/http/img.dhravya.dev/r/l0fljbeby0a.png?width=1249&height=664)


## Installation and Usage
The project is available at crates.io, and you can install it easily by this command:

```
cargo install create-python-project
```

Usage:
```
create-python-project
```

And yes, that's it!
Let me know what you think in the comments below! I know this project isn't THAT useful but as long as it saves one second of my time, it's worth it lol
11 Funny Excuses That Programmers Use Daily
Tags: softwaredevelopment, webdev, humor, programming
Published: 2022-03-07 13:31:54

---
title: 11 Funny Excuses That Programmers Use Daily
published: true
date: 2022-03-07 07:16:06 UTC
tags: softwaredevelopment,webdevelopment,humor,programming
canonical_url: https://www.upbeatcode.com/productivity/11-funny-excuses-that-programmers-use-daily/
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0cvwh8edy45sn1v6oqu5.jpg
---

We’re All Guilty of These

[Continue reading on JavaScript in Plain English »](https://javascript.plainenglish.io/11-funny-excuses-that-programmers-use-daily-e20e3ae16180?source=rss-b970c961c4e1------2)
Hybrid Rendering: the secret way to smoothly test Vue.js components
Published: 2022-03-07 13:33:04

---
title: Hybrid Rendering: the secret way to smoothly test Vue.js components
published: true
date: 2022-03-07 07:00:00 UTC
tags: 
canonical_url: https://vuedose.tips/hybrid-rendering-the-secret-way-to-test-components-in-vuejs/
---

_Originally posted on [VueDose.tips](https://vuedose.tips/hybrid-rendering-the-secret-way-to-test-components-in-vuejs)_

In the article [Deep vs Shallow Rendering in Vue.js Tests](https://vuedose.tips/tips/deep-vs-shallow-rendering-in-vuejs-tests) I showed you how deep and shallow rendering works to create Vue.js tests.

Each of them have their own use case and it could depend in your way of testing and architecting as well.

But… why not having the best of both worlds? Let’s get into Hybrid Rendering.

The **Hybrid Rendering** consists on stubbing only part of the child components on a test.

For instance, taking back the example from the tip, let's add another component called `FoodList` to the `App` component:

```html
<template>
  <div>
    <h3>User List</h3>
    <UserList :users="['Rob Wesley']" />
    <FoodList :foods="['Tomatoes', 'Carrots']" />
  </div>
</template>

<script setup>
  import UserList from "./UserList";
  import FoodList from "./FoodList";
</script>
```

Assuming `FoodList` has a similar implementation to `UserList`, and we're using deep rendering, this test:

```js
import { mount } from "@vue/test-utils";
import App from "@/App";

describe("App.vue", () => {
  it("Deep renders the App component", () => {
    const wrapper = mount(App);
    expect(wrapper.html()).toMatchSnapshot();
  });
});
```

will result in the following snapshot:

```html
<div>
  <h3>User List</h3>
  <ul>
    <li>
      Rob Wesley
    </li>
  </ul>
  <ul>
    <li>
      Tomatoes
    </li>
    <li>
      Carrots
    </li>
  </ul>
</div>
```

Now, let's say that for whatsoever reason you want only to deep render `UserList`, but not `FoodList`.

In that case, you can use the `stubs` option of the `mount` method in order to indicate which components must be stubbed:

```js
import { mount } from "@vue/test-utils";
import App from "@/App";

describe("App.vue", () => {
  it("Hybrid renders the app component", () => {
    const wrapper = mount(App, { stubs: ["FoodList"] });
    expect(wrapper.html()).toMatchSnapshot();
  });
});

```

Notice I'm stubbing `FoodList`. That's the way to apply hybrid rendering in a test, or partial shallow/deep rendering if you're more comfortable with that name.

The generated snapshot in this case will be like:

```html
<div>
  <h3>User List</h3>
  <ul>
    <li>
      Rob Wesley
    </li>
  </ul>
  <foodlist-stub foods="Tomatoes,Carrots"></foodlist-stub>
</div>

```

Keep in mind that this won't work with `shallowMount`, since it already stubs all child components. So make sure to use `mount`.

Do you have any case in mind where this technique can be useful in your projects? Let me know on [Twitter](https://twitter.com/vuedose)!

That's it for today's tip!

Stay cool 🦄
One color palette a day with example. - 002
Tags: webdev, uiweekly, design
Published: 2022-03-07 06:52:03

www.colorsandfonts.com

## Color and typography for Web Developers and Digital Designers.

From today, I will sharing 1 Color palette a day as I did before, when I started Colors & fonts.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/diz8q905vhrnsv5e5p9x.jpeg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t4r4w04nfxtzo5azfw47.jpeg)


![color 002](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5f35j3g45fwhs8a4ynpj.png)


You will find them here, [Dribbble](https://dribbble.com/MichaelAndreuzza), [Instagram](https://www.instagram.com/apes_of_london/), [Pinterest](https://pin.it/w18zxbr) and [Twitter](https://twitter.com/Mike_Andreuzza).

Since 2017 - 2022
KOps using Gossip DNS
Tags: kubernetes, aws, devops, tutorial
Published: 2022-03-07 06:37:59

### KOPS?? you read it right! Kops with Gossip DNS
So I want to apologies for posting this late. Anyways without any delay let's get started.


## What is KOPS ?
let me borrow this line from the official definition,
"it's the kubectl of K8s clusters"

I like this line very much coz it's the simplest form that can make you understand what is KOps.

## Use Case of KOps
Suppose you wanted to create a self managed cluster but don't want to use the kubeadm and managed the infrastructure etc.
KOps is the answer to all of those queries.

It creates the Production grade Cluster to use for Development/Testing or just fun

## To create Cluster you need 2 Things
> Cloud Account (AWS ,GCP ,Azure etc).
> A DNS/hostname/website anything you wanna call it.

But most of us don't want to buy or own a website name neither we want to buy a domain name so what can we do to solve this 
## Gossip DNS comes into play.
you can choose anyname but it must end with '.k8s.local' and you're ready to go.

## Lets talk about Cloud Account
So here we need the admin access coz we need to create user and give it the permission, you can check the permission from the official doc [here](https://kops.sigs.k8s.io/getting_started/aws/). 

You also need a S3 bucket, so that KOps can save the cluster configuration on the cloud so that even other member of your team can use the same configuration to create their own cluster.
**"NOTE: Bucket Versioning need to be enable & Bucket should be in us-east-1 other wise you need to do some more steps"**

and you're done just run
`kops create cluster --state <your-bucket-name> --name <name-of-your-cluster>`

you can set these flag into env for easier use

After running the command it will show you the config file in which everything is mention 

You just need to run the same command with --yes
`kops create cluster --state <your-bucket-name> --name <name-of-your-cluster> --yes`

Saying it will create production grade cluster is a little bit off from my point of view but there are 2-3 things you need to do before you can hand it over to someone like 
> Setting up metric server in K8s
> Setting the config file expiry date longer 
> Installing the CNI
 
**NOTE: Its better to specify the CNI in the starting, when we are creating the config file for our cluster**

Otherwise it's a mess to configure the CNI coz it need to match the CIDR of k8s, for me I have to delete the cluster and create it again coz I didn't have anything critical over there. 
So choose it first


You can check the about CNI and metric server if you just google it with KOps as keyword you can get everything.

### And Thanks For Reading the long Article guys 
You can checkout all the command flag from the official docs
I have made this for article for the **GOSSIP DNS** mostly coz I wasn't able to find any article about it.

Read every bit of the article coz it helps to setup everything and feel free to ask any question or error I'll try my best to solve them.
Why is Coding Pixel Perfect Designs so painful?
Tags: developer, flutter, discuss, productivity
Published: 2022-03-07 06:16:52

Design collaboration tools have become increasingly popular in the last years.  Designers have greatly benefited from tools such as Figma to complete their work in an increasingly intuitive, organized, easy and quicker manner. Collaboration with other functions in the business like marketing or engineering has also dramatically improved. As a developer though, there is one thing I am still bitter about – Implementing Pixel perfect Designs.

I have extensive experience in software development and trust me, there are not many things that make me as frustrated as endless iterations of a pixel perfect design implementation. I am outlining my reasons below:

**1)Autonomy–** Everybody likes to have some degree of self-government when it comes to work. When I spend so much time implementing small design changes in web/mobile apps I feel like I have been stripped out of my professional freedom. This just gets multiplied when as a team we are not using cross platform frameworks.

**2)Understanding –** I strongly believe in the massive value add of designers’ work, however, I need to admit that I sometimes do not understand certain iterations I get asked for. I do not demand to be explained exactly all the reasons for every change, but as many people in the workplace, us developers also appreciate being involved in the process and being able to contribute in a timely manner.

**3)Professional Development –** Have you ever wondered why more experienced developers generally shy away from front-end development? Yes, I am generalizing, but the continuous development of skills and education it takes to be a successful back-end developer are greater than what it takes to be a front-end developer. Back-end provides you with a longer steep learning curve, something that definitely does not come with implementing pixel perfect designs.

These are my experiences and would love to hear what are your thoughts. I, in the meanwhile, am working on a solution to automatically convert Figma designs into Flutter widgets. Wish me luck!

https://codis.io/
Kubernetes CD/CI en Gitlab
Tags: gitlab, devops
Published: 2022-03-07 06:10:05

Mediante el agente de kubernetes de Gitlab podemos integrar nuestro repositorio con nuestro cluster de tal forma que podremos desplegar en este la última versión de nuestra aplicación de una forma desatendida.

## Objetivo

Prueba de concepto para desplegar mediante CD/CI un proyecto Gitlab en mi cluster K3S

## Requisitos

- Un cluster de kubernetes y acceso con privilegios al mismo
- Una cuenta de Gitlab
- Un proyecto que desplegar

## Preparación

- crea el proyecto git 
- crea un directorio .gitlab/agents/my-k3s
- crea un fichero *vacío* .gitlab/agents/my-k3s/config.yaml
- sube los cambios al repositorio
- en el menú de Gitlab Infraestructura/Kubernetes crea un agente nuevo (Install a new agent) 
y selecciona el que has creado (en este caso my-k3s)
- copia el comando `docker run ....` que aparece en el popup para instalar el agente en tu cluster

Si todo va bien en la lista de agentes que aparecen en esta configuración aparecerá el tuyo como
"conectado" a los pocos segundos

Ahora ya tienes dialogando a tu cluster con Gitlab y puedes hacer que un pipeline ejecute comandos
desde Gitlab en tu cluster

## Proyecto

Vamos a desplegar en nuestro cluster un "WhoAmI" :


```
---
apiVersion: apps/v1
kind: Deployment
metadata:
  name: whoami-deployment
  labels:
    app: whoami
spec:
  replicas: 3
  selector:
    matchLabels:
      app: whoami
  template:
    metadata:
      labels:
        app: whoami
    spec:
      containers:
        - name: whoami
          image: containous/whoami:latest
          ports:
            - containerPort: 80
          volumeMounts:
            - mountPath: /data
              name: mn-eess
      volumes:
        - name: mn-eess
          persistentVolumeClaim:
            claimName: 'mn-eess'
---
apiVersion: v1
kind: Service
metadata:
  name: whoami-service
spec:
  selector:
    app: whoami
  ports:
    - protocol: TCP
      port: 80
      targetPort: 80
---
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: whoami-ingress
spec:
  rules:
  - http:
      paths:
      - path: /testpath
        pathType: Prefix
        backend:
          service:
            name: whoami-service
            port:
              number: 80
```


Creamos el fichero `whoami.yml` y lo añadimos en el repositorio

## Desplegando

Añadimos al fichero `gitlab-ci.yml` donde estan definidos nuestros jobs para construir y desplegar la aplicación
un job nuevo `deploy` (en este caso no hay aplicación, simplemente vamos a desplegar el yml anterior):

```
 deploy:
   image:
     name: bitnami/kubectl:latest
     entrypoint: [""]
   script:
   - kubectl config use-context jorge-aguilera/k3s-agent:my-k3s
   - kubectl get pods
   - kubectl apply -f whoami.yml
   - kubectl get pods
```

"Simplemente" configuramos a kubectl para que use nuestro agente (un fichero vacío!!!! ni idea de donde está la magia de Gitlab)
y desplegamos el yml. Previamente hago un get pods para ver los pods de mi cluster local antes de aplicar el fichero y los que 
hay despúes


## Código

El proyecto de ejemplo se encuentra alojado en https://gitlab.com/jorge-aguilera/k3s-agent/
How to conduct UAT?
Tags: uat, uattesting, uattest
Published: 2022-03-07 06:00:24

What is User acceptance testing (UAT)?

In this testing method, the end-user is responsible to test the software product or application and then provide their valuable feedback. The feedback is provided based on how well the software
product or application is in terms of functionality, performance and user experience.

**[Following are the five steps for conducting UAT](https://testingxperts.com/blog/uat-testing):**

**1. Create a strategic plan:** A specific criteria needs to be defined and written down so that it can be used to decide that a certain piece of software is completed. “Definition of Done” (DoD), is the name given to this type of checklist and is a term that has been popularized by Scrum. All the team members must know what ‘done’ means.
**2. Analyze the requirements thoroughly:** Requirements for each feature needs to be written down that need to be tested. These feature related requirements can be collected in the form of user
stories by organizations. The medium and exact artifacts might vary for these requirements. The requirements need to be captured for each of the features of the application.
**3. Test cases need to be created:** A sequence of steps, with each step having a definite output is what the test case stands for. One usage scenario of the application needs to be covered for each test case. A user or representative can perform a series of actions and then check whether the program is behaving as per the expectations.
4. Initiate the testing process: The tests need to be performed. The specified actions will be executed by the tester for each one of the test cases and hence the results are recorded. If a defect
has been found by the user, it needs to be fixed as soon as possible. Then, the test is being performed by the user again.
5. Sign-off process: The customer representative/client/user will sign-off when everything is working as expected. This also means that the application meets the stated requirements and is ready for
use.
Text to speech, It's so easy !
Tags: javascript
Published: 2022-03-07 05:58:52


[original article](https://maqib.cn/blog/text-to-vioce)

Hello, everyone, I am Maik. In the past two days, I have been studying the function of text-to-speech. Sometimes I am worried that my speech is not standard. For example, if I want to record a video, improvisation may get stuck. At this time, we can prepare the text first and then use artificial intelligence to generate audio. Let's share my research results below!

## Text To Speech

I use the recently popular WebRTC_API to record

## Use

[chrome install tampermonkey](https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=zh-CN)

[install scripts](https://greasyfork.org/zh-CN/scripts/440926-%E5%BE%AE%E8%BD%AFtts-%E5%BD%95%E9%9F%B3%E6%8F%92%E4%BB%B6)

Step 3: Enter the text you want, click play first, and then click start to record, click stop recording, and then you can download the audio file.

![Microsoft's TTS  demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/422kglfvdypmhnln8mgj.png)
 

## Summary

1、Currently, due navigator.mediaDevices.getDisplayMedia() Can't directly record the sound of the computer，The computer must put the sound outside and then record, so the recording needs to find a quiet environment.

2、Sometimes the network speed is not good and may get stuck. You need to find a better network，

The above is the whole content of this article. I hope this article will be helpful to everyone. You can also refer to my previous articles or exchange your ideas and experiences in the comment area. Welcome to explore the front end together.

[1]Alibaba Cloud speech synthesis: https://ai.aliyun.com/nls/tts

[2]Speech synthesis of Tencent Cloud: https://cloud.tencent.com/product/tts

[3]Microsoft's TTS: https://azure.microsoft.com/zh-cn/services/cognitive-services/text-to-speech/#overview

[4]Microsoft's TTS documentation: https://docs.microsoft.com/zh-cn/azure/cognitive-services/speech-service/speech-synthesis-markup?tabs=csharp#specify-paragraphs-and-sentences

[5]My script address: https://greasyfork.org/zh-CN/scripts/440926-微软tts-录音插件
Web 3.0 vs Web 2.0
Tags: web3, web2, programming
Published: 2022-03-07 05:57:00



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

Hi, I recently ventured into the web3 space and would like to share with you the difference between web3.0 and web2.0


## What's Web3.0

> **Web3.0** is a fast growing iteration of world wide web based on blockchain technology. Web3 has to do with websites using blockchain technologies.

## What's Web2.0

> **Web2.0** is an iteration of world wide web but without blockchain technology.



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


**Web3.0 vs Web2.0**

1. Web 3.0 will provide access to connected data in a decentralised way **VS** Web2.0, which primarily stores data in centralised locations.


2. Web 3.0 payment apps require no personal data and can't prevent payments **VS** Web2.0 Payment service may decide to not allow payments for certain types of work.


3. Web 3.0 is decentralised, which means rather than controlled by governments and corporations, as is the case with today’s internet, it's not **VS** Web2.0 is centralised; data can be manipulated by individuals, governments and corporations.



**Some examples of web 3.0 applications**
Let’s look at some examples of web 3.0:

- [Bitcoin](https://bitcoin.org/en/) – The original cryptocurrency has been around for more than ten years, and the protocol itself is decentralised, although not all of its ecosystem is.  

- [Diaspora](https://diasporafoundation.org/) – Non-profit, decentralised social network


- [OpenSea](https://opensea.io/) – A marketplace for buying and selling NFTs, itself built on the Ethereum blockchain

- [Uniswap](https://uniswap.org/) – Decentralised cryptocurrency exchange

**Examples of web 2.0 applications**
Web 2.0 applications are not decentralised, data can be manipulated, some examples of web 2.0:

- Facebook
- Dev.to 
- Twitter

[Blockgames](https://blockgames.gg/)

[Nestcoin](https://nestcoin.com/)

[Zuri](https://zuri.team/)