问:
Delete key and value form a dictionary, if it is longer than 5 symbols
How to create a new dictionary where all keys and values are converted to string type? If string length is more than 5 symbols it must be excluded from the answer (both the key and value)

My code now looks like this:

file1data = {"1":"2",2:5,"12dade":-1,"1231":14,"-2":7}

key_values = file1data.items()
new_dictionary = {str(key):str(value) for key, value in key_values}

print((str(new_dictionary)))

```

It can covert all values and keys to a string type, but not detect if length is more than 5.

For example if is given this dictionary: {"1":"2",2:5,"12dade":-1,"1231":14,"-2":7}

The result should be: {"1":"2","2":"5","1231":"14","-2":"7"}

答:
You can achieve this by using an if clause inside of the dictionary comprehension, like so:

```<code>file_data = {"1": "2", 2: 5, "12dade": -1, "1231": 14, "-2": 7}
filtered_file_data = {str(key): str(value) for key, value in file_data.items() if len(str(key)) <= 5 and len(str(value)) <= 5}
print(filtered_file_data)
</code>```

Output:

```<code>{'1': '2', '2': '5', '1231': '14', '-2': '7'}
</code>```

Body:
How to create a new dictionary where all keys and values are converted to string type? If string length is more than 5 symbols it must be excluded from the answer (both the key and value)

My code now looks like this:

file1data = {"1":"2",2:5,"12dade":-1,"1231":14,"-2":7}

key_values = file1data.items()
new_dictionary = {str(key):str(value) for key, value in key_values}

print((str(new_dictionary)))

It can covert all values and keys to a string type, but not detect if length is more than 5.

For example if is given this dictionary: {"1":"2",2:5,"12dade":-1,"1231":14,"-2":7}

The result should be: {"1":"2","2":"5","1231":"14","-2":"7"}

Body:
You can achieve this by using an if clause inside of the dictionary comprehension, like so:

file_data = {"1": "2", 2: 5, "12dade": -1, "1231": 14, "-2": 7}
filtered_file_data = {str(key): str(value) for key, value in file_data.items() if len(str(key)) <= 5 and len(str(value)) <= 5}
print(filtered_file_data)

Output:

{'1': '2', '2': '5', '1231': '14', '-2': '7'}


来源: stackexchange

问:
gitlab repo without knowledge of your remote on github
I have a project which is published on Gitlab. But I also want to have it on Github as a private repo... I just have a question... if I clone it locally and then add a remote to the Github repository... this information will be accessible from the Gitlab repo? If so, how could I get it? I mean... assuming the Github remote is called remote_github and someone clones the gitlab repo locally when I run git remote it doesn't output remote_github.

答: No, the list of remotes is specific to your local clone. It is stored in .git/config (under [remote "origin"] and similarly-named sections for other remotes) and is not shared with any of the remotes. So the Gitlab server will not know that you also have pushed it to GitHub.

ContentLicense: CC BY-SA 4.0


问:
How to print multi line text box value without '\n' by tkinter
I want to print textbox value without '\n' from tkinter,
When I print then it show one line and next line valu adding with "\n', actually I fetch the valu from mysql</p>

答:
To remove a \n from the end of a string, use rstrip('\n'):

lines = [
    "Hello, world!\n",
    "No newline",
    "", # empty
    "Two\nNewlines\n",
    "Intermediate\nNewline",
]

for line in lines:
    s = line.rstrip("\n")
    print("-" * 20)
    print(s)

# gives
"""
--------------------
Hello, world!
--------------------
No newline
--------------------

--------------------
Two
Newlines
--------------------
Intermediate
Newline
"""
```


问:
Flux: How to get the last record for each value
Ok this have to be something easy, but I can not find out.

Y have the following table, obtained with flux:

Ok, I am monitoring Jira, and as you see, in the column "event_type" I have the creation and the following jiras updates.
The target here is get the newest record from each "_value" column, I mean, each jira

Any idea about how to achieve this?

Thank you!

答:
At first need to group by value and then just get last

```<code>|> group(columns: ["_value"])
|> last()
</code>```

Body:
At first need to group by value and then just get last

|> group(columns: ["_value"])
|> last()


问:
How to implement animated javascript background in HTML
I'm attempting to do an animated background like https://benscott.dev uses. I cannot even seem to find the self closing tags for his canvas elements so I'm honestly not sure what I need to accomplish what he has done here. I'm sure I'm missing something simple here, I just can't seem to find it. I have bootstrap implemented, is it causing the problem?

const canvasDotsBg = function () {
  const canvas = document.querySelector('.canvas-2'),
    ctx = canvas.getContext('2d'),
    colorDot = [
      'rgb(81, 162, 233)',
      'rgb(81, 162, 233)',
      'rgb(81, 162, 233)',
      'rgb(255, 77, 90)',
    ], // 75% of dots are blue. 25% pink
    color = 'rgb(81, 162, 233)';

  // ctx.globalAlpha = 0.8;
  canvas.width = document.body.scrollWidth;
  canvas.height = window.innerHeight;
  canvas.style.display = 'block';
  // ctx.fillStyle = colorDot;
  // ctx.fillStyle = 'hsl(' + 360 * Math.random() + ', 50%, 50%)';
  ctx.lineWidth = 0.3;
  ctx.strokeStyle = color;

  let mousePosition = {
    x: (30 * canvas.width) / 100,
    y: (30 * canvas.height) / 100,
  };

  const windowSize = window.innerWidth;
  let dots;

  if (windowSize > 1600) {
    dots = {
      nb: 100,
      distance: 0,
      d_radius: 0,
      array: [],
    };
  } else if (windowSize > 1300) {
    dots = {
      nb: 75,
      distance: 0,
      d_radius: 0,
      array: [],
    };
  } else if (windowSize > 1100) {
    dots = {
      nb: 50,
      distance: 0,
      d_radius: 0,
      array: [],
    };
  } else if (windowSize > 800) {
    dots = {
      nb: 1,
      distance: 0,
      d_radius: 0,
      array: [],
    };
    ctx.globalAlpha = 0;
  } else if (windowSize > 600) {
    dots = {
      nb: 1,
      distance: 0,
      d_radius: 0,
      array: [],
    };

    ctx.globalAlpha = 0;
  } else {
    dots = {
      nb: 1,
      distance: 0,
      d_radius: 0,
      array: [],
    };

    ctx.globalAlpha = 0;
  }

  // decided to turn off connecting dots under 1100px

  // } else if (windowSize > 650) {
  //   dots = {
  //     nb: 400,
  //     distance: 50,
  //     d_radius: 185,
  //     array: [],
  //   };
  // } else if (windowSize > 500) {
  //   dots = {
  //     nb: 325,
  //     distance: 45,
  //     d_radius: 170,
  //     array: [],
  //   };
  // } else {
  //   dots = {
  //     nb: 270,
  //     distance: 45,
  //     d_radius: 140,
  //     array: [],
  //   };
  // }

  function Dot() {
    this.x = Math.random() * canvas.width;
    this.y = Math.random() * canvas.height;

    this.vx = -0.5 + Math.random();
    this.vy = -0.5 + Math.random();

    this.radius = Math.random() * 1.5;

    // this.colour = 'hsl(' + 360 * Math.random() + ', 50%, 50%)';
    this.colour = colorDot[Math.floor(Math.random() * colorDot.length)];
  }

  Dot.prototype = {
    create: function () {
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
      // ctx.fillStyle = this.colour;

      // meed to acount for scroll height since the bg is static and uses mouse position
      const top =
        (window.pageYOffset || document.scrollTop) - (document.clientTop || 0);

      // make the dot colour fade out the further they are from the mouse

      const dotDistance =
        ((this.x - mousePosition.x) ** 2 +
          (this.y - mousePosition.y + top) ** 2) **
        0.5;
      const distanceRatio = dotDistance / (windowSize / 2);

      // this chops the bracket off the rgb colour and ads an opacity
      ctx.fillStyle = this.colour.slice(0, -1) + `,${1 - distanceRatio})`;
      // ctx.fillStyle = this.colour;

      ctx.fill();
    },

    animate: function () {
      // dont animate the first dot, it will follow mouse
      for (let i = 1; i < dots.nb; i++) {
        const dot = dots.array[i];

        if (dot.y < 0 || dot.y > canvas.height) {
          dot.vx = dot.vx;
          dot.vy = -dot.vy;
        } else if (dot.x < 0 || dot.x > canvas.width) {
          dot.vx = -dot.vx;
          dot.vy = dot.vy;
        }
        dot.x += dot.vx;
        dot.y += dot.vy;
      }
    },

    line: function () {
      for (let i = 0; i < dots.nb; i++) {
        for (let j = 0; j < dots.nb; j++) {
          const i_dot = dots.array[i];
          const j_dot = dots.array[j];

          if (
            i_dot.x - j_dot.x < dots.distance &&
            i_dot.y - j_dot.y < dots.distance &&
            i_dot.x - j_dot.x > -dots.distance &&
            i_dot.y - j_dot.y > -dots.distance
          ) {
            if (
              i_dot.x - mousePosition.x < dots.d_radius &&
              i_dot.y - mousePosition.y < dots.d_radius &&
              i_dot.x - mousePosition.x > -dots.d_radius &&
              i_dot.y - mousePosition.y > -dots.d_radius
            ) {
              ctx.beginPath();
              ctx.moveTo(i_dot.x, i_dot.y);
              ctx.lineTo(j_dot.x, j_dot.y);

              // make the fill colour fade out the further you are from the mouse
              const dotDistance =
                ((i_dot.x - mousePosition.x) ** 2 +
                  (i_dot.y - mousePosition.y) ** 2) **
                0.5;
              let distanceRatio = dotDistance / dots.d_radius;

              // make it so it doesnt fade out completely
              distanceRatio -= 0.3;
              if (distanceRatio < 0) {
                distanceRatio = 0;
              }

              ctx.strokeStyle = `rgb(81, 162, 233, ${1 - distanceRatio})`;

              ctx.stroke();
              ctx.closePath();
            }
          }
        }
      }
    },
  };

  function createDots() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (let i = 0; i < dots.nb; i++) {
      dots.array.push(new Dot());
      var dot = dots.array[i];

      dot.create();
    }

    // first dot to be relativley large
    dots.array[0].radius = 1.5;

    // first dot to be blue
    dots.array[0].colour = '#51a2e9';

    // dot.line();
    dot.animate();
  }

  // window.onmousemove = function (parameter) {
  //   mousePosition.x = parameter.pageX;
  //   mousePosition.y = parameter.pageY;

  //   // sometimes if the mouse is off screen on refresh, it bugs out
  //   try {
  //     // want the first dot to follow the mouse
  //     dots.array[0].x = parameter.pageX;
  //     dots.array[0].y = parameter.pageY;
  //   } catch {
  //     //
  //   }
  // };

  window.onscroll = function (parameter) {
    mousePosition.x = window.innerWidth / 2;
    mousePosition.y = window.innerHeight / 2;

    const top =
      (window.pageYOffset || document.scrollTop) - (document.clientTop || 0);
    mousePosition.y += top;
    // console.log(top);

    // console.log(mousePosition.x);
  };

  // mousePosition.x = window.innerWidth / 2;
  // mousePosition.y = window.innerHeight / 2;

  const draw = setInterval(createDots, 1000 / 30);

  window.onresize = function () {
    clearInterval(draw);
    canvasDotsBg();

    // console.log('yoza');
  };
};

export default canvasDotsBg;```
<pre class="snippet-code-css lang-css prettyprint-override"><code>@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

header {
    animation: 1s ease-out 0s 1 slideInFromLeft;

    background: #333;
    padding: 30px;
  }

html {
    scroll-behavior: smooth;
}

a {
    color:rgb(0, 255, 234);
    text-decoration: none;
    font-family: FoundrySterlingOT3W03-Bold,FoundrySterlingOT3W10-Bold,Arial,Helvetica,sans-serif;
    font-weight: 900;
    right: 0px;
}

a:hover {
    color: white;
    transform: scale(1.2);
    text-decoration: none;
}

.header {
    background: rgba(0, 0, 0, 0.2);
    position: fixed;
    width: 100%;
    margin-top: -20px;
    max-height: 82px;
}

.linkedin {
width: 40px;
height: 40px;
margin-top: -7px;
}

.intro {
    margin-top: 400px;
    text-align: center;
    font-family: montserrat, sans-serif;
    color: white;
    font-size: xx-large;
}

#kevin {
    color: rgb(0, 255, 234);
}

#resume {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    margin-top: 20px;
    height: 50px;
    width: 130px;
    font-size: large;
    border-width: 3px;
    border-color: rgb(0, 255, 234);
    background-color: transparent;
    color: white;
    padding: 0px;
    line-height: 45px;
    justify-content: center;
    font-family: montserrat, sans-serif;

}

#resume:hover {
    transform: scale(1.1);
    color:rgb(0, 255, 234);
}

.skills {
    justify-content: center;
    list-style-type: none;
    text-align: center;
    left: 100px;
    padding: 10px;
    margin-top: 250px;

}

li {
    margin: 20px;
    color: white;
    font-family: montserrat, sans-serif;
    font-size: xx-large;
}

.about {
    margin-top: 800px;
    color: white;
    font-family: montserrat, sans-serif;
    font-size: xx-large;
    text-align: left;
    justify-content: center;
}

.contact {
    margin-top: 920px;
    color: white;
    font-size: xx-large;
    font-family: montserrat, sans-serif;
    text-align: center;
    margin-bottom: 450px;

}

#about-scroll {
    margin-top: 500px;
}

#contact-scroll {
    margin-top: 920px;
}</code>```

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

      Home
      Skills
      About
      Contact

<link rel="stylesheet" href="Portfolio.css">

  <canvas class="canvas-2" width="1903" height="937" style="display: block;">

```

答:
I made this project when I was still studying, I don’t need it anymore, but I hope it will help you somehow

P.S: GL HF ^_^

const menu_button = document.querySelector(".menu-button");
        const container = document.querySelector(".container");
        const menu = document.querySelector(".menu");
        const navbar = document.querySelector(".navbar");

        const Top = document.querySelector("html");
        const info = document.querySelector(".info-block");
        const more = document.querySelector(".more-block");
        const service = document.querySelector(".service-block");
        const contacts = document.querySelector(".footer");
        const bar = document.getElementById("indicator");

        menu_button.addEventListener("click", () => {
            menu_button.classList.toggle("active");
            menu.classList.toggle("show-menu");
        });

        function toInfo(){
            info.scrollIntoView({behavior: "smooth", block: "start"});
        }

        function toMore(){
            more.scrollIntoView({behavior: "smooth", block: "start"});
        }

        function toServices(){
            service.scrollIntoView({behavior: "smooth", block: "start"});
        }

        function toContacts(){
            contacts.scrollIntoView({behavior: "smooth", block: "start"});
        }

        window.addEventListener('scroll', function(){
            var y = window.scrollY;
            if(y > 50){
                navbar.style.cssText = "height: 55px;";
                menu.style.cssText = "padding-top: 60px;";
                bar.style.cssText = "top: 55px;";
            }
            else{
                navbar.style.cssText = "height: 75px;";
                menu.style.cssText = "padding-top: 80px;";
                bar.style.cssText = "top: 75px;";
            }
        })

        window.addEventListener('scroll', function(){
            var y = window.scrollY;
            if(y > 1600){
                service.style.cssText = "transform: translateX(0);opacity: 1;";
            }
            else{
                service.style.cssText = "transform: translateX(400px);opacity: 0;";
            }
        })

        window.addEventListener('scroll', function(){
            var y = window.scrollY;
            if(y > 650){
                more.style.cssText = "transform: translateX(0);opacity: 1;";
            }
            else{
                more.style.cssText = "transform: translateX(-400px);opacity: 0;";
            }
        })

        window.onscroll = function() {
            var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
          var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
          var scrolled = (winScroll / height) * 100;
          bar.style.height = scrolled + "%";
        };```
<pre class="snippet-code-css lang-css prettyprint-override"><code>*{
            font-family: consolas;
        }

        body{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            margin-top: 75px;
            display: flex;
            justify-content: center;
            flex-direction: column;
            overflow-x: hidden;
            background-color: white);
        }

        .progress-bar{
            position: fixed;
        width: 5px;
        left: 0px;
        transition: .5s;
        background: linear-gradient(to right, #008AFF, #00FFE7);
        z-index: 999;
        animation: animate_bar 5s infinite linear;
        }

        @keyframes animate_bar{
            0%,100%{
                filter: hue-rotate(0deg);
            }
            50%{
                filter: hue-rotate(360deg);
            }
        }

        .navbar{
            top: 0;
            width: 90%;
            height: 75px;
            display: flex;
            position: fixed;
            padding: 0 5%;
            transition: .5s;
            align-items: center;
            background-color: white;
            z-index: 999;
            border-bottom: 4px solid black;
        }

        .logo{
            font-size: 48px;
        }

        .logo-link{
            text-decoration-line: none;
            color: black;
        }

        .menu-button{
            position: fixed;
            width: 2rem;
            height: 2rem;
            right: 5%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            cursor: pointer;
            z-index: 9;
        }

        .bar{
            width: 2rem;
            height: 1.5px;
            background-color: #000;
            transition: .5s;
        }

        .bar:before,
        .bar:after{
            content: "";
            position: absolute;
            width: inherit;
            height: inherit;
            background-color: #000;
            transition: .5s;
        }

        .bar:before{
            transform: translateY(-9px);
        }

        .bar:after{
            transform: translateY(9px);
        }

        .menu-button.active .bar{
            transform: rotate(360deg);
            background-color: transparent;
        }

        .menu-button.active .bar:before{
            transform: translateY(0) rotate(45deg);
        }

        .menu-button.active .bar:after{
            transform: translateY(0) rotate(-45deg);
        }

        .menu{
            position: fixed;
            width: 20%;
            right: 0;
            top: 0;
            padding-top: 75px;
            height: 100vh;
            display: flex;
            transition: .5s;
            background-color: #555;
            transform: translateX(100%);
            border-left: 2px solid #000;
        }

        .show-menu{
            transform: translateX(0);
        }

        .menu ul{
            list-style: none;
            width: 100%;
            padding: 0;
            margin: 0;
        }

        .menu-link{
            width: 100%;
            text-decoration: none;
            padding: 0.7rem 0 0.7rem 2rem;
            display: block;
            color: #000;
            font-size: 1.2rem;
            transition: 0.5s;
            border-bottom: 2px solid #000;
            color: white;
            cursor: pointer;
        }

        .menu-link:hover{
            border-color: red;
        }

        .container{
            position: relative;
            transition: .5s;
            width: 90%;
            margin: 0 auto;
        }

        .margin-right{
            transform: translateX(-15%);
            width: 65%;
        }

        .block{
            padding: 5rem;
            margin: 2rem 0;
            color: white;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .block > *{
            margin: 2rem;
        }

        .top-block{
            background-image: url("https://wallpapercave.com/wp/wp2639558.jpg");
            animation: anim_left .5s 1 linear;
        }

        @keyframes anim_left{
            0%{
                transform: translateX(-400px);
                opacity: 0;
            }
        }

        .info-block{
            background-image: url("https://wallpapercave.com/wp/wp2639574.jpg");
            animation: anim_right 1s 1 linear;
        }

        @keyframes anim_right{
            0%,50%{
                transform: translateX(400px);
                opacity: 0;
            }
            100%{
                transform: translateX(0);
                opacity: 1;
            }
        }

        .more-block{
            background-image: url("https://wallpapercave.com/wp/wp4695971.jpg");
            display: flex;
            transition: .5s;
            justify-content: center;
            flex-wrap: wrap;
            opacity: 0;
            transform: translateX(-400px);
        }

        .more-title{
            width: 100%;
            font-size: 46px;
            letter-spacing: .75rem;
            margin: 0;
        }

        .more-category-block{
            width: 260px;
            padding: 2rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            border: 2px solid white;
            background-color: rgba(0, 0, 0, .75);
        }

        .more-img{
            position: relative;
            width: 40%;
        }

        .service-block{
            background-image: url("https://wallpapercave.com/wp/wp5412909.jpg");
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            padding: 5rem 0;
            transition: .5s;
            opacity: 0;
            transform: translateX(-400px);
        }

        .service-title{
            width: 100%;
            font-size: 46px;
            letter-spacing: .75rem;
            margin: 0;
        }

        .service-category-block{
            width: 320px;
            margin: 1rem;
            border: 2px solid white;
            display: flex;
            justify-content: center;
            flex-direction: column;
            background-color: rgba(0, 0, 0, .75);
        }

        .pro:before{
            position: absolute;
            width: 5rem;
            height: 5rem;
            border: 2px solid white;
            background-color: black;
            border-radius: 50%;
            font-size: 26px;
            color: red;
            font-weight: 600;
            text-align: center;
            line-height: 5rem;
        }

        .pro:before{
            content: "-25%";
            transform: translateX(270px) translateY(-340px) rotate(-7deg);
        }

        .service-list{
            list-style: none;
            line-height: 1.5;
        }

        .service-name{
            font-size: 24px;
            margin: 1rem;
        }

        .sub-service-name{
            margin: 0;
            font-size: 14px;
        }

        .text-center{
            text-align: center;
        }

        .yes:before{
            content: "✔";
            position: absolute;
            transform: translateX(-1.4rem);
            color: green;
        }

        .no:before{
            content: "✘";
            position: absolute;
            transform: translateX(-1.4rem);
            color: red;
        }

        .price{
            font-size: 24px;
        }

        .btn{
            outline: none;
            background-color: transparent;
            border: 1px solid white;
            color: white;
            padding: 1rem 2rem;
            font-size: 16px;
            transition: .5s;
            cursor: pointer;
            margin: 0 2rem;
        }

        .btn:hover{
            color: black;
            border-color: black;
            background-color: white;
        }

        .btn-center{
            margin: 1rem 5rem;
        }

        .footer{
            position: relative;
            width: 100%;
            bottom: 0;
            background-image: url("https://wallpapercave.com/wp/wp4978922.jpg");
            background-position: center;
            color: white;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }

        .contacts{
            height: 100%;
            display: block;
            margin: 0 4rem;
        }

        .contact-list{
            list-style: none;
            padding: 0;
            line-height: 1.75;
        }</code>```

Wolf Gym

Home

About us

Why us

Services

Contacts

Welcome to the official "Wolf Gym" website.

            <button class="btn" onclick="toServices()">View proposals</button>

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus saepe sed provident odio accusamus, molestias corrupti tenetur iste. Eligendi et, quo voluptates adipisci quam suscipit maiores eum dolor porro praesentium.

Lorem :

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

            <button class="btn" onclick="alert('Site-ul se afla in proces de creare!')">More</button>

Why us

Lorem ipsum dolor sit amet consectetur adipisicing, elit. Reiciendis necessitatibus quos unde. Illo ut maxime laudantium maiores numquam totam natus vitae voluptate, ducimus dolorem facere consectetur mollitia porro temporibus repudiandae.

Lorem ipsum dolor sit amet consectetur adipisicing, elit. Reiciendis necessitatibus quos unde. Illo ut maxime laudantium maiores numquam totam natus vitae voluptate, ducimus dolorem facere consectetur mollitia porro temporibus repudiandae.

Lorem ipsum dolor sit amet consectetur adipisicing, elit. Reiciendis necessitatibus quos unde. Illo ut maxime laudantium maiores numquam totam natus vitae voluptate, ducimus dolorem facere consectetur mollitia porro temporibus repudiandae.

Lorem ipsum dolor sit amet consectetur adipisicing, elit. Reiciendis necessitatibus quos unde. Illo ut maxime laudantium maiores numquam totam natus vitae voluptate, ducimus dolorem facere consectetur mollitia porro temporibus repudiandae.

Our offers

Basic (30 days)

This service includes :

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit

Lorem ipsum dolor sit amet consectetur adipisicing elit

Lorem ipsum dolor sit amet consectetur adipisicing elit

Lorem ipsum dolor sit amet consectetur adipisicing elit

200 mdl

                <button class="btn btn-center" onclick="alert('Site-ul se afla in proces de creare!')">Buy</button>

Pro (365 days)

This service includes :

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

6 500 mdl

                <button class="btn btn-center" onclick="alert('Site-ul se afla in proces de creare!')">Buy</button>

Contacte

Adresa de email : wolf@gym.com

Tel. : +373 555 22 555

Fix : 022 555 222

Physiz addresses : 3370  Henry Ford Avenue

  ```

Body:
I'm attempting to do an animated background like https://benscott.dev uses. I cannot even seem to find the self closing tags for his canvas elements so I'm honestly not sure what I need to accomplish what he has done here. I'm sure I'm missing something simple here, I just can't seem to find it. I have bootstrap implemented, is it causing the problem?

const canvasDotsBg = function () {
  const canvas = document.querySelector('.canvas-2'),
    ctx = canvas.getContext('2d'),
    colorDot = [
      'rgb(81, 162, 233)',
      'rgb(81, 162, 233)',
      'rgb(81, 162, 233)',
      'rgb(255, 77, 90)',
    ], // 75% of dots are blue. 25% pink
    color = 'rgb(81, 162, 233)';

  // ctx.globalAlpha = 0.8;
  canvas.width = document.body.scrollWidth;
  canvas.height = window.innerHeight;
  canvas.style.display = 'block';
  // ctx.fillStyle = colorDot;
  // ctx.fillStyle = 'hsl(' + 360 * Math.random() + ', 50%, 50%)';
  ctx.lineWidth = 0.3;
  ctx.strokeStyle = color;

  let mousePosition = {
    x: (30 * canvas.width) / 100,
    y: (30 * canvas.height) / 100,
  };

  const windowSize = window.innerWidth;
  let dots;

  if (windowSize > 1600) {
    dots = {
      nb: 100,
      distance: 0,
      d_radius: 0,
      array: [],
    };
  } else if (windowSize > 1300) {
    dots = {
      nb: 75,
      distance: 0,
      d_radius: 0,
      array: [],
    };
  } else if (windowSize > 1100) {
    dots = {
      nb: 50,
      distance: 0,
      d_radius: 0,
      array: [],
    };
  } else if (windowSize > 800) {
    dots = {
      nb: 1,
      distance: 0,
      d_radius: 0,
      array: [],
    };
    ctx.globalAlpha = 0;
  } else if (windowSize > 600) {
    dots = {
      nb: 1,
      distance: 0,
      d_radius: 0,
      array: [],
    };

    ctx.globalAlpha = 0;
  } else {
    dots = {
      nb: 1,
      distance: 0,
      d_radius: 0,
      array: [],
    };

    ctx.globalAlpha = 0;
  }

  // decided to turn off connecting dots under 1100px

  // } else if (windowSize > 650) {
  //   dots = {
  //     nb: 400,
  //     distance: 50,
  //     d_radius: 185,
  //     array: [],
  //   };
  // } else if (windowSize > 500) {
  //   dots = {
  //     nb: 325,
  //     distance: 45,
  //     d_radius: 170,
  //     array: [],
  //   };
  // } else {
  //   dots = {
  //     nb: 270,
  //     distance: 45,
  //     d_radius: 140,
  //     array: [],
  //   };
  // }

  function Dot() {
    this.x = Math.random() * canvas.width;
    this.y = Math.random() * canvas.height;

    this.vx = -0.5 + Math.random();
    this.vy = -0.5 + Math.random();

    this.radius = Math.random() * 1.5;

    // this.colour = 'hsl(' + 360 * Math.random() + ', 50%, 50%)';
    this.colour = colorDot[Math.floor(Math.random() * colorDot.length)];
  }

  Dot.prototype = {
    create: function () {
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
      // ctx.fillStyle = this.colour;

      // meed to acount for scroll height since the bg is static and uses mouse position
      const top =
        (window.pageYOffset || document.scrollTop) - (document.clientTop || 0);

      // make the dot colour fade out the further they are from the mouse

      const dotDistance =
        ((this.x - mousePosition.x) ** 2 +
          (this.y - mousePosition.y + top) ** 2) **
        0.5;
      const distanceRatio = dotDistance / (windowSize / 2);

      // this chops the bracket off the rgb colour and ads an opacity
      ctx.fillStyle = this.colour.slice(0, -1) + `,${1 - distanceRatio})`;
      // ctx.fillStyle = this.colour;

      ctx.fill();
    },

    animate: function () {
      // dont animate the first dot, it will follow mouse
      for (let i = 1; i < dots.nb; i++) {
        const dot = dots.array[i];

        if (dot.y < 0 || dot.y > canvas.height) {
          dot.vx = dot.vx;
          dot.vy = -dot.vy;
        } else if (dot.x < 0 || dot.x > canvas.width) {
          dot.vx = -dot.vx;
          dot.vy = dot.vy;
        }
        dot.x += dot.vx;
        dot.y += dot.vy;
      }
    },

    line: function () {
      for (let i = 0; i < dots.nb; i++) {
        for (let j = 0; j < dots.nb; j++) {
          const i_dot = dots.array[i];
          const j_dot = dots.array[j];

          if (
            i_dot.x - j_dot.x < dots.distance &&
            i_dot.y - j_dot.y < dots.distance &&
            i_dot.x - j_dot.x > -dots.distance &&
            i_dot.y - j_dot.y > -dots.distance
          ) {
            if (
              i_dot.x - mousePosition.x < dots.d_radius &&
              i_dot.y - mousePosition.y < dots.d_radius &&
              i_dot.x - mousePosition.x > -dots.d_radius &&
              i_dot.y - mousePosition.y > -dots.d_radius
            ) {
              ctx.beginPath();
              ctx.moveTo(i_dot.x, i_dot.y);
              ctx.lineTo(j_dot.x, j_dot.y);

              // make the fill colour fade out the further you are from the mouse
              const dotDistance =
                ((i_dot.x - mousePosition.x) ** 2 +
                  (i_dot.y - mousePosition.y) ** 2) **
                0.5;
              let distanceRatio = dotDistance / dots.d_radius;

              // make it so it doesnt fade out completely
              distanceRatio -= 0.3;
              if (distanceRatio < 0) {
                distanceRatio = 0;
              }

              ctx.strokeStyle = `rgb(81, 162, 233, ${1 - distanceRatio})`;

              ctx.stroke();
              ctx.closePath();
            }
          }
        }
      }
    },
  };

  function createDots() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (let i = 0; i < dots.nb; i++) {
      dots.array.push(new Dot());
      var dot = dots.array[i];

      dot.create();
    }

    // first dot to be relativley large
    dots.array[0].radius = 1.5;

    // first dot to be blue
    dots.array[0].colour = '#51a2e9';

    // dot.line();
    dot.animate();
  }

  // window.onmousemove = function (parameter) {
  //   mousePosition.x = parameter.pageX;
  //   mousePosition.y = parameter.pageY;

  //   // sometimes if the mouse is off screen on refresh, it bugs out
  //   try {
  //     // want the first dot to follow the mouse
  //     dots.array[0].x = parameter.pageX;
  //     dots.array[0].y = parameter.pageY;
  //   } catch {
  //     //
  //   }
  // };

  window.onscroll = function (parameter) {
    mousePosition.x = window.innerWidth / 2;
    mousePosition.y = window.innerHeight / 2;

    const top =
      (window.pageYOffset || document.scrollTop) - (document.clientTop || 0);
    mousePosition.y += top;
    // console.log(top);

    // console.log(mousePosition.x);
  };

  // mousePosition.x = window.innerWidth / 2;
  // mousePosition.y = window.innerHeight / 2;

  const draw = setInterval(createDots, 1000 / 30);

  window.onresize = function () {
    clearInterval(draw);
    canvasDotsBg();

    // console.log('yoza');
  };
};

export default canvasDotsBg;

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

header {
    animation: 1s ease-out 0s 1 slideInFromLeft;

    background: #333;
    padding: 30px;
  }

html {
    scroll-behavior: smooth;
}

a {
    color:rgb(0, 255, 234);
    text-decoration: none;
    font-family: FoundrySterlingOT3W03-Bold,FoundrySterlingOT3W10-Bold,Arial,Helvetica,sans-serif;
    font-weight: 900;
    right: 0px;
}

a:hover {
    color: white;
    transform: scale(1.2);
    text-decoration: none;
}

.header {
    background: rgba(0, 0, 0, 0.2);
    position: fixed;
    width: 100%;
    margin-top: -20px;
    max-height: 82px;
}

.linkedin {
width: 40px;
height: 40px;
margin-top: -7px;
}

.intro {
    margin-top: 400px;
    text-align: center;
    font-family: montserrat, sans-serif;
    color: white;
    font-size: xx-large;
}

#kevin {
    color: rgb(0, 255, 234);
}

#resume {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    margin-top: 20px;
    height: 50px;
    width: 130px;
    font-size: large;
    border-width: 3px;
    border-color: rgb(0, 255, 234);
    background-color: transparent;
    color: white;
    padding: 0px;
    line-height: 45px;
    justify-content: center;
    font-family: montserrat, sans-serif;

}

#resume:hover {
    transform: scale(1.1);
    color:rgb(0, 255, 234);
}

.skills {
    justify-content: center;
    list-style-type: none;
    text-align: center;
    left: 100px;
    padding: 10px;
    margin-top: 250px;

}

li {
    margin: 20px;
    color: white;
    font-family: montserrat, sans-serif;
    font-size: xx-large;
}

.about {
    margin-top: 800px;
    color: white;
    font-family: montserrat, sans-serif;
    font-size: xx-large;
    text-align: left;
    justify-content: center;
}

.contact {
    margin-top: 920px;
    color: white;
    font-size: xx-large;
    font-family: montserrat, sans-serif;
    text-align: center;
    margin-bottom: 450px;

}

#about-scroll {
    margin-top: 500px;
}

#contact-scroll {
    margin-top: 920px;
}

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

      Home
      Skills
      About
      Contact

<link rel="stylesheet" href="Portfolio.css">

  <canvas class="canvas-2" width="1903" height="937" style="display: block;">

Body:
I made this project when I was still studying, I don’t need it anymore, but I hope it will help you somehow

P.S: GL HF ^_^

const menu_button = document.querySelector(".menu-button");
        const container = document.querySelector(".container");
        const menu = document.querySelector(".menu");
        const navbar = document.querySelector(".navbar");

        const Top = document.querySelector("html");
        const info = document.querySelector(".info-block");
        const more = document.querySelector(".more-block");
        const service = document.querySelector(".service-block");
        const contacts = document.querySelector(".footer");
        const bar = document.getElementById("indicator");

        menu_button.addEventListener("click", () => {
            menu_button.classList.toggle("active");
            menu.classList.toggle("show-menu");
        });

        function toInfo(){
            info.scrollIntoView({behavior: "smooth", block: "start"});
        }

        function toMore(){
            more.scrollIntoView({behavior: "smooth", block: "start"});
        }

        function toServices(){
            service.scrollIntoView({behavior: "smooth", block: "start"});
        }

        function toContacts(){
            contacts.scrollIntoView({behavior: "smooth", block: "start"});
        }

        window.addEventListener('scroll', function(){
            var y = window.scrollY;
            if(y > 50){
                navbar.style.cssText = "height: 55px;";
                menu.style.cssText = "padding-top: 60px;";
                bar.style.cssText = "top: 55px;";
            }
            else{
                navbar.style.cssText = "height: 75px;";
                menu.style.cssText = "padding-top: 80px;";
                bar.style.cssText = "top: 75px;";
            }
        })

        window.addEventListener('scroll', function(){
            var y = window.scrollY;
            if(y > 1600){
                service.style.cssText = "transform: translateX(0);opacity: 1;";
            }
            else{
                service.style.cssText = "transform: translateX(400px);opacity: 0;";
            }
        })

        window.addEventListener('scroll', function(){
            var y = window.scrollY;
            if(y > 650){
                more.style.cssText = "transform: translateX(0);opacity: 1;";
            }
            else{
                more.style.cssText = "transform: translateX(-400px);opacity: 0;";
            }
        })

        window.onscroll = function() {
            var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
          var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
          var scrolled = (winScroll / height) * 100;
          bar.style.height = scrolled + "%";
        };

*{
            font-family: consolas;
        }

        body{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            margin-top: 75px;
            display: flex;
            justify-content: center;
            flex-direction: column;
            overflow-x: hidden;
            background-color: white);
        }

        .progress-bar{
            position: fixed;
        width: 5px;
        left: 0px;
        transition: .5s;
        background: linear-gradient(to right, #008AFF, #00FFE7);
        z-index: 999;
        animation: animate_bar 5s infinite linear;
        }

        @keyframes animate_bar{
            0%,100%{
                filter: hue-rotate(0deg);
            }
            50%{
                filter: hue-rotate(360deg);
            }
        }

        .navbar{
            top: 0;
            width: 90%;
            height: 75px;
            display: flex;
            position: fixed;
            padding: 0 5%;
            transition: .5s;
            align-items: center;
            background-color: white;
            z-index: 999;
            border-bottom: 4px solid black;
        }

        .logo{
            font-size: 48px;
        }

        .logo-link{
            text-decoration-line: none;
            color: black;
        }

        .menu-button{
            position: fixed;
            width: 2rem;
            height: 2rem;
            right: 5%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            cursor: pointer;
            z-index: 9;
        }

        .bar{
            width: 2rem;
            height: 1.5px;
            background-color: #000;
            transition: .5s;
        }

        .bar:before,
        .bar:after{
            content: "";
            position: absolute;
            width: inherit;
            height: inherit;
            background-color: #000;
            transition: .5s;
        }

        .bar:before{
            transform: translateY(-9px);
        }

        .bar:after{
            transform: translateY(9px);
        }

        .menu-button.active .bar{
            transform: rotate(360deg);
            background-color: transparent;
        }

        .menu-button.active .bar:before{
            transform: translateY(0) rotate(45deg);
        }

        .menu-button.active .bar:after{
            transform: translateY(0) rotate(-45deg);
        }

        .menu{
            position: fixed;
            width: 20%;
            right: 0;
            top: 0;
            padding-top: 75px;
            height: 100vh;
            display: flex;
            transition: .5s;
            background-color: #555;
            transform: translateX(100%);
            border-left: 2px solid #000;
        }

        .show-menu{
            transform: translateX(0);
        }

        .menu ul{
            list-style: none;
            width: 100%;
            padding: 0;
            margin: 0;
        }

        .menu-link{
            width: 100%;
            text-decoration: none;
            padding: 0.7rem 0 0.7rem 2rem;
            display: block;
            color: #000;
            font-size: 1.2rem;
            transition: 0.5s;
            border-bottom: 2px solid #000;
            color: white;
            cursor: pointer;
        }

        .menu-link:hover{
            border-color: red;
        }

        .container{
            position: relative;
            transition: .5s;
            width: 90%;
            margin: 0 auto;
        }

        .margin-right{
            transform: translateX(-15%);
            width: 65%;
        }

        .block{
            padding: 5rem;
            margin: 2rem 0;
            color: white;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .block > *{
            margin: 2rem;
        }

        .top-block{
            background-image: url("https://wallpapercave.com/wp/wp2639558.jpg");
            animation: anim_left .5s 1 linear;
        }

        @keyframes anim_left{
            0%{
                transform: translateX(-400px);
                opacity: 0;
            }
        }

        .info-block{
            background-image: url("https://wallpapercave.com/wp/wp2639574.jpg");
            animation: anim_right 1s 1 linear;
        }

        @keyframes anim_right{
            0%,50%{
                transform: translateX(400px);
                opacity: 0;
            }
            100%{
                transform: translateX(0);
                opacity: 1;
            }
        }

        .more-block{
            background-image: url("https://wallpapercave.com/wp/wp4695971.jpg");
            display: flex;
            transition: .5s;
            justify-content: center;
            flex-wrap: wrap;
            opacity: 0;
            transform: translateX(-400px);
        }

        .more-title{
            width: 100%;
            font-size: 46px;
            letter-spacing: .75rem;
            margin: 0;
        }

        .more-category-block{
            width: 260px;
            padding: 2rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            border: 2px solid white;
            background-color: rgba(0, 0, 0, .75);
        }

        .more-img{
            position: relative;
            width: 40%;
        }

        .service-block{
            background-image: url("https://wallpapercave.com/wp/wp5412909.jpg");
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            padding: 5rem 0;
            transition: .5s;
            opacity: 0;
            transform: translateX(-400px);
        }

        .service-title{
            width: 100%;
            font-size: 46px;
            letter-spacing: .75rem;
            margin: 0;
        }

        .service-category-block{
            width: 320px;
            margin: 1rem;
            border: 2px solid white;
            display: flex;
            justify-content: center;
            flex-direction: column;
            background-color: rgba(0, 0, 0, .75);
        }

        .pro:before{
            position: absolute;
            width: 5rem;
            height: 5rem;
            border: 2px solid white;
            background-color: black;
            border-radius: 50%;
            font-size: 26px;
            color: red;
            font-weight: 600;
            text-align: center;
            line-height: 5rem;
        }

        .pro:before{
            content: "-25%";
            transform: translateX(270px) translateY(-340px) rotate(-7deg);
        }

        .service-list{
            list-style: none;
            line-height: 1.5;
        }

        .service-name{
            font-size: 24px;
            margin: 1rem;
        }

        .sub-service-name{
            margin: 0;
            font-size: 14px;
        }

        .text-center{
            text-align: center;
        }

        .yes:before{
            content: "✔";
            position: absolute;
            transform: translateX(-1.4rem);
            color: green;
        }

        .no:before{
            content: "✘";
            position: absolute;
            transform: translateX(-1.4rem);
            color: red;
        }

        .price{
            font-size: 24px;
        }

        .btn{
            outline: none;
            background-color: transparent;
            border: 1px solid white;
            color: white;
            padding: 1rem 2rem;
            font-size: 16px;
            transition: .5s;
            cursor: pointer;
            margin: 0 2rem;
        }

        .btn:hover{
            color: black;
            border-color: black;
            background-color: white;
        }

        .btn-center{
            margin: 1rem 5rem;
        }

        .footer{
            position: relative;
            width: 100%;
            bottom: 0;
            background-image: url("https://wallpapercave.com/wp/wp4978922.jpg");
            background-position: center;
            color: white;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }

        .contacts{
            height: 100%;
            display: block;
            margin: 0 4rem;
        }

        .contact-list{
            list-style: none;
            padding: 0;
            line-height: 1.75;
        }

<div class="progress-bar" id="indicator"></div>
    <div class="navbar">
        <div class="logo"><a href="index.html" class="logo-link">Wolf Gym</a></div>
        <div class="menu-button">
            <div class="bar"></div>
        </div>

        <div class="menu">
            <ul>
                <li><a href="" class="menu-link">Home</a></li>
                <li><a class="menu-link" onclick="toInfo()">About us</a></li>
                <li><a class="menu-link" onclick="toMore()">Why us</a></li>
                <li><a class="menu-link" onclick="toServices()">Services</a></li>
                <li><a class="menu-link" onclick="toContacts()">Contacts</a></li>
            </ul>
        </div>
    </div>

    <div class="container">
        <div class="block top-block">
            <p>Welcome to the official "Wolf Gym" website.</p>
            <button class="btn" onclick="toServices()">View proposals</button>
        </div>

        <div class="block info-block">
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus saepe sed provident odio accusamus, molestias corrupti tenetur iste. Eligendi et, quo voluptates adipisci quam suscipit maiores eum dolor porro praesentium.</p>
            <p>Lorem :</p>
            <ul>
                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
            </ul>
            <button class="btn" onclick="alert('Site-ul se afla in proces de creare!')">More</button>
        </div>

        <div class="block more-block">
            <p class="text-center more-title">Why us</p>
            <div class="more-category-block">
                <img src="experience.png" class="more-img">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Reiciendis necessitatibus quos unde. Illo ut maxime laudantium maiores numquam totam natus vitae voluptate, ducimus dolorem facere consectetur mollitia porro temporibus repudiandae.</p>
            </div>
            <div class="more-category-block">
                <img src="muscle.png" class="more-img">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Reiciendis necessitatibus quos unde. Illo ut maxime laudantium maiores numquam totam natus vitae voluptate, ducimus dolorem facere consectetur mollitia porro temporibus repudiandae.</p>
            </div>

            <div class="more-category-block">
                <img src="growth.png" class="more-img">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Reiciendis necessitatibus quos unde. Illo ut maxime laudantium maiores numquam totam natus vitae voluptate, ducimus dolorem facere consectetur mollitia porro temporibus repudiandae.</p>
            </div>

            <div class="more-category-block">
                <img src="muscle1.png" class="more-img">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Reiciendis necessitatibus quos unde. Illo ut maxime laudantium maiores numquam totam natus vitae voluptate, ducimus dolorem facere consectetur mollitia porro temporibus repudiandae.</p>
            </div>
        </div>

        <div class="block service-block basic">
            <p class="text-center service-title">Our offers</p>
            <div class="service-category-block">
                <p class="text-center service-name">Basic (30 days)</p>
                <p class="text-center sub-service-name">This service includes :</p>
                <ul class="service-list">
                    <li class="yes">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
                    <li class="yes">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
                    <li class="yes">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
                    <li class="yes">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
                    <li class="yes">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
                    <li class="no">Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
                    <li class="no">Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
                    <li class="no">Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
                    <li class="no">Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
                </ul>
                <p class="price text-center">200 mdl</p>
                <button class="btn btn-center" onclick="alert('Site-ul se afla in proces de creare!')">Buy</button>
            </div>

            <div class="service-category-block pro">
                <p class="text-center service-name">Pro (365 days)</p>
                <p class="text-center sub-service-name">This service includes :</p>
                <ul class="service-list">
                    <li class="yes">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
                    <li class="yes">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
                    <li class="yes">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
                    <li class="yes">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
                    <li class="yes">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
                    <li class="yes">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
                    <li class="yes">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
                    <li class="yes">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
                    <li class="yes">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
                </ul>
                <p class="price text-center">6 500 mdl</p>
                <button class="btn btn-center" onclick="alert('Site-ul se afla in proces de creare!')">Buy</button>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="contacts">Contacte</div>
        <ul class="contact-list">
            <li>Adresa de email : wolf@gym.com</li>
            <li>Tel. : +373 555 22 555</li>
            <li>Fix : 022 555 222</li>
            <li>Physiz addresses : 3370  Henry Ford Avenue</li>
        </ul>
    </div>


问:
Git: How to solve Permission denied (publickey) error when using Git?
I'm on Mac Snow Leopard and I just installed git.

I just tried

```<code>git clone git@thechaw.com:cakebook.git
</code>```

but that gives me this error:

```<code>Initialized empty Git repository in `/Users/username/Documents/cakebook/.git/`
Permission denied (publickey).
fatal: The remote end hung up unexpectedly
</code>```

What am I missing?

I've also tried doing ssh-keygen with no passphase but still same error.

答:
You could begin by doing the following in the terminal:

cd ~/.ssh

Generate an ssh key by running: ssh-keygen -o -t rsa -C "your@email.com"

When prompted to enter where to save the key, enter: cat id_rsa.pub | pbcopy

Enter and confirm your passphrase which will then generate your new key.

Inform github about the key by running: cat ~/.ssh/id_rsa.pub

Copy the output then head over to github to create a new SSH key. Paste the copied content into the text area, give it a befitting title then hit the ADD KEY button.

Now you can go about your operations hassle-free.

Body:
I'm on Mac Snow Leopard and I just installed git.

I just tried

git clone git@thechaw.com:cakebook.git

but that gives me this error:

Initialized empty Git repository in `/Users/username/Documents/cakebook/.git/`
Permission denied (publickey).
fatal: The remote end hung up unexpectedly

What am I missing?

I've also tried doing ssh-keygen with no passphase but still same error.


问:
Console.Logging Mapped Data in React
It appears I cannot console.log any selection from an onClick for this React component. I am trying to basically achieve the following.

https://codesandbox.io/s/great-ardinghelli-6seko?file=/src/demoComponent.jsx

The data is fetched from redux and appears in the frontend (I have this working).

I would like to achieve that when you select a line, it just console.logs('you have selected'role).

However it doesn't appear I can get ANY data to trigger on an onClick when it's a mapped data source.

I have implemented a p tag which fires and works as expected.

See the following refined code:

```<code>import React, { useRef } from "react";
import styled from "styled-components";

const SearchContent = styled.div`
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 1em;
    overflow-y: auto;
`;

const JobContainer = styled.div`
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 5px 5px;
`;

export function SearchBarTrialRedux(props) {

  const inputRef = useRef();
  const [term, setTerm] = useState("")

  const handleClickRole = () => {
      console.log("Hello, you have selected" )
  }

  const searchResults = useSelector(state => state.jobsearch.roles.map(role => role.title))

  const SearchResultsText = ({ text }) => {
      return (
          <JobContainer onClick={()=> {
              console.log("Hello")
          }}>
              <JobSearchTypography
              >
                  {text}
              </JobSearchTypography>
        </JobContainer>
      );
    };

  return (
          <SearchContent>
              <JobContainer >
                {searchResults && searchResults.length < 3 && searchResults.map((result) =>
                    (<IndividualContainer handleClick={handleClickRole}>
                        <SearchResultsText text={result}/>
                    </IndividualContainer>
                    )
                )}
              </JobContainer>
              <p onClick={handleClickRole}>
                fff
              </p>
         </SearchContent>
        )
</code>```

Does anyone know why this doesn't work + how to achieve the solution? I'm a little lost here!

答:
the <IndividualContainer>...</IndividualContainer> is a component created by you right?

if yes, then you will have to have to call the onClick function in the component like so:
inside the IndividualContainer component

```<code>  ...

   // the outer container

   <div onClick={props.handleClick}>
      ...
   </div>

  ...
</code>```

lemme know if it works

I just edited my answer now

Title: Console.Logging Mapped Data in React

Body:
It appears I cannot console.log any selection from an onClick for this React component. I am trying to basically achieve the following.

https://codesandbox.io/s/great-ardinghelli-6seko?file=/src/demoComponent.jsx

The data is fetched from redux and appears in the frontend (I have this working).

I would like to achieve that when you select a line, it just console.logs('you have selected'role).

However it doesn't appear I can get ANY data to trigger on an onClick when it's a mapped data source.

I have implemented a p tag which fires and works as expected.

See the following refined code:

import React, { useRef } from "react";
import styled from "styled-components";

const SearchContent = styled.div`
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 1em;
    overflow-y: auto;
`;

const JobContainer = styled.div`
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 5px 5px;
`;

export function SearchBarTrialRedux(props) {

  const inputRef = useRef();
  const [term, setTerm] = useState("")

  const handleClickRole = () => {
      console.log("Hello, you have selected" )
  }

  const searchResults = useSelector(state => state.jobsearch.roles.map(role => role.title))

  const SearchResultsText = ({ text }) => {
      return (
          <JobContainer onClick={()=> {
              console.log("Hello")
          }}>
              <JobSearchTypography
              >
                  {text}
              </JobSearchTypography>
        </JobContainer>
      );
    };

  return (
          <SearchContent>
              <JobContainer >
                {searchResults && searchResults.length < 3 && searchResults.map((result) =>
                    (<IndividualContainer handleClick={handleClickRole}>
                        <SearchResultsText text={result}/>
                    </IndividualContainer>
                    )
                )}
              </JobContainer>

                fff

         </SearchContent>
        )

Does anyone know why this doesn't work + how to achieve the solution? I'm a little lost here!

Body:
the <IndividualContainer>...</IndividualContainer> is a component created by you right?

if yes, then you will have to have to call the onClick function in the component like so:
inside the IndividualContainer component

  ...

   // the outer container

   <div onClick={props.handleClick}>
      ...
   </div>

  ...

lemme know if it works

I just edited my answer now


问:
How should I structure this code to break out of multiple nested loops at once?
I'm learning image detection and python writing a bot for a 2d game. There are certain targets we want to attack and certain targets we want to avoid. One target is displayed on the screen at a time out of a pool of 100 and you click next or attack depending on what you want to do. In doing this you're able to cycle through targets until you find one you want to attack. My code currently checks to see if it finds one of 24 different targets we want to avoid, if it does it avoids that target. Otherwise, it attacks that target.

At the moment my code:

```<code>1. Loads 24 different images of things we want to avoid into a NumPy array and checks with `py.locateCenterOnScreen`
   if we are on the correct screen to start the video loop
2. Uses cv2.imshow to display a real-time view of what is happening for use later with cv2.rectangles
3. Continuously loops through the NumPy array to determine if any of the loaded images have been found
4. If anything has been found it will either print "avoid" or "attack" to the terminal.
</code>```

There's also additional logging that I've not added to the below code as it isn't relevant. It simply logs the attack/avoid to a .txt file with time stamps.

```<code>My issue:
</code>```

At the moment my object detection loop for i in image_list: never stops when it finds one of the 24 images, it loops over them again and again swapping away from the found image.

```<code>My question:
</code>```

When one of the 24 images is detected, how do I stop my detection loop without stopping my cv2.imshow loop. For example, if image 5 is found. I want to keep image 5 highlighted with cv2.rectangle rather than only having it highlight for a fraction of a second when it comes up in the detection loop.

```<code># Load Images
def loadImages(directory):
    # Intialise empty array
    image_list = []
    # Add images to array
    for i in directory:
        img = cv.imread(i, cv.IMREAD_REDUCED_GRAYSCALE_2)
        image_list.append((img, i))
    return image_list

def objectDetection(image_list, threshold_value):
    # Video Loop
    while True:
        # Listener to check if attack! button displaying
        if py.locateCenterOnScreen('!attack.jpg', region = (1282, 931, 1585-1282, 1032-931), grayscale=True) != None:
            # Set attack_loop to false as haven't found anything yet, only set to true when something has been attacked
            attack_loop = False
            while attack_loop is False:
                # Grab PSS Window and find size
                window = pygetwindow.getWindowsWithTitle('App')[0]
                x1 = window.left
                y1 = window.top
                height = window.height
                width = window.width
                x2 = x1 + width
                y2 = y1 + height
                # Actual Video Loop, cropped down to the specific window,
                # resized to 1/2 size, and converted to BGR for OpenCV
                haystack_img = ImageGrab.grab(bbox=(x1, y1, x2, y2))
                (width, height) = (haystack_img.width // 2, haystack_img.height // 2)
                haystack_img_resized = haystack_img.resize((width, height))
                crop = haystack_img_resized.crop((360,22,600,65))
                haystack_img_np = np.array(crop)
                haystack = cv.cvtColor(haystack_img_np, cv.COLOR_BGR2GRAY)
                cv.imshow("Screen", haystack)

                # Object Detection
                for i in image_list:
                    needle_img = i[0]
                    needle_name = i[1]
                    result = cv.matchTemplate(haystack, needle_img, cv.TM_CCORR_NORMED)

                    # Get the best match position
                    min_val, max_val, min_loc, max_loc = cv.minMaxLoc(result)

                    # Define top left and bottom right and threshold
                    (H, W) = i[0].shape[:2]
                    top_left = max_loc
                    bottom_right = (top_left[0] + W, top_left[1] + H)
                    threshold = threshold_value

                    # If something has been detected click keep looking code
                    if max_val >= threshold:
                        cv.rectangle(haystack, top_left, bottom_right, 255, 2)
                        print("avoid")
                    else:
                        print("attack")
                        if max_val >= threshold:print(max_val)

### Main Script ###

# load images to detect
ships_to_avoid = loadImages(defeat)
# Run actual image detection
objectDetection(ships_to_avoid, 0.92)
</code>```

答: You can simply stop the inner loop with the python word break inside your condition, so it will stop whenever it is True. This break will not affect the outer loop. For more info about stopping nested loops I would recommend you this article: 5 Ways To Break Out of Nested Loops in Python</p>

Body:
I'm learning image detection and python writing a bot for a 2d game. There are certain targets we want to attack and certain targets we want to avoid. One target is displayed on the screen at a time out of a pool of 100 and you click next or attack depending on what you want to do. In doing this you're able to cycle through targets until you find one you want to attack. My code currently checks to see if it finds one of 24 different targets we want to avoid, if it does it avoids that target. Otherwise, it attacks that target.

At the moment my code:

1. Loads 24 different images of things we want to avoid into a NumPy array and checks with `py.locateCenterOnScreen`
   if we are on the correct screen to start the video loop
2. Uses cv2.imshow to display a real-time view of what is happening for use later with cv2.rectangles
3. Continuously loops through the NumPy array to determine if any of the loaded images have been found
4. If anything has been found it will either print "avoid" or "attack" to the terminal.

There's also additional logging that I've not added to the below code as it isn't relevant. It simply logs the attack/avoid to a .txt file with time stamps.

My issue:

At the moment my object detection loop for i in image_list: never stops when it finds one of the 24 images, it loops over them again and again swapping away from the found image.

My question:

When one of the 24 images is detected, how do I stop my detection loop without stopping my cv2.imshow loop. For example, if image 5 is found. I want to keep image 5 highlighted with cv2.rectangle rather than only having it highlight for a fraction of a second when it comes up in the detection loop.

# Load Images
def loadImages(directory):
    # Intialise empty array
    image_list = []
    # Add images to array
    for i in directory:
        img = cv.imread(i, cv.IMREAD_REDUCED_GRAYSCALE_2)
        image_list.append((img, i))
    return image_list

def objectDetection(image_list, threshold_value):
    # Video Loop
    while True:
        # Listener to check if attack! button displaying
        if py.locateCenterOnScreen('!attack.jpg', region = (1282, 931, 1585-1282, 1032-931), grayscale=True) != None:
            # Set attack_loop to false as haven't found anything yet, only set to true when something has been attacked
            attack_loop = False
            while attack_loop is False:
                # Grab PSS Window and find size
                window = pygetwindow.getWindowsWithTitle('App')[0]
                x1 = window.left
                y1 = window.top
                height = window.height
                width = window.width
                x2 = x1 + width
                y2 = y1 + height
                # Actual Video Loop, cropped down to the specific window,
                # resized to 1/2 size, and converted to BGR for OpenCV
                haystack_img = ImageGrab.grab(bbox=(x1, y1, x2, y2))
                (width, height) = (haystack_img.width // 2, haystack_img.height // 2)
                haystack_img_resized = haystack_img.resize((width, height))
                crop = haystack_img_resized.crop((360,22,600,65))
                haystack_img_np = np.array(crop)
                haystack = cv.cvtColor(haystack_img_np, cv.COLOR_BGR2GRAY)
                cv.imshow("Screen", haystack)

                # Object Detection
                for i in image_list:
                    needle_img = i[0]
                    needle_name = i[1]
                    result = cv.matchTemplate(haystack, needle_img, cv.TM_CCORR_NORMED)

                    # Get the best match position
                    min_val, max_val, min_loc, max_loc = cv.minMaxLoc(result)

                    # Define top left and bottom right and threshold
                    (H, W) = i[0].shape[:2]
                    top_left = max_loc
                    bottom_right = (top_left[0] + W, top_left[1] + H)
                    threshold = threshold_value

                    # If something has been detected click keep looking code
                    if max_val >= threshold:
                        cv.rectangle(haystack, top_left, bottom_right, 255, 2)
                        print("avoid")
                    else:
                        print("attack")
                        if max_val >= threshold:print(max_val)

### Main Script ###

# load images to detect
ships_to_avoid = loadImages(defeat)
# Run actual image detection
objectDetection(ships_to_avoid, 0.92)


问:
How to use managed identity to connect to Azure Notification Hub?
In the docs they give an example of how to connect to a hub by using a connection string that contains a Shared Access Signature. So far in my app, I've been able to avoid storing secrets myself by just using managed identities. Is there a way to connect to a Notification Hub with a managed identity instead of a secret? I'd rather not do my own secret management.</p>

答:
Referring to list of supported Azure services that support managed identities for Azure resources it seems not available for it.

You may share your feedback by creating a Feedback item and upvote it. The product group monitors this site for feedback. This is the best way to ensure you are heard and you may receive a response depending on how much they information they can currently share.


问:
How to get pressed char from System.Windows.Input.KeyEventArgs?
I have System.Windows.Input.KeyEventArgs e variable. I want to get real char. For example, i press } button on keyboard. And normally it returns string like  oem.. but i want to get } char. How to do ?

[EDIT] I use this in TextBox .

答: You need to do that processing in the KeyPress event, not KeyDown or KeyUp.  KeyEventArgs tell which actual key was pressed, not the corresponding character.  Some of the keys don't event have an associated character.  However KeyPressEventArgs will have an associated character because KeyPress event is not fired for characterless keys (ctrl, up, etc)</p>

ContentLicense: CC BY-SA 3.0


问:
ParserError: Source file requires different compiler version
I tried all that you mentioned in the discussion here (in other questions) and at https://github.com/smartcontractkit/full-blockchain-solidity-course-py/discussions/522 , however it is not solving the issue for me, I also noticed that the current compiler version remains (current compiler is 0.6.12+commit.27d51765.Windows.msvc). But when I right click and select Solidty:Compiler information, it shows 0.8.0.

from output:

```<code>Retrieving compiler information:
Compiler using remote version: 'v0.8.0+commit.c7dfd78e', solidity version: 0.8.0+commit.c7dfd78e.Emscripten.clang
</code>```

Not sure if that is related to the issue I face.  Anyways starting with the problem I see when running brownie compile. I get the error below:

error in terminal:

```<code>PS D:\Python projects\Solidity dev\demo\smartcontract-lottery> brownie compile
INFO: Could not find files for the given pattern(s).
Brownie v1.17.2 - Python development framework for Ethereum

Compiling contracts...
  Solc version: 0.6.12
  Optimizer: Enabled  Runs: 200
  EVM Version: Istanbul
CompilerError: solc returned the following errors:

C:/Users/rosne/.brownie/packages/OpenZeppelin/openzeppelin-contracts@4.3.0/contracts/access/Ownable.sol:3:1: ParserError: Source file requires different compiler version (current compiler is 0.6.12+commit.27d51765.Windows.msvc) - note that nightly builds are considered to be strictly less than the released version
pragma solidity ^0.8.0;
^---------------------^

C:/Users/rosne/.brownie/packages/smartcontractkit/chainlink-brownie-contracts@0.2.1/contracts/src/v0.8/VRFConsumerBase.sol:2:1: ParserError: Source file requires different compiler version (current compiler is 0.6.12+commit.27d51765.Windows.msvc) - note that nightly builds are considered to be strictly less than the released version
pragma solidity ^0.8.0;
^---------------------^

PS D:\Python projects\Solidity dev\demo\smartcontract-lottery>
</code>```

My .sol file is Lottery.sol:

```<code>// SPDX-License-Identifier: MIT
pragma solidity ^0.6.0;

import "@chainlink/contracts/src/v0.6/interfaces/AggregatorV3Interface.sol";
import "@openzeppelin/contracts/access/Ownable.sol";
import "@chainlink/contracts/src/v0.8/VRFConsumerBase.sol";

contract Lottery is VRFConsumerBase, Ownable {
    uint256 usdEntryFee;
    address payable[] public players;
    address payable public recentWinner;
    uint256 public randomness;
    AggregatorV3Interface internal ethUsdPriceFeed;
    enum LOTTERY_STATE {
        OPEN,
        CLOSED,
        CALCULATING_WINNER
    }

    LOTTERY_STATE public lottery_state;
    uint256 public fee;
    bytes32 public keyhash;

    constructor(
        address _priceFeedAddress,
        address _vrfCoordinator,
        address _link,
        uint256 _fee,
        bytes32 _keyhash
    ) public VRFConsumerBase(_vrfCoordinator, _link) {
        usdEntryFee = 50 * (10**18);
        ethUsdPriceFeed = AggregatorV3Interface(_priceFeedAddress);
        lottery_state = LOTTERY_STATE.CLOSED;
        fee = _fee;
        keyhash = _keyhash;
    }

    function enter() public payable {
        //$50 min
        require(lottery_state == LOTTERY_STATE.OPEN);
        require(msg.value >= getEntranceFee(), "Not enough ETH!");
        players.push(payable(msg.sender));
    }

    function getEntranceFee() public view returns (uint256) {
        (, int256 price, , , ) = ethUsdPriceFeed.latestRoundData();
        uint256 adjustedPrice = uint256(price) * 10**12; //18 decimals
        //$50, 2000 ETH
        //50/2000
        //50*10000/2000
        uint256 costToEnter = (usdEntryFee * 10**18) / adjustedPrice;
        return costToEnter;
    }

    function startLottery() public onlyOwner {
        require(
            lottery_state == LOTTERY_STATE.CLOSED,
            "cant start a new lottery yet"
        );
        lottery_state = LOTTERY_STATE.OPEN;
    }

    function endLottery() public onlyOwner {
        lottery_state = LOTTERY_STATE.CALCULATING_WINNER;
        bytes32 requestId = requestRandomness(keyhash, fee);
    }

    function FulfillRandomness(bytes32 _requestId, uint256 _randomness)
        internal
        override
    {
        require(
            lottery_state == LOTTERY_STATE.CALCULATING_WINNER,
            "you arent there yet!"
        );

        require(_randomness > 0, "random not found");
        uint256 indexOfWinner = _randomness % players.length;
        recentWinner = players[indexOfWinner];
        recentWinner.transfer(address(this).balance);

        //reset

        players = new address payable[](0);
        lottery_state = LOTTERY_STATE.CLOSED;
        randomness = _randomness;
    }
}

</code>```

I also tried to google some solutions so my settings.json file is a bit different but that didnt help too.

settings.json:

```<code>{
    "solidity.compileUsingRemoteVersion": "v0.8.0+commit.c7dfd78e",
    "solidity.defaultCompiler": "remote",
    "solidity.compileUsingLocalVersion": "d:\\Python projects\\Solidity dev\\demo\\smartcontract-lottery\\soljson-v0.8.0+commit.c7dfd78e.js"
    // "solidity.compileUsingRemoteVersion": "v0.7.4+commit.3f05b770",
    // "solidity.enableLocalNodeCompiler": false
}
</code>```

In the brownie-config.yaml, I tried all the versions of openzepplin contracts too from old to latest (4.4.0, 4.3.0,4.3.2 etc), but same error.

brownie-config.yaml

```<code>dependencies:
  - smartcontractkit/chainlink-brownie-contracts@1.1.1
  - OpenZeppelin/openzeppelin-contracts@4.3.0
compiler:
  solc:
    remappings:
      - '@chainlink=smartcontractkit/chainlink-brownie-contracts@0.2.1'
      - '@openzeppelin=OpenZeppelin/openzeppelin-contracts@4.3.0'
networks:
  mainnet-fork:
    eth_usd_price_feed: '0xaEA2808407B7319A31A383B6F8B60f04BCa23cE2'
</code>```

I also tried to change the compiler in lottery.sol file with

```<code>// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;
</code>```

Now I get a different error.
Completely lost here :(

terminal:

```<code>INFO: Could not find files for the given pattern(s).
Brownie v1.17.2 - Python development framework for Ethereum

Compiling contracts...
  Solc version: 0.8.11
  Optimizer: Enabled  Runs: 200
  EVM Version: Istanbul
CompilerError: solc returned the following errors:

ParserError: Source file requires different compiler version (current compiler is 0.8.11+commit.d7f03943.Windows.msvc) - note that nightly builds are considered to be strictly less than the released version
 --> C:/Users/rosne/.brownie/packages/smartcontractkit/chainlink-brownie-contracts@0.2.1/contracts/src/v0.6/interfaces/AggregatorV3Interface.sol:2:1:
  |
2 | pragma solidity ^0.6.0;
  | ^^^^^^^^^^^^^^^^^^^^^^^

PS D:\Python projects\Solidity dev\demo\smartcontract-lottery>
</code>```

I am very new to programing in solidity and this is the first course I am following, I don't want to give up so easily, any help is much appreciated.

答:
The solution to the error is

```<code>// SPDX-License-Identifier: MIT
pragma solidity >=0.6.0 <0.9.0;
</code>```

Use this instead, hope this helps

Body:
I tried all that you mentioned in the discussion here (in other questions) and at https://github.com/smartcontractkit/full-blockchain-solidity-course-py/discussions/522 , however it is not solving the issue for me, I also noticed that the current compiler version remains (current compiler is 0.6.12+commit.27d51765.Windows.msvc). But when I right click and select Solidty:Compiler information, it shows 0.8.0.

from output:

Retrieving compiler information:
Compiler using remote version: 'v0.8.0+commit.c7dfd78e', solidity version: 0.8.0+commit.c7dfd78e.Emscripten.clang

Not sure if that is related to the issue I face.  Anyways starting with the problem I see when running brownie compile. I get the error below:

error in terminal:

PS D:\Python projects\Solidity dev\demo\smartcontract-lottery> brownie compile
INFO: Could not find files for the given pattern(s).
Brownie v1.17.2 - Python development framework for Ethereum

Compiling contracts...
  Solc version: 0.6.12
  Optimizer: Enabled  Runs: 200
  EVM Version: Istanbul
CompilerError: solc returned the following errors:

C:/Users/rosne/.brownie/packages/OpenZeppelin/openzeppelin-contracts@4.3.0/contracts/access/Ownable.sol:3:1: ParserError: Source file requires different compiler version (current compiler is 0.6.12+commit.27d51765.Windows.msvc) - note that nightly builds are considered to be strictly less than the released version
pragma solidity ^0.8.0;
^---------------------^

C:/Users/rosne/.brownie/packages/smartcontractkit/chainlink-brownie-contracts@0.2.1/contracts/src/v0.8/VRFConsumerBase.sol:2:1: ParserError: Source file requires different compiler version (current compiler is 0.6.12+commit.27d51765.Windows.msvc) - note that nightly builds are considered to be strictly less than the released version
pragma solidity ^0.8.0;
^---------------------^

PS D:\Python projects\Solidity dev\demo\smartcontract-lottery>

My .sol file is Lottery.sol:

// SPDX-License-Identifier: MIT
pragma solidity ^0.6.0;

import "@chainlink/contracts/src/v0.6/interfaces/AggregatorV3Interface.sol";
import "@openzeppelin/contracts/access/Ownable.sol";
import "@chainlink/contracts/src/v0.8/VRFConsumerBase.sol";

contract Lottery is VRFConsumerBase, Ownable {
    uint256 usdEntryFee;
    address payable[] public players;
    address payable public recentWinner;
    uint256 public randomness;
    AggregatorV3Interface internal ethUsdPriceFeed;
    enum LOTTERY_STATE {
        OPEN,
        CLOSED,
        CALCULATING_WINNER
    }

    LOTTERY_STATE public lottery_state;
    uint256 public fee;
    bytes32 public keyhash;

    constructor(
        address _priceFeedAddress,
        address _vrfCoordinator,
        address _link,
        uint256 _fee,
        bytes32 _keyhash
    ) public VRFConsumerBase(_vrfCoordinator, _link) {
        usdEntryFee = 50 * (10**18);
        ethUsdPriceFeed = AggregatorV3Interface(_priceFeedAddress);
        lottery_state = LOTTERY_STATE.CLOSED;
        fee = _fee;
        keyhash = _keyhash;
    }

    function enter() public payable {
        //$50 min
        require(lottery_state == LOTTERY_STATE.OPEN);
        require(msg.value >= getEntranceFee(), "Not enough ETH!");
        players.push(payable(msg.sender));
    }

    function getEntranceFee() public view returns (uint256) {
        (, int256 price, , , ) = ethUsdPriceFeed.latestRoundData();
        uint256 adjustedPrice = uint256(price) * 10**12; //18 decimals
        //$50, 2000 ETH
        //50/2000
        //50*10000/2000
        uint256 costToEnter = (usdEntryFee * 10**18) / adjustedPrice;
        return costToEnter;
    }

    function startLottery() public onlyOwner {
        require(
            lottery_state == LOTTERY_STATE.CLOSED,
            "cant start a new lottery yet"
        );
        lottery_state = LOTTERY_STATE.OPEN;
    }

    function endLottery() public onlyOwner {
        lottery_state = LOTTERY_STATE.CALCULATING_WINNER;
        bytes32 requestId = requestRandomness(keyhash, fee);
    }

    function FulfillRandomness(bytes32 _requestId, uint256 _randomness)
        internal
        override
    {
        require(
            lottery_state == LOTTERY_STATE.CALCULATING_WINNER,
            "you arent there yet!"
        );

        require(_randomness > 0, "random not found");
        uint256 indexOfWinner = _randomness % players.length;
        recentWinner = players[indexOfWinner];
        recentWinner.transfer(address(this).balance);

        //reset

        players = new address payable[](0);
        lottery_state = LOTTERY_STATE.CLOSED;
        randomness = _randomness;
    }
}

I also tried to google some solutions so my settings.json file is a bit different but that didnt help too.

settings.json:

{
    "solidity.compileUsingRemoteVersion": "v0.8.0+commit.c7dfd78e",
    "solidity.defaultCompiler": "remote",
    "solidity.compileUsingLocalVersion": "d:\\Python projects\\Solidity dev\\demo\\smartcontract-lottery\\soljson-v0.8.0+commit.c7dfd78e.js"
    // "solidity.compileUsingRemoteVersion": "v0.7.4+commit.3f05b770",
    // "solidity.enableLocalNodeCompiler": false
}

In the brownie-config.yaml, I tried all the versions of openzepplin contracts too from old to latest (4.4.0, 4.3.0,4.3.2 etc), but same error.

brownie-config.yaml

dependencies:
  - smartcontractkit/chainlink-brownie-contracts@1.1.1
  - OpenZeppelin/openzeppelin-contracts@4.3.0
compiler:
  solc:
    remappings:
      - '@chainlink=smartcontractkit/chainlink-brownie-contracts@0.2.1'
      - '@openzeppelin=OpenZeppelin/openzeppelin-contracts@4.3.0'
networks:
  mainnet-fork:
    eth_usd_price_feed: '0xaEA2808407B7319A31A383B6F8B60f04BCa23cE2'

I also tried to change the compiler in lottery.sol file with

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

Now I get a different error.
Completely lost here :(

terminal:

INFO: Could not find files for the given pattern(s).
Brownie v1.17.2 - Python development framework for Ethereum

Compiling contracts...
  Solc version: 0.8.11
  Optimizer: Enabled  Runs: 200
  EVM Version: Istanbul
CompilerError: solc returned the following errors:

ParserError: Source file requires different compiler version (current compiler is 0.8.11+commit.d7f03943.Windows.msvc) - note that nightly builds are considered to be strictly less than the released version
 --> C:/Users/rosne/.brownie/packages/smartcontractkit/chainlink-brownie-contracts@0.2.1/contracts/src/v0.6/interfaces/AggregatorV3Interface.sol:2:1:
  |
2 | pragma solidity ^0.6.0;
  | ^^^^^^^^^^^^^^^^^^^^^^^

PS D:\Python projects\Solidity dev\demo\smartcontract-lottery>

I am very new to programing in solidity and this is the first course I am following, I don't want to give up so easily, any help is much appreciated.

Body:
The solution to the error is

// SPDX-License-Identifier: MIT
pragma solidity >=0.6.0 <0.9.0;

Use this instead, hope this helps


问:
Antlr4: The following sets of rules are mutually left-recursive
I am trying to describle simple grammar with AND and OR, but fail with the following error

The following sets of rules are mutually left-recursive

The grammar is following:

```<code>expr:
    NAME |
    and |
    or;

and:
    expr AND expr;

or:
    expr OR expr;

NAME : 'A' .. 'B' + ;
OR: 'OR' | '|';
AND: 'AND' | '&';
</code>```

Simultaneously, the following grammar

```<code>expr:
    NAME |
    expr AND expr |
    expr OR expr;

NAME : 'A' .. 'B' + ;
OR: 'OR' | '|';
AND: 'AND' | '&';
</code>```

does compile.

Why?

答:
I know this is after very long time... but your second grammar compiles because you don't have the alternatives rightly parenthised. So

```<code>expr: NAME |
    expr AND expr |
    expr OR expr ;
</code>```

is actually understood by Antlr as:

```<code>expr: (NAME | expr) AND (expr | expr) OR expr ;
</code>```

Following rule actually does not compile:

```<code>expr:
    NAME |
    (expr AND expr) |
    (expr OR expr) ;
</code>```

Body:
I am trying to describle simple grammar with AND and OR, but fail with the following error

The following sets of rules are mutually left-recursive

The grammar is following:

expr:
    NAME |
    and |
    or;

and:
    expr AND expr;

or:
    expr OR expr;

NAME : 'A' .. 'B' + ;
OR: 'OR' | '|';
AND: 'AND' | '&';

Simultaneously, the following grammar

expr:
    NAME |
    expr AND expr |
    expr OR expr;

NAME : 'A' .. 'B' + ;
OR: 'OR' | '|';
AND: 'AND' | '&';

does compile.

Why?

Body:
I know this is after very long time... but your second grammar compiles because you don't have the alternatives rightly parenthised. So

expr: NAME |
    expr AND expr |
    expr OR expr ;

is actually understood by Antlr as:

expr: (NAME | expr) AND (expr | expr) OR expr ;

Following rule actually does not compile:

expr:
    NAME |
    (expr AND expr) |
    (expr OR expr) ;


问:
Sending invitations to a list of people
I have the following list of people I would like to invite for dinner:

```<code>guests = ["Ava Lovelace", "Epictetus", "Buddha", "Einstein"]

</code>```

I would like to send an invite to each of them, but without mentioning their own name in the invite. Here is what I tried (and got an error):

```<code>for i in guests:
    print (f"{i}, would you like to have dinner together? The following people received an invitation:", guests.replace("{i}"), "you")

</code>```

答:
The replace function doesn't exist for lists in python. You could try a list comprehension instead:</p>
```<code>for i in guests:
    guest_list = [guest if guest != i else "you" for guest in guests]
    print (f"{i}, would you like to have dinner together? The following people received an invitation: {guest_list}")
</code>```

Title: Sending invitations to a list of people

Body:
I have the following list of people I would like to invite for dinner:

guests = ["Ava Lovelace", "Epictetus", "Buddha", "Einstein"]

I would like to send an invite to each of them, but without mentioning their own name in the invite. Here is what I tried (and got an error):

for i in guests:
    print (f"{i}, would you like to have dinner together? The following people received an invitation:", guests.replace("{i}"), "you")

Body:
The replace function doesn't exist for lists in python. You could try a list comprehension instead:

for i in guests:
    guest_list = [guest if guest != i else "you" for guest in guests]
    print (f"{i}, would you like to have dinner together? The following people received an invitation: {guest_list}")


问:
GPIO IRQ on ARM based Embedded Linux
I'm trying to program an GPIO IRQ on AT91SAM9M10-EKES evaluation board.
I successfully registered the IRQ, and the IRQ is working.
However, some interrupts are missed. I'm sending 26, and I get only 22.

The code:

```<code>static irqreturn_t wiegand_interrupt(int irq, void *dev_id){
  atomic_inc(&counter);
  printk(KERN_WARNING "IRQ recieved, counting... %d\n",atomic_read(&counter));
  return 0;
}
irq1 = gpio_to_irq(AT91_PIN_PA21);
if (irq1 < 0) {
    err = irq1;
    printk("Unable to get irq number for GPIO %d, error %d\n",AT91_PIN_PA21, err);
    goto fail;
}

err = request_irq(irq1,wiegand_interrupt,0 ,"wiegand",NULL);

irq2 = gpio_to_irq(AT91_PIN_PA20);
if (irq2 < 0) {
    err = irq2;
    printk("Unable to get irq number for GPIO %d, error %d\n",AT91_PIN_PA21, err);
    goto fail;
}

err = request_irq(irq2,wiegand_interrupt,0 ,"wiegand",NULL);
</code>```

This is not the whole driver, but this is the actual part that deals with the IRQ.
If someone see a problem in the code, or can suggest a way to know why I lose 4 interrupts, please reply. I'm stuck on this for hours... :(

Thanks.
Ramon.

答:
Ok, actually, the problem is that I used the GPIO pins, while the GPIO pins don't support IRQF_TRIGGER_FALLING flag, which is exactly what I need. so probably, the interrupt handler doesn't recognize the signal correctly.
I found out that I need to use the external pins for IRQF_TRIGGER_FALLING enables IRQ's.</p>

Title: GPIO IRQ on ARM based Embedded Linux

Body:
I'm trying to program an GPIO IRQ on AT91SAM9M10-EKES evaluation board.
I successfully registered the IRQ, and the IRQ is working.
However, some interrupts are missed. I'm sending 26, and I get only 22.

The code:

static irqreturn_t wiegand_interrupt(int irq, void *dev_id){
  atomic_inc(&counter);
  printk(KERN_WARNING "IRQ recieved, counting... %d\n",atomic_read(&counter));
  return 0;
}
irq1 = gpio_to_irq(AT91_PIN_PA21);
if (irq1 < 0) {
    err = irq1;
    printk("Unable to get irq number for GPIO %d, error %d\n",AT91_PIN_PA21, err);
    goto fail;
}

err = request_irq(irq1,wiegand_interrupt,0 ,"wiegand",NULL);

irq2 = gpio_to_irq(AT91_PIN_PA20);
if (irq2 < 0) {
    err = irq2;
    printk("Unable to get irq number for GPIO %d, error %d\n",AT91_PIN_PA21, err);
    goto fail;
}

err = request_irq(irq2,wiegand_interrupt,0 ,"wiegand",NULL);

This is not the whole driver, but this is the actual part that deals with the IRQ.
If someone see a problem in the code, or can suggest a way to know why I lose 4 interrupts, please reply. I'm stuck on this for hours... :(

Thanks.
Ramon.


问:
PI4J - Unable to load [libpi4j.so] using path
I'm using NetBeans on MacOS to develop an application using PI4J. Everything looks Ok but I get the error below, saying that PI4J was unable to load. Does anyone know how to solve this?</p>

```<code>abr 18, 2015 3:02:30 PM com.pi4j.util.NativeLibraryLoader load
SEVERE: Unable to load [libpi4j.so] using path: [/lib/libpi4j.so]
java.lang.UnsatisfiedLinkError: /private/var/folders/0x/6rph2scs0f544b7xwkfhzkcw0000gn/T/libpi4j3968879292977354112.so: dlopen(/private/var/folders/0x/6rph2scs0f544b7xwkfhzkcw0000gn/T/libpi4j3968879292977354112.so, 1): no suitable image found.  Did find:
    /private/var/folders/0x/6rph2scs0f544b7xwkfhzkcw0000gn/T/libpi4j3968879292977354112.so: unknown file type, first eight bytes: 0x7F 0x45 0x4C 0x46 0x01 0x01 0x01 0x00
    at java.lang.ClassLoader$NativeLibrary.load(Native Method)
    at java.lang.ClassLoader.loadLibrary0(ClassLoader.java:1937)
    at java.lang.ClassLoader.loadLibrary(ClassLoader.java:1822)
    at java.lang.Runtime.load0(Runtime.java:809)
    at java.lang.System.load(System.java:1086)
    at com.pi4j.util.NativeLibraryLoader.loadLibraryFromClasspath(NativeLibraryLoader.java:143)
    at com.pi4j.util.NativeLibraryLoader.load(NativeLibraryLoader.java:92)
    at com.pi4j.wiringpi.Gpio.<clinit>(Gpio.java:174)
    at com.pi4j.io.gpio.RaspiGpioProvider.<init>(RaspiGpioProvider.java:51)
    at com.pi4j.io.gpio.GpioFactory.getDefaultProvider(GpioFactory.java:106)
    at com.pi4j.io.gpio.impl.GpioControllerImpl.<init>(GpioControllerImpl.java:54)
    at com.pi4j.io.gpio.GpioFactory.getInstance(GpioFactory.java:89)
    at hellorasp.HelloRasp.main(HelloRasp.java:31)

Exception in thread "main" java.lang.UnsatisfiedLinkError: com.pi4j.wiringpi.Gpio.wiringPiSetup()I
    at com.pi4j.wiringpi.Gpio.wiringPiSetup(Native Method)
    at com.pi4j.io.gpio.RaspiGpioProvider.<init>(RaspiGpioProvider.java:51)
    at com.pi4j.io.gpio.GpioFactory.getDefaultProvider(GpioFactory.java:106)
    at com.pi4j.io.gpio.impl.GpioControllerImpl.<init>(GpioControllerImpl.java:54)
    at com.pi4j.io.gpio.GpioFactory.getInstance(GpioFactory.java:89)
    at hellorasp.HelloRasp.main(HelloRasp.java:31)
</code>```

答:
I faced the same issue working with Raspberry P4, java 11 and pi4j v2.
I solved it downloading pigpio library directly from the raspberry

```<code>sudo apt-get install pigpio
</code>```

After the library was installed, the jar worked perfecrly

Body:
I'm using NetBeans on MacOS to develop an application using PI4J. Everything looks Ok but I get the error below, saying that PI4J was unable to load. Does anyone know how to solve this?

abr 18, 2015 3:02:30 PM com.pi4j.util.NativeLibraryLoader load
SEVERE: Unable to load [libpi4j.so] using path: [/lib/libpi4j.so]
java.lang.UnsatisfiedLinkError: /private/var/folders/0x/6rph2scs0f544b7xwkfhzkcw0000gn/T/libpi4j3968879292977354112.so: dlopen(/private/var/folders/0x/6rph2scs0f544b7xwkfhzkcw0000gn/T/libpi4j3968879292977354112.so, 1): no suitable image found.  Did find:
    /private/var/folders/0x/6rph2scs0f544b7xwkfhzkcw0000gn/T/libpi4j3968879292977354112.so: unknown file type, first eight bytes: 0x7F 0x45 0x4C 0x46 0x01 0x01 0x01 0x00
    at java.lang.ClassLoader$NativeLibrary.load(Native Method)
    at java.lang.ClassLoader.loadLibrary0(ClassLoader.java:1937)
    at java.lang.ClassLoader.loadLibrary(ClassLoader.java:1822)
    at java.lang.Runtime.load0(Runtime.java:809)
    at java.lang.System.load(System.java:1086)
    at com.pi4j.util.NativeLibraryLoader.loadLibraryFromClasspath(NativeLibraryLoader.java:143)
    at com.pi4j.util.NativeLibraryLoader.load(NativeLibraryLoader.java:92)
    at com.pi4j.wiringpi.Gpio.<clinit>(Gpio.java:174)
    at com.pi4j.io.gpio.RaspiGpioProvider.<init>(RaspiGpioProvider.java:51)
    at com.pi4j.io.gpio.GpioFactory.getDefaultProvider(GpioFactory.java:106)
    at com.pi4j.io.gpio.impl.GpioControllerImpl.<init>(GpioControllerImpl.java:54)
    at com.pi4j.io.gpio.GpioFactory.getInstance(GpioFactory.java:89)
    at hellorasp.HelloRasp.main(HelloRasp.java:31)

Exception in thread "main" java.lang.UnsatisfiedLinkError: com.pi4j.wiringpi.Gpio.wiringPiSetup()I
    at com.pi4j.wiringpi.Gpio.wiringPiSetup(Native Method)
    at com.pi4j.io.gpio.RaspiGpioProvider.<init>(RaspiGpioProvider.java:51)
    at com.pi4j.io.gpio.GpioFactory.getDefaultProvider(GpioFactory.java:106)
    at com.pi4j.io.gpio.impl.GpioControllerImpl.<init>(GpioControllerImpl.java:54)
    at com.pi4j.io.gpio.GpioFactory.getInstance(GpioFactory.java:89)
    at hellorasp.HelloRasp.main(HelloRasp.java:31)

Body:
I faced the same issue working with Raspberry P4, java 11 and pi4j v2.
I solved it downloading pigpio library directly from the raspberry

sudo apt-get install pigpio

After the library was installed, the jar worked perfecrly