teleren/devto huggingface dataset:
Notes on a Heap
Tags: dsa, datastructure, heap, binarytree
Published: 2020-08-09 05:39:48

---
title: Notes on a Heap
published: true
description: A cheatsheet for remembering how to implement heaps
tags: dsa,datastructure, heap,binarytree
//cover_image: https://direct_url_to_image.jpg
---

As usual I learned about heaps from two places:
1. Vaidehi's [BaseCS](https://medium.com/basecs/learning-to-love-heaps-cef2b273a238)
2. [Introduction to Algorithms](https://mitpress.mit.edu/books/introduction-algorithms-third-edition)

# What's a heap?
- A binary tree
- Parents are always greater than their children (max-heap) OR
- Parents are always smaller than their children (min-heap)

# Implementation Notes:
Instead of a node object structure, it's most useful to use a simple array to represent this.

This is because we need:
1. Rapid access to the last element in the heap (which always happens to be the last element in the array)
2. Easy ways to swap the *values* of two nodes while leaving all their children the same.

So the maths that puts this in order is:
1. For a 0 indexed array
2. The left child of an index is at 2i + 1
3. The right child of an index is at 2i + 2
4. You'd need the equation for the parent but it's best to calculate it from `2*parentIndex + 1 = childIndex` to get `(childIndex - 1)/2`
5. As long as you keep the entire calculation in Int, your language will round it off appropriately whether it's actually the left child or not.
6. Since you'd either end up with a .5 value if it was the right child, which rounds down to the correct parent index, or the actual parent index as an Integer.

# Kotlin Implementation
- Easier to use a mutableList and a recursive implementation.
- You'd need to use removeElementAt(size - 1) to get the last value to put at the root.
- I prefer implementing classes that handle generic values, so the MaxHeap takes a T
- However, the type given here has to be a Comparable so that > and < work. So that's the only limitation on the generic value.

# Functions:
## Insert
- Insert, always bubbles up

Memory Helper: "inserting is positive, going up is positive, they go together"

## Extract
- Extract, you'd need to bubble down
The root is what you extract, which is the largest or smallest value in the heap.
The last element in the heap is then put at the root and bubbled down.

# Memory Helper:
"The whole point of the heap is to extract the min/max value and then the value you'd put in there is already at the top so you'd have to go down"

# Useful property:
Extracting or inserting always takes LogN time, you can the smallest or largest n elements by calling its extract over and over.

# Fun facts:
The book uses 1 indexed arrays and Vaidehi uses 0 indexed arrays, this changes their equations for child nodes.

# Code + Test
{% gist https://gist.github.com/AniketSK/b7f044a0ea8a7f729c1d84e282cf8f11 %}
📣 [Feedback asked] Calling all JS developers using VS Code
Tags: vscode, javascript, node
Published: 2020-08-10 08:11:00

Hi folks,

Together with some brilliant engineers 👩🏽‍💻🧑🏿‍💻 related to the company I work for we created a new open-source security tool for VSCode called [Vuln Cost](https://marketplace.visualstudio.com/items?itemName=snyk-security.vscode-vuln-cost).

It is a VSCode extension that helps you show if a dependency you use has security issues.

![img](https://snyk.io/wp-content/uploads/vulncost-600.gif)

It is totally free and for the remediation advise we utilize the capabilities of a free Snyk account. Please try it and I would love your feedback (or a Pull Request 😉 ). 

Thank you so much 🙏
Angular Image optimization using Gulp
Tags: angular, gulp, gulpimagemin
Published: 2020-08-10 08:06:00

Hello, This is my very first Post in Dev.to and I want to share about how we can reduce image size by using gulp tool in Angular. You can take a tour of gulp [https://gulpjs.com/] in brief if not familiar. 

First most you need to create angular project by using
```
$ ng new project-name
```
then,
```
$ cd project-name
```
and install npm depencencies ( `$ npm install`)

After that install Gulp as a dev dependencies on your project using following command.

```
$ npm install -D gulp
```

Now, create a gulpfile.js at root of your project. One more gulp dependency we need to reduce image size is called gulp-imagemin. Install this dev dependency using below command :

```
$ npm install -D gulp-imagemin
```

Now you can write following code into your gulpfile.js

```
const gulp = require('gulp'); // Initialize gulp 
const imagemin = require('gulp-imagemin');
 function optimizeImages(){
    return src('src/assets/images /*').pipe(imagemin()).pipe(gulp.dest('dist/newProject/assets/images'));
 }
exports.default = optimizeImages; // Call of task as default
```

Here, gulp is need to be initialized first and then we used here imagemin feature of gulp. After that we create a function (In case of gulp it's task) named optimizeImages() and use src() for accept entry point of our image path (In my case, I usually stored my images at src/assets/images). Now we have to store optimized image at one path right ? So for that we used here gulp.dest('path'). For Angular, we need to create a build for deployment purpose so I run my gulp task after creating dist so I gave the path like dist / newProject/assets/images. Now we need to call our task named 'optimizeImages'. Gulp provide various ways of calling your tasks (publicly and privately) among-them one I used is 

```
exports.default = optimizeImages;
```

Your gulp task (optimizeImages) is called when you type $ gulp in terminal. 

So, let's call our gulp task by:

```
$ ng build --prod && gulp
```

You can see the each image size stored at your (dist/newProject/assets/images) destination path and compare it with your source path. It's pretty much reduced. Isn't it nice ? There are many other gulp plugins which can individually taken care of reduce of image size and removed unused css and js that we covered later.
Augmented Reality (AR) in Interior Designing
Tags: augmentedreality, ar, arininteriordesigning, queppelin
Published: 2020-08-10 07:45:24

The user uses a mobile device to overlay the real world with virtual elements. The AR app lets the user see furniture or wall paint that would look real!

IKEA one of a  leading furniture giant uses a catalog app in which user scans and selects the image from a printed catalog and the user can then access extended rich content!

This app allows the user to place up to 90 products from the range and explore the space in 360 degrees. As a result, in the year 2016, IKEA increased its sales by 35.1% from 27.6% in 2012. Look how the child is holding a big green sofa in hands using the AR app!

Learn More: https://www.queppelin.com/augmented-reality-ar-in-interior-designing/
CSS Only Tooltips Alternative
Tags: css
Published: 2020-08-10 07:25:28

The other day we made some [`CSS` only tooltips](https://daily-dev-tips.com/posts/css-only-tooltips/). And the cool part about being a developer is there are always different ways to do it. I got some feedback that the data-attribute was also a nice alternative way, so I decided to rebuild my ones.

And it is indeed a neet way of doing so. It's cleaner code, and with this one, we don't have to define a fixed width.

## HTML Structure

The `HTML` Structure only changes slightly from our previous example.

```html
<div class="skills">
  <div class="skills-item" data-tooltip="HTML5">
    <!-- Content -->
  </div>
  <div class="skills-item" data-tooltip="CSS3">
    <!-- Content -->
  </div>
  <div class="skills-item" data-tooltip="JavaScript">
    <!-- Content -->
  </div>
</div>
```

So basicly we removed our span and placed our tooltip content inside the data-tooltip attribute we created.

## CSS Tooltip Alternative

As for our `CSS` we are using the tooltip attribute selector as such:

```css
.skills-item[data-tooltip] {
  position: relative;
}
```

Then we will add our actual tooltip element the box and set the content to be whatever is in our data-tooltip

```css
.skills-item[data-tooltip]:after {
  transition: opacity 0.3s;
  opacity: 0;
  position: absolute;
  content: attr(data-tooltip);
  bottom: 100%;
  background-color: #555;
  padding: 5px 0;
  border-radius: 6px;
  color: #fff;
  padding: 8px;
  width: auto;
  right: 50%;
  transform: translateX(50%);
}
```

We use the same styling, but position it slightly different by offsetting it after placing it to the right.

Now we also want to have that little arrow at the bottom and will leverage the bottom [pseudo-element](https://daily-dev-tips.com/posts/css-pseudo-elements/).

```css
.skills-item[data-tooltip]:before {
  transition: opacity 0.3s;
  opacity: 0;
  content: '';
  position: absolute;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
  right: 50%;
  transform: translateX(50%);
  margin-top: -10px;
}
```

Awesome!

Now all that's left is showing it once we hover! Remember we have to show two elements now the before and after.

```css
.skills-item[data-tooltip]:hover:after {
  opacity: 1;
}
.skills-item[data-tooltip]:hover:before {
  opacity: 1;
}
```

There you go, an alternative way of showing a tooltip.

View this on Codepen.

{% codepen https://codepen.io/rebelchris/pen/jOqPmrN %}

## Browser Support

The browser support for this function mainly depends on the attribute selector, and that's pretty well supported!

![Attribute Selector support](https://caniuse.bitsofco.de/static/v1/mdn-css__selectors__attribute-1596989446622.png)

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Portfolio with Dark mode
Tags: flutter, beginners, tutorial, webdev
Published: 2020-08-10 07:24:08

> A clean, beautiful and responsive portfolio template with Dark Mode enabled for Developers!

[Source Code](https://github.com/naveenjujaray/DeveloperFolio) -- [Live View](https://developerfolio.web.app) 

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

## Sections
✔️ Summary and About me

✔️ Skills

✔️ Proficiency

✔️ Achievements 🏆

✔️ Blogs

✔️ Contact me


for more details check this [post](https://dev.to/naveenjujaray/portfolio-template-using-flutter-1ifl)
How to Use BIN2DEC Function in Excel 365? (With Examples)
Tags: bin2decfunctioninexc, excelfunctions
Published: 2020-08-10 11:55:08

---
title: How to Use BIN2DEC Function in Excel 365? (With Examples)
published: true
date: 2020-08-10 07:15:16 UTC
tags: BIN2DECfunctioninExc,ExcelFunctions
canonical_url: https://geekexcel.com/how-to-use-bin2dec-function-in-excel-365-with-examples/
---

## BIN2DEC Function in Excel:

In this article, we are going to see how to use **BIN2DEC Function** in **Excel** 365. This function will **convert Binary** numbers **to Decimal** values. Let’s get into this article to explore the syntax, definition, and Examples.


## BIN2DEC – Function Definition:

- This Function is mainly used for **Binary to Decimal Conversion**.
- The input numbers must contain only 10 characters, else it will return **#NUM! Error**.

## Basic Syntax:

**=BIN2DEC (number)**

### Argument Explanation:

**Number ** – Give the binary number that you want to convert to a decimal number. But it should contain only 10 characters. You can use positive or negative integers. Negative numbers can be represented in 2’s complement notation.

## Examples:

Let’s see some examples to know how to use BIN2DEC function in Microsoft Excel.

- The first bit of the binary number shows whether it is a **positive** number or **negative** number.

### Example 1: Convert Binary (+ve Numbers) to Decimal

- If the binary value starts at 0, it is a positive number.
- Refer to the below example.

![Binary (+ve Numbers) to Decimal Conversion](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/08/1-12.png)<figcaption id="caption-attachment-11479">Binary (+ve Numbers) to Decimal Conversion</figcaption>

If you **give less than 9 digits as binary values, it will assign Zeros automatically to the beginning of the number**. Then only it will return a corresponding Decimal Value.

### Example 2: Convert Binary (-ve Numbers) to Decimal

- If the Binary value starts at 1, it will be a negative value.
- The following screenshot has shown binary to decimal conversion using a negative number.

![Binary (-ve Number) to Decimal Conversion](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/08/2-10.png)<figcaption id="caption-attachment-11482">Binary (-ve Number) to Decimal Conversion</figcaption>

## Verdict:

In this article, we have discussed the definition, basic syntax, and usage of **BIN2DEC Function** with examples. Leave your **feedback** in the comment section. Thanks for visiting **[Geek Excel.](https://geekexcel.com/)** Keep Learning!!

### Read Also:

- [How to use ISERROR Function in Microsoft Excel 365?](https://geekexcel.com/how-to-use-iserror-function-in-microsoft-excel-365/)
- [Use N Function in Microsoft Excel 365 -Simple methods!](https://geekexcel.com/use-n-function-in-microsoft-excel-365-simple-methods/)
The Front End: S2-Ep #1
Tags: career, podcast, frontend
Published: 2020-08-10 07:13:10

Hello hello and welcome to the very first episode of season two! 

That's right, we're back with a bang and a run of episodes on freelancing and breaking away from your day job to freedom!

For the very first episode in season 2, the inimitable [Peter White](http://peterwhite.dev), a developer, entrepreneur and maker based in York, talks all things entrepreneurship. We'll find out how he found his way through being a freelancing, part-time developer, product owner and maker of digital things. 

Listen to the brand new episode here:

- Apple Podcasts > https://podcasts.apple.com/gb/podcast/the-front-end/id1499349107
- Pocket casts > https://pca.st/osul2zsa
- Spotify > https://open.spotify.com/show/4GuAxptrtY8Es5iHwp09dT
- Anchor > https://anchor.fm/the-front-end

## In this episode

Pete's a lover of all things tech and spends his time getting involved in interesting projects across development and bringing ideas to life. 

We discuss his journey into life as an entrepreneur and his top tips on how to follow a life by your own rules. 

## Listening direct

Want to listen directly from here?

{% spotify spotify:episode:798h7L0S9BNbCvqqaasm6Z%}

## Want to be a guest or sponsor the show?

We're always happy to take requests for guests to talk about a range of different development topics from careers to origin stories, learning and professional growth, frameworks and more.

Similarly, we're looking for sponsors to fill promotional slots within the show. 

You can find out more here:

- [Being a guest](https://thefrontendpodcast.site/guests)
- [Sponsorship information](https://thefrontendpodcast.site/sponsorship)

Thanks for listening!
Secure code review: Part 1 - Sanitize and validate all input
Tags: security, codequality, codenewbie
Published: 2020-08-10 07:11:41

Code reviews are hard to do well. Particularly when you’re not entirely sure about the errors you should be looking for! The DevSecOps approach pushes security testing left so that vulnerabilities can be found and fixed earlier, in the design, development, or CI/CD stages of the workflow. It’s always a good idea to check for security issues in code that you review. In case you don’t know what to look for, check out this series to give you pointers for your next code reviews!

## Sanitize and validate all input

Modern web applications have to interact with all sorts of third-party input. Although direct input from an end-user in the browser, for instance, is an obvious one. As developers, we all know that a user will insert unexpected things when this is possible. Making sure that direct input from a user is validated and sanitized accordingly is considered a core best practice to ensure that applications are not vulnerable to content injection. However, direct user input is by far not the only thing you should check. Basically every input that comes from the outside boundaries of your system should be considered and treated as potentially harmful. Think about things like:

- data feeds
- files
- events — an event-driven system, such as working closely with platforms like Functions as a Service
- data responses from other systems
- cookies

On top of all this, input that seems under your control at first sight, might be harmful. Think about it — when a malicious user is able to connect to your database directly, there is a backdoor to insert, for example, malicious code that will be executed in your system. The same principle holds for:

- command-line parameters
- environment variables
- system properties 
- data storage

All input, even the input that seems to be controlled by you, should be validated and sanitized. Check if the input makes sense. Using the type system in a type-safe language, can help you a lot. In addition, check on the format, range, size, file type, file name and take nothing for granted. User input should be sanitized, preferably using a well-vetted library, before it will be stored or used anywhere.

## Want to know more
Check the complete [Secure code review cheat sheet](https://snyk.io/blog/secure-code-review/)
The .native Event Modifier In Vue.js
Tags: vue, javascript
Published: 2020-08-10 03:45:49

Easy event handling is one of the most prominent features of Vue.js. However, there are some event handling concepts that I wish someone would have shared with me from day one!

Maybe you have encountered this problem: you have a component, say  `<special-button />`  and you want to include it in your  `App.vue`  (or any other  `.vue`  file for that matter) and bind a click event to it:

```javascript
<template>
  <div>
    <special-button @click="onClick" />
  </div>
</template>

<script>
import SpecialButton from "./components/SpecialButton";
export default {
  components: {
    SpecialButton,
  },
  methods: {
    onClick() {
      console.log("Clicked");
    },
  },
};
</script>
```

Now, you will find that this event does not fire when clicking your  `<special-button />`. The reason this does not work is because  `@click`  is a native event that you are trying to bind to a Vue  **component**. To fix this, all you have to do is simply add the  `.native`  event modifier to your event-listener:

```javascript
<template>
  <div>
    <special-button @click.native="onClick" />
  </div>
</template>
```

Read more about the  `.native`  modifier on the official Vue docs:

👉 [https://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components](https://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components)

✍ This post was originally published on my blog, for more Vue.js and js posts: [https://yossiabramov.com/](https://yossiabramov.com/)
MANAGING THE EVENT LOOP PHASES ⭕️ [Node JS Performance Optimizations]
Tags: node, tutorial, javascript, performance
Published: 2020-08-10 06:58:41

{% youtube ol56smloW2Q %}

In this first video of my [Node JS Performance Optimizations](https://www.youtube.com/watch?v=ol56smloW2Q&list=PLISqeoHsXJYAIfu4-mgNY0tloWz2uut1t) series, I show you how to level up you [Node JS](https://nodejs.org) skills by managing the Event Loop phases the right way. I provide simple, yet in depth explanations and examples of how the Event Loop works as well as how to best interact with it to write performant Node apps.

The tutorial is divided into 4 main sections:

#Quick Points about Node JS
**Video Location - 00:45**

Before diving in to the detail of what makes the Event Loop tick (mind the pun 😎), I go over a few basic points that everyone needs to first understand about Node and the Event Loop.

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

#Async Functions
**Video Location - 02:37**

In this section I provide an overview of the the 5 asynchronous functions you can use to interact with the Event Loop.

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

#Phases of the Event Loop
**Video Location - 03:55**

Using a simple diagram of the Event Loop, I explain the 5 main phases that make up a Cycle (Tick) and what each phase is used for.

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

#The Event Loop in Action
**Video Location - 09:15**

I demo in realtime how to interact with the Event Loop using the 5 mentioned asynchronous functions.

#Performance Tips
**Video Location - 17:43**

Finally, I provide a few quick tips on how to write good, performant Node JS applications.

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


Till next time. Cheers 🙂
Simple search bar function with JavaScript
Tags: javascript, webdev
Published: 2020-08-10 06:55:05

Searching algorithm is a common pattern we need to be familiar with building dynamic web applications.

In this blog I will walk you through implementing a basic string search functionality which you can use in your web app.

To begin with, we need to familiarize ourselves with JavaScript's filter function

A filter function works based on the return value of the function passed
* filter accepts a function and provides all the items in an array as an argument
* for each element in an array it looks at the value ie. either true or false return from the function
* hence we can implement the validation logic in the function that is passed inside the filter method

For example:

```javascript
let names = ['John', 'Kate', 'Ron'];

let newNameList = names.filter(i => true);

console.log(newNameList); >>> [ 'John', 'Kate', 'Ron' ]

let anotherNameList = names.filter ( i => i !== 'Kate' )

console.log(anotherNameList); >>> [ 'John', 'Ron' ]
```

Now that we are familiar with the filter function, let's turn our attention to the Data Structure

We will be using the following Data structure

```javascript
const users = [
    { userName: 'John', id: 1001},
    { userName: 'Rob', id: 1002},
    { userName: 'William', id: 1003},
    { userName: 'Kate', id: 1004},
    { userName: 'Jim', id: 1005},
    { userName: 'Greg', id: 1006},
];
```
Please note your API or Application might have its own data structure, so you need to take it into consideration before you implement the following code

The search function is as follows

```javascript
function findUserInfo(userName, searchString){
    return userName.toLowerCase().substr(0,searchString.length).includes(searchString.toLowerCase());
}
```

the above function takes userName & searchString as its argument, which means we need to pass the userName from the users object and the search string obtained from the form input of search bar

the main objective of the findUserInfo function is to compare the search string obtained from the search bar with the user name and return true or false based on the match

```javascript
userName.toLowerCase().substr(0,searchString.length)
```
the above code snippet from the function converts the user name to lower case and creates a sub string out of it based on the string length of the search term

```javascript
includes(searchString.toLowerCase())
```

the above code snippet compares the result of first code snippet and determines whether the string includes a certain value among its entries, returning true or false as appropriate

so we chain together both code snippets as follows

```javascript
userName.toLowerCase().substr(0,searchString.length).includes(searchString.toLowerCase());
```

Finally, we pass the result of the findUserInfo function to the filter function as follows

```javascript
let searchResult = users.filter(i => findUserInfo(i.userName, '<search_string>' ))
```

The search result gets the object containing the specific userName from the users object. You can use this to display appropriate information to the end user as per the applications requirement.