teleren/devto huggingface dataset:
Push for a Deeper Understanding
Tags: productivity, learning, beginners
Published: 2019-02-12 10:37:17

---
title: Push for a Deeper Understanding
published: true
description: We are often so focused on solving the problem at hand, that we forget to ask one of the most important questions - why?
tags: productivity, learning, beginners
---

Some time ago I had a weird conversation with one of my university colleagues. He was struggling to get some basic stuff working in Angular and he asked me for help. It went something like this:

> **Him:** Do you know why this might be not working?
> **Me:** Oh, yeah, you're calling stuff in the wrong order. Move this here and move this there.
> _... sounds of coding ..._
> **Him:** Yeah, works now, thanks!
> **Me:** No problem, it's how the bootstrapping works. See, when Angular...
> **Him:** I don't care how Angular bootstrapping works. I want to build an app, not learn Angular implementation details.
> **Me:** Meh.

Sounds familiar? I had at least a dozen conversation of this kind throughout my career so far.

The problem at hand, if that's not obvious yet, is that oftentimes we are so focused on solving the problem at hand, that we forget to ask one of the most important questions: *why?*

![](https://thepracticaldev.s3.amazonaws.com/i/vyuzsxwoxnq9strreojk.jpg)

One consequence of that is pretty straightforward - the next time we come across a similar problem, we will hit the wall again and have to solve it all over again. In the "best" case scenario, the new problem will be similar enough to the old one and we will be able to copy the solution that we found before.

The other consequence is a little more profound. Every time we forget (or consciously reject) to push for a deeper understanding, we strip ourselves of a little bit of growth. Instead of learning something and being a tiny bit better programmer, we are merely a tiny bit older one.

For a singled out case, the overall difference might be marginal and barely noticeable. Over time though, the small wins (or their lack) compound and the difference is substantial.

Therefore, here's my advice which you have already figured out by now: **When you solve a problem, ask yourself: why does this solution work? What is the underlying principle that will allow me not to face this problem again?**

Have a great day!
"strange biscuits" biscuits and biscuits by tapping
Tags: diy, obniz, ai, iot
Published: 2019-02-12 09:57:57

---
title: "strange biscuits" biscuits and biscuits by tapping
published: true
description: This is from Nursery rhyme "Strange Biscuits" (famous in japan). The number of biscuit on Web site is increase by tapping a pocket.
tags: #diy #obniz #ai #iot
---

![](https://storage.obniz.io/images/6910fe54a14ac86e1547294161412)

###What's is this
This is from Nursery rhyme "Strange Biscuits" (famous in japan). The number of biscuit on Web site is increase by tapping a pocket.

###Materials
-obniz
-obniz power source - USB adaptor or battery
-Acceleration sensor - KXR94-2050

###Instructions
Connect a power source and acceleration sensor to an obniz.

(obniz) : (Acceleration sensor)
-0 : 1 (Vdd)
-1 : 3 (GND)
-2 : 6 (X)
-3 : 7 (Y)
-4 : 8 (Z)
-5 : 2 (Enable)
-6 : 5 (Self Test)

![](https://storage.obniz.io/images/c485a718bb4de5231547294255981)

Insert this circuit to your pocket this direction.

![](https://storage.obniz.io/images/ed20c527a691fd0a1547294260173)

Access this website and tap your pocket. The number of biscuits is increasing.

Keeping gap between pocket and you will improve sensitivity.

###Movie
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/_jBvsAXVlmQ/0.jpg)](https://youtu.be/_jBvsAXVlmQ)
How often do you switch your distro?
Tags: discuss, linux
Published: 2019-02-12 09:52:03

I found myself switching between various unix distributions within the last couple of years.

On one side I want to have a stable system that I can work with everyday but on the other side I want to take the adventure of exploring a new distro.

To say it with statistics: I switch my distro every 2nd month 👀

So my question to you:
**How often do you switch your distro?**

I'm curious how often you switch and what your reasons are.
Control car with iPhone's acceleration sensor
Tags: diy, obniz, ai, iot
Published: 2019-02-12 09:25:40

---
title: Control car with iPhone's acceleration sensor
published: true
description: Obniz make it easy to use smartphone sensors for electronics.
tags: #diy #obniz #ai #iot
---

![](https://storage.obniz.io/images/d3147f4937a8e6761527649846384)


You can get acceleration sensor value using only 3 lines.

Using it, the code of control car is here

###Program
https://obniz.io/explore/26
Vibrobot made with obniz
Tags: diy, obniz, ai, iot
Published: 2019-02-12 09:13:51

---
title: Vibrobot made with obniz
published: true
description: The Vibrobot can now operate from anywhere in the world.
tags: #diy #obniz #ai #iot
---

###Movie
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/CNJoc-bOvS8/0.jpg)](https://youtu.be/CNJoc-bOvS8)

A Vibrobot is a robot to which brushes are attached instead of tires, and when vibrates the brushes, it proceeds in a specific direction due to the asymmetry of the coat.
This robot can go straight ahead, turn right, and turn left by PWM controlling two vibration motors and operating the left and right brushes respectively.
In addition, a distance sensor is mounted on the front and you can confirm in real time on the screen of the smartphone whether there is an obstacle ahead.


###Control

![](https://storage.obniz.io/images/9ce446d60da90fcc1529671680170)

###Operation Method

Depending on the distance to the obstacle ahead, the color of the area on the screen changes. It gets green when the obstacle is far, and it gets red when the obstacle is near.
In Manual mode, you can freely control the robot to go straight ahead, turn right and left by adjusting the strength of left and right vibrations with the slider in the Control area on ​​the screen. It may be interesting to control the robot from where you can’t see it but seeing only the color of the screen.
If you set Power to Low, Middle, or High, it will be in Auto mode, usually continue going straight ahead and automatically turn right when approaching to an obstacle, which allows it to keep moving semipermanently.

When you make this, it is necessary to form a habit such that the tips of the brushes turn diagonally backward.
You can also manipulate many obniz at the same time from one smartphone, so if you make a lot of such robots and move them at the same time, they may work interestingly with each other.

###Program
https://obniz.io/explore/28
Develop with kubernetes on Docker Desktop with WSL
Tags: kubernetes, devops, wsl, docker
Published: 2019-02-12 09:01:05

---
title: Develop with kubernetes on Docker Desktop with WSL
published: true
description: Develop with kubernetes on Docker Desktop with WSL
tags: #Kubernetes #devops #wsl #docker
---

Docker Desktop for Windows comes shipped with kubernetes out of the box. It preconfigures a lot of stuff on your Windows machine, like downloads kubectl and puts everything in PATH variable, so that it can be accessed from powershell. But a lot of developers have took a liking to WSL which provides a more linux native environment for development. This post will go through steps to set up kubernetes for wsl.

You should have docker for desktop installed and WSL enabled to follow along.

Steps:

1. **Enable kubernetes** if you haven't done so already. Go to docker desktop settings -> Kubernetes tab -> check "Enable Kubernetes" setting. After status says "kubernetes is running" run the following command in powershell.

```bash
kubectl get nodes
```

If it shows `docker-for-desktop` then it means kubernetes is running correctly.

<img src="https://zeerorgprocessedblog.blob.core.windows.net/photos/enable-k8s-docker-desktop.png" alt= "Kubernetes Setting" style="width:50%"/>

2. Open WSL console and **install kubectl** using the following commands

```bash
sudo apt-get update && sudo apt-get install -y apt-transport-https
curl -s https://packages.cloud.google.com/apt/doc/apt-key.gpg | sudo apt-key add -
echo "deb https://apt.kubernetes.io/ kubernetes-xenial main" | sudo tee -a /etc/apt/sources.list.d/kubernetes.list
sudo apt-get update
sudo apt-get install -y kubectl
```

3. **Setting up kubeconfig file**: This is the magic step, kubernetes runs on port 6443 on your host computer and to access it you'll need a kubeconfig file. This is already done by docker for the windows environment but for WSL you'll need to grab the config. Turns out it's pretty easy. Just run the following command in bash and replace {username} with your windows username (not the WSL user name)

```bash
cp /mnt/c/Users/{username}/.kube/config ~/.kube/config
```

This command copies your kubeconfig file from windows to wsl.

4. **All done**: Just run

```bash
kubectl get nodes
```

to see a `docker-for-desktop` node.
Kids Project. Simple Robot!
Tags: diy, obniz, ai, iot
Published: 2019-02-12 08:59:06

---
title: Kids Project. Simple Robot!
published: true
description: Let's make a simple robot with an obniz.
tags: #diy #obniz #ai #iot
---

##Video

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/rRU2wqWMiCM/0.jpg)](https://youtu.be/rRU2wqWMiCM)

#How to make
##Material
-Motor and Gear Box x 2
-Wood or Plastic for base
-Mobile battery

First, Build Gear Box and motor. You can buy it at Toy Stores.

And fix it on base like wood or plastic.

![](https://storage.obniz.io/images/168b417bc553e6391534332825922)

Finally, Connect these to an obniz and put an obniz and a battery on the base.

##How to move
Run a program. You will see buttons.
Press and Hold a button to move forward and turn!

##Program
https://obniz.io/explore/42
Kids Project! Smartphone Piyo Piyo
Tags: diy, obniz, ai, iot
Published: 2019-02-12 08:48:17

---
title: Kids Project! Smartphone Piyo Piyo
published: true
description: Create a Bird and control it from a smartphone!
tags: #diy #obniz #ai #iot
---

Movie
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/FwoYYwTQlYk/0.jpg)](https://youtu.be/FwoYYwTQlYk)

#How to make
##Material
-Servo Motor SG5010
-Piezo Speaker
-Paper Cup
-Paper

First, Create base for a bird.

Cut circle and make a tiny hole for motor.

![](https://storage.obniz.io/images/03ced50d460b490a1534299799260)

Next, Fix it on top of a motor with side tape.

![](https://storage.obniz.io/images/251eaa8e43687a571534299805381)

![](https://storage.obniz.io/images/30465424f3bf43ca1534299808286)

Attach this to a servo.

![](https://storage.obniz.io/images/b9a96440a77a2a231534299811651)

![](https://storage.obniz.io/images/0d5d0e608ab385de1534299814548)

Create a bird with cup as you like!

Then, put it on a servo.

![](https://storage.obniz.io/images/cbad19f2e71887911534299818230)

Fix a cable like this.

![](https://storage.obniz.io/images/dce13d5c39b2b83a1534299821704)

##Wire
Piezo Speaker to io0 and io4.
Servomotor signal to io9. vcc to io10, gnd to io11.
You finished! Open HTML.

##How to use
Tilt a smartphone to move and tweet.

##Program

https://obniz.io/explore/37
Create web components without using a class with Atomico
Published: 2019-02-12 06:46:17

![Atomico](https://raw.githubusercontent.com/atomicojs/atomico/brand/h1.svg)

# WebComponents with Atomico

Atomico was born to simplify the development of webcomponents by applying a functional approach and completely eliminating the visibility of this! Yes goodbye classes. Show me 👇

## 💪 A very powerful syntax

```javascript
// IMPORT
import { c, html, css } from "atomico";

// WEBCOMPONENT
function component({ message }) {
  return html`<host shadowDom>${message}</host>`;
}

// WEBCOMPONENT PROPERTIES AND ATTRIBUTES
component.props = {
  message: String,
};

// WEBCOMPONENT APPEARANCE
component.styles = css`
  :host {
    font-size: 30px;
  }
`;

// DEFINITION OF THE WEBCOMPONENT AS A TAG
customElements.define("my-component", c(component));
```

Let's analyze the code in parts ...

### Import 

```javascript
import { c, html, css } from "atomico";
```

What have we imported?

1. `c`: Function that transforms the functional component into a standard customElement.
2. `html`: Function to declare the template of our component, you can also use JSX.
3. `css`: Function that allows creating the CSSStyleSheet \(CSS\) for our component as long as it declares the shadowDom.

### Webcomponent 

```javascript
function component({ message }) {
  return html`<host shadowDom>${message}</host>`;
}
```

Our component function receives all the props \(Properties and Attributes\) declared in component.props, the component function declares all the logic and template of the webcomponent. An important rule within Atomico is **"every component created with Atomico must always return the  tag"**.

### Reactive properties and attributes of the webcomponent

Atomico detects the prop \(Properties and Attributes\) of the component thanks to the association of the props object, this through the use of index and value allows you to define:

1. **index**: Name of the property and attribute.
2. **value**: type of the prop.

```javascript
component.props = {
  message: String,
};
```

From the example we can infer that Atomico will create in our webcomponent a property and attribute called `message` and this can only receive values of the `String` type.

### Appearance of the webcomponent.

Atomico detects the static styles of your component thanks to the association of the `styles` property:

```javascript
component.styles = css`
  :host {
    font-size: 30px;
  }
`;
```

styles accepts individual or list CSSStyleSheet \(CSS\) values, the return from the css function is a standard CSSStyleSheet, so it can be shared outside of Atomico.

### Definition of your webcomponent

```javascript
customElements.define("my-component", c(component));
```

To create our standard customElement we will have to deliver our functional component to the c function of the Atomico module, the `c` function will generate as a return a customElement that can be defined or extended.

### Example 

{% codepen https://codepen.io/uppercod/pen/oNGdQzz default-tab=js,result %}
Kids Project. Shake! Animal!
Tags: diy, obniz, ai, iot
Published: 2019-02-12 08:36:41

---
title: Kids Project. Shake! Animal!
published: true
description: Shake to move an animal!
tags: #diy #obniz #ai #iot
---


#How to make

##Material
-Paper Cup
-Motor
-AAA Battery x3

First make a hole at bottom of a cup.

![](https://storage.obniz.io/images/2def9bbac0cefa0e1534300972261)

Fix a motor to a cup with double side tape.

![](https://storage.obniz.io/images/d135b02c648cca831534300978409)


![](https://storage.obniz.io/images/8b3f450f45e67a601534300975237)

Wire motor cable to obniz io0 and io1.

Put battery to case and solder a cable to obniz J1.

Pay attention to short circuit!

![](https://storage.obniz.io/images/5fedb297590bc1761534300967277)

Last, use another cup to make an animal.

##How to move

Run a program and shake a smartphone!


##Program
https://obniz.io/explore/39
How many ways iterate the objects and arrays in javascript?
Tags: discuss, javascript, interviewquestions, es6
Published: 2019-02-12 05:44:44

---
title: How many ways iterate the objects and arrays in javascript?
published: True
description: 
tags: #discuss, #javascript, #interviewquestions, #ES6 
---

How many ways we can iterate the objects and arrays in javascript (ES6)?
SFDX Update
Tags: salesforce, sfdx, video
Published: 2019-02-16 15:31:32

---
title: SFDX Update
published: true
tags: Salesforce, sfdx, video
canonical_url: https://wipdeveloper.com/sfdx-update/
cover_image: https://wipdeveloper.com/wp-content/uploads/2019/02/Screen-Shot-2019-02-12-at-11.25.00-PM.png
---

{% youtube OQMzGdz_yTQ %}


Hello, I’m Brett with WIPDeveloper.com. Recently this Spring ’19 release went live which means there are updates for your org but also your CLI.

## Update

If you’ve been following the wrong with my Lightning Web Components First Look course you’ll need to update your CLI to use the Salesforce DX latest version of their plugin. To do that, open up your terminal and type in `sfdx plugins:install salesforcedx`

And we’re going to want the latest. So that’s `sfdx plugins:install salesforcedx@latest` so we get the latest version of the SalesforceDX plugin.

And I spelled something wrong. Forgot the S.

Try it again.

Wait for this install to download and complete.

We can also run the `sfdx update` command,

Just to make sure everything is up to date.

## That’s all for now.

Remember to sign up for **[The Weekly Stand-Up!](https://wipdeveloper.com/newsletter/)**  and you can get updated with any new information we have on WIPDeveloper.com.

The post [SFDX Update](https://wipdeveloper.com/sfdx-update/) appeared first on [WIPDeveloper.com](https://wipdeveloper.com).
ชำแหละ [(ngModel)] 
Tags: angular2
Published: 2019-02-12 04:40:57

---
title: ชำแหละ [(ngModel)] 
published: true
description: ถอดชุดเกราะของ ngModel...
tags: Angular 2+
---

สวัสดี สวีดัส หลังจากที่หายหน้าหายตากันไปนานแสนนาน (ช่วงงานเยอะ กราบขอภัย _/\_ ทุกๆท่าน)
---
เอาละเพื่อไม่ให้เป็นการเสียนาฬิกา เห๊ย เวล๊าา!!!  ฮิฮิ
---
เอาละเราเข้าเรื่องกันละมา 
[(ngModel)] ที่เราใช้เขาอยู่ทุกวี่ทุกวัน และยังทำงานเป็น two-way binding แล้วยังไงต่อนะ มันจะมีประโยชน์อะไรถ้าเราไม่สามารถนำความสามารถนี้ของ ngModel ไปต่อยอดได่ 
ณ ตอนนี้ วันนี้ เราเลยจะมาแยกชิ้นส่วนของเขากัน ว่าจริงๆแล้ว มันมีความหมายอะไร และทำอะไรได้บ้าง
เพื่อไม่ให้เป็นการพร่ำเพื่อ (อันที่จริงนี้ก็พร่ำเพื่อสุดๆละนะ -__-)
รูปเดิม  : [(ngModel)] = ทำงานเป็น two-way (properties+$event)
แยกส่วน : [ngModel] = ทำงานเป็น ตัวแปร properties
แยกส่วน : (ngModelChange) = ทำงานเป็น ตัวแปร $event

---

จริงๆแล้ว [ngModel] พอเราเขียนแบบนี้ มันก็คือ one-way binding นั้นละครับ แต่ในบทความอันเล็กๆนี้เราจะไม่ขอพูดถึงละกัน (เดี๋ยวไม่จบ ฮ่าๆๆ) 
เอาละพอเราแยกมันออกเขียนแบบนี้เเล้ว มันดียังไง ทำไรได้ บอกเลยว่า 
- เราสามารถใช้ pipe ที่เราเขียนขึ้นเอง ได้
- เราสามารถแปลงค่า ทุกๆสิ่งอย่างได้ 
- เราสามารถให้มันแสดงผลตามที่เราต้องการได้
- และอื่นๆอีกมากมาย
ดังตัวอย่างเล็กๆน้อยๆ
```javascript
<input [ngModel]="item.value | useMyPipeToFormatThatValue" 
      (ngModelChange)="item.value=$event" name="inputField" type="text" />
```

---

** หากผิดพลาดประการใด ก็ขออภัยไว้ ณ ที่นี้ด้วยนะครับ
Using git to create a template project for repeated use
Tags: help, git
Published: 2019-02-12 03:48:14

---
title: Using git to create a template project for repeated use
published: true
description: I need help figure out a proper setup for using git to create a project repo, for reuse.
tags: help, git
---

I am fairly good at using git, but I need some help setting up a pattern to make it easy to build a base project, that I can clone and then make into it's own project for reuse. 

I've researched quite a bit but no real clear answer on this other than doing a clone followed by removing the .git folder. 

I feel there has to be a better way.


---

Varymade LLC.

Current projects are https://charactergenerator4000.com and https://coder.exchange. Please check them out and let us know your thoughts.
[Intro] Build a blog with Vuepress, Tailwind and Netlify
Tags: vuepress, vue, tailwindcss, netlify
Published: 2019-02-12 03:43:48

---
title: "[Intro] Build a blog with Vuepress, Tailwind and Netlify"
published: true
description: Vuepress is a static-site generator based on vue.js. We will learn how to build a blog and theme with it.
tags: vuepress, vue, tailwind, netlify
cover_image: https://thepracticaldev.s3.amazonaws.com/i/d63hpoll0toxrq5kqfke.png
---

Recently I launched a newer version of my personal website, which uses [Vuepress](https://vuepress.vuejs.org/) behind the scene. Being a new Vue.js adopter, I thought Vuepress --- a static site generator built on vue.js --- was a natural choice for websites: it's intuitive, performant and flexible with markdown.

The project is still young(v.1x-alpha as of writing) so there's not a lot of resources beyond the default setup yet. I hope this 3 part walkthrough can help those who are thinking to use Vuepress for their personal websites or blogs.

## What we are going to make

We are going to make a blog with a custom Vuepress theme. You will also learn how to apply some basic Vue.js-fu, incorporate functional css library like tailwind.css and eventually, deploy it to netlify.

- [Part 1: Setup a working Vuepress blog with Tailwind.css](https://dev.to/hyper_yolo/part-1-setup-a-working-vuepress-blog-with-tailwindcss-1594)
- [Part 2: Write and apply a custom Vuepress theme.](https://dev.to/hyper_yolo/part-2-write-and-apply-a-custom-vuepress-theme-4n3a)
- [Part 3: Final wrap-up and deploy to netlify.](https://dev.to/hyper_yolo/part-3-final-wrap-up-and-deploy-to-netlify-2362)

## Vuepress the static site generator

Vuepress is designed to generate documentations, but also works great for personal websites and blogs. It comes with a default "hidden" responsive theme and recommends a specific file structure. However, you can certainly roll your own.

### v0 v.s v1

There is a big difference between vuepress v.0 and v.1-alpha. The few main updates that I love are:

1. [Markdown slot mechnisim.](https://vuepress.vuejs.org/guide/markdown-slot.html#markdown-slot)
2. [Access to global computed properties.](https://vuepress.vuejs.org/guide/global-computed.html#global-computed)
3. [Usage of plugins.](https://vuepress.vuejs.org/plugin/)

In this whole series we are going to use **the latest v.1x-alpha**. If you are interested in knowing what's been added to v.1, read more about [the changelog here](https://github.com/vuejs/vuepress/blob/master/CHANGELOG.md).

When you are ready, let's start with [Part 1: Setup a working Vuepress blog with Tailwind.css](https://dev.to/hyper_yolo/part-1-setup-a-working-vuepress-blog-with-tailwindcss-1594) →
---

This is a cross-post from [my website](https://www.amie-chen.com/blog). Check out the original and more there!
[Part 3] Final wrap-up and deploy to netlify
Tags: vuepress, vue, tailwindcss, netlify
Published: 2019-02-12 03:42:07

---
title: "[Part 3] Final wrap-up and deploy to netlify"
published: true
description: deploy a custom vuepress blog to netlify
tags: Vuepress, vue, tailwind, netlify
---

![hero-image](https://thepracticaldev.s3.amazonaws.com/i/d63hpoll0toxrq5kqfke.png)

In this last post of the series, we will deploy our Vuepress blog to [Netlify](https://www.netlify.com/). I've spruced up the template a little bit by adding more tailwind classes, you can [check out the repo on Github](https://github.com/amiechen/vuepress-blog).

## Setup Local Repository and Netlify Account

Sign up Netlify (if you haven't yet) and link it to your github/gitlab account.

Then we have to install a local Vuepress as a dependency. **This is important!** Since the whole tutorial is built with 1x-alpha, we are going to install the latest.

```bash
npm install vuepress@next //mine is on 1.0.0-alpha.37
```

Then add a `npm script` to your **package.json**

```js
  "scripts": {
    "build": "vuepress build"
  },
```

I personally like to test the build before pushing everything to netlify. In your project root directory, run the build command:

```bash
npm run build
```

If it builds successfully, we are safe to deploy everything to netlify.

## Deployment setup

From your netlify dashboard, click the **New Site from Git** button on the top right. Select your repo and you should see the a screen for deployment setting. Add some configurations like the screenshot below:
![netlify-deployment](https://thepracticaldev.s3.amazonaws.com/i/w7wsgj578j3490tpd2tl.png)

Basically, we are telling Netlify to use the alpha vuepress version we installed along with the repo to run the build command, then output to a generated **.dist** folder. If you have put everything under a **docs** folder like the documentation did, your build command should be `vuepress build dev` and destination folder should be `docs/.vuepress/dist`.

Hit the deploy button and you should see your site building! Mine is deployed on [here](https://stupefied-mcclintock-f9c943.netlify.com/).

That's it! If you have any question please feel free to drop me a line :D Thanks for following along.

---
This is a cross-post from [my website](https://www.amie-chen.com/blog). Check out the original and more there!