teleren/devto huggingface dataset:
Study Plan for 2020
Tags: goals, motivation, devjournal
Published: 2020-01-02 14:51:52

I started my activity in Dev Community by listing up the goals for this year in [the previous post](https://dev.to/nozomuikuta/hello-dev-h91).

In this post, I will embody the goals as much as possible so that I can achieve. Some of them might be changed or updated due to my situation, but I will do my best.

# Launch my GitHub pages site as a portfolio

## Done

- Create a repository whose name is same as my account name
- Set a link to the site in my profile pages of the sites I'm using

## ToDos

- Define contents
- Chose technology stack for the site
- Implement the site
- Launch the site and make the announcement in the sites I'm using

# Vue.js

## Done

- Read 100% of [the official documentation (2.x)](https://vuejs.org/)
- Read parts of the code (2.x)

## ToDos

- Read 100% of the code (3.x)
- Write a series of posts of how `Vue.js` works (3.x)

# Nuxt.js

## Done

- Read all the guide and API sections of [the official documentation](https://nuxtjs.org/)
- Read parts of the code

## ToDos

- Read 100% of the code
- Write a series of posts of how `Nuxt.js` works

# Web Components

## lit-html

### Done

- Read 100% of [the official documentation](https://lit-html.polymer-project.org/)
- Read parts of the code

### ToDos

- Read 100% of the code
- Write a series of posts of how `lit-html` works

## LitElement

### Done

- Read 100% of [the official documentation](https://lit-element.polymer-project.org/)

### ToDos

- Read 100% of the code
- Write a series of posts of how `LitElement` works

# Get familiar with Kubernetes

## Done

- Read a book about Kubernetes
- Read parts of [the official documentation](https://kubernetes.io/docs/home/)
- Read parts of [the official documentation of Rancher](https://rancher.com/docs/rancher/v2.x/en/)

## ToDos

- Read 100% of the official documentation
- Read 100% of the official documentation of Rancher

## WantToDos

- Read 100% of the code
- Read 100% of the code of Rancher
- Write a series of posts of how `Kubernetes` works
- Write a series of posts of how `Rancher` works
SSSAG Stack, the Stack of Tomorrow
Tags: apollo, graphql, stencil, svelte
Published: 2020-01-02 14:50:34

Stacks change as needs change and looking at the technologies available and the solutions available my belief is the stack that addresses most modern concerns is what I would call the SSSag Stack. Let me walk through the parts and what they solve.

## 1- Serverless

 This represents using serverless architecture and possibly the serverless framework. Creating API and other microservices using AWS Lamba, Google or Azure Cloud Functions offers a solution that easily scales up and down with use making modern application growth a less scary operational issue.

## 2/3 - Svelte and Stencil

 Unlike other front-end frameworks, Stencil and Svelte are compilers that compile the code for production meaning you can ship plain reactive vanilla JS without the bloat of including the framework in the package. This results in very small bundle sizes which make for better speed and better user experience. I expect these to be adopted more and more in the coming years.

#4/5 - Apollo and GraphQL

 Apollo Server makes it very easy to create GraphQL Apis. The beauty of GraphQL is you can have one API endpoint and more flexible requests. This means one query can result in searching multiple sources and only returning the specific data requested. With Serverless architecture where your costs can grow the more individual API calls that occur, GraphQL really can help keep those calls minimal.

Make sure to keep an eye out for my youtube channel as I make videos on how to make applications using these technologies.
Pattern matching ฟีเจอร์ใหม่ของ Ruby 2.7
Tags: ruby
Published: 2020-01-02 14:50:26

[Ruby 2.7](https://www.ruby-lang.org/en/news/2019/12/25/ruby-2-7-0-released/) ที่เพิ่งออกมาเมื่อวันคริสมาสต์ที่ผ่านมานั้น ได้เพิ่มฟีเจอร์ใหม่ของภาษาที่สำคัญคือ [Pattern Matching](https://en.wikipedia.org/wiki/Pattern_matching)

Pattern Matching ช่วยให้เราเปรียบเทียบโครงสร้างของข้อมูล ว่าอยู่ในรูปร่างแบบไหน และ เราสามารถแกะค่าบางค่าจากโครงสร้างนั้นได้ (ถ้าอ่านเจอใน document จะเรียกว่าการ deconstruct)

สำหรับ Ruby 2.7 จะใช้ syntax คือ case/in ซึ่งโครงสร้างจะเป็นประมาณนี้

```ruby
case val
in pattern_1
  # action_for_pattern_1
in pattern_2
  # action_for_pattern_2
else
  # action_when_no_any_match
end
```

คือเราเขียน pattern หลังจาก in และเขียนโค้ดที่ต้องการทำงานถ้าเกิดค่าที่เรามาเช็คใน case ตรงกับ pattern ของ in นั้นๆ และในส่วนของ else คือการทำงานในกรณีที่ไม่ match กับ pattern ไหนเลยที่เราเขียนไว้

มาดูตัวอย่างกันดีกว่า ตัวอย่างแรกเป็นการเขียน pattern matching ค่าที่อยู่ใน Array

```ruby
array = [0, [1, 2, 3]]

case array
in [0, [a, *rest]]
  p a     # a จะเป็นค่า 1
  p rest  # rest จะเป็น [2,3]
end
```

จะเห็นว่า pattern เรามีตัวแปร a ในตำแหน่งที่ 1 ของค่า array ที่ซ้อนอยู่ ทำให้ a มีค่า 1 และ *rest เป็นการ matching ค่าที่เหลือทั้งหมดของ array ทำให้ rest เป็น array ที่มีค่า [2, 3]

ต่อไปเป็นตัวอย่าง pattern maching ค่าที่อยู่ใน Hash

```ruby
require "json"

json = <<END
{
  "name": "Alice",
  "age": 30,
  "children": [{ "name": "Bob", "age": 2 }]
}
END

case JSON.parse(json, symbolize_names: true)
in {name: "Alice", children: [{name: "Bob", age: age}]}
  p age # age จะมีค่าเป็น 2
end
```

จากตัวอย่างจะเห็นว่าเราเอา json string มา parse ให้เป็น Hash จากนั้นลองเขียน pattern เพื่อ deconstruct ค่า age ที่อยู่ใน key `:children` และอยู่ใน Hash key `:age` ที่ซ้อนอยู่ใน array ตัวแรกอีกที

พอเราใช้ Pattern Matching ได้ก็ทำให้เราแกะค่า (deconstruct) ของที่ซ้อนอยู่ในโครงสร้างหลายชั้นแบบนี้ได้ง่ายๆขึ้นมากๆ

Ref: อ่านรายละเอียดเรื่อง syntax เพิ่มเติมได้ที่นี่ [Pattern matching - New feature in Ruby 2.7](https://speakerdeck.com/k_tsj/pattern-matching-new-feature-in-ruby-2-dot-7?slide=10)
Tip 2: History Forgets Common Commands
Tags: linux, zsh, dotfiles
Published: 2020-01-02 14:10:09

With [Tip 1](https://dev.to/rawkode/tip-1-per-directory-zshell-history-iph), we looked at how we can switch our history between local directory and global.

Regardless of which you're using, some stuff just doesn't belong there; right?

Do you really use to <kbd>Control + r</kbd> or <kbd>Up</kbd> to find `ls`, `cd`, or `rm`?

No. The answer is no.

## Keeping History Clean

Here are 3 short and sweet options you can configure in your `zshrc` file to keep your history lean, mean, and clean.

### Forget Duplicate Commands

Zsh can de-duplicate your command history :smile:

Enable this behaviour with `setopt HIST_IGNORE_DUPS`

### Forget Common Commands

The next approach to keeping our history clean is using `HISTIGNORE`.

```shell
HISTIGNORE="&:ls:[bf]g:exit:reset:clear:cd:cd ..:cd..:zh"
```

This is a global list of commands and patterns that you don't want to keep.

Use this for all your trivial commands that don't warrant searching later.

### Forget Space Commands

Another great feature of Zsh is hiding commands preceding with a <kbd>Space</kbd>

Enable this behaviour with `setopt HIST_IGNORE_SPACE`


```shell
# Not stored in history
 ls

# Stored in history
ls
```

---

You can find more examples of tweaking your history [here](https://gitlab.com/rawkode/dotfiles/blob/master/dotfiles/zsh/includes/history.zsh)
Quickly set up a Greenplum environment on GCP
Tags: greenplum, gcp, docker, database
Published: 2020-01-02 14:06:53

This quick-start guide is part of a series that shows how to set up relational databases on Google Cloud Platform, for developing and testing purposes.

This guide will show you how to create an Greenplum environment running inside your Google Cloud Project.

## Create a Compute Engine VM

Using Cloud Shell:
```
# Create the Greenplum GCE instance
gcloud compute instances create greenplum \
  --zone=us-central1-c \
  --machine-type=n1-standard-1 \
  --image-project=debian-cloud --boot-disk-size=10GB \
  --image=debian-9-stretch-v20190916 \
  --boot-disk-type=pd-standard \
  --boot-disk-device-name=greenplum \
  --scopes=cloud-platform
```

## Configure your VM with Greenplum

Using Cloud Shell:
```
# Connect to the greenplum VM
gcloud compute ssh --zone=us-central1-c greenplum

# Login as super user
sudo -s

# Install Docker
curl -sSL https://get.docker.com/ | sh

# Install Git 
apt-get install git

# Install postgresl client
apt-get install postgresql-client

# Clone greenplum official repo
git clone https://github.com/greenplum-db/gpdb

# Go to to the docker directory
cd gpdb/src/tools/docker/ubuntu16_ppa-persistent

# Build and run
docker build -t local/gpdb .
mkdir -p /tmp/gpdata/
docker run -d -p 5432:5432 -h dwgpdb -v /tmp/gpdata:/data local/gpdb
```

## Load your Greenplum database with data

Using Cloud Shell:
```
# Verify GPDB is installed and started up successfully
docker ps -a
docker logs --follow <GPDB_CONTAINDER_ID>

# Wait for the message to appear:
# ===> GPDB starting process has completed, check the result above   
# or try to connect
# Leave the logs command, by pressing CTRL + C

# Log into the GPDB container
docker ps
docker exec -it <GPDB_CONTAINER_ID> bash

# Log as the gpadmin user
su gpadmin

# Verify that the GDPB instance is running
gpstate

# Create a DB called messages_db
createdb messages_db

# Log into the new DB
psql messages_db

# Create tables and populate with Data
CREATE TABLE Users (uid INTEGER PRIMARY KEY,
                    name VARCHAR);
INSERT INTO Users
  SELECT generate_series, random()
  FROM generate_series(1, 100000);

CREATE TABLE Messages (mid INTEGER PRIMARY KEY,
 uid INTEGER REFERENCES Users(uid),
 ptime DATE, message VARCHAR);

INSERT INTO Messages
   SELECT generate_series,
          round(random()*100000),
          date(now() - '1 hour'::INTERVAL * round(random()*24*30)),
          random()::text
   FROM generate_series(1, 100000);
```

And that's it!

If you have difficulties, don’t hesitate reaching out. I would love to help you!
Favorite Refactoring Techniques: Combine Functions Into Transform
Tags: combinefunctions, refactoring
Published: 2020-01-02 13:51:23

---
title: Favorite Refactoring Techniques: Combine Functions Into Transform
published: true
description: 
tags: combine functions, refactoring
series: Favorite Refactoring Techniques
---

When multiple functions have related behavior that acts on an object together, they can combine into a single function to transform an object. Behavior is the main way to determine of multiple functions should be combined. Let's look at an example. 

Say, we have the following functions that calculates the total price at a restaurant. 

{% gist https://gist.github.com/Naomi-Dennis/4d69cda562c484ff0ecb1bd9d67ef9b7 %}

The calculation functions all relate to determining the total. Because we would need to call `calculateDiscount` whenever we call `calculateSalesTax` or `calculateTip` to get an accurate total; we should consolidate these calls into a single function. 

{% gist https://gist.github.com/Naomi-Dennis/1e90f990d9c41a894b64f729aabaee49 %}

Another way of determining the relationship between functions, is to look at its input, output and name. All calculate functions accept a number and return a number. Based on the semantic meaning of calculating the discount, sales tax and tip, we can determine these methods will likely, _only_, be called together. After this, we can peek into the functions and get a better idea of its behavior. In our example, each calculation function is returning a changed price.

Thus, we create a brand new function that combines all calculations and returns a _transformed_ price.
A Full-stack Application with Vue and Node
Tags: vue, node, showdev, webdev
Published: 2020-01-02 13:45:19

A few weeks ago, I shared on GitHub an example of a full-stack app built with Vue on the frontend and Node/Express on the backend. So I thought it would be helpful to share it here as well so more developers can learn from it.

This demo covers things like:

- Authentication/Authorization with JWT
- Routing
- Communicating with a backend API
- Managing the state of the app with Vuex
- Uploading Images
- Forms Validation
- Handling errors
- Loading states
- More stuff

You can view the source code of both the [frontend](https://github.com/TahaSh/vue-forum-app) and the [backend](https://github.com/TahaSh/vue-forum-app-backend) projects on GitHub. And you can also see [a live demo of the app](https://vue-forum-app.herokuapp.com/).

I hope you can learn a thing or two from it 😄!

---

Links:

- [Frontend](https://github.com/TahaSh/vue-forum-app)
- [Backend](https://github.com/TahaSh/vue-forum-app-backend)
- [Live Demo](https://vue-forum-app.herokuapp.com/)
How to get number of days in a month with JavaScript
Tags: javascript, date
Published: 2020-01-02 13:44:38

---
title: How to get number of days in a month with JavaScript
published: true
description: 
tags: javascript, date
canonical_url: https://timonweb.com/tutorials/how-to-get-number-of-days-in-a-month-with-javascript/
---


```javascript
const getDaysInMonth = date =>
  new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();

getDaysInMonth(new Date(2019, 1)); // 28 days in February 2019
getDaysInMonth(new Date(2019, 3)); // 30 days in April 2019
```

There are **two things** you need **to understand** about dates in JS to get how this function is working:

1. **Months** in **JavaScript** `Date` objects are **null-indexed**, which means 0 is January, 1 is February ..., and 11 is December;
2. When we create a `Date ` and **provide zero** as the third argument `new Date(2019, 2, 0)`, we literally say **"the last day of the previous month."**.

### Examples:
```javascript
getDaysInMonth(new Date(2019, 1, 0)); // January 31st, 2019
getDaysInMonth(new Date(2019, 2, 0)); // February 28th, 2019
getDaysInMonth(new Date(2019, 0, 0)); // December 31, 2018
```

So in plain English, in `getDaysInMonth` we take a **date**, **increment a month**, so we get the next month and at the same time, **set a day for the next month to "0"** which sets the date to the last day of the previous month, which, in turn, is our initial month. Then we use `getDate()` function that **returns us the day as an integer.**


> Originally posted at: https://timonweb.com/tutorials/how-to-get-number-of-days-in-a-month-with-javascript/
Learn Everything about APIs
Tags: webdev
Published: 2020-01-02 13:37:14

---
title: Learn Everything about APIs
published: true
description: This is a website about my development experience for APIs. So, I curated them into one place.
tags: webdev
---

This is a website about my development experience for APIs. So, I curated them into one place. I hope this will help you. Thanks :)

Public APIs collections: https://apicoding.io/public-apis

My API developments experience: https://apicoding.io/learn

APIs tools https://apicoding.io/tools

APIs Resources https://apicoding.io/resources/

This all I curated into a website.

You can also contribute your experience here.
Fun with HTML5 form validation
Tags: html, formvalidation, css
Published: 2020-01-02 13:27:16

---
title: Fun with HTML5 form validation
published: true
description: Using and abusing the invalid CSS pseudo-class, in order to give positive feedback to users.
cover_image: https://screenshot.codepen.io/321502.yLLKNpj.d5815d27-6f45-4f4f-bf30-2bbd966e10f0.png
tags: HTML5, Form validation, CSS
---

The other day, I was messing about with HTML5 native form validation, and I unthinkingly included the following rule:

```css
:invalid {
  border: solid 1px red;
}
```

I wanted to avoid listing out `input`, `select` and `textarea` in the CSS selector, so I figured I'd omit the tag names and save the bytes.

When I preview the page, I noticed a red border around the whole form. I realised that the `:invalid` pseudo-class could also be applied to _other_ elements, to give the user feedback on how well they were filling out the form. Here's my proof-of-concept:

{% codepen https://codepen.io/ross-angus/pen/yLLKNpj %}

One of the limitations of HTML5 native form validation is that form fields are either `:valid`, or `:invalid`. There's not really a state for <q>the user hasn't filled this in yet</q> (note that [the `:empty` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:empty) describes a different concept). This means that if you go overboard on styling up the `:invalid` pseudo-class, the user will be presented with a _lot_ of negative feedback, when they first land on your form. As it's hard enough to wrestle your user's private data from them, let's not add any more obsticles in the way.

I've split my example form into three elements, using `fieldset` elements. These will also take on a `:valid` or `:invalid` pseudo-class, as long as there's at least one form element inside them, with a `required` attribute.

This allows the form to give the user feedback as each chunk of the data is completed.

I've heavily abused the `:before` and `:after` elements, in order to provide <q>thank you</q> messages. Note that as `input` elements are self-closing, there isn't such a concept as `:before` or `:after` for them. If you wanted to add a <q>thank you</q> message which only appears after an individual form field has been completed, then the following markup pattern will help:

```html
<p>
  <label for="my-input">Give me input</label>
  <input id="my-input" name="my-input" required>
  <span class="thanks"></span>
</p>
```

Then, the following CSS would give you a <q>thank you</q> message:

```css
input:valid + .thanks {
  content: "Thank you for your input, human";
}
```

Note that [putting messages into the `content` rule is a terrible idea](https://tink.uk/accessibility-support-for-css-generated-content/). And as the aim of accessibility is to provide as close an experience as possible for all users, let's not encourage one set of users, while ignoring others.
Dev.to is one of the best open-source Rails apps you can contribute to
Tags: ruby, programming, opensource
Published: 2020-01-02 13:25:58

This week the [Ruby on Rails podcast](http://5by5.tv/rubyonrails) released [episode 301](http://5by5.tv/rubyonrails/301), which I was *very* lucky to be a part of. 

On the episode [Brittany Martin](https://twitter.com/BrittJMartin) and [I](https://twitter.com/Schwad4HD14) talked about several topics, including ParisRB and combating imposter syndrome with chess and bodyPUMP.

Also, I went on at length about the [dev.to source code on Github](https://github.com/thepracticaldev/dev.to). For those who don't know, this application is primarily a Ruby on Rails backend. 

As a bonus, it handles millions in monthly traffic and is a very mature, elegant application. It hooks into tooling such as Algolia and Pusher, and other very interesting technologies. The most beautiful part is it's **open source**.

That means if you've been working on Rails webapps for anywhere from 1-10 years, it's a fantastic and evolving codebase to explore and learn. 

Never written a publicly accessible API before? Just have a look at how it's been architected for dev.to!

Unsure about notification handling on a large scale for the first time? Fear not- there's a great example to be had here!

Very often people look to Discourse (another fantastic open source Rails app)- but if you're really looking to upskill from Junior to Middleweight or Middleweight to Senior as a Rails developer, working through this codebase could be the boost you need!

Check out the episode:

http://5by5.tv/rubyonrails/301
Most asked questions I get on the Design System
Tags: designsystem, webdev, components
Published: 2020-01-02 13:20:06

---
title: Most asked questions I get on the Design System
published: true
description: 
tags: Design system, Web Development, Components
---

For the last 2 years, I am working on the Design System. For the last 1 year, I am working on building a Design system for my company. 

I have given a few talks on the same locally and international too. I keep sharing my learning around DS on my social media profiles such as Twitter or Linkedin. Yeah!! folks reach to me with their doubts and questions around design system and here are those:

### 1. Which components should be part of the design system?

Answer: It is going to be tempting to add as much as components in the design system but as Design System author you should make sure you follow "atomic components approach". Which means, that break the components to the smallest level and keep only those 'atomic' components in your design system.

You can also look into the famous design system to get the starting components of inspiration.

### 2. How you are taking care of the multiple variants of the components?

Answer: The best approach would be to handle the variants in the same component code file. The consumer can change the variant by passing the props with the component and component API can handle it internally. 

The issue will come when you have multiple variants or a lot of variants. In such a case, better to create the different component files as per the variant or group the variant to create the separate component file.

### 3. How you are doing the testing of the components?

Answer: testing of the components is done at multiple levels. UI Devs do the unit testing by test cases. In the CI/CD, use the linters such as ESLinters, CSS, HTML validator, etc. 

Testers do the testing manually, automation as well as creating patterns or modules to test if the DS is working fine when users use it to build something.


### 4. How you are doing components styling?

Answer: As we have more than 1 tech stack to follow, we are using the SCSS to have the reusable styling lib. One can use the whole CSS library or can have the modular CSS. 

If you don't want to have the SCSS. You can do the CSS-in-JS solution in ReactJS.

### 5. How you are taking care of versioning?

Answer: For versioning, we are first tagging our build in the GitHub before every major patch. We are using NPM versioning for the DS build. 


### 6. What all accessibility guidelines to follow?

Answer: Accessibility can vary from organization to organization. We are following AA and for few components AAA. Few things we are taking care of in Accessibility - color contrast, forms elements, Dos and Don'ts guides, ARIA* tags for few non-semantic components.


Same blog is also published on my own blog - nehasharma.dev
Record the system sound using CPP
Tags: cpp, msdn, nvidia, audiorecording
Published: 2020-01-02 13:15:23

I have a screen capture application using Desktop Duplication API. This application generate the video file in _.h264 format now I want to record system audio also (Not system mic sound) and (sync with this _.h264 format file or generate separate audio file). Please suggest any way or link of any sample application that captures the system sound.
The "Build me a website" scam
Tags: webdev, watercooler
Published: 2020-01-02 12:59:01

I'm skirting around a scam. I know it's a scam. But I'm not sure how.

The details:

I've had someone contact me from far outside of my usual area, asking me to build them a website.

She can't talk on the phone because she says she is hard of hearing.

She evades my questions that ask where she found me.

Her "business" is an online clothing brand, which has absolutely zero footprint online, not registered on companies house, no social media, etc.

She immediately accepted the rough estimate, which I costed WAY higher than I usually would (sketchiness tax).

She wants to pay by credit card asap.

I asked for an address and a business name for the invoice. What I got back was residential and very generic.

And in addition to the above, the language and grammar in the emails were slightly off in a few places.

*"What is the name of the machine/merchant service you are going to use to charge my credit card for the upfront deposit and its percentage processing fee?"*

I reached out to a chap who works in sales for a web agency and he's had something similar, but couldn't remember the specifics. He - like me - kept it at arm's length, and eventually decided against letting them make any kind of payment.

I'm not going to correspond any further. All the alarm bells have gone off in my head to know this is not worth looking into.

But I'm itching to know... how would this have worked?

Has anyone come across this kind of request before, and if so, what did you do?