teleren/devto huggingface dataset:
Creating an interactive drawing with arduino
Tags: arduino, hardware, art, kids
Published: 2017-12-31 11:23:10

---
title: Creating an interactive drawing with arduino
published: true
description: An easy experiment for arduino
tags: arduino, hardware, art, kids
---


I have to develop new arduino projects each week for my young pupil, who is passionate about electronics and hardware. For that, I found our last project creative and interesting, and I bet some of you can use it as a _geek_ experiment.

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

What we need here is graphite based pencils (or directly graphite, works better), arduino, resistors, a led, a metallic clip, and a white regular paper. How does it works? 

First we should know how this works. In arduino, we can use several sensors as INPUTS, such as a button, a light sensor, an humidity sensor, etc. But we can also attach home-made INPUTS using conductor materials. Steel and metal are common conductors materials (you can try this experiment with a coin, too) and so is **graphite**. 


For making this work in arduino, we are using a special library called [CapacitiveSensor04](https://github.com/arduino-libraries/CapacitiveSensor/zipball/master). Once our library is added, we can start designing the circuit. This is an example with steel paper, works the same with graphite. Only draw something (very dense), attach a paper clip to the drawing (be careful, it should be a single-line drawing) and a cable to the paper pin, which is the one connected to the resistor + 4 and 2 pins.

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

And this is our code:

```
#include <CapacitiveSensor.h>
CapacitiveSensor capSensor = CapacitiveSensor(4,2);

int threshold = 1000;
const int ledPin = 12;

void setup() {

    Serial.begin(9600);
    pinMode(ledPin, OUTPUT);

}

void loop() {

    long sensorValue = capSensor.capacitiveSensor(30);
    Serial.println(sensorValue);
    if(sensorValue > threshold) {
        digitalWrite(ledPin, HIGH);
    }
    else {
        digitalWrite(ledPin, LOW);
    }
    delay(10);

}

``` 
We might have to calibrate the threshold, in which case you will only have to open the Monitor and test. And... tadaah! interactive drawing hat lights a led. You can now do other things. Just experiment!

In case you are a tutor, teacher or parent, [here](https://github.com/terceranexus6/clases_con_rafa/blob/master/apuntes_curso_nuevo/clase_arduino_capacitivo.md)'s the content of my class in spanish ready for the students (answers, incomplete code for them and complete code with comments for the teachers and activities).
Modernize your ReactJS application with async/await in 2018
Tags: react, asyncawait
Published: 2017-12-31 08:21:57

---
title: Modernize your ReactJS application with async/await in 2018
published: true
description: 
tags: reactjs, async await
---

To start 2018, you can modernize your ReactJS application by incorporating the async/await feature. Assume you already use a Promise-based HTTP client library such as [axios](https://github.com/axios/axios), you can easily refactor your existing code, or you can just start using async/await in new codes. 

Either way or both, here's a small snippet that can help:

```
import axios from 'axios';
...
class Login extends Component {
    constructor(props, context) {
        super(props, context);
        this.onLogin = this.onLogin.bind(this);
        ...
    }
    async onLogin() {
        const { email, password } = this.state;
        try {
            const response = await axios.post('/login', { email, password });
            console.log(response);
        } catch (err) {
            //handle error
        }
    }
    ...
}
```
So the code change is very minimal. But running **webpack** might result in an error. The error might say something like *regeneratorRuntime is not defined*. In that case, it's a simple fix:

```
npm install babel-plugin-transform-runtime --save-dev
```

Then in the .babelrc file, simply add
```
{
    ...
    "plugins": [
        ["transform-runtime", {
            "regenerator": true
        }]
    ]
}
```
Other than adding **babel-plugin-transform-runtime** and a simple modification to the .babelrc file, no **babel-runtime**, no **polyfill** is necessary.
How to define the method for the DSL configuration file
Tags: ruby, rake
Published: 2017-12-31 04:53:01

---
title: How to define the method for the DSL configuration file
published: true
description: 
tags: ruby,rake
---


You can define the method for the DSL configuration file[^1] by Refinements.

For example, the `hi` method in a following code can use only in this Rakefile, it shouldn't affect any code outside of the Rakefile.


```rb
# Rakefile
main = self

using Module.new {
  refine(main.singleton_class) do
    def hi
      puts :hi
    end
  end
}

desc 'hi'
task :hi do
  hi
end
```

```
% rake hi
hi
```

## Common mistake 1


The following code defines the method at top level.


```rb
# Rakefile
def hi
  puts :hi
end

desc 'hi'
task :hi do
  hi
end
```

## Common mistake 2


The following code defines the method at top level.


```rb
# Rakefile
desc 'hi'
task :hi do
  def hi
    puts :hi
  end

  hi
end
```

## Common mistake 3


The following code defines the method at top level.


```rb

# Rakefile
m = Module.new do
  def hi
    puts :hi
  end
end

desc 'hi'
task :hi do
  include m
  hi
end
```

## Why should we avoid to define the method at top level?


It possibly breaks other libraries code.



For example:


```rb
# duck.rb
class Duck < Struct.new(:name)
  def sound
    puts 'quack'
  end
end

```


```rb
# Rakefile
require_relative 'duck.rb'

def puts(*)
  print 'Hi! '
  super
end

desc 'hi'
task :hi do
  duck = Duck.new('Donald')
  puts duck.name
  duck.sound
end

```

```
$ rake hi
Hi! Donald
Hi! quack
```

## The benefit of the Refinements

The ruby's Refinements are lexical in scope[^2].
Thus the top level method that defined by the Refinements couldn't breaks other libraries code, It's totally fine!


```rb
# Rakefile
require_relative 'duck.rb'

main = self

using Module.new {
  refine(main.singleton_class) do
    def puts(*)
      print 'Hi! '
      super
    end
  end
}

desc 'hi'
task :hi do
  duck = Duck.new('Donald')
  puts duck.name
  duck.sound
end

```

```
$ rake hi
Hi! Donald
quack
```

## Other approach

Wrap the method and DSLs within a module.


```rb
# Rakefile
require_relative 'duck.rb'

Module.new {
  def puts(*)
    print 'Hi!, '
    super
  end
  extend(self)

  extend Rake::DSL

  desc 'hi'
  task :hi do
    duck = Duck.new('Donald')
    puts duck.name
    duck.sound
  end
}
```


```
$ rake hi
Hi!, Donald
quack
```

[^1]: e.g. `Rakefile`, `config/routes.rb`, `unicorn.rb`, etc...
[^2]: https://docs.ruby-lang.org/en/trunk/syntax/refinements_rdoc.html#label-Scope
Vim & Laravel
Tags: discuss, productivity, vim
Published: 2017-12-31 01:44:04

---
title: Vim & Laravel
published: true
description: Making Laravel development 100 times faster with vim
tags: discuss, productivity,vim
---

Hello guys, I have recently been developing a few projects in Laravel, and, being myself a die hard Vim user, I prefer the MacVim approach, when I first started out with laravel, I decided to set some Vim mappings in order to integrate my laravel workflow into Vim, so far, i have this specific mappings:



"-----------------Laravel Specific Mappings---------------"
"Shortcut for routes/web.php file 
nmap <Leader>lr :tabedit routes/web.php<cr>



#"Larvel Comands

###"Migrate tables
nmap <Leader>lmi :!php artisan migrate <CR>


#"Creators

###"Autocomplete for making a controller
nmap <Leader>lmc :!php artisan make:controller			

###"Autocomplete for making a model
nmap <Leader>lmm :!php artisan make:model 		

###"Create a migrations table 
nmap <Leader>lmmt :!php artisan make:migration 



#"Finders


###"Search Controllers directly in app/Http/Controllers
nmap <Leader>lfc :CtrlP<cr>app/Http/Controllers/


###"Search the Migrations files
nmap <Leader>lfdm :CtrlP<cr>database/migrations/

###"Search for data models under app/
nmap <Leader>lfm :CtrlP<cr>app/	

###"Search for view in resources/views/
nmap <Leader>lfv :CtrlP<cr>resources/views/			

###"Search for database speeders
nmap <Leader>lfs :CtrlP<cr>database/seeds/



I do this because I have not seen a lot of laravel FUNCTIONAL plugins yet, and I would love to see that some one actually finds this poor mappings useful, cheers Vim users !!
Dynamic screen definitions in i3wm
Tags: i3wm
Published: 2020-12-03 19:35:24

---
title: Dynamic screen definitions in i3wm
published: true
date: 2017-12-30 23:00:00 UTC
tags: i3wm
canonical_url: http://mrtango.planetcrazy.de/dynamic-screen-definitions-in-i3wm.html
---

Below we will generate a custom screens definition config file for i3 and using update-conf.py to generate the i3 config from a config.d directory.

## Installing requirements

To generate a config file from a config.d, we are using the Python package _update-conf.py_, so lets install it.

```
sudo pip install update-conf.py

```

## Separating i3 config files

Now let's create the config.d directory and put our config files into the directory.

```
mkdir ~/.i3/config.d
cp ~/.i3/config ~/.i3/config.d/99-main

```

For the screen definitions we want a separate config file the following:

```
set $mainscreen DP-1
set $sidescreen eDP-1

```

## Creating the gen-screen-config.sh script

This file will change if, we use a different settings of monitors or plug a monitor into a different port on the computer. To update this file we will use the following script.

```
#!/bin/bash

xrandr --listactivemonitors | awk '$1 ~ /^0/ {print "set $mainscreen " $4}'
xrandr --listactivemonitors | awk '$1 ~ /^1/ {print "set $sidescreen " $4}'

```

## Generating the screen config file for i3

You can use the script like this:

```
./gen-screens-conf.sh > ~/.i3/config.d/10-screens

```

## Generating the i3 config from config.d files

To generate the i3 config file from the config.d directory, we use the update-conf.py:

```
update-conf.py -f /home/maik/.i3/config

```

This will concatenate all files in config.d directory into the i3 config file.

## Optimizing the process

To make it easier to switch between setups, we can integrate the calls into i3 restart binding.

To not mess up the i3 config and to make sure the screens config config is generated when we regenerate the i3 config, we create enother script called _refresh-screensettings.sh_.

```
#!/bin/bash

~/.i3/scripts/gen-screens-conf.sh > ~/.i3/config.d/10-screens
update-conf.py -f ~/.i3/config

```

With this script in place we can use it in the restart binding as follow:

```
bindsym $mod+Shift+r exec /home/john/.i3/scripts/refresh-screensettings.sh; restart

```

Now, every time we change the setup, we just need to restart i3. Make sure you have set the primary screen before restarting i3. You can do that for example with the ARandR program.
Introducing Favico Generator
Tags: node, javascript, showdev
Published: 2017-12-30 21:47:09

---
title: Introducing Favico Generator
published: true
description: A tool that generates favicons from images
tags: node.js, javascript, showdev
---

Hi everyone, my name is Abdulazeez. I want to introduce a simple tool i built **Favico Generator**.

    
![alt text](https://thepracticaldev.s3.amazonaws.com/i/t2swlz733hhxq7vrgjuh.jpg)
Preview of how the tool works.

# What is a favicon ?

A favicon is a small image file with the *ico* extension used as representational images used by websites to override browser tabs favicos. That's my definition of what a favicon is.

#Introducing Favicon generator.

I'm an upcoming modern web developer , i use to code **wapka** websites and as at that time, i used to get favicos from source codes. I didn't have an idea on how they were generated. I asked a friend of mine, he said he resizes images online and use them as favicos. So i thought of making a *command line* tool that would generate favicons from images right at my console. Wow.. Super cool isn't it  ?. Then i made **favico generator**.

# What can i do with the tool ?
Its a handy tool such that it is installed globally and therefore, it can be called from any angle in your terminal or console. The tool is used mainly to generate favicon.ico images from images.

# Why should i get this tool ?
You should get it because it saves the stress of uploading and downloading every time. You can just create favicons at your disposal.

# Where can i get this tool ?
Its a npm module, i developed it into a module so it can be installed without stress. To do this, just visit my github repo for full instructions . The link to the repo will be shared at the end of this article. Meanwhile, you can install this from the npm registry with the command . 
```bash
sudo npm i -g favico-generator
```
Don't forget to check the instructions [here.](https://npmjs.com/package/favico-generator)

# Contributions
The module / tool is still in its early stages although its version is at **2.1.0** and contributions are needed and i'll appreciate any form of contribution to the projects.

# Conclusion
So, you should try get my tool and see what its capable of.. Instructions on how to use the tool is entailed fully on my repo. Lastly, don't forget to check the repo and give it a star if you find it useful. Link to repo is below !.

### Github repo link: [Click Me](https://github.com/Youngestdev/favico-generator)
Introducing Elasticsearch repository php package 
Tags: php, elasticsearch, opensource
Published: 2017-12-30 19:40:38

---
title: Introducing Elasticsearch repository php package 
published: true
description: about elasticsearch active repository package
tags: php, elasticsearch, opensource
---

## Elasticsearch active repository package 

Elasticsearch Repository is a simple, smart implementation of Active Repository for Elasticsearch.

### Features
- provide active repository pattern over your elasticsearch indices, types.
- Minimize lines of code for building elasticsearch queries with system with big business logic.
- Prevent code duplication.
- Reduce potential programming errors.
- Apply centrally managed, consistent access rules and logic.
- Improve the code’s maintainability and readability by separating client objects from domain models.
- Maximize the amount of code that can be tested with automation and to isolate both the client object and the domain model to support unit testing.

## installation
 grap it via composer 

```bash
composer require mustafah15/elastic-repository

``` 

ElasticRepository contains a queryBuilder object for getting result from elasticsearch in effective way example for using queryBuilder inside your repository


```php

public function getStudent($name, $class) {
    $this->queryBuilder->match('name', $name)->where('class', $class)->get();
}   
```


For full documentation [check github repository](https://github.com/mustafah15/elastic-repository#clipboard-documentation)
How to set up a git bare repository for web development code pushes
Tags: discuss, beginners, webdev, productivity
Published: 2017-12-30 13:20:41

---
title: How to set up a git bare repository for web development code pushes
published: true
description: 
tags: discuss,beginners,webdev,productivity
---
Hi all, let's consider that you already have your nice local development environment in which you develop your projects. At some point you'll want to get to get that project on a public server to share with friends, clients or maybe customers. And of course, since you're using a version control, you want an easy way of pushing updates to that server.

An easy way to do this, is set up a git bare repo on your server. For a great explanation of the differences you can check out [this article](http://www.saintsjd.com/2011/01/what-is-a-bare-git-repository/).

Now that we have that sorted out, let's get to business.
Let's consider that our public folder is at `/home/~username/public` where `~username` is a system user.
What I'm usually doing is firstly setting up my public key as a way of getting on the server.
```bash
mkdir .ssh
chmod 700 .ssh
touch .ssh/authorized_keys
chmod 644 .ssh/authorized_keys
```
Now use vim or your preferred editor to add the public key as a one liner in `authorized_keys`.

Next step is to initiate our git bare repository. By personal convention I'm creating a `.gitrepo` folder so feel free to use something else if it suits your better. The only constraint is important to have is to __not__ create it in the public folder.

```bash
mkdir .gitrepo
cd .gitrepo/
git init --bare
cd hooks/
touch post-receive
chmod +x post-receive
```

Now it's a matter of writing a small shell script of doing the work.

We have two options for setting up the checkout.

1. Checking out only a specific branch
```bash
#!/bin/sh
GIT_WORK_TREE=../ git checkout -f [branch]
```
2. Checking out any branch (this is useful for a development setup)
```bash
#!/bin/sh
while read oldrev newrev refdo
    branch=´echo $ref | cut -d/ -f3´
    GIT_WORK_TREE=../ git checkout -f $branch
done.
```

Since we have the post-receive hook setup, we can also run any other shell commands that are needed for example compiling our web assets or installing required dependencies.

Once that's done, you can use the remote repository after you add it to your local git repository using the following command:
```bash
git remote add [remote-name] ssh://[~username]@[site|ip]/~/.gitrepo
```
Helpers for Process class in Swift.
Tags: swift
Published: 2017-12-30 12:09:07

---
title: Helpers for Process class in Swift.
published: true
description: 
tags: swift
---


```swift
Process() <<< "/bin/echo" <<< ["Hello, World.\nこんにちは世界。"]
    | Process() <<< "/usr/bin/grep" <<< ["Hello"]
    >>> { output in
    
    output.string.map { print($0) }    // Hello, World.
}
```


Helpers below.

```swift
/// 出力を簡単に扱うための補助的な型。FileHandleを隠蔽する。
struct Output {
    
    private let fileHandle: FileHandle
    
    init(fileHandle: FileHandle) {
        self.fileHandle = fileHandle
    }
    
    var data: Data {
        return fileHandle.readDataToEndOfFile()
    }
    
    var string: String? {
        return String(data: data, encoding: .utf8)
    }
    
    var lines: [String] {
        return string?.components(separatedBy: "\n") ?? []
    }
}

precedencegroup ArgumentPrecedence {
    
    associativity: left
    higherThan: AdditionPrecedence
}
infix operator <<< : ArgumentPrecedence

/// Processにexecutable pathを設定する。
func <<< (lhs: Process, rhs: String) -> Process {
    
    lhs.executableURL = URL(fileURLWithPath: rhs)
    return lhs
}

/// Processに引数を設定する。
func <<< (lhs: Process, rhs: [String]) -> Process {
    
    lhs.arguments = rhs
    return lhs
}

/// Processをパイプする。
func | (lhs: Process, rhs: Process) -> Process {

    let pipe = Pipe()

    lhs.standardOutput = pipe
    rhs.standardInput = pipe
    lhs.launch()

    return rhs
}

precedencegroup RedirectPrecedence {
    
    associativity: left
    lowerThan: LogicalDisjunctionPrecedence
}
infix operator >>> : RedirectPrecedence

/// Processの出力をOutput型で受け取り加工などができる。
/// ジェネリクスを利用しているのでどのような型にでも変換して返せる。
func >>> <T>(lhs: Process, rhs: (Output) -> T) -> T {
    
    let pipe = Pipe()
    lhs.standardOutput = pipe
    lhs.launch()
    
    return rhs(Output(fileHandle: pipe.fileHandleForReading))
}
```
About challenges
Tags: challenges, discuss, programming, fun
Published: 2017-12-30 11:04:17

---
title: About challenges
published: true
description: 
tags: challenges, discuss, programming, fun
---

Hi guys !

A few weeks ago, we spoke about [adventofcode2017](https://dev.to/philnash/advent-of-code-2017-12b), so did you all finished on time?

I was wondering if anybody is doing the [codefights arcade challenges](https://codefights.com/) and what is you opinion about this website. Does it help me to be a better developer in any way?

Thanks !
Which programming languages do you think are the most worthy technologies for a junior backend developer
Tags: discuss
Published: 2017-12-30 10:23:23

---
title: Which programming languages do you think are the most worthy technologies for a junior backend developer
published: true
tags: discuss
---

I'm curious. There are so many options like golang, node, java... Additional karma for the new year if you have starting points like books, tutorials, etc.
Are async frameworks really worth it?
Tags: rust, tokio, async, discuss
Published: 2017-12-30 07:50:15

---
title: Are async frameworks really worth it?
published: true
description: A question to the community, because I really don't know.
tags: rust,tokio,async, discuss
---

*This "article" is going to be specifically about [Rust](https://www.rust-lang.org/) and [Tokio](https://tokio.rs/), but it should apply to more frameworks*

This is more of a question than an article. I've been working on [Synac](https://github.com/synac-chat/server) for a while, and I've needed to handle multiple connections on one thread.
For the server, I went with tokio. It allowed me to do something like this:
```Rust
listener.incoming().for_each(|(conn, addr)| {
    ssl.accept_async(conn).map_err(|_| ()).and_then(move |conn| {
        println!("Client connected!");
    });
});

core.run();
```
The problem with that is that often you can't just make everything async unless you're programming in a language where blocking calls are barely possible (looking at you, JavaScript). Sure, Tokio is easy once you get the hang of it. But usually you want to combine syncs, asyncs, and all kinds of things. This is where Tokio becomes a problem.
For the synac client, I already had experience with a library that only allowed blocking reads, so multithreading wasn't possible. I didn't want to force built-in mutexes upon users, and I didn't want to prevent multithreading, so I came up with my own solution. It gave me code like this:
```Rust
if let Ok(Some(packet)) = listener.try_read() {
    println!("Packet received: {:?}", packet);
}
```
*(If you wonder how I did this magic sorcery, I simply did something similar to [read_exact](https://doc.rust-lang.org/std/io/trait.Read.html#method.read_exact), but in a struct. [Code](https://github.com/jD91mZM2/synac-rs/blob/master/src/listener.rs))*
This ended up being a good decision, because I could then do non-blocking reads inside `gtk::timeout_add`! And it wasn't too difficult to code it either!

Now I want to ask: When should you use an async framework with cores and stuff, and when should you just write a non-blocking listener? I feel like non-blocking listeners are way more flexible, but there has to be a reason tokio exists... Right?
How to write your first webpack plugin?
Tags: beginners, javascript, webpack, performance
Published: 2017-12-30 02:58:44

---
title: "How to write your first webpack plugin?"
published: true
description: 
tags: beginner, javascript, webpack, performance
---

Checkout my medium post on "how to write your first webpack plugin?" at https://medium.com/@Uneducated/how-to-write-your-first-webpack-plugin-c5d6a175f2dc 

Also you can check out this webpack plugin for reference that I wrote here https://github.com/HarshwardhanSingh/webpack-bundle-size-check-plugin.
裁判のIT化
Tags: legal, 裁判
Published: 2017-12-30 01:46:24

---
title: 裁判のIT化
published: true
description: 裁判のIT化が始まるみたいです。
tags: legal, 裁判
---

裁判のIT化が始まるみたいです。

https://www.kantei.go.jp/jp/singi/keizaisaisei/saiban/index.html

どのような結果になるか、楽しみです。
裁判のIT化で注目したい10のこと
Tags: 裁判, legal, legaltech
Published: 2017-12-30 01:44:34

---
title: 裁判のIT化で注目したい10のこと
published: true
description: 
tags: 裁判, legal, legalTech
---

## **1. テレビ裁判やVR裁判などの新しい裁判**
## **2. 新しい裁判に於ける「裁判の公開」「傍聴」のあり方**
## **3. スマートコントラクトと「執行」API**
## **4. 本人訴訟の定型化とクラウドファンディング**
## **5. Virtual Data Roomやデジタルフォレンジックやデイスカバリ―制度の展開**
## **6. VALCRI的新しい捜査手法**
## **7. 裁判官の「働き方改革」と成果の計測**
## **8. 裁判資料と機械学習の行方**
## **9. ビックデータと個人情報に関する社会的合意**
## **10. 機械学習の正解データとしての司法統計と書記官の重要性**