teleren/devto huggingface dataset:
Color Theory
Tags: design, ui, tutorial, beginners
Published: 2020-09-27 11:44:35

Knowing **Color Theory** can help you pick better colors. Thing's like what is the difference between primary, secondary and tertiary colors, why should I use harmonious colors to design websites and how to pick such complementary colours!

{% youtube UgSaRcANLpY %}
<center>[Youtube: Color Theory](https://youtu.be/UgSaRcANLpY )</center>

Things that will be covered include:
- Color Theory
- Primary Colors
- Secondary  and Tertiary Colors
- Hue, Saturation
- Tint, Shade
- Temperature
- Color Psychology

## Follow and support me: 
Special thanks if you subscribe to my channel :)
* [🎞️ Youtube](https://www.youtube.com/channel/UCvM5YYWwfLwpcQgbRr68JLQ?sub_confirmation=1)
* [🐦 Twitter](https://twitter.com/intent/follow?screen_name=adrian_twarog)
Back-end Developers RoadMap❤
Tags: javascript, react, database, github
Published: 2020-09-27 11:19:32

Roadmap for Back-End Developers💕

#### Internet

1. How does the internet work?
2. What is HTTP?
3. Browsers and how they work?
4. DNS and how it works?
5. What is Domain Name?
6. What is hosting?

#### Basic Front-end Knowledge

1. HTML
2. CSS
3. JavaScript

#### OS and General Knowledge

1. Terminal usage
2. How OSs work in general
3. Process Mgt.
4. Threads & concurrency
5. Basic terminal commands
6. Memory mgt.
7. Interprocess comm.
8. I/O mgt.
9. POSIX basics
10. Basic networking concepts

#### Learn a Language

`Make sure to learn it fast and clear. Core details about its runtime e.g concurrency, memory model etc.`

1. Java
2. Python
3. PHP
4. C#
5. Javascript
6. Ruby
7. Rust
8. Go

#### Version Control System

1. Basic usage of Git
2. Repo hosting services
    I. GitHub
    II. Gitlab
    III. Bitbucket
#### Relational Databases

1. MySQL
2. PostgreSQL
3. MariaDB
4. MS SQL
5. Oracle

#### NoSQL Databases

1. MongoDB
2. RethinkDB
3. CouchDB
4. DynamoDB

#### More About Databases

1. ORMs
2. ACID
3. Transactions
4. N+1 Problem
5. Data Replication
6. Sharding Strategies
7. CAP Theorem
8. Database Normalisation
9. Indexes and how they work

#### Learn About APIs

1. REST
2. JSON APIs
3. HATOAS
4. Open API Spec and Swagger
5. Authentication
6. GraphQL

#### Caching

1. CDN
2. Server-side
    I. Redis
    II. Memcached
3. Client-side


#### Web Security Knowledge

1. Hashing Algorithm 
 * MD5 and why not to use it
 * SHA Family
 * Scrypt
 * Bcrypt
2. HTTPS
3. Content Security Policy
4. CORS
5. SSL/TLS
6. OWASP Security Risk

#### Testing

1. Integration Testing
2. Unit Testing
3. Functional Testing

#### CI/CD

1. Jenkins
2. GitLab
3. CircleCI
4. Bamboo
5. TeamCity
6. Travis CI
7. Buddy


#### Design and Development Principles

1. SOLID
2. KISS
3. YAGNI
4. DRY
5. GOF Design Patterns
6. Domain-Driven Design
7. Test-Driven Development

#### Architectural Patterns

1. Monolithic
2. Microservices
3. SOA
4. CQRS and Event Sourcing
5. Serverless

#### Message Brokers

1. RabbitMQ
2. Kafka

#### Containerization

1. Docker
2. rkt
3. LXC

#### Web Servers

1. Nginx
2. Apache
3. Caddy
4. MS IIS

#### Building For Scale

1. Migration Strategies
2. Horizontal vs Vertical Scaling


![alt text][logo]

[logo]: https://i.imgur.com/jkL6P3l.jpg "Logo Title Text 2"
Stuntcorgi: Your Ultimate Place to Buy Virtual Reality Headset
Published: 2020-09-27 10:56:31

The Stuntcorgi is an online review site to find any information in the easiest way about Virtual Reality (VR). With this portal, you will find out exact information about [VR Headsets](https://stuntcorgi.xyz/) and related products without wasting too much of your time.

Virtual reality is a simulated experience that can be similar to or completely different from the real world. Applications of virtual reality can include entertainment and educational purposes.
Golang HTML Template ParseFiles and Execute
Tags: go, html, css
Published: 2020-09-27 10:00:37

Golang HTML Template ParseFiles and Execute, parses the HTML Files, and then Execute it to allow us to display dynamic data with the help of placeholders, that can be replaced with the values at the runtime, by the template engine. The data can also be transformed according to users’ needs.

##Golang Template HTML
First, create an HTML file inside the templates directory.
```
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Go Template</title>
</head>

<body>
    <h1>Hello, {{.Name}}</h1>
    <p>Your College name is {{.College}}</p>
    <p>Your ID is {{.RollNumber}}</p>

</body>

</html>
```

The index.html file is the template that we will be using in this example. The template has three placeholders `{{.Name}}`, `{{.College}}`, and `{{.RollNumber}}`, whose value will be placed by the template engine at the runtime.

##Golang Templates ParseFile and Execute
```
func renderTemplate(w http.ResponseWriter, r *http.Request) {
	student := Student{
		Name:       "GB",
		College:    "GolangBlogs",
		RollNumber: 1,
	}
	parsedTemplate, _ := template.ParseFiles("Template/index.html")
	err := parsedTemplate.Execute(w, student)
	if err != nil {
		log.Println("Error executing template :", err)
		return
	}
}
```
In the render template Function first, the student struct is initialized with values.

The Template is then parsed using the ParseFile() function from the html/template package. This creates a new template and parses the filename that is passed as input. This is not necessary to use only HTML extension, while parsing templates we can use any kind of extension like gohtml, etc.

The Parsed template is then executed and the error is handled after that.

Read whole [Golang HTML Template](https://hackthedeveloper.com/golang-html-template-parsefiles-and-execute/) from the original post.
T3MPL - open source website generator
Tags: opensource, html, webdev, news
Published: 2020-09-27 10:17:22

T3MPL is a super simple static website generator. To generate a website you need just a browser. Choose a website template and edit it by T3MPL Editor. In 3 minutes you will get a final website zip file. You need only upload generated files to your server.

✨ Online editor, free templates: http://t3mpl.n4no.com/
⚙️ GitHub: https://github.com/b4rtaz/t3mpl-editor

![T3MPL](https://dev-to-uploads.s3.amazonaws.com/i/9hswqpzi05f5hff5p63f.jpg)
วิธีใช้ Font ในเครื่องบน Google Docs / Sheets / Slides
Tags: tutorial, gsuite, googledocs
Published: 2020-09-27 10:16:27

โดยปกติแล้ว เอกสารใน Google Drive ทั้ง Google Docs, Google Sheets และ Google Slides จะสามารถใช้ Font ที่มีอยู่ใน [Google Fonts](https://fonts.google.com/) เท่านั้น ผ่านทางเมนู **More fonts**

![เมนู More fonts](https://dev-to-uploads.s3.amazonaws.com/i/bhwsjlypqpdinsr6leu6.png) 

โดย font ที่รองรับภาษาไทยนั้น คือ [13 fonts แห่งชาติ](https://gsuiteupdates.googleblog.com/2019/02/expanded-thai-fonts-editors.html) ดังนี้

- Bai Jamjuree
- Chakra Petch
- Charm
- Charmonman
- Fahkwang
- Kodchasan
- KoHo
- Krub
- K2D
- Mali
- Niramit
- Sarabun
- Srisakdi

โดยที่ถูกใช้มากที่สุดน่าจะเป็น _Sarabun_ แต่ _Sarabun_ นี้ขนาดตัวอักษร (px) จะไม่ตรงกับ _TH Sarabun PSK_ ที่นิยมใช้ใน Microsoft Word

เราจึงมีอีกวิธีที่สามารถนำบาง fonts ที่มีอยู่ในเครื่องของเรามาใช้ได้ 😇 ภายใต้เงื่อนไขว่า

1. font นั้นเป็น [font ที่ Google **รองรับ**](#fonts-ที่-google-รองรับ) ซึ่งแน่นอนว่ารองรับ _TH Sarabun PSK_
1. [ปรับภาษาของเอกสาร](#ปรับภาษาของเอกสาร)เป็นภาษา**ไทย**
1. เครื่องที่เปิดเอกสารนั้น ต้องมี font นั้น**ติดตั้งอยู่** และถ้าไปเปิดเครื่องอื่นที่ไม่มี font นั้นอยู่ เอกสารจะแสดงรูปแบบผิดพลาดได้

หลังจากตั้งค่าครบแล้ว font ที่เราต้องการจะแสดงอัตโนมัติในเมนูเลือก font 🔽

![font ในเครื่องในเมนูเลือก font](https://dev-to-uploads.s3.amazonaws.com/i/60cyffqvfoe3okqru71k.png) 

## ปรับภาษาของเอกสาร

สำหรับ Google Docs และ Google Slides เลือกเมนู **File** บนซ้าย จากนั้นเปลี่ยน **Language** เป็นไทย

สำหรับ Google Sheets เลือกเมนู **File** บนซ้าย > **Spreadsheet settings** > แท็บ **General** > เปลี่ยน **Locale** เป็นไทย.

## Fonts ที่ Google รองรับ

รองรับทุกภาษา ไม่ต้องปรับภาษาของเอกสาร มีดังนี้

- Arial
- Comic Sans MS
- Courier New
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana

สำหรับภาษาไทย มีดังนี้

- Angsana New
- AngsanaUPC
- Browallia New
- BrowalliaUPC
- Cordia New
- CordiaUPC
- DilleniaUPC
- EucrosiaUPC
- FreesiaUPC
- IrisUPC
- JasmineUPC
- KodchiangUPC
- Leelawadee
- LilyUPC
- TH Sarabun PSK
- TH SarabunPSK
- Ayuthaya
- Krungthep
- Sathu
- Silom
- Thonburi
- TH Sarabun OFL

จะเห็นว่า ไม่มี _TH Sarabun New_ สำหรับผู้ที่ต้องการใช้จึงแนะนำว่าให้ใช้ตัว _Sarabun_ ไปเลย

สำหรับภาษาอื่น ดูเพิ่มเติมที่อีก[บทความ](https://www.thewdhanat.com/blog/how-to-use-local-fonts-in-google-docs-sheets-slides/)

ถ้าชอบบทความนี้หรือเห็นว่ามีประโยชน์ อย่าลืม[ซื้อกาแฟให้ผม](https://www.buymeacoffee.com/thew)นะครับ

<a href="https://www.buymeacoffee.com/thew" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-blue.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
Golang Web Development
Tags: go, webdev
Published: 2020-09-27 10:07:42

Here is the list to take reference for Golang Web Development:
* [Golang HTTP Server](https://hackthedeveloper.com/golang-http-web-server/)
* [Golang HTTP HandleFunc](https://hackthedeveloper.com/golang-http-handlefunc-request-routing/)
* [Golang Gorilla Mux](https://hackthedeveloper.com/golang-gorilla-mux/)
* [Golang HTML Template](https://hackthedeveloper.com/golang-html-template-parsefiles-and-execute/)
* [Golang Gorilla Schema](https://hackthedeveloper.com/golang-gorilla-schema/)
* [Golang Form Data](https://hackthedeveloper.com/handling-form-data-in-golang/)
* [Serve Static files using Gorilla Mux in Golang](https://hackthedeveloper.com/golang-serve-static-files-gorilla-mux/)
* [Golang File Upload](https://hackthedeveloper.com/golang-multipart-file-upload-using-form-file/)
* [Golang Gorilla Session](https://hackthedeveloper.com/golang-gorilla-sessions/)

Read more [web development blogs](https://www.google.com/search?q=web+developement+site%3Ahackthedeveloper.com).
Learn by doing - Exploring graphql queries with Hasura console
Tags: javascript, graphql, postgres, todayilearned
Published: 2020-09-27 09:54:53

In this episode, we explored the Hasura console and play on the graphQL playground with different queries and mutations.

Also, explore how Hasura tackle,
- Sorting
- Searching
- Pagination
- Creation of new database entries

{% youtube sUASqbH-Zr4 %}
Color Picker
Tags: color, design, hex, webdev
Published: 2020-09-27 09:40:29

Searching for that perfect color has never been easier, use our **HTML color picker** to browse millions of colors and color harmonies. Colorpicker is efficient through its interface. Every features are accessible from the toolbar and shortcuts. [Color picker](https://hexcolor.co/color-picker) allows you to grab any color on your screen! No matter if it's on your favorite design software, your browser or just an image. It is possible to see colors on the Colorpicker interface in real time. This way, you can see the Hexadecimal, RGB or HSL code quickly without losing your last adjustments.

Made for designers and developers, Colorpicker allows you to pick, edit, organize and store your colors easily. Feel free to test the simplified version right here! 

**https://hexcolor.co/color-picker**
Python Text to Speech (TTS) Using Pyttsx3
Tags: python, tts, tutorial, pyttsx3
Published: 2020-09-27 09:35:37

Voice Assistant is amazing, isn’t it? Guess what, we can create our own voice assistant to support us in our everyday lives. It would not be high-end voice assistance but a combination of basic text-to-speech and speech recognition in Python.

##Installing Pyttsx3 using pip
```
pip install pyttsx3
```

This will install the pyttsx3 library in your machine or the virtual environment if you are using it.

##Text-To-Speech using Pyttsx3 in Python
We have installed the necessary package needed for Text-To-Speech Conversion, so now lets code it.

Text-To-Speech Python
```
import pyttsx3

engine = pyttsx3.init()
engine.say("This is Text-To-Speech Engine Pyttsx3")
engine.runAndWait()
engine.stop()
Lets understand this code line by line.
```

First of all, we‘re going to import the pyttsx3 package that we’ve installed using the pip. The name pyttsx3 is really big and we might make an error when coding a big program.

We can give a short name using the Python import alias syntax.

Example:

###Python Import Alias
```
pip install pyttsx3 as tts
```

You can use a different name as you like. I’m going for the original name because it specifically describes the name of the package. If a shorter syntax for this package is created later, you can use it.

###Pyttsx3 Engine Initialization
```
engine = pyttsx3.init()
```
The above code initializes the pyttsx3 package. The Instance of the initialized pyttsx3 package is stored in the engine variable. We are calling the variable engine as it works as the engine and converts Text-To-Speech whenever execute the functions from the package.

###Say Function in pyttsx3
```
engine.say("This is Text-To-Speech Engine Pyttsx3")
```
There is a built-in say() function in the pyttsx3 package that takes a string value and speaks it out.
```
runAndWait Function
engine.runAndWait()
```
This function keeps track when the engine starts converting text to speech and waits for that much time, and do not allow the engine to close. If we don’t write this code, it may happen that the engine might not work properly as the processes will not be synchronized.

After all the processes are over, we shut down the engine by calling the stop() function.

##Change Text-to-Speech Voice In Pyttsx3 Python
We can also change the voice of the engine, default is the voice of a male named David.

To change the voice of the pyttsx3 engine, first, we will have to get the list of objects of voices.

```
##Pyttsx3 getProperty
voices = engine.getProperty('voices')
```
The getProperty() function of the pyttsx3 package takes a string as a parameter and returns an object matching the string.

Read more about [Text to Speech in Python](https://hackthedeveloper.com/text-to-speech-pyttsx3-python/). [Read more about Text-to-Speech](https://www.google.com/search?q=text+to+speech+site%3Ahackthedeveloper.com).
Emojis Picker - Vite/Electron app
Tags: showdev, vue
Published: 2020-09-27 09:11:10

I was tired of googling emojis to copy/paste them. I wanted something similar to the keyboards on our mobile phone where all emojis are easily found. So I created Emojis Picker.

You can find it on [Microsoft Store](https://www.microsoft.com/en-us/p/emojis-picker/9nfq6j6h002j).

![Screenshot of Emojis Picker](https://dev-to-uploads.s3.amazonaws.com/i/tdh08z7vzs0by7o3im1w.PNG)

Try it out and let me know what you think 😄

The project is created using [Vite](https://github.com/vitejs/vite), Vue 3, and [Electron](https://www.electronjs.org/) for a cross-platform desktop app.

You can check out the code on [GitHub](https://github.com/gautemo/emoji-picker) if you want a similar setup.
Face Recognition System Python
Tags: python
Published: 2020-09-27 09:02:59

Face Recognition System in Python is a biometric technology capable of recognizing and verifying an image or video of an individual.

Facial recognition allows one to identify the system administrator.

Today, this biometric system plays a very important role in the protection of smartphones and consumers.

Let’s Code face Recognition System in Python!

##Face Recognition Python Algorithm
Steps to follow to make a Facial Recognition System. You can also make this system for Hardware like Raspberry pi / Arduino projects.

###1.Import the needed packages.
```
import face_recognition

from PIL import Image, ImageDraw, ImageFont
```

###2. Load image of the person
Load the image of the person on which you want to try facial recognition.
```
image_of_person = face_recognition.load_image_file(‘./img/face_models/person.jpg’)
```

###3. Store Face Encoding
This Process stores the facial features of the person.
```
person_face_encoding = face_recognition.face_encodings(image_of_person)[0]
```

Read the whole post on [Face Recognition Python](https://divyanshushekhar.com/face-recognition-python/).
Stop Learning C++
Tags: codenewbie
Published: 2020-09-27 08:58:30

Hello guy's this is Satyam and in today's blog I am going to discuss the importance of C++ Programming language and should you learn C++ in 2020 or not.So let's get started.

First of all,I would like to say that I personally love to code using C++ programming language and in fields such as AI,Android App Development and Software Development C++ is a major Language but it's a difficult language for newbie programmers and also C++ is not used in Web Development whereas it's competitors such as Java provides a bunch of Frameworks and tools to develop web apps or services.Also programming langauges such as Python which is considered as the most beginner friendly programming language can be easily used for software development and web development also it has some frameworks such as Kivy which we can use to develop Applications so overall the points are:

1.C++ is not a beginner friendly language.

2.C++ is not used in Web Development.


So if you want to be a Web developer,You didn't need to know C++ programming language.

    Thanks for Reading
BFE.dev #33. implement Promise.allSettled()
Tags: javascript
Published: 2020-09-27 08:45:20

> [BFE.dev](https://bigfrontend.dev) is like a LeetCode for Front End developers. I’m using it to practice my skills.

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

This article is about the coding problem [BFE.dev#33. implement Promise.allSettled()](https://bigfrontend.dev/problem/implement-Promise-allSettled)

## Analysis

Different from Promise.all() which rejects right away once an error occurs, Promise.allSettled() waits for all promises to settle.

So we just need to keep track of all the promises, by using an array. Promises might settle in arbitrary order, so use `index` to set the right location.

## Show me the code

First start with the basic skeleton of new Promise.

```js
function allSettled(promises) {
 
  return new Promise((resolve, reject) => {
    const result = []
    
    promises.forEach((promise, index) => {
      promise.then((value) => {
        result[index] = {
          status: 'fulfilled',
          value
        }
      }, (reason) => {
        result[index] = {
          status: 'rejected',
          reason
        }
      })
    })
  })
}
```

Then we need to resolve when all promises are settled, so use a counter to achieve this. 

And also notice that the input might contain non-Promises.

```js
function allSettled(promises) {
  if (promises.length === 0) return Promise.resolve([])
  
  const _promises = promises.map(
    item => item instanceof Promise ? item : Promise.resolve(item)
    )
  
  return new Promise((resolve, reject) => {
    const result = []
    let unSettledPromiseCount = _promises.length
    
    _promises.forEach((promise, index) => {
      promise.then((value) => {
        result[index] = {
          status: 'fulfilled',
          value
        }
        
        unSettledPromiseCount -= 1
        // resolve after all are settled
        if (unSettledPromiseCount === 0) {
          resolve(result)
        }
      }, (reason) => {
        result[index] = {
          status: 'rejected',
          reason
        }
        
        unSettledPromiseCount -= 1
        // resolve after all are settled
        if (unSettledPromiseCount === 0) {
          resolve(result)
        }
      })
    })
  })
}
```


## Passed

This is a fairly simple problem.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uyknquu0fh0mvvp2pxij.gif)

Hope it helps, you can have a try at [here](https://bigfrontend.dev/problem/implement-Promise-allSettled)
Python Generator - Yield and Next
Tags: python
Published: 2020-09-27 08:42:33

##Generators In Python
A Generator in Python is a sequence creation object i.e iterator. The Generated Iterator can contain a huge sequence.

Even though the generated sequence is pretty huge, it can be successfully iterated.

This is possible because the generator does not create and store the sequences in the memory at once, but it creates the sequence on the fly. This also saves memory usage of the program.

Creation of an iterator in python is a pretty heavy task, we have to create a class with __iter__() and __next__() methods, and also have to handle errors.

These steps are automatically performed by the Python Generator and return an iterator.

That’s why python generators have become so popular.

##Generator Creation In Python

Image Source – Medium.com
In this example, we are going to make a ranger generator function. This will be the copy of range() function in python.

The range() function also returns a generator object and then it can be iterated.

Range function python
```
r = ranger(0, 10)
print(type(r))
Output: range type
<class 'generator'>
```

Learn more about [Python Generators](https://hackthedeveloper.com/python-generator-yield-next/) from the Original Post.
BFE.dev #107. Find the largest difference
Tags: javascript
Published: 2020-09-27 08:36:23

> https://bfe.dev is like a LeetCode for FrontEnd developers. I’m using it to practice my skills.

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

This article is about the coding problem [BFE.dev#107. Find the largest difference](https://bigfrontend.dev/problem/Find-the-largest-difference)

## just coding

Obviously we could the max difference by subtracting the largest number with smallest one, so below is the straight approach.

```js
function largestDiff(arr) {
  if (arr.length === 0) return 0
  return Math.abs(Math.max(...arr) - Math.min(...arr))
}
```

### Or we could get min/max at the same time.

Above approach gets `max` first and then `min`, while we could get them at the same loop, by just keeping track of the min/max.

```js
function largestDiff(arr) {
  if (arr.length === 0) return 0
  
  let min = Infinity
  let max = -Infinity
  let result = Infinity
  
  for (let item of arr) {
    if (item < min) {
      min = item
      result = max - min
    }
    
    if (item > max) {
      max = item
      result = max - min
    }
  }

  return result
}
```

The time complexity doesn't change though, they are still O(n) as the same one.

## Passed

This is a fairly simple problem.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o61aw5um0neonll8bu2d.gif)

Interested to try by yourself? Have a try at BFE.dev https://bigfrontend.dev/problem/Find-the-largest-difference
Python Named Tuple
Tags: python
Published: 2020-09-27 08:34:21

A named tuple in python is a subclass of tuples. The named tuple has the same functionalities as a normal tuple, but its values can be accessed both by name (using dot notation eg: .name) as well as by position (offset notation eg: [0]). In this blog, we will learn what is Named Tuple in python, its syntax, and functions with the help of examples.
##Why Do We Need Namedtuple In Python?
One obvious question that will be on your mind is, “Why do we need Named Tuple in Python when we have a standard tuple?“.

The response to this question is that the named tuple improves the readability of the code and functions as a self-documented code.

Let’s understand it via an example:

Suppose we are setting up a software that stores student subject marks in a tuple called ‘marks.’ But, this code is readable only when the tuple description is in our memory. We are likely to forget the tuple definition after two or three days.

Python Tuple
```
marks = (98, 80, 95)
print(marks)
print(marks[0])
print(marks[2])
(98, 80, 95)
98
95
```
Named Tuple comes as a substitute for the regular tuple, which functions the same as the usual tuple, but improves the readability of our code. And even if the creator takes a break of one or two months, the syntax or meaning of the named tuple will speak for itself.

That’s what we need as a developer, a self-documented code.

Enough talking about Named Tuple. It’s high time to introduce you to its syntax.

Learn about [Python Named Tuple](https://hackthedeveloper.com/python-namedtuple-syntax-function/) from the Original Post.