teleren/devto huggingface dataset:
Understanding Formik hooks with use case(complex)
Tags: javascript, formik, hooks, react
Published: 2020-05-31 16:46:47

I was working on typical general problem thought worth to share. I am sure if you are working on forms using Formik so you come to this problem definitely. In this article I am sharing via Formik hooks. So I came to know [Formik](https://jaredpalmer.com/formik/docs/overview) hooks they are amazing :-)

### **Problem Statement**

![](https://cdn-images-1.medium.com/max/791/1*jaDRP2mgYrG5bDrXDgFSeQ.png)<figcaption><strong>Problem Statement</strong></figcaption>

As diagram is self explanatory. I would like to explain if you don’t understand. Considering your manager/ designer or whoever ask you to create a form with some design where you have to create Form with accordion i.e Different form can generated based on which accordion we selected. For simplicity I am explaining for one But it can work for for anyone. How we can submit the form by clicking the submit button? And we need to send the value of form which we selected. Hope you got the context. Let’s start !

After going through google and documentation what take my interest is Formik hook it make this thing very simple. Lets understand

![](https://cdn-images-1.medium.com/max/1024/1*HquhWy-886p-mz5HZCF0bg.png)<figcaption><strong>Formik hook initialise</strong></figcaption>

In above code we are doing:  
1. Initialising form variable   
2. Assigning what to do when **form is submit(onSubmit)**  
3. Last but not least assigning **useFormik** reference to **formik variable**

Now we can use this formik variable to do anything we want(like validation from parent or child component or submitting from parent or child component). **Note** : You can do more things from this variable.

Example:

![](https://cdn-images-1.medium.com/max/1024/1*0jOOGBzinyAY4ZGJz1GD9A.png)<figcaption>Compelete code</figcaption>

If you don’t understand from above snippet. Its okay. Here you can find live [link](https://codesandbox.io/s/formik-hooks-ktk0d) and you can tinker around with it. I have added all the comments to make things easier for you. If you still don’t understand you can ask in comment section. That’s all for today guys.

Demo of this code hosted [here](https://codesandbox.io/s/formik-hooks-ktk0d). Feel free to check out.

Thanx for making it to the end!

**If you like this article consider buying me a** [**coffee**](https://www.buymeacoffee.com/Shubhamforu) **. Cheers!**
Changing coding habits to be stream-friendly
Tags: java, streams, api, change
Published: 2020-05-31 16:44:51

Because of the recent worldly travel restrictions, I recently found myself writing more code than usual. After having reviewed it, I noticed I was not very satisfied with it. I believe that comes from the fact that Java is an "old" language, but it has evolved a lot, especially in its latest versions. While working with a language for a long time, one is bound to get habits, whether good or bad. When the language changes, it takes a conscious effort to change those habits. Yet, this is necessary, because a good practice in one version of the language might become a bad one in another.

I started using version 1.3 - compared to old-timers, I feel like a newbie. However, that doesn't change my point above about practices. In this short post, I'd like to first show the original code I wrote, and how I reworked it. It all starts with a stream. 

```java
persons.stream()
  .filter(person -> person instanceof Customer)
  .map(person -> (Customer) person)
  .map(Customer::getSalesRep);
```

While this code works - and is readable, it felt wrong to me. One part is functional, the other uses traditional operators. Using the latter and the former feels weird. 

Actually, all operators used above have an equivalent API. Thus, the above code can easily be rewritten as:

```java
persons.stream()
  .filter(Customer.class::isInstance)
  .map(Customer.class::cast)
  .map(Customer::getSalesRep);
```

Note that those are not new methods! `Class.isInstance()` is available since version 1.1. `Class.cast()` is available since version 1.5, which was released in 2004!

You might qualify the above code as Functional Programming…​ or not. Nonetheless, Java has made progress toward more functional code by providing APIs that allow developers to focus on the "what" instead of letting them handle the "how". If you start using streams, you should embrace the flow and start using modern APIs. And in all cases, it pays to learn about the [latter](https://blog.frankel.ch/map-merge-compute/).

_Originally published on [A Java Geek](https://blog.frankel.ch/changing-coding-habits-stream-friendly/) on May 31st, 2020._
Software Quality?
Tags: process, standard, softwarequality, sqa
Published: 2020-05-31 16:37:46

ไม้เบื่อไม้เมาของคนทำงาน Dev ก็คือเรื่อง Standard
จากประสปการณ์ที่เคยทำงานทั้งด้าน IT Support, System Admin, Development สารพัดตำแหน่ง (แอบบ่งบอกถึงอายุ)

สมัยที่ทำงาน Dev ก็เจอปัญหา Classic อยู่บ่อยๆ เช่น Requirement Change บ้าง Project Delay บ้าง ซึ่งก็ส่งผลให้ต้อง Dev จนต้องเก็บตะวันอยู่บ่อยๆ 

หลายครั้งเข้า ก็อยากหาทางแก้ เพื่อให้ดำรงชีวิตอยู่ได้ในสายงานนี้ต่อไป

ก็เลยพยายามศึกษาหาความรู้เพิ่มเติมด้าน Software Engineering, Software Quality, Software Standard จนมาพบคำตอบที่ว่าปัญหานี้ไม่ได้เป็นเฉพาะเรา ไม่ได้เป็นเฉพาะที่ไทย แต่เป็นกันทั่วโลกและเป็นมานานแล้ว (ก่อนเราเกิดซะอีก) 

ซึ่งต่างประเทศเขาก็รู้สาเหตุ และหาทางแก้ไว้หลายแบบ และมันก็ใช้ได้ดีแหละ

แต่...

อย่างที่รู้ๆ กันอยู่ว่าธรรมชาติของมนุษย์นั้นเป็นอย่างไร 
ให้อ่านคู่มือก็ไม่อ่านหรอก ให้ทำตามขั้นตอนก็บอกว่ามันช้าเสียเวลา 
เผลอๆ เจอสวนกลับมาว่า อยากได้เอกสารหรืออยากได้ Product 

ตอนแรกก็หงุดหงิดกับแนวคิดแบบนี้นะ จนท้ายที่สุดพอลองมองโลกกับความเป็นจริง
ถ้าต้องตอบแบบโลกไม่สวยร้อยทั้งร้อยมันก็ต้องเอา Product อยู่แล้วแหละ

แค่มันเป็นตัวบ่งบอกว่าความสามารถในการ Dev อยู่ในระดับไหน
1. Dev ได้
2. Dev ออกมาดี
3. Dev แบบมีคุณภาพ

แค่ข้อ 1 ก็ต้อง Dev ยันเช้าอยู่แล้ว ข้อ 2-3 อย่าได้หวัง

ก็เลยตั้งคำถามกับตัวเองอีกรอบ ตกลงมันยังไงกับสาย IT กันนะ
แค่ Dev ได้ก็พอแล้วเหรอ?
แล้วสายอาชีพอื่นเขาต้องการเรื่องคุณภาพไหมนะ?

คำถามนี้ค้างอยู่ในหัวพักหนึ่ง จนถึงช่วงระหว่างที่กำลังเลี้ยวรถเข้าซอย สายตาก็หันไปเจอกับ Fitness
คำตอบก็ยังไม่ได้หรอกนะ แต่มันหายคาใจกับคำถาม

สมมติว่า เราเป็น Trainer แล้วอยากให้คนสุขภาพดี เราก็เดินไปบอกคนโน้นคนนี้ว่า คุณต้องควบคุมอาหารนะ ต้องออกกำลังกายด้วยท่าโน้นท่านี้ อย่างน้อยวันละกี่ชั่วโมง สัปดาห์ละกี่วัน คุณถึงจะสุขภาพดี แข็งแรง และไกลจากโรคภัย

แน่นอนว่า ทุกคนก็รู้แหละว่ามันดี รู้ประโยชน์ รู้ว่าควรทำยังไง แต่ส่วนใหญ่ก็ไม่ทำ
ด้วยสารพัดเหตุผล ชนิดที่เล่า 3 วัน 3 คืนไม่จบ

แล้ว อาชีพ Trainer เขาทำยังไง?
หึหึ...
เขาไม่เดือดร้อนหรอกว่า ใครจะออกกำลังกายไหม 
เขารอคนที่พร้อมต่างหาก คนที่รู้ว่ามันดี คนที่แบ่งเวลาได้ คนที่ต้องการอยากมีร่างกายที่แข็งแรง 
เขารอให้พวกนี้มาสมัครฟิตเนสเอง ทั้งเสียตัง เสียเวลา
ส่วนคนที่ยังไม่พร้อม ไม่สะดวก ก็แล้วแต่เขาเลยไม่ต้องไปเครียดกับเขาเหล่านั้น
พร้อมเมื่อไหร่ค่อยเจอกัน ไม่ต้องบิวต์กันเยอะมันเปลืองอารมณ์

หรือว่านี่จะเป็นวิธีที่เหมาะสมกับวงการ IT Development เหมือนกันนะ?
glitch-addons, extend your glitch experience!
Tags: glitch
Published: 2020-05-31 16:32:54

# extend your experience!

glitch-addons is a project which lets you download and use chunks of code or scripts made by us (<a href="https://ptuk.tk">ProTech IT Solutions</a>) or you!


# Wait... do I need sudo?-

No! it uses Apache SubVersioN (SVN) to get files from our community repo- check out https://cli-addon-list.glitch.me for a list of addons and a link to the repo (check footer)


# How do I install the thing?!-

run this command:

```python
wget https://glitch-addons-cli.glitch.me/cli.py
```

then

```
python3 cli.py
```

command list under the command 'help'


# There isn't many addons!-

This is because it is new, our repo is empty and we need your code!

follow the 3 steps in <a href="https://github.com/17lwinn/glitch-community-addon-registry/blob/master/README.md#glitch-community-addon-registry">here</a> to submit an addon


# I NEED HELP!-

sorry to hear! PM me on the glitch forum! or reply by replying here!



# What does 'nvm' do?-

This installs the Node Version Manager, you need 

- a .bashrc or .bash_profile file
- node.JS
- enough space

<small>

copyright 2020-2021 ProTech IT Solutions
</small>
What is React ⚛️🤔 and the concept of Componets in React
Tags: react, javascript, beginners, webdev
Published: 2020-05-31 16:28:26

Hmm, You have open this blog then you must be the React Developer or Want to know the about the trending word Reactjs. 

What is React JS?

React JS is a JavaScript library used in modern web development to build interactive web applications. The basic idea of react.js is to divide the UI elements into the small components and combine them later to make the whole App. First, see the below Image
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/79ybvvm2xhrxa4j6aj8m.png)
Here we can divide the UI of the twitter into the three main components. we will design and develop all those three components separately and combine them to make the main UI. These components can be further divided into separate components. below we divided the twitter card into different components. The heart of the React is a component. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/v3xpnc3qaqmusb6pjqn2.png).

Let's try to make a Mockup of the given example into the component 
1) Left Component   
<pre>
import React from "react"; 
class LeftComponent extends React.Component {
    render() {
       return(
        <div>This is the left component</div>
       )
    }
}

export default LeftComponent;
</pre>

2) Middle Component 
<pre>
import React from "react"; 
class MidddleComponent extends React.Component {
    render() {
       return(
        <div>This is the Middle component</div>
       )
    }
}
export default MidddleComponent;
</pre>

3) Right Component 
<pre>
import React from "react"; 
class RightComponent extends React.Component {
    render() {
       return(
        <div>This is the Right component</div>
       )
    }
}
export default RightComponent;
</pre>

so we make a component separately acc to their purpose. lets Combile them all

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

SO basically we import all our components into our main App and combine them all. That all About the component and its usage. 

I hope that you like this Post. I don't want to go deeply into the logical syntax of the react for this post. I want to keep as simple as possible. if you want to make a full react tutorial with syntax then give your views in the comments.
  
To keep up with everything I’m doing, follow me on Twitter. ==> <a href ="https://twitter.com/sharmakushal44"> Kushal Sharma </a>
Responsive images – Using Srcset
Tags: codenewbie, webdev, html
Published: 2020-05-31 16:27:39

**Srcset** is a property that we can use with img tag. It lets us list a set of images which we want to load at different resolutions for an image.  For example:

    <img id="sfo" src="images/foo-500_small.jpg" srcset="images/foo-1600_large.jpg 1600w, images/foo-1000_large.jpg 1000w, images/foo-800_medium.jpg 800w, images/foo-500_small.jpg 500w" sizes="50vw" alt="Some description about the image">

The browser chooses one from the list and then fetches the image based upon the [viewport](https://rajeshdhiman.in/the-viewport-the-responsive-web-design) dimensions, the image size relative to the [viewport](https://rajeshdhiman.in/the-viewport-the-responsive-web-design), the pixel density of the user's device, and the source file's dimensions. 

By default, the browser will choose the first image if we don't specify a window size.
We can add a **width** descriptor along with the image path to specify the width of each image in pixels. The browser then uses these widths to fetch the matching image based on its window size. The browser will select the image with the smallest width that is actually larger than the [viewport](https://rajeshdhiman.in/the-viewport-the-responsive-web-design) width.

We can also optionally specify a pixel density instead of a width. However, we cannot specify pixel densities and widths within the same srcset attribute. 

**Note:** *If a larger version of an image is already available in the browser (HTTP) cache, some browsers might use that image even if it is not the one specified in srcset (because if the browser already has a higher resolution image stored locally, why not use it?).*

We can also add a **sizes** attribute to specify an image size to tell the browser beforehand if the image will be displayed at a different size. By default, the browser assumes the image will be displayed at 100% of the viewport width. 

***Srcset** is a great option and works nicely. Browsers calculate the viewport width and load the specified image according to the calculated width. 
**In short, we give the browser a couple of options, and the browser does its calculation and loads the image that it finds fit according to the calculation.***

We can also use the [picture](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture), and [source](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source) element, combined with [media](https://rajeshdhiman.in/responsive-web-design-media-queries) queries, to change the image source as the window is resized.
Picture tags also let us specify different images for different screen sizes. It allows us to control which image to show on what screen sizes explicitly.
To learn more about repsonsive images you can checkout this [codelab](https://codelabs.developers.google.com/codelabs/pwa-responsive-images/index.html#0) from google.
How to understand complex systems?
Tags: devlife, help
Published: 2020-05-31 16:26:42

If you come across a system you need to understand, where do you start? How do you fix a bug or add some value with a new feature?  

TLDR: A few tips for faster onboarding and less stress (hopefully).

A [blog post](https://www.orbjet.org/post/2020-05-26/understanding-complex-systems/) where I describe the steps that I use to get up and running in the shortest possible time.


(Why a link to my blog? I like to keep control over the content I publish and a central place for future updates. This way both ends stay relevant)
FUN: Pikachu Using CSS
Tags: css, html, javascript, webdev
Published: 2020-05-31 16:17:37

A simple pikachu using css. This is very helpful to understand the css positions and some of the transformations.

Try to click on Pikachu :)

{% codepen https://codepen.io/mohananagavenkat/pen/RqNqdN %}

Happy Coding 😀
จุดประสงค์เพื่อเปรียบเทียบใน
Published: 2020-05-31 16:00:54

จุดประสงค์เพื่อเปรียบเทียบในจุดประสงค์เพื่อเปรียบเทียบในจุดประสงค์เพื่อเปรียบเทียบในจุดประสงค์เพื่อเปรียบเทียบในจุดประสงค์เพื่อเปรียบเทียบในจุดประสงค์เพื่อเปรียบเทียบใน
Ubuntu - How to change time-zone settings from the command line
Tags: ubuntu, timezone
Published: 2020-05-31 15:58:13

A time zone is a region of the globe that observes a uniform standard time for legal, commercial, and social purposes. Time zones tend to follow the boundaries of countries and their subdivisions instead of strictly following longitude, because it is convenient for areas in close commercial or other communication to keep the same time.

Most of the time zones on land are offset from Coordinated Universal Time (UTC) by a whole number of hours (UTC−12:00 to UTC+14:00), but a few zones are offset by 30 or 45 minutes (e.g. Newfoundland Standard Time is UTC−03:30, Nepal Standard Time is UTC+05:45, Indian Standard Time is UTC+05:30 and Myanmar Standard Time is UTC+06:30).

Some higher latitude and temperate zone countries use daylight saving time for part of the year, typically by adjusting local clock time by an hour. Many land time zones are skewed toward the west of the corresponding nautical time zones. This also creates a permanent daylight saving time effect.

# Setting up a new time zone on the system
The most ease way especially to a server is to list timezones:
```
timedatectl list-timezones
```
And choose yours, for example:
```
timedatectl set-timezone America/Porto_Velho
```
The changes occur at the same time, and to see the current time, type in the terminal the command
```
date
```
EventBus on Vue.js
Tags: vue, javascript, component
Published: 2020-05-31 15:08:45

---
title: EventBus on Vue.js
published: true
description: use eventbus in vue.js
tags: Vue.js, Javascript, Component

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

In Vue.js component communication maybe use **props**, **vuex**
or **events**. 

`props` can pass data to child then child can pass to child again, if you have multiple children components use **props** to the end children. that is crazy things, why?  you must pass data from first child to the last child and all child will props it. data will through all the component.

`vuex` can solve `props` problem, you can defined data to `store`. after all included the `store` object, like child or component will operation data and share data. that make you no need pass data from first child to the end of child. but `vuex` must included first in every you need child or component.

You know `props`, `vuex` all have use scene. in my team we use 
`eventbus` pass data to whatever you want child or component.

```javascript
// event-bus.js
import Vue from 'vue'
export default new Vue

// Parent.vue
<script>
import eventBus from './event-bus'
export default {
  method:{
    onClick(){
      eventBus.$emit('click',{name:'foo'})  
    }
  }
}
</script>

// ChildA.vue
<script>
import eventBus from './event-bus'
export default {
  mounted(){
    eventBus.$on('click',(data)=>{
      console.log(data) // {name:'foo'}
    })  
  }
}
</script>

// ChildB.vue
<script>
import eventBus from './event-bus'
export default {
  mounted(){
    eventBus.$on('click',(data)=>{
      console.log(data) // {name:'foo'}
    })  
  }
}
</script>

```

If you trigger `click` event at `Parent` then `ChildA` `ChildB` will trigger call back. 

`eventbus` can isolate logic just need subscribe and dispatch event you need data will got. i think `eventbus` more suit pass data from component to other component witch component no more relation.

Hope it can help you :)
react-web-monetization-ui for the GftW Hackathon
Tags: gftwhackathon, webmonetization
Published: 2020-05-31 14:56:50

## What I built

React library that provides _quick, customizable UI components_ for common Web Monetization use cases, such as displaying monetization status and displaying a paywall with a description and a call-to-action.

### Submission Category: 

Foundational Technology

## Demo

This CodeSandbox shows examples of components without custom styling and props, with common styling methods (CSS modules, Styled Components, Theme UI), and with customized content through props.
 
{% codesandbox react-web-monetization-ui-examples-5r1ck %}

## Link to Code

{% github ekafyi/react-web-monetization-ui %}

## How I built it 

I described it in detail in yesterday’s post.

{% post ekafyi/published-my-first-react-component-library-react-web-monetization-ui-55ba %}

## Additional Resources/Info 

- Gatsby demo site using Gatsby's official blog theme starter: https://github.com/ekafyi/gatsby-blog-react-web-monetization-ui
Deno FS Tutorial | File System
Tags: deno, tutorial, beginners, webdev
Published: 2020-05-31 14:54:06

<strong>Deno FS </strong> is a library that allows us to manage, access, read and write to our file system for both files and folders. I've done a quick tutorial to describe how to install and use it.

{% youtube V6fon2T6gC8 %}
<center>[Youtube: Deno PostgreSQL](https://youtu.be/V6fon2T6gC8)</center>

Included in this video are:
- Adding the FS module
- Creating an empty directory
- Replacing an empty directory
- Moving a directory or file
- Checking if a directory or file exists
- Reading and writing JSON files
- Reading and writing any files as strings

Deno FS
https://deno.land/std/fs/

Deno
https://deno.land/

## Follow and support me: 
Special thanks if you subscribe to my channel :)
* [🎞️ Youtube](https://www.youtube.com/channel/UCvM5YYWwfLwpcQgbRr68JLQ?sub_confirmation=1)
* [🐦 Twitter](https://twitter.com/adrian_twarog)

## Want to see more:
I will try to post new great content every day. Here are the latest items:
* [Adobe XD to Fully Responsive WordPress Site](https://dev.to/adriantwarog/adobe-xd-to-fully-responsive-wordpress-site-16e0)
* [Adobe XD to HTML Full Process](https://dev.to/adriantwarog/adobe-xd-to-html-full-process-ao6)
* [Full Tutorial on how to use SASS to improve your CSS](https://dev.to/adriantwarog/full-tutorial-on-how-to-use-sass-to-improve-your-css-57on)
* [Creating a Mobile Design and Developing it](https://dev.to/adriantwarog/creating-a-mobile-design-and-developing-it-5c4o)
TIL - Using ~ with Array.indexOf
Tags: javascript, bonjour
Published: 2020-05-31 14:42:17

I was playing with [the bonjour package](https://github.com/watson/bonjour) this morning, and when looking through the code, I noticed this function block:
```js
function unique () {
  var set = []
  return function (obj) {
    if (~set.indexOf(obj)) return false
    set.push(obj)
    return true
  }
}
```
What caught my eye was the snippet
```js
~set.indexOf(obj)
```
It seems like this function is checking for the presence of `obj` in the array `set`. I always used set.indexOf(obj) == -1 in a case like this, but this got me to look it up.

The ~ operator is bitwise not, and you can read about it on [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_NOT).  Turns out `~x` evaluates to `-x-1` so this will evaluate to a 0 when x = -1, and something non-zero otherwise!

Don't know if I'll use it, but the form does look nice!
My Mac Development Tools
Published: 2020-05-31 15:07:44

---
title: My Mac Development Tools
published: true
date: 2020-05-31 14:42:06 UTC
tags: 
canonical_url: https://dcblog.dev/my-mac-development-tools
---

What I use for day to day software development, communication, and workflow.

## Development software

### [Alred App](https://www.alfredapp.com/)

Alfred is a great tool to quickly search your Mac for a program/file or run calculations on the fly or fire off a Google search. I even use it to search the PHP manual. With the powerpack addon, you can save your clipboard history which I use constantly. 

### [VSCode](https://code.visualstudio.com/)
Is my code editor of choice, great for book writing and coding. 

### [Table Plus](https://tableplus.com/)
Using a database client is essential, Table Plus is great for managing multiple databases and inspecting the data.

### [iTerm](https://www.iterm2.com/)

One of the first things I install on a new Mac it's a great terminal application has support for keyboard shortcuts and themes.

## Browser 

### [Chrome](https://www.google.co.uk/chrome/)

Chrome is my preferred editor for day to day use and for it's extensions for development.

## Software Packages

### [Setapp](https://setapp.com/)

Set app is a subscription service for Mac, it has loads of great apps to use such as Table Plus, Cloud Mounter, Clean My Mac, and many more.

## Communications 

### [Microsoft Outlook](https://www.microsoft.com/en-ww/microsoft-365/outlook/outlook-for-business)

 Outlook is my go-to Email client, nothing else comes close to it. For exchange emails and calendars.

### [Microsoft Teams](https://www.microsoft.com/en-gb/microsoft-365/microsoft-teams/group-chat-software)

I keep in touch with the team using Teams, also great for sharing resources and video chats with clients.

## Music 

### [Spotify](https://www.spotify.com/uk/)

Spotify keeps me focused whilst coding, the best music streaming service in my opinion.  

## Notes

### [Bearapp](https://bear.app/)

I love bear it's the best note-taking app or Mac.
How to print every file (with the line number) containing a pattern?
Tags: bash, linux, grep, todayilearned
Published: 2020-05-31 14:20:36

While editing a massive codebase, massive like a monorepo with 247 sub projects...

I need to find every file containing a certain pattern.
Webstorm is, once again, indexing... It will finish in 15 minutes....

Let's use a good'ole `grep` command.

`grep --exclude-dir={node_modules,dist,build} -rnw $(pwd) -e 'my secret pattern'`

It will print every absolute file path followed by the line number inside the file and the line containing the pattern.

Have fun!