teleren/devto huggingface dataset:
How to start learning React.js
Tags: react, node, javascript, opensource
Published: 2018-07-02 16:30:52

---
title: How to start learning React.js
published: true
description: 
tags: react.js, node.js, javascript, opensource
cover_image: https://cdn.scotch.io/scotchy-uploads/2014/10/learning-react-getting-started.png
---

Hello everyone, I am back again to dev.to after almost a month. I have been giving interviews and after almost 45 interviews I realized that Node.js and Express.js and their projects on my resume won't let me land at a job.

> So I want to start learning React

Though there are many things that come with it, and I'm unsure of the order in which I should proceed.

* React DOM,
* RxJS,
* Babel,
* Redux

and all the other things. 

Also I will keep on creating my own ideas of web apps with it, but please suggest some ***OpenSource/Github*** projects that I should be looking forward to after learning it and have a grasp on the subject.

> Also suggest on how to move towards React Native with it.

Please suggest/advice/guide some kinda pathways to learn this and be able to create commercial level web apps that really puts me in big league so that I can get a job and moreover I can solve more complex real life problems to put them on a website form to solve it

Current set of resources at my disposal
* Book - the Road to learn React
* Net Ninja's YouTube playlist
* Reactjs.org official documentation ( but I'm not sure how to start reading it, I have never read Node.js documentation that way ) 

You guys can see my current web apps live on heroku, I have posted all of them with my resume here in this [twitter thread](https://twitter.com/AflaatunTapudo/status/1009398380835901440)
Explain to me apiman like I am 5
Tags: like5
Published: 2018-07-02 15:23:31

---
title: Explain to me apiman like I am 5
published: true
description: how would you describe www.apiman.io to me? 
tags: like5
---

One of our collaborator mentionned [apiman](http://www.apiman.io) in a meeting today and I wondered if it was some kind of swagger or so. Can you explain this to me?
How to validate cloudformation templates on your computer?
Tags: aws, cloudformation
Published: 2018-07-02 14:46:19

---
title: How to validate cloudformation templates on your computer?
published: true
description: How to validate cloudformation templates on your computer?
tags: AWS, CloudFormation
---

# Intro
This document explains how to validate CloudFormation templates on your computer.

**[Test environment]**
- OS: macOS High Sierra, Version 10.13.2

I recommend you use "2. AWS TOOLS" because it checks more than awscli.

## 1. AWS CLI
1. Install AWS CLI to your computer -> [Installing the AWS Command Line Interface](https://docs.aws.amazon.com/cli/latest/userguide/installing.html)

2. Run the command on your terminal:
~~~
$ cat <yourCFNtemplate> | xargs -0 aws cloudformation validate-template --template-body
~~~

## 2. AWS TOOLS
Reference: [github aws-tools cloudformation](https://github.com/floodfx/aws-tools/tree/master/cloudformation)

[On your terminal]
~~~
$ brew install aws-cfn-tools
$ mkdir $HOME/AWS && cd $HOME/AWS
$ mkdir cloudformation && cd cloudformation
~~~

### Use S3
1. Upload your cloudformation template to S3
2. Run the command on your terminal.

~~~
$ cfn-validate-template --template-url=<S3PathToYourCFNtemplate>
~~~

### Use API User
[On your terminal]
~~~
$ cd $HOME/AWS/cloudformation
$ mkdir .config
$ vim .config/credentials
--
[.config/credentials]
AWSAccessKeyId=_WriteYourAWSAccessID_
AWSSecretKey=_WriteYourAWSSecretKey_
--
$ chmod 600 .config/credentials
$ export AWS_CREDENTIAL_FILE="$HOME/AWS/cloudformation/.config/credentials"
$ export AWS_CLOUDFORMATION_HOME="$HOME/AWS/cloudformation"
$ cfn-validate-template --template-file=<yourCFNtemplate>
~~~
Do you use syntax checking tools?
Tags: discuss, syntax, tools, cleancode
Published: 2018-07-02 13:17:20

---
title: Do you use syntax checking tools?
published: true
description: On the way to a more consistent code...
tags: discuss, syntax, tools, cleancode
---

Last week I introduced Checkstyle to our team. I had enough of correcting all the code that was written in a totally different style.
We already had Sonar, so the real smells as errors were found but the code did not look consistent at all.
So we sat down and made our own Checkstyle ruleset together. 
After that we imported this ruleset into everyone's IDE and we put the checkstyle-plugin to the project's pom, so no one would be able to successfully finish a Maven build if there are violations.

To mention a few, we included these:
- 4 spaces instead of a tab
- Javadoc
- avoid trailing spaces

I know it was a bit harsh and the first week was a pain in the neck. 
Why? We were not used to write Javadoc comments at all. Spaces were everywhere. Tabs were used.

So we decided to work on the Eclipse autoformat ruleset and when it was ready, we shared it with every team member. 
It became a lot easier but it did not solve the Javadoc problem. 

No worries, we made it, corrected every file, class and method.
Conventions are needed so the code at least looks consistent. 

Now as the secod week started, we can see that we should make some minor modifications to refine this ruleset, but I guess it is normal.

Anyway I love this idea, and I planning to introduce similar tools for CSS, too.

So do you use Checkstyle or other syntax checking tools? Or are you planning to use one?
The not so secret life of Provider in Redux
Tags: javscript, react, redux, showdev
Published: 2018-07-02 12:50:17

---
title: The not so secret life of Provider in Redux
published: true
description: Unmasking provider
tags: javscript, react, redux, showdev
---
![](https://www.valentinog.com/blog/wp-content/uploads/2017/12/redux-react-tutorial-beginner-2018.png)

I have always asked myself what the `<Provider>` does and why it is a neccessity while using redux.
How does react-redux make it possible for me to access my store objects.

My inquisitive nature led me to the react redux codebase. I expected to find a large compilcated `<Provider>` component, but to my suprise that wasn't the case.

I have ommited some code for readability sake.

```javascript
import React from "react";
import PropTypes from "prop-types";

class Provider extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.store = props.store;
  }
  getChildContext() {
    return { store: this.store };
  }
  render() {
    return this.props.children;
  }
}
Provider.childContextTypes = {
  store: PropTypes.object
};

export default Provider;
```

## What is the Provider doing

Provider makes use react's context api. Context provides a way to pass data through the component tree without having to pass props down manually at every level.

The provider makes `store` accessible to its child components via the `getChildContext` method. Therefore its children can access the `store` with `props.context.store`.

```javascript
const Child = ({props}) => {
  console.log(props.context.store)
  return <div>child</div>
}
```

Now `Child` can have access to the store without us passing it down explicitly

``` html
<Provider store={store}>
  <Child/>
</Provider>
```

Also note the `childContextTypes` that is defined on the provider class. This is needed so that react can know the shape of data we are sharing via the context.

This is how the react-redux `connect` function is able to get our store objects. Below is a simplified version of the connect.

```javascript

function connect(mapStateToProps, mapDispatchToProps) {
  return function(Component) {
    class App extends React.Component {
      constructor(props, context) {
        super(props, context);
        this.state = context.store.getState();
      }
      render() {
        return <Component {...this.state}/>
      }
    }
    App.contextTypes = {
      state: PropTypes.object
    };
    return App;
  };
}
```
Magento 2 GeoIP Extension | FME    
Tags: magento2, storeswitcher, geoip, storeselector
Published: 2018-07-02 10:04:17

---
title: Magento 2 GeoIP Extension | FME    
published: true
description: 
tags: Magento 2, store switcher, GeoIP, store selector
---
Store redirection is a very important rather essential functionality to add to an online store with multiple storefronts. It is used to get targeted traffic and hence increase conversions. For example, a user coming from Canada will most likely be interested in a store which is based in Canada. Regional stores have region specific catalog, local language and currency. This GeoIP redirect functionality also improves customer's shopping experience and builds their trust.

[Magento 2 GeoIP extension](https://www.fmeextensions.com/magento-geo-ip-default-store-magento-2.html) by FME is an easy way to implement store switching in a Magento 2 store. What this extension does is that it auto detects visitor's Geo location and redirects them to a regionally optimized store. It uses Maxmind database for Goe location which is the most accurate IP detection database. You can also import any other database.

Store switcher Magento 2 allows you to create multiple rules for Geo targeting. You can create multiple regions and assign countries and stores to each region. So when a customer visits from a specific country, they will be redirected to the storefront assigned to that region. This way, customers see targeted products means for their region.

###Important Features of Magento 2 Store Switcher

This Magento 2 GeoIP store switcher offers the following additional features.

- Manual & automatic redirection
- IP exceptions to bypass specific customers from redirection
- Up to data GeoIP database
- Store switcher popup
- Deep Geo targeting by creating multiple regions
Natural Sort Terms in WooCommerce & WordPress
Tags: wordpress, php
Published: 2018-07-02 09:56:33

---
title: Natural Sort Terms in WooCommerce & WordPress
published: true
description: Natural sort terms/attributes from products in WooCommerce, or even categories
tags: wordpress, php
cover_image: https://thepracticaldev.s3.amazonaws.com/i/bzhw2zacgyg1bxzumorx.jpg
---

If you are looking for a way to natural sort terms/attributes from products in WooCommerce, or even categories, I've come up with a way to sort everything in natural order. For example, you have attributes in your products that are a list of lets say numbers. Your list might look like this:

1. 1
2. 2
3. 205
4. 102
5. 110

What will happen, the list will be displayed as (default sorting):

1. 1
2. 2
3. 102
4. 110
5. 205

In order to sort the list with a natural order like this:

1. 1
2. 2
3. 102
4. 110
5. 205

You'll simple have to convert the results of `get_terms()` to an array and then sort it accordingly.

```php
<?php

$args = array(
  'order' => 'ASC',
  'orderby' => 'name',
  'hide_empty' => true,
);

$filter = get_terms( 'pa_filter', $args );

foreach ( $filter as $term ) {
    $sort_terms[$term->name] = $term;
}

uksort( $sort_terms, 'strnatcmp');

foreach ($sort_terms as $term) {
    //If you want to display an option list
    echo "<option value=" . $term->name . ">" . $term->name . "</option>";
}

```

Photo by <a href="https://unsplash.com/photos/0vY082Un2pk?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Edu Grande</a> on <a href="https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>
DevOps Skills in 2018
Tags: devops, skills, softwareengineering
Published: 2018-07-02 06:34:36

---
title: DevOps Skills in 2018
published: true
description: 
tags: devops, skills, software engineering
---

![DevOps Skills](https://thepracticaldev.s3.amazonaws.com/i/nrywgjy1p4rwd5bw5pww.png)
A meaningful README.md
Tags: git, github, documentation, readme
Published: 2018-07-02 04:43:16

---
title: A meaningful README.md
published: true
description: Let's discuss something nobody cares about.
tags: #git, #github, #documentation, #readme
---



After working for more than 5 years in the field of Development I started realizing the importance of **Documentation**, and hence I thought to write on documenting README.md file.

Here are some of the patterns I personally follow and made it a mandate to my team after creating a new repository or before committing codebase in existing repository, have a look at my README.md and markdown all informative notes.



## Project title

These services are part of Blah Blah Blah Project.


## Screens
Just to let you guys know, you can also add gifs in your (readme.md)markdown file.
![random](https://media.giphy.com/media/Bg4sg1CJ50wwg/giphy.gif)



## Before you commit
Before committing code please ensure,
 * README.md is updated
 * A successful build and jar is deployed on nexus
 * All newly implemented APIs are documented
 * All newly added properties are documented in additional-spring-configuration-metadata.json


## Libraries used
1. Spring Boot 1.5.1.RELEASE
2. **Custom:** Exceptions, File IO, Rest Authentication
3. Spring Boot Test
4. JSON Library(javax.json)
5. Swagger API
6. Hibernate Validation API (org.hibernate)
7. Random Numbers and String Generators(smt-random-strings and smt-random-numbers)

## Features
These services can perform,
1. Employee **CRUD** operations.


##Installing
A step by step series of examples that tell you how to get a development env running

#Deployment
Add additional notes about how to deploy this on a live system


## JIRA References
Add all JIRA Tickets with Hyperlinks


## Versions
1. 1.0-SNAPSHOT: Contains Add, View, Update, and Delete Employees


## Developers
- Pratik Ambani(Pratik.ambani@companydomain.com)

## License
A short snippet describing the license (MIT, Apache etc)

--------------

As usual, suggestions are always welcomed. Happy Coding and may the code bless you. 😇

**TIP:** Keep your README.md updated if you believe in *KARMA*. 😉
Tree traversal [Inorder]
Tags: algorithms, tree, python, learn
Published: 2018-07-02 00:49:27

---
title: Tree traversal [Inorder]
published: true
description: Tree traversal
tags: 
- algorithm
- tree
- python
- learn
---

{% youtube wt-1iXoGFdg %}

Tree is in order. Traverse down the tree to get sorted values using inorder traversal. Inorder traversal is useful to determine if a tree is a binary search tree. Code is in python. Done through recursion.
TIL: CSS grid will soon be the shortest way to center elements
Tags: css
Published: 2018-07-02 21:51:49

---
title: TIL: CSS grid will soon be the shortest way to center elements
published: true
tags: css
canonical_url: https://www.stefanjudis.com/today-i-learned/css-grid-will-soon-be-the-shortest-way-to-center-elements/
---

Today I was tweeting about a new CSS property I discovered: `place-items`. ~~It is a simple shorthand for `align-items` and `justify-content`~~ – **that's at least what I thought**. It turns out that it's shorthand for `align-items` and `justify-items` ([thanks Benjamin for pointing that out](https://twitter.com/bdc/status/1013882355197644801)).

This discovery made me sad initially because it meant that I could not get rid of one CSS declaration in my Flexbox based classes to center things.

```css
/* this class is there to stay */
.center {
  display: flex;
  align-items: center;
  justify-content: center;
}
```

After sharing my disappointment, Benjamin mentioned something that I didn't think of before. `place-items` works perfectly with `display: grid`. 

I have to admit that even when CSS `grid` is [cross-browser supported nowadays ](https://caniuse.com/#feat=css-grid), I didn't use it that much, but it turns out that you can use it to center things easily by defining it on an element with only one row and only one column (see [this CodePen](https://codepen.io/stefanjudis/pen/mKoBQM) as an example).

```css
.center-using-grid {
  display: grid;
  align-items: center;
  justify-items: center;
}

.center-using-grid-even-shorter {
  display: grid;
  place-items: center;
}
```

## Sounds too good to be true? Is there a catch?

Well... kind of. `place-items` is [not cross-browser supported yet](https://developer.mozilla.org/en-US/docs/Web/CSS/place-items#Browser_compatibility) (basically it's Chrome and Firefox today), but fortunately, [PostCSS has you covered so that you can use it today](https://twitter.com/PostCSS/status/1013859184725643264). 🎉 

You can read more about `place-items` in the detailed [MDN article about it](https://developer.mozilla.org/en-US/docs/Web/CSS/place-items).

Happy centering!
A more efficient developer: Go and have a rest
Tags: productivity, devtips
Published: 2018-07-16 07:12:17

---
title: A more efficient developer: Go and have a rest
published: true
tags: productivity,devtips
description: Coffee is good. Sleeping is great.   
canonical_url: https://danlebrero.com/2018/07/02/efficient-developer-rest-and-sleep/
series: Efficient Development
---

![go to sleep](https://danlebrero.com/images/blog/efficient-sleep-rest.jpg)

Coffee is good. Sleeping is great.

You know it, I know it, everybody knows it.
Please don't write a class
Tags: programming, discuss, oop
Published: 2018-07-01 17:12:19

---
title: Please don't write a class
published: true
description: Please don't start writing a Mammal class for a Dog object to inherit, thank you.
tags: programming, discuss, oop  
---

Please don't start by writing a class for every thinkable entity. Please don't start writing a `Mammal` class for a `Dog` object to inherit, thank you.

OOP is not a silver bullet to every programming problem. It just makes code less enjoyable to read and obscures pure algorithmic beauty.
Query your SQL database in the cqured way with ease
Tags: php7, entitymodel, lynq
Published: 2018-07-01 16:07:15

---
title: Query your SQL database in the cqured way with ease
published: true
description: Query your SQL database in the cqured way with ease. PHP 7.1+ required This Class does the CRUD with PDO for you.
tags: PHP7, EntityModel,Lynq
---
Include EntityModel.php to your PHP file and use the namespace Lynq\Entity\EntityModel;

You can also remove the namepsace from the EntityModel.php and you are good to go.
Example 
```php
<?php
use Lynq\Entity\EntityModel;

class PracticeModel
{
private $table = 'Media';

/**
* Connect to database in constructor
*/
public function __construct()
{
$dsn = 'mysql:dbname=airMediaDB;host=127.0.0.1';
$user = 'root';
$password = 'glory';
$this->mediaDB = new EntityModel($dsn, $user, $password);
}

/**
* Get ALL items via search $key
*/
public function getItems($key)
{
return $this->mediaDB->table($this->table)
->where('title', 'LIKE', '%'.$key.'%')
->orderBy('id')
->get();
}
```
https://gitlab.com/snippets/1728351
molten screencast
Tags: python, web, api, framework
Published: 2018-07-01 13:46:08

---
title: molten screencast
published: true
description: In which I demo some cool stuff.
tags: python, web, api, framework
---

Hey all,

I made a screencast today to show off some upcoming (next week!) features of [molten]. In it, I build a little API that automatically exposes a documentation interface for itself. Check it out on [YouTube](https://www.youtube.com/watch?v=PvJ5rpzTyyw) or on the [molten] website and let me know what you think!

{% youtube PvJ5rpzTyyw %}

P.S: If you want to play around with the concepts in the video, check out the [openapi example] in the molten repo.

[molten]: https://moltenframework.com
[openapi example]: https://github.com/Bogdanp/molten/tree/master/examples/openapi
Web Assembly
Tags: webassembly, javascript
Published: 2018-07-01 13:43:09

---
title: Web Assembly
published: true
description: the what, the why and the how
tags: #wasm #javascript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/qitfn7ffppln7ot3kfs3.png
---

## Web Assembly, the what, the why and the how

### The what
Web assembly also called Wasm is an efficient, low level byte code for the web, the efficient part means that it’s not only fast to deliver to the client browser but also fast to execute, it’s characterised by being a safe and a portable language meaning that you won’t have to deal with memory overflows and issues like that and the generated machine code can be executed on any platform and adapts to its architecture.   

### The why
W3C created Wasm for two major reasons, the first one as a complementary solution to JavaScript especially for applications with heavily CPU/GPU computations (think games, encryption, image or video optimisation and editing etc..), and the second one is to enable developers to write their web apps in other languages.

### The how 
Wasm is defined as a compilation target meaning that in a normal scenario you would write your program in some other languages (currently supporting C/C++ and Rust) and then compile it to a web assembly executable file. 
The generated binary file can be injected to your web application and the browser parsing the file will skip all the steps usually run when parsing JS files and go straight to generating the machine code for the platform you’re using, and this is happening because Wasm is already optimised and has static types informations. 

### Getting started
To play around with Wasm, I recommend  https://webassembly.studio/  which is an awesome web editor allowing devs to experiment with Wasm and write web assembly based projects. 
There is also https://mbebenita.github.io/WasmExplorer/ which is basically a tool used to translate C/C++ code to Wasm binary code and even see the linear assembly byte-code generated by the browser (this is basically the human readable intermediary representation for the machine code)
recompose で ref を扱う
Tags: react, recompose, javascript
Published: 2018-02-20 15:44:19

---
title: recompose で ref を扱う
published: true
description: recompose で ref を扱うには withHandlers をうまく使うのがコツ
tags: react, recompose, javascript
---

recompose を使うと見た目の component とロジックを切り離して書けるのでスッキリする、というような記事を先日書いた([Storybook Driven Development を試している](https://dev.to/jgs/storybook-driven-development---37b7))のだが、React の ref の使い方で大いにハマったので書いておく。

アプリケーションを作っていると、往々にして `componentDidUpdate` などで `ref` を参照したいということが発生する。普通に `class` で書いていると

```js
class extends React.Component {
  componentDidUpdate() {
    this.textarea // => <textarea />
  }

  render() {
    return (
      <textarea ref={textarea => (this.textarea = textarea)} />
    }
  }
}
```

という風に書くが、recompose を使っていると

```js
const enhance = lifecycle({
  componentDidUpdate() {
    // ???
  }
})

enhance(() => (<textarea ref={???} />))
```

というような形に分離する。この時、先に示したように `ref` で `this` に代入しても、`componentDidUpdate` の中では `this` は `ProxyComponent` となっていて `ref` が読み出せなくなってしまう。これを解決するためには、`withHandlers` を併用する。

```js
const enhance = compose(
  withHandlers(() => {
    let refs = {}
    return {
      onRef: props => textarea => (refs.textarea = textarea),
      onUpdate: props => refs.textarea // として参照できる!!
    }
  }),
  lifecycle({
    componentDidUpdate() {
      this.props.onUpdate()
    }
  })
)

enhance(props => (<textarea ref={props.onRef} />))
```

これで recompose でも ref を取り扱うことができた。