teleren/devto huggingface dataset:
Call Stack?!
Tags: javascript, learning, learningbyteaching
Published: 2022-09-04 11:50:11

The JavaScript engine keeps a call stack (basically a list) of the functions that are running.

When a function is invoked, it is added to the list. When all of the code inside a function has been run, then the function is removed from the call stack.



The cool part about a call stack is that a function doesn't have to complete before another function is added to the call stack. (𝘙𝘦𝘮𝘦𝘮𝘣𝘦𝘳 𝘵𝘩𝘢𝘵, 𝘑𝘢𝘷𝘢𝘚𝘤𝘳𝘪𝘱𝘵 𝘪𝘴 𝘢 𝘴𝘪𝘯𝘨𝘭𝘦-𝘵𝘩𝘳𝘦𝘢𝘥𝘦𝘥 𝘭𝘢𝘯𝘨𝘶𝘢𝘨𝘦; 𝘪𝘵 𝘤𝘢𝘯 𝘱𝘳𝘰𝘤𝘦𝘴𝘴 𝘰𝘯𝘦 𝘤𝘰𝘮𝘮𝘢𝘯𝘥 𝘢𝘵 𝘢 𝘵𝘪𝘮𝘦).



How it works: https://youtu.be/J9iKeNhoXNM



-----



𝗕𝘂𝘁, that happens if the function was synchronous "occurring at the same time".

What if the function was asynchronous "executed at some later point in time"?

For example: a setTimeout() or .addEventListener() like when you click on a button, a new element added!



How does JavaScript handle that?!!

- Where does the function go to wait?

- How does the function get run when it needs to?



Answer:

  This happens because of the JavaScript 𝙀𝙫𝙚𝙣𝙩 𝙇𝙤𝙤𝙥!



There are three parts you have to think about around the event loop:

- The Call Stack

- Web APIs/The browser

- An Event Queue



So, the asynchronous function is passed to the browser for future use "for example: on click function", the browser will hold that function until there's a click event.



What happens if someone clicks before a current synchronous code is done?

When there is a click event and there is code already running, the callback function on click can't just be added directly to the Call Stack because of JavaScript's run-to-completion nature; we can't interrupt any code that might currently be happening. So the function is placed in the Event Queue. When all of the functions in the Call Stack have finished (also known as idle time), then the Queue is checked to see if anything is waiting. If something is in the Queue, then it's run, creating an entry on the call stack.



In case of a setTimeout()?

It will also be passed to the browser, and after the time of milliseconds that is given, it is moved to the Event Queue (even if that was 0 milliseconds!), then the function is moved to the Call Stack and executed.





IMPORTANT: The key things to remember here are 1) current synchronous code runs to completion, and 2) events are processed when the browser isn't busy. Asynchronous code (such as loading an image) runs outside of this loop and sends an event when it is done.



Walk through an example: https://youtu.be/uBdemYBG-ek



** 𝘒𝘯𝘰𝘸𝘪𝘯𝘨 𝘩𝘰𝘸 𝘑𝘢𝘷𝘢𝘚𝘤𝘳𝘪𝘱𝘵 𝘢𝘯𝘥 𝘵𝘩𝘦 𝘌𝘷𝘦𝘯𝘵 𝘓𝘰𝘰𝘱 𝘸𝘰𝘳𝘬 𝘤𝘢𝘯 𝘩𝘦𝘭𝘱 𝘶𝘴 𝘸𝘳𝘪𝘵𝘦 𝘤𝘰𝘥𝘦 𝘵𝘩𝘢𝘵 𝘪𝘴 𝘮𝘰𝘳𝘦 𝘦𝘧𝘧𝘪𝘤𝘪𝘦𝘯𝘵.



_Credits: Udacity_
Run DB Scripts to Azure PostgreSQL Single Server using Azure CLI Task in pipeline
Tags: azure, pipelines, devops, postgres
Published: 2022-09-04 11:40:40

Greetings to my fellow Technology Advocates and Specialists.

In this Session, I will demonstrate **How to Run DB Scripts to Azure PostgreSQL Single Server using Azure CLI Task in Azure Classic Pipeline**

<u>**AUTOMATION OBJECTIVE:-**</u>
create a automated pipeline to run DB scripts to azure PostgreSQL single server.

<u>**REQUIREMENTS:-**</u>

1. Azure DevOps Organization and Project.
2. Azure Resource Manager Service Connection in Azure DevOps.
3. Azure PostgreSQL Single Server


**1. Create a classic pipeline and select agent specification as ubuntu-20.04**![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ydwcjnu98tpocm34412e.png)


**2. Click on add task, search azure CLI task and add the task**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z1mj01o843bb2q5i6xs9.png)


**3. Click on Azure CLI task and select the service connection, choose shell script, inline script.**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vbibry7ws07h3qtcf3v3.png)


**4. Now place the below az commands in inline script**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lejxmglnjajzs267p60d.png)
1. az login --service-principal -u $servicePrincipalId -p $servicePrincipalKey  --tenant $tenantId
2. az config set extension.use_dynamic_install=yes_without_prompt
3. az postgres flexible-server execute --name 'server-name' --admin-user 'adminuser@servername' --admin-password '******' --database-name 'databasename' -f "./test.sql"

First command helps to login into azure, second command helps to install necessary extension required to connect with postgreSQL server and third command helps to connect & execute DB script file to postgreSQL single server.

Also you need to click the highlighted checkbox to access the details like service principle id, key, tenant id from service connection.


**5. Save and run the pipeline, if pipeline runs successfully it executes the SQL commands in script file.**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/45kq6yid5du45db9xsvn.png)

**6. If there is any error in script file / SQL command the pipeline will be failed. ( In the below snapshot the pipeline failed due to the wrong database table name "hierarchy_typeee" )**

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

**Hope You Enjoyed the session!!!**
**Keep Learning | Spread Knowledge**
Enforcing HTTPs only on Flask
Published: 2022-09-04 11:40:29

Flask tutorials are designed to be incomprehensible by type(object)=Human and StackOverFlow answers are rather unending tree search that each go down a confused time-space pocket. 
So after hair pulling and near sucidial thoughts this all I had to do:

`pip install flask-talisman
`
`from flask import Flask
from flask_talisman import Talisman

app = Flask(__name__)
Talisman(app)`

Do not read the example it will make you more confused.

However this is for production so do not bother trying to do network stuff with Flask at all.
Vue Tips: Dynamic CSS with Vue Reactive Variables
Tags: vue, webdev, javascript
Published: 2022-09-04 11:21:41

If you use Vue, you might be used to having to apply different classes to tags based on the logic in your code. That's because we might want to reactively update an elements class based on when certain conditions. For example, suppose if a variable `check` is set to true, we want a `div` to show as **red**, but otherwise it should be **blue**. For such use cases, it's common to see the following code:

```html
<div :class="check === true ? 'red' : 'blue'">
    Hello World
</div>
```

Did you know, however, that you can actually put Vue reactive variables straight in your CSS with Vue 3? We have to use the composition API ([read more: difference between composition and options API](https://fjolt.com/article/vue-composition-api-vs-options-api)), but once we do, we can avoid the code below and put our variable straight in our CSS.

**Let's look at a simple example**. Suppose we have the following script in our Vue template:
```html
<script setup>
import { ref } from 'vue'

const check = true;
let color = ref('#ff0000');
  
if(check == true) {
  color.value = '#0000ff';
}
</script>
<template>
  <input value="Hello World" />
</template>
```

Simple, right? If `check` is `true`, the `color` variable is '`#0000ff`'. Otherwise it's '`#ff0000`'. In our CSS, with Vue 3, we can now directly reference `color` by using `v-bind`:
```html
<style>
  input {
    color: v-bind(color)
  }
</style>
```

Now if `color` updates reactively, the `color` of input will change to whatever the `color` variable is set to. That means you can avoid some awkward logic in your HTML tags, and start using Javascript variables straight in your CSS - and I think that's pretty cool.
Doubly Linked List
Tags: javascript
Published: 2022-09-04 10:56:55

```js
class Node {
  constructor(data, next = null, previous = null) {
    this.data = data;
    this.next = next;
    this.previous = previous;
  }
}

class linkedList {
  constructor(head = null, tail = null) {
    this.head = head;
    this.tail = tail;
    this.size = 0;
  }

  appendAtlast(data) {
    let node = new Node(data);
    if (this.head === null) {
      this.head = node;
      this.tail = node;
    } else {
      this.tail.next = node;
      node.previous = this.tail;
      this.tail = node;
    }
    this.size++;
  }

  addAtFirst(data) {
    let node = new Node(data);
    if (this.head === null) {
      this.head = node;
    } else {
      this.head.previous = node;
      node.next = this.head;
      this.head = node;
    }
    this.size++;
  }

  addAtIndex(data, index) {
    let node = new Node(data);

    if (index === 0) {
      this.addAtFirst(data);
      return;
    }
    if (index >= this.size) {
      return;
    }

    let count = 0;
    let current;
    while (count < index) {
      current = current.next;
      count++;
    }
    const previousNode = current.previous;
    previousNode.next = node;
    node.next = current;
    node.previous = previousNode;
    current.previous = node;
    this.size++;
  }

  remove() {
    if (this.tail) {
      this.size--;
      this.tail = this.tail.previous;
      if (this.tail) {
        this.tail.next = null;
      } else {
        this.head = null;
      }
    } else {
      this.head = null;
    }
  }

  removeAtIndex(index) {
    if (!Number.isInteger(index) || index < 0 || index > this.sixe) {
      console.log(`Invalid index. Current length is ${this.size}.`);
      return this;
    }

    if (index === 0) {
      this.head = this.head.next;
      this.head.previous = null;
      this.size--;
      return;
    }

    if (index === this.size - 1) {
      this.tail = this.tail.previous;
      this.tail.next = null;
      this.size--;
      return;
    }
    let count = 0;
    let current = this.head;
    while (count < index) {
      current = current.next;
      count++;
    }
    const previousNode = current.previous;
    const nextNode = current.next;
    previousNode.next = nextNode;
    nextNode.previous = previousNode;
    this.size--;
  }

  print() {
    let current = this.head;
    console.log("Size", this.size);
    while (current) {
      console.log(` ${current.data}`);
      current = current.next;
    }
  }
}

let ll = new linkedList();

ll.appendAtlast(100);
ll.appendAtlast(200);
ll.addAtFirst(99);
ll.appendAtlast(300);
ll.removeAtIndex(3);
ll.appendAtlast(300);
ll.remove();

ll.print();

```
Ether.js Library !
Tags: ethers, ethereum, blockchain, javascript
Published: 2022-09-04 10:56:52

A leading cryptographic library saw 4 million downloads in only August.

The developer report created by Electric Capital is the only estimate there has ever been for the number of web3 developers.
According to the analysis, there were 18,000 web3 developers by the end of 2021, compared to 31 million developers worldwide.

**Not much at all!**

However, as their technique only included open-source code repositories, it was impossible to determine how many 18,000 repositories were undercounted.

The number of "ethers" package downloads since January 2021 is depicted in the chart below. It is the foundation for many crypto/web3 applications, making it a valuable indicator of developer interest.

Since January 2021, monthly downloads have increased linearly, from 1 million in January to 4 million in August 2022.
You may assume that 18,000 is much too few, but it won't necessarily translate to millions of new developers monthly.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/npllcgldxvmri96vzaxp.PNG)[](https://npm-stat.com/charts.html?package=ethers&from=2021-01-01&to=2022-08-31)
Linked List
Tags: javascript
Published: 2022-09-04 10:56:04

```js
class Node {
  constructor(data, next = null) {
    this.data = data;
    this.next = next;
  }
}

class linkedList {
  constructor(head = null) {
    this.head = head;
    this.size = 0;
  }

  insertAtFirst(data) {
    this.head = new Node(data, this.head);
    this.size++;
  }
  insertAtLast(data) {
    if (this.head === null) {
      this.head = new Node(data);
    } else {
      let current = this.head;
      while (current.next) {
        current = current.next;
      }
      current.next = new Node(data);
    }
    this.size++;
  }
  insertAtIndex(data, index) {
    if (index > 0 && index > this.size) {
      return;
    }

    if (index === 0) {
      insertAtFirst(data);
      return;
    }

    const node = new Node(data);
    let count = 0;
    let previous, next;
    let current = this.head;

    while (count < index) {
      count++;
      previous = current;
      current = current.next;
    }
    node.next = current;
    previous.next = node;

    this.size++;
  }

  getAt(index) {
    let current = this.head;
    let count = 0;

    while (current) {
      if (count == index) {
        console.log(current.data);
      }
      count++;
      current = current.next;
    }

    return null;
  }

  removeAt(index) {
    if (index > 0 && index > this.size) {
      return;
    }

    let current = this.head;
    let previous;
    let count = 0;

    // Remove first
    if (index === 0) {
      this.head = current.next;
    } else {
      while (count < index) {
        count++;
        previous = current;
        current = current.next;
      }

      previous.next = current.next;
    }

    this.size--;
  }
  clearList() {
    this.head = null;
    this.size = 0;
  }

  print() {
    let current = this.head;

    while (current) {
      console.log(current.data);
      current = current.next;
    }
  }
}

let ll = new linkedList();

ll.insertAtFirst(100);
ll.insertAtFirst(200);
ll.insertAtFirst(300);
ll.insertAtLast(400);
ll.insertAtIndex(500, 3);
ll.getAt(3);
ll.removeAt(1);

ll.print();

```
Google Disabled Allow Less Secure App Access Option - Alternative Solution-App Password
Tags: googleapppassword, googlelesssecureappaccess, lesssecureappaccessalternative, laraveldeveloper
Published: 2022-09-04 10:31:52

Video: https://youtu.be/1q_g7U0bUDo
Hi, 
Today we will discuss the alternative solution for Google's " Allow less secure app access" option. 
You have probably received a message from Google saying “Google Less Secure App will no longer be available after May 30, 2022.” Google less secure app news clear that Google will no longer support the use of third-party apps or devices that ask you to sign in to your Google account using your username and password. 
So what is the solution? Or what is the alternative to google less secure apps option.
 There is no reason to be concerned. As an alternative to allowing less secure app option, google provides app password options. You can grant access to third-party applications by using a google app password. 
This is the password of 16 characters. 
How to generate google app passwords. 

Now let me tell you how to generate a google app password. 

App Password is the alternative solution of google’s “ less secure app access “ option available now: 
1.To begin, go to your Gmail Account and click on the Security option. 
2.You must have 2 step verification turned on. If you do not have 2-step verification turned on, turned it on.
3.After that, hit on the App Password option. 
4.Next, enter your Gmail credentials and press the Next option.
5.Choose App and Device as per your desire. 
6.Now, tap on the Generate password option in order to create a Google App password. 
7.Lastly, it will produce a 16-digit password to help you overcome the Google less Secure Apps end of life. 
8.Copy and use this app password in your third-party apps to grant access to your Gmail (Use this app password instead of the Gmail password in third-party app setting option) 

To know more about me & my products: 
Linkedin: https://www.linkedin.com/in/ismaildev/ 
Fiverr: https://www.fiverr.com/share/N0adLG
Upwork: https://www.upwork.com/services/product/fillable-pdf-forms-editable-pdf-form-1559801995713069056?ref=project_share 
Twitter: https://twitter.com/Ismaildev12 

Thank you.

#googleapppassword
#googlelesssecureappaccess
#googlelesssecureappaccessalternative
#laraveldeveloper
#laravelframework 
#laravelphp 
#laraveldevelopers 
#laraveldevelopment 
#phpdeveloper 
#phplaraveldeveloper 
#ismaildev 
#frontend 
#frontenddeveloper 
#frontenddevelopment 
#frontendwebdeveloper 
#fullstackdeveloper 
#fullstackdevelopment
The SASS Ampersand Tutorial
Tags: productivity, programming, webdev, tutorial
Published: 2022-09-04 08:47:32

The ampersand `&` operator is often used when nesting in SASS and is an extremely useful feature.

It can be a great time-saver, especially if you happen to be coding your stylesheets with the [BEM methodology](http://getbem.com/introduction/), or using any systematic naming convention for your class names.

See the following HTML:
```html
<button class = "btn btn--red"> Click me! </button>
```
Typical styling would be something like this:
```css
.btn {
  display: inline-block;
  padding: 15px 32px;
}
.btn--red {
  background-color: #ff0000; // Red
}
.btn:hover {
  background-color: #fff; // White
}
```
With the `&` operator we can be much more efficient:
```css
.btn {
  display: inline-block;
  padding: 15px 32px;
  &--red {
    background-color: #ff0000; // Red
  }
  &:hover {
    background-color: #fff; // White
  }
}
```
Notice that we’ve now nested the child selectors that use the same `.btn` name, represented by the `&` operator. name.

When compiled the `&` operator will be replaced by its enclosing selector name!

In the next post, we’ll learn about control directives.

## Conclusion
If you liked this blog post, follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!
![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijinng8k7bf23v0o6gkj.png) If you enjoyed this article & would like to leave a tip — click [here](https://www.buymeacoffee.com/rembertdesigns)

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)

- [Hashnode](https://rembertdesigns.hashnode.dev/)

- [Devto](https://dev.to/rembertdesigns)

- [Medium](https://medium.com/@rembertdesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)
CSS Subtle Slideup Reveal Animation
Tags: css, webdev, design
Published: 2022-09-04 09:42:25

Within the document, there are sections that if animated just a bit, could enhance the overall visual appeal of the design. One such animation is a simple, slide-up reveal that guides the user's attention unobtrusively.

```scss
.reveal {
  animation: 1.5s revealup ease infinite;
}

@keyframes revealup {
  from {
    opacity: 0;
    transform: translatey(-15%);
  }

  to {
    opacity: 1;
    transform: translatey(-25%);
  }
}
```

{% codepen https://codepen.io/deepakdevanand/pen/ZEoEJYQ %}
Self Reflections
Tags: cloud, programming, git, devops
Published: 2022-09-04 09:41:10

**Am i what i think i am?**

Been a while i wrote and now i feel like reflecting on my work rate in the past weeks to see maybe i it can get me back motivated and on track.

I Majored on two things this past weeks and i'm only going to talk about one here, maybe next time i talk about the other.

## My Cloud Engineering Journey so far
Been in a cohort at Altschool and it's been a great experience so far; from learning the basics of software engineering(Html, CSS, JS) and now into the main course i've been enjoying myself so far. I've gotten myself acquainted with the Linux environment, been using the OS for a couple of years now and it's broaden my knowledge and added more usecases to the OS aside my initial Cybersec researches.

For a while i had problems understanding Git, but now i feel confident with it and with all this eye openings all i can say is understanding a situation or a particular language, framework, OS or Distro is the way to go. There are answers, numerous ones on Google or wherever you search for problems and those answers will maybe get you past that issue but trust me knowing it and understanding is best for you.

At The Moment i'm not the best at this Cloud Thing but Day after day i'm getting a hang of it, i still will face more difficulties as i am now but i'm most certainly sure i'll get there and solve those problem.

We(Humans) made them and i will understand it all.
CSS Counter
Tags: css, html, webdev, codenewbie
Published: 2022-09-04 09:31:40

CSS counter is mostly used on website loading as a loader. But here we made a CSS counter for knowledge or fun purpose for you. In this counter increment CSS, we used animations and also used after CSS pseudo-element.

You can use this element on your website as a loader and you can change the colour combination and alignment of this CSS counter. Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[Source Code](https://w3hubs.com/css-counter/)
SASS Inheritance Tutorial
Tags: productivity, programming, webdev, tutorial
Published: 2022-09-04 08:43:51

Another great feature of Sass is **inheritance**. We implement this using the `@extend` directive.

Inheritance is a feature of SASS that allows multiple classes to share a common set of properties with one another.

## Example
Some typical CSS code for styling a button:
```css
.button {
  background-color: #0000FF; // Blue
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.5rem;
}
```
If we happen to have a number of buttons on our website, all of which are styled in a similar manner, we would have a good case for inheritance!

We would implement a secondary button via inheritance like so:
```css
.button-secondary {
  @extend .button;
  background-color: #4CAF50; // Green
} 
```
Our `.button-secondary` class will take on all of the properties and values set the `.button class`, with the exception of `background-color` which we’ve decided to set to green.

The use of inheritance helps us to keep our code neat, clean and focused on constructing reusable components.

Up next in this series, we’ll take a look at the `&` operator.

## Conclusion
If you liked this blog post, follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!
![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijinng8k7bf23v0o6gkj.png) If you enjoyed this article & would like to leave a tip — click [here](https://www.buymeacoffee.com/rembertdesigns)

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)

- [Hashnode](https://rembertdesigns.hashnode.dev/)

- [Devto](https://dev.to/rembertdesigns)

- [Medium](https://medium.com/@rembertdesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)