teleren/devto huggingface dataset:
ความหมายของ Literal ในภาษาโปรแกรมคอมพิวเตอร์
Tags: programming, go
Published: 2020-06-01 00:42:12

ภาษาคอมพิวเตอร์คือภาษาเขียน ซึ่งต้องยุ่งเกี่ยวกับการจัดการข้อมูล คำว่า literal หมายถึงวิธีเขียนแทนข้อมูลในภาษานั้นๆนั่นเอง

ตัวอย่างเช่นภาษา Go ข้อมูลจำนวนเต็มเขียนด้วยเลยอาราบิก ประกอบด้วยเลข 0-9 เรียงติดกันเช่น 10, 20, 30 หรือจะเขียนในรูปเลขฐาน 8 ใช้เลข 0-7 โดยต้องใช้ 0 นำหน้าเช่น 0777 หรือเลขฐานสิบหก ก็ใช้สัญลักษณ์ 0-9 และ a-f หรือ A-F โดยตอนเขียนต้องนำหน้าด้วย 0x หรือ 0X ก่อนเช่น 0xaabbcc

ส่วนข้อมูลแบบ string ก็ใช้ double quote เช่น `"Hello World"` หรือ back quote เช่น ``` `Hello World` ``` 

นอกจากนั้นหลายภาษาก็มีวิธีเขียน Literal value ของข้อมูลที่เป็นโครงสร้างอย่าง Struct หรือ ข้อมูลที่เป็น collection อย่าง Array หรือ Map เอาไว้ด้วยเช่นของ Go เราสามารถเขียน Literal ของ Struct โดยใช้ชื่อประเภทข้อมูลตามด้วยปีกกาเปิด ชื่อ field คั่นด้วย colon (:) แล้วก็ value ของ field นั้นเช่น

```go
customer := Customer {
        Name: "John Doe",
        Age: 35,
}
```

ส่วน Array หรือ Slice ก็คล้ายกันคือชื่อ type ก่อนแล้วค่อยปีกกาเปิดตามด้วย element ใน array หรือ slice เช่น

```go
array := [2]int{10, 20}

slice := []int{1, 2, 3}
```

และ Map ใช้ชื่อ type เช่นกันแล้วปีกกาเปิดข้างในประกอบด้วยคู่ของ key กับ value ที่คั่นด้วย colon (:) เช่น

```go
m := map[string]string{
        "name": "John Doe",
        "age":"35",
}
```

สำหรับภาษาอื่นๆก็จะมีวิธีเขียน literal value แตกต่างกันไป ก็หวังว่าโพสต์นี้จะมีประโยชน์ทำให้ใครที่ไปอ่านเจอพวก textbook ทางด้านเกี่ยวกับโปรแกรมคอมพิวเตอร์จะได้ไม่งง เพราะถ้าเราไปเปิดคำแปลทั่วไปตรงๆ จะเข้าใจผิดได้ง่ายๆ
Chat made with Deno
Tags: typescript, javascript, deno, websocket
Published: 2020-06-01 00:40:43

There are few days that was launched the Deno, a new JavaScript and TypeScript runtime built in Rust. In this project we use that technology to create a simple web chat.

The project code is hosted in that repository: https://github.com/assisfery/WebSocket-Chat-made-with-Deno

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

## Web Server
Here we load the Web Server module to host our index file.
```ts
import { listenAndServe } from "https://deno.land/std/http/server.ts";

listenAndServe({port: 8000}, async(req) => {

	if(req.method == "GET" && req.url == "/")
		req.respond({ body: await Deno.open('index.html') });

});
```


## WebSocket Server
We load the WebSocket client and WebSocket Serve module,
to listen client message and broadcast to every user connected.

```ts
import { WebSocket, WebSocketServer } from "https://deno.land/x/websocket/mod.ts";

const wss = new WebSocketServer(8080);

wss.on("connection", function (ws: WebSocket) {

	ws.on("message", function (message: string) {

		console.log(message);

		wss.clients.forEach(function each(client) {
			if (!client.isClosed) {
				client.send(message);
			}
		});

	});

});
```

## WebSocket Client
In our index file we handle our WebSocket client using JavaScript native API.
```js
var userName = null;
var clientWS = null;

function main()
{
	if($("#usr").val() == "")
	{
		swal("Warning", "Empty name!", "warning");
		return;
	}

	userName = $("#usr").val();

	$("#loader").show();
	$("#sign-in").hide();

	clientWS = new WebSocket("ws://localhost:8080");

	clientWS.onopen = function (event) {
		swal("Conneceted", "Connected successfully!", "success");

		$("#loader").hide();
		$("#chatbox").show();			
	};

	clientWS.onerror = function (event) {
		swal("Error", "Something happens!", "error");

		$("#chatbox").hide();
		$("#sign-in").show();			
	};

	clientWS.onclose = function (event) {
		swal("Closed", "Your connection was closed!", "info");

		$("#chatbox").hide();
		$("#sign-in").show();			
	};

	clientWS.onmessage = function (event) {
		console.log(event.data);

		var message = JSON.parse(event.data);

		if(message.type == "message")
		{
			if(message.user != userName)
				$("#message-box").append('<div><div class="bubble"><b>' + message.user + ': </b>' + message.content + '</div></div>');
			else
				$("#message-box").append('<div class="text-right"><div class="bubble bubble-info"><b>' + message.user + ': </b>' + message.content + '</div></div>');
		}
		

	};
}

function send()
{
	if($("#msg").val() == "")
		return;

	var message = {
		type: "message",
		user: userName,
		content: $("#msg").val(),
	};

	clientWS.send(JSON.stringify(message));

	$("#msg").val("");
}
```
Eliminating distractions to increase productivity
Tags: books, softskill, productivity
Published: 2020-06-01 00:34:56

A few years ago I used to think that productivity was totally bounded to hard skills and how you deal with problems from a technical point of view. Recently I'm discovering that this is half true. As Cal Newport described in the very well written "Deep Work" focus is the main key to get your work done, and mostly it's rare to find out and by consequence it has to be valued. The reason for that is that no matter how good are the courses and books that you are giving to someone. If that person can't focus on it's work then is a useless investment.

To achieving what is called the mentioned "deep focus", Newport describe a set of disciplines called The Four Disciplines of Execution (4DX):

### 1 - Focus on the wildly important

I always had a problem with focusing on my current task. The reason for that is that I rarely summarized what my priorities were and what I was trying to accomplish. Focus the important and throw away the garbage is not just important to complete your goal, but to keep your sanity and not become overwhelmed.

### 2 - Act-on the lead measures

Always follow the plan no matter what and more important than this, be ready to act in what you have in hands at that exact moment. Identify where you are NOW is so important as realize where you will going to be AFTER.

### 3 - Keep a Compelling Scoreboard

Is important to have some measure tool to your task for the two main reasons:
- We are more motivated to do some work by simply having a absolute number of our "impact" in that current task
- This way we can easily visualize our current lead and as said in rule number 2, act on it.

### 4 - Create a Cadence of Accountability

Last but definitely not least create a rhythm. It's impossible to some system work out of sync with different parts working on different instructions and flows. Just think about the human body and how all workflow is centralized in the brain.

This step talk about how important is to check out your calender and report problems to keep sure you are STILL in the plan.

## In conclusion

Deep work is a superpower, but one that can be taught and with the right discipline, achieved by any person at any field of knowledge. Know where you want to go is important because you can always be one step ahead and consequently never be taken down.
BigQueryベストプラクティス (パフォーマンス:3)
Tags: bigquery
Published: 2020-06-01 00:30:04

公式ドキュメントに記載のある「BigQuery best practices」をまとめてみるシリーズ。

今回は「Managing query outputs」をまとめます。

_イタリック体はドキュメントに記載のない追加コメント_

# クエリアウトプットに関するベストプラクティス
[原文](https://cloud.google.com/bigquery/docs/best-practices-performance-output)

### Avoid repeatedly joining the same tables and using the same subqueries.
繰り返し、同じテーブルや同じサブクエリをジョインすることを避ける。

* 何度も同じテーブルをJOINする場合は、ネストされたカラムを利用して非正規化する。
* 何度も同じサブクエリを使う場合は、サブクエリをテーブルとしてマテリアライズする。

### Carefully consider materializing large result sets to a destination table. Writing large result sets has performance and cost impacts.

巨大な結果セットを書き込む場合、パフォーマンスとコストに影響があるので注意する。

* キャッシュされた結果セットの上限は10GB程度なので、これを越すと `Response too large`エラーに繋がる
* 避けるには、以下の手段を用いる
  * 適切にフィルターする
  * `ORDER BY` を利用する場合は `LIMIT` を利用する
  * 出力テーブルを指定する
* 巨大なテーブルを作成する場合は、有効期限を設定するなどしてコスト管理する。

### If you are sorting a very large number of values, use a LIMIT clause.

巨大なデータセットをそーとする場合、 `LIMIT` を利用しよう

* 巨大なデータセットに `ORDER BY` をすると、 `Resource exceeded` が発生する。これは、ソートの最終ステージは一つのスロットのみで行われるため、スロットの容量を超えてしまうことで発生する。
60fps Javascript with async LZ compress/decompress using js-coroutines
Tags: javascript, webdev
Published: 2020-06-01 00:19:03

js-coroutines now supports [lz-string](https://github.com/pieroxy/lz-string) compression and decompression while you animate at 60fps.

The [js-coroutines](https://github.com/miketalbot/js-coroutines) library uses coroutines and `requestIdleCallback` to run heavy operations inbetween animations for a smooth user experience. I've recently added lz-string support so you can run powerful compression and decompression algorithms while the user has a seamless experience.

You can read about how js-coroutines works [here on Dev.to](https://dev.to/miketalbot/60fps-javascript-while-stringfying-and-parsing-100mbs-of-json-84l).

# Demo

{% codesandbox vkvhs %}
Monthly review: May
Published: 2020-06-01 09:04:22

---
title: Monthly review: May
published: true
date: 2020-06-01 00:00:00 UTC
tags: 
canonical_url: 
---

## Sponsors

I’m incredibly thankful to the following people for sponsoring my open source work this past month: [@repi](https://github.com/repi), [@oli-obk](https://github.com/oli-obk) and [@yaahc](https://github.com/yaahc).

If you like what I’m doing and want to support my work, please consider sponsoring me on [Patreon](https://www.patreon.com/philhansch) or [via other means](https://phansch.net/thanks) :heart:

## What I’ve worked on

One code contribution got merged this month:

- [Fix a false positive in `empty_line_after_outer_attr` lint](https://github.com/rust-lang/rust-clippy/pull/5609)

I’ve reviewed and approved [22 pull requests](https://github.com/rust-lang/rust-clippy/pulls?q=is%3Apr+sort%3Aupdated-desc+is%3Amerged+Approved+by%3A+phansch+merged%3A2020-05-01..2020-06-01+).

## Reflections

### Reviewing pull requests

Since Clippy is now using [rust-highfive](https://github.com/rust-lang/highfive), incoming pull requests are automatically assigned to people on the reviewer list. Something about the random assignment makes a big difference to me. I feel so much more motivated to review pull requests. [@flip1995](https://github.com/flip1995) also did a lot of PR triage and we’re down to [~20 openPRs](https://github.com/rust-lang/rust-clippy/pulls?q=is%3Apr+is%3Aopen+sort%3Aupdated-desc) from around 40 at the beginning of May.

This makes me think that I should prioritize reviewing pull request more. It brings in more contributors and team additions in the long run which means more people are going to be in the reviewer pool.

### `qwerty` touch typing

I almost achieved my primary goal from [last month](/2020/05/04/monthly-review-march-april/): Reaching 60+ WPM touch typing on `qwerty`. Currently I’m hovering around 50 WPM. This graph shows my progress on [10fastfingers.com](https://10fastfingers.com/user/2094488/) starting with the 10th of May:

[![screenshot](http://phansch.net/assets/images/posts/2020/wpm.png)](http://phansch.net/assets/images/posts/2020/wpm.png)

I’m still not where I want to be, especially when it comes to my `vim` muscle memory that I had to give up. While I’m typing with `qwerty` these days, I also want to be more mindful about potential finger pain and RSI because `dvorak` felt much more comfortable to me.

## Goals

My primary goal for June is to reach 80+ WPM touch typing on `qwerty`. I feel as if I can’t get into proper flow without being able to touch type properly.

Apart from that I want to try and prioritize my assigned Clippy pull request reviews over providing my own code contributions.
Facebook authentication using NodeJS and PassportJS
Tags: facebook, node, authentication, passportjs
Published: 2020-09-16 05:47:13

---
title: Facebook authentication using NodeJS and PassportJS
published: true
date: 2020-06-01 00:00:00 UTC
tags: Facebook,NodeJS,Authentication,PassportJS
canonical_url: https://www.loginradius.com/engineering/blog/facebook-authentication-using-node-and-passport/
---

Social login is the need for simplifying your registration process and increasing the conversion rates. Here we will be implementing Facebook Login using NodeJS and Passport. Passport is authentication middleware for Node, which authenticates requests and delegates all other…

   
[Read On](https://www.loginradius.com/engineering/blog/facebook-authentication-using-node-and-passport/)
A createElement one-liner (with attributes and children)
Tags: javascript
Published: 2020-05-31 23:57:35

---
title: A createElement one-liner (with attributes and children)
published: true
description: React.createElement wannabe using Array.reduce
tags: javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/1lw0gw5ms9cqm74qptt0.png
---

# The one-liner

```js
el = (tag, props={}, ch=[]) => ch.reduce((e,c) => (e.appendChild(c),e),Object.assign(document.createElement(tag),props))
```

# Usage

```js
el('ul',{classList:['list']},[
  el('li',{innerText:'first'}),
  el('li',{innerText:'second'}),
])
```

# Bonus: `attributes` support

```js
el = (tag, props = {}, ch = [], attrs = {}) => ch.reduce((e, c) => (e.appendChild(c), e), Object.entries(attrs).reduce((e, [k, v]) => (e.setAttribute(k, v), e), Object.assign(document.createElement(tag), props)));
```

# Attributes Usage
```js
el('ul',{classList:['list']},[
  el('li',{innerText:'first'}),
  el('li',{innerText:'second'}),
], {'data-example':42}) // ul extra attributes
```

# but_why.gif

In some cases, using only properties won't suffice:

```js
el('input', {value: 42}) // input[value=42] won't match
el('input', {ariaLabel: "x"}) // input[aria-label] won't match (on FF)
el('input', {dataset: {a: 0}}) // dataset only has getter
```

So now, you can set them by attributes:

```js
el('input', {}, [], {value: 42}) // .value === '42'
el('input', {}, [], {'aria-label': "x"})
el('input', {}, [], {'data-a': 42}) // .dataset.a === '42'
```

have a nice day
Simplying State Management with Immer: Some Thoughts
Published: 2020-05-31 23:53:56

Not sure about the rest of you, but I find that with any mildly complex state in react / redux applications, updating state for objects deeper inside the state can be a pain.

Here's some state:

![some state](https://dev-to-uploads.s3.amazonaws.com/i/qo3tagy6nv18qjsnszus.png)

Suppose we want to make a change to the description for item 3 (id) in purchase 7 for account 1. Without a helper library, we'd do something like this:

![a complicated way to update state](https://dev-to-uploads.s3.amazonaws.com/i/yyj5axyz12xaqggbacnf.png)

All of this just to update a single field. The excess spreading makes the code hard to understand, and also introduces more opportunities to mess up and introduce bugs. Wouldn't it be better if we could just do something like this?

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

This code is a lot cleaner, more intelligible, and leaves less room for introducing bugs. Unfortunately, when we're working with state in react and redux, we need to avoid mutating state directly, so without a helping hand, we cant use the latter code snippet. Fortunately, Immer (a javascript immutability library), can provide us with that helping hand.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tzym38ndo225tlkjvgo6.png)
Getting things done (in the right way)
Tags: softskill, books, productivity
Published: 2020-05-31 23:50:40

In this post, I will cover the method described in the book Doing things by David Allen. I want to discuss this method, showing its key parts, as well as talking about a personal experience of mine.

When thinking about Allen's method, it is important to always keep the following thought in mind: doing things should be simple, how to define what "done" means (the goal you want to achieve) and how you will achieve that specific goal (the " doing "to see).

This week, at the code company I work for, I faced a focus problem. My work at this company includes (but is not limited to) researching performance issues and figuring out how to make our code faster. The performance problem is that it is never an explicit problem. Instead, you're more likely to be looking for a problem where everything seems to be working normally.

The reason I went through this focus problem was because I didn't stop and asked "what is my problem here and what am I trying to achieve?" He was giving me a piece of software to analyze and find out what might or might not be causing a performance problem. I got stuck. By trying figure out all the problem at once, I became overwhelmed with a task that should be simple actually.

After that event I take a step back and start to trace a plan that would lead to a more precise and concise goals. I achieve that after a research throughout the thought process described by Allen:

### Capture

When facing a problem, try to catch whatever it is in your attention. What first caught up your sight is usually important.

### Clarify

After you find a small problem you need to understand what it truly means. This is the step that I've failed. I start to just "capture" things without a full understanding of what it would lead me to.

### Organize

Now it's the time where you grab the thing you just find out and put it where it belongs. This process is important because here you define what is priority and what can be done later, or even by someone else.

### Reflect

It's important review your process and tasks after writing down a new task, to make sure you will not be overwhelmed by all your tasks.

### Engage

Simply do it. Without further ado start to work in your task, always going back and fourth in your plan to make sure you're still in the right path.


## Conclusion

By summary what can be said: every time you became overwhelmed by a task, take a step back and do a detailed plan. Filter what is important and what is not priority. Always write down new ideas, don't keep to yourself because you simply are not that trusty; your notebook is your best friend.
With this simple process in mind you are going be able to crack down difficult task and come with a solution to almost every problem that you find from now on.
How to customize your React tab icon and attachment for newbies by a newbie.
Tags: codenewbie, react, 100daysofcode
Published: 2020-05-31 23:49:45

Recently I posted my resume on a Slack channel for a peer review. One fellow developer had somethings to say about my portfolio website. As this was an opportunity to learn from someone with way more experience, I dove in and waited for his input on what he would do differently. First off having "here" highlighted as my link was practically unforgivable. Easy enough done. Get some space between the title and the navbar everything was to cozy. Done. Run my portfolio on Netlify and get a proper domain. Done.

The final suggestion wasn't very difficult but I couldn't figure it out easily. Change the favicon.ico for my tab and attachment should describe what the site is about. It shouldn't say React app, that is a no no. It should say my name and portfolio. 

Starting with the favicon.ico file, the react atom had to go. That file was deleted. I found a key with a 'B' on it, looks fun. Downloaded a ico file from a free site and created a new favicon.ico file with the new icon. 

Next I needed to change the text on the attachment. This should be simple and it is. For some reason my Google Fu wasn't treating me well so I started looking around in the code. The answer was in there. Just had to find "Web site created using create-react-app" in the code somewhere and replace it. Eventually I found it in a meta tag on line 9 of the index.html file. This was also the place where favicon.ico was referenced. I was in the right place, figuring out how to make the last change was pretty easy. 

In the manifest.json file under "short_name" object it said "React App". I deleted my previous build file. Replaced "React App" with my name and started my production build. Pushed it to github and deployed. My attachment was looking proper.

The head tag of your index.html seems to be the sweet spot for your attachment. You can change the color in a meta tag. I am not sure of what else you can do here. Surely you are only limited by your imagination and determination. This is what I have for now...
Why Chatbots are so bad - TerminusDB Discussion #12
Tags: ai, chatbot, nlp, tech
Published: 2020-05-31 23:49:08

---
title: Why Chatbots are so bad - TerminusDB Discussion #12
published: true
description: Every week the TerminusDB core team get together to hear a talk led by one of our members. The discussions are always very interesting, so we thought we'd share. This week we have our developer advocate talking about Why chatbots are so bad.
tags: ai, chatbot, nlp, tech
---
Every week the TerminusDB core team get together to hear a talk led by one of our members. The discussions are always very interesting, so we thought we'd share. This week we have our developer advocate talking about Why chatbots are so bad.
Why people that work in technology should learn Brazilian Jiu Jitsu
Published: 2020-05-31 23:15:41

> Warning: Non technical blog ahead.

I've been a huge fan, advocate, and practitioner of Brazilian Jiu Jitsu for the last 6 years and think a lot of people that work in tech(and don't work in tech) would find a lot of benefit and enjoyment through training regularly.

## Why people in tech?

Working in tech, Ive noticed the field caters to people who think either creatively, analytically, or both.

I cant think of a better physical activity for someone who enjoys solving problems. You constantly need to be solving problems that your partner presents. The interesting thing is when your partner changes their position, you need to reorient your solution to the problem. This is super unique to problems we solve at work, because the problems in Brazilian Jiu Jitsu are dynamic and change multiple times within seconds. No two sparring sessions(or live training) will ever be the same.

Surprisingly or not so surprisingly, BJJ has been compared to human chess by people like Joe Rogan. Its analytical, creative, and something physical you can do with like minded people. Some of the best people I have ever met have been at BJJ gyms.

## Why Brazilian Jiu Jitsu?

> Reason #1

This is just my personal experience and I am a bit biased but I tend to lean towards grappling sports like BJJ, Wrestling, Sambo, Judo etc because you can do them at higher intensities without getting hurt (when done correctly and safely with partners you trust). In addition, this ability to train at high intensities safely allow you to replicate real life scenarios using empirical data, not just theory, which makes it great for self defense.

> Reason #2

Brazilian Jiu Jitsu is great because its a sport you can do regardless of how in shape or how old you are.

> Reason #3

BJJ has become pretty popular and it's fairly easy to find a good gym in your area.

> Reason #4

Building self confidence. This one is ***huge***. 

## Having a beginner mindset with something new.

Depending on where you're at in your career or in your life, it's hard to find something new where you can show up to everyday learning something different. I think its important to have something where there is no end, just like product, design, marketing, engineering or any craft you do as a profession and you take it seriously enough to keep growing. Just showing up everyday, learning something new, getting better, day in and day out.

## How do I get started?

Given the climate in the world right now, BJJ gyms are most likely closed. So when they open and you feel comfortable, look for a good rated BJJ or MMA gym in your area by simply checking on google or asking around.

There are multiple facets and a lot of things I am not going to cover in this post. BJJ Gym vs MMA Gym, Gi vs No Gi, competition focused school vs not etc. But feel free to comment below and ask any questions and I will do my best to help out and answer your questions.

Thanks for reading! 

Scott