teleren/devto huggingface dataset:
Golang - EP02. เตรียม Dev environment
Tags: go, tutorial
Published: 2020-07-06 22:25:10

จะเริ่มต้น dev ด้วย golang เราต้องการ 2 สิ่ง คือ 
- Text Editor
- Go Binary

## Text editor
ขอแนะนำเป็น [Visual Studio Code] (https://code.visualstudio.com/download) มันฟรีจร้า ส่วนถ้ามีกำลังทรัพย์ซักหน่อยก็ไปจัดตัวนี้เลย [GoLand](https://www.jetbrains.com/go) เค้าว่ากันว่าดี... แต่แพงนะ

## Go Binary
อันนี้จำเป็น เพราะเป็นพวก library files และ tool ต่างๆ ที่จำเป็นต้องใช้ ก็ไป download กันได้ ตาม [link download](https://golang.org/dl/) นี้เลยจัดไป! (ณ วันที่เขียน post นี้จะเป็น go version 1.14.4)

## Windows Terminal
จริงๆแล้วเราสามารถใช้ `Window cmd` เพื่อ run คำสั่งของ Go ได้ แต่ยังไงขอแนะนำของใหม่ (ณ ตอนที่เขียน blog นี้) ซึ่งก็คือ Windows Terminal สามารถ download ได้ผ่านทาง Microsoft Store 

![](https://i.imgur.com/l9yUl33.png)

## มาเริ่มกันเลย
ตัว OS ของผมเป็น windows มันจะมี file `.msi` ให้ download

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

หลังจาก download เรียบร้อยก็ double click อย่างที่คุ้นเคย แล้วก็ Next, Next, Yes, Yes ไปตามระเบียบ ...

หลังจากที่ install เรียบร้อยแล้ว ตัว Go binary จะ extract file ต่างๆไปวางไว้ที่ folder `C:\Go`

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

ถัดมาให้เข้าไปดูที่ Environment Variables

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

Double click ที่ Variable `Path` เพื่อดู path ทั้งหมดที่ set เอาไว้

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

และดูว่ามี path `C:\Go\bin` อยู่แล้วหรือไม่ ถ้ายังไม่มีให้กด New แล้วก็ Browse ไปที่ folder `C:\Go\bin` เพื่อ add เข้ามา

![](https://i.imgur.com/ilAmWNO.png)

ถ้าทุกอย่างเรียบร้อยดี ให้ทดสอบโดยการ เปิด `Windows Terminal` ขึ้นมา

![](https://i.imgur.com/R97Cqy5.png)

และพิมพ์ command `go version` แล้ว enter จะได้ผลลัพธ์แบบนี้

![](https://i.imgur.com/YXcco2J.png)

ต่อมาเราจะลง `Visual Studio Code` กัน สามารถ download ได้ที่ [Link] (https://code.visualstudio.com/download) นี้ ซึ่งต่อไปนี้ผมจะเขียนชื่อมันสั้นๆว่า `vscode` (วี-เอส-โค้ด) นะครับ

หลังจาก install เรียบร้อยแล้วให้ เปิด `vscode` ขึ่นมา ก็จะเห็นหน้าตาหล่อๆแบบนี้

![](https://i.imgur.com/QAo6jOs.png)

ต่อมาเราจะ install extension สำหรับปรับแต่ง เราสามารถใช้ `vscode` เพื่อเขียน Go ได้สะดวกขึ้น [1] เลือกที่ Tab "Extension" > [2] พิมพ์ค้นหา "Golang" > [3] กด `Install`

![](https://i.imgur.com/sw5jZjy.png)

หลังจากลง extension เรียบร้อยแล้ว เราจะ install tools ต่างๆของ Go เพื่อ support การเขียน code ของเรา กด `Ctrl + Shift + p` (ทั้งสามปุ่มพร้อมกัน) เพื่อเปิด `Command palette` ขึ้นมา 

จากนั้น [1] พิมพ์ `go install` ในช่องค้นหา > [2] กดที่ `Go install / update tools`

![](https://i.imgur.com/i39pX9e.png)

แล้วมันจะให้เลือกว่าเราจะ install หรือ update package ไหนบ้าง [1] เลือกติ๊กถูกเพื่อเลือกทุก package > [2] กด Ok

![](https://i.imgur.com/DSWVQ9q.png)

รอให้ `vscode` download และ install package ทั้งหมด ในขั้นตอนนี้อาจจะใช้เวลาซักหน่อยนึง ก็ออกไปเตะบอลก่อนแล้วค่อยกลับมาดูก็ได้นะ

![](https://i.imgur.com/QYu6Ipc.png)
![](https://i.imgur.com/iTyjpXo.png)

ถ้าทุกอย่างพร้อมแล้ว ใน [post ถัดไป]() เราจะมาเริ่มเขียน "Hello world" ด้วย Golang กัน [ไปต่อกันเลย]()
Functions in JavaScript
Tags: javascript, beginners, functional, codenewbie
Published: 2020-07-06 22:24:17


## What are functions? What is their role in JavaScript?

A function is a JavaScript code block that can be executed by calling/invoking it. A function has the following essential parts:

1. It is declared using the `function` keyword.
2. The function name then follows it. This is the name that will be used to call the function.
3. You can pass arguments to a function. These are values that could be dynamic.
4. The arguments are assigned to parameters of the function and are encapsulated in round brackets `()`
5. This is followed by the code block that will be executed whenever the function is called.
6. The code block is surrounded by curly braces `{}`

![Function Image](https://dev-to-uploads.s3.amazonaws.com/i/38grcgyza4pn2e704bbk.png "Example of a JavaScript function")

A function is used to create reusable code blocks. If you a have piece of code that is to be executed multiple times, it is a good idea to convert it into a function.

### Function Returns

A function can return you something once it has finished executing the code. This is not always the case. Sometimes functions execute the code and end.

Function with return:

```javascript
function sum(a, b) {
    return a + b; // You return the value using return keyword
}

const x = sum(2,5);
const y = sum(7,9);
console.log(x); // 7
console.log(y); // 16
```

Function without return:

```javascript
console.log("Hello World!");
// Hello World
// undefined
```

If you run the above example in your browser console, you would see that even though the statement "Hello World" is printed in the console, the function is not returning anything. That is why you would see your browser print out undefined after the statement.

### JavaScript in-built functions

You don't always have to write your functions. JavaScript comes with a ton of functions that are ready to use.

```javascript
console.log(parseInt()); // NaN (Not a number)
console.log(parseInt("234xyz")); // 234, parseInt ignore non integer
console.log(Math.random()); // 0.00746544513267
console.log(Date.now()); // 1590557812411
```
Daily Commit Counts as a Terminal Graph w/ Emojis 🚀
Tags: git, sql, gitqlite, react
Published: 2020-07-06 22:19:42

Here's a use case of a project I recently made public. It's called [gitqlite](https://github.com/augmentable-dev/gitqlite) and lets users run SQL queries on git repositories.

Display a terminal chart of commit counts for a repo (`facebook/react`, here) by day, for the past N days (30 in this case):

```
cat query.sql | gitqlite --repo https://github.com/facebook/react
+------------+-----+-------+----------------------------
|    DAY     | DOW | COUNT |          COMMITS           
+------------+-----+-------+----------------------------
| 2020-07-06 | Mon |     6 | ✅✅✅✅✅✅               
| 2020-07-05 | Sun |     0 |                            
| 2020-07-04 | Sat |     0 |                            
| 2020-07-03 | Fri |     0 |                            
| 2020-07-02 | Thu |     2 | ✅✅                       
| 2020-07-01 | Wed |    13 | ✅✅✅✅✅✅✅✅✅✅✅✅✅ 
| 2020-06-30 | Tue |     8 | ✅✅✅✅✅✅✅✅           
| 2020-06-29 | Mon |     1 | ✅                         
| 2020-06-28 | Sun |     0 |                            
| 2020-06-27 | Sat |     0 |                            
| 2020-06-26 | Fri |     2 | ✅✅                       
| 2020-06-25 | Thu |     2 | ✅✅                       
| 2020-06-24 | Wed |     0 |                            
| 2020-06-23 | Tue |     5 | ✅✅✅✅✅                 
| 2020-06-22 | Mon |     0 |                            
| 2020-06-21 | Sun |     0 |                            
| 2020-06-20 | Sat |     0 |                            
| 2020-06-19 | Fri |     2 | ✅✅                       
| 2020-06-18 | Thu |     0 |                            
| 2020-06-17 | Wed |     1 | ✅                         
| 2020-06-16 | Tue |     2 | ✅✅                       
| 2020-06-15 | Mon |     1 | ✅                         
| 2020-06-14 | Sun |     0 |                            
| 2020-06-13 | Sat |     1 | ✅                         
| 2020-06-12 | Fri |     3 | ✅✅✅                     
| 2020-06-11 | Thu |     1 | ✅                         
| 2020-06-10 | Wed |     0 |                            
| 2020-06-09 | Tue |     0 |                            
| 2020-06-08 | Mon |     0 |                            
| 2020-06-07 | Sun |     0 |                            
+------------+-----+-------+----------------------------
```

The SQL in `query.sql` looks like:
```sql
WITH RECURSIVE
days(day) AS (
    SELECT strftime('%Y-%m-%d', DATETIME('now'))
    UNION ALL
    SELECT strftime('%Y-%m-%d', (SELECT DATETIME(day, '-1 day'))) FROM days
    LIMIT 30
)
SELECT
    days.day,
    substr('SunMonTueWedThuFriSat', 1 + 3*strftime('%w', days.day), 3) as dow,
    IFNULL(count, 0) AS count,
    CASE count IS NULL WHEN true THEN '' ELSE printf('%.' || (IFNULL(count, 0)) || 'c', '✅') END AS commits
FROM days LEFT JOIN (
    SELECT strftime('%Y-%m-%d', committer_when) AS day, count(*) AS count FROM commits GROUP BY day
) c ON c.day = days.day
```

More examples are available in the [README](https://github.com/augmentable-dev/gitqlite)
Links to My Written Works
Published: 2020-07-06 21:53:15

https://dev.to/bashirk

***
**Link to my *undergraduate research* paper**; [Research paper](https://drive.google.com/file/d/1SeYDT9gsicKA1O-WR4rjzLlCnDPBwXfl/view?usp=sharing)

***
**Link to my *undergraduate research* documentation**; Research project [documentation](https://drive.google.com/file/d/1Ro_JCG58DKo6q2uoC46M3r71hkndmynQ/view?usp=sharing)

***
**Links to my blog posts**:

[The Proven Way to Become a Cloud Engineer](https://dev.to/bashirk/the-proven-way-to-become-a-cloud-engineer-in-2020-3ic3)

***
[A Gentle Dive into Azure Quantum](https://dev.to/bashirk/azure-quantum-here-s-a-gentle-dive-2dcf)

***
[Part 1: Painless Way to Deploying a NodeJS App](https://dev.to/bashirk/the-painless-way-to-deploying-your-nodejs-app-on-azure-part-1-14fi)

***
[Part 2: Painless Way to Deploying a NodeJS App](https://dev.to/bashirk/the-painless-way-to-deploying-your-nodejs-app-on-azure-part-2-5151)

***
[Part 1: A Gentle Introduction to Serverless Computing](https://dev.to/bashirk/what-is-serverless-a-gentle-introduction-to-azure-functions-4hah)

***
[Part 2: A Gentle Introduction to Serverless Computing](https://dev.to/bashirk/what-is-serverless-a-gentle-introduction-to-azure-functions-part-2-3b3j)

***
[Part 3: A Gentle Introduction to Serverless Computing](https://dev.to/bashirk/what-is-serverless-a-gentle-introduction-to-azure-functions-part-3-2nn8)

***
[DevC Akure Learning Resources GitHub Page](https://devcakure.github.io/Learning-Resources/)

***
[DevC Akure Learning Resources repository](https://github.com/DevCAkure/Learning-Resources/)

**Others;**
https://dev.to/bashirk/managing-azure-subscriptions-and-resources-part-1-1hl2

***
https://medium.com/@bashirk/managing-azure-subscriptions-and-resources-part-1-b9bac3f39654

***
https://medium.com/@bashirk/managing-azure-subscriptions-and-resources-part-2-b54b51cccca3

***
https://medium.com/@bashirk/a-surefire-way-to-becoming-a-successful-microsoft-student-partner-367eed28c19a

***
https://dev.to/bashirk
***
https://medium.com/@bashirk
***
https://scotch.io/bashirk
What do you use Rust for?
Tags: rust, discuss
Published: 2020-07-06 21:26:48

Someone noted to me recently that using Rust for general purpose microservices like interfacing GraphQL to Postgres makes no sense - it is a system-level language. So far I tend to disagree. I stopped using .Net and are cutting my AWS Lambda code in Rust for a new web project.

#### What do *you* use Rust for?
Ask Guido van Rossum a question!
Tags: python
Published: 2020-07-06 21:23:49

Have you ever wished you could ask the creator of the Python language a question?

Perhaps you want to know why he likes whitespace so much, what his favorite code editor font is, or what his favorite non-Python language is.

Now's your chance to **ask Guido a question!** The former Python BDFL will be a [keynote speaker](https://ep2020.europython.eu/events/keynotes/#Guido-van-Rossum-Q-A) at **EuroPython 2020 Online**, where he'll be answering *your* questions.

Submit your question using [this handy form](https://docs.google.com/forms/d/e/1FAIpQLScKMa7KxW18vRcn28oCd10hvQ_SSAm-cRCktlnfkTJhgfGBdQ/viewform?usp=send_form). We welcome questions from *everyone*, not just conference attendees.

We also hope to [see you at the conference](https://dev.to/listings/events/europython-2020-online-2l33).
Angular 11 - Setting up Jest
Tags: angular, jest, testing, typescript
Published: 2020-07-06 21:21:59

This is a quick guide to setup Jest in your new Angular 10 application

## 1. Install Jest

```
npm install jest @types/jest jest-preset-angular --save-dev
```

## 2. Uninstall Karma

```
npm uninstall karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-html-reporter @types/jasmine @types/jasminewd2 jasmine-core jasmine-spec-reporter
```

## 3. Remove test from `angular.json`

Remove the test section from `angular.json`, this section looks like the following:

```json
   "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        },
```

## 4. Remove `karma.conf.js` and `src/test.ts` files

## 5. Create `setupJest.ts` file

This file should have the following:

```typescript
import 'jest-preset-angular';
```

## 6. Modify `tsconfig.spec.json`
```json
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": [
      "jest",
      "node"
    ]
  },
  "files": [
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts"
  ]
}
```

## 7. Modify `package.json` file

Modify the test scripts to the following:

```json
 "test": "jest",
 "test:coverage": "jest --coverage",
```

Add Jest configuration to the end of this file:

```json
"jest": {
    "preset": "jest-preset-angular",
    "setupFilesAfterEnv": [
      "<rootDir>/setupJest.ts"
    ],
    "testPathIgnorePatterns": [
      "<rootDir>/node_modules/",
      "<rootDir>/dist/"
    ],
    "globals": {
      "ts-jest": {
        "tsConfig": "<rootDir>/tsconfig.spec.json",
        "stringifyContentPathRegex": "\\.html$"
      }
    }
}
```
A difficult start
Tags: 100daystooffload
Published: 2020-07-06 21:19:42

Mornings these days have become very difficult. I seem to wake up very early, feeling alert at least to start with. It'll be early enough for me to comfortably get ready to start work at 6:30 on most days. The problem is that, as awake as I am, my inner state is in no way ready for work -- I simply cannot function.

I've tried to not impose a rigorous start time on my day. So being ready for the day at 6:30 could mean I go for a run, or a walk with my new camera. I could catch up on reading a book or a magazine, or do some simple work on a personal project. But I can't do any of those things, because I feel that I should be working since it is a weekday. It's not a nice situation, and I don't know what to do about it yet. 

*I'm publishing this as part of 100 Days To Offload. You can join in yourself by visiting [https://100daystooffload.com](https://100daystooffload.com).*
Function Centric Services
Tags: webdev, beginners
Published: 2020-07-06 20:39:04

Function Centric Service is one of the main styles of web services, the other is Resource Centric Service. But what exactly are web services?

## Web Services:
Services available through the web that create connections between entities (ex. client and server) to make sure they can communicate with each other, by handling the logic on how to interact/communicate.

## Function Centric Services:
The basic concept is that by using function centric services you are able to call functions or objects methods on remote machines without needing to know information on them.

Actually trying to implement this in the real world was hard, even though it seems so simple. Since it had to be implemented across programming languages, everyone had to agree on a strict and precise way of passing arguments, converting values, and handling errors. In order to solve these problems function-centric technologies started to rise.

## SOAP:
With time SOAP became the most popular one. SOAP stands for Simple Object Access Protocol. The most common way to implement it is by using XML to describe and encode messages. The http protocol transports requests and responses between clients and servers. SOAP allowed web services to be discovered and allowed integration code to be generated based on contract descriptors. 

In an integration of SOAP, the web service provider exposes a set of XML resources, like Web Service Definition Language files that describe methods, endpoints and definition of data structures being exchanged with the XML Schema Definition (XSD). All these resources put together become the contract of the web service. 

As SOAP progressed there were new higher level features being added, these unfortunately came with a price. Integrating different stacks became difficult since different providers had different levels of support for web services specifications.

## JSON:
SOAP was too complicated and expensive to implement there was a need for an alternative. JavaScript Object Notation (JSON) based Representational State Transfer (REST) services started to gain popularity. 

It is easier to understand and for machines to parse and generate. JSON will allow developers to implement communication how they want without its standards stopping them.
Nx Brings High-Quality CLI Tooling to React
Tags: nx, react, monorepo, webdev
Published: 2020-07-06 20:30:33

---
published: true
title: "Nx Brings High-Quality CLI Tooling to React"
cover_image:
description: "Nx Brings High-Quality CLI Tooling to React"
tags: nx, react, monorepo, webdev
series:
canonical_url:
---

I have been a fan of both Angular and React for a while now. I think both options have their strenghths and weaknesses, but one of the things that I (and many others) like most about Angular is its CLI. If you've never used Angular, then you probably don't know what you're missing. And if you've used Angular in the past then you likely miss the power that the CLI offers. While Nx offers many benefits beyond this, one of my favorite features is that it brings the power of the Angular CLI to React and other frameworks through plugins.

For those unfamiliar with the Angular CLI, it can:

- Generate new applications
- Generate new components and other pieces of code in a consistent manner with [schematics](https://angular.io/guide/schematics-authoring)
- Unify serve, test, lint, etc., commands with [builders](https://angular.io/guide/cli-builder)
- Update dependencies and files with migrations
- Be extended with third-party libraries that integrate with the CLI

The Nx CLI uses the same technology and helps bring these features to any framework supported by first or third-party plugins. Here are a few things that you can generate with the standard [`@nrwl/react`](https://nx.dev/react/plugins/react/overview) plugin for Nx:

- Application
- Component
- Library
- Redux slice
- Storybook configuration

While these things may seem trivial, the reduced copy and paste can go a long way, and defaults for these commands can be set in the Nx `workspace.json`.

Nx was originally developed for Angular, but over time it has embraced React and other frameworks in an agnostic way and I highly recommend React developers look at this technology for their next project. If you're interested in learning more then I suggest following the official [Nx React tutorial](https://nx.dev/react/tutorial/01-create-application).

An important thing to note is that Nx is not a framework and does not intend to be one. In fact, Nx currently supports both create-react-app style applications with the `@nrwl/react` plugin, as well as Next.js and Gatsby with `@nrwl/next` and `@nrwl/gatsby` respectively.
How to fix extra list bullet in Outlook
Tags: outlook
Published: 2020-07-06 20:24:12

Even though I don't code emails anymore, I wanted to share a fix for an Outlook bug I encountered awhile back. An extra unordered list bullet appears at the end of the list even though the code itself is correct and no empty `<li>` elements are present. I learned this particular bug happens when the unordered list is the last element in an editable region, say a table cell. A situation where an unordered list is the last element doesn't happen often, hence why I hadn't encountered it before. The workaround is to trick Outlook in thinking there is another element after the unordered list. Insert this code snippet directly after the closing `</ul>` tag: `<div style="display:none;">&nbsp;</div>`

Here's an example:
    
    <p>Here is some text inside a paragraph tag</p>
    <ul>
    <li>List bullet 1</li>
    <li>List bullet 2</li>
    <li>List bullet 3</li>
    </ul>
    <div style="display:none;">&nbsp;</div>
    


I hope this saves someone some time.
Adding virtual hosts in WAMP
Tags: virtualhost, wamp
Published: 2020-07-06 20:13:41

The ability to have multiple domains running on a local server can be accomplished with virtual hosts. Setting up a virtual host in the past was tedious and time-consuming. The process involved updating multiple files that were hard to find. One of the reasons why MAMP Pro has become so popular is it automates the task of adding virtual hosts. Naturally you have to buy a license. Now WAMP makes it easy to add virtual hosts and its free. This feature is barely mentioned on WAMP's website. Googling how to add a virtual host in WAMP turns up outdated instructions. I thought I share these instructions for those who weren't aware WAMP can add a virtual host in a couple of steps.

Start WAMP and left-click the green WAMP desktop icon. If the icon is red then WAMP is not running correctly and you will need to troubleshoot the issue before continuing.
Click on Localhost. A new browser tab should open. The heading at the top of the page will say 'Server Configuration'. Scroll down to the bottom of the page and look for the subheading 'Tools'. See the screenshots below.
Click on 'Add a virtual host'. On the next page you need to fill out two fields. First type in the name of the virtual host you want to add. Whatever you type in will serve as the URL. For example if you type in 'newwebsite' as the name then the new domain's URL will be: http://newwebsite
In the second field put in the location where the website files reside on your computer. It has to be the complete file path. The files can be anywhere on your computer; they don't necessarily need to be inside the wamp folder. For myself I have one of my virtual hosts pointed to my git repository.
The third field you can leave blank. Click on the 'Start the creation of the VirtualHost' button. After a few minutes you will see the newly created virtual host listed near the top of the page.

There is no limit to the number of virtual hosts that can be added. To add another virtual host, just go back to the 'Add a virtual host' page and fill out the first two fields. To access the virtual hosts, left-click on the WAMP desktop icon, hover over 'My VirtualHosts', then choose which one to load.