teleren/devto huggingface dataset:
Free Tool To Document Your API
Tags: api, documentation, tool, free
Published: 2020-05-29 21:26:44

Not seeing anything easy that I agreed with on the web, I went to Github and created a QND (Quick -n- Dirty) tool with Boostrap v.3.4.1 and jQuery to document your API. It's super easy to use if you know HTML. If you know Bootstrap (any version), then you might be able to accomplish some tasks sooner or better.

The tool provides a language chooser that you can customize in the upper right, a logo that you can swap, a title of "API Documentation" that you can change, a sidebar of API items (broke out by category title, then API links and sub links), a middle that contains tables and info about your API, and a ride sidebar that shows examples and URLs with automatic code formatting.

Try it out here: https://github.com/volomike/bootdox

This is an early, yet decent beta, and I'm sure there's some room for improvement. Feel free to fork it at Github, make some changes, and then I can integrate your changes.
What makes you decide to follow someone on Github?
Tags: github, opensource
Published: 2020-05-29 21:19:19

If you have an active Github account, I'm curious to know what makes you decide to follow someone on Github? Must she/he be someone you're working with or just appreciate one of the projects she/he created?

I've been building open source projects for about a year now but had a Github account since about 4 years now. Since then I have accumulated a whopping - wait for it - [25 followers](https://github.com/zoltanszogyenyi). More than half of them are my close friends 🙈

I feel like Github could expand some of the networking on Github, maybe even creating a news feed of sorts to promote new projects.

Some of the top projects I have contributed to are [Pixel UI Kit](https://github.com/themesberg/pixel-bootstrap-ui-kit) (216 stars), [Windows 95 UI Kit](https://github.com/themesberg/windows-95-ui-kit) (146 stars + got viral on HN) and [Neumorphism UI](https://github.com/themesberg/neumorphism-ui-bootstrap) (114 stars + #4 product of the day on PH).

What is your Github account, who and why do you follow and what are some of your awesome projects you have been working on? Let us know!
Trading stocks with machine learning
Tags: datascience, machinelearning
Published: 2020-05-29 21:07:59

**Description**

There are three main forms of securities trading: day trading, swing trading and long-term investment. I wanted to compare long term investment with swing trading for the same stock. For example, I believe in the product or service of some company XYZ and it shows stable growth with good potential to grow further. My question: can I get potentially higher return on investment(ROI) when I switch from long investment to swing trading, by buying low and selling high and repeat it multiple times for stock XYZ for long period. Also, will my risk change, with increasing reward?



**Modeling & Results**

To predict when to enter into the position, I used risk scorecard model, which based on the logistic regression. To get correct exit point, I applied trailing stop-loss. Due to the nature of the target, model picked up some local minima with order of less than 10 days, which created more false positives than I expected. However, with correct implementation of stop-loss, I minimized losses at real false positives entries. 

I observed, that choosing stocks without prior screening still could be profitable, but cannot beat the long term investment return.

However, individual models were able to beat long term investment. Model works better in conjunction with balanced trading strategy.
On the example of S&P 500 index, I did backtest from 05-2017 till 05-2020. I got ROI of 1.5 using ML model compare to ROI of 1.22 when just doing long investment.

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

**Conclusion**
It is possible to get higher ROI using ML model, than just staying in the long position. Risks of loss could be controlled by proper strategy.

**Future work**
I would like to select initially high potential portfolio to feed my model and optimize exit strategy using resistance/support lines individually per each stock. As well, I want to explore how to get better ROI than popular trading algorithms.
 
Link to [github repo](https://github.com/xs-abzal/Stock_Market_Project).

Note: This is a concept check project, which I did as part of my educational goal to learn time-series in data science. This blog is not a financial advise and I am not a broker or professional investor. Stock investing is risky and can lead to loosing money. Please consult a licensed stock advisor before investing.
SafeArea Widget (Widget of the week)
Tags: flutter
Published: 2020-05-29 21:03:42

{% youtube lkF0TQJO0bA %}

# SafeArea Widget ဆိုတာဘာလဲ?

ခုနောက်ပိုင်းထွက်လာတဲ့ ဖုန်းတွေမှာ အရင်ကလိုမျိုး screen က လေးထောင့်ကျမနေတော့ဘူး။ ဘောင်တွေက အကွေးတွေဖြစ်လာပြီး အပေါ်အောက် notch တွေပါလာတယ်။ တကယ်လို့ app ရေးတဲ့အခါ အဲ့လိုမျိုးတွေကို သတိမထားတဲ့အခါ ကိုယ့်ပြချင်တဲ့ content တွေ၊ user action တွေအတွက် button တွေဟာ ကြည့်မရ၊ နှိပ်မရနဲ့ user experience ကို အများကြီး အနှောင့်အယှက်ဖြစ်လာနိုင်တယ်။

![Smartphones with notches](https://i.ibb.co/Fq8KpR6/Smartphones-with-a-notch.jpg)

အဲ့အတွက် flutter မှာ SafeArea ဆိုတဲ့ widget ကိုသုံးပြီး အလွယ်တကူ အဲ့လိုပြဿနာတွေကို ရှောင်ရှားနိုင်ပါတယ်။

```dart
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: RaisedButton(
        child: Text("Click me"),
        onPressed: (){},
      ),
    );
  }
}
```
![Without SafeArea](https://dev-to-uploads.s3.amazonaws.com/i/y7mtpg38y0f1lgzprby7.png)

```dart
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: RaisedButton(
          child: Text("Click me"),
          onPressed: (){},
        ),
      ),
    );
  }
}
```
![With SafeArea](https://dev-to-uploads.s3.amazonaws.com/i/2e0shbmlssltmplzx473.png)

တကယ်လို့ကိုယ်က default ပေးထားသလို အပေါ်အောက် သူ့ဘာသာ detact လုပ်တာမျိုးမဟုတ်ဘဲ အပေါ်ကိုပဲ သတ်မှတ်ချင်တယ် အောက်ကိုပဲသတ်မှတ်ချင်တယ်ဆိုရင် top, bottom စတဲ့ သက်ဆိုင်ရာ ဘက်အခြမ်းကိုပဲ သတ်မှတ်ပေးလို့ရတယ်။ သူ့ minimum value တွေကို မကြိုက်ဘူးဆိုလဲ ကိုယ့်ဘာသာ minimum ဆိုပြီး သတ်မှတ်လို့ရပါတယ်။

```dart
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        top: true,
        bottom: false,
        minimum: EdgeInsets.all(32),
        child: RaisedButton(
          child: Text("Click me"),
          onPressed: (){},
        ),
      ),
    );
  }
}
```
![Custom value](https://dev-to-uploads.s3.amazonaws.com/i/qujlkdjgasg6yqlkgwui.png)
53: What it means to me 
Published: 2020-05-29 16:05:23

#*Why*
I chose JS, to become a front end engineer and the programming is about operating each logics, in order to grow up problem-solving skills, there is the only way to make an output: Get used to it
JavaScript is mostly used in the browser, enabling developers to manipulate webpage content through the DOM, manipulate data with AJAX and IndexedDB, draw graphics with canvas, interact with the device running the browser through various APIs, and more. JavaScript is one of the world’s most commonly-used languages, owing to the recent growth and performance improvement of APIs available in browsers.


---
#*How* 
Back to zero, I found that there can be an alternative way to actualize my imagination, which is adjusting the design mindset, sketch, and color on it. However, I discover that it was difficult to discuss how I think to others and the matter of fact in terms of web development is functioning. I got it, thus, I have to try out solving algorithm problems that have several conditions. The programmer is supposed to accept how the situation is to solve problems


---
#*The Goal*
It is simple, for me, I need time, to be in the new world, again, in an effort to overcome the new environment, This is the same process as practicing the new language with math, therefore, I want to be conscious how to encode, this time and be more patient then, consistency. Just one year ago, my goal was solving one problem during the course, and I made it, so it is not dreaming, I have been through it and Sure that I can be a programmer, while I was stuck in, I had to know what is going on my brain, could not move at all that turned out to make a decision to have the great opportunity to challenge self-taught learning to code. This time, it is time to encode, I really understand how to study programming is, and everything makes sense nowadays. I still believe that everyone can code, it is just taking lots of energies.

--- 
#*And* 
Programming is ultimately becoming the maker, to be a good maker, there are thousands of things I should know, and also the number of sources, picture the project what I like to build and find the fittable source, and get help! I am ready to get helped by google, people, and myself!
So
I will become a front end engineer. Unless I give up, there should be a way that I can be in the part of groups, where I can feel safe and be who I am! 🙌

--- 
#*Honesty*
The recording is two-faced, whether I can be honest or fake it, Let’s choose the honesty, That is the main reason what I love about coding, and wish to communicate with the computer, For Medium, I want to focus on building my algorithm problem-solving skills, besides that, It is okay, I am happy.
Serverless Eventing: Why You Need an Eventing Bus!
Tags: cloudnative, serverless, serverlesseventing, eventingbus
Published: 2020-05-29 22:52:25

---
title: Serverless Eventing: Why You Need an Eventing Bus!
published: true
series: Serverless Eventing
date: 2020-05-29 20:55:55 UTC
tags: CloudNative,Serverless,ServerlessEventing,EventingBus
canonical_url: https://thejaysmith.com/titles/blogroll/serverless-eventing-why-you-need-an-eventing-bus/
---

When we are talking about Serverlesss Eventing, we are talking about more than products and technologies. We are talking about a platform and best practices. One thing that I have not been mentioning in my blog posts is the importance of an "Eventing Bus". An "Eventing Bus" is a publisher-subscriber style communication system. Its primary[Continue reading "Serverless Eventing: Why You Need an Eventing Bus!"](https://thejaysmith.com/titles/blogroll/serverless-eventing-why-you-need-an-eventing-bus/)
A small collection of useful React hooks.
Tags: react, hooks, webdev, javascript
Published: 2020-05-29 20:50:28

I often have to find different implementations of the same things in projects. I singled out for myself the most common and leave links to ready-made solutions.
> ***REMARK*** 
This is not a typical article. Now I support the project on React and have encountered this. So I decided to share

## useFetch
**[useFetch](https://www.npmjs.com/package/react-fetch-hook)** - Fetch API in the implementation of the hook.

## useApi
**[useApi](https://www.npmjs.com/package/react-use-api)** - Same as useFetch, only made with axios.

## useWindowScrollPosition
**[useWindowScrollPosition](https://www.npmjs.com/package/@rehooks/window-scroll-position)** - Helps to track the position of the cursor.

## useLocalStorage
**[useLocalStorage](https://www.npmjs.com/package/@rehooks/local-storage)** - Various operations with local storage.

## useDocumentTitle
**[useDocumentTitle](https://www.npmjs.com/package/@rehooks/document-title)** - Allows you to set the title of the document.

## useOnlineStatus
**[useOnlineStatus](https://www.npmjs.com/package/@rehooks/online-status)** - Check the status of the network.

## useClippy
**[useClippy](https://www.npmjs.com/package/use-clippy)** - Adding to the clipboard.

## useScript
**[useScript](https://www.npmjs.com/package/react-script-hook)** - Allows you to dynamically download external scripts.

---

# Afterword.
Thank you very much for your attention. I hope it was useful for you 🙏
Follow me, it makes me write new articles 😌
I'd be happy for your feedback.
C u! 😉

<a href="https://www.buymeacoffee.com/lKsISqg" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-green.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" ></a>
#CodepenChallenge CRUD #VueJS Notepad
Tags: codepen, vue, showdev, javascript
Published: 2020-05-29 20:37:42

<p>Notepad or todo list designed for mobile.</p>

<p>You may add, edit, delete data.</p>

<p>I used native VueJS transition for transitioning UI elements.</p>

<p>The design has thick borders, and just plain white background to imitate the design of a paper, written by a pen.</p>

{% codepen https://codepen.io/takaneichinose/pen/ZEbNydz %}
100 Days of SwiftUI — Day 9
Tags: 100daysofswiftui
Published: 2020-05-29 20:33:34

---
title: 100 Days of SwiftUI — Day 9
published: true
date: 2020-05-29 20:33:07 UTC
tags: 100daysofswiftui
canonical_url: https://zeitschlag.net/100-days-of-swiftui-day-9/
---

[Ninth day](https://www.hackingwithswift.com/100/swiftui/9) of a hundred, ninth blogpost. I guess, you know the drill.

Todays topic was structs again. Paul explained memberwise initialzers, access control — `public` and `private` — and lazy and static properties. I learned, that when you have a struct with at least one private property, you're forced to write your own initializers, as you can't rely on the generated, memberwise initializer to initialize all values. Well, at least, as long as you don't provide default values for these private properties.

When you think about it, this totally makes sense. Also, for the first time, Paul provided lots of useful and intersting additional information, like [What’s the point of access control?](https://www.hackingwithswift.com/quick-start/understanding-swift/whats-the-point-of-access-control)

I'm getting used to attending this course daily. Oh, and it's fun! Thank you, Paul.

<!--kg-card-end: markdown-->
Do you have control?
Tags: swift, beginners
Published: 2020-05-29 20:29:46

1. What’s the difference between an outlet and an action?
     
     A- An Outlet is a way to reference part of your UI. For ex. when you need to change a button color or the text of a label you'd need to set up an outlet. An action on the other hand tells the UI what function to call.


2. When might a developer want to use control events other than the default event?

     A- The developer may want to use control events when there is some specific they need done.
I Wrote a BrainF*** Interpreter and REPL in TypeScript!
Tags: esolangs, typescript, npm, showdev
Published: 2020-05-29 20:17:56

_Photo by [Robina Weermeijer](https://unsplash.com/@averey?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/brain?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)_

---

This was my first time ever coding in TypeScript, my first npm package, and more. Let me know if you have any comments or suggestions!

Try out the sample code on the GitHub repo!

{% github https://github.com/awwsmm/BrainScript %}
Generic interface check function in TypeScript
Tags: typescript
Published: 2020-05-29 20:17:15

There are some situations that we may have several interfaces that object will be described with, like this

```javascript
const obj: Interface1 | interface2 | interface3
```

And we have some function that we want to do specific logic for each interface

```javascript
function doSomething(obj: Interface1 | interface2 | interface3) { ... }
```

In this situation the first problem will be how check if object have `Interface1` or something else, for this goal we need some helper function to do this for us, and what is better than make it generic, so we can have reusable interface check function.

But in this solution we need to pass function specific property that will always be defined inside our object but there is no similar property in other interfaces.

So, our interface check function will be like this
```javascript
function checkInterface<T>(object: T, uniqueProp: string): object is T {
 return `${uniqueProp}` in object;
}
```

Okay, now in `doSomething` function we do this thing safely now
```javascript
function doSomething(obj: Interface1 | Interface2 | interface3) {
if (checkInterface<interface1>(obj, 'unque_prop')) {
...
} else if ....
}
```

That's it :)

Now we can do specific operations by checking object interface
An App Maybe?
Tags: swift, beginners
Published: 2020-05-29 20:07:26

1. For the app you’re thinking of, what’s an example of an input the brain would take?

    A- if productLife <= expirationDate {
print("this is still good")
} 

2. What’s an example of a result it would return to display in the user interface?

   A- This would result being told which food is still ok to eat.
3 Easy Automation Projects Anyone Can Deploy in Minutes
Tags: productivity, beginners
Published: 2020-05-29 20:07:09

In the [article, I explain how to:](https://www.integromat.com/en/blog/no-code-automation-for-beginners/)

- Automatically forward Gmail emails (based on sender, or content of the email)
- Get notifications for new files in selected Google Drive folders
- Get (or send) the daily weather forecast for one or more locations

If you are curious about app integrations and basic automation, this can be a good place to start. Plus, it's free, and you can actually see the results in minutes. 

Enjoy!
How to create a JavaScript scatter plot (visualizing cat/dog popularity in the US)
Tags: webdev, dataviz, javascript, tutorial
Published: 2020-05-29 19:46:56

---
title: How to create a JavaScript scatter plot (visualizing cat/dog popularity in the US)
published: true
description: Data visualization developer Wayde Herman explains how to build a JS Scatter Plot chart module representing 'Cat vs Dog Popularity in US' data for illustration along the tutorial.
tags: #webdev, #dataviz, #javascript, #tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/yob1a2e0hrlrokieazy8.jpg
canonical_url: https://www.anychart.com/blog/2020/05/27/scatter-plot-js-tutorial/
---
A scatter plot is a great way to visualize data. In this chart type, data is represented as points on a Cartesian plane where the X and Y coordinate of each point represents a variable. Scatter charts let you explore the relationship between two variables, detect outliers in the data set, and identify trends. They are among the most commonly used data visualization techniques and a must have for your data visualization development arsenal.

**This tutorial teaches how to build your very own interactive scatter plot charts using JavaScript.**

Ever wondered whether the population of the United States of America were dog people? And you are just about to find out! To help you learn more about building scatter plots, let's take the Cat vs Dog Popularity in US dataset from Data.world. It contains the percentage of homes with cats and dogs in the United States...

[Check out the tutorial here](https://www.anychart.com/blog/2020/05/27/scatter-plot-js-tutorial/).
JavaScript Equality Checks
Tags: javascript, webdev
Published: 2020-05-29 19:46:14

### Some Fun Equality Checks In JavaScript

There are mainly 3 ways to check the value equality in JavaScript. You already know two of them. There is a fun third one, `Object.is().`
```js
- Strict Equality: a === b (triple equals).
- Loose Equality: a == b (double equals).
- Same Value Equality: Object.is(a, b).
```

```js
// Zero, look closely!
-0 == 0; // true
-0 === 0; // true
Object.is(-0,0); // false
```

```js
// One, an obvious one!
-1 == 1; //false
-1 === 1; // false
Object.is(-1,1); // false
```

```js
// NaN, look closely again!
NaN == NaN; // false
NaN === NaN; // false
Object.is(NaN,NaN); // true
Object.is(NaN, 0/0); // true
```

```js
// String, one more obvious one!
'foo' == 'foo'; // true
'foo' === 'foo'; // true
Object.is('foo', 'foo'); // true
```

```js
// Array
[] == []; // false
[] === []; // false 
Object.is([], []); // false
```

```js
// Objects
var foo = { a: 1 };
var bar = { a: 1 };
Object.is(foo, foo); // true
Object.is(foo, bar); // false

// One more, for better clarity
let banana = {};
let cherry = banana;
let chocolate = cherry;
cherry = {};

Object.is(banana, cherry); // false
Object.is(cherry, chocolate); // false
Object.is(chocolate, banana); // true
```

```js
// Null
null == null; // true
null === null; // true
Object.is(null, null); // true
```
***

### Quick Recap
This tells us `Object.is()` is way more superior check than `===` in JavaScript. It handles two special cases where `===` fails horribly.
```js
// Special Cases
-0 === 0; // true
Object.is(0, -0); // false

NaN === NaN; // false
Object.is(NaN, NaN); // true
```
***

### Additional: Implementation of `===` Function strictEquals
```js
function strictEquals(a,b){
  // handle special cases, else return the right value!
  if (Object.is(a,NaN) || Object.is(b,NaN)) return false;
  if (Object.is(a,-0) && Object.is(b,0)) return true;
  if (Object.is(a,0) && Object.is(b,-0)) return true;
  return Object.is(a, b);
}
```

Ciao!
Adding scripts to every page of a docusaurus project
Tags: webdev, javascript, tutorial
Published: 2020-05-29 19:44:09

If you aren't familiar with docusaurus (v2), it's an open source static site generator. It's mostly used for documentation, but it can also be used for blogs or any other static site.

I used it to build a very basic info page for kiss.js [https://kissdev.io](https://kissdev.io) and I wanted to add simpleanalytics to it. This requires me to add a little js script to every site that should be tracked. 

Docusaurus doesn't expose it's index.html like eg create-react-app, so it's not trivial to find a place to paste your tracking script.

Here is how I did it:

run in you project folder:
```
npm run swizzle @docusaurus/theme-classic Footer
```
(of course the command changes if your project is not based on theme-classic)

This command will download the code of the default Footer used on every page and copy it into your project directory.

You can now make changes to the footer component. Just paste your scripts right before the closing </Footer> tag.