teleren/devto huggingface dataset:
Microsoft Word Users Are Stuck in the 90s and Don't Know How To Collaborate
Tags: collaboration, teamwork, word, googledocs
Published: 2021-05-27 07:36:21

Disclaimer: This is a highly opinionated piece. 

- I worked for Microsoft in 1997 for 6 months and was fired
- I do respect the company, especially since Satya Nadella has taken over as he seemed to modernise the organisation

Although I think they’ve built a great company, Microsoft entirely missed the cloud in the early years. But by sheer market dominance Word as a product has persisted.

I totally feel sorry for people who use Word. Not that there's anything wrong with the actual software, it probably works very well. The part that makes me feel sorry for people who use Word is that they don’t know how to collaborate.

They live on little islands where their document is the be-all end-all of existence. Any changes will always need to be made by them, for them, on behalf of them. Revisions? What revisions? 

Does anyone else want to make a change? Maybe some comments or a suggestion? This could take a while. It has to be saved first. Then it has to be attached. Then it has to be emailed as an attachment. Then maybe it needs to be printed out and scribbled on. Then maybe it must be handed back. Or maybe a new version must be created, saved, attached, and sent back. Rinse, repeat, rinse.

I truly cannot see how a modern organisation can agree that people use Word. How on earth can you operate and create constant improvement in any organisation by restricting people with Word and forcing them into this tortoise like workflow? Do people really think their documents are so great that it doesn’t need to be collaborated on? Is this the arrogance of the non-team worker?

What I’ve learnt is that some people just don’t get the cloud. It’s either that, or they don’t get digital teamwork. Or maybe working with other people is so low on their priority list that they simply can’t do it.

For many years I’ve thought it’s a generational problem, but since then I’ve learnt that even kids of today do not embrace collaboration on documents. For some, it’s privacy, and that I respect. For others, it just doesn’t come on the radar.

Before you say that Office 365 allows collaboration, please quickly show me anyone actually using it collaboratively. I’ve yet to see anyone but if you know of someone leave me a comment as I need some hope.

My suggestions?

- Embrace collaboration to build an agile organisation
- Share documents, and share them early
- Learn to digitally work in a team.
- Google’s software (I don’t know what it’s called anymore because it changes names every few years) allows collaboration. I’m sure there are other tools too, but perhaps get your feet wet here first.

And if you still don’t understand collaboration in the cloud, good luck! Enjoy that Island.
Laravel Select2 Dynamic Autocomplete Search Tutorial

Tags: laravel, programming, php, tutorial
Published: 2021-05-27 07:29:55

<p>hi Dev,</p>

 <p>In this Article, i will explicate you how to select2 dynamic autocomplete search utilizing laravel I will engender auto consummate utilizing Select2 and Ajax in laravel. we will show auto consummate utilizing select2.js in laravel. you can facilely engender auto consummate utilizing select2 and ajax in laravel.</p>

 <p>I will give you full example of select2 ajax in laravel you can check that code and follow my all step.</p>

more..

https://codingtracker.blogspot.com/2021/05/laravel-select2-dynamic-autocomplete.html
Text-Case-Converter Using Python
Tags: python, beginners, productivity
Published: 2021-05-27 07:24:22

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uxdgui4fuedpr0ecppow.PNG)

A Small Utility Made Using Python For Quickly Editing Text Cases Comes Handy When Dealing With Large Text

https://github.com/LP-Codes/Text-Case-Converter-Editor
Easily switch PHP versions with PHP Monitor
Published: 2021-09-18 17:48:17

---
title: Easily switch PHP versions with PHP Monitor
published: true
date: 2021-05-27 07:19:51 UTC
tags: 
canonical_url: https://dcblog.dev/easily-switch-php-versions-with-php-monitor
---

 ![Easily switch PHP versions with PHP Monitor](https://dcblog.dev/assets/images/blog/tools/php-monitor.png) 

When you have multiple versions of PHP installed you may want to switch which version is being used. For instance, I often need to switch from PHP 7.4 to 8.0, you can do this via the command line but there is a Mac-only tool called PHP Monitor that gives you a GUI to make switching versions easy and gives you more options, PHP Monitor lives on your toolbar so it's only a click away.

PHP Monitor describes itself as:

> **PHP Monitor**  (or phpmon) is a lightweight macOS utility app that runs on your Mac and displays the active PHP version in your status bar. It's tightly integrated with [Laravel Valet](https://github.com/laravel/valet), so you need to have it set up before you can use this.

![](https://dcblog.dev/assets/images/blog/tools/php-monitor.png)

For installation instructions visit [https://github.com/nicoverbruggen/phpmon](https://github.com/nicoverbruggen/phpmon) don't forget to star the repo.
HTML : Specify a default URL and a default target for all links on a page
Tags: html, tutorial, codenewbie, webdev
Published: 2021-05-27 07:11:02

The HTML `<base>` element specifies the base URL to use for all relative URLs in a document. There can be only one `<base>` element in a document.

Full information at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

# Routing or URL rewriting with base tag

Let's say you are located at:
```
www.domain.com/folder/subfolder/
```
Now if in your index.html file, you have the anchor tag to redirect to test.html as -
```html
<a href="test.html">Click here</a>
```
Then this anchor will be regular anchor and will leads to
```
www.domain.com/folder/subfolder/test.html
```

Now if you will add `base` tag in your index.html's `head` tag as -
```html
<base href="http://www.domain.com/" />
```
Then your same anchor 
```html
<a href="test.html">Click here</a>
```
now will lead to 
```
www.domain.com/test.html
```

<a href="https://www.buymeacoffee.com/rkycom" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>

With all that being said, I highly recommend you keep learning!

Thank you for reading this article. Please feel free to connect with me on [LinkedIn](https://www.linkedin.com/in/www-rajeshkumaryadav-com/) and [Twitter](https://twitter.com/rky_com).
Using React's forwardRef: Component Name Missing in DevTools
Tags: react, javascript
Published: 2021-05-27 07:07:35

Hey there! Welcome to my first post =)

**A quick note before I get started on the real meat of this post:**
I am a front-end web developer who is currently learning to be a better React developer. There's so much to the world of JavaScript and React, so if you ever read any of my posts and have feedback, please leave a comment and let me know. Constructive feedback and advice is always welcome!

---

Tonight I got to use React's forwardRef method to get form input values in child components. It was actually pretty easy when I figured it out, and [the React docs for the forwardRef method](https://reactjs.org/docs/forwarding-refs.html) were simple to skim through and understand.

Initially, the one thing that I didn't like is that the method hides information about the component being wrapped in the forwardRef method. I wasn't able to see the component name in my DevTools.

This is what my code looked like initially:
![the contents of the FormInput component wrapped in the forwardRef method](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/47vrgwd1x8lbrw8sf49k.png)

Thankfully, because React is awesome like that, the documentation had a solution for me! I simply had to create a separate function for everything inside of the forwardRef method.

This is how I updated the code after digging into the documentation:
![the contents of the FormInput component setup as a separate function from the forwardRef const](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n1wfv1wecmtlfml4fsx4.png)

And there you have it! The fix was that simple, and the React documentation was super helpful.

Until next time...
HTML : Group related options in a drop-down list
Tags: html, tutorial, webdev, codenewbie
Published: 2021-05-27 07:02:29

To achieve the list as dropdown list shown below -
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3fit9vrbt79szusx1jaj.png)
we can use `optgroup` tag mentioned below-

```html
<form action="/action_page.php">
  <label for="skills">Choose a Skill:</label>
  <select name="skills" id="skills">
    <optgroup label="FrontEnd">
      <option value="Angular">Angular</option>
      <option value="React">React</option>
    </optgroup>
    <optgroup label="Backend">
      <option value="Java">Java</option>
      <option value="PHP">PHP</option>
    </optgroup>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>
```

# Demo
{% stackblitz web-platform-7qn8q1 %}

# Conclusion 
The `<optgroup>` tag is used to group related options in a <select> element (drop-down list).

If you have a long list of options, groups of related options are easier to handle for a user.

<a href="https://www.buymeacoffee.com/rkycom" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>

With all that being said, I highly recommend you keep learning!

Thank you for reading this article. Please feel free to connect with me on [LinkedIn](https://www.linkedin.com/in/www-rajeshkumaryadav-com/) and [Twitter](https://twitter.com/rky_com).
Falsy values
Tags: beginners, javascript
Published: 2021-05-27 06:48:43

what are truthy and falsy values?
**truthy values**:
these values are actually not a boolean values but they act like True .

**falsy values**:
These values are actually not false(boolean) but they act as a false. it includes 0,null,"",undefined,false,NAN.

// if the first operand is truthy,
// AND returns the second operand:
alert( 1 && 0 ); // 0
alert( 1 && 5 ); // 5

// if the first operand is falsy,
// AND returns it. The second operand is ignored
alert( null && 5 ); // null
alert( 0 && "no matter what" ); // 0


*Note: All values are truthy unless they are defined as falsy.*
HTML : Using a protocol-independent absolute path
Tags: html, codenewbie, tutorial, webdev
Published: 2021-05-27 06:42:43

If the browser is viewing an page in SSL through HTTPS, then it'll request that asset with the https protocol, otherwise it'll request it with HTTP.

This prevents that awful "This Page Contains Both Secure and Non-Secure Items" error message in browsers, keeping all your asset requests within the same protocol.

Let's understand this with an example - 
# Example 1 -
For Website URL - http://RajeshKumarYadav.com
```html
<img src="http://RajeshKumarYadav.com/img/logo.png"/>
```
will be fine but
```html
<img src="https://RajeshKumarYadav.com/img/logo.png"/>
```
will through error.

# Example 2 -
For Website URL - https://RajeshKumarYadav.com
```html
<img src="https://RajeshKumarYadav.com/img/logo.png"/>
```
will be fine but
```html
<img src="http://RajeshKumarYadav.com/img/logo.png"/>
```
will through error.

# What's the fix then?
To fix the error, we should avoid writing protocol as `http` or `https` and we can call the assets as mentioned below -
```html
<img src="//domain.com/img/logo.png"/>
```
Here you can see we are using `//` only and if your website has http then image will also have `http` automatically, if your website has `https` in the URL then image will automatically have https.

<a href="https://www.buymeacoffee.com/rkycom" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>

With all that being said, I highly recommend you keep learning!

Thank you for reading this article. Please feel free to connect with me on [LinkedIn](https://www.linkedin.com/in/www-rajeshkumaryadav-com/) and [Twitter](https://twitter.com/rky_com).
Quick Tips: String Padding in JS
Tags: javascript, webdev, tips, todayilearned
Published: 2021-05-28 02:29:23

---
title: Quick Tips: String Padding in JS
published: true
date: 2021-05-27 00:00:00 UTC
tags: javascript, webdev, tips, todayilearned
canonical_url: https://nikhil.thedev.id/blog
---

# Quick Tip #1: String Padding in JavaScript

![An example image](https://nikhil.thedev.id/blog/posts/img/stringpad-cover.png)  
Use the `padStart()` string method with the string length and the string to fill the padding with.

Example:

```
const text = "Party"
text.padStart(7, "🎉 ") //"🎉 Party"

```

## Actual Use Case

Suppose you have an array of binary numbers which need not necessarily be in the standard 8-digit format. We want to add "padding" to it so it looks like the 8-digit eyecandy we all know and love.

Here is how to do it:

```
const binaryNums = [0, 1101, 011010, 1010]
const paddedBinary = []

binaryNums.forEach(num => {
  const str = num.toString(); // convert to string
  const paddedStr = str.padStart(8, "0") // fix the length of string at 8, and add padding with "0"
  paddedBinary.push(Number(paddedStr)
})

// paddedBinary = [00000000, 00001101, 00011010, 00001010]

```

See the [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart) for more info.
Gstreamer 명령어 
Published: 2021-05-27 06:21:40

# 윈도우에 창 띄우기 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ww5ly3ertiknqnqgg02.png)
 
```
gst-launch-1.0 dxgiscreencapsrc x=0 y=0 width=1920 height=1080 cursor=TRUE ! video/x-raw,framerate=30/1 ! videoconvert ! autovideosink
```
- gst-launch-1.0 
gstreamer 명령어 프로그램

- dxgiscreencapsrc x=0 y=0 width=1920 height=1080 cursor=TRUE 
화면 가져오는 플러그인, cursor TRUE 이면 마우스 커서도 포함됨
0,0 위치부터 1920x1080(FHD) 크기만큼

- video/x-raw,framerate=30/1 
비디오 포맷 30프레임

- videoconvert
비디오 프레임 변환 

- autovideosink
화면에 출력

# mp4로 저장하기 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7oibn0dppa18iz2bevl6.png)
 
```
gst-launch-1.0 dxgiscreencapsrc x=0 y=0 width=1920 height=1080 cursor=TRUE ! video/x-raw,framerate=30/1 ! videoconvert ! queue ! x264enc threads=2 tune=zerolatency pass=5 quantizer=26 speed-preset=6 ! mp4mux fragment-duration=500 ! filesink location="a.mp4"
```
각 항목들은 다음과 같다.

1. gst-launch-1.0 
gstreamer 명령어 프로그램

2. dxgiscreencapsrc x=0 y=0 width=1920 height=1080 cursor=TRUE 
화면 가져오는 플러그인, cursor TRUE 이면 마우스 커서도 포함됨
0,0 위치부터 1920x1080(FHD) 크기만큼

3. video/x-raw,framerate=30/1 
비디오 포맷 30프레임

4. videoconvert
비디오 프레임 변환 

5. queue
큐

6. x264enc threads=2 tune=zerolatency pass=5 quantizer=26 speed-preset=6
x.264로 인코딩

7. mp4mux fragment-duration=500 
mp4 파일로 래핑

8. filesink location="a.mp4" 
a.mp4로 저장한다.

# 화면띄우면서 영상 저장 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k325ktfbesyjg1k8dq3g.png)
```
gst-launch-1.0 dxgiscreencapsrc x=0 y=0 width=1920 height=1080 cursor=TRUE ! video/x-raw,framerate=30/1 ! tee name="local" ! videoconvert ! queue ! x264enc threads=2 tune=zerolatency pass=5 quantizer=26 speed-preset=6 ! mp4mux fragment-duration=500 ! filesink location="a.mp4" local. ! videoconvert ! autovideosink
```
- gst-launch-1.0 

gstreamer 명령어 프로그램

- dxgiscreencapsrc x=0 y=0 width=1920 height=1080 cursor=TRUE 

화면 가져오는 플러그인, cursor TRUE 이면 마우스 커서도 포함됨
0,0 위치부터 1920x1080(FHD) 크기만큼

- video/x-raw,framerate=30/1 

비디오 포맷 30프레임

- tee name="local"

이 지점에서 분기 local로 분기함

- videoconvert

비디오 프레임 변환 

- queue

다시 큐

- x264enc threads=2 tune=zerolatency pass=5 quantizer=26 speed-preset=6

x.264로 인코딩

- mp4mux fragment-duration=500 

mp4 파일로 래핑

- filesink location="a.mp4" local. 

저장할 파일 이름과 여기서부터 local. 분기점 시작

- videoconvert

비디오 프레임 변환 

- autovideosink

화면에 출력

​
Listen to query event and save to separate log file in Laravel
Tags: laravel, log
Published: 2021-05-27 06:20:36

Add below code to AppServiceProvider boot method

```php
DB::listen(function ($query) {
    File::append(storage_path('/logs/query.log'),
        '[' . date('Y-m-d H:i:s') . ']' . PHP_EOL . $query->sql . 
        ' [' . implode(', ',$query->bindings) . ']' . PHP_EOL . 
        PHP_EOL
    );
);
```
The all the query that are run in your app will be saved in storage/logs/query.log file
Music Player using React.js
Tags: codepen, javascript, webdev, react
Published: 2021-05-27 06:10:53

<h1>This is a Music Player made using React.js Library</h1>

<p>Design Credits to Giga Tamarashvili on dribbble: <a href="https://dribbble.com/shots/6437042-Music-App-UI" target="_blank">https://dribbble.com/shots/6437042-Music-App-UI</a>
<br/><br/>Also, I couldn't find any open music API
so credits to Muhammed Erdem on codepen :
<a href="https://codepen.io/JavaScriptJunkie/details/qBWrRyg" target="_blank">https://codepen.io/JavaScriptJunkie/details/qBWrRyg</a><br/>
to make his repo public and make the songs easily accessible
also, I used his UI as inspiration too.</p>

<a href="https://reactjs.org/" target="blank">Link to React.js Library</a>

<p>Check out the complete pen below</p>

{% codepen https://codepen.io/thecoderelite/pen/qBrrMzq %}

<p>Also, Do like ♥ the post if you liked the project!</p>
How to make usernames selectable in LightDM Greeter
Tags: lightdm, displaymanager, greeter, debian
Published: 2021-05-27 05:53:32

When I used [Debian](https://www.debian.org/) 10, whose desktop environment was [Xfce](https://www.xfce.org/)4 and login manager was [LightDM](https://github.com/canonical/lightdm) accompanied with its [GTK](https://www.gtk.org/) [greeter](https://packages.debian.org/search?keywords=lightdm-gtk-greeter), I had to enter my username every time I started my computer. It might have become more convenient.
After all, I found how to configure it. Edit `lightdm.conf`:

```console
$ sudo nvim /etc/lightdm/lightdm.conf
```

to deactivate `greeter-hide-users`:

```diff
- #greeter-hide-users=false
+ greeter-hide-users=false
```

Then the greeter kindly showed my default user on boot.
从产品的角度思考：小白们第一门编程语言需要什么样的package management？
Published: 2021-05-27 05:52:12

我认为python的成功，很大程度上来源于Python对package的管理。
在terminal安装：
```
pip install YOUR_PACKAGE
```
在源文件中使用：
```
import YOUR_PACKAGE as YP
x = YP.myFunction(value)
```
几乎能让入门Python技术栈的人1分钟了解安装和使用的全部细节 — — 这也是Python作为世界最广泛的胶水语言和事实上许多细分领域行业的公认DSL的重要原因之一：只要库正确打包发布，所有小白都有机会在自己的电脑上用pip或者conda自动完成全部配置，并且通过1分钟的阅读来实现入门基本使用方法。
另一个让我印象深刻的是Deno。在不知道Ryan Dahl的设计时，我几乎构想出了和他相似的一种直接针对当代互联网的设计，即import from URL。比如Deno中是这样设计：
```
import yourFunction from "http://website.com/myscript.ts"
```
这种设计让TypeScript非常灵活地组织了起来：对于熟悉TypeScript的人来说，不需要提前写繁琐的各种npm install，而是“新建文件”、“从URL直接import”、“写好运行” — — 对用户来说，无疑节约了若干个繁琐无用的步骤，当用户对网络I/O和recursive preprocessing的速度可以足够容忍时，这种设计对于轻量级的script的开发是方便的。

另一个我欣赏的设计，是R语言的install package。只要你的库发布到CRAN上，就可以在R里运行前直接安装：
```
install.packages("ggplot2")
```
这无疑也是一种非常舒适的设计，也是R作为计算学家们爱不释手的原因之一：不需要退出环境后在terminal里进行繁琐的安装配置，直接可以在环境中一行自动搜索匹配下载安装CRAN中的包 — — 作为使用者来说，无疑是非常方便的。

那么有没有可能设计出一种更简单、更激进的package management方式，在不考虑性能和复杂度的前提下，让小白尽可能简单方便直观地使用别人的库同时发布自己的库？我个人有如下想法：

1. 支持import from URL/package server。让小白绕过手动使用package manager，而直接让intepreter直接下载并加载到runtime中，这比额外在terminal或者GUI中额外手动配置安装package要更简单、更直观 — — 譬如只需要一行 *import MyLibrary: functionA, variableB, classC 或者 *import http://website.com/library.hhs ——剩下的就交给runtime自动下载MyLibrary、自动配置下载各个部分；

2. 提供一个更加灵活的服务器，让A发布的packge能像google docs或者在线记事本一样编辑保存在服务器里，这样一旦保存，其他人就可以@your_username/your_package的形式来引用，譬如 *import @your_username/your_package ——这样普通用户让发布package更加简单，而不用经历略繁琐的npm/pip/conda的打包发布的步骤（对于初学者而言），而是简单得像写evernote笔记一样，编写+自动存储即可；

3. 对于一次就用的module，可以提供更激进的语法糖直接使用，而省略多余的import，譬如在(1)中可以写成：
```
*import linearAlgebra:magic
matA = magic(5)
```
而一个更省略的语法糖可以设计成为这样：
```
matA = <linearAlgebra:magic>(5)
```
或者在(1)中可以写成：
```
*import @username/functionA
matA = functionA(5)
```
而一个更省略的语法糖可以设计成为这样：
```
matA = <@username/functionA>(5)
```

当用户想要使用linearAlgebra:magic或者@username/functionA一次且仅一次的时候，用户不需要安装配置等任何额外代码以外的工作，也不需要额外import一次，直接用语法糖< your_package >标记成远程package — — 只要中间的URL、package或者“用户名/function”的配置是正确的，用户直接一次使用，剩余的交给intepreter和server就可以了。

这是从product management的角度，以零基础编程小白的角度的一些思考和计划（在Hedgehog Lab未来的feature中）。
Deploy Machine learning(ML) model in Docker container.
Published: 2021-05-27 05:50:27

First we will understand what is machine learning(ML) and Docker.
__Machine learning__:- Machine learning is an application/program or subset of AI that allows machines to learn from data without being programmed explicitly.
**Docker**:-It is a tool that provides platform to create, run and deploy the applications by using containers. Docker is a bit like a virtual machine rather than creating a whole virtual operating system, Docker allows applications to use the same Linux kernel as the system that they're running on and only requires applications be shipped with things not already running on the host computer. This gives a significant performance boost and reduces the size of the application.
__Here are the complete steps:-__
__Step 1__:
Install docker
   #yum install docker-ce --nobest
if you have already installed check for query
   #rpm -q docker-ce
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dc7awzppnc5e7nk3lat7.png)
__step 2__:
check status of docker 
   #systemctl status docker
if services are not enabled run
   #systemctl start docker
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/esosdk8kame2dl1mz9r2.jpeg)
__step 3__:
download the latest centos image from docker hub
   #docker pull centos:latest
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zqn24q43u0eume7gc0fu.png)
__step 4__:
deploy a latest centos new container
   #docker run -it --name MyOs centos:latest
by passing -it arguments provides terminal and we can interact with it.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xsc8qxfwrzgwnpkl9dlq.jpeg)
__STEP 5__:
Installing python3 on centos container
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qe2vwvdbrf7fzfen94i4.jpeg)
__Step 6__:
Now installing all required packages
   #pip3 install numpy
   #pip3 install pandas
   #pip3 install sklearn 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qrskresyc3zbg2rz755m.jpeg)
__step 7__:
copying dataset from base os to centos container
   #docker cp /root/salary.csv MyOs:/ML
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a1yg7ebjn4nao0v36yee.jpeg)
__Step 8__:
Code to run for ML model
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/496jv1ek3p22q206nu0m.jpeg)
__Final Step__:
   #python3 model.py
Here is the complete output of our ML model
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/new30v2332pmy19cxxcc.png)
**THANK YOU**
How to convert a image from Google Map(Div)?
Tags: javascript, googlemapapi, html, css
Published: 2021-05-27 03:14:21

1.
Hello. Thanks for reading my article in advance.
As you can see above picture, I have displayed a map using Google Map API.
I want to convert a image from that google map using JavaScript.
Who is Someone expert in this part?
Let's discuss in a detail.
Thanks
2.
I have got a solution.
We can use `html2canvas` library.

```
html2canvas(document.getElementById("[your map id]"), {
    useCORS: true,
}).then(function(canvas) {
    var img = canvas.toDataURL("image/jpeg");
    var image = new Image();
    image.src = img;
    document.getElementById("[div to display an image]").appendChild(image);
});
```

It just displays the google map as an image.
Thanks
A Chain-Based Consensus Algorithm Using Cyclical Voting Processes
Published: 2021-05-27 03:12:40

This is a major algorithm of a chain-based proof-of-stake consensus protocol using the process of cyclical voting. It applies a finalization period in about one round of voting with a relatively simple mechanism. I think it might be considered in optional schemes as a supplementary in the future. 

{% github yj1190590/Consensus %}