teleren/devto huggingface dataset:
Minimal setup for React app with Webpack as bundler
Tags: react, webdev, webpack, javascript
Published: 2020-09-16 19:43:04

Hello There!

This is a post where I share the minimum set up for React application in development stage as it renders the application in the browser (client side), which in production I don't recommend doing this. It uses webpack for bundle the JS code and Babel for traspile it. 

The files content is above, for make it simple I won't go in detail for every file.

Find the repo:
[Github Repository](https://github.com/georgexx009/base_react_app)

## Summary

When we run the script `npm run dev` , which uses `webpack-dev-server --mode development` to start the process for server our application. Webpack will take the entry file to bundle it.

Webpack will use the `index.js` from `entry` property. If it is not declared, don't worry, it is the default value. Also, webpack uses a babel-loader for traspile the JS code. Babel requires a .babelrc file that stablish the presets, in this case `"@babel/preset-env", "@babel/preset-react"` , env is for general JS and preset-react for React code. Then, Webpack uses HtmlWebpackPlugin for attached the bundled JS content, so it could be render in the browser.

Create any React application code, that renders with React DOM.

Obviously I add .gitignore to remember everyone to not add node_modules directory to the repository.

```jsx
// webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

const htmlPlugin = new HtmlWebpackPlugin({
  template: './src/index.html',
  filename: './index.html',
});

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  plugins: [htmlPlugin],
};
```

```json
// scripts and dependencies need it

"scripts": {
  "dev": "webpack-dev-server --mode development"
},
"dependencies": {
  "react": "^16.13.1",
  "react-dom": "^16.13.1"
},
"devDependencies": {
  "@babel/core": "^7.11.6",
  "@babel/preset-env": "^7.11.5",
  "@babel/preset-react": "^7.10.4",
  "babel-loader": "^8.1.0",
  "html-webpack-plugin": "^4.4.1",
  "webpack": "^4.44.1",
  "webpack-cli": "^3.3.12",
  "webpack-dev-server": "^3.11.0"
}
```

```json
// .babelrc
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
```

```html
index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>src</title>
  </head>
  <body>
    <section id="root"></section>
  </body>
</html>
```

```jsx
// index.js

import React from 'react';
import ReactDom from 'react-dom';

ReactDom.render(<h1>React app</h1>, document.getElementById('root'));
```

```
.gitignore

/node_modules
/dist
```
Buidler Tasks & Plugins
Tags: blockchain
Published: 2020-09-16 20:09:54

Ever since I migrated from _Truffle_ to _Buidler_, I have found buidler plugins & tasks to be very useful in my workflow.

If you don't know Buidler, check out their site at https://buidler.dev/

Buidler is a __task runner for ethereum smart contract developers__. It allows you to create tasks that aid in the workflow and productivity during development.

---

__Buidler Task__
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wrnwfg2rff3z258w6vwg.png)

_Console_
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6572eq3quyb38d7gjj6q.png)

_Output_
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f5egck037eyfj18wn3ji.png)

---

__Contract Sizer & Spdx License Identifier Plugins__

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2sa20gkzvxhvejrm8spr.png)

These plugins will go in your `buidler.config.js` file. 

The `spdx-license-identifier` plugin will prepend the license field from your `package.json` file in every contract that doesn't have one defined. 

The `contract-sizer` plugin outputs the sizes of your contracts to the console.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7wbi1yu8ye7e9oba8f9p.png)
 
Their website contains detailed documentation and also includes a tutorial if you want to learn more.

__Tutorial__: https://buidler.dev/tutorial/
__Documentation__: https://buidler.dev/getting-started/
__Plugins__: https://buidler.dev/plugins/
Day 62: Stuck at displaying days of the week.
Tags: 100daysofcode
Published: 2020-09-16 20:04:31

I'm stuck at trying to display all the days of the week. I've managed to display next day though :
```javascript
const displayDate = document.querySelector('#date');
let date = today.getDate()
displayDate.textContent = `${date}th`

const tommorow = new Date(date)
const nextday = document.querySelector('#nextDay');
nextday.textContent = tommorow.toLocaleString('default', { weekday: 'long' })
```
I tried to follow the same format for the preceding days but it doesn't seem to be working as expected. 

I tried to cook up the following. 
```javascript
let days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
let day = today.getDay()
const nextday2 = document.querySelector('#nextDay2');
nextday2.textContent = days[day+2]
```
I have to admit my cooking skills are not so bad. I was thinking I'd get the current day as an integer and loop through the array printing out the preceding days.  But again I would have to reset the loop to execute an infinite number of times. 

I have to admit this seemed so easy at first. 


_Day 62_
Best Practices
Tags: angular, typescript
Published: 2020-09-16 19:15:02

-Google turns up [658 million best practice results](https://www.google.com/search?q=best+practices)

-Angular has [29.5 million](https://www.google.com/search?q=best+typescript+practices&rlz=1C1GCEB_enUS915US915&oq=best+typescript+prac&aqs=chrome.0.0j69i57j0l6.4968j0j7&sourceid=chrome&ie=UTF-8)

-Typescript has [2.74 million](https://www.google.com/search?q=best+typescript+practices&rlz=1C1GCEB_enUS915US915&oq=best+typescript+prac&aqs=chrome.0.0j69i57j0l6.4968j0j7&sourceid=chrome&ie=UTF-8)

-Angular/Typescript together [A measly 858,000](https://www.google.com/search?rlz=1C1GCEB_enUS915US915&sxsrf=ALeKk030_yduNdVqI7fe6Rrs0NJLShFLgg%3A1600282966140&ei=VmFiX5eFCM3OtQbZqJqAAw&q=angular+typescript+best+practices&oq=angular+typescript&gs_lcp=CgZwc3ktYWIQAxgAMgQIABBDMgIIADICCAAyAggAMgIIADICCAAyAggAMgIIADICCAAyAggAOgQIABBHOgQIIxAnOgUIABCRAjoICAAQsQMQgwE6BwgAELEDEEM6CAgAELEDEJECOgUIABCxAzoHCAAQFBCHAlDt2gpY_-8KYOT5CmgAcAJ4AIABgQGIAZ4OkgEEMTAuOJgBAKABAaoBB2d3cy13aXrIAQjAAQE&sclient=psy-ab)

-Dev.to has [11.3 million](https://www.google.com/search?q=site%3A%2F%2F+dev.to+%22Best+Practice%22&rlz=1C1GCEB_enUS915US915&oq=site%3A%2F%2F&aqs=chrome.0.69i59j69i57j69i58j69i65l3.12399j0j4&sourceid=chrome&ie=UTF-8)

I guess I'll have to skip this "Best Practice" thing because it would take forever to get there.

Imagine finding just the top 10 best practices for our concern in 2 minutes?  Perhaps that's a web site idea? 

JWP2020
Amazon Coding Interview: Robot Return to Origin (LeetCode)
Tags: beginners, python, codenewbie, computerscience
Published: 2020-09-16 20:00:33

## Why should you practice coding problems?

Want a job at companies like Google, Facebook, Amazon, and more? Software engineering interviews mainly consist of data structures and algorithm problems. 

You need to do a lot of these problems in order to succeed in these interviews. Below I’ll be going through an approach to a popular problem: [Robot Return to Origin](https://leetcode.com/problems/robot-return-to-origin/).

Please consider subscribing on YouTube by clicking [here](https://link.mattupham.com/youtube/channel/mattupham) if you find this information useful!

## Problem Statement & Approaach

The problem statement is: 
“There is a robot starting at position (0, 0), the origin, on a 2D plane. Given a sequence of its moves, judge if this robot ends up at (0, 0) after it completes its moves.

The move sequence is represented by a string, and the character moves[i] represents its ith move. Valid moves are R (right), L (left), U (up), and D (down). If the robot returns to the origin after it finishes all of its moves, return true. Otherwise, return false.”

This basically says a robot will be given a list of moves, and we need to determine if the robot ends at the same point where it started.

If you want a better sense visually of how this is done, check out my in-depth explanation on YouTube below. 

{% youtube sIhnayeCwoE %}
[LeetCode: Robot Return to Origin (Overview and Solution)](https://link.mattupham.com/youtube/robot_return_to_origin)

This problem might seem confusing at first, but take note that direction does not matter. We'll be dealing with an X and Y axis. A straightforward approach is to see if X and Y both equal 0 at the end (origin 0,0), since this is where the robot starts.

For Up (+1) and Down (-1), we can add these to a Y variable. For Left (-1) and Right (+1), we can add these to an X variable. Then we can loop through our string of moves, add the resulting move values to our X / Y variables, and compare our outcome to X == 0 and y == 0.

## Conclusion

If you found this video useful, please consider subscribing to my [YouTube Channel](https://link.mattupham.com/youtube/channel/mattupham)! I talk about software & technology, overviews of coding problems, and landing jobs in tech!

Also, make sure to check out our [Discord](https://link.mattupham.com/discord) community! 4700+ members, mentorship, discussion, and resources for learning to code!

On TikTok, I mainly do quick coding, tech and productivity tips. Check them out here: [TikTok](https://link.mattupham.com/tiktok)

Here are the social platforms where we can connect:
[YouTube](https://link.mattupham.com/youtube/channel/mattupham)
[Discord](https://link.mattupham.com/discord)
[TikTok](https://link.mattupham.com/tiktok)
[Twitter](https://link.mattupham.com/twitter)
[LinkedIn](https://link.mattupham.com/linkedin/mattupham)

Thanks for reading, and feel free to DM any questions!
Ing. Walter Mira
Tags: angular, react, html, php
Published: 2020-09-16 19:56:29

### Mi perfil en [Linkedin] (https://www.linkedin.com/in/walter-mira-974108101/)

#Introducción
Gerente de Sistemas con 10 años de experiencia en el mercado retail. Competente en la planificación, administración, ejecución de proyectos y armado de equipos, acostumbrado a trabajar en grupo, cumplir con tareas urgentes. 

{% gist https://gist.github.com/wmira2020/b4ec7b4803304031a9a140362d279ee6 %}

###Formación Académica
<ul>
  <li>Ingenieria en Sistemas</li>
  <li>Certificación Internacional Scrum Master</li>
  <li>Análista en Sitemas</li>
</ul>

###Temas de Interés
<ul>
  <li>Scrum Master</li>
  <li>DevOps</li>
  <li>Business Intelligent</li>
</ul>

###¿Qué es la metodología Scrum?
{%youtube a33xOe9d_Dk %}

###DevOps en menos de 3 minutos
{%youtube p-bOnV8FRMQ %}

## Scrum VS Tradicional
<table>
  <tbody>
    <tr>
      <td>Parametros</td>
      <td>Scrum</td>
      <td>Tracicional</td>
    </tr>
    <tr>
      <td>Énfasis en</td>
      <td>Personas</td>
      <td>Procesos</td>
    </tr>
    <tr>
      <td>Documentacíon</td>
      <td>Minima</td>
      <td>Completa</td>
    </tr>
    <tr>
      <td>Estilo del proceso</td>
      <td>Iterativo</td>
      <td>Lineal</td>
    </tr>
    <tr>
      <td>Planificación inicial</td>
      <td>Baja</td>
      <td>Alta</td>
    </tr>
    <tr>
      <td>Priorización de lo requerimientos</td>
      <td>Basada en el valor al negocio y actualizada</td>
      <td>Fijado en el Plan de Proyecto</td>
    </tr>
    <tr>
      <td>Aseguramiento de Calidad</td>
      <td>Centrado en el Cliente</td>
      <td>Centrado en los procesos</td>
    </tr>
    <tr>
      <td>Organización</td>
      <td>Auto-organizado</td>
      <td>Gestionado</td>
    </tr>
    <tr>
      <td>Estilo gerencial</td>
      <td>Descentralizado</td>
      <td>Centralizado</td>
    </tr>
    <tr>
      <td>Cambio</td>
      <td>Actualizaciones al backlog del producto</td>
      <td>Sistema de Control de Cambios forma</td>
    </tr>
   <tr>
      <td>Liderazgo</td>
      <td>Colaborativo, Liderazgo de Servicio</td>
      <td>Dirigir y controlar</td>
    </tr>
    <tr>
      <td>Medición del desempeño</td>
      <td>Valor al negocio</td>
      <td>Cumplimiento del Plan</td>
    </tr>
    <tr>
      <td>Retorno sobre la inversión</td>
      <td>Temprano/durante la vida del proyecto</td>
      <td>Al final del ciclo de vida del proyecto</td>
    </tr>
    <tr>
      <td>Participación del Cliente</td>
      <td>Alta durante todo el proyecto</td>
      <td>Varía dependiendo del ciclo de vida</td>
    </tr>

  </tbody>
</table>
Cloudera Streams Messaging Manager Swagger Docs (For Kafka Monitoring, Management, Kafka Connect)
Published: 2020-09-19 14:37:55

---
title: Cloudera Streams Messaging Manager Swagger Docs (For Kafka Monitoring, Management, Kafka Connect)
published: true
date: 2020-09-16 19:52:00 UTC
tags: 
canonical_url: 
---

## Cloudera Streams Messaging Manager Swagger Docs (For Kafka Monitoring, Management, Kafka Connect)

[![](https://1.bp.blogspot.com/-B7R5mh4nl6k/X2Js8nHoDAI/AAAAAAAAbnQ/gqObOtyKuyk8RrEyYtpKQl3Bt2YEyE0iwCLcBGAsYHQ/w636-h474/smmrest.png)](https://1.bp.blogspot.com/-B7R5mh4nl6k/X2Js8nHoDAI/AAAAAAAAbnQ/gqObOtyKuyk8RrEyYtpKQl3Bt2YEyE0iwCLcBGAsYHQ/s1788/smmrest.png)
  

Note that the port is 8585 and not the SMM port which is often 9991.

**YOURSERVER:8585/swagger**

**See:**

[https://docs.cloudera.com/smm/2.0.0/rest-api-reference/index.html#/Application\_context\_related\_operations](https://docs.cloudera.com/smm/2.0.0/rest-api-reference/index.html#/Application_context_related_operations)
Day 3 - Spicing Up A Form: Wine App Part I
Tags: codenewbie
Published: 2020-09-16 19:46:18



Living in Georgia (the country, not the state) and its claim of being the birthplace of wine has its advantages. Where else can I get a bottle of a UNESCO heritage amber wine for $5-$10? My friends and I were joking about how we have access to exotic wine at affordable costs but a burrito will take you back almost same price in California. Not that we would think to pair the two. But wine not?

![girl smile](https://media.giphy.com/media/VABbCpX94WCfS/giphy.gif)
<figcaption> punny </figcaption>

I thought of building an application where the rules are, you can recommend a wine and food pairing, but only if the food paired with it is common in your household because, COVID.


![juiceboxes](https://media.giphy.com/media/uYcuStWfBtHnW/giphy.gif)
<figcaption>If you must</figcaption>

WineFolly has shared some down to earth pairings [here](https://winefolly.com/wine-pairing/wine-and-junk-food-pairings-that-actually-work/). My personal philosophy is that wine can be enjoyed with almost any food you find in your pantry or fridge anyway.

## The Application

Since I am in the middle of the 30 projects in 30 days I figured why not break up the different components of this app and build up each as part of my project. Today I started with a form where the users will submit their anonymous recommendations and add to a database. You can follow my progress [here](https://github.com/josno/youwillbewine)

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

## What I learned

After the second day of building a minor component, I found it more reasonable that I build UP to something that encompasses all of the mini-practice and creating I am doing. I am using React with styled-components and I feel more comfortable using it after getting some practice in with basic CSS and HTML. 


## How This Will Help Me

I am much more aware of mini-interactive elements that I just realized I haven't been implementing in my own design. Can you spot the difference? Being aware of user interaction and user design, as a developer who just started out, I don't have the same level of access to UX designers so keeping on top of UX is a new essential item to add to my growth list.

Onto the next challenge!
New release of JavaPermutationTools library
Tags: java, permutations, metrics, sequences
Published: 2020-09-16 19:34:01

JavaPermutationTools (JPT) is a Java library for computation on permutations and sequences, including a variety of distance metrics for permutations as well as for sequences and strings. It is now available through [Maven Central](https://search.maven.org/artifact/org.cicirello/jpt).  See Github repo for details and source code, or the project website: [https://jpt.cicirello.org/](https://jpt.cicirello.org/).  

{% github cicirello/JavaPermutationTools %}
A Great NodeJs Backend Option for Frontend Developers
Tags: node, api, strapi, cms
Published: 2020-09-16 19:13:13

If you are a frontend developer or no-coder, you probably have thought about building your backend with NodeJs to utilize your javascript knowledge.

Personally, this ended up being a kind of a rabbit hole for me, because, with node + express, you need to reinvent the wheel quite a bit in comparison to other more high-level web frameworks, like [Laravel](https://laravel.com/) or [Ruby on Rails](https://rubyonrails.org/).

That being said, I have decided to build my personal portfolio site backend on [Strapi, which is a Node CMS](https://strapi.io/)!

I think that Strapi is an awesome choice for frontend developers and no coders alike. The biggest reason, in my opinion, is Strapi's API that comes right out of the box.

Here is an overview of some of the things Strapi includes in their API:

{% youtube TF4ZWUhUC5E %}

[Here is a link to my article to no-coders](https://dev.to/cwraytech/should-you-use-a-no-code-tool-to-build-a-web-app-pm5).

I started a series on building my personal portfolio on Strapi + Nuxt! You can follow along with that series here: 

{% link https://dev.to/cwraytech/part-1-a-little-background-664 %}
Chef Cookbook GitHub Actions with Chef BDD and Code Analysis
Tags: actionshackathon, showdev, devops
Published: 2020-09-16 18:47:10

### My Workflow
[Chef](https://www.chef.io/) is widely used and most popular Infra as code technology in DevOps World.

This specific GitHub Action Workflow has been used for creating DIY deployment for Chef cookbooks. 

The below mentioned Continuous Integration aspects are covered in the Workflow,
- It checks-out the code into Workspace
- Performs Cookbook Code Analysis using `cookstyle`
- Executes the cookbook in local mode (`chef-client - z` option)
- Executes the `rspec` unit test cases  (Chef cookbook **B**ehaviour **D**riven **D**evelopment)
- Packages the cookbooks using `Berkshelf` which uses `berksfile` 
- Creates tar.gz archive of Cookbook packages
- In case of any workflow failures, it sends out email to respective developers and maintainers of the repository


### Submission Category: 

DIY Deployments


### Yaml File or Link to Code:

[Chef Cookbook GitHub Actions Workflow](https://github.com/chefgs/dev_github_actions/blob/master/.github/workflows/cookbooks_ci_job.yml)

{% github https://github.com/chefgs/dev_github_actions %}


### Additional Resources / Info:

Developer: [chefgs](https://github.com/chefgs)
splitting a commit with npm changes - introduction
Tags: git, npm
Published: 2020-09-16 18:46:43

# Introduction

In this series i will cover the techniques how to split a commit into multiple commits, while also maintaining npm packages in the commits.

I will show the technique for multiple git clients.

The first part of the series is the introduction, where we introduce the code, we are working with.

# get to know the code

for learning how to split, we have the following demo repository:

https://github.com/paschdan/git-split-demo

the project is a demo repository, where a [pull request](https://github.com/paschdan/git-split-demo/pull/1) is stated, that installs the following packages:

* eslint - for linting our future javascript code
* eslint configuration for standardjs
* babel - to compile our source code

additionally a first hello world module was added.

unfortunately all this happened in one commit, and the maintainer of the repository would like the author of the PR to split his commit into multiple parts.

Our Task and the Goal of this Series is: split the PR into the requested commits.

## prerequisites

to run the demo, you will at least need git and node12+

## try out the demo

To get started, we want to clone the demo repository and check out the pull request branch:

```bash
git clone https://github.com/paschdan/git-split-demo.git
```

next we want to switch to the branch of the PR, we want to edit:

```bash
git checkout add-npm-packages-in-one-commit
```

now we can install our npm dependencies to test the demo:

```bash
npm install
```

after the dependencies are installed, we can test our script:

```bash
npm test
```

this prints Hello World to the console, because we overrided the npm test command with `node lib/index.js`

In the next chapter we will start to split this commit into multiple, with the command line git cli, so stay tuned.
git standup
Tags: git, agile
Published: 2020-09-16 18:46:19

It's Daily Standup time and there you are: unsure about what you did since yesterday - not because you did nothing but because you **forget things easily.** 😂

Yeah, the person here is me, and I often can't answer quickly when I'm asked _"What have you done today?"_. Well, fortunately, I'm a programmer who knows Git, and I made a command that quickly reminds me of what I've done since yesterday:

```
git standup
```

Cool, right? Yeah, this is a [Git alias](https://git-scm.com/book/en/v2/Git-Basics-Git-Aliases), a shortcut for a more complex Git command. Git aliases reside on a file named `.gitconfig` in your home folder. To set up my own `git standup` alias, I added the following line to `~/.gitconfig`:

```
[alias]
  standup = log --all --since yesterday --author=joel
```

This aliased Git command will list all commits from all branches that have been made in the last 24 hours by an author that contains `joel` somewhere on his name or email.

You might want to change the author field with something unique to your name/email.

> _Note: if you already have a `[alias]` line on your `.gitconfig` there's no need to add another one. Just make sure your `standup` alias is placed after it._

This is it. After saving the file, you'll be able to use your alias as a Git subcommand:

```
git standup
```

**Pro tip:** since I tend to prefer shorter outputs, I empowered my `git standup` with some additional flags:

```
[alias]
standup = log --all --abbrev-commit --graph --pretty=oneline --since yesterday --author=joel
```

Now my `git standup` outputs something like this:

```
$ git standup
7b2280e (origin/branch-123) I did something awesome here
7b2280e (branch-123) Here goes a hidden bug packed as a feature to production
15f61fa (refs/stash) WIP
433ed2b index on branch-456: e6f9335 This is another great commit
```

_PS: if you're curious about how my `.gitconfig` looks like, it's public on my GitHub. You can [check it here](https://github.com/joeljuca/dotfiles/blob/master/.gitconfig)._

How about you? Do you have any Git trick that makes your life as a developer easier? Share it in the discussions below. 🙂