teleren/devto huggingface dataset:
How to deploy React.js App on Heroku
Tags: react, heroku, devops
Published: 2020-06-23 09:51:38

## Step 1: Install dependencies
You will be needing the following packages
```
npm i express dotenv
```

## Step 2: Create a server file in Project Folder

Inside your project folder, create a file named "server.js" and copy the following contents inside it.

```
const path = require('path');
const express = require('express');
const app = express();
const port = process.env.PORT || 3000;
app.use(express.static(path.join(__dirname, 'build')));
app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(port, () => {
  console.log('Server is up!');
});
```

## Step 3: Push to GitHub
Add git add all your files, commit them and push them to GitHub, we will deploy the automatically from their

## Step 4: on Heroku
1. Create a new App
2. In deploy section, connect your GitHub account :
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jdyj2s0hd6a14zrnu0tw.jpeg)
3. In settings, configure your environment variables, if you have them.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8e7omws14l9035kx987g.jpeg)
4. Deploy setting :
you can keep automatic deploy setting ON on Heroku if you want, but it’s better to return it off because free tier gives u only 5 builds and if you git push more than 5 times, 6th time you won’t be able to deploy your project. Better keep it off.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uafrm09cy1gpyeqpivze.jpeg)
Then just click deploy and

That’s it, you are DONE !!!

CONGRATS !!!

I hope you were successful :

Follow me on

[GitHub](https://github.com/dev117uday)

[LinkedIn](https://www.linkedin.com/in/uday-yadav-4995a818a/)
What, Why, and How of Private Wiki?
Tags: writing, webdev, showdev, privacy
Published: 2020-06-23 09:45:09

##What Is a Wiki?
The name “Wiki” was given by the creator of the first wiki Ward Cunningham. It is a shortened form of the Hawaiian word “wiki- wiki”, which means quick.

A wiki is a web page that can be edited by multiple users using a simple web browser and an internet connection. [Internal Wikis](https://blog.bit.ai/internal-wiki/) are a quick and easy way to create information repositories, search information, and work collaboratively on the same page.

Wikipedia defines wikis as “A text publication collaboratively edited and managed by its own audience directly using a web browser.” This means wikis can be created and edited by anyone with access to the web page.

A typical wiki can contain multiple pages on a topic and serves a knowledge hub for multiple contributors.

##Types of Wikis
**1. Public wikis** – Wikis created to serve as an information hub where anyone can create and edit content are called public wikis. They are open to collaboration with all. Popular wikis such as Wikipedia, Scholarpedia, WikiTravel, are publicly accessible.
**2. Private wikis**– [Private wikis](https://blog.bit.ai/how-to-create-a-private-wiki/) are used by companies as an internal knowledge base, to manage their in-house information, enabling teams to easily share knowledge and work together. It’s a place where your team can store documents about company policies, processes, guidelines, SOPs (Standard Operating Procedures), projects, product lists, workflows, shared logins, checklists, etc. Think of it as your in-house Wikipedia made in private for your company. We shall go over private wikis in detail in this article.
**3. Personal wiki** – You can also use wikis as a personal wiki to take down notes, as a knowledge base, diary, writer’s tool, or even project management.

##Advantages of Wikis
At the onset, a wiki can be an efficient way to gather and distribute information. It can improve remote collaboration among team members and provide an easy way to have a team on the same page. Some of the key advantages of wikis are as follows:

-Anyone can [create a wiki](https://blog.elink.io/best-wiki-tools/)
-Easy for anyone to edit a wiki
-Simple to learn and use
-Easy to update information
-Teams can work on a single web page together
-Share and collaborate on documents easily
-Can track changes made and revert to the previous version
-Flexible structure to create a wiki as per your needs
-Wide range of wiki software to choose from
-Low cost to manage

##Why Bit is the Best Way to Create a Wiki?
[To create wikis for companies](https://bit.ai/company-wiki), you need a proficient tool that can help you create, share, and collaborate with stakeholders and get work done efficiently. This is where Bit comes in!

Bit.ai is a new-age documentation and knowledge management tool that helps teams to collaborate, share, track, and manage all company knowledge in one place.
Integrating Tailwind into a Blazor Project
Tags: dotnet, tailwindcss, blazor, msbuild
Published: 2020-06-23 09:32:33

A few weeks ago I started experimenting with Blazor and quickly found myself in the situation that I wanted to use a CSS framework. So, I started looking for the best way to integrate Tailwind into a Blazor project. I found out that there was no way to integrate Tailwind into the project without creating a project.json and thus having a node_modules directory in the project. Since I was not satisfied with this approach, I looked at how I could design a system that fits better into my project.

In the end I came up with a solution in which I simply include a NuGet package in the project and assign the build action I gained through it to my stylesheet.

``` xml
<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
    <TargetFramework>netcoreapp3.1</TargetFramework>
  <PropertyGroup>

  <ItemGroup>
    <TailwindCSS Include="Styles/Tailwind.css" />
  </ItemGroup>

  <ItemGroup>
    <PackageReference Include="BamButz.MSBuild.TailwindCSS" PrivateAssets="All" />
  </ItemGroup>

</Project>
```

But what is inside the [NuGet package](https://www.nuget.org/packages/BamButz.MSBuild.TailwindCSS/)?

It simply contains the things I didn't want in my project: the project.json and the node_modules directory, plus an MSBuild target and a JavaScript file.

It works as follows: The target calls the JavaScript file via node.js and provides information about project & file path, then the JavaScript file proceeds to setup PostCSS and simply loads the source stylesheet into it and writes the output of PostCSS into the target file, wich is stored in the same location as the source file with the extension *.min.css*.

If you need to use a custom configuration you can simply drop a tailwind.config.js into your project directory as the script is checking for the file before transforming.

If you want to know more about it, you can take a look at its [Github Repository](https://github.com/BamButz/msbuild-tailwindcss).
Shifting Gears Today - Learning Over Doing
Tags: devjournal, codenewbie, womenintech
Published: 2020-06-23 09:27:42

_This post was originally published on June 23, 2020 on [my blog] (https://alexlsalt.github.io/blog)._

Good morning! I woke up today wanting to put all individual projects on hold for the day and instead focus back on the learning side of things with my JavaScript Udemy course.

From where I've left off, I'll be starting in on a big project that makes use of some sort of recipe website API, so I'm looking forward to finally getting more focused practice on using APIs.

At this moment, I'm feeling like APIs are something that seem slightly insurmountable when, of course, I know they're not, and I just need to learn, implement, and start building with them.

It's that reliable moment when our brains start getting a little anxious because we don't know *exactly* how to do something, so they shy away in favor of doing things they've mastered - like scrolling social media or diving back into our latest book or TV show.

Brains - those clever little devils!

Looking forward to shifting gears today and embracing a few hours of learning some new things!

Thanks so much for reading along! [Now let's be friends over on Twitter >>] (https://twitter.com/alexlsaltt)

P.S. I'm on the cusp of launching a brand-new podcast! Stay up to date by [signing up for the newsletter here >>] (https://www.ladiescodecollective.com/)
Achieve safe AI through incentivized emergence
Tags: machinelearning, blockchain, computerscience, opensource
Published: 2020-06-23 09:03:27

**Despite the debates on how Artificial General Intelligence (AGI) will look like, everyone agrees on one point — human-machine harmony in the future. It is not clear the way down through which we would reach this. Different people possess different opinions. Of cause, the future is not predictable, all we can do is speculate based on what we know now. However, in this article, we are going to focus on one among them, that a-mma is contributing to. Let us see how far we can see through with the technology we currently have.**

This story is originally posted [here. Continue reading](https://medium.com/a-mma/can-we-achieve-safe-ai-through-incentivized-emergence-b2cb7adf6248)..
Spaghetti code
Tags: codequality, javascript, react
Published: 2020-06-23 08:44:23

I’ve been lately working on a mobile application backend I am gonna talk on the next posts the problems I faced, things I learned.
👨🏻‍💻👨🏻‍💻

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

In this post, I am gonna talk mainly about code quality the main task was to add some features to the project but suddenly I found my self blocked because of the poor spaghetti code written by the devs before me, the solution was refactoring and repeating a big part of the application.
Things I learned : 
- Code quality is a priority in creating products👨🏻‍💻
- make your code readable and easy to understand by refactoring.
- Follow pattern designs it will make your code better .
- A bad code quality feels like he'll for a developer so please don't ship a bad code.🥵
10 SOFTWARE ENGINEERING YOUTUBE CHANNELS WORTH YOUR TIME
Tags: javascript, beginners, codenewbie, html
Published: 2020-06-23 08:29:38

*Disclaimer: This list is my personal preference.*

These channels are super helpful and anyone who like to use video tutorials should definitely check them out. 

I created a video about this a while ago and I thought I should share it here, I have pinned it below.

These three channels are not mentioned in the video. I started following them recently. You should also check them:
* _Web Dev Simplified_ - HTML, CSS & Full stack JavaScript videos
* _Kevin Powell_ - CSS videos
* _Florin Pop_ - HTML, CSS & JavaScript videos

**Please support my content** (*Stay Awesome!*)
1. Subscribe to my YouTube channel [here] (https://www.youtube.com/channel/UCe8uN9zoKksCb1hfw61myRw?sub_confirmation=10)
2. Donate to my PayPal [here](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=NZCBMP9V54G9J&source=url)

{% youtube 0YiO6Ww9-Cg %}

*Suggest to me other cool programming channels in the discussion below.*
Accelerating data ingestion with Bartscript
Tags: data, dsl, pipelines, bartscript
Published: 2020-06-23 08:28:46

---
title: Accelerating data ingestion with Bartscript
published: true
description: A brief case study into how GPI accelerated data ingestion by producing a custom language for their data analysis team.
tags: data, DSL, pipelines, Bartscript
---

Pricing and reimbursement data are the lifeblood of the pharmaceutical industry. The maintenance of GPI Pulse involves retrieving, standardising, and interpreting data from over 100 different sources. Automating this data collection and processing is vital to our commercial success.

Historically, our data processing pipelines have been built by developers. These work well, until the data source changes. Unfortunately, when the source drifts, it takes a developer to make the corresponding adjustment to the pipeline.  One of our significant challenges in the engineering team has been balancing this sort of maintenance with feature development. At the same time, the analysts were facing delays.

Our response has been to invest in bespoke tooling for our data analysts. Taking the lessons learnt from the development of our traditional pipelines, we have been able to produce a generic, customisable pipeline. This approach has put our analysts back in control of data processing and increased the agility with which we can respond to upstream changes in data formats.

Central to this strategy has been the development of an internal “Domain Specific Language” (DSL). For the sake of familiarity, we modelled this new language on Excel formulas. This language allows for the declarative articulation of a group of data transformation actions, arranged in a sequence of phases. We call this new language “Bartscript” in honour of the contractor who lead the development efforts.

![A simplified example of Bartscript in action](https://dev-to-uploads.s3.amazonaws.com/i/j8moe3ryk9quj0i1qcm6.png)

Even though it is so niche, Bartscript has many of the features you’d expect from a fully-fledged programming language:
* Branching logic
* Loosely typed and liberal when it comes to coercion.
* Full sandboxing
* Comprehensive error handling

Despite this sophistication, Bartscript remains deceptively simple to use. This simplicity has facilitated a team of two analysts and one developer to automate sources at a rate of 5 per sprint. For comparison, under the old approach, we would have expected one developer and one analyst to work on one country full time for one sprint (give or take). In other words, we have reduced development time by two thirds.

The real test will come when one of the pipelines requires some modification due to a change in its source. We hope that, in many cases, the analysts can make the necessary changes with minimal support from the developers. We are still in the early days, but the initial signs are good.
Sneak peak on parallax sites
Published: 2020-06-23 08:13:25

INTRODUCTION
Parallax effects add actions and the illusion of depth by taking different visual elements and moving them at different speeds in a website design. Some may move faster, others may move slow, while back few may stand still.
There are many benefits that parallax design creates for web viewers:
It directs visitors to call to action.
It creates curiosity and encouragement.
It entices visitors with animation.
It enlarge the duration of stay on the website as viewers are more interested to scroll the whole page
Java add text watermark and image watermark to word document 
Tags: java, watermark, word
Published: 2020-06-23 07:59:53

Watermarks are lightly shaded words or pictures on a piece of paper or the digital pages of Word documents. They are often used to indicate the importance of a document and protect it from copying. This article will demonstrate how to use Free Spire.Doc for Java to add text watermark and image watermark to Word document in Java applications.


**Installation**
**Method 1:** Download the [Free Spire.Doc for Java](https://www.e-iceblue.com/Download/doc-for-java-free.html) and unzip it. Then add the Spire.Doc.jar file to your Java application as dependency.

**Method 2:** You can also add the jar dependency to maven project by adding the following configurations to the pom.xml.

```java
<repositories>
   <repository>
      <id>com.e-iceblue</id>
      <name>e-iceblue</name>
      <url>http://repo.e-iceblue.com/nexus/content/groups/public/</url>
   </repository>
</repositories>
<dependencies>
   <dependency>
      <groupId>e-iceblue</groupId>
      <artifactId>spire.doc.free</artifactId>
      <version>2.7.3</version>
   </dependency>
</dependencies>
```

**Add text watermark**

```java
import com.spire.doc.*;
import com.spire.doc.documents.WatermarkLayout;
import java.awt.*;

public class AddTextWatermark {
    public static void main(String[] args) {

        Document document = new Document();
        document.loadFromFile("Input.docx");

        insertTextWatermark(document.getSections().get(0));

        document.saveToFile("result.docx",FileFormat.Docx );
    }
    private static void insertTextWatermark(Section section) {
        TextWatermark txtWatermark = new TextWatermark();
        txtWatermark.setText("Private");
        txtWatermark.setFontSize(60);
        txtWatermark.setColor(Color.red);
        txtWatermark.setLayout(WatermarkLayout.Diagonal);
        section.getDocument().setWatermark(txtWatermark);
    }

}
```

![](https://dev-to-uploads.s3.amazonaws.com/i/t395ffbazq44ht70t0hu.jpg)



**Add image watermark**

```java
import com.spire.doc.*;


public class AddImageWatermark {
    public static void main(String[] args)  throws Exception{

        Document document = new Document();
        document.loadFromFile("Input.docx");

        PictureWatermark picture = new PictureWatermark();
        picture.setPicture("pic.jpg");
        picture.setScaling(50);
        picture.isWashout(false);
        document.setWatermark(picture);

        document.saveToFile("result2.docx",FileFormat.Docx );
    }
}
```
![](https://dev-to-uploads.s3.amazonaws.com/i/n6fjwqvys2fwm5oodjuq.jpg)
Plakaty zdrapki - an idea was born.
Published: 2020-06-23 07:50:59

After over 10 years of software development (mostly Python), I have decided to pursue new dream, which is opening my own ecommerce store  with something which is called "[plakaty zdrapki](https://zdrap.to)". So... sorry, but I had to finally release it out of me & I am so happy right now. Well, now there is a time to finally tell my wife about tat idea xD
Road to Genius: smart #27
Tags: javascript, beginners, computerscience
Published: 2020-06-23 07:47:11

Each day I solve several coding challenges and puzzles from Codr's ranked mode. The goal is to reach genius rank, along the way I explain how I solve them. You do not need any programming background to get started, and you will learn a ton of new and interesting things as you go.

![coding challenge](https://dev-to-uploads.s3.amazonaws.com/i/e8qkixehy8d4g3dvgxte.png)

Here's an interesting challenge, it's pretty short yet has some interesting properties. We have encountered similar code before many episodes ago, but this time we have to fully analyze it.

It starts with an empty object `MP` and a string `T`. The for-loop iterates over each character in `T`, the if-condition checks if that character has a key-entry in the `MP` object. If it doesn't it adds the key with 0 as value. Then it increments the value for that key by one.
At the end `R = MP[T[4]]`
This last line gets the value from `MP` by key that is the 4th index of `T`. This is a mouthful.

All that this code does it count the number of occurrences of characters of `T`. Since all characters in `T` are unique, `MP`'s values will all equal to 1. Internally `MP` will look like this:
```JS
MP = {
  'j': 1,
  'p': 1,
  'n': 1,
  't': 1,
  'm': 1,
  'u': 1
}
```

Let's have a closer look at the last line:
`R = MP[T[4]]`
We have to dissect it from the deepest end first:
`T[4]` this gets the character at index 4 from `T`, which is `m`.
Now we can substitute: `R = MP['m']`
We already know what `MP`'s values are, so `R` will be 1.

![coding challenge answer](https://dev-to-uploads.s3.amazonaws.com/i/qcvqgka3kds1nc49inwi.png)

By solving these challenges you train yourself to be a better programmer. You'll learn newer and better ways of analyzing, debugging and improving code. As a result you'll be more productive and valuable in business. Join me on the Road to Genius and upgrade your programming skills, at https://nevolin.be/codr/
Back-end
Tags: htmm
Published: 2020-06-23 07:38:06

Back-end  (หรือหลังบ้าน)
Backend มักจะประกอบด้วยสามส่วน: เซิร์ฟเวอร์ (server) แอปพลิเคชัน (application) และฐานข้อมูล (database) หากคุณจองเที่ยวบินหรือซื้อตั๋วคอนเสิร์ตคุณมักจะเปิดเว็บไซต์และโต้ตอบกับส่วนหน้าบ้าน (Front-end) เมื่อคุณป้อนข้อมูลนั้นแล้วแอปพลิเคชันจะจัดเก็บไว้ในฐานข้อมูลที่สร้างขึ้นบนเซิร์ฟเวอร์ คิดง่ายๆว่าฐานข้อมูลเป็นสเปรดชีต Excel ขนาดใหญ่บนคอมพิวเตอร์ แต่คอมพิวเตอร์ในที่นี้คือ (เซิร์ฟเวอร์) ซึ่งข้อมูลของคุณอาจจะเก็บไว้ที่ไหนสักแห่งในบนโลกขึ้นอยู่กับผู้ให้บริการ

ข้อมูลทั้งหมดนั้นยังคงอยู่บนเซิร์ฟเวอร์ดังนั้นเมื่อคุณกลับเข้าสู่แอปพลิเคชันเพื่อพิมพ์ตั๋วของคุณข้อมูลทั้งหมดยังคงอยู่ในบัญชีของคุณ

เราจะเรียกบุคคลที่สร้างเทคโนโลยีนี้ทั้งหมดเพื่อให้ระบบทำงานร่วมกันได้ ว่า "backend developer" ซึ่งคนเหล่านี้ต้องมีทักษะการเขียนภาษาโปรแกรมมิ่งได้แก่  PHP, Ruby, Python, และอื่น ๆ พวกเขามักจะใช้ framework เพื่อเป็นตัวช่วยในทำงาน อย่างที่ดังๆก็มี Ruby on Rails, Cake PHP และ Code Igniter สิ่งพวกนี้ทำให้พวกเขาทำงานเร็วขึ้นและไวขึ้น

ผู้เชี่ยวชาญด้านเว็บหลายคนที่เพิ่งเข้ามาในวงการอาจเคยได้ยินคนจำนวนมากพูดถึง WordPress ซึ่ง WordPress เป็นตัวอย่างที่ดีของส่วนหน้าบ้านและส่วนหลังบ้านที่ทำงานร่วมกันได้ เพราะ WordPress เป็นเฟรมเวิร์กที่มาจากภาษา PHP ที่คุณต้องติดตั้งบนเซิร์ฟเวอร์ของคุณด้วยฐานข้อมูล จากนั้นนักออกแบบจะปรับแต่งรูปลักษณ์และฟังก์ชันการทำงานของไซต์ WordPress โดยใช้ CSS, jQuery และ JavaScript
Front-end
Tags: html
Published: 2020-06-23 07:36:36

Front-end(หรือหน้าบ้าน)
เมื่อเราพูดถึง “Front End” ของเว็บ จริงๆแล้วเรากำลังพูดถึงในส่วนของผู้ใช่งานที่เห็นหน้าตาความสวยงามและปฏิสัมพันธ์ของผู้ใช้งานกับเว็บ

หน้าเว็บจะประกอบด้วย สองส่วนคือการออกแบบ และ การพัฒนาหน้าบ้าน

ในอดีตเมื่อมีคนพูดคุยเกี่ยวกับการพัฒนาระบบมันมักจะอ้างถึง backend แต่ในช่วงไม่กี่ปีที่ผ่านมามีความจำเป็นต้องแยกระหว่างนักออกแบบหรือ Designer คนที่ทำงานกับโปรแกรม Photoshop และกับคนที่สามารถใช้ HTML และ CSS  ได้ มากไปกว่านั้นคือนักออกแบบสามารถเขียนภาษา JavaScript และ jQuery

ดังนั้น ตอนนี้เมื่อเราพูดถึงคำว่า "web design" จริงๆแล้วเรากำลังพูดถึงคนที่ทำงานร่วมกับ Photoshop และ HTML, CSS, JavaScript หรือ jQuery อยู่ก็เป็นได้

ทุกสิ่งที่คุณเห็นเมื่อใช้เว็บ คือการรวม HTML, CSS และ JavaScript ทั้งหมดที่ถูกควบคุมโดยเบราว์เซอร์ของคอมพิวเตอร์ของคุณ และจะรวมถึงสิ่งต่างๆ เช่นแบบอักษร เมนูแบบเลื่อนลง

ปุ่มเปลี่ยนภาษา แถบเลื่อนด้านข้าง ฯลฯ เพื่อให้ทุกอย่างทำงานได้จริง  และเพื่อเก็บข้อมูลที่คุณใส่ลงไปในหน้า เราจำเป็นต้องใช้เทคโนโลยีเพื่อให้เว็บทำงานได้สมบูรณ์  เราจะต้องป้อนข้อมูลทั้งหมดลงสู่ระบบหลังบ้านหรือ backend
Unity - tint your editor while in playmode
Tags: gamedev, unity3d, tutorial, beginners
Published: 2020-06-23 07:35:18

{% youtube u6Yb06Utl9A %}

A really quick tip for those of you using Unity...

How many times have you forgotten to stop your game when you're in the middle of developing, or wonder why nothing's working then realize it's not in play mode?

Well there's an easy fix for this!

You can change your settings so your Unity editor will change to a different color when you're in play mode, and then go back to the usual grey when you're in edit mode!

To set a color:

If you're on a Mac, go to Unity > Preferences

<img src="https://cdn.sushicodes.com/assets/20200619004241/Screen-Shot-2020-06-19-at-12.34.56-AM-1024x647.png" alt="" class="wp-image-478"/>

If you're on Windows, go to Edit > Preferences

<img src="https://cdn.sushicodes.com/assets/20200619163742/windows-unity-edit-1024x576.jpg" alt="" class="wp-image-484"/>

Select Colors in the sidebar

<img src="https://cdn.sushicodes.com/assets/20200619004254/Screen-Shot-2020-06-19-at-12.36.07-AM-1024x647.png" alt="" class="wp-image-479"/>

Find General > Playmode Tint and click the bar or color dropper to choose the color you prefer. (Personally, I go with #D796FF!)

<img src="https://cdn.sushicodes.com/assets/20200619004303/Screen-Shot-2020-06-19-at-12.37.35-AM.png" alt="" class="wp-image-480"/>

Go back to your editor, click the Play button, and see your new Playmode color in action!

<img src="https://cdn.sushicodes.com/assets/20200619004313/Screen-Shot-2020-06-19-at-12.37.54-AM-1024x664.png" alt="" class="wp-image-481"/>

And there you have it! Now you'll more easily know when you're in play mode, and when you're in edit mode. Happy developing!