teleren/devto huggingface dataset:
Create a React App with No Config Using Parcel js
Tags: react, javascript, webpack, beginners
Published: 2018-05-30 11:37:20

---
title: Create a React App with No Config Using Parcel js
published: true
description: React App with No Config Using Parcel js
tags: react,javascript,webpack,beginners
cover_image: https://cdn.pixabay.com/photo/2018/05/17/02/52/moving-boxes-3407663_960_720.png
---


Are you new to the Reactjs or You still confused about using web pack configurations?

For new people to the react webpack code looks like something hard to understand so that today I'm showing how to use the [Parceljs](https://parceljs.org/api.html) to build a react app.

**Parceljs is also a module bundler similar to webpack By using Parceljs
You can build a react app from scratch with zero configuration.**


As we all know first we need to install some packages

```
mkdir react-parcel
cd react-parcel 
```

```
npm init -y
npm i --save-dev parcel-bundler
npm i --save react react-dom
```

Next, we need to install some babel packages.

{% gist https://gist.github.com/saigowthamr/90791929bf068d9561e96f9ae914d647 %}


Just copy these code and paste into your package.json file and run 
npm install to install the dependencies.


## Create a .babelrc file

Copy and paste the code into your .babelrc file
{% gist https://gist.github.com/saigowthamr/903006ab8d790a71b0e471718b955b74 %}


That's it we are done with the setup.

**Folder structure.**

![](https://thepracticaldev.s3.amazonaws.com/i/2vtzlrx60rueis7pvy30.png)


 create an index.html file in root directory like below.

{% gist https://gist.github.com/saigowthamr/c1e5925a0ebb0503b7a3ed8ba3f21bc0 %}

That's it now you can write a react code in the index.js file. 
**Parcel does bundling behind the scenes.**

{% gist https://gist.github.com/saigowthamr/5db9ac37fdfa3b8ed8f454e9f46dad10 %}


Now in your terminal run **npm start** we already defined in our package.json
file.

### Parcel creates the dev server with hot module replacement

![](https://thepracticaldev.s3.amazonaws.com/i/3rtaqlzpl6pr7jriacyn.gif)

If you want to bundle your code for production. Parceljs also does the code minification with zero configuration.

Just run **npm run build** ->Parcel generates the production-ready code.

![](https://thepracticaldev.s3.amazonaws.com/i/4accwjdtduzhj95sajwq.png)

## [Code repository](https://github.com/saigowthamr/Create-a-React-App-using-Parcel)
Composer, Travis and Bash Source
Tags: development, linux, php
Published: 2019-04-07 13:49:48

---
title: Composer, Travis and Bash Source
published: true
tags: Development,Linux,PHP
canonical_url: https://kaspars.net/blog/composer-travis-bash-source
---

Today I learned that Composer [uses](https://github.com/composer/composer/blob/ea78712822e2efecf177cdd01f5c001587b47e8e/src/Composer/Util/ProcessExecutor.php#L65-L68) the [Symphony Process component](https://github.com/symfony/process) for executing the shell commands defined as [Composer scripts](https://getcomposer.org/doc/articles/scripts.md). This [internally calls](https://github.com/symfony/process/blob/4f10286a128df6b60b3706752e11f6227fcac844/Process.php#L304) `proc_open()` [which](https://www.daemon-systems.org/man/popen.3.html) “opens a process by creating a bidirectional pipe, forking, and invoking the shell”.

I had this script failing on [a Travis build with Ubuntu 14.04.5 LTS and PHP 5.6](https://travis-ci.org/xwp/wp-dev-lib/builds/385632956#L1013):

```json
{ 
  "scripts": {
    "test": "source scripts/test.sh"
  }
}
```

with the following error:

```
sh: 1: source: not found
```

Turns out that `/bin/sh` on [Ubuntu Trusty is a symlink](https://travis-ci.org/xwp/wp-dev-lib/jobs/385635734#L1011) to `/bin/dash`:

```
$ ls -lah /bin/sh lrwxrwxrwx 1 root root 4 Feb 19 2014 /bin/sh -\> dash
```

And the `source` command is [a bash built-in](https://ss64.com/bash/source.html) which simply isn’t available in dash. The solution is to replace all instances of `source something.sh` with `. something.sh` (note the space between the dot and the script filename).
Where does your organization fit in this DevOps maturity model?
Tags: devops, ci, cd, discuss
Published: 2018-05-30 09:02:34

---
title: Where does your organization fit in this DevOps maturity model?
published: true
description: DevOps is a culture and culture is not something you can enforce and change things within a day or two.
tags: devops, ci, cd, discuss 
---
DevOps is a culture and culture is not something you can enforce and change things within a day or two. There will be oppositions, There will be delays, There will be small friction between the teams, My whole point is, it takes time.

However, all these above-said things will happen only if you have the bad management, poor coordination or when the management cannot convey the benefits of adopting the DevOps culture and maybe also because of the lack of abilities to foresee the success. 

Along with management, the teams should also join their hands to embrace this change. It will be confusing initially but it is worth at the end. You will have set goals, principles, and people working accordingly.

Ok, so I have a DevOps maturity model, please take a look and let us know where your organization fits in this stage.

![devops maturity model](https://thepracticaldev.s3.amazonaws.com/i/hfg3xmn5t2n6n10edl81.png)


This will be fun :)
Magento 2 GeoIP Store Switcher
Tags: magento2geoip, magento2switchstore
Published: 2018-05-30 07:21:01

---
title: Magento 2 GeoIP Store Switcher
published: true
description: 
tags: Magento 2 GeoIP, Magento 2 switch store
---

Redirection is a must 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. 

[Store switcher Magento 2] (https://marketplace.magento.com/fme-geoipdefaultstore.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. 

This Magento 2 GeoIP extension allows you to create 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. 


### Key Features - 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
- Store switcher popup
- Deep Geo targeting by creating multiple regions
How can we stop age discrimination in tech? 
Tags: discuss
Published: 2018-05-30 05:15:59

---
title: How can we stop age discrimination in tech? 
published: true
description: Workers accuse Intel of age discrimination 
tags: discuss
cover_image: https://thepracticaldev.s3.amazonaws.com/i/e59m7xyknqum0q7geygc.jpg
---

Two weeks ago, I wrote an [article](https://dev.to/anthonydelgado/too-old-to-learn-to-code-ank) here on dev.to called "You're never too old to learn to code" that talked about how I felt there is a bias in tech/startup culture that leans towards a younger crowd. Then just today I was scrolling through my news feed and noticed that [Engadget](https://www.engadget.com/2018/05/29/intel-faces-age-discrimination-allegations/) published an article about how workers claimed Intel was getting rid of older staff systematically during layoffs meant to "fuel Intel's evolution." 


## #1 How can we stop age discrimination in tech? 
 
## #2 Do large corporations like Intel have the right to do massive layoffs to older employees in the name of innovation? 


Let me know your thoughts in the comment section below.
業務とシステムと運用とビジネス
Tags: devops, service, teaming, business
Published: 2018-05-30 03:39:03

---
title: 業務とシステムと運用とビジネス
published: true
description: 
tags: DevOps, Service, Teaming, Business
---

開発におけるチーミング（Teaming）とか、業務（Service）ありきのシステムとか、ビジネスとしての継続性とかぼんやり考える時間が最近多い。

過去にこんな記事も書いてたけど。
[プロダクトマネジメントトライアングル](https://dev.to/11n/-a46)

ストーリー作りやコンセプトメイキングに注力してもそこから適切に業務に落とし込んだり、運用や開発のコストをペイできる売上を立てることの方が大変だったりするのだけど、キャラクタービジネスとか、コンテンツビジネスはその上流を経て生まれたわりには、キャラクターやコンテンツが独り歩きして売上を立てたりしているよなーと思ったり。

システム（Dev）は最小限にして、運用（Ops）のコストよりも体制やルール作りに重点を置いたほうが健全なシステム開発が進められる気がする。

結局はどういう業務に落とし込むかによって、集める人材も変わってくるので、一概にこうですっていうエコシステムは描きづらいよなぁ。
React-Redux headstart for busy people
Tags: react, redux, boilerplate, javascript
Published: 2018-05-30 01:51:49

---
title: React-Redux headstart for busy people
published: true
description: Making another try to build my own tools
tags: react, redux, boilerplate, javascript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/vs16qrq4k4ecqjc959qm.jpg
---

Hi reader! This is the sequel to my previous post: 
{% link https://dev.to/guidovizoso/react-headstart-for-busy-people-5aid %}

## Motivation
It started as a way to simplify my development process but I figured out it's time to publish and document what I do so... Here we are!

## Content
This boilerplate has what I consider the minimun structure for any react-redux application: Wepack, Babel, React, Redux, Styled Components and ESlint.
Github repo: [https://github.com/guidovizoso/react-redux-boilerplate](https://github.com/guidovizoso/react-redux-boilerplate)

## How to use it

Installing:

    git clone https://github.com/guidovizoso/react-redux-boilerplate.git
    npm install

Commands:

    npm run dev /* Runs webpack dev server and live reloading */
    npm run start /* Runs webpack in production mode with optimizations */

Done!

![Webpack dev server running](https://thepracticaldev.s3.amazonaws.com/i/jhvhqsg273598aivpxrc.png)

## Folder structure

```
├── src
│   ├── index.js // Renders everything
│   ├── App.jsx // Main component
│   ├── store.js // Redux store generator
│   ├── components // Pretty much explains itself
│   ├── actions // Dispatch executers
│   ├── reducers // Redux Reducers
│   └── assets // Images and stuff goes here
├── dist // Compiled files goes here
├── package.json
├── .babelrc
├── .eslintrc
├── webpack.common.js
├── webpack.dev.js
├── webpack.prod.js
└── .gitignore
```

## Issues

If you're using this boilerplate and encounter any issue, please let me know!
[https://github.com/guidovizoso/react-redux-boilerplate/isues](https://github.com/guidovizoso/react-redux-boilerplate/isues)

## Future posts

React & Redux have a steep learning curve, that's for sure. If you want a tutorial about that just comment it out. Have a great day!
Similarity between Entity-Component System and Redux
Tags: unity3d, redux, react, programming
Published: 2018-05-29 17:20:50

---
title: Similarity between Entity-Component System and Redux 
published: true
description: 
tags: unity, redux, react, programming
---

I am a front end engineer who develops mobile applications and Web applications.

My interest is how the data is mapped to the UI. In React, UI component is the function that maps data to the VDOM. What is difficult is how to manage data.

We using Redux and managing the whole data as Single State Tree and Single Source of Truth. SST is strongly centralized and anti separation of concerns. However, we will be able to take control of things instead.


![React](https://thepracticaldev.s3.amazonaws.com/i/wl4cy69ywiovz2wvjv5d.png)

We can say the application is the thing that has functions that map state into the view and functions that maps previous state to next state.

I recently learned about Unity's Entity-Component System (ECS). ECS is constructed from Entity, Component and System with Group. Entity is similar to a GameObject, but it does not have a function, it only has data. Component is just data. System is the feature that collects entities and do something with its components. Group is interesting, it shows the entity with the specified component, and it is similar to the idea of duck typing. For example in A-Frame, [Box Entity = Position + Geometry + Material](https://aframe.io/docs/0.8.0/introduction/entity-component-system.html#examples).

![ECS](https://thepracticaldev.s3.amazonaws.com/i/x3c00lcfgentz0hqzq0g.png)

I initialy thout ECS was like a GameComponent alternative or something. A few days later, I noticed that ECS is similar to Redux!

![ECS2](https://thepracticaldev.s3.amazonaws.com/i/clkkjnkh6koplgqzppog.png)

So Entity and Component is State. System is Reducer and side effects. Group is the selector. Scene Graph is now SST!

This is wonderful. It is interesting that solutions originating from two completely different domains are moving towards similar solutions. One creates Redux from the complexity of the data, while one created ECS from the complexity of the scene. I'm looking forward to how Redux's ideas are made use of Unity and how ECS ideas can be utilized on the Web. Especially, it seems interesting to use Group 's way of thinking.
Aspose.PDF Cloud: Converting documents using C# SDK
Tags: csharp, rest, tutorial, beginners
Published: 2018-05-29 22:52:04

---
title: Aspose.PDF Cloud: Converting documents using C# SDK
published: true
description: If you have multiple files you want to convert to PDF, you can create an application with Aspose.PDF for Cloud API.
tags: csharp, REST, tutorial, beginners
---

In [the previous post](https://dev.to/andruhovski/three-simple-steps-to-start-using-asposecloud-storage-3mmc), we taught upload files to Aspose.Cloud. Now we will consider basic steps to convert documents with Aspose.Cloud API v1.0. 
For the first example, we will use converting HTML to PDF. Let assume for easy that source files will be located in `"Html-Demo"` folder on the default storage and we will store resultant files on `"Pdf-Demo"` folder.

As in the previous post, we create a console application, but now we will add two packages:

* to manage storage (`Install-Package Aspose.Storage-Cloud`)
* to manipulate documents (`Install-Package Aspose.PDF-Cloud`)

UPD: This post is valid for **Aspose.PDF-Cloud v.18.8** 


The next step is to declare the necessary fields and constants in our class. 

{% gist https://gist.github.com/andruhovski/8afc6dd20b7df921a3226c455a5010ee %}

So, we are ready to convert our files from HTML to PDF. To get a list of files we call a `GetListFiles` method and filter the results.

{% gist https://gist.github.com/andruhovski/46a824e90fb35f51e299e243de30a456 %}

All that's left to do is call a conversion API method `PutCreateDocument` with appropriate parameters. It should be noted that this method has parameters for several cases of converting, but we set values required only for this one:

* *name* - destination filename (only name, not a path);
* *templateFile* - the source file path;
* *templateType* - the content type of source file, can be *xml, html, bmp, jpg, png, tiff, emf, cgm, tex*;
* *folder* - destination folder;
* *storage* - storage name.

In this case, we deal with an `ApiException`. This class is similar to the generic exception, but it has an additional field `ErrorContent`. This field usually holds JSON-string with the error message. 

The following snippet holds the full code of our function:

{% gist https://gist.github.com/andruhovski/1df593878e7ca0faca2b1be894c18da2 %}

As you can see above, we can convert to PDF from different file types. Let's try to change HTML to JPEG:

{% gist https://gist.github.com/andruhovski/f8be6a4af89f542088213c97231ae511 %}

In this case, we get the PDF document too, but with raster image per file.
To combine a series of images into one PDF we need to call `PutCreateDocumentFromImages` method. The following snippet shows how we can combine JPEG files into one PDF. To reduce the explanation, named arguments were used.

{% gist https://gist.github.com/andruhovski/41964bf538ae37fca7cdd58f3a3e85ae %}

So, in this post, we were considered how to create PDF from different formats. In the next article, we will consider the reverse process - converting from PDF to another file formats.
Where do you seek freelance/short-term contract work?
Tags: discuss, webdev
Published: 2018-05-29 22:35:10

---
title: Where do you seek freelance/short-term contract work?
published: true
tags: discuss, webdev
---

Back in the day, I used to go on various freelancing websites, solicit local businesses for work, and just plain hit up CraigsList. I was wondering what everyone else has been doing :)
Iterating over Plone Dexterity fields
Tags: plone
Published: 2020-12-03 19:36:09

---
title: Iterating over Plone Dexterity fields
published: true
date: 2018-05-29 22:00:00 UTC
tags: plone
canonical_url: http://mrtango.planetcrazy.de/iterating-over-plone-dexterity-fields.html
---

To get all related schemas for your object, you can use the <tt>iterSchemata</tt> function provided by plone.dexterity.utils. From the list of schematas you can get the fields by using the getFields function provided by zope.schema.

```
from plone.dexterity.utils import iterSchemata
from zope.schema import getFields

fields = {}
schemes = iterSchemata(context)
for schema in schemes:
    fields.update(getFields(schema))

for name, field in fields.items():
    print("Field: {0}, value: {1}".format(name, field))

```
I'm Stephen, soldier to web developer. I love sharing knowledge. Moved to Scandinavia without knowing the languages; AMA!
Tags: ama, language, bootcamp, foreign
Published: 2018-05-29 18:24:46

---
title: I'm Stephen, soldier to web developer. I love sharing knowledge. Moved to Scandinavia without knowing the languages; AMA!
published: true
description: Ask me anything.
tags: ama, language, bootcamp, foreign
---
DigitalOcean Currents Survey (with prizes!)
Tags: survey
Published: 2018-05-29 17:15:30

---
title: DigitalOcean Currents Survey (with prizes!)
published: true
description: Take our survey to help provide insights into the way developers work.
tags: survey
cover_image: https://cl.ly/0d2I3l0b2S1n/Image%202018-05-29%20at%2010.12.25%20AM.png 
---

Each quarter, **DigitalOcean** puts out our "Currents" survey which provides insights into how developers work and how they're affected by industry trends.

You've got until _tomorrow_, **Wednesday May 30**, to participate in this quarter's survey.  The first 5k respondents will receive a special 3D foldable Sammy the Shark!

## [Survey Link](http://do.co/currents-survey)

Read our past reports [here](https://www.digitalocean.com/currents/)!
What is your website?
Tags: discuss, webdev, design
Published: 2018-05-29 17:03:48

---
title: What is your website?
published: true
description: 
tags: discussion,webdev,design
---

Hello! I would like to open a discussion about our website.
I got the idea after the post of [dfimbres](https://dev.to/dfimbres/ive-completed-my-personal-website-now-what-23ne).

* what technology have we use to do it?
* what challenge have we come across while doing it?
* stuff around it (building, testing and deploy)?

This could lead to some advice that one could give to another about it.

As I suggested the discussion, I will start.

My website is available [here](https://www.mathieu-nivoliez.com). I currently use gutenberg to build it, but I have used cobalt before.

I keep the code on my [self hosted gitlab](https://gitlab.deep-nope.me/mnivoliez/deep-blog) and I deploy it on another server through a gitlab-ci runner.

I have mostly struggle with the design (responsive, css, etc...) as I am not really good at it.

What do you think of it?
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2018-05-29 16:57:04

---
title: The 7 Most Popular DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---


#1. 💯💯💯💯

Karina shares the benefits of sticking to the 100 days of code challenge -- from become a better vision of yourself to connecting with like-minded people. 

{% link https://dev.to/karinaislam/5-reasons-to-start-the-100daysofcode-challenge-300 %}

#2. Dope new thing

A prettier version of the TensorFlow demo -- with lots of code comments explaining what's happening. 

{% link https://dev.to/notwaldorf/hello-tensorflow-2lc5 %}

#3. Carving out a new path

A story about how one soldier's passion and interest in programming led them to a better career path. 

{% link https://dev.to/acoh3n/that-time-when-programming-saved-my-life-4454 %}

#4. Advice on staying employable

You don't need to code 24/7 but you must continue paying attention to how web development evolves or you risk becoming stagnant. This article and video dives into an example of how easy it is to stop paying attention.

{% link https://dev.to/spirodonfl/the-slow-and-painful-death-of-a-developer-gp1 %}

#5. Leave your comfort zone

It's easy to get stuck watching tutorials upon tutorials and never diving into an actual project. This post shares why it's so important to step out of your comfort zone and start hacking!

{% link https://dev.to/tonymastrorio/escaping-tutorial-purgatory-as-a-new-developer-1kf3 %}

#6. Is Regex finally powerful in JS?

New regex capabilities in JavaScript: Dotfall Flag, Named Capture Groups, Unicode Escapes, and Lookbehinds!

{% link https://dev.to/andrewusher17/regular-expression-additions-in-es-2018-1ab %}

#7. Every step counts

A tutorial on creating an automatic HTML reporting tool in Python. 

{% link https://dev.to/goyder/automatic-reporting-in-python---part-1-from-planning-to-hello-world-32n1 %}

_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Monday!_