teleren/devto huggingface dataset:
How to check if two DOM nodes are equal in JavaScript?
Tags: javascript
Published: 2020-08-23 00:00:00

---
  title: How to check if two DOM nodes are equal in JavaScript?
  published: true
  tags: JavaScript
  date: Sun Aug 23 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/check-two-dom-nodes-equal-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-7629edf45f79e848191dd001cd717b66.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/check-two-dom-nodes-equal-javascript)
  
To check if 2 DOM nodes are equal in JavaScript, you can use the `isEqualNode()` node method.

Suppose you have 2 HTML elements like this,

```html
<div class="heading">
  Hello World
</div>
<div class="heading">
  Hello World
</div>
```

Now, let's use the `isEqualNode()` method to check if they are equal or not.

```javascript
// get all div tags
const allDivtags = document.querySelectorAll("div");

// get first and second div tag
const firstDivTag = allDivtags[0];
const secondDivTag = allDivtags[1];

// check if both DOM nodes are equal
const isEqual = firstDivTag.isEqualNode(secondDivTag);

console.log(isEqual); // true
```

- The `isEqualNode()` method accepts a valid DOM node reference as an argument.
- The method returns `false` for those DOM nodes whose attributes, id, or any other relevant properties are different.

for example,

Consider this HTML, where the 2 div tags are different.

```html
<div class="heading" id="myFavDivTag">
  Hello World
</div>
<div class="heading">
  Hello World
</div>
```

Now if you check the equality it will return `false`.

```javascript
// check if both DOM nodes are equal
const isEqual = firstDivTag.isEqualNode(secondDivTag);

console.log(isEqual); // false
```

### Feel free to share if you found this useful 😃.

---
How to choose the right Graph Visualization Library
Tags: graph, visualisation, libraries, help
Published: 2020-08-22 23:10:55

---
title: How to choose the right Graph Visualization Library
published: true
description: 
tags: graph, visualisation, libraries, help
//cover_image: https://direct_url_to_image.jpg
---
Hi,

I'm creating an application with electron where you can manage the people you in know.

Which graph library would you recommend to use to display the network graph?

Which libraries are out there to work with?

Are there any libraries to store the data in a graph library Like Neo4j?
Thank you for your answers in advance.

Cheers,
Mario
Manage your GitHub Pull Requests from IntelliJ IDEA
Tags: intellij, github, git, productivity
Published: 2020-08-22 23:08:11

---
title: Manage your GitHub Pull Requests from IntelliJ IDEA
published: true
description: 
tags: intellij, github, git, productivity
cover_image: https://images.unsplash.com/photo-1556075798-4825dfaaf498?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1955&q=80
---

IntelliJ IDEA has released a new feature that allows us to handle _Pull Requests_ within the IDE without having to go to the page and review it from there. The most attractive thing about this feature is that you can create and modify the PR information as well as its approval or close it.

Let's explore!

### Login GitHub Account

First, we need to log in to our _GitHub account_.

![Login](https://media.giphy.com/media/iF0zSKheapPGYcLXe4/giphy.gif)
### Create Pull Request
To create a Pull Request we must go to the _VCS menu -> GIT -> Create Pull Request_, fill in the information that it asks for and click OK. It will also be reflected on the website.

![Create PR](https://media.giphy.com/media/iCj6ipLclpvxGVxADI/giphy.gif)
Verify in GitHub page.

![Done in Github](https://i.ibb.co/mcknwJx/02-1create-pr.png)
### Review

Pull Requests can be accessed on the left panel. We can search for the status of the Pull Request in __open__ or __closed__ and see the content.

![Review](https://media.giphy.com/media/RitWsOVB8CpB1dlVh6/giphy.gif)

Modify the status in the same panel where they are listed.

![Edit](https://media.giphy.com/media/L3KSNhWeO2lFOHEEpy/giphy.gif)

### Merge

Once the revision is done, it remains to finish the PR with the merge to the branch where the changes will be mixed, this is achieved with the Merge button or otherwise with Close Pull Request button.

![Merge](https://media.giphy.com/media/J3AHoXZySHuPKzv7gS/giphy.gif)

On the page you will also find the merge.

![Final](https://i.ibb.co/CvNc4X9/05-final.png)

# Conclusion

This feature offers many advantages when revising and approving changes in the code, it allows adding comments on sections of code where observations are made. It's good to have GitHub functionalities into the IDE. There is still a lack of resolution of conflicts in the code in the way they are solved on the page, although it has what it takes to use it.
Day 37: Idea Generation 
Tags: 100daysofcode
Published: 2020-08-22 22:34:34

Idea generation is an extreme sport, very draining to the mind. I never thought it was though, until my team happened! Idea generation in a nutshell is the process of developing and defining a product or solution concept. It requires an understanding of the problem at hand and the most efficient way to  solve it. 
> *"We cannot solve our problems with the same thinking we used when we created them.” Albert Einstein.*

My experience today shed light on the resourcefulness of teams in idea generation. Our ideas most oftnely seem perfect in our heads, it is not until we share them that we get to see their gaps and shortcomings. It is from the meaningful criticism offered freely in a teams that we shift out perspectives towards a building better solutions.

My key takes away today on idea generation:
* Narrow down on a topic/sector
* Identify list of possible problems 
* Come up with solutions
* Weigh the impact of the solutions. 
* Think expansively. How can the solutions be improvised to impact a larger community?

_Day 37_
Cloud computing services available at no cost to open source projects & developers
Published: 2020-08-22 22:22:54

Fosshost.org provides open source developers and projects with access to high quality and professional cloud computing services.

These come in many flavors including a virtual private server with ipv4/ipv6 (depending on region), various operating systems and specifications.  All applications can be made via the fosshost.org website.

The project in addition to VPS provide mirrors-as-a-service, storage, dedicated servers (subject to status & availablity).

All services can be delivered managed or unmanaged throughout our global network which operates from the USA, UK and Europe.

Visit our website for more information https://fosshost.org

Many thanks,
World of WoqlCraft - Ep.21 bank example
Tags: python, database, tutorial, video
Published: 2020-08-22 21:58:41

---
title: World of WoqlCraft - Ep.21 bank example
published: true
description: Today we will be exploring the bank example in the Python client which showcase how we can create an account, make some changes to the details and branching it.
tags: python, database, tutorial, video
---
Today we will be exploring the bank example in the Python client which showcase how we can create an account, make some changes to the details and branching it.

Find the source code from our [tutorial repo](https://github.com/terminusdb/terminus-tutorials).

Join the TerminusDB community at [Discord](https://discord.gg/Gvdqw97)
mono-.net core integration on Monodevelop
Tags: dotnet, linux, opensource
Published: 2020-08-22 21:39:42

Hi, I am the new member of the team and this post is my first. Ok. for a long time I try to install-integrate mono-.net core on monodevelop IDE. I am using Solus and perhaps that's why I got hard. I don't know  "how to do this work on other distro". But I have decide share with you this experiences. Bugs, errors etc.

If you want to create a .net core app and build this app, you can use mono framework. I try a .net core 2.1 LTS and mono 6.8.0.105 on runtime. 

Make it happen installation monodevelop, mono framework and dependency packages .netcore-2.1 LTS sdk on your system. Then;

 for **.netcore sdk**:
open /etc/profile and add Path variable

__PATH=$PATH:/your/dotnet/sdk/path__ and __DOTNET_ROOT=/your/dotnet/sdk/path__ 

and do:
**$ source /etc/profile**
 
Ok. You have a dotnet command reachable everywhere anymore.
 
you can try: 
**$ dotnet --version**

Thus, after created new solution, you can go into the project directory and  run __dotnet build__ command. 

Open the monodevelop IDE and go Edit->Preferences->Sdk Location->.Net core and add dotnet core command line.

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

then create a new solution **ASP.NET core web API or app**. Right click project app and select __options__. You should check target framework inside General tab.

Under the __Run__ tab right side of __General__ tab there is a ASP.NET core tab. You can change port here In general tab, do not select "Run on external console". This option(form of 'unclicked') provide to use application console in monodevelop. 

Build app. 

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

I could not run .netcore 3.0 sdk LTS with this release of mono. Perhaps It should was installed latest mono framework.

As a result, an asp.net core app or API can be developed  via mono on Monodevelop IDE for both Linux and Mac. This method can be used for this.
How to deploy your React App with Github Pages
Tags: beginners, tutorial, codenewbie, react
Published: 2020-08-22 21:26:50

Github Pages is a nice way to host your website, it's completely free and very easy to deploy, and you can use it with any framework not only React. I didn't know that when I was a beginner and I thought it would be nice to share it.

Before starting, make sure your app is hosted in a Github Repository.

## 1. Install gh-pages
In your terminal type, `npm install gh-pages --save-dev` or if you're using yarn `yarn add gh-pages --dev`. The gh-pages dependency is what you're going to be using to deploy your app.

## 2. Add the scripts and the homepage URL
In your `package.json` file add: 
```"homepage": "https://[your github username].github.io/[your project name]"```
Make sure that your project name is the same used in your GitHub repository.
Then add to scripts:
```"predeploy": "npm build",
"deploy": "gh-pages -d build"```

## 3. Time to deploy
Finally, on your terminal type, `npm run deploy` and that's it, as I said, very simple. It may take a couple of minutes before your app gets hosted but if everything works fine you should be able to see your app with the URL that you used for the homepage.
What is Dokku
Tags: dokku, docker, heroku, devops
Published: 2020-08-22 21:00:17


So what is Dokku, another bit, another TL;DR;

Let's jump into it.

You might know Heroku, (my opinion) the greatest platform to ever make it easy to deploy server and client-side applications so fast and easy.

Well Heroku is a business and they have to make their money, so it has a pricing plan, and the `free tier` can only get so far.

So what if..., this is about to blow your mind.
![blow your mind](https://media.giphy.com/media/8A7uIGtdEEPf3QvVuV/giphy.gif).

You can have your own Heroku-ish, host as many applications as you want(might dent your wallet), set your own rules, and still keep the Heroku's simplicity on deployments.

![](https://media.giphy.com/media/FP56vNcwOVyvu/giphy.gif)

<h1 style="border-bottom: none; text-align:center;font-weight: 800;">Its Dokku 🙌</h1>

I mean when I discovered Dokku man, been using it ever since -> I frigging love it. Everything basic feature that Heroku offers Dokku offers and its free to host your own Dokku(it's Open-source).

Okay I know if the `deal is too good think twice`.

So let's jump into the pros and cons of Dokku.

## Pros

1. Allow deployment of apps faster and easier just like Heroku

2. Allows installation of plugins such as Postgres/MongoDB and more

3. Allocate certificate with Let's encrypt for free using their plugin

4. No learning curve if you worked with Heroku CLI

5. It's cheaper to run Dokku than pay for Dyno hours.

6. Your apps aren't shutdown on inactivity

## Cons

1. Well, it's all CLI not UI(Heroku kills it here), there are tools that give dokku a UI, will list them in the future.

2. Cloud version control integrations like Github/BitBucket.

3. Review app -> Heroku allows branch deploys, Dokku doesn't do that out of the box.

4. Having your apps run on Heroku lets you worry about other things other than maintaining a server.

## Conclusion

- If you want to setup Dokku to your web service [here](https://blog.bywachira.com/bits)
Whats A IP Address?
Published: 2020-08-22 20:48:43

You might have a physical mail address for your house. For sending mail. The same way computers have there own address. Thats called a **IP adress**. An IP address is a numerical label that's assigned to each device connected to a network. That network might be your internet service provider (ISP) at home, or your company network at work. An IP address looks something like this:
```
23.100.10.69
```
Or this:
```
100.12.34.33
```

 Like your physical mail address, your ip address reveals your geographical location. Something like your state and city. Sometime even your neighborhood! People use services like a **proxy** or a Virtual Pirvate Network (VPN) so website cant log there **real** IP address. If someone suspicious has you ip, dont worry. Just unplug your network for the night and your ISP might change your IP if your on a residential connection.
Day 4 of 100DaysOfCode
Tags: 100daysofcode, javascript, eloquentjs, codenewbie
Published: 2020-08-22 20:47:43

Hey! Today personal life and renovation got little on the way of coding, but still managed to get some time in!

Worked on the exercises of Eloquent JavaScript. I started them yesterday but they prove to be a little trickier than first imagined. Finishing them tomorrow and sharing my solutions. 

To everyone with a busy life: Try to code just a little bit every day. Each day you do it the easier it becomes the next day, and the day after that, and so on. Keep coding you can do it!

## What I did today:

### 1. Exercises of Eloquent JavaScript Chapter 4
https://eloquentjavascript.net/04_data.html#h_TcUD2vzyMe
####What I learned from it:
* Working with arrays on JavaScript
* Making my own functions
* Problem-solving

#### Time spent actually coding:
1h 9 min

#### Total time: 1h 9min
Tracked by using my [TaskTimer](https://www.arttupyykonen.com/tasktimer/) script and the [WakaTime app](https://wakatime.com/about)

Check out the book (link above) to have a great learning resource! Highly recommend it.

That's it for today. Hopefully, I'm more productive tomorrow. See you all next time!
text2imagge
Tags: image, text, ideas
Published: 2020-08-22 20:12:23

It all started with an excellent by a fellow dev enthusiast on this platform. He had the idea to fetch programming quotes using github actions. This got me wondering, if there is an API to get free quotes why not use it to post to social media platforms on a daily basis.

All I have to do is get permissions from Facebook, LinkedIn, Twitter and Instagram and run a cron job to post to these sites every day at a particular time.

It seemed damn simple. Only hopes were destroyed when - 

1. All the social media platforms have switched to Oauth 2.0. This means you can't just directly access their APIs using an email and password, you need an access token to do so. Fair enough.

2. Second pain was the expiry time, while LinkedIn and Twitter gave expiry times for around 60 days, facebook gave it for 3 hours. Found out they have something called an access token expiry extender :|

3. The **publish_action** scope which is needed to post photos was deprecated in April, 2018. There, the end of Facebook.

4. LinkedIn makes it weirder. They need you to create a company to actually start developing apps on their platform. And that too, the scopes have to be approved by the team and you will be informed via mail if they feel it's okay to approve. :| Ok ... so waiting for LinkedIn

5. Twitter has straighforward APIs. You have a bearer token. You use to it to make a tweet(photo upload). Only, you have to first upload the media to twitter and then use the media in a tweet. Strange. Facebook allowed you to create a pic from a URL. But yeah, facebook is no more :'( Oh! and the default scopes don't allow media post. So submitted for a review. Waiting for another email.

6. Instagram, well after all these attempts ... I shifted my focus from there and finally made this silly looking thing - 


https://text2imagge.herokuapp.com/

So yeah, wasted a lot of time. :D Saturday sorted !
Test , test ,test it again
Tags: php, benchmarking, profiling
Published: 2020-08-22 20:10:14

# My fist package
First i needed to benchmark my php application.
Then i came up with this..
[Link](https://packagist.org/packages/maddrid/bench) https://packagist.org/packages/maddrid/bench.
Simple usage .  
``` 
Bench::start ('first');
 for($i=5;$i<3222200;$i++){
	 if ($i==2232){
		 Bench::start('22');
		  \random_int(0, 1000);
	 }
	 $v = $i*32/18;
	 
 }
 Bench::stop('22');
 Bench::stop('first');
 
 Bench ::printTimers ();
```
output
``` 
Array
(
    [first] => Array
        (
            [cpu_load] => Not enabled
            [duration] => 0.16000104
            [memory] => 752 b
            [peak] => 539.52 kb
        )

    [22] => Array
        (
            [cpu_load] => Not enabled
            [duration] => 0.16000104
            [memory] => NAN b
            [peak] => 539.52 kb
        )

)
```
Not a big deal but made with love and a lot of coffee !!!
Semantic HTML by real-life example part 2
Tags: html, beginners, webdev
Published: 2020-08-22 20:03:37

## Intro

Hey, it's the next part of my mini-series where you can find how popular websites deal with their HTML markup. If you haven't seen the recent post check it out!

Today we take a look at the Smashing Magazine homepage.

## 01

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

As you can see the `h2` tag has a bigger font-size then `h1`. It's a very good example that the headers' hierarchy is about the text's importance, not a style property. Don't use `h1` just to make text bigger, CSS can make that job.

What's interesting to me they don't use a `section` tag to wrap the latest articles and a heading.

They use the `figure` tag for author image but I'm not sure why they don't put the author's name inside `figcaption`. You can read more about figure [here on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure)

## 02

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

The next chunk of articles is surrounded by the `section` tag and has multiple `articles` inside. We can see that they use the `header` inside the article. Remember header tag can be used for every header content on your website, not just for the main header on a top.

What's also interesting how they placed `h4` heading. It's rotated and moved to the left. It looks awesome and at the same time is accessible for screen readers users.

I'm a little bit confused about why they used `h1`in the red div. As far as I know, there should be only one `h1` heading for the site. If you have any ideas about is it wrong or right usage of `h1` please let me know in the comments below.

Thank's to that site I discovered a `small` tag. You can read more about it [here on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small)

## 03

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

Here I'm also a little bit confused about the `h1` tag. I've no idea why they used that here, but this is how it looks like.

## 04

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

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

In my opinion, they used the `h2` tag in a very smart way. They put the `span` there to style the most important words for visual users, but for screen readers, it's just a normal title.

I initially thought that they forgot to use `label` for the email input. I was wrong, there is a label but only for screen readers users, it's visually hidden for the rest.

---
Also If you want to find some cool open-source project and start contributing check out [JustContribute](https://justcontribute.netlify.app)

[Follow me on Twitter for a web dev content](https://twitter.com/dominikilnicki)
Using Web Bluetooth in Chrome to visualize IMU data
Tags: iot, web, bluetooth, arduino
Published: 2020-08-22 20:03:04

***(Note: these posts are migrated from my previous [medium.com](https://medium.com/@monkeytypewritr) blog)***

![[https://github.com/w4ilun/web-bluetooth-curie-imu](https://github.com/w4ilun/web-bluetooth-curie-imu)](https://cdn-images-1.medium.com/max/2000/1*pReO0DkhL9RQcj8MJ0fguA.gif)

{% github w4ilun/web-bluetooth-curie-imu no-readme %}


The Web Bluetooth API allows you to interact with Bluetooth LE peripherals from your browser using JavaScript. It’s been available since Chrome 45+, but you’ll have to enable it manually since it’s still an experimental feature. You can check out the API and examples [here](https://googlechrome.github.io/samples/web-bluetooth/).

To start, I combined code examples for the Arduino 101 on using the built-in IMU and Bluetooth LE features; all of the Curie’s IMU readings are sent as notifications over Bluetooth LE by updating the characteristic’s value. The sketch below shows how to do so with the CurieBLE and CurieIMU libraries.

{% gist https://gist.github.com/w4ilun/ca7a06700ef3016c548704fb9f723b3e %}

On the web side, Chrome’s Web Bluetooth APIs were used to detect, connect, and read notifications from a Bluetooth LE peripheral device (our Arduino 101). For security reasons, all of this is enabled only after the user interacts with the page, so the **navigator.bluetooth** method is called after you click connect. From then on, you can discover the peripherals services and characteristics; we subscribe to these characteristics and receive IMU data in the callback function:

{% gist https://gist.github.com/w4ilun/4ae91430543b5faec26ca5356b620aca %}

The IMU data (roll, pitch, & yaw) gets updated, and we update them as globals as well in our script; this allows our Processing.js sketch to read from the global scope the IMU data, and update the canvas WebGL rendering.

Since everything is done in Chrome and no additional server side processing is required, I hosted everything on GitHub pages, so everyone can try it out for themselves [https://w4ilun.github.io/web-bluetooth-curie-imu/](https://w4ilun.github.io/web-bluetooth-curie-imu/)

You can also find all of the code above on GitHub: [https://github.com/w4ilun/web-bluetooth-curie-imu](https://github.com/w4ilun/web-bluetooth-curie-imu)

Enjoy!