teleren/devto huggingface dataset:
OnmiLabs - EquipeOnmi
Tags: javascript, node, reactnative, elixir
Published: 2021-09-02 01:13:03

Opa! Oi gente, venho aqui pra indicar pra vocês um canal de programação e tecnologia, a OmniLabs. Lá vemos diversos conteúdos como vídeos de Nodejs, ReactJs, React Native e até Elixir.

Canal de Programação: https://www.youtube.com/omnilabs

E um podcast de programação que se chama Pull Request.

Podcast: https://open.spotify.com/show/0dFQ9pYu6vK1i58PtbQKXl

Além do mais, temos um canal de jogos, sendo bem mais descontraído, a Equipe Omni.

Canal de Jogos e Conversa: 
link https://www.youtube.com/channel/UCVqO57zGw9zEPgHWiBBEyZg

Dá uma passada lá pra ver!

É um canal muito bom, está me ajudando bastante na minha introdução para a programação. Estou postando aqui para dar uma força também, pois o trabalho desse cara é incrível. 

Obrigada por ler até aqui! <3
9 Websites & Plateforms That I Visit Them At Least 2 Times In A Week As A Developer
Tags: productivity, beginners, codenewbie, programming
Published: 2021-09-02 00:41:18

## 9 websites & platforms that I visit at least 2 times in a week

+ [https://www.tablesgenerator.com/](https://www.tablesgenerator.com/): used for generating easily tables in different formats like HTML and markdown
+ [https://coolors.co/palettes/trending](https://coolors.co/palettes/trending) this is one of my favorites websites, It is used for choosing color palettes
+ [https://ticktick.com/webapp/](https://ticktick.com/webapp/): as a developer you need to organize your work, define your daily tasks, so this application will help you a lot to do that.
+ [https://www.google.com/calendar](https://www.google.com/calendar); for managing your time and organizing your life.
+ [https://www.typingtest.com/](https://www.typingtest.com/) for evolving your typing speed skills
+ [https://www.dailycodingproblem.com/](https://www.dailycodingproblem.com/) this site, provides your a coding problem every day
+ [https://www.hackerrank.com/](https://www.hackerrank.com/): This gives you different kinds of coding problems to improve your problem-solving skills. [11 Websites To Practice You Coding And Your Problem Solving Skills](https://dev.to/ayabouchiha/11-websites-to-practice-you-coding-and-your-problem-solving-skills-51k9) 
+ [https://stackoverflow.com/](https://stackoverflow.com/) ❤️❤️ 
+ [https://www.geeksforgeeks.org/](https://www.geeksforgeeks.org/) an amazing web application for learning programming especially data structures and algorithms.

Have a good day
What are your favorite privacy tools
Tags: privacy, security, beginners, culture
Published: 2021-09-02 00:03:41

What tools do you use on a daily basis to protect your privacy online and / or make your life a bit easier when dealing with spam and safe browsing?

My personal list:

**SimpleLogin** (note: I work with them, hence a bit biased, but it's amazing!), to create email aliases for each service I subscribe to. Easy kill switch;
https://simplelogin.io/

**BitWarden**, to store all my passwords on Mac and iPhone. I used LastPass in the past but BitWarden is open-source;
https://bitwarden.com/

**Sync**, my favorite end-to-end encrypted cloud storage. I use it to store sensitive documents I wouldn't trust Google or Amazon with. Most of my photos and non-sensitive information is still there, though, and I'm working on it;
https://sync.com/

**Wise Bank**, which in the UK provides throwaway cards (unlimited, for free), kinda like privacy.com in the UK. I pay with those online so I can't "forget" to unsubscribe from a trial or stop paying a software as the card literally won't exist anymore;
https://wise.com/

**Apple**, I switched to Mac and iPhone (not for privacy reasons, though) and I believe their OS is more secure and private. I used Linux in the past, but I think it comes to a point when we have to choose if convenience can sometimes be more important than absolute privacy, and here's my personal cross line. I wouldn't use Linux just because it's safer, it just makes my day-to-day job too much harder.

What about you? :) Which ones do you use?
Is Continuous Deployment incompatible with manual QA?
Tags: automation, cicd, continuousdeployment, continuousdelivery
Published: 2021-09-13 13:15:43

---
title: Is Continuous Deployment incompatible with manual QA?
published: true
date: 2021-09-02 00:00:00 UTC
tags: automation,cicd,continuousdeployment,continuousdelivery
canonical_url: https://jhall.io/archive/2021/09/02/is-continuous-deployment-incompatible-with-manual-qa/
---

I recently heard the claim that “Continuous Deployment is incompatible with manual QA.” As common as this belief/assumption is, I always challenge it.

First, my definition of “Continuous Deployment” (which the above mentioned claimant said he agreed with):

> The automatic deployment to production of software once it is merged into mainline.

If we agree with this definition of Continuous Deployment, and also want to do manual QA (in particular, manual acceptance testing), we have but one option: The manual acceptance tests must happen _before_ merging the code into mainline.

“But that’s not really Continuos Deployment!” some might say. “Ask the inventors of Continous Deployment!”

I didn’t ask them directly, but in the book [_Accelerate_](https://amzn.to/2Y3WjkE), which is co-authored by Jez Humble, who also co-authored the book [_Continuous Delivery_](https://amzn.to/3DggThI), it is said on this topic:

> This still leaves room for manual approvals—but once approved, all changes should be applied automatically.

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
How to add a string type annotation to a variable or a constant in TypeScript?
Tags: typescript
Published: 2021-09-02 00:00:00

---
  title: How to add a string type annotation to a variable or a constant in TypeScript?
  published: true
  tags: TypeScript
  date: Thu Sep 02 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/add-string-type-annotation-to-variables-constants-in-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-97983d6575ac2a520e4075476d776119.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/add-string-type-annotation-to-variables-constants-in-typescript)
  
To add a string type annotation to a variable or a constant, you can declare the variable or constant followed by a `:` (colon) symbol and then the type `string` in TypeScript.

For example, let's say we have a variable called `myName` and want to only have the `string` type as the values. To do that we can annotate the type `string` to the `myName` variable like this,

```ts
// add string type to a variable
let myName: string;
```

After initialization, let's assign a string value of `John Doe` to the variable `myName`. It can be done like this,

```ts
// add string type to a variable
let myName: string;

// assign a string value to the myName variable
myName = "John Doe"; // ✅ allowed
```

As you can see from the above code TypeScript allowed us to assign the string value of `John Doe` to the variable `myName` since the allowed type for the `myName` variable is a `string`.

Now let's try to assign another value of `number` type `1` to the `myName` variable to see what happens,

```ts
// add string type to a variable
let myName: string;

// assign a string value to the myName variable
myName = "John Doe"; // ✅ allowed

// assign a value of type other than string
myName = 1; // ❌ not allowed. Type 'number' is not assignable to type 'string'.
```

As you can see that the TypeScript will throw an error saying that the `Type 'number' is not assignable to type 'string'.` which is also what we want to happen.

### Bonus

Most of the time TypeScript will try to infer the type of the variable from the value it is assigned.

For example, let's declare a variable called `personName` and assign the `string` value of `Lily Roy` without actually declaring the type `string` as we did above. It can be done like this,

```ts
// Typescript infers the type from
// the value it is assigned
let personName = "Lily Roy";
```

Now if you hover over the variable `personName` we can see that TypeScript has automatically got that type of the variable `personName` is of type `string`.

Since the TypeScript has already got the type is of `string` value and whenever we try to reassign a value other than the type `string`, The compiler will throw errors like from the above.

See the execution of the above codes live in [codesandbox](https://codesandbox.io/s/add-string-type-to-variables-in-typescript-tfyu3?file=/src/index.ts).

That's all 😃!

### Feel free to share if you found this useful 😃.

---
Jasa penulisan artikel
Tags: tulisartikel
Published: 2021-09-01 23:56:35

buka jasa penulisan artikel 300 kata = 6000 saja
500 kata = 10000
keyword dan kata kunci dari kalian
anti duplikat
contoh artikel yang saya buat seperti ini
https://kupashewanternak.blogspot.com/2021/08/cara-menyembelih-atau-memotong-kelinci.html
Vue Tip // v-model on custom component input type="file"
Tags: vue, html, javascript
Published: 2021-09-01 23:53:14

Hi everyone. Let's get to the point. A few days ago I needed to use v-model in a component of my own that I needed to capture a file in an input of type file. After trying a bit, the solution was the following:

```html
<template>
  
  <input type="file" @change="onChangeFile" name="file" />

</template>

<script>
  methods: {
    onChangeFile(event) {
      this.$emit('update:modelValue', event.target.files[0])
    }
</script>

//Your component made in Vue 3
<MyInputFileComponent v-model="file" />
```
This is the easiest way to use it. If you need to capture many files you just have to go through the list of files found in the e.target.files

I share this information in case there is anyone out there looking for a solution for this scenario. Happy dev.
Listen to S6E4 of DevDiscuss: "Proof Engineering" with Talia Ringer
Tags: discuss, podcast
Published: 2021-09-01 23:20:50

---
title: Listen to S6E4 of DevDiscuss: "Proof Engineering" with Talia Ringer
published: true
description: Listen to S6E4 of DevDiscuss!
tags: discuss, podcast 
series: DevDiscuss Season 6
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dja2fgvymtdnf9l03lxc.png
---

## Listen to DevDiscuss S6E4 right on DEV:

{% podcast https://dev.to/devdiscuss/s6-e4-how-will-proof-engineering-affect-the-future-of-software-development %}

(_... or via the links below_)

_DevDiscuss is the first original podcast from DEV all about the burning topics that impact all our lives as developers._

**This week, we talk about proof engineering: a type of engineering concerned with technology that makes it easier to develop and maintain verified systems — systems that prove something is correct and can tell if components are secure to a very high degree.** 

### Hosts:
- @ben — Creator of DEV & Co-Founder of Forem
- @molly — Former Head of SRE & Engineering @ Forem
  
### Guest: 
- [Talia Ringer](https://twitter.com/TaliaRinger), Researcher & Incoming Assistant Professor at the University of Illinois at Urbana-Champaign

We hope you find this week's episode of the DevDiscuss podcast to be interesting and informative! Please let us know your thoughts in the comments below — or on Twitter ([@thepracticaldev](https://twitter.com/thepracticaldev) ).

![Atomic microphone](https://media.giphy.com/media/dW15ZwOHekcRyFpH70/giphy.gif)

---

_You can [follow DevDiscuss](dev.to/devdiscuss) to get episode notifications and listen right in your feed_ — or subscribe on your platform of choice! Plus, if you leave us a review, we'll send you a free pack of thank-you stickers. Details [here](https://airtable.com/shr8oKAIMZgdYnBxx). 

## Quick Listening Links
- [Apple Podcasts](https://podcasts.apple.com/us/podcast/s6-e4-how-will-proof-engineering-affect-the-future/id1513053883?i=1000533968572)
- [Spotify](https://open.spotify.com/episode/1dErUQG3umckWixQBo6non)
- [Google](https://podcasts.google.com/feed/aHR0cHM6Ly9mZWVkcy5kZXZwb2RzLmRldi9kZXZkaXNjdXNzX3BvZGNhc3QueG1s/episode/aHR0cHM6Ly9kZXZwb2RzLmRldi9wb2RjYXN0cy9kZXZkaXNjdXNzLzQ1?sa=X&ved=0CAQQkfYCahcKEwi43L78897yAhUAAAAAHQAAAAAQCg)
- [Listen Notes](https://www.listennotes.com/podcasts/devdiscuss/s6e4-how-will-proof-gkIJm-XOp0x/)
- [TuneIn](https://tunein.com/podcasts/Technology-Podcasts/DevDiscuss-p1324596/?topicId=165501877)
- [RSS Feed](http://feeds.codenewbie.org/devnews_podcast.xml)
- [DEV Pods Site](http://devpods.herokuapp.com/podcasts/devdiscuss/episodes/219)

---
_Acknowledgements_ 
- _@levisharpe for producing & mixing the show_
- _Our season six sponsors: [CockroachDB](cockroachlabs.com/devdiscuss) & [Scout APM](https://www.scoutapm.com/devdiscuss)!_
Preview what your metatags "look like" on google, twitter etc
Tags: html, seo
Published: 2021-09-01 23:10:07

To preview a website's go to the following website and enter in your url:

https://metatags.io/

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j5ygnrs7kdhtbc6apnpm.png)
Installing open wc
Published: 2021-09-01 22:43:26

## Installation
1. Install Node js from the site https://nodejs.org/en/ and download the 14.17.6 LTS version for Mac

2. Install yarn by opening your terminal and typing
```
npm install -g yarn
```
**you can check if yarn downloaded correctly by typing**
```
yarn --version 
```
**from your home directory.**

## Once you have created a folder to house all of your projects
You will access that folder in your terminal and type
```
run npm init @open-wc
```
You will create a hello-world boilerplate with a new project scaffold; a web component; all options checked for linting, testing, and demoing; does not use typescript; is named hello-world; and installed with yarn

## Running the web component
Type
```
cd hello-world
``` 
then type
```
npm run start
```

and you're all set!
Day 443 : Reason
Tags: hiphop, code, coding, lifelongdev
Published: 2021-09-01 22:30:59

_liner notes_:
- Professional : Had a couple of meetings. Ran into an issue that I'm trying to find a workaround for, but running into walls. I think I may be getting close, but I don't know. We'll see. My brain is tired. haha.

- Personal : Last night, went through some tracks for the radio show this week. I think I watched an episode of "Boruto", but I don't remember. haha I think my brain is really drained from trying to figure out that issue from earlier. I remember the last episode I watched, just don't remember if it was from last night or the night before. I do remember renewing the registration on my van and my Trusted Traveler program thing. The reason is because they cost me money. haha 

![Landscape of Yosemite, CA, United States with gray mountains in the distance with a green forest filling the valleys](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6tec6wiyikiyeds9ji1u.jpg)

Going to go through more tracks for the radio show. I'll also be watching the new Marvel "What If" episode while eating dinner. Maybe I'll work on my side project. I'll see if I'm still burned out from trying to figure out that blocker earlier. haha.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube MudvTxv8BF0 %}
Fixing Header Issue - (Added mobile view as well)
Published: 2021-09-01 22:16:28

**Challenge**
My current header is not dynamic. Image is also working weirdly so I needed to update image, navbar & logo.
Navbar specifically because it wasn't sharing same line with logo.
Logo was also called in CSS which i did not like. Relocated so js file can call logo along with navbar.

**Action**
Created whole new functionality for Navbar and logo. It looks same, but now Logo is align with Navbar and in same flex line.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e10tkgbhcpse4blznqng.png)

Background image was keep moving, resulting same issue as my last post. Figured out why and implemented these lines of code in css.

```javascript
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
```

and now it works great. Image stays in correct size and not showing blank background.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lcw4zl3lyjfe9fojk8ei.png)

Another issue was within a mobile view. Mobile view had empty blank line on the right side. Added this meta and it fixed the issue.

```javascript
<meta name="viewport" content="width=device-width, initial-scale=0.5" />
```

Implemented navbar feature where it can hide menu if user clicks on the bar icon.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lzvgzpbwovki2ctfhpbh.png)

reference links:
dynamic navbar: https://0ver-grow.tistory.com/933

**Result**
New header works great for both web and mobile!
CSS Skill Verified By HackerRank
Tags: webdev, programming, hackerrank
Published: 2021-09-01 21:59:00

I just earned CSS skill certificate via 
@HackerRank
. Get your skills certified and show the world what you can do! #skilloverpedigree
https://hackerrank.com/certificates/0b01d3f7a05e
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xvy59ulb5ghpctkb8hin.png)
#DEVCommunity #codinglife #webdevelopment
Docker Desktop Changes
Tags: docker, explainlikeimfive, discuss, eli5
Published: 2021-09-01 21:54:37

---
title: Docker Desktop Changes
published: true
description: Docker updated their terms of usefor Docker Desktop
tags: docker, explainlikeimfive, discuss, eli5
//cover_image: https://direct_url_to_image.jpg
---

Docker just updated their terms of use for Docker Desktop that requires a paid subscription for companies that have more than 250 employees or $10M in annual revenue. Some people have some feelings about this that I don’t quite understand. Can someone break it down for me?
useState vs. useSuperState
Tags: react, performance, javascript, webdev
Published: 2021-09-01 21:45:42

useState is a great hook that allows you to manage the state of your React function component.

During the life of your component, the state needs to change according to certain conditions.

Suppose you have an prop that came outside of your component. And you want the state to change according to the value of that prop. You regularly need the help of React useEffect hook to update the state according to the value of the prop. . .

Problem: Your state will not be updated immediately, and you will need to re-render the entire component.

In recent days I have uploaded a new library called hooks-for-react. It contains my collection of hooks, for public use.

One of the main hooks in my collection is the useSuperState hook. It allows you other options to change the state alongside the setState operation.

This adds an option to change the state according to the dependency list and set the state to the value returned from the factory, just like useMemo does!

Unlike useMemo you also have access to the previous state that you can use within the factory function, to determine the end value.

It also gives you access to the current state using a ref object. That means you can use it just like you use ref.

This will give you access to the current state within other processes that take place outside the current scope of the component, such as timers etc.

check this out!
https://www.npmjs.com/package/hooks-for-react
NestJS #2 : มาสร้าง api  ด้วย NestJS กัน Part 1
Tags: npm, nestjs, node, nodejsframeworks
Published: 2021-09-01 21:25:09

[บทความที่แล้ว](https://dev.to/thuttaphong/nestjs-1-nestjs-2k5a) เราได้รู้จัก NestJS ในเบื้องต้นกันไปแล้ว ในบทความนี้เราจะมาทำ api แบบง่ายๆ ด้วย NestJS กัน


###คำสั่ง NestJS CLI เบื้องต้น###
อันดับแรกเราจะมาทำความรู้จักคำสั่ง Command Line Interface (CLI) NestJS เบื้องต้นกัน

**คำสั่งสร้างโปรเจคขึ้นมาใหม่**
`nest new project-name`  คำสั่งในการสร้างโปรเจคขึ้นมาใหม่

**คำสั่ง generate files**
`nest generate <schematic> <name> [options]`
`nest generate mo <name>` คำสั่ง generate module
`nest generate s <name>` คำสั่ง generate service
`nest generate co <name>` คำสั่ง generate controller
`nest generate cl <name>` คำสั่ง generate class
`nest generate interface <name>` คำสั่ง generate interface

สามารถศึกษาเพิ่มเติมได้ที่ [NestJS CLI](https://docs.nestjs.com/cli/usages#cli-command-reference)


###ขั้นตอนการสร้าง API###

**1.ทำการสร้างโปรเจค**

`nest new project-name`

ให้เราสร้างโปรเจคขึ้นมาใหม่ด้วยการใช้คำสั่ง `nest new cat-api`

**2.ทำความรู้จักโครงสร้างไฟล์ของโปรเจค**

หลังจากที่เราสร้างโปรเจคขึ้นมาใหม่แล้วให้ทำการเปิดด้วย VSCode เราจะได้โครงสร้างไฟล์แบบนี้ด้วย

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s5f4u2rfu70i2tebk7co.png)

**node_module** เป็นที่เก็บไฟล์แพคเกจต่าง ๆ ที่ใช้ในโปรเจคเรา

**src** เป็นโฟลเดอร์หลักที่เราจะมาเขียนโค้ดกัน โฟลเดอร์ src จะประกอบไป. 
        ด้วยไฟล์หลักต่างๆ ของ NestJS นั้นก็คือ main, module, service, 
        controller

**test** เป็นโฟลเดอร์ที่เอาไว้ทำ e2e(end-to-end) tests

**.eslintrc.js** ESlint เป็นตัวที่จะแนะนำให้เราเขียนโค้ดตามกฎมาตรฐาน 
                 ต่างๆ ซึ่งเราสามารถกำหนดกฎเองได้ที่ไฟล์นี้

**.gitignore** เป็นการกำหนดละเว้นไฟล์ที่เราไม่ต้องการให้ขึ้นไปอยู่บน git 
               repository ของเรา

**.prettierrc** ตัวช่วยที่จะช่วยให้การเขียนโค้ดตามกฎมาตรฐาน ให้สวยงาม 
                อ่านง่ายขึ้น เราสามารถกำหนดกฎมาตรฐานเองได้ในไฟล์นี้

**nest-cli.json** เป็นการกำหนดค่า directory ให้ NestJS CLI 
                  สามารถกำหนดค่าใหม่ได้โดยการเปลี่ยนที่ sourceRoot 

**package.json** เป็นไฟล์ที่เก็บข้อมูล meta data, node package, 
                 script ต่างๆ ที่ใช้ในโปรเจค 

**README.md** เป็นไฟล์ที่เอาไว้อธิบายรายละเอียดของโปรเจค

**tsconfig.build.json** กำหนดค่าในการ build typescript

**tsconfig.json** ใช้กำหนดค่าให้ tsc compiler จัดการกับไฟล์ .ts ในโปรเจค 

**yarn.lock** ตอนสร้างโปรเจคถ้าเราเลือก yarn จะได้ yarn.lock ส่วน npm จะได้ package-lock.json เป็นไฟล์ที่เก็บข้อมูล node package ต่างๆ ที่เราใช้ในโปรเจค และล็อกเวอร์ชันของ package


เดียวบทความจะยาวจนเกินไป ขอไปเขียนต่อ part ที่สอง ในบทความถัดไปนะครับ
Pixel Gun World
Tags: gamedev, unity3d, csharp, modding
Published: 2021-09-01 21:17:03

I'm working on making Pixel Gun World available to play again! If you don't know what Pixel Gun World is, it's a first person shooter game for computer that got "deleted" in 2016. Currently, you can't play the game because you get an error that crashes the game, but using dnSpy and AssetRipper I'm trying my best to make it work again without any issues! Feel free to ask any questions by the way.
Easy Mouse Events
Tags: javascript, events, tricks
Published: 2021-09-01 21:09:34

{% codepen https://codepen.io/ZevanRosser/pen/yLXOpqe  default-tab=js,result %}

This is a powerful little pattern for managing mouse/touch events. Rather than assigning many listeners, this snippet has one listener on the document. Anytime the page is clicked, we look at the event targets `classList` and use its first value as a key in an actions object.

I wrote up a little <a href="https://snippet.zone/2021/09/01/easy-mouse-events/">more detail here.</a>

_See more stuff like this over @ [Snippet Zone](https://snippet.zone/)_
Pretty Print JSON in Console
Tags: javascript, json, dev
Published: 2021-09-01 21:05:19

{% codepen https://codepen.io/ZevanRosser/pen/powypav default-tab=js,result %}

This snippet pretty prints json in the console. This is super useful for in-browser editors of various types. I've used it many times over the years...

_See more stuff like this over @ [Snippet Zone](https://snippet.zone/)_