teleren/devto huggingface dataset:
ML Model for Font Color on Website
Tags: octograd2020
Published: 2020-05-21 02:39:02

## My Final Project
I created a HTML/CSS page that allows for user input of a background color. Based on the background color that you chose, I dynamically render the page. Based on the user input, I also run a trained ML algorithm (deep neural net) using binary classification to determine the best font that would stand out from the background.

## Link to Code
https://github.com/Abinavraj5427/fontColorANN


## How I built it (what's the stack? did I run into issues or discover something new along the way?)
I built and constructed my neural network first using python and modules like numpy. I decided to go through the math, so I avoided ML libraries like TensorFlow. After training my model, I decided I should create an interface for users. In order to build this interface, I created a simple HTML page with dynamic CSS through JavaScript. I update real time using AJAX requests via JQuery. Then I pass the data to the server backend, PHP which runs the python script for the model via command line. Then the server responds to the user with their text color.

I never knew that PHP can run python scripts which I found was really cool. This was also one of my first times using WAMP Server to test my full-stack website. 

## Additional Thoughts / Feelings / Stories
I think this is a great example of how machine learning shouldn't be used. ML is not lightweight, so it cannot be used everywhere. If anything, a mathematical equation for RGB can determine the color, but I did this merely out of excitement and practice. Hope you enjoy it!

Happy Graduation Class of 2020!
C# Là Gì? Ngôn Ngữ Lập Trình Hay Nhất Hiện Nay
Published: 2020-05-21 02:37:11

Ngôn ngữ lập trình C# hướng đối tượng do Anders Hejlsberg phát triển và ra mắt vào năm 2001 được Microsoft đầu tư và được xem là đối thủ của Java. Kết hợp chặt chẽ với .NET Framework giúp cho việc tạo ứng dụng Windows Forms hay WPF nhanh chóng và dễ dàng hơn. Tới nay C# là ngôn ngữ này đã đạt được một số lượng người sử dụng khá đông đảo trở thành một trong những ngôn ngữ lập trình phổ biến nhất trên thế giới.
Xem thêm: http://laptrinhvacongnghe.com/c-la-gi/
ReactJS Dark mode using local storage(Introduction Part1)
Tags: react, javascript, webdev
Published: 2020-05-21 02:35:18

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/snh6farlz5t5fw3uu2bv.jpeg)
Discussions:React [Hooks](https://reactjs.org/docs/hooks-intro.html), [local-Storage] (https://www.w3schools.com/jsreF/prop_win_localstorage.asp)

###Introduction:

Today I am going to discuss dark-mode in ReactJS, recently I started learning ReactJS, I struggled much time for how dark mode is working in local storage. After struggling, I made a post in ReactJS dark mode.
###What is local-storage ?
[local-Storage] (https://www.w3schools.com/jsreF/prop_win_localstorage.asp) is a web storage that allows [JS] (https://www.w3schools.com/js/) sites and apps to store and access data right in the browser with no expiration date.the data is stored in browser even after the browser window is closed.

###Hooks
Hooks are functions, they let you use [React](https://reactjs.org/) without classes, we mean that hooks allow us to easily manipulate the state of our functional component without needing to convert them into class components.
###There are three methods to choose from:
1) `setItem()`: Add key and value to localStorage
2) `getItem()`: Retrieve a value by the key from localStorage
3) `removeItem()`: Remove an item by key from localStorage

###setItem()
It takes two parameters: a key and a value. The key can be referenced later to fetch the value attached to it.

`
localStorage.setItem('name', 'python');
`
Where name is key and Jyothi Prakash is value.note that local storage only store strings
To store arrays or objects you should convert them to strings.To do this we should use JSON.stringify() method before passing to SetItem().

```
const data={
name:"python",
framework:"Django"
}
localstorage.setItem("language",JSON.stringify(data))
```

###<span style="color:red">getItem()</span>
getItem() method is used to access the data stored in local storage object.

It accepts only **key** and returns a **value** as string

`localstorage.getItem("language")`

This return a string with the value:

`“{“name”:” python”,” framework”:” Django”}”`

To this value you have converted it back to object.
To do this we use JSON.parse() method which is convert JSON string to object.

`const value=JSON.parse(localstorage.getItem("language"))`

###removeItem()

removeitem() is used to remove the key in local storage if it exists.if there is no key, the method will do nothing.

`localstorage.removeItem("language")`

###localstorage Limitations

1) local storage is limited to 5 MB across all browsers.
2) Don't store sensitive information in local storage.
3) local storage can only be read by the client-side

I hope everyone likes this post, This is my first Blog post in DEV and Here is [Part-2] (https://dev.to/jyothiprakash/reactjs-dark-mode-using-local-storage-part-2-17a7)
Kth Smallest Element in a BST
Tags: bst, binarysearch, tree
Published: 2020-05-21 02:32:36

---
title: Kth Smallest Element in a BST
published: true
description: LeetCode Medium
tags: bst, binary-search, tree
---

# Given a binary search tree, write a function `kthSmallest` to find the kth smallest element in it.

Example 1:

Input: root = [3,1,4,null,2], k = 1

   3
  / \
 1   4
  \
   2

Answer is 1 because the 1st smallest element when binary tree is sorted is 1

Example 2:

Input: root = [5,3,6,2,4,null,null,1], k = 3

			 5
      / \
     3   6
    / \
   2   4
  /
 1

Answer is 3, as 1 and 2 are 1st and 2nd smallest elements in the tree and the next is 3 which is 3rd smallest element

A simple approach would be traversing the whole tree using inorder traveral and push the elements to a stack.
Now the stack will be in ascending order. All you need is stack's _k-1_ th element

Here's the code

```js
/**
 * @param {TreeNode} root
 * @param {number} k
 * @return {number}
 */
var kthSmallest = function(root, k) {
	let inorder = (node, arr) => {
		if(!node) return arr
		inorder(node.left, arr)
		arr.push(node.val)
		inorder(node.right, arr)
		return arr
	}
	let sortedArr = inorder(root, [])
	return sortedArr[k - 1]
};
```

The algorithm can be improved when k is considered and finding only k elements

Thee algorithm is

1. initialize empty array
2. loop through the root and push root to stack and change root to root.left
3. Now we have all left nodes
4. take the last node
5. Decrement k by 1. if it's 0 return node value
6. assign root = root.right

Here's the code for iteration:

```js
/**
 * @param {TreeNode} root
 * @param {number} k
 * @return {number}
 */
var kthSmallest = function(root, k) {
	let stack = new Array()
	while(true) {
		while(root) {
			stack.push(root)
			root = root.left
		}
		root = stack.pop()
		if(--k == 0) return root.val
		root = root.right
	}
}
```
How to check the operation of Gatsby on a smartphone or other device that is under development in a local network
Tags: gatsby
Published: 2020-05-21 02:19:21

---
title: How to check the operation of Gatsby on a smartphone or other device that is under development in a local network
published: true
description: 
tags: gatsby 
---

## First things first
I'll show you how to check the Gatsby site that is under development on an actual smartphone or other device.

### Prerequisites.
gatsby: 2.19.2

The IP address of the development machine may be different for each OS because it has been tested on mac.

## Get the IP address of the development machine

Get an IP address by ifconfig command

```
> ifconfig
.
....
....
en0: flags=8863<UP,BROADCAST,SMART,RUNNING,SIMPLEX,MULTICAST> mtu 1500
	options=400<CHANNEL_IO>
	ether xx:xx:xx:xx:xx:xx
	inet6 fe80::18e8:b8eb:c36b:8185%en0 prefixlen 64 secured scopeid 0x6
	inet 192.168.1.xxx netmask 0xffffff00 broadcast 192.168.1.255
	nd6 options=201<PERFORMNUD,DAD>
	media: autoselect
	status: active
... ...
....
....
```

The above shows that the IP address in the LAN is 192.168.1.xxx.

## Add the -H option to Gatsby's development mode

Add 0.0.0.0.0 to the host's options

```
Defaults to localhost  -H, --host  Set host.
```

ref: https://www.gatsbyjs.org/docs/gatsby-cli/

```
> gatsby develop -H 0.0.0.0
```

## Accessing Gatsby's development mode from your smartphone

After confirming that it is running on localhost:8000, you can use a browser on a smartphone connected to Wifi in the LAN to
Based on the IP address acquired earlier, you can access the terminal where the development mode of Gatsby is running on the default 8000 port.

```
http://192.168.1.xxx:8000
```
How to encode/decode base64 with JS
Tags: javascript
Published: 2020-05-21 02:12:53

---
title: How to encode/decode base64 with JS
published: true
description: 
tags: javascript
---

### Execution environment
Chrome ver. 79.0
Confirmation of operation with console of Dev tool

Encoding to base64 is done with the btoa command

```
btoa("This is a test.")
> "VGhpcyBpcyBhIHRlc3Qu"
```

To decode a base64 encoded string, use the atob command

```
atob("VGhpcyBpcyBhIHRlc3Qu")
> "This is a test."
```
Checking the user information that is being accessed by AWS-CLI
Tags: awscli
Published: 2020-05-21 02:11:47

---
title: Checking the user information that is being accessed by AWS-CLI
published: true
description: 
tags: aws-cli 
---

# Checking user information that is being accessed by AWS-CLI

Check which account you're logged in with the command

As you can see below, the credential file shows the access key and the secret key, but it's hard to know what they are.

~/.aws/credentials

```
[default]
aws_access_key_id=XXXXXXXXXXXXXXXXXX
aws_secret_access_key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
```

If you run `aws sts get-caller-identity`, you can determine the identity from the information such as arn.

```
> aws sts get-caller-identity
{
    "UserId": "XXXXXXXXXXXXX",
    "Account": "1234567890",
    "Arn": "arn:aws:iam::1234567890:user/user-name-1"
}
```
The Interview
Tags: javascript, codenewbie
Published: 2020-05-21 02:07:41

I don't typically tout failing as a gift, and yet.

I guess we all break our own rules sometimes.

A wee bit of context: I'm a career changer and recent Flatiron graduate who started coding 7 months ago. I'm now job hunting.

I feel a little crazy reading that - it's all happened very quickly.

And perhaps that's a big reason why I felt so caught off guard during a recent interview.

The role was junior front end software engineer, and the interview was led by a senior software engineer. 

This being my first time in such an interview, I went in expecting mostly q's about myself with a side dish of me coding.

Folks, the side dish was *me*.

From my April graduation, I've been focused on the job hunt: resume, LinkedIn, hosting my apps on Heroku (scream!), and building my portfolio. I snuck in a few Codewars challenges and some app updates.

So, during the interview when I was asked to explain the benefits of using React, the difference between asynchronous and synchronous functions and to explain callback hell, I fumbled.

I know these things, truly I do!, but had not anticipated being questioned about the concepts like this.

Spoiler alert! I did not sparkle and shine during the live coding either.

But I really want to return to my first sentence of this post - and tell you that amidst that fumbling and stumbling, I AM touting this experience as a gift.

For so.stinkin.long I have tried to be perfect.

I have done what it takes to ensure I *don't* find myself in that very, very scary and vulnerable place of falling flat on my face.

Until now. Coding tossed me back to the beginning and told me failing is the way you LEARN and perfection is a myth.

And after what happened today, I have to say, I'm on board.

## Failing doesn't mean you're no good. What is means is the approach you took didn't quite work. 

With that in mind, here's my plan:

1) Feel the feels. Don't brush past the disappointment, but also, celebrate the good.

2) Re-write my notes from the interview into action steps.

3) Put those action steps into my weekly plan and get cracking.

If you are curious and want to know more, comment below or send me a message. I will always be happy to respond.

Thank you for reading.
How to copy the path of the current directory to the clipboard (mac)
Tags: mac, bash, zsh
Published: 2020-05-21 02:07:03

---
title: How to copy the path of the current directory to the clipboard (mac)
published: true
description: 
tags: Mac, Bash, Zsh 
---


If you are in the current directory like `/Users/user-name/sample/foo-bar` in a terminal and want to open another terminal with the same path to open the same current directory, copy the path of the corresponding directory to the clipboard to make it easier.

Execute the following command in the directory you want to copy

```sh
pwd | pbcopy
```

Open another terminal. 
If you type "cd" and then paste the contents of the clipboard with cmd+v, the path of the current directory will be displayed.

```sh
cd /Users/user-name/sample/foo-bar
```

------

## pwd | pbcopy This command is broken down and explained.

```sh
pwd | pbcopy
```

`pwd` Display the current directory (on standard output).

passes the contents of `|` output (standard output) to the input (standard input) of the following command

Copying from standard input to the clipboard on `pdcopy` mac.
Meissner Lop :: Reliable XSS Exploit Fuzzer
Tags: octograd2020
Published: 2020-05-21 02:06:17

## Project: Meissner Lop

Meissner Lop is a multithreaded dictionary/mutation-based CLI XSS exploit fuzzer capable of automatically identifying filter bypasses and injection contexts.

## Demo

![demo](https://raw.githubusercontent.com/Arinerron/meissner/master/tests/run.gif)

## Link to Code

{% github https://github.com/Arinerron/meissner %}

## How I built it

Basically, it has three main components:

* the CLI. It handles HTTP requests and raw binaries/commands by abstracting the input through "harnesses".
* the XSS verification engines (selenium, etc). It actually verifies whether or not the `alert()` dialog will pop, which is cool.
* the mutator / payload generator. This part needs the most work.

Honestly the project still has a lot of work to do. There's not really a way to "prioritize" interesting XSS cases, so all we can do is identify the filters and context, then bash it.

Hm, the template for this post asks for my stack:

* Distro: Arch Linux
* AUR Helper: `trizen`
* WM: `i3-gaps`
* Shell: zsh+omz (`$ZSH_THEME` = `kolo`)
* Emulator: `kitty`
* Editor: (neo)`vim` or `atom`
* Dotfiles: https://github.com/arinerron/dotfiles

## Additional Thoughts

i use arch btw
Você não é pago (só) para codar
Tags: beginners, productivity, career
Published: 2020-05-21 02:03:40

Fala galerinha, tudo bom? Hoje vamos abordar por um pouco polémico, principalmente pra quem tem pouca experiência como desenvolvedor. Vamos falar do nosso papel como engenheiros de software / desenvolvedor.

Pra fazer as nossas tarefas do dia-a-dia precisamos colocar as mãos na massa e codificar. Sem isso não conseguimos fazer nossas entrega! Mas afinal, é isso que realmente fazemos? Somos pagos pra "escrever código"? Bem... entre aspas sim, porém isso não é tudo.

A grosso modo, somos pagos para "resolver problemas da empresa aplicando tecnologia", ou seja, o foco é *resolver problemas*! Independente se o problema for resolvido em Java, Python, Go, etc... A tecnologia é só o meio de resolver os problemas! Não adianta você escrever o código mais lindo do mundo + completamente otimizado se a empresa em que você trabalha não vai ter nenhum benefício com isso!

Pensem comigo, imagina que você está atuando em uma startup, em que o time-to-market para certas funcionalidades é crucial para que a empresa de certo. Você iria investir sem tempo com refatorações ou discutindo durante dias qual banco de dados serviço X vai usar? Acho que não...

Mas ai você pode estar pensando: "Mas código limpo e bem feito é um benefício! Isso deixa a manutenção do código mais simples!". Essa afirmação é 100% verdadeira, manutenibilidade é fundamental em qualquer base de código, mas será que *agora* ou *no momento atual da sua empresa*, isso é o mais importante? Se existe na sua empresa bases de código muito complexas e/ou melhorias de tecnologia para fazer, vale negociar essas melhorias argumentando sobre os benefícios? 

Ex: Temos um sistema em que SEMPRE que alguem tem que mexer nele, demora *pelo menos* 2 semana pra entregar algo!

É.... 2 semana é bastante tempo, se depois da melhoria proposta o sistema ficar melhor e cada tarefa demorar 1 semana, já vamos ter um ganho de 1 semana pra cada tarefa! Isso ao longo de meses/anos é um beneficio muito grande! Agora, se esse beneficio for "só" pra deixar o código mais limpo, sem um ganho real, talvez faça sentido seguir com outras tarefas.

É importante entender que sacrifícios + débitos técnicos são aceitáveis para que o negócio progrida, afinal, se a empresa não lucra e sobrevive no mercado, quem vai pagar nossas contas?

O problema é que, principalmente quem está no começo da carreira como dev, pensa muito em aprender tecnologias, codar MUITO, aplicar design patterns e etc, mas esquece que o que somos realmente pagos para fazer é resolver os problemas que nossa empresa. Sendo que codar é só a ferramenta que usamos pra resolve-los.
Output TouchDesinger's output to webcam for mac
Tags: touchdesigner, webcam, camtwist
Published: 2020-05-21 02:02:46

---
title: Output TouchDesinger's output to webcam for mac
published: true
description: 
tags: TouchDesigner, webcam, CamTwist 
---

Here's how to use TouchDesinger's output for Zoom and Google meet's camera images.
SnapCamera is great, but as a creator, I like to prepare my own effects.

## CamTwist's DL
All you need is [CamTwist](http://camtwiststudio.com/) and download it.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5390/21fb8c56-5b89-10b1-b749-459270d00b10.png)


## TouchDesinger configuration
[Syphon Spout Out](https://docs.derivative.ca/Syphon_Spout_Out_TOP)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5390/023b63ea-daba-3eba-4eab-38c161ce7500.png)

I'll put a line through this.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5390/28f5a702-b8b7-9025-1130-c717a880552f.png)

## Configuring CamTwis
Launch CamTwist and set Video Source to Syphon
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5390/46b38eec-37fb-6984-5c5e-6c466afa5437.png)

Selecting TouchDesinger in Syphon Server
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5390/1c4f7b7e-b532-d3f2-510f-017142392f80.png)

## Setting up video chat tools such as Zoom
Just select the camera on CamTwist and you're good to go!
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5390/e27bd6d8-42fa-27a3-5110-96c403cb6fb2.png)



Well, I hope you enjoy your remote work.
Make the default of a variable of type Metabase date relative
Tags: metabase, postgres
Published: 2020-05-21 02:00:03

---
title: Make the default of a variable of type Metabase date relative
published: true
description: 
tags: Metabase, PostgreSQL
---


By writing `{{{variable name}}}` in the query of metabase, you can input an arbitrary value and display data using a variable.
This feature can be used to set default values for variables.

However, by default, only a fixed date can be set for a variable's date type, and it is not possible to specify a range such as **Last week**.
We show how to solve this problem by devising SQL.

## Prerequisites.
Metabase uses PostgreSQL as the data source DBMS

## SQL representing the default period
Use coalesce and current_date, and use current_date if no variable is set.

SQL extracted from the target

```sql
s.created_at 
  BETWEEN 
    coalesce([[{{from_date}},]]] current_date - '1 week'::interval)
  and
    coalesce([[{{to_date}},]]] current_date) 
```

SQL examples for each date using the above

```sql
select 
    sum(user_id) ,
    date_trunc('day', created_at) as day
from
  a_table
where 
    created_at BETWEEN coalesce([[{{from_date}},]]] current_date - '1 week'::interval) and coalesce([[{{to_date}},]]] current_date) 
group by date_trunc('day', created_at)
order by date_trunc('day', created_at)
```

ref: https://www.wantedly.com/projects/432393?fbclid=IwAR1_jZ0-xxi2jSl3CIlA-j9PDLZOz-msEGEWc5ekeMxPQB38fIbw5fsyBD4
Making Plans with Plantuml
Tags: showdev, productivity, tutorial, learning
Published: 2020-05-21 01:53:10

---
title: "Making Plans with Plantuml"
published: true
description: 
tags: showdev, productivity, tutorial, learning
---

When it comes to building software, diagrams serve as a useful planning tool. One drawback with diagrams is the time it takes to create them. I like using [Plantuml](https://plantuml.com/) to create diagrams because it allows me to generate diagrams through text, saving me time.

To [get started](https://plantuml.com/starting), you just need to have Java and Graphviz installed.
Download the [plantuml.jar](http://sourceforge.net/projects/plantuml/files/plantuml.jar/download) file and keep it handy, you'll need it later.

Then, create a text file and use the Plantuml language to specify the information you would like to include in your diagram. 

The contents of `ranch-manager.txt` is below:

```
@startuml

title Ranch Manager DB

' hide the spot
hide circle

' avoid problems with angled crows feet
skinparam linetype ortho

entity User {
  id : number
  --
  name : text
}

entity Plant {
  id : number
  --
  name : text
}

entity Animal {
  id : number
  --
  name : text
}

note left of User #pink
 <size:15><&heart>This is evolving.<&heart></size>
end note

User }|..|{ Plant
User }|..|{ Animal

@enduml
```
Next, run the Plantuml program that converts the text into a diagram and specify the text file you already created.

`java -jar plantuml.jar ranch-manager.txt`

And voila! The `ranch-manager.png` below is generated for you. No dragging, dropping, or color picking required.

![diagram of ranch manager database](https://dev-to-uploads.s3.amazonaws.com/i/9uxvtw6450rpuh9zm494.png)

Once you learn the [language specifications](http://plantuml.com/guide), it's easy to generate a variety of diagrams through text.

Now your brain can put the extra time toward creative thinking and generating your next big idea.<span role="img" aria-label="heart_eyes_cat">😻</span>

![Clown cat drinking tea](https://dev-to-uploads.s3.amazonaws.com/i/z4wt5d1tgioeu2qn5u7e.png)