teleren/devto huggingface dataset:
How to Recognize an Array
Tags: javascript, beginners, tutorial, typescript
Published: 2020-02-22 20:23:52

In order to distinguish whether variable is an array or not we have couple of options.

But before we start it is good to mention that **arrays in JavaScript are special kind of objects** as you can see down bellow: 

```javascript
let testArray = [1, 2, 3];

console.log(typeof testArray); // object
```

We can check if variable is an array with this code snippet: 

```javascript
let testArray = [1, 2, 3];

console.log(Array.isArray(testArray)); // true
```

The problem with this solution is that `Array.isArray()` method is introduced in ECMAScript 5, so if you need support for older browsers you can do something like this by using `constructor` property: 

```javascript
let testArray = [1, 2, 3];

console.log(testArray.constructor === Array);  // true
console.log(testArray.constructor.name === 'Array');  // true
console.log(testArray.constructor.toString().indexOf('Array') > -1); // true
```

Also, we are allowed to use `instanceof` operator:

```javascript
let testArray = [1, 2, 3];

console.log(testArray instanceof Array); // true
```

**Note:**

Although, we can create an array by using `new Array()` we should prefer way we used in examples above for simplicity, readability and execution speed.



Thank you for reading!
Python Machine Learning Libraries
Tags: python, machinelearning, computerscience, scikitlearn
Published: 2020-02-22 19:22:23

Here I have listed 10 most useful python libraries for Data science. 
1. **Pandas**
2. **Numpy**
3. **scipy**
4. **matplotlib**
5. **seaborn**
6. **scikit learn**
7. **Tensorflow**
8. **keras**
9. **statsmodels**
10. **plotly**

The Reason I listed the libraries is I couldn't list the All libraries in an interview. I think this may help you too.
Traditional hook vs concent hook in React
Tags: react, concent
Published: 2020-02-22 19:13:24

![](https://raw.githubusercontent.com/fantasticsoul/assets/master/img/cc/dd8.png)

Star [Concent](https://github.com/concentjs/concent) if you are interested in it, I will appreciate it greatly.

Recently I updated the README file, hope you guys like it, especially I add 2 group comparative examples to show how powerful and interesting it is when you writing react app with concent.

* group 1: [traditional hook calculator](https://codesandbox.io/s/react-calculator-84f2m) **vs** [concent calculator](https://codesandbox.io/s/react-calculator-8hvqw)
show how the module configure separate logic from UI.

* group 2: [traditional hook query list](https://codesandbox.io/s/elastic-dhawan-qw7m4) **vs** [concent query list](https://codesandbox.io/s/query-react-list-00mkd)& [concent shared query list](https://codesandbox.io/s/query-react-list-shared-state-l3fhb)
show the power of `setup` feature.
`setup` will only been executed before first render, usually for defining some effects or return methods that user can get them from ctx.settings later, so there is no **temporary closure method** any more in your render function block,
and setup can pass to class and function both, that means you can switch your component definition way between class and function as you like，reuse business logic elegantly。

**how Concent works**
![](https://raw.githubusercontent.com/concentjs/concent-site/master/img/cc-core.png)
Ricardian Contracts vs. Smart Contracts [0] 🔗
Tags: blockchain, beginners, computerscience
Published: 2020-02-22 19:10:55


💎
Ricardian contracts have more features that are similar to traditional legal contracts than smart contracts. While smart contracts help to automate transactions, they are not contracts in the legal sense. However, when linked to legal prose in the form of a dual-linked (Ricardian) contract, they may be considered to share more features with legal contracts than smart contracts do. 

It is possible to implement a Ricardian contract as a smart contract but not all Ricardian contracts are smart contracts and in the same way, not all smart contracts are Ricardian. 

Smart contracts are admired for their immutability and self-executability. They make it harder for parties to falsify the terms of a contract to carry out fraud. Smart contracts also make it possible for certain terms of a contract to be automated without the need for human action. 

Unlike smart contracts, Ricardian contracts can be legally enforceable. Ricardian contracts can carry out the same functions as smart contracts but not in all cases. This brings to light several questions such as whether or not Ricardian contracts will replace smart contracts. 

In the 90s, computer scientist, Ian Grigg proposed the concept of Ricardian contracts. He named the system after Ricardo, a system for trading financial securities. 

Parties that enter into a Ricardian contract enter into it by applying their cryptographic signatures. After they enter their signatures, the contract is recorded on a blockchain and assigned a hash. The hash makes it possible for the document to present the single version of the truth. 
                                   🔗

<kbd><small><a href="https://www.schoenherr.eu/publications/publication-detail/ricardian-contracts-a-smarter-way-to-do-smart-contracts/">Ricardian contracts: A smarter way to do smart contracts?</a></small></kbd>
Next.js doesn't hydrate during CSR route change.
Tags: react, nextjs, client, router
Published: 2020-02-22 18:51:53

Did anyone else not know this about Next.js?

I had just assumed this would be a feature of a SSR + CSR Framework for React.

https://github.com/zeit/next.js/issues/8193

If you think this is a major flaw (like myself) please upvote the comment I left, we should get this fixed.
What is PHP?
Tags: php, beginners, webdev
Published: 2020-02-22 18:45:46

PHP is a server-side scripting language used by web developers to create functionality and processes that run on the server in response to a web request. PHP is a recursive acronym that stands for PHP Hypertext Preprocessor. You can use PHP to respond to a request from a webpage or in conjunction with AJAX to create real-time request and response procedures.

Imagine you have a webpage that you want to display the correct time to the user. You could write some PHP directly in the page so that when the page is loaded the correct time is displayed or you could have a REST endpoint created using PHP on the server-side to respond with the current time and then use a client-side scripting language, such as JavaScript, to run an AJAX request and update the time on the webpage. Real-time requests using AJAX are often used within social media sites when updating the subscription feed without a page reload, such as a scroll down to refresh feature on most mobile social media applications.

When writing a PHP file the extension should be '.php' and the code must be encased within PHP tags. The opening PHP tag is '<?php' and the closing tag is '?>', all of your PHP code must be contained within these tags. You can create standalone PHP files to handle requests or for processes that are done entirely on the server-side, or even to structure your server-side data model.

```php
<?php
  echo "Hello World";
?>
```

However, you can include PHP directly within an HTML page but you have to change the extension from '.html' to '.php' if the page contains PHP that you want to be executed. Also, when using a server-side scripting language such as PHP the website must be hosted on a web server, even a local webserver, as the webserver is what executes the PHP code and not the client as with client-side languages such as HTML or JavaScript. As you can see the PHP within the HTML document is still contained within PHP opening and closing tags. However, when the user requests and loads this page they won't see any of the PHP code as it will have been executed and removed from the final rendered page.

```php
<body>
  <?php
    echo "Hello World";
  ?>
</body>
```

This post was originally published on https://acroynon.com
Reading Snippets [48 => Blockcain] 🔗
Tags: blockchain, database, computerscience, beginners
Published: 2020-02-22 18:34:51


"Ethereum is not, and is not trying to be, ASIC resistant. No protocol has been able to resist ASICs no matter how many times they changed consensus algos. Experience has shown this is a fool's errand." - Victor Bunin


<kbd><small><a href="https://twitter.com/ViktorBunin/status/1231271534045601797">Victor Bunin, Twitter</a></small></kbd>
Intro to CSS
Tags: beginners, css, tutorial, webdev
Published: 2020-02-22 18:14:08

In this post, we will begin to learn the styling language for the web: CSS, which stands for Cascading Style Sheets.

This is the eighth post and video in a series on learning web development.

You may need to check out the first post to learn how to get set up to begin coding:

{% link https://dev.to/5t3ph/learn-how-to-make-a-website-set-up-your-coding-environment-2oeo %}

You may watch the following video or follow along with the expanded transcript that follows.

{% youtube CUlPI1f_pPE %}

[*Review the source code* >](https://github.com/5t3ph/howtowebdev/tree/master/ep8-intro-css)

To begin this lesson, open the [starter project](https://github.com/5t3ph/howtowebdev-starter) you began in episode 1, or [review the source files](https://github.com/5t3ph/howtowebdev/tree/master/ep6-card-html) from episode 6.

In the Terminal, type the start command `npm run start` to run the project, then go to the browser and update the url to include `/semantic-layout.html`.

Now, on this page, the `h1` is purple. The reason is that the starter package shipped with a CSS file and the one rule defined is specifying that when the browser finds and `h1` it should make the color purple.

![h1 styled to purple color](https://dev-to-uploads.s3.amazonaws.com/i/qmwz6vkxlhx9p8rtc15x.png)

Back in VSCode, let's open `semantic-layout.html`.

In the `<head>`, one of the tags present is a `link` tag with a `href` attribute, and that is pointing to our CSS file, named `style.css`. This method of including CSS is called linking to an external stylesheet. There are two other ways to include CSS, but this is the generally preferred method so we will start here.

Now let's open the `style.css` file.

The one rule present demonstrates the most basic way to style an element, which is to use the tag name. Again, in this case it's targeting the `h1`.

```css
    h1 {
      color: rebeccapurple;
    }
```

Each group within a CSS file that defines styles for HTML elements are called rules.

All CSS rules have 3 parts:

- The *selector* is the part that comes prior to the curly braces and identifies which element, or elements, should use the rule
- The *property*, which is `color` in this rule, and is a defined list based on browser support
- The *value,* which is what the property is set to, in this case `rebeccapurple`

Each *property* and *value* pairing are separated by a colon `:`, and must end with a semicolon `;` to be valid CSS for the browser to interpret and use.

Let's add two more properties to practice. After the `color` definition, we'll add definitions for `font-size` and `font-family`.

```css
    h1 {
      color: rebeccapurple;
      font-size: 40px;
      font-family: sans-serif;  
    }
```

Save, and see the change in the browser.

![h1 with font styles](https://dev-to-uploads.s3.amazonaws.com/i/ycsmf55j7ii9imyk51bh.png)

There are over 250 CSS properties available for use! Throughout the next lessons, we will continue to learn and build upon your knowledge of CSS properties to handle common styling scenarios.

> **Next up in Episode 9:** CSS Layout and the Box Model
How do you handle open source projects and private config keys?
Tags: github, opensource, discuss
Published: 2020-02-22 18:14:06

I'm planning to release on my GitHub account some projects related to the articles I'm writing. 

The problem is that for these projects I need some private key that I don't want to share on the web. What's the best strategy for you?

I was thinking to have a local config file with the real keys and put that file under gitignore. But If I do so, I'll not be able to get them if I need to work from another PC.

How have you overcome this problem?
Running Out Of Free Build Minutes On Netlify? Try This.
Tags: devops, webdev
Published: 2020-02-22 18:09:47



# Short Answer

The Netlify provide a feature called Build Hooks. It is a URL, which we can hit via `curl` to trigger deployment for the specific branch.

![Build Hooks](https://dev-to-uploads.s3.amazonaws.com/i/2gcwfjmykwjla447vbcr.jpg)

# Long Answer

## What is Netlify?

It is a great service to configure and deploy our web apps in no-time. The UI, features and their reliability everything is so slick. They are now not only the deployment solution but also expanding towards serverless functions, auth, storage, analytics and many more.

## What is build minutes?

The computation time(in minutes) on Netlify Server to build your app and generate the production files during deployment. On free plan netlify provides 300 free build minutes.

## The Problem : They may fall short?

Many times we need to have our development going on in several branches. If we have multiple developers working on the project, we generally keep pushing the code frequently. And if the changes on these branches need to reviewed, we configure them as continuous deployment. So with each push, if your branches are deployed, you may cross the 300 free minutes.

## The Solution

One of the awesome feature Netlify provides is deploy via calling a build hook. It is nothing but a URL which we should hit or run `curl` on it to trigger the deployment of the branch. And this is really helpful as except production we are generally okay not to deploy the branches on each push. These command will make our code deployment on-demand and will save the build minutes.

![Build Hooks](https://dev-to-uploads.s3.amazonaws.com/i/2gcwfjmykwjla447vbcr.jpg)


To keep them handy, we can configure it to the script section of `package.json` as below,

```
...
"scripts": {
    "start": "<start command>",
    "deploy-dev": "curl -X POST -d {} https://api.netlify.com/build_hooks/5e3d300exxxxxxxca2246926", //<--
    "test": "<test command>",
}
....
```

## Conclusion

If you think the non-master branches are unnecessarily using the build minutes and you are running out of free quota just due to that, you should use build hooks.
Understanding Ruby's block/proc parsing
Tags: ruby, parsers
Published: 2020-02-22 16:45:54

In Ruby, methods can take a single block as an argument, which can be specified explicitly in the method signature by writing:

```ruby
def some_method(&blk)
end

```

or implicitly in the method body by writing:

```ruby
def some_method
  yield if block_given?
end
```

There are a few ways of specifying the block to the method:

```ruby
def some_method(&blk)
  p blk
end

some_method(&:foo)

some_method do
  foo
end

some_method { foo }

```

These are all (roughly) equivalent, calling the `foo` method in the place of the passed `blk` parameter. How they are parsed, however, is very different:

## Passing an expression with `&`

Imagine we call this method as: `some_method(&:foo)`. The parse tree looks like this:

```ruby
[:program,
 [[:method_add_arg,
   [:fcall, [:@ident, "some_method", [1, 0]]],
   [:arg_paren,
    [:args_add_block,
     [],
     [:symbol_literal, [:symbol, [:@ident, "foo", [1, 14]]]]]]]]]
```

Specifically, the argument structure to the call is parsed as a parser node called `args_add_block`, which contains an expression list (that's the empty array in the code example above), and a single expression at the end (that's the `:symbol_literal` expression that represents the to_proc expression). The first expression list is the non proc arguments to the call.

# Passing a block

Imagine we call the method as: `some_method { foo }`. The parse tree looks like this:

```ruby
[:program,
 [[:method_add_block,
   [:method_add_arg, [:fcall, [:@ident, "some_method", [1, 0]]], []],
   [:brace_block, nil, [[:vcall, [:@ident, "foo", [1, 14]]]]]]]]
```

in particular, note that we *no longer* have an `args_add_block` parse node. This is because in this style of call, the block is not treated as part of the arguments to the call by the parser, instead, it is treated as a modifier to the method call, that changes *which call type* is being made. 

## why did you write this?

This acts as documentation for the ongoing development of [Rubyfmt](https://github.com/penelopezone/rubyfmt).
My Image/GIF glitching python library is now on pypi!
Tags: python, showdev
Published: 2020-02-22 16:26:42

After getting some requests, I finally put `glitch-this` on [pypi](https://pypi.org/project/glitch-this/)

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

Not interested in the library? Check out the commandline script [here](https://github.com/TotallyNotChase/glitch-this)!
Improve Your Decisions
Tags: business, life, productivitytools, tips
Published: 2020-04-28 01:53:08

---
title: Improve Your Decisions
published: true
date: 2020-02-22 16:08:00 UTC
tags: Business,life,productivity tools,tips
canonical_url: https://greenido.wordpress.com/2020/02/22/improve-your-decisions/
---

![](https://greenido.files.wordpress.com/2019/02/screen-shot-2019-02-17-at-9.08.17-pm.png)

I find the topic of decisions making to be a fascinating one.   
In the past few years, I wrote about it [several times](https://greenido.wordpress.com/?s=decisions) and this is [the post](https://greenido.wordpress.com/2018/08/17/make-better-decisions/) I keep returning as the ‘checklist’.   
However, it’s great to have quick and simple rules that you can use.

Three rules to improve your decisions (that I ‘borrowed’ from @naval):

- **If you can’t decide, the answer is no** – It might be a bit tricky in cases where you don’t have a Yes/No decision. However, the idea (IMHO) is that you should have a hunch on what will be the right path and if you can’t feel it, try to base the decision on the best data you can find.

- **If two equally difficult paths, choose the one more painful in the short term** (pain avoidance is creating an illusion of equality) – This is a clever one, as it’s pointing you in the direction of  
‘Easy choices → Hard life. Hard choices → Easy life’.   
I’m not sure, this rule will be valid in all cases, but even if it’s holding for 80% it’s a good one to remember.

- **Choose the path that leaves you calmer in the long term** – Smart way to validate which is the better decision for a given challenge.   

Also, it’s good to remember that   
**“It’s extremely hard to make good decisions in a poor environment.”**

So do your best to improve the environment (e.g. company, friends) before taking important decisions.

The original tweet:

> Decisions:  
>   
> • If you can’t decide, the answer is no.  
>   
> • If two equally difficult paths, choose the one more painful in the short term (pain avoidance is creating an illusion of equality).  
>   
> • Choose the path that leaves you more equanimous in the long term.
> 
> — Naval (@naval) [July 13, 2018](https://twitter.com/naval/status/1017619107196297216?ref_src=twsrc%5Etfw)

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Have a great weekend.
Pythonic way to aggregate or group elements in a list using dict.get and dict.setdefault
Tags: python, django, machinelearning
Published: 2020-02-22 15:47:42

## Using dict.get
How often have you aggregated an item by its group like this:
```python
ar= [1,1,3,1,2,1,3,3,3,3]
pairs = {}
for i in ar:
    if i not in pairs:
         pairs[i] = 0
    pairs[i] = pairs[i] + 1
    
         
print(pairs)
{1: 4, 3: 5, 2: 1}
```
The above code shows how to get the frequency of elements in a list.
While this code is good, the time complexity of in(membership operator) is O(n) worse case.
We can make this code better and **more pythonic** by using python's dict.get(k,d) method.

Using the same list, we have:
```python 
pairs = {}
for i in ar:
    pairs[i] = pairs.get(i, 0) + 1
print(pairs)
{1: 4, 3: 5, 2: 1}
```
*the trick here is that dict.get(k,d) returns None by default or the specified default value if a key doesn't exist.*

## Using dict.setdefault
Similarly when grouping things together we usually do this:
```python
items_by_type = {}
for item in items:
    if item.type not in items_by_type:
        items_by_type[item.type] = list()
    items_by_type[item.type].append(item)
```
Let's make it better and **more pythonic**:
```python
items_by_type = {}
for item in items:
    items_by_type.setdefault(item.type, list()).append(item)
```
*The trick here is that setdefault(k,d) only sets the item if it does not
exist. If it does exist then it simply returns the item.*

# Final Thoughts
You can use the Counter class from the collection module to get the frequency of elements in a list.
Just do this:
```python
from collections import Counter
#using our above example:
print(Counter(ar))
```
Happy coding! ✌

Please drop your comments :)
Games to teach programming to a 9-year-old?
Tags: discuss, watercooler
Published: 2020-02-22 15:29:54

---
title: Games to teach programming to a 9-year-old?
published: true
description: My nephew is turning 9... any ideas for games to teach him programming?
tags: discuss, watercooler
---

Hey folks!

My nephew's birthday is almost here and I'm trying to come up with a good gift for him.

He's going to be 9 years old and I think he might dig learning about programming — he's into video games and is competing in a chess tournament today. 

I was just about start looking up some options for gifts to teach kids the basics of programming, but I thought it might be more helpful to ask y'all.

Any ideas for games to teach programming to a 9-year-old?
neumorphism
Tags: codepen
Published: 2020-02-22 15:18:18

---
title: neumorphism
published: true
tags: codepen
---

<p>Inspired by: <a href="https://neumorphism.io/#fdf1ff" target="_blank">https://neumorphism.io/#fdf1ff</a></p>

{% codepen https://codepen.io/netsi1964/pen/NWqbMaJ %}
Creating a Simple Multi Click Button in Javascript
Tags: javascript, webdev, tutorial, beginners
Published: 2020-02-22 14:52:17

# What we are making
##### Note: Hey! This is my first post on dev.to :) I would appreciate a follow if you like the post and want more!

Recently I was thinking about how common the action of tapping something a certain number of times on mobile apps triggers an action (ex. double click), but I have never seen that method being used on the web.

So I thought it would be interesting to implement a multi click button for fun in javascript.


# Demo
{% glitch multi-click app %}

https://glitch.com/edit/#!/multi-click?path=public/client.js:1:0


# The process
Essentially instead of having an action trigger immediately, you wait a small amount of time, and if the button is pressed again before the timer runs out the, you count another click and restart the timer.

# The JavaScript
```
// total number of clicks in a sequence of button presses
var clicks = 0;

// speed in ms of how long the space between clicks can be
// the lower the number, the more responsive clicks will feel
var wait = 300;

const trigger = document.getElementById("trigger");
const response = document.getElementById("response");

var timer = null;

trigger.onclick = function() {
  response.innerHTML = "waiting...";
  clicks++;

  clearTimeout(timer);

  timer = setTimeout(function() {
    response.innerHTML = "Clicks: " + clicks;
    clicks = 0;
  }, wait);
};

```

# Conclusion
The real challenge of developing a multi click button is finding the perfect timeout between clicks. If the delay is too long, the button will feel unresponsive. If the delay is too short, then it may be too fast for the user and cause them to trigger the wrong action.

The default response time on windows is 500ms, but I found 300ms was more than enough time between clicks.

I hope you enjoyed my first tutorial! I would appreciate a follow if you like the post and want more.