teleren/devto huggingface dataset:
Created a React/Redux Component generator
Tags: react, redux, generator
Published: 2018-12-22 14:49:21

---
title: Created a React/Redux Component generator        
published: true
description: Its very helpful to me so I thought i might as well share it. The generator creates connected React components with Domain-Driven file structure and with prewritten templates. All templates can be replaced with your own! Any feedback is appreciated! https://github.com/glekner/generator-react-domain

tags: React, Redux, Generator
---

Its very helpful to me so I thought i might as well share it. The generator creates connected React components with Domain-Driven file structure and with prewritten templates. All templates can be replaced with your own! Any feedback is appreciated! 

```sh
$ tree
.
├── Component.fixtures.js
├── Component.js
├── ComponentActions.js
├── ComponentConstants.js
├── ComponentHelper.js
├── ComponentReducer.js
├── ComponentSelectors.js
├── __tests__
│   ├── Component.test.js
│   ├── ComponentActions.test.js
│   ├── ComponentIntegration.test.js
│   ├── ComponentReducer.test.js
│   └── ComponentSelectors.test.js
├── component.scss
└── index.js

```


https://github.com/glekner/generator-react-domain
How To Use A Meeting To Elevate a Team Member
Tags: leadership, mentoring
Published: 2018-12-22 14:41:21

---
title: How To Use A Meeting To Elevate a Team Member
published: true
description: How to use a meeting to elevate a junior team member
tags: leadership, mentoring
---

 ![Buddy the Elf says 'I like meetings. Meetings are my favorite.](https://thepracticaldev.s3.amazonaws.com/i/u3zrex8n1ci9hli9yojt.jpg)

I've been fortunate in my career to have very strong advocates. My advocates would mentor me and provide good opportunities for work and career advancement. A few years into my first job, my advocates positioned me for a leadership role on a new, large IT modernization project. They used a kickoff meeting with the client to elevate my status into a leadership role. The client, ExxonMobil, had just completed their merger to become the largest company in the world and was going to replace dozens of legacy systems with a new global, health and safety system for all of their business units. 

For the kickoff meeting, ExxonMobil was going to fly in senior leaders from around the world to hear our company's plan for the project. To my surprise, my advocates assigned me a speaking role on a data conversion tool that I had never used. I had no business telling 30-year petrochemical industry veterans how I was going to use this tool to convert their complex legacy data. I had to scramble to talk to the tool developer and learn everything I could from her before the meeting. 

On the day of the kickoff meeting, I was able to get through the presentation (with no questions luckily!). After the meeting, my advocates told me that the  clients were happy that I was on the project. Knowing how inexperienced I was, I realized how important perceptions, not reality, are. I also realized that my advocates did several specific things to change perceptions about me and elevate my status.

As I've been an advocate for people, I try to use those same techniques to elevate people (usually developers) around key project or company meetings. Here are some of the things I do:

* **Have the developer send the meeting invite** - This shows some ownership over the meeting and topic, even if it is just a perception.
* **Make sure she has a speaking role** - She should have a defined speaking role during the meeting, even if just to review the agenda. You can use subsequent meetings to increase the speaking role.
* **Coach him on how to confidently introduce himself** - A major factor in the perception of the developer's status is his confidence. Coach the developer on how to introduce himself with strong, active language: "I'm John Doe and I will be <leading/reviewing/building/showing/designing> ..." Be sure to avoid phrases like "I'm here because *Steve invited me*" or "I'll be *helping* Steve to <lead/review/build/show/design> ..."
What are the fundamentals of programming?
Tags: discuss, beginners, programming, developer
Published: 2018-12-22 13:03:13

---
title: What are the fundamentals of programming?
published: true
description: 
tags: #discuss, #beginners, #programming, #developer
---

what are the core basic fundamentals of programming which if you learn it well you can easily switch between programming languages because the principles are the same in every language? I have been thinking about this for a while and searched a lot but couldn`t find the right answer to my question. I hope i can get a clear explanation from the experienced developer in DEV.to
Automate folder creation with specified name using Bash Script
Tags: bashscript, terminal
Published: 2018-12-22 12:29:15

---
title: Automate folder creation with specified name using Bash Script
published: true
description: Automation is dah king.
tags: 
- bash script
- terminal
---

I've been creating new folder with a specific naming pattern in the Terminal.
A folder named `/dayX-title` that contains a `README.md` file.

E.g: `/codingclub/challenge/dayX-title/README.md`

``` bash
linxea at tmo in ~/codingclub/challenge
$ ls
day0-the-beginning-of-the-coding-club
day1-may-the-odds-be-in-your-favour
day2-so-far-so-good
day3-oh-man
```

This is how I create a new file in a new folder. I manually look through the list of folders to get the next count. Then type the title-with-dash-and-dash-and-dash. 
```
$ touch day4-time-to-automate/README.md
```

I'm getting lazy so we'll write a bash script to do that. 

I'm looking to write a commmand `./new time to automate` to create `/day4-time-to-automate` with a README.md in it.

### Steps:
0. Iterate through all the folders
1. Find the largest number of day
2. Create a new folder with a README.md file with the given input filename

```
#!/bin/bash

# Take in all arguments in one variable
input="$*"
folderTitle=$input

# Check if there is input, otherwise exit script
if [[ -z "${folderTitle// }" ]]; then
  echo "Where is your awesome title yo?"
  exit 1
fi

# Replace space to -
folderTitle=${folderTitle// /-}

# Loop through the list of directories and find the biggest number
biggestNumber=-1
for dir in $(ls)
do
  number=`sed 's/[^0-9]//g' <<< $dir`
  if (( number > biggestNumber )); then
    biggestNumber=$number
  fi
done

# Increment the biggest number by 1
((biggestNumber=biggestNumber+1))

# Create a new folder and README.md file
newName=day$biggestNumber-$folderTitle
mkdir -p $newName
echo -e "TITLE: Day $biggestNumber $input\n" > $newName/README.md

# Print success message to make me feel good
echo Created $newName yo 🦄
```

Tada, now you just have to make the script executable by running `chmod -x` and run the command `./new.sh` with title after that.

```
$ chmod -x new.sh # make the script executable
$ ./new.sh as usual this task takes longer than i expected
```

Uploaded my script to Repl.it, check it out at https://repl.it/@linxea/Create-New-Folder-and-File . You may need to login to play with it.



### DOES IT WORTH THE TIME TO PICK UP BASH TO AUTOMATE SUCH A TINY MATTER?
a tiny yes.

### Another Problem Another Day to Solve,
I wanted to extract the number `123` between `day123-title-that-may-contain-123` using `sed` but regex is messing with my mind. 🤯 How do I do that? How to I write a regex that only returns number between `day` and `-everything-else-after-dash`? Explain regex like I'm 5 please.


### End
How to implement real-time notifications in my web application when i can't afford service like firebase ?
Tags: help
Published: 2018-12-22 12:18:12

---
title: How to implement real-time notifications in my web application when i can't afford service like firebase ?
published: true

description: I am currently working in a context in which i can't use firebase but i want to add real time notifications to the web app i am working, so please could give me some advice or a logic to achieve this ?

tags: help
---
Bar Chart with rounded corner by D3.js
Tags: d3js, javascript
Published: 2018-12-22 11:45:25

---
title: "Bar Chart with rounded corner by D3.js"
published: true
description: "how to draw rounded bar chart using D3"
tags: ["d3js", "javascript"]
---

I love D3.js and Data Viz. Recently I was wondering how to draw a rounded-corner bar chart. I found there are already some nice answer in StackOverflow.

- [svg / d3.js rounded corner on one corner of a rectangle - Stack Overflow](https://stackoverflow.com/questions/12115691/svg-d3-js-rounded-corner-on-one-corner-of-a-rectangle)
- [Rounded corner only on one side of svg <rect> - Stack Overflow](https://stackoverflow.com/questions/34923888/rounded-corner-only-on-one-side-of-svg-rect)

In brief, you can use `<path>` instead of `<rect>` when you want it to be rounded-corner. I wrote my CodePen sample as the replication. 

{% codepen https://codepen.io/chooblarin/pen/KbWYvP default-tab=js,result %}


`<path>`'s `d` attribute is like follow.

```javascript
`
 M${x(item.name)},${y(item.value) + ry}
 a${rx},${ry} 0 0 1 ${rx},${-ry}
 h${x.bandwidth() - 2 * rx}
 a${rx},${ry} 0 0 1 ${rx},${ry}
 v${height - y(item.value) - ry}
 h${-x.bandwidth()}Z
`
```

`rx` and `ry` are the radii of the ellipse and you can change it as you like. 


---

I've also created some examples using D3.js and React 😎
https://github.com/chooblarin/react-d3-example
Understanding Pure Function In Javascript
Tags: javascript, es6, react, dev
Published: 2018-12-22 10:42:19

---
title: Understanding Pure Function In Javascript
published: true
description: Understanding Pure Function In Javascript
tags: #js #es6 #react #dev
---

Post Link : <a href="https://www.skptricks.com/2018/12/understanding-pure-function-in-js.html" >Understanding Pure Function In Javascript </a>

In this tutorial, we are going to discuss javascript pure function. These functions are widely used in javascript and we used for some specific purpose.


What Is A Pure Function?
The definition of a pure function is:
The function always returns the same result if the same arguments are passed in. It does not depend on any state, or data, change during a program’s execution. It must only depend on its input arguments.
The function does not produce any observable side effects such as network requests, input and output devices, or data mutation.

<a href="https://www.skptricks.com/2018/12/understanding-pure-function-in-js.html" >Understanding Pure Function In Javascript </a>

<img src="https://3.bp.blogspot.com/-NIpVEnIQOpM/XBnS2vvwBwI/AAAAAAAACRE/iz0emh8b7WsC2qOSPJzV9alKBdxzyJfZgCLcBGAs/s400/pure.png" />
Understanding closures in JavaScript
Tags: javascript, es6, web
Published: 2018-12-22 10:40:17

---
title: Understanding closures in JavaScript
published: true
description: Understanding closures in JavaScript
tags: #js #es6 #web #react
---

Post Link : <a href="https://www.skptricks.com/2018/12/understanding-closures-in-javascript.html" >Understanding closures in JavaScript </a>

In this tutorial we are going to discuss what is closure in javascript. A Closure is the aggregate of functions clumped together with the references to its surrounding environment. It gives you an outer function’s scope from an internal function. Scopes are contexts of variables.

What is a closure?
A closure is a feature in JavaScript where an inner function has access to the outer (enclosing) function’s variables — a scope chain.
The closure has three scope chains:
it has access to its own scope — variables defined between its curly brackets
it has access to the outer function’s variables
it has access to the global variables

When to use Closure?
Closure is useful in hiding implementation detail in JavaScript. In other words, it can be useful to create private variables or functions.


<a href="https://www.skptricks.com/2018/12/understanding-closures-in-javascript.html" >Understanding closures in JavaScript </a>

<img src="https://2.bp.blogspot.com/-CSfsC2igXTw/XB34fvCZXsI/AAAAAAAACRc/kVlEM5pojJcoTFEUgCPAQ-UGfJFefnmoQCLcBGAs/s640/closure.png" />
How do you pronounce dev.to?
Tags: discuss
Published: 2018-12-22 10:19:06

---
title: How do you pronounce dev.to?
published: true
description: Is it dev.to or dev.to
tags: #discuss
cover_image: https://thepracticaldev.s3.amazonaws.com/i/n674nsko1aujma5mul6n.jpeg
---

I pronounce it _'dev - too'_ and I can't seem to get used to this. I'm sometimes tempted to leave it at just _'dev'_ but that's just akwardly generic.
What annoys you the most about the Web?
Tags: discuss, webdev
Published: 2018-12-22 10:03:19

I would love to hear your thoughts about things that annoy you the most around the Web platform.

Personally, these are some of the few things that keep getting on my nerves:

1) **Frameworks**

The fact that most jobs look for experience and "strong" skills in React or Angular. It annoys me that companies don't seem to understand that some developers simply use the vanilla approach.

2) **Quality**

There can be a big misconception between the quality of one website from the other. It annoys me that there is no easy way to know the quality, security, and user-privacy policies of the websites I'm using. For me, HTTPS just won't cut it.

3) **Titles**

It seems to me that everyone is becoming a CEO or a founder lately. There's no way of distinguishing the legitimacy of people and their work.

Please share with us, which are some of the main pain points you face when working on web development?

All the best,
Owen
Generate and Set Pseudorandom Hexadecimal Background Color Using JavaScript
Tags: javascript, programming, showdev, discuss
Published: 2018-12-22 08:18:35

---
title: Generate and Set Pseudorandom Hexadecimal Background Color Using JavaScript
published: true
description: 
tags: #javascript #programming #showdev #discuss
---
I'm working on a project that deals with pseudo random event-driven color changes and needed a solution to generate hexadecimal codes for web use.

#Program Design and Thinking:
I know that hexadecimal color codes represent red green and blue values in base 16. Which are defined by the following pattern:

![Hexadecimal number explanation](http://btsource.net/dev_to_images/rgb.png)

I started thinking about what type and data structure to use in the implementation. I cam up with a general idea using a sets to define the base set and a general rule to build a six value hexadecimal color code.

* **Where H is the set of hex values** - These will be defined as strings.
* **The set 'Hexadecimal Color Code'** - uses `+=`, the operator from JavaScript to concatenate a range of values from _H_

![General outline of how to build hex codes](http://btsource.net/dev_to_images/hexset.png)

At this point I was able to start writing some code. I will let the code speak for itself in the embed below.

#Discussion and Insight:
As a Computer Science student and total nerd I have a question about this code.

* Can these values be generated totally numerically, then parsed as strings after generation? I know in C/C++ _(my coding comfort zone)_ you can do this. With my current knowledge of JavaScript I have yet to discover a method.

Any other insights or comments would be appreciated.

#The Code

{% codepen https://codepen.io/NickersF/pen/QzpYGK default-tab=js,result %}

#Taking it Further:
After I implemented this I started thinking about doing more complex and potentially useful things with hex colors. For example, one could build on this idea and implement the code in such a way that only the `R`, `G`, or `B` get generated or a certain combination of the three.

Anyways, I hope some discussion arises from this, and this post was interesting.

_**If you enjoyed this content and want to support a poor freelancing student so I can eat and produce more content in the future, I accept donations via [PayPal](https://paypal.me/btsourcepdx)**_
AoC Day 22: Mode Maze
Tags: adventofcode, discuss
Published: 2018-12-22 06:59:59

---
title: "AoC Day 22: Mode Maze"
published: true
description: "Day 22: Where we spelunk -- but not without first analyzing the risk."
cover_image: https://thepracticaldev.s3.amazonaws.com/i/hjb9l4h258vpiy1b228c.png
tags: adventofcode, discuss
series: Advent of Code 
---

[Day 22, can you believe it?](https://adventofcode.com/2018/day/22)  Only 3 more days until Christmas!  But first, we have to find the friend of someone who may or may not be Santa inside a deep, rocky, narrow, and wet cave system.  But do we charge in there blindly and without a plan?  No!  We are programmers!  We need to do some analysis first to evaluate the risk of the area.

This weekend is the last chance to make up some ground against this relentless onslaught of code challenges!  Or, depending on your priorities, this weekend might be a perfect chance to get caught up on eating tons of cookies and drinking eggnog.  Or both!  😀

Good luck with this one!  Let's see how you do.
Key codes on AB Shutter 3
Tags: bluetooth, keyboard
Published: 2019-07-08 10:12:20

---
title: Key codes on AB Shutter 3
published: true
tags: bluetooth, keyboard
canonical_url: https://ofdigitalwater.postach.io/post/key-codes-on-ab-shutter-3
---

AB Shutter 3 is a small remote shutter.

![AB Shutter 3 image](https://cdn-images.postach.io/fa097c2a-1c29-4702-93f4-ab4cf778aa39/9f9a0774-ce0b-497a-b8af-b5ab6f599998/422fceff-1db2-4745-b604-b388e351c1f1.jpg)

It connects to your handset as a Bluetooth keyboard. But which key codes does it send to the device?

To answer this question, I simply connected the shutter to my Android device, started an editor and pressed the buttons.

The button **iOS** sends the keycode **Volume Up**. The button **Android** sends the keycode **Enter + Volume Up**.

Be aware: it is possible, that there are some other key codes sent that went unnoticed.
Arrow Functions
Tags: javascript, webdev, programming, functions
Published: 2018-12-22 05:50:09

---
title: Arrow Functions
published: true
description: 
tags: #javascript #webdev #programming #functions
---
![alt](https://thepracticaldev.s3.amazonaws.com/i/d4kx8m9n7g262k5juxb7.jpg)

<h3>Arrow Functions</h3>

Arrow function was introduced in ES6 using a new syntax for declaring functions called the **arrow** syntax. This new syntax uses less verbose syntax.

Arrow function can easily identified by the arrow symbol ‘ => ’ from where it gets its name. As part the syntax and rules for writing arrow functions is that the parameters come before the arrow element and the main body of the function comes after. 

Arrow functions are always anonymous, and you need to assign them to a variable, so you can refer to them.

**Advantage** 

There are numerous advantages of using arrow functions over other function declaration methods:

-They are much less verbose
-Do not need to use parentheses for single parameters
-The body of the function does not need to be placed inside a block if it is only one line
-If the return statement is the only statement in the body of the function, the return keyword is not required
-They do not bind their own value of **this** to the function

Example:

```
const square = x => x*x;
```

In this example the ‘x’ did not need to be in parentheses because is only one parameter; multiple parameters needs to go inside parentheses. 

Example with two parameters:

```
const add = (x,y) => x = y;
```

But if the function does not require any parameters you can use empty parameters before the arrow symbol:

```
const hello = ( ) => alert(‘Hello World!’);
```

In all these examples the function fits onto one line, so there is no need to put them inside a block. But for longer functions you will require to use curly brackets to define the body of the function and the return keywork at the end.

```
const tax = (salary) => {
const taxable = salary – 5000;
const lowerRate = 0.25 * taxable;
taxable = taxable -15000;
const higherRate = 0.4 * taxable;
return lowerRate + higherRate;
}
```

As you can see the benefit of using arrow functions is lost when using it in a longer function. Arrow functions are a better fit for short and anonymous functions.
Defining Functions
Tags: javascript, webdev, programming, functions
Published: 2018-12-22 05:04:44

---
title: Defining Functions
published: true
description: 
tags: #javascript #webdev #programming #functions
---

![alt text](https://thepracticaldev.s3.amazonaws.com/i/rbd6k57twk4lh3pfsvix.jpg )

<h3>Defining a function</h3>

**Function Declarations**

There are different ways to define a function in JavaScript, but I will cover three of the most common. 

**Function Literal**

To define a function literal, you can use a function declaration:

```
function hello( ) {
console.log(‘Hello World!’);
}
```

The syntax of this function starts by starting with the function keyword and is followed by the name assigned to the function, in this case ‘hello’ followed by parenthesis and finally followed by a block of code for the function.

**Function Expressions**

Function expressions is another way to define a function, this is done by assigning an anonymous function to a variable:

```
const bye = function ( ) {
console.log(‘Bye World’);
};
```

It is called anonymous function because it does not have a name. It is just created and assigned to a variable.

But, you can also create a named function expression:

```
const bye = function bye( ) {
console.log(‘Bye World’);
};
```

In this case the name of the function is ‘bye’ and it is assigned to the variable ‘goodbye’.

**Function ( ) Constructors**

We can also create a function by using the Constructor Function ( ). It’s body is entered as a string:

```
const hi = new function (‘console.log(“Hi World”);  ) ;
```

Although this is another way to define a function, it is not recommended because there are some problems associated with placing a string inside the function body, specially because of the different number of quotation marks in the console.log.

ES6 introduced a new way to define functions using arrow notation, named 'Arrow Function, but I will make a new blog about it.
What should I call my Python library?
Tags: python, github, library, contest
Published: 2018-12-22 04:24:11

---
title: What should I call my Python library?
published: true
description: I've created a Python library but the name I previously chose turns out to be already taken.
tags: python, github, library, contest
---

I've created a Python library that contains many useful functions. At the moment, it's called Quilt but I've realised that such name has already been used in other GNU software. That brings me to the Python thread of dev.to to ask the community for a new name. By the way, the GitHub repository is [here](https://github.com/Richienb/quilt) and the documentation is [here](https://quilt-lang.richie-bendall.ml/).
Remote pet feeder
Tags: iot
Published: 2018-12-20 07:23:39

---
title: Remote pet feeder
published: true
description: 
tags: iot
---

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

## How it works
Do you wanna feed your pets from outdoor?
This is a feeder that can be controlled from the Web.

## Materials

- obniz – 1
- battery or usb adaptor & cable – 1
- Screw and pipes
- Servo motor (unlimited rotation) – 1
- Pet food – as many as possible

## Step 1
Cut pipes and prepare the screw.
This is a sample stl file. you can download and print this by 3D Printer. http://obniz.io/images/cookbook_3.stl
Then, Build these things and connect screw to a motor.
And put them into a box.

## Step 2
Connect Servo motor to an obniz.
like

io0: GND,
io1: VCC,
io2: signal
Then power up your obniz.

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

## Step 3
Write code below.
Put foods to it and Try onece.
foods will be outcome.

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

https://youtu.be/hxVx4Slo9kY

## Program

https://obniz.io/explore/4