teleren/devto huggingface dataset:
Modal Bootstrap; Handle Refresh Url When Close Modal Video
Tags: tutorial, javascript, bootstrap, webdev
Published: 2021-01-01 10:58:20

When I use the **Bootstrap** modal to display the video data, it works successfully, but the problem starts when I play the video, and start closing the video, it turns out that the video is still playing behind the scenes. Here are the things I did to deal with this problem.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hq5x1gb718uyzd7r260a.png)

### Purpose
Create a *script* js that handles *refresh url* when the video is closed and *autoplay* when the modal button is pressed.

### Prerequire 
- Understand usage [modal](https://getbootstrap.com/docs/4.0/components/modal/) with Bootstrap.
- Javascript: useage of [foreach](https://www.w3schools.com/jsref/jsref_forEach.asp) array.

### 1. Modal Identification
In my `case` each modal has their own `id` so I collect them into one in _array_ like the following.

```js

var modals = ["#thestory", //name modal target
              "#theprophecy",
              "#theannouncement",
              "#theincarnation",
              "#promo_kka",
              "#promo_kingstone",
              "#kingstone_intro",
              "#kingstone_digital",
             ];
```

### 2. Script Handle Loop
This looping script takes advantage of the identical parameter `id` in the _array_ that step one does. And with the help of jquery we do _set open and close_ modal respectively.

```js
modals.forEach(myFunction);

function myFunction(item) {
   //berjalan ketika modal close agar video di reload dan tidak play ketika close
   $(item).on('hidden.bs.modal', function (e) {
    $(item + " video").attr("src", $(item + " video").attr("src"));
   });

   //berjalan ketika modal open, agar play automatis
   $(item).on("shown.bs.modal", function (e) {
    $(item + " video")[0].play();
   })
}
```
***DONE***

ideas for the future, retrieve `id` with selector using `class` definition.
Design a Simple Navbar with Cool Hover Effect in HTML, CSS and JavaScript [Video Tutorial]
Tags: tutorial, ux, javascript, css
Published: 2021-01-01 10:54:44

{% youtube mjqvL1CiOjU %}
In this Video, you will be able to learn how to design a Simple Navbar with a Cool Hover Effect!<br>
You can Support me by Subscribing my Channel and Liking my Videos at [https://www.youtube.com/channel/UC_x91mqbyHX4-meYOpMxyUA](https://www.youtube.com/channel/UC_x91mqbyHX4-meYOpMxyUA?sub_confirmation=1)
<br>
Click the Bell icon to never miss any Upcoming Video !
Manage multiple GitHub accounts on one Windows machine (HTTPS)
Tags: github, git, productivity, tooling
Published: 2021-01-01 10:42:02

When you starting to work on commercial projects, often you have to manage multiple GitHub accounts. For comfortable push/pull your code between repositories from different accounts, we can youse simple and efficient setup.

Let's say you previously use git on your machine and configure git global config file. To check it open the terminal and :

```javascript
git config --global -e
```
It opens you editor, and you may see something like this:

```javascript
[user]
	email = yourEmail@gmail.com
	name = Your_Name
...
```
And this is great because you can push your code to GitHub account without entering credentials every time.
But what if it needs to push to repo from another account? In this case, git will reject with 403 err, and you must change your global git credentials. To make this comfortable lat set storing a repo name in a credential manager:

```javascript
git config --global credential.github.com.useHttpPath true
```

to check it open config one more time
```javascript
git config --global -e
```

you will see new config lines

```javascript
[credential]
	useHttpPath = true
...
```
The is it. Now when you first time push to any account you will see a pop-up 
![Screenshot_1](https://dev-to-uploads.s3.amazonaws.com/i/c2qbzgyma6el642yqkqg.png)

Enter specific for this repo account credentials, and this will "bind" this account for the repo. And so in your machine, you can specify as many accounts/repos as you want.

For a more expanded explanation you can see this cool video that I found on youtube:
https://youtu.be/2MGGJtTH0bQ
Chuyên Ván Gỗ MDF TPHCM
Tags: vanmdf, vanmfc
Published: 2021-01-01 10:25:10

VÁN MDF - VẬT LIỆU TRANG TRÍ NỘI THẤT HOÀN MỸ
Ván MDF là lõi ván được sử dụng nhiều nhất hiện nay vì bề mặt rất dễ gia công phủ melamine, veneer, sơn trắng hoặc phủ giấy keo. Ưu điểm nổi bật của ván mdf chính là màu sắc phong phú, đa dạng, giá rẻ. TalaB là tổng kho ván có sẵn 100m3 gỗ mdf từ 2,5mm đến 25 mm theo tiêu chuẩn e2 đến carb p2 đáp ứng yêu cầu cho thị trường.


BẢNG GIÁ VÁN MDF PHỔ BIẾN NHẤT
- Ván MDF 2,5 MM : 60.000 / tấm.
- Ván MDF 2,5 MM phủ 1 mặt melamine: 130.000/tấm.
- Ván MDF 8 MM : 140.000 / tấm.
- Ván MDF 8 MM phủ 1 mặt melamine: 210.000 / tấm.
- Ván MDF 8 MM phủ 2 mặt melamine: 280.000 / tấm.
- Ván MDF 17 MM : 245.000 / tấm.
- Ván MDF 17 MM phủ 1 mặt melamine: 350.000 / tấm.
- Ván MDF 17 MM phủ 2 mặt melamine: 420.000 / tấm.

Ván MDF ứng dụng sản xuất bàn ghế, tủ kệ, tủ bếp..

ỨNG DỰNG VÁN MDF

Ván MDF là vật liệu được sử dụng sản xuất nội thất nhà ở, căn hộ chung cư như tủ bếp, bàn ghế, quầy rượu, tủ sách, giường ngủ, cửa gỗ, sàn gỗ... MDF có bề mặt mịn, dễ gia công phủ bề mặt vân gỗ tư nhiên rất đẹp. Chúng tôi đã đầu tư trang thiết bị máy móc để phủ mdf bằng melamine, veneer hoặc poly cao cấp được nhiều khách hàng trên cả nước đặt hàng và đánh giá cao chất lượng thành phẩm.
MDF có rất nhiều loại phân theo tính chất vật lý cơ học, thông số kỹ thuật về độ dày kích thướt, phân theo tiêu chuẩn về nồng độ formaldehyde. Hiện nay trên thị trường có 3 loại MDF chủ yếu đó là MDF thường, MDF chống ẩm (Hmr), HDF.
Tại nhà phân phối Lai Trần, Bạn sẽ được cung cấp sản phẩm giá tốt, đầy đủ các loại tiêu chuẩn từ E1, E0, E2, Carb P2. Dịch vụ cắt cưa, phủ melamine, veneer, sơn trắng phục vụ nhu cầu của khách hàng. Kho hàng của chúng tôi có sẳn các quy cách, kích thướt cho bạn lựa chọn.

QUY CÁCH VÁN MDF

+ Kích thước tấm MDF
- 2400mm x 1200mm, 2400mm x 1800mm, 2700mm x 1200mm, 3600mm x 1200mm, 3600mm x 1800mm.
+ Độ Dày
- 3mm, 4mm, 4.75mm, 6mm, 8mm, 9mm, 12mm, 17mm, 18mm, 25mm, 32mm.

TaLaB là một trong nhà cung ứng gỗ công nghiệp hàng đầu với giá hành, chất lượng dịch vụ luôn là trọng tâm phát triển bền vững. Sản phẩm chủ đạo của chúng tôi là dòng ván mfc và mfc chống ẩm. Sản phẩm của chúng tôi đã có mặt tại hàng trăm công trình nội thất căn hộ chung cư và là đối tác của nhiều nhà sản xuất nội thất hàng đầu. Mọi thông tin liên hệ 0902 096 145 để biết thêm thông tin.
Nguồn: https://www.vanmfc.net/p/van-mdf.html
Lightweight real-time server monitoring with Node.js
Tags: node
Published: 2021-01-01 10:18:59

I've made for my own needs a very simple and lightweight real-time monitoring tool, it's open source. You can check it here: https://github.com/elestio/ws-monitoring

![ws-monitoring](https://cdn.terasp.net/CDN/ws-monitoring.jpg "ws-monitoring")

Features:

* Super light real time monitoring tool / Small CPU/RAM Usage
* Easy to run once or as a service
* Click on tiles to enable or disable graphing for a metric
* REST & Websocket APIs (soon)
* Responsive design & Embeddable

My goal is not to compete with Netdata or other advanced tools but to have something working in few MB rather than few GB

Also frontend is Vanilla JS under 10KB and backend is 300 lines of code. That would be a good start for someone wanting to learn about server metrics, websockets and simple charts in SVG.
Ephemeral Purely Functional Data Structure and Linear Type: Again
Tags: haskell
Published: 2021-01-01 09:52:10

The Japanese version is at [はてなブログ](https://kakkun61.hatenablog.com/entry/2021/01/01/%E7%B6%9A%E3%83%BB%E5%88%B9%E9%82%A3%E7%9A%84%E7%B4%94%E7%B2%8B%E9%96%A2%E6%95%B0%E7%9A%84%E3%83%87%E3%83%BC%E3%82%BF%E6%A7%8B%E9%80%A0%E3%81%A8%E7%B7%9A%E5%BD%A2%E5%9E%8Bl).

----

Additional information for [the previous article](https://dev.to/kakkun61/ephemeral-purely-functional-data-structure-and-linear-type-489j).

{% link kakkun61/ephemeral-purely-functional-data-structure-and-linear-type-489j %}

# No loopholes using `pure`

> Meh, there is a loophole to escape from the constraint with `pure`.

I wrote it carelessly, I was noticed good information on [Reddit](https://www.reddit.com/r/haskell/comments/kltjla/ephemeral_purely_functional_data_structure_and/ghhnkgh?context=3).

> I think the solution to the problem with `empty` might be to use the [`Ur`](https://github.com/tweag/linear-base/blob/7e5504f87c15e2d3a5096b4f3b86d8a618cf6fb0/src/Data/Unrestricted/Linear.hs#L61) (for "unrestricted") datatype from linear-base:
>
> ```haskell
> empty :: (Queue a #-> Ur b) #-> Ur b
> ```
>
> Trying to run `empty Ur` shouldn't typecheck, because the `Ur` constructor is not linear. This seems to be an idiom used in [other places](https://github.com/tweag/linear-base/blob/7e5504f87c15e2d3a5096b4f3b86d8a618cf6fb0/src/Data/Vector/Mutable/Linear.hs#L114) of linear-base.

`Queue a` cannot get escaped because of making the type of the return value `Ur b`. Passing `Queue a` to `Ur` is not allowed because the parameter of `Ur :: a -> Ur a` may be used many times. How smart!

# No need for CPS

I found that functions other than generators (`empty` in this case) are no need for CPS.

When applying a linear arrow to a value that is a parameter of another linear arrow, it seems that its return value has linearity too. I must check typing rules about this.

{% twitter 1340894183578431489 %}

In other words, It is not necessary to make `enqueue` etc. CPS because their return values must be used once when applying them in a continuation `Queue a #-> Ur b` of `empty`.

```haskell
null :: Queue a #-> (Ur Bool, Queue a)
null (Queue l m) = (Ur (P.null l), Queue l m)

enqueue :: a -> Queue a #-> Queue a
enqueue a (Queue l m) = check l (a:m)

dequeue :: Queue a #-> (Ur (Maybe a), Queue a)
dequeue (Queue (a:l) m) = (Ur (Just a), check l m)
dequeue (Queue l m) = (Ur Nothing, Queue l m)
```

That being so, user codes are as the following. It was easy to write/read if the “let” expression could be used.

```haskell
  it "empty → enqueue → dequeue" $ do
    let
      f :: Queue Int #-> Ur Int
      f q =
        enqueue 0 q PL.& \q ->
        dequeue q PL.& \(Ur (Just a), q) ->
        q `lseq` Ur a
      Ur a = empty f
    a `shouldBe` 0
```
How to create 5 Cool css only Line effects
Tags: css, html
Published: 2021-01-01 09:38:03

Lines are always a great way to design our web pages, and lines ain't meant to be boring
<pre>
<code>
//Html
&lt;div class="line"&gt;&lt;/div&gt;

// Css
.line {
 border-bottom: 2px solid #ccc; // lines shouldn't be this boring
}
</code>
</pre>
<h1>
<a href=" https://spruce.com.ng/blog/how-to-create-5-css-only-line-effect.html">
5 css only line effect </a 
</h1>

<h2>
Adding line to a text
</h2>
<figure>
<img src="https://spruce.com.ng/assets/img/posts/line-article.jpg" alt="line added to header text from smashingmagazine" />

<figcaption>
line added to header text from smashingmagazine
</figcaption>
</figure>
Ever wanted to create something like that? 😊

What if I told you that this can easily be achieved with a few lines of css

<pre>
<code>
 // HTML code
   &lt;div class="line-before"&gt;
     &lt;span class="line-before__inner"&gt;
     Latest posts
    &lt;/span&gt;
    &lt;/div&gt;

// Css 
.line-before__inner {
 position:relative;
 display:block;
 width:100%;
 color:#333;
 background-position:center;
 z-index:2;
 padding-left:calc(100px + 1em);
}

.line-before__inner::before {
 content:'';
 position:absolute;
 display:block;
 width:100px;
 height:1px;
 background-color:currentColor;
 left:0;
 top:50%
} 
</code>
</pre>

And there you have, as simple as that...

<h2>
Other cool css only Line effects
</h2>
<p>
<a href=" https://spruce.com.ng/blog/how-to-create-5-css-only-line-effect.html#highlight-text">
Highlight Text
</a>
</p>
<p>
<a href=" https://spruce.com.ng/blog/how-to-create-5-css-only-line-effect.html#line-both-side">
Add line to both side of an Element
</a>
</p>
<p>
<a href=" https://spruce.com.ng/blog/how-to-create-5-css-only-line-effect.html#wavy-line">
Css only Wavy line
</a>
</p>
<p>
<a href=" https://spruce.com.ng/blog/how-to-create-5-css-only-line-effect.html#line-hover">
Animate line on hover
</a>
</p>

<blockquote>
This article was originally written <a href=" https://spruce.com.ng/blog/how-to-create-5-css-only-line-effect.html">here</a>,
Find me online <a href="https://spruce.com.ng/about/">here</a>
</blockquote>
Text Adventures made easier, with Quest 6
Tags: javascript, quest6, gamedev
Published: 2021-01-01 09:34:56

Recently, I've been wanting to work on a text adventure, partly due to my fondness of MOOs, and slight disappointment of some of their lacking features. If you're like me, and love making fun little games like this without having to spend too long getting the skeleton of everything set up, I'd highly recommend checking out [Quest 6](https://github.com/ThePix/QuestJS).

Quest 6, unlike its predecessors, allows you to upload your creation anywhere, as a HTML5 game, rather than being restricted solely to the developer's site, like in previous versions. It remains very much the same as its predecessors, however, when it comes to its development tools. When you download the initial zip file, you're given the very basics of your game right out of the box - Functions for creating rooms, objects, characters, and even a default starting room to help you figure things out. Within minutes, you're already able to create an entire game (albeit a basic one, if it's your first time) and upload it to a site of your choice. There's even a wiki to help you figure things out.

I never was that great at writing posts like this, and I'm not too sure what else to talk about, so I guess all I can say is go check it out!
Sending Email from Azure
Published: 2021-01-01 09:11:42

First, I tried creating an account directly from Azure and that did not work for me due to a billing issue. 

So I ended up first setting an account up with Sendgrid (a free account with up to 25K emails per month...way more than I will need for now). I started by checking out the integration guide - C# for me: 

https://app.sendgrid.com/guide/integrate/langs/csharp

The first step there was adding SendGrid Nuget Package

![Install SendGrid Nuget package](https://dev-to-uploads.s3.amazonaws.com/i/wkvk7t20mz6q3nc4x07l.PNG)
React Native Dynamic Top Button Package
Tags: reactnative, javascript, node, react
Published: 2021-01-01 09:03:46

Hello everyone, I just created a new package for React Native, this is the fourth time.  This package is used to perform page control without having to create a new navigation route.  It's quite simple. for now I'm not doing it using a flatlist/scrollview so I limit it to four buttons for the four components to render.  there are still many flaws in this package.  I hope this help you guys.  I let you do PR also to make better.  please let me know if something goes wrong. Thank You.
(More) Feedback for HotTea.
Tags: javascript, help, webdev, hottea
Published: 2021-01-01 08:57:23

Thank you for your original feedback on HotTea (to those whom contributed on https://dev.to/baenencalin/hottea-v0-12a-released-and-i-want-feedback-hep).

But I'd like more feedback. Maybe I should have clarified, but I was hoping for feedback on the library's features.
I want to get a good idea of what features people do and don't want in HotTea, and to see if said (and certain) features are useful or not, so I can cherry pick the good from the bad, and so I can make optimizations.

So, to those reading, it would be much appreciated if you would test my library, report bugs, and give feedback.


<div alt="Thanks for reading(, testing, and providing feedback)! Cheers!">
##<b><center><b>Thanks for reading(, testing, and providing feedback)!<br/>Cheers!
</div>
Happy New Year 2021
Tags: opensource, github, developer
Published: 2021-01-01 08:55:00

A new year is the perfect window of opportunity to rejoice the things you have in life and preparing yourself for upcoming challenges. Welcome Happy New Year Dev Family !!! 

LinkedIn : https://www.linkedin.com/posts/codetrophs_newyear2021-codetrophs-activity-6750684560691933184-2Ic0
Elixir base arithmetic operations 🧪
Tags: elixir, webdev, backend, language
Published: 2021-01-01 08:47:00

Performing math operations and calculus is a very common thing to do with any programming language. Elixir offers several operators to help us work with numbers

Performing math operations and calculus is a very common thing to do with any programming language.

Elixir offers several operators to help us work with numbers.

* Addition (+)
* Subtraction (-)
* Division (/)
* Remainder (%)
* Multiplication (*)
* Exponentiation (**)

## Addition (+)

```elixir
 1 + 2
# => 3
```

But the + operator doesn't serve as string concatenation if you use strings, so pay attention:

```elixir
"asdas" + "asdas"
# => ** (ArithmeticError) bad argument in arithmetic # expression: 'asdas' + 'asdas'
#     :erlang.+('asdas', 'asdas')
```

## Subtraction (-)

Same as addition. 

```elixir
3-2
# => 1
```

## Division (/)

Returns the quotient of the first operator and the second:

Take a note, the result is a **Float** type, not an **Integer**. Operator / always return a Float, but if you want to do Integer division use div function.

```elixir
20 / 5 
# => 4.0 (not a 4)

div(20,5)
# => 4
```

If you try to divide by 0. You'll get an error.

```elixir
1 / 0

# => ** (ArithmeticError) bad argument in arithmetic 
# expression: 1 / 0
#    :erlang./(1, 0)
```

## Remainder (rem)

The remainder is a very useful calculation in many use cases:

```elixir
rem 20, 5
# => 0

rem 20, 7
# => 6

rem 1, 0
# => ** (ArithmeticError) bad argument in arithmetic #expression: rem(1, 0)
#    :erlang.rem(1, 0)
```

## Multiplication

Multiply two numbers

```elixir
1 * 2 # => 2
-1 * 2 # => -2
```

## Exponentiation (**)

Raise the first operand to the power second operand. You can use [math module](http://erlang.org/doc/man/math.html)

```elixir
:math.pow(2, 3)
# => 8

:math.pow(3, 2)
# => 9
```

One exception I found is that when raising a base number to an exponent, you probably don’t want to use the :math.pow/2 function.

```elixir
:math.pow(42, 909)
# => ** (ArithmeticError) bad argument in arithmetic # expression
#    (stdlib) :math.pow(42, 909)
```
How I started generating passive income
Tags: productivity, money, income, finance
Published: 2021-01-01 08:45:03

## Introduction

I believe, in this day and age, everyone should have a passive source of income, certainly when job security holds lesser value with each passing day. As I already had a blog where I write about tech, I thought to monetize the same. I knew that it won't bring me loads of cash, not initially for sure. But, something is better than nothing. So, what did I do? I started looking for possible options to monetize by blog keeping in mind that I do not want to bombard the visitors with loads of ads. Because at the end of the day, I still want to help them by sharing what I've learned so far.

## The search for possible options

As soon as you type the words "how to monetize your blog" in Google, you will be hammered by different opinions from innumerable results. After analyzing different methods, I finally decided to go with [`adf.ly`](https://join-adf.ly/23979463) URL shortener service. Ok, I hear you say "You're just promoting", and I agree. I will promote a service if it helps me in achieving my goal.

## Why adf.ly?

Because it allows me to control the placement and nature of ads. Even though it's selling point is that it's a URL shortener service which displays ads on shortened URLs, it provides an option to add banner ads, pop ads, etc., which an average ads platform offers to only websites with huge traffic. You can earn anywhere around $1-$10/1000 views, depending on the traffic source. It also provides $1 as a bonus on your first 100 views and a chance to earn commission via referral programs. I mean, what's not to like?

So if you genuinely want to build a passive income, my advice would be to at least try it out.
Learn web development in 2021

Tags: webdev, javascript, 100daysofcode, node
Published: 2021-01-01 08:43:58

- HTML, CSS
- CSS frameworks
- JS
- DOM
- UI and UX!
- Git and GitHub
- Deployment
- Front-end Frameworks
- Server-side development
- Jamstack
- Node.js
- Deployment Heroku
- Security management
- SQL vs NoSQL
- Databases
- REST
- PWA
Alleviate, Daily Blog and Relaxation app- Part 2
Tags: dohackathon, flutter, docker
Published: 2021-01-01 08:17:37

From the previous week's workflow, there are massive changes done to the UI and working of the app. New technologies and frameworks have been added to the app, namely:

* Cloud Firestore
* Google Authentication
* Google Speech to Text API
* Sound Stream

## Cloud Firestore

Cloud Firestore is used to store all user details, right from blog to voice notes, and for faster retrieval and display of data, if the user needs any.

## Google Authentication

This will be used to create Sign-in with Google feature, for seamless logging in without hassle. One-tap formula to get away right into the app has always proved to be really powerful, especially when it comes to creating an account and then signing in, which definitely isn't really a great thing for the user to do.

## Google Speech to Text API

One of the best Speech to Text API, in my opinion. This will be used to convert voice notes into text on the app, and with the power of GCP, the API is also capable of taking input from more than 20 languages.

## Pages
#### Home Page
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kijvg46gmyizc4my92n3.png)
The Home Page displays "Daily Moods" along with a motivational quote.

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

Analysis of data based on user mood is displayed for better orientation and understanding

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

Using live speech to text converter to get values as a text instead of having to type it all. Speaking out feelings is considered more effective than writing it.

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

The usual blogging mechanism.

#### I really hope to complete the app by next week and then completely focus on deploying it to Digital Ocean.