teleren/devto huggingface dataset:
Process Image Cash Letter (ICL) files
Published: 2020-07-01 13:52:47

When we first needed to process Image Cash Letter (ICL) files (also known as X9 files), we couldn't find a decent library to use - so we built it!

Now, 6 months later, we've been getting some good traction on our framework for processing ICL/X9 files using our Composable platform (https://composable.ai) and open source library posted on:
Nuget: https://www.nuget.org/packages/CompAnalytics.X9/
GitHub: https://github.com/ComposableAnalytics/companalytics-x9

This library contains classes that represent, read, and write binary X9.100-187 image cash letter files used for electronic transmission of checks to/from a bank. It includes tools for reading the files from disk into an X9Document representation that mimics the structure of the file's various records and fields in friendly, interoperable types. X9Documents can also be created from scratch, then written out to the binary X9 format, enabling simple X9 file creation for your .NET environment use case. All types also offer robust type coercion, bounds-checking for each fixed-length field, comparison utilities to ensure equality across files, and informative exception messages when attempting to violate the X9.100-187 specification.

We have been using this library within our Composable DataOps Platform in production for transmission of significant sums of money.
Auto Link to Reference External Resources Based on the Reference ID in the Commit Message
Tags: git, cli, bash
Published: 2020-07-01 13:43:46

[Configuring auto links to reference external resources](https://help.github.com/en/github/administering-a-repository/configuring-autolinks-to-reference-external-resources) is one of the most helpful features of GitHub.

Configuring it will make the commit message clickable, and it'll reference the external resource (i.e. Jira).

I thought it'd be very useful if you could do the same but from the CLI. So I wrote a [simple script](https://github.com/MarounMaroun/gitlink) that does that.

You should have two variables set:

* `REFERENCE_PATTERN` - Pattern used in commit message
* `TARGET_URL` - Link to the external system you want to link to

For example, to link Jira issues having pattern like "PS-1425", you should set `REFERENCE_PATTERN` to `PS-\d\d\d\d`, and the `TARGET_URL` should be set to `https://proteantecs.atlassian.net/browse`.

Once set, you simply run:

```bash
gitlink <SHA>
```

If only one issue is referenced in the commit message, it'll be opened in the browser. Otherwise, you'll get a list of links for the issue.

For example, having the following log:


```
Author: MarounMaroun <****  .com>
Date:   Tue Jun 30 23:16:30 2020 +0300

    BD-5562: handle missing user in the user service
```

When you run:

```bash
gitlink 7d21af686732bd1812f79c4c51ac98a903de5c3d
```

A new tab with the relevant issue will be opened:


Project in GitHub: https://github.com/MarounMaroun/gitlink
Green Screen Animation with CSS
Tags: css, productivity, showdev
Published: 2020-07-01 13:34:17

Hello everybody, I'm a youtuber and recording web development lectures on my channel. A few days ago I decided to add "subscribe" animation into my videos but unfortunately my hardware wasn't enough to run video edit programs such as "Abobe Premier" or "Final Cut Pro".

So what did I do? I added "subscribe" template into my videos but how? I create a CSS template something like this;

![](https://dev-to-uploads.s3.amazonaws.com/i/97q1v0muvyk36nl0hiho.png)

And I added little animation to make sure looks pretty.

![](https://im3.ezgif.com/tmp/ezgif-3-48b42bbc340c.gif)
Demo: [https://codepen.io/tayfunerbilen/pen/OJMOvZj](https://codepen.io/tayfunerbilen/pen/OJMOvZj)

And I recorded this screen with Camtasia Studio, then edit with Camtasia Studio as well. Because Camtasia is working very well in my computer.

In camtasia, I used "Remove a Color" effect to remove green screen.

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

Here is the result, with low quality computer finally I can use "subscribe" template on my videos. Also I implemented more template such as "like" template. To take control is very easy and no need big video edit programs anymore :)

{% youtube pGhpbyFeobQ %}

I'm not sure this is a good idea but it worked for me, may be one day it works for you. Happy coding!
Sentiment analysis using Node.js
Tags: node, sentiment, vader
Published: 2020-07-01 13:34:09

## What is Sentiment analysis?

It refers to the use of **natural language processing**, **text analysis**, etc to identify or extract the **emotional tone of the text**. It is used by companies for classifying customer's reviews for products or movies as positive or negative and automating the process of handling spam etc.

## Setting up an app

Initialize a Node.js app

```bsh
npm init -y
```

We'll use the Node.js library called [vader](https://github.com/vaderSentiment/vaderSentiment-js). 

```bsh
npm i vader-sentiment
```

## Classifying text

```javascript
// Require the library
const vader = require('vader-sentiment');

const input = 'The movie was awesome.';

const intensity = vader.SentimentIntensityAnalyzer.polarity_scores(input);
console.log(intensity);
```

Run the above code, you'll see output something like 

```bsh
{neg: 0.0, neu: 0.29, pos: 0.70, compound: 0.8545}
```

The **compound** score is computed by summing the valence scores of each word in the lexicon, adjusted according to the rules, and then normalized to be between -1 (most extreme negative) and +1 (most extreme positive).

### Scoring 

**Positive Sentiment** 👉 compound score >= 0.05
**Neutral sentiment** 👉 -0.05 < compound score < 0.05
**Negative sentiment** 👉 compound score <= -0.05

You can integrate this library into your app and can classify text without any machine learning.
Prevent navigation when a modal/dialog is open in Angular 9
Tags: angular, typescript, ux
Published: 2020-07-01 13:21:20

tl;dr: Use guards to close any open dialog, and to prevent unwanted navigation. 

I was struggling with this issue on many of my previous projects, especially when the requirement was to create a PWA/mobile app, where modals usually are rendered full-screen.

I was using similar solutions, like one [explained in this post](https://dev.to/nicolus/closing-a-modal-with-the-back-button-in-ionic-5-angular-9-50pk).

The basic idea is that when we open a modal, we are actually not navigating between routes, but from a UX perspective, users expect that the modal will close when they hit the back button, which is not happening.

This is extremely infuriating when we have a full-screen modal, because repeatedly hitting the back button will not close the modal, but instead just navigate back and back on the website without the user noticing.

The solution I recently came up with uses guards. For this example I'm using Ionic 5.

```typescript
@Injectable({
  providedIn: 'root',
})
export class ModalGuard implements CanActivate {
  constructor(private readonly modalController: ModalController) {}

  canActivate(
    _next: ActivatedRouteSnapshot,
    _state: RouterStateSnapshot
  ): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    return this.modalController.getTop().then((modal) => {
      if (modal) {
        this.modalController.dismiss();
        return false;
      }
      return true;
    });
  }
}
```
And I use this guard for my every route.
```typescript
const routes: Routes = [
  {
    path: '',
    canActivate: [ModalGuard],
    component: TestPage,
  },
];
```
This guard will prevent the navigation if a modal is open, and it will close it.
What not-so-popular newsletters would you recommend?
Tags: watercooler
Published: 2020-07-01 13:16:18

---
title: What not-so-popular newsletters would you recommend?
published: true
description: Seeking for hidden gems in the form of IT and web development newsletters :)
tags: watercooler
//cover_image: https://direct_url_to_image.jpg
---

What are some not-so-well-known IT newsletters that you would recommend? A newsletter that is a hidden gem, but sometimes overlooked because it is not from a major company or a popular developer.

For example, I really enjoy reading: [Accessibility in the News](https://www.microassist.com/digital-access/news/). It is sent every Thursday by a small company that I worked for, and it is always full of interesting stories related to accessibility (including some beyond technology stuff.)
J.A.R.V.I.S is now READY!
Tags: python, productivity, github, git
Published: 2020-07-01 13:11:15

# J.A.R.V.I.S
## Python powered AI
### Requirements:
<ul>
<li>datetime</li>
<li>os</li>
<li> pyttsx3</li>
<li> wikipedia</li>
<li> speech_recognition </li>
<li> webbrowser</li>
<li> sys</li>
<li> smtplib</li>
<li>requests</li>
<li>json</li>
<li>defflib</li>
<li>geocoder</li>
<li>urllib</li>
</ul>
### What it does...

  <ul>
<li>Send Gmail messages</li>
  <li>Dynamic News Reporting at any time</li>
<li>Open any website with just a voice command</li>
<li>Plays Music</li>
<li>Tells time</li>
<li>Wikipedia powered AI</li>
<li>Dictionary with Intelligent Sensing i.e. auto checking if spell/typo mistake</li>
<li>Weather Report such as temp, wind speed, humidity, weather description</li>
<li>Latitude and longitude</li>
  <li>Seaches Youtube, Google with search queries</li>
<li>Google Maps</li>
</ul>

### Future Plans

  <h1>Sky is limit. There are immense possibilities in this project. Will be integrating some very powerful commands soon..</h1>

<a href="https://github.com/GauravSingh9356/J.A.R.V.I.S">GitHub Code</a>
  https://www.linkedin.com/pulse/jarvis-python-powered-ai-gaurav-singh
61: Watch out 'Burning Out' 
Tags: javascript, devjournal
Published: 2020-07-01 12:59:09

I tried to make a balance between work and studying, had to decide one part in order to make the result in the end. I think the total newbie is always afraid of getting controlled by too many advice, one thing is sure that the computer is the only thing we need to listen to like I am not sure of 'what the real advantage of Code Review', any longer. The Coding Culture is not opened to everyone and seems like it is another trend in the education business. It is my opinion, So, Self-journey is always hard to keep the consistency. I already made a decision never rush, never go back to Bootcamp. Job-ready skills might not be coming soon. Well, I still feel happy when I think of coding. Stay Healthy, Stay Strong, Stay Coding!
Producing good code is only possible in aligned environment
Tags: discuss
Published: 2020-07-01 12:51:20

---
title: Producing good code is only possible in aligned environment
published: true
description: If you want to produce good work/code/business, make sure your environment is aligned with your vision.
tags: discuss
---

If you want to produce good work/code/business, make sure your environment is aligned with your vision.

Especially the people you surround yourself with:
- family
- coworkers
- boss
- partner
- friends

Env is crucial for success, yet I think it's often overlooked. WDYT?
Divide et impera
Published: 2020-07-01 12:47:52

I would say the most important thing I learnt during the time I spent studying the Engineering degree was the "divide et impera" principle. I strongly believe this is one of the most important skills a developer must have.

Always when I am struggling with a problem it turns out that it hides more than one problem. And this is something I usually see, many bad designs, disfunctional teams, micromanagement, etc. All these are faces of the same coin: the inability to divide problems. When you try to solve a complex problem that in reality you are not applying the best solution and you come out with a partial solution that in the end is going to bring you more problems.

It is very common to mix problems of very different natures. This way we have problems that hide a mix between technical, management and client relationship difficulties. Sometimes you are able to divide these problems but don't have the courage to face them and you try to solve a disagreement with the client by offering a technical solution. You can do it but sooner or later it will just end up biting you.

Always you say we don't have time to do this or that, you are adding a new and different problem to the current one. Time is not a technical problem, time has nothing to do with finding the best solution to a problem, time is a management problem and you should solve it negotiating with the client, reducing scope, etc. You shouldn't look for a worst technical solution to save some time. Don't get me wrong, sometimes you have to acquire some technical debt but you must be aware of that decision and pay it as soon as possible.

In my experience, breaking down problems and selecting the best solution for each one ends up being the best and straightforward solution.
HTTP version evolution 3
Tags: http
Published: 2020-07-01 12:31:53

---
title: HTTP version evolution 3
published: true
description: 
tags: HTTP
---

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


I have record article about HTTP/1 和 HTTP/2 at [HTTP version evolution](https://dev.to/ihavecoke/http-version-evolution-2cef) [HTTP version evolution 2](https://dev.to/ihavecoke/http-version-evolution-2-34kh) this article i will share my note with **HTTP** evolution 3

### TCP header block

Although **HTTP/2** solves the queue-blocking problem at the application level, the queue-blocking problem caused by the loss of a single packet in **TCP** is called queue-blocking over **TCP**. 

Test data shows that **HTTP/1.1** transport efficiency is better than **HTTP/2** when the system reaches a 2% packet loss rate.



#### The delay in establishing a TCP connection

Network delay is also called **Round Trip Time**. We refer to the total round-trip time between sending a packet from the browser to the server and returning the packet from the server to the browser as **RTT**, which is an important indicator of network performance.

* When establishing a **TCP** connection, three handshakes with the server are required to confirm the connection, which means that 1.5 **RTT** is consumed before data can be transmitted.
* **TLS** connections are made. there are two versions of **TLS** -- **TLS1.2** and **TLS1.3**

We need to spend 3-4 **RTTS** before transmitting the data



#### TCP protocol ossification

Include router, firewall, NAT, switch and so on. they often rely on little-updated software that USES a lot of **TCP** features that are set up and rarely updated.



#### QUIC protocol

Based on **UDP** it realizes the functions of multiple data streams and transmission reliability similar to **TCP**. We call this set of functions **QUIC protocol**

* Realize functions like **TCP** flow control and transmission reliability
* Integrated **TLS** encryption function
* Implemented the multiplexing function in  **HTTP/2 **
* Implemented a quick handshake function



#### HTTP/3

* Neither the server nor the browser provides complete support for **HTTP/3**
* There are also very big problems in deploying **HTTP/3** because the system kernel's optimization of **UDP** is far from **TCP** optimization, this is also an important reason that hinders **QUIC**
* The problem of the rigidity of the middle equipment. the optimization of **UDP** by these devices is much lower than **TCP**. according to statistics, when using **QUIC** protocol there is about 3% to 7% packet loss rate.


Hope it can help you :)
What is the best way for web scraping?
Tags: help, python, webdev, discuss
Published: 2020-07-01 12:25:16

Hi Guys,

I know that `Scrapy` can be used to scrape data. But also I want the code to be presentable on Github. I want to know what are best practices for web scraping using Python. 

Also, if you guys know any web scraping project on Github please provide me the link to it.
Let's play with K8S...
Tags: kubernetes, raspberrypi
Published: 2020-07-01 12:17:30

---
title: Let's play with K8S...
published: true
description: Simple deployment of static website on K8S
tags: Kubernetes,raspberrypi
cover_image: https://blog.medinvention.dev/content/images/size/w2000/2020/03/IMG_20200325_204847.jpg
canonical_url: https://blog.medinvention.dev/rpi-k8s-starting/
---
so you want to be a web developer
Tags: codenewbie, css, beginners, firstpost
Published: 2020-07-01 12:15:50

Hey, I am a newbie and only recently committed to learning web dev and today i'd like to talk about how to plan out your learning process to tackle a plethora of resources in a fast moving industry.
<br>
Well first let me tell you how things unfolded in my journey so far, after months of trying to learn everything at once while being completely overwhelmed because it was a lot and being stuck in tutorial hell and giving up and after a while, I would come back and do the same thing all over again until I decided to just dive headfirst though it was a great approach to get me coding I mean I build 6 projects so far

![Alt text of image](https://i.kym-cdn.com/photos/images/facebook/000/242/200/1ca.jpg)
<br>
but it created some gaps in my knowledge of the fundamentals of CSS and that lead me to bookmark every book, article, blog post, and courses that have the word CSS in it so now I don’t want to open chrome because just looking at the bookmarks made me utterly exhausted.

![Alt text of image](https://media0.giphy.com/media/4LsN0YwgIsvaU/giphy.webp?cid=ecf05e47086a77d059eee47b85b51eb533b0089c7ef2e2e9&rid=giphy.webp)
<br>
Then it hit me, I’m taking everything at once and not customizing it to my learning needs so I made a plan I deleted all the bookmarks (kind of a regrettable decision) ,searched for roadmaps and took so many notes of what should I learn and then I went through each subject and test my knowledge in it and if I understand it I would prove it to myself then I can cross it off the list and move on for what’s next, cool now I know what should  I focus on so I will get my resources together, organize everything out 
<br>
Now we're getting into the meat and potatoes of this post 

![Alt text of image](https://media3.giphy.com/media/g0JP0HG6zF0o8/giphy.gif)

So for 1 week I study 2 or 3 subjects and take an ungodly amount of notes and next week build something focused on what I learned then go back to my notes tidy them up and because doing that helps cement new information and see that project I did in week 1 I will go back to it and add new thing I learned to it just to see how things react together.
<br>
Lastly, keep learning, find better ways to learn, stay consistent and remember just like you plan your projects you should plan your learning process.
<br>

By the way, this<a href="https://dev.to/devindford/a-list-of-css-resources-for-beginners-2ff5"> post</a> by<a href="https://dev.to/devindford"> Devin Ford💻🚀<a/>
helped me out a lot in term of CSS resources check it out 

If you guys have other methods on how to fill the gaps in your knowledge effectively,leave a comment or hit me up on <a href="https://twitter.com/MariamV_96"> Twitter!</a>
Building Todo App Actions and Reducers with Redux - Part 1
Tags: redux, react, beginners, tutorial
Published: 2020-07-01 12:14:59

Here this blog is about actions and reducers one might need to create a simple React Todo App.  

In this blog, I'll cover only how to add todo item and toggle its status from incomplete to complete and vice versa.

##Scenarios
So for this, we need actions and reducers of two cases.
1. Add Todo Item.
2. Toggle Todo Item.

##Actions
First I created a global variable to make ids of todos.
```javascript
let nextTodoId = 0;
```
Next, I wrote my add todo item action creator like this
```javascript
const addTodo = text => {
  return {
    type: "ADD_TODO",
    text,
    id: nextTodoId++
  };
};
```
It will take text written in textbox and pass it to reducer with an increment of `nextTodoId`.

Now toggle action will look like this
```javascript
const toggleTodo = id => {
  return {
    type: "TOGGLE_TODO",
    id
  };
};
```
It will take the id of clicked todo item and pass it to the reducer to toggle its state.

##Reducer
Now its time to write `TodoReducer`
```javascript
const initialState = {
  todos: [],
};
const TodoReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [
          ...state.todos,
          {
            id: action.id,
            text: action.text,
            completed: false,
          },
        ],
      };
    case 'TOGGLE_TODO':
      return {
        ...state,
        todos: state.todos.map(todo =>
          todo.id === action.id
            ? {
                ...state,
                completed: !state.completed,
              }
            : todo,
        ),
      };
    default:
      return state;
  }
};
```
In `ADD_TODO` case, I am adding a new todo object into todos array and keeping its "completed" property as false by default and setting id and text passed by the action.

In `TOGGLE_TODO` case, I am finding the clicked todo item through .map and toggling its completed state.

##Execution
That's it. I'll write the second part about Visibility Filter in the next blog. Thanks!  

You can check and run the app below.
{% codesandbox 920woynjn4 %}
Color Changing Shiny Loader using CSS | Loader CSS
Tags: html, css, design, tutorial
Published: 2020-07-01 12:08:06

##index.html
```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Loader</title>
    <link rel="stylesheet" href="style.css" type="text/css">
  </head>
  <body>
    <div class="center">
      <div class="text">LOADING</div>
      <div class="ring">

      </div>
    </div>
  </body>
</html>
```
##style.css
```css
*
{
  margin: 0;
  padding: 0;
  font-family: verdana;
  background: #262626;
}
.center{
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.ring
{
  width: 300px;
  height: 300px;
  border-radius: 50%;
  /*box-shadow:1px 5px 2px #ff002e;*/
  background: transparent;
  animation: ani 2s linear infinite;
}
.text
{
  width: 300px;
  height: 300px;
  border-radius: 50%;
  color:#fff;
  position: absolute;
  text-align: center;
  line-height: 300px;
  top:0;
  left: 0;
  font-size:2em;
  background: transparent;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
}
@keyframes ani {
  0%{
    transform: rotate(0deg);
    box-shadow:1px 5px 2px #ff002e;
  }

  50%{
    transform: rotate(180deg);
    box-shadow:1px 5px 2px #18a401;
  }
  100%{
    transform: rotate(360deg);
    box-shadow:1px 5px 2px #033e8e;
  }

}
```

source: [here](https://www.codesnail.com/color-changing-shiny-loader-css/)