teleren/devto huggingface dataset:
JavaScript Class อธิบายพร้อมตัวอย่างโค้ด
Tags: javascript, thai, es6, es7
Published: 2020-06-21 08:27:34


Video ใน YouTube อธิบายแนวคิดของ class และ object เป็นภาษาไทย
{% youtube CC4mX2fOHtI %}
ที่มา : https://youtu.be/CC4mX2fOHtI

**ตัวอย่างโค้ด**
```js
class Human {
  constructor() {
    this.gender = "M"
  }
  
  printGender() {
    console.log(this.gender)
  }
}

class Person extends Human {
  constructor() {
    super()
    this.name = 'A'
  }
  
  printName() {
    console.log(this.name)
  }
}

const p = new Person()
p.printName()
p.printGender()
```
**ผลลัพธ์**
```
"A" 
"M"
```

**อธิบายโค้ด**

extends คือการสืบทอด สามารถใช้ตัวแปรหรือฟังก์ชันจากคลาสที่เราต้องการสืบทอด
ในตัวอย่างโค้ด คลาส Person สืบทอดมาจาก คลาส Human

ดังนั้น object ที่ถูกสร้างขึ้นด้วยคลาส Person จะสามารถเรียกใช้ตัวแปรหรือฟังก์ชันที่มาจากคลาส Human ได้ด้วย

`const p = new Person()` เป็นการสร้าง object ชื่อ p จากคลาสที่ชื่อ Person

และถ้าต้องการเปลี่ยนแปลงค่าบางอย่างก็สามารถทำได้เช่นกัน
ตัวอย่างเช่น ต้องการเปลี่ยน Gender จาก M เป็น F สามารถเขียนได้ดังนี้

```js
//ในคลาส Person
...
  constructor() {
    super()
    this.name = 'A'
    this.gender = 'F'
  }
...
```

ใน JavaScript ES7 จะสามารถทำให้กระชับได้โดย
ไม่จำเป็นต้องใส่ constructor
ใส่ตัวแปร หรือ Property ได้เลย
ไม่จำเป็นต้องเรียกใช้ super()
เปลี่ยนให้เป็น Arrow Function
{% link https://dev.to/hambalee/arrow-function-javascript-51k %}

จะได้โค้ดที่สั้นขึ้นดังนี้
```js
class Human {
  gender = "M" //ไม่ต้องใส่ this 

  printGender = () => {
    console.log(this.gender) //ยังมี this อยู่
  }
}

class Person extends Human {
  name = 'A'

  printName = () => {
    console.log(this.name)
  }
}

const p = new Person()
p.printName()
p.printGender()
```
State management made simple - with Angular use case
Tags: angular, react, javascript, node
Published: 2020-06-21 08:03:09

Managing state in an application can sometime become a complex problem, especially when there is a requirement to perform an action when data changes overtime. An action can be as simple as updating a UI component when it happens.

### What basic functionalities do we expect from a state management lib ?
- centrally managing the state
- get notified whenever data changes
- no memory leaks and performance problems
- manage state over different channels (memory, sessionStorage, localStorage)

[DataStore](https://github.com/svaza/datastore#readme) library does that all. Right now only MemoryStore is supported, however this should fulfill all the needs of a webapp today. The readme for the library is self explanatory, so I will not post it here.

Library is a pure javascript library, so it can be used in any javascript platform or web frameworks like react, angular, vuejs.


It currently has a [full blown example](https://github.com/svaza/datastore/tree/master/examples/angular#readme) use case in angular that you would like to check out.

Initially when i developed it a year back, i was required to replicate it in all my projects by copying the source all over. Few days back i just thought of creating an npm package and make it available to community as well. This is where we all can collaborate and share ideas about improving it.

In case if you have any questions, pls do reach out to me.
Footer bottom in GastbyJS
Tags: gatsby, webdev, footer, beginners
Published: 2020-06-21 07:54:22

---
description: How to create a sticky footer at the bottom
---
I have been building my portfolio website and choose Gatsby. One problem that I encountered early on was making my footer stick at the bottom of the page. In this article, I'll be sharing how I overcame it.

Note: I used the starter kit Gatsby-starter-default as a starting point.

```JSX
<div className="site-content">
   <Header siteTitle={data.site.siteMetadata.title} />
   <main>{children}</main>
   <footer>
      © {new Date().getFullYear()}, Built with
     {` `}
     <a href="https://www.gatsbyjs.org">Gatsby</a>
   </footer>
 </div>
```

First, in the layout.js file found in the component folder, wrap the header, main, and footer element in a div and give it a class. The class name doesn't matter.

```CSS
.site-content {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1 0 auto;
}
```

Then in the layout.css file found in the same folder, write the following code. This will make your footer stick to the bottom of your page.
[memo] Debug values at Golang
Tags: go
Published: 2020-06-21 07:29:20

---
title: [memo] Debug values at Golang
published: true
description: This dump to value at golang
tags: golang
//cover_image: https://direct_url_to_image.jpg
---

I forget these.

```golang
package main

import (
	"github.com/davecgh/go-spew/spew"
	"log"
)

type Name struct {
	FirstName string
	LastName  string
}

type Address struct {
	Country    string
	PostalCode string
	Address    string
}

type Person struct {
	Name    Name
	Address Address
}

func main() {
	person := &Person{
		Name{"Cynthia", "Stone"},
		Address{"us", "02110", "1091 Lyon Avenue, Boston"},
	}

	log.Printf("[debug] %+v", person)

	log.Print("[debug] Humanize Output")
	spew.Dump(person)
}

```

execute output :

```
2009/11/10 23:00:00 [debug] &{Name:{FirstName:Cynthia LastName:Stone} Address:{Country:us PostalCode:02110 Address:1091 Lyon Avenue, Boston}}
2009/11/10 23:00:00 [debug] Humanize Output
(*main.Person)(0xc0000c6140)({
 Name: (main.Name) {
  FirstName: (string) (len=7) "Cynthia",
  LastName: (string) (len=5) "Stone"
 },
 Address: (main.Address) {
  Country: (string) (len=2) "us",
  PostalCode: (string) (len=5) "02110",
  Address: (string) (len=24) "1091 Lyon Avenue, Boston"
 }
})
```


see : [Go言語でPHPのvar_dumpやJavaScriptのconsole.log的なもの -- Qiita](https://qiita.com/suin/items/d952fb963956ac31b243)
Pomodoro technique at work
Tags: productivity
Published: 2020-06-21 07:28:40

## What is Pomodoro Technique?

Let’s stay by not creating our own definition.

As Wikipedia says,

The Pomodoro Technique is a time management method developed by Francesco Cirillo in the late 1980s. The technique uses a timer to break the down work into intervals, traditionally 25 minutes in length, separated by short breaks. These intervals are called pomodoros,

## How it works?

This technique helps us split up the work time slot into multiple intervals (or otherwise called as Pomodoro's).

The ultimate aim of the technique is to improve the productivity and also to take frequent breaks from work which will improve mental agility.

So what will be the time breaks will look like? Let’s assume we are going to work on task for two hours

I would always use to keep my work slot as 25 minutes and break time as 5 minutes.

The time 2 hours planned for doing a task will be divided into following parts

### Slot 1

25 minutes work (distraction-free work)

5-minute break (work free break)

### Slot 2

25 minutes work

5 minutes break

### Slot 3

25 minutes work

5 minutes break

### Slot 4

25 minutes work

5 minutes break

 After four set, it's time to take long break :) 

When I mention the distraction-free work, I really meant the same. No unusual Skype calls, Facebook check, unwanted email checks (unless it is urgent) and everything which you feel is not a part of the work. Dedicating the entire 25 minutes to work.

And the break time should be fully spent to relax, by doing something other than doing actual office works which will make ourselves to feel refresh & relax. Maybe checking mobile notifications, walking around the office, having some water or coffee will make us refreshed.

How can we measure our productivity? If we are taking 4-5 Pomodoro time slots effectively in a day, it will be 2.00-2.30 hours efficient work of the day. I will definitely raise my hand and say it’s one of my productive day in my work. After a long break, you should the same 4-5 slots. A long break needed on every 4 full slots.

So timeline of work will be

Decide a task which needs to be done
Set a timer for 25 minutes & start working
Work on the without any distraction until timer rings
After 25 minutes, set timer for 5 minutes
Relax or do something until 5 minutes timer rings
Repeat the same 4 times
Take a long break, 20 -30 minutes (we can extend if needed)
For setting these alarms, lots of tools available in online. Browse and choose which one suits you.

Enjoy being productive at the same time relaxed.

Cheers!
What is Deno and is Node.js dying? | Deno vs Node
Tags: tutorial, node, deno, codenewbie
Published: 2020-06-21 07:28:14

{% youtube Gu0fRC5Qe8U %}
In this video, we will be talking about what is Deno? and Deno vs Node. Is Node.js going to die? so stay tuned and watch the complete video to understand what is Deno and the difference from Node.

Follow us on below social media to stay updated
Github: https://github.com/codingx01
Twitter: https://twitter.com/TechParida
Linkedin: https://www.linkedin.com/company/codingx/
Facebook: https://www.facebook.com/codingx
Instagram: https://www.instagram.com/coding.x/

Please do Like, Share, Comment, and Subscribe!
Metabob, a Github tool for your Python repos
Tags: metabob, python, github
Published: 2020-06-21 07:23:16

---
title: Metabob, a Github tool for your Python repos
published: true
description: Exploring metabob
tags: metabob, python, github
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/iggjajlm4dy63uk5kmc3.png
---

[Metabob](https://metabob) is a research project aimed at helping open source coders. It's actually a research project with enthusiastic individuals, fine folks i should say.

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

You use the install button to setup on all or some repos then after you log in. You will be presented with this screen

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

You will see your selected repos in here. Once you click you are presented with the analysis view from where you can also switch branches

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

It's pretty intuitive i'd say where you can browse a list of issues:

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

or switch to the wheel view to view calls

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

## How is it different?

- It's like a linter (the errors part, not style) + auditing tool combined
- It integrates machine learning and has been trained
- It lets users train the system even further

## An evaluation of reviews.

It catches some nice security issues like hard-coded secrets and a host more. It also fails in few places where the context should be taken into consideration. 

> It's a must i'd say if you want to polish your open-source projects

It's certainly more friendly than commandline logs from Travis. It'd say if you want checks and reviews it's great. You can also help it become better by classifying the problems. You'd also be helping the benevolent devs behind it

Try it guys, it's ... free!
JavaScript Import Export คืออะไร ใช้ยังไง (JavaScript เบื้องต้น สำหรับมือใหม่)
Tags: javascript, es6, thai
Published: 2020-06-21 07:09:52

Import Export ในภาษา JavaScript มีไว้ใช้สำหรับนำเข้าโค้ดจากไฟล์อื่น
เพื่อให้โค้ดจัดแบ่งเก็บไว้แยกเป็นไฟล์
เมื่อต้องการนำมาใช้ก็ Import
ตัวอย่าง
```js
import person from './person.js'
```
แต่ก่อนที่จะ Import ได้ ในไฟล์ `person.js` จะต้องมีการ export ด้วย
```js
const person = {
  name: 'A'
}
export default person
```
เมื่อมีการ export default แบบนี้จะเป็นการ export ทั้งหมด
สามารถ import โดยใช้ชื่อตัวแปรอื่นก็ได้
```js
import p from './person.js'
```

การ export เฉพาะบางตัวแปร
`utility.js`
```js
export const a = () => {...}
export const b = 1
```
ในกรณีแบบนี้เวลาจะ import ต้องเขียนแบบนี้
```js
import { a } from './utility.js'
import { b } from './utility.js'
```
ชื่อตัวแปรจะต้องเป็นชื่อเดียวกันกับชื่อตัวแปรที่ export 
แต่ถ้าอยากเปลี่ยนก็สามารถทำได้
```js
import { a as c } from './utility.js'
```
หรือจะ import มาทั้งหมดก็ได้
```js
import * as abc from './utility.js'
```
How to add a free SSL to an NGINX server on Ubuntu
Tags: nginx, ssl, ubuntu, free
Published: 2020-06-21 07:06:03

In your terminal:

sudo app-get install python3-certbot-nginx

sudo certbot --nginx -d websitename.com -d www.websitename.com

When prompted select "2: redirect":

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

The website will now show as secure.

This expires every 90 days. Add this to a crontab so that it runs everyday to avoid this expiring. To do this run the following in your terminal:

crontab -e

Paste in the following

0 12 * * * /usr/bin/certbot renew --quiet
ทบทวน Arrow Function ใน JavaScript คืออะไร ใช้ยังไง
Tags: javascript, es6, thai
Published: 2020-06-21 06:42:27

Arrow Function คืออะไร
Arrow Function คือการสร้างฟังก์ชันรูปแบบใหม่ที่สั้นกระชับกว่าเดิม
ตัวอย่าง ฟังค์ชันแบบเดิม
```js
function printName(name){
 console.log(name)
}
printName('A')
```
สามารถเปลี่ยนเป็น Arrow Function ได้ดังต่อไปนี้
```js
const printName = (name) => {
 console.log(name)
}
printName('A')
```
จะได้ผลลัพธ์เหมือนกัน

ถ้าเป็นฟังก์ชันที่รับค่ามา 2 ตัวแปรจะเขียนเป็นแบบนี้
```js
const printName = (name,age) => {
 console.log(name,age)
}
printName('A',20)
```
เปลี่ยนเป็นฟังก์ชันที่มีการ return หรือมีการส่งค่ากลับ
```js
const mul = (number) => {
 return number * 2
}
console.log(mul(2))
```
ผลลัพธ์ที่ได้จะเป็น `4`

สามารถเขียนให้สั้นลงโดยการตัดปีกกาและคำว่า return ออกไปได้
เพราะมีแค่บรรทัดเดียวซึ่งเป็นการ return จะได้เป็น
```js
const mul = (number) => number * 2
console.log(mul(2))
```
ผลลัพธ์ที่ได้จะเป็นเหมือนเดิมคือ `4`
ส่วนที่เป็น `(number)` สามารถเอาวงเล็บออกได้เหมือนกันถ้ามีแค่ตัวแปรเดียว
จะได้เป็น
```js
const mul = number => number * 2
console.log(mul(2))
```
แต่ถ้ามี 2 ตัวแปรจะต้องใส่ไว้เหมือนเดิม
```js
const mul = (number1,number2) => number1 * number2
console.log(mul(2,2))
```
Contribute to Awesome Accomplice
Tags: blacklivesmatter, contributorswanted, showdev, sideprojects
Published: 2020-06-21 06:38:47

Like so many other black folks these past few weeks, I've been battling between feeling exhausted by the sudden increase in requests for my attention/resources, and the feeling that if I don't give that attention or those resources, folks are going to veer off into problematic and inaccurate places. 

Today, after watching more talks at [JuneteenthConf](https://juneteenthconf.com/) I was inspired to do something about those feelings.  

As a technologist, I couldn't help but wonder, what could I do to alleviate this stress, and systematize the information I've been combing through, so other's don't have to?!

So I created [Awesome-Accomplice](https://karaajc.github.io/awesome-accomplice/), modeling Awesome Lists. 

There are a LOT of resources within and outside of tech that are built by folks on the ground that have BEEN doing the work of dismantling our racist systems, and I want us to be able to pull and share that info.

I'm hoping to have more Black & Indigenous People Of Color share resources that they vouch for, so that we can in turn, have a quick place to point non-black folks to, who are looking to get on the same page in their journey to Anti-Racism.

If you'd like to contribute, reach out!
https://github.com/KaraAJC/awesome-accomplice
Vanilla JavaScript Shuffle Array
Tags: javascript
Published: 2020-06-21 06:28:03

Now and then, you need randomly to shuffle an array in `JavaScript`. There is a super-easy way of doing so. We can use the `sort()` method and pass a random number to it.

## JavaScript Shuffle Array

As mentioned in the introduction, we are going to be using the `sort` method.

This method, without any parameters, will sort an array in a natural way like 123 and abc.

See the following example:

```js
var charArray = ['d', 'f', 'a', 'c', 'b', 'e'];
var numArray = [1, 5, 3, 2, 4];

console.log(charArray.sort());
// ["a", "b", "c", "d", "e", "f"]

console.log(numArray.sort());
// [1, 2, 3, 4, 5]
```

As you can see the Arrays get normalised sorted. But we can also pass a specific argument which is what we are going to use to randomise the sort.

```js
var rockPaperScissor = ['💎', '📄', '✂️'];
console.log(rockPaperScissor.sort(() => 0.5 - Math.random()));
```

This will randomly shuffle the array let me explain in depth.

The `sort` function comes with a comparison between two elements, where element one is bigger than two. It will put the index lower or higher.

As for the `.5 - Math.random()` this will return a value between -0.5 and 0.5

So whenever the value is below 0, the element is placed before the one other element.

> Also, read about [sorting an Array of Objects by Value](https://daily-dev-tips.com/posts/javascript-sort-array-of-objects-by-value/)

You can test this and see it in action on this Codepen.

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="js,result" data-user="rebelchris" data-slug-hash="OJMpPog" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vanilla JavaScript Shuffle Array">
  <span>See the Pen <a href="https://codepen.io/rebelchris/pen/OJMpPog">
  Vanilla JavaScript Shuffle Array</a> by Chris Bongers (<a href="https://codepen.io/rebelchris">@rebelchris</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
What is flutter ?
Tags: flutter, android, dart, ios
Published: 2020-06-21 05:59:18

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.

Flutter uses Google’s Dart programming language & it's very easy to learn. Flutter will help you create beautiful, fast apps, with a productive, extensible, and open development model.

## <span style="color:royalblue">Want to write your first android / iOS app?</span>

###How to install Flutter?

>1- [Installing Flutter, Official Flutter Website](https://flutter.dev/docs/get-started/install)
>2- Visit the link & follow the simple steps.

###Let's see our Hello World app in flutter.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fg3ds12xv6u0bxr8ud55.png)
###What do you think how many lines of code is needed to make a basic app like that?

###Code for above app.
```dart
import 'package:flutter/material.dart';

void main() => runApp(new HelloWorldApp());

class HelloWorldApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Material(
        child: new Center(
          child: new Text("Hello world!", style: TextStyle(fontSize: 32.0),),
        ),
      ),
    );
  }
}
```
###Looks Easy right! Flutter is very easy to learn.
_Widgets - In simple words everything you see in flutter app is a widget, example - in the above app we have a text widget._

###Another Example App-

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/49lsjgeia0wtpb4m6hgw.jpeg)
<br>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/khjb9ffsbgi5c75dqpl0.jpeg)

With just Code < 300 lines, we can create the above app with beautiful UI & animations.



#####In the next post I will be writing about app development with flutter having simple codes. I will start with a basic text widget.
### #FlutterBasics
Hey.com tackles Unsolicited Bulk Emails with Screening Feature
Tags: watercooler, email
Published: 2020-06-21 05:29:19

The Basecamp team has published a new application of their creation, Hey.com. It purports to fix many observed problems of email. In my opinion after watching the introduction video of its features, it does quite a good job at that. What especially attracts my attention is the feature where you screen each sender.

The screening feature takes the emails from a sender first seen by the system to a standby area, and you can decide whether those emails and later emails should go to your inbox, your newsletter tab, your paper trail, or be rejected.

This feature immediately reminds me of the very incisive [criticisms][ubm] of email by Jonathan de Boyne Pollard (jdebp), about non-solutions to unsolicited bulk emails, colloquially spam emails. Those non-solutions are still as prominent as when the article was first published.

[ubm]: https://jdebp.eu/FGA/smtp-anti-ubm-dont-work.html

To summarize, the problem of unsolicited bulk email is: 1) unsolicited; 2) bulk. Yet, the prominent solutions, such as machine learning based filter, trusted email server list, etc., do not target the actual problems. Because those solutions do not target the real problems, they introduce their own problems. 

For example, machine learning based filters can put your important emails into the spam folder erroneously. A trusted email server list favors incumbent service providers and cuts off small email operators and personal servers, going against the open spirit of the internet.

The solution Jonathan proposed was a new open protocol, called Internet Mail 2000 (IM2000), first conceived by Daniel J. Bernstein (djb). The key insight is that unsolicited bulk emails are a problem because the bulk burdens the receivers. The idea is to turn the Simple Mail Transfer Protocol (SMTP) around, and burden the sender with storing the outgoing emails. When senders want to send a message, they must first solicit. Only when the receivers are willing will they actually retrieve the messages. But with SMTP already dominant, IM2000 did not receive much attention outside of djb enthusiasts.

Hey.com does not aim to upend SMTP, but only tackles the first aspect of the problem, that spam emails are unsolicited. The screening simulates a solicitation protocol. Only if you agree to receive emails from a sender will you see those emails in the inbox. 20 years after IM2000 was first conceived, something similar has finally made it to the market.

That said, it is not clear whether Hey.com may reject emails from indie operators.

---

1. djb also [predicted][ipv6mess] the difficulties of IPv6 adoption, against the committee's optimism. The history has proved his predictions correct. 

[ipv6mess]: https://cr.yp.to/djbdns/ipv6mess.html

2. Incidentally, IM2000 is quite similar to the instant messaging (IM) systems nowadays.

3. Another similar thing is push notifications.

4. I actually knew about Hey.com from Basecamp YouTube channel, before I knew about their debacle with App Store.
How to Launch your own Kubernetes Cluster on AWS
Tags: kubernetes, aws, docker, serverless
Published: 2020-06-21 05:22:20

Installation of Kubernetes and setting up a cluster can be a challenge as there are multiple steps to stand up a full fledged cluster. The steps I go through will setup a basic cluster which will be enough for any learning and practice you want to do.  

For full post :  

https://amlanscloud.com/kubernetescluster/
Reinforcement learning
Published: 2020-06-21 04:26:38

#What is it?

Like a lot of the ideas in machine learning, it is an abstraction of real life. How do we learn in real life? By doing and seeing the results. Put your hand in a fire and you won't do it again. You just learned something: fire is hot.

That lesson is taught by negative reinforcement. Having your hand burnt is negative it doesn't feel good. Alternately you can reward positive actions. Like a baby trying ice cream.

##Setting the scene

The first step in reinforcement learning is establishing an environment. This is distinct from a programming environment. It can be something as simple as an empty array that represents a game board or you could have a robot learning in the real world.