问:
Display images on-click function based on mouse coordinates
The user is supposed to click anywhere on the page to make an image pop up at the exact coordinates of where a user clicks within a page.

Everythings work fine, but I want the function on-click works NOT ONLY for the viewport Units of 100vh of the screen but for THE ENTIRE PAGE LENGTH until the user reaches the bottom of the page.

Precious help to fix my code?

```<code>$(window).scroll(function () {
  var percent = $(document).scrollTop() / ($('body').height() / 3);
  $('#scrollDown').css('opacity', 1 - percent);
});
const images = [

//1japansimbol
"https://www.shareicon.net/data/512x512/2015/09/25/646301_japan_512x512.png",
//2snoopy
"https://ufopedia.it/images/8/8a/Snoopy.png",
//3murakami
"http://media-s3-us-east-1.ceros.com/hype-beast/images/2018/06/07/3a06f1fdf6a3a13e86de84d686fe7eec/flower-04.png",
//4stussylogo
"https://upload.wikimedia.org/wikipedia/en/1/1d/Stussy_Logo.svg",
//5
"https://pngimage.net/wp-content/uploads/2018/06/kaws-png.png",

                            ]
const box = document.querySelector('.place-on-click')

let i = 0;

var x_bleed_right,
    x_bleed_left,
    y_bleed_bottom,
    y_bleed_top;
const scale = 0.4;

function placeImage(x,y) {
  const nextImage = images[i]
  const img = document.createElement('img')
  img.setAttribute('src', nextImage)

  // get image width and height before it is appended
  var img_width, img_height;
  const img_load = new Image();

  img_load.addEventListener('load', function(e) {
      img_width = img_load.width * scale;
      img_height = img_load.height * scale;

      // calculate how many pixels is bleeding
      x_bleed_right =   (x - img_width / 2 )  + img_width   - box.offsetWidth;
      x_bleed_left =    (x - img_width / 2 );
      y_bleed_bottom =  (y - img_height / 2 ) + img_height  - box.offsetHeight;
      y_bleed_top =     (y - img_height / 2 );

      // console.log(x_bleed_right, x_bleed_left)

      img.style.position = 'absolute'

      if (x_bleed_right > 0) {
        img.style.left = box.offsetWidth - (img_width / 2) + 'px'
      } else if (x_bleed_left < 0) {
        img.style.left = (img_width / 2) + 'px'
      } else {
        img.style.left = x + 'px'
      }

      if (y_bleed_bottom > 0) {
        img.style.top = box.offsetHeight - (img_height / 2) + 'px'
      } else if (y_bleed_top < 0) {
        img.style.top = (img_height / 2) + 'px'
      } else {
        img.style.top = y + 'px'
      }

      img.style.transform = 'translate(-50%, -50%) scale('+scale+')'
      img.style.pointerEvents = 'none';

      box.appendChild(img)
  });
  img_load.src = nextImage;

  i = i + 1
  if ( i >= images.length) {
    i = 0
  }
}

box.addEventListener("click", function(event) {
event.preventDefault()
 const posLeft = event.pageX - box.offsetLeft
 const posTop = event.pageY - box.offsetTop
placeImage(posLeft, posTop)

})
</code>```

```<code>.place-on-click {
  height:100%;
  background-color:red;
  position:absolute;
  z-index:26;
  top:0; bottom:0; left:0; right:0;

}

#container-intro
{ position:relative;
  align-items: center;
  background-color: black;
  width:100%;
  z-index:25;

}

#svg-container
{ position:relative;
  display: flex;
  align-items: center;
  height: 100vh;
  width:100%;
  z-index:25;
  margin:0;padding:0;
}
@media (max-width: 450px) {
#svg-container{       height: 90vh;
  }}

body {
overflow-x: hidden;
    font-family: Helvetica, Roboto, Arial, sans-serif;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    margin: 0 0 20px 0;

}

ul, li {
  list-style: none; }

a {
  color: unset;
  text-decoration: none; }

img {
  max-width: 100%; }

:root {
  --sm-font-size: 1vw;
  --md-font-size: 3vw;
  --base-font-size: 12.3vw;
  --base-letter-spacing: -0.5vw;
  --base-line-height: 0.8;
  --active-area-offset: 0.075;
  --primary-font: "Gino Nord", Helvetica, Arial, sans-serif;
  --secondary-font: "Gino Normal", Helvetica, Arial, sans-serif;
 /* --primary-color:white;
  --secondary-color: white;*/
  --quick-delay: 250ms;
  --long-delay: 1000ms;
  --long-duration: 500ms;
  --lg-padding: 15vw;
  --md-padding: calc(12.3vw * 0.8);
  --sm-padding: 0.25em; }
  @media (max-width: 900px) {
    :root {
      --sm-font-size: 3vw;
      --md-font-size: 4.5vw; } }

::selection {
  color: var(--primary-color); }

html {
   cursor: pointer;
  font-size: var(--base-font-size);
  font-family: var(--primary-font);
  font-weight: bold;
  line-height: var(--base-line-height);
  letter-spacing: var(--base-letter-spacing);
  color: white;
  text-align: center;
  font-kerning: normal;
  -webkit-font-smoothing: subpixel-antialiased;
  margin-left: -0.75vw; }

  @media (max-width: 900px) {
    html {
      -webkit-text-stroke: 0.015em var(--primary-color); } }

/*a {
  text-decoration: none; }
  a:hover {
    color: var(--primary-color);
    text-decoration: underline; }*/

main{
background-color:red;z-index:22;position: absolute;   text-transform: uppercase;}

div.scrolling-limit{
  width: 100%;
  height:auto;
  color: white;
  background-color: red;
  overflow:hidden;
  white-space:nowrap;

  font-family:helvetica;
  font-weight:600;
  letter-spacing:-5px;
    color:black;
    /*top: 50%;
    left: 50%;
  transform: translate(-50%, -50%);*/
    font-size: 26vw;
  text-transform:lowercase;

z-index:24;
  position: absolute;
  font-weight:600;

}

div.scrolling{
  position: absolute;
  -webkit-animation: scroll 20s infinite linear;;
  -moz-animation: scroll 20s infinite linear;
  -o-animation: scroll 20s infinite linear;
  animation: scroll 20s infinite linear;
}

@keyframes scroll{
    0%   {left: 500px;}
    100% {left: -950px;}
}
@-webkit-keyframes scroll{
    0%   {left: 500px;}
    100% {left: -950px;}
}
</code>```

```<code><div class="place-on-click">CLICK </div>

   <main>
        <header class="About About--primary">
            <p class="About-description u-fadeIn--long" data-roll="body" itemprop="description">
<br><br><br><br>
                      <span class="u-line">LAST ORGY</span>
                <span class="u-line">THE ARCHIVE</span>
<br><br>
  <span class="u-line">company</span>
                <span class="u-line">based in</span>
                <span class="u-line">Brooklyn</span>
                <span class="u-line">New York.</span>
                <span class="u-line">We help</span>
                <span class="u-line">startups</span>
                <span class="u-line">become</span>
                <span class="u-line">icons and</span>
                <span class="u-line">help icons</span>
                <span class="u-line">behave</span>
                <span class="u-line">more like</span>
                <span class="u-line">startups.</span>
            </p>

        </header>

        <div class="About About--secondary u-fadeIn--long" itemprop="subOrganization" itemscope itemtype="http://schema.org/Organization">

            <h2 class="About-title" data-roll="title" itemprop="name">
                <span class="u-line">Front &</span>
                <span class="u-line">Center</span>
            </h2>

            <p class="About-description" data-roll="body" itemprop="description">
                <span class="u-line">is the first</span>
                <span class="u-line">design and</span>

            </p>

        </div>

        <footer class="About About--contact">

            <ul class="ContactList" data-roll="body">

                   <li class="ContactList-item">
                    <a class="ContactList-link" itemprop="sameAs" target="_blank" href="https://www.instagram.com/centerbklyn">
                       Shop (soon)
                    </a>
                </li>

                <li class="ContactList-item">
                    <a class="ContactList-link" itemprop="sameAs" target="_blank" href="https://www.instagram.com/centerbklyn">
                      Collaboration (soon)
                    </a>
                </li>

                <li class="ContactList-item">
                    <a class="ContactList-link" itemprop="email" href="mailto:hello@center.design">
                        Email
                    </a>
                </li>

                <li class="ContactList-item">
                    <a class="ContactList-link" itemprop="sameAs" target="_blank" href="https://www.instagram.com/centerbklyn">
                        Instagram
                    </a>
                </li>

                <li class="ContactList-item ContactList-item--address">
                    <a class="ContactList-link" itemprop="sameAs" target="_blank" href="http://maps.google.com/?q=61 Greenpoint Ave. #304A Brooklyn, NY 11222">
                        61 Greenpoint Ave. #304A
                        <br> Brooklyn, NY 11222
                    </a>
                </li>

            </ul>

            <span class="Copyright">
                © Last Orgy Archive
            </span>

        </footer>

    </main>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</code>```

JS FIDDLE: https://jsfiddle.net/CAT999/f4d5uaoq/19/

答:
JSFiddle: https://jsfiddle.net/2w9cquea/

Since they are both positioned absolutely with correct z-index values, you can achieve this by moving the div with class .place-on-click inside the main element and changing the background color of the div to transparent.

HTML:

```<code><meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
<!----INTRO-->

   <main>
   <div class="place-on-click">CLICK </div>
        <header class="About About--primary">
            <p class="About-description u-fadeIn--long" data-roll="body" itemprop="description">
<br><br><br><br>
                      <span class="u-line">LAST ORGY</span>
                <span class="u-line">THE ARCHIVE</span>
<br><br>
  <span class="u-line">company</span>
                <span class="u-line">based in</span>
                <span class="u-line">Brooklyn</span>
                <span class="u-line">New York.</span>
                <span class="u-line">We help</span>
                <span class="u-line">startups</span>
                <span class="u-line">become</span>
                <span class="u-line">icons and</span>
                <span class="u-line">help icons</span>
                <span class="u-line">behave</span>
                <span class="u-line">more like</span>
                <span class="u-line">startups.</span>
            </p>

        </header>

        <div class="About About--secondary u-fadeIn--long" itemprop="subOrganization" itemscope itemtype="http://schema.org/Organization">

            <h2 class="About-title" data-roll="title" itemprop="name">
                <span class="u-line">Front &</span>
                <span class="u-line">Center</span>
            </h2>

            <p class="About-description" data-roll="body" itemprop="description">
                <span class="u-line">is the first</span>
                <span class="u-line">design and</span>

            </p>

        </div>

        <footer class="About About--contact">

            <ul class="ContactList" data-roll="body">

                   <li class="ContactList-item">
                    <a class="ContactList-link" itemprop="sameAs" target="_blank" href="https://www.instagram.com/centerbklyn">
                       Shop (soon)
                    </a>
                </li>

                <li class="ContactList-item">
                    <a class="ContactList-link" itemprop="sameAs" target="_blank" href="https://www.instagram.com/centerbklyn">
                      Collaboration (soon)
                    </a>
                </li>

                <li class="ContactList-item">
                    <a class="ContactList-link" itemprop="email" href="mailto:hello@center.design">
                        Email
                    </a>
                </li>

                <li class="ContactList-item">
                    <a class="ContactList-link" itemprop="sameAs" target="_blank" href="https://www.instagram.com/centerbklyn">
                        Instagram
                    </a>
                </li>

                <li class="ContactList-item ContactList-item--address">
                    <a class="ContactList-link" itemprop="sameAs" target="_blank" href="http://maps.google.com/?q=61 Greenpoint Ave. #304A Brooklyn, NY 11222">
                        61 Greenpoint Ave. #304A
                        <br> Brooklyn, NY 11222
                    </a>
                </li>

            </ul>

            <span class="Copyright">
                © Last Orgy Archive
            </span>

        </footer>

    </main>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</code>```

CSS:

```<code>.place-on-click {
  height:100%;
  background-color:transparent;
  position:absolute;
  z-index:26;
  top:0; bottom:0; left:0; right:0;

}

#container-intro
{ position:relative;
  align-items: center;
  background-color: black;
  width:100%;
  z-index:25;

}

#svg-container
{ position:relative;
  display: flex;
  align-items: center;
  height: 100vh;
  width:100%;
  z-index:25;
  margin:0;padding:0;
}
@media (max-width: 450px) {
#svg-container{       height: 90vh;
  }}

body {
overflow-x: hidden;
    font-family: Helvetica, Roboto, Arial, sans-serif;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    margin: 0 0 20px 0;

}

ul, li {
  list-style: none; }

a {
  color: unset;
  text-decoration: none; }

img {
  max-width: 100%; }

:root {
  --sm-font-size: 1vw;
  --md-font-size: 3vw;
  --base-font-size: 12.3vw;
  --base-letter-spacing: -0.5vw;
  --base-line-height: 0.8;
  --active-area-offset: 0.075;
  --primary-font: "Gino Nord", Helvetica, Arial, sans-serif;
  --secondary-font: "Gino Normal", Helvetica, Arial, sans-serif;
 /* --primary-color:white;
  --secondary-color: white;*/
  --quick-delay: 250ms;
  --long-delay: 1000ms;
  --long-duration: 500ms;
  --lg-padding: 15vw;
  --md-padding: calc(12.3vw * 0.8);
  --sm-padding: 0.25em; }
  @media (max-width: 900px) {
    :root {
      --sm-font-size: 3vw;
      --md-font-size: 4.5vw; } }

::selection {
  color: var(--primary-color); }

html {
   cursor: pointer;
  font-size: var(--base-font-size);
  font-family: var(--primary-font);
  font-weight: bold;
  line-height: var(--base-line-height);
  letter-spacing: var(--base-letter-spacing);
  color: white;
  text-align: center;
  font-kerning: normal;
  -webkit-font-smoothing: subpixel-antialiased;
  margin-left: -0.75vw; }

  @media (max-width: 900px) {
    html {
      -webkit-text-stroke: 0.015em var(--primary-color); } }

/*a {
  text-decoration: none; }
  a:hover {
    color: var(--primary-color);
    text-decoration: underline; }*/

main{
background-color:red;z-index:22;position: absolute;   text-transform: uppercase;}

div.scrolling-limit{
  width: 100%;
  height:auto;
  color: white;
  background-color: red;
  overflow:hidden;
  white-space:nowrap;

  font-family:helvetica;
  font-weight:600;
  letter-spacing:-5px;
    color:black;
    /*top: 50%;
    left: 50%;
  transform: translate(-50%, -50%);*/
    font-size: 26vw;
  text-transform:lowercase;

z-index:24;
  position: absolute;
  font-weight:600;

}

div.scrolling{
  position: absolute;
  -webkit-animation: scroll 20s infinite linear;;
  -moz-animation: scroll 20s infinite linear;
  -o-animation: scroll 20s infinite linear;
  animation: scroll 20s infinite linear;
}

@keyframes scroll{
    0%   {left: 500px;}
    100% {left: -950px;}
}
@-webkit-keyframes scroll{
    0%   {left: 500px;}
    100% {left: -950px;}
}
</code>```

Body:
The user is supposed to click anywhere on the page to make an image pop up at the exact coordinates of where a user clicks within a page.

Everythings work fine, but I want the function on-click works NOT ONLY for the viewport Units of 100vh of the screen but for THE ENTIRE PAGE LENGTH until the user reaches the bottom of the page.

Precious help to fix my code?

$(window).scroll(function () {
  var percent = $(document).scrollTop() / ($('body').height() / 3);
  $('#scrollDown').css('opacity', 1 - percent);
});
const images = [

//1japansimbol
"https://www.shareicon.net/data/512x512/2015/09/25/646301_japan_512x512.png",
//2snoopy
"https://ufopedia.it/images/8/8a/Snoopy.png",
//3murakami
"http://media-s3-us-east-1.ceros.com/hype-beast/images/2018/06/07/3a06f1fdf6a3a13e86de84d686fe7eec/flower-04.png",
//4stussylogo
"https://upload.wikimedia.org/wikipedia/en/1/1d/Stussy_Logo.svg",
//5
"https://pngimage.net/wp-content/uploads/2018/06/kaws-png.png",

                            ]
const box = document.querySelector('.place-on-click')

let i = 0;

var x_bleed_right,
    x_bleed_left,
    y_bleed_bottom,
    y_bleed_top;
const scale = 0.4;

function placeImage(x,y) {
  const nextImage = images[i]
  const img = document.createElement('img')
  img.setAttribute('src', nextImage)

  // get image width and height before it is appended
  var img_width, img_height;
  const img_load = new Image();

  img_load.addEventListener('load', function(e) {
      img_width = img_load.width * scale;
      img_height = img_load.height * scale;

      // calculate how many pixels is bleeding
      x_bleed_right =   (x - img_width / 2 )  + img_width   - box.offsetWidth;
      x_bleed_left =    (x - img_width / 2 );
      y_bleed_bottom =  (y - img_height / 2 ) + img_height  - box.offsetHeight;
      y_bleed_top =     (y - img_height / 2 );

      // console.log(x_bleed_right, x_bleed_left)

      img.style.position = 'absolute'

      if (x_bleed_right > 0) {
        img.style.left = box.offsetWidth - (img_width / 2) + 'px'
      } else if (x_bleed_left < 0) {
        img.style.left = (img_width / 2) + 'px'
      } else {
        img.style.left = x + 'px'
      }

      if (y_bleed_bottom > 0) {
        img.style.top = box.offsetHeight - (img_height / 2) + 'px'
      } else if (y_bleed_top < 0) {
        img.style.top = (img_height / 2) + 'px'
      } else {
        img.style.top = y + 'px'
      }

      img.style.transform = 'translate(-50%, -50%) scale('+scale+')'
      img.style.pointerEvents = 'none';

      box.appendChild(img)
  });
  img_load.src = nextImage;

  i = i + 1
  if ( i >= images.length) {
    i = 0
  }
}

box.addEventListener("click", function(event) {
event.preventDefault()
 const posLeft = event.pageX - box.offsetLeft
 const posTop = event.pageY - box.offsetTop
placeImage(posLeft, posTop)

})

.place-on-click {
  height:100%;
  background-color:red;
  position:absolute;
  z-index:26;
  top:0; bottom:0; left:0; right:0;

}

#container-intro
{ position:relative;
  align-items: center;
  background-color: black;
  width:100%;
  z-index:25;

}

#svg-container
{ position:relative;
  display: flex;
  align-items: center;
  height: 100vh;
  width:100%;
  z-index:25;
  margin:0;padding:0;
}
@media (max-width: 450px) {
#svg-container{       height: 90vh;
  }}

body {
overflow-x: hidden;
    font-family: Helvetica, Roboto, Arial, sans-serif;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    margin: 0 0 20px 0;

}

ul, li {
  list-style: none; }

a {
  color: unset;
  text-decoration: none; }

img {
  max-width: 100%; }

:root {
  --sm-font-size: 1vw;
  --md-font-size: 3vw;
  --base-font-size: 12.3vw;
  --base-letter-spacing: -0.5vw;
  --base-line-height: 0.8;
  --active-area-offset: 0.075;
  --primary-font: "Gino Nord", Helvetica, Arial, sans-serif;
  --secondary-font: "Gino Normal", Helvetica, Arial, sans-serif;
 /* --primary-color:white;
  --secondary-color: white;*/
  --quick-delay: 250ms;
  --long-delay: 1000ms;
  --long-duration: 500ms;
  --lg-padding: 15vw;
  --md-padding: calc(12.3vw * 0.8);
  --sm-padding: 0.25em; }
  @media (max-width: 900px) {
    :root {
      --sm-font-size: 3vw;
      --md-font-size: 4.5vw; } }

::selection {
  color: var(--primary-color); }

html {
   cursor: pointer;
  font-size: var(--base-font-size);
  font-family: var(--primary-font);
  font-weight: bold;
  line-height: var(--base-line-height);
  letter-spacing: var(--base-letter-spacing);
  color: white;
  text-align: center;
  font-kerning: normal;
  -webkit-font-smoothing: subpixel-antialiased;
  margin-left: -0.75vw; }

  @media (max-width: 900px) {
    html {
      -webkit-text-stroke: 0.015em var(--primary-color); } }

/*a {
  text-decoration: none; }
  a:hover {
    color: var(--primary-color);
    text-decoration: underline; }*/

main{
background-color:red;z-index:22;position: absolute;   text-transform: uppercase;}

div.scrolling-limit{
  width: 100%;
  height:auto;
  color: white;
  background-color: red;
  overflow:hidden;
  white-space:nowrap;

  font-family:helvetica;
  font-weight:600;
  letter-spacing:-5px;
    color:black;
    /*top: 50%;
    left: 50%;
  transform: translate(-50%, -50%);*/
    font-size: 26vw;
  text-transform:lowercase;

z-index:24;
  position: absolute;
  font-weight:600;

}

div.scrolling{
  position: absolute;
  -webkit-animation: scroll 20s infinite linear;;
  -moz-animation: scroll 20s infinite linear;
  -o-animation: scroll 20s infinite linear;
  animation: scroll 20s infinite linear;
}

@keyframes scroll{
    0%   {left: 500px;}
    100% {left: -950px;}
}
@-webkit-keyframes scroll{
    0%   {left: 500px;}
    100% {left: -950px;}
}

CLICK

                      LAST ORGY
                THE ARCHIVE

  company
                based in
                Brooklyn
                New York.
                We help
                startups
                become
                icons and
                help icons
                behave
                more like
                startups.

                Front &
                Center

                is the first
                design and

                       Shop (soon)

                      Collaboration (soon)

                        Email

                        Instagram

                        61 Greenpoint Ave. #304A

 Brooklyn, NY 11222

                © Last Orgy Archive

JS FIDDLE: https://jsfiddle.net/CAT999/f4d5uaoq/19/

Body:
JSFiddle: https://jsfiddle.net/2w9cquea/

Since they are both positioned absolutely with correct z-index values, you can achieve this by moving the div with class .place-on-click inside the main element and changing the background color of the div to transparent.

HTML:

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
<!----INTRO-->

   <main>
   <div class="place-on-click">CLICK </div>
        <header class="About About--primary">
            <p class="About-description u-fadeIn--long" data-roll="body" itemprop="description">
<br><br><br><br>
                      <span class="u-line">LAST ORGY</span>
                <span class="u-line">THE ARCHIVE</span>
<br><br>
  <span class="u-line">company</span>
                <span class="u-line">based in</span>
                <span class="u-line">Brooklyn</span>
                <span class="u-line">New York.</span>
                <span class="u-line">We help</span>
                <span class="u-line">startups</span>
                <span class="u-line">become</span>
                <span class="u-line">icons and</span>
                <span class="u-line">help icons</span>
                <span class="u-line">behave</span>
                <span class="u-line">more like</span>
                <span class="u-line">startups.</span>
            </p>

        </header>

        <div class="About About--secondary u-fadeIn--long" itemprop="subOrganization" itemscope itemtype="http://schema.org/Organization">

            <h2 class="About-title" data-roll="title" itemprop="name">
                <span class="u-line">Front &</span>
                <span class="u-line">Center</span>
            </h2>

            <p class="About-description" data-roll="body" itemprop="description">
                <span class="u-line">is the first</span>
                <span class="u-line">design and</span>

            </p>

        </div>

        <footer class="About About--contact">

            <ul class="ContactList" data-roll="body">

                   <li class="ContactList-item">
                    <a class="ContactList-link" itemprop="sameAs" target="_blank" href="https://www.instagram.com/centerbklyn">
                       Shop (soon)
                    </a>
                </li>

                <li class="ContactList-item">
                    <a class="ContactList-link" itemprop="sameAs" target="_blank" href="https://www.instagram.com/centerbklyn">
                      Collaboration (soon)
                    </a>
                </li>

                <li class="ContactList-item">
                    <a class="ContactList-link" itemprop="email" href="mailto:hello@center.design">
                        Email
                    </a>
                </li>

                <li class="ContactList-item">
                    <a class="ContactList-link" itemprop="sameAs" target="_blank" href="https://www.instagram.com/centerbklyn">
                        Instagram
                    </a>
                </li>

                <li class="ContactList-item ContactList-item--address">
                    <a class="ContactList-link" itemprop="sameAs" target="_blank" href="http://maps.google.com/?q=61 Greenpoint Ave. #304A Brooklyn, NY 11222">
                        61 Greenpoint Ave. #304A
                        <br> Brooklyn, NY 11222
                    </a>
                </li>

            </ul>

            <span class="Copyright">
                © Last Orgy Archive
            </span>

        </footer>

    </main>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

CSS:

.place-on-click {
  height:100%;
  background-color:transparent;
  position:absolute;
  z-index:26;
  top:0; bottom:0; left:0; right:0;

}

#container-intro
{ position:relative;
  align-items: center;
  background-color: black;
  width:100%;
  z-index:25;

}

#svg-container
{ position:relative;
  display: flex;
  align-items: center;
  height: 100vh;
  width:100%;
  z-index:25;
  margin:0;padding:0;
}
@media (max-width: 450px) {
#svg-container{       height: 90vh;
  }}

body {
overflow-x: hidden;
    font-family: Helvetica, Roboto, Arial, sans-serif;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    margin: 0 0 20px 0;

}

ul, li {
  list-style: none; }

a {
  color: unset;
  text-decoration: none; }

img {
  max-width: 100%; }

:root {
  --sm-font-size: 1vw;
  --md-font-size: 3vw;
  --base-font-size: 12.3vw;
  --base-letter-spacing: -0.5vw;
  --base-line-height: 0.8;
  --active-area-offset: 0.075;
  --primary-font: "Gino Nord", Helvetica, Arial, sans-serif;
  --secondary-font: "Gino Normal", Helvetica, Arial, sans-serif;
 /* --primary-color:white;
  --secondary-color: white;*/
  --quick-delay: 250ms;
  --long-delay: 1000ms;
  --long-duration: 500ms;
  --lg-padding: 15vw;
  --md-padding: calc(12.3vw * 0.8);
  --sm-padding: 0.25em; }
  @media (max-width: 900px) {
    :root {
      --sm-font-size: 3vw;
      --md-font-size: 4.5vw; } }

::selection {
  color: var(--primary-color); }

html {
   cursor: pointer;
  font-size: var(--base-font-size);
  font-family: var(--primary-font);
  font-weight: bold;
  line-height: var(--base-line-height);
  letter-spacing: var(--base-letter-spacing);
  color: white;
  text-align: center;
  font-kerning: normal;
  -webkit-font-smoothing: subpixel-antialiased;
  margin-left: -0.75vw; }

  @media (max-width: 900px) {
    html {
      -webkit-text-stroke: 0.015em var(--primary-color); } }

/*a {
  text-decoration: none; }
  a:hover {
    color: var(--primary-color);
    text-decoration: underline; }*/

main{
background-color:red;z-index:22;position: absolute;   text-transform: uppercase;}

div.scrolling-limit{
  width: 100%;
  height:auto;
  color: white;
  background-color: red;
  overflow:hidden;
  white-space:nowrap;

  font-family:helvetica;
  font-weight:600;
  letter-spacing:-5px;
    color:black;
    /*top: 50%;
    left: 50%;
  transform: translate(-50%, -50%);*/
    font-size: 26vw;
  text-transform:lowercase;

z-index:24;
  position: absolute;
  font-weight:600;

}

div.scrolling{
  position: absolute;
  -webkit-animation: scroll 20s infinite linear;;
  -moz-animation: scroll 20s infinite linear;
  -o-animation: scroll 20s infinite linear;
  animation: scroll 20s infinite linear;
}

@keyframes scroll{
    0%   {left: 500px;}
    100% {left: -950px;}
}
@-webkit-keyframes scroll{
    0%   {left: 500px;}
    100% {left: -950px;}
}


来源: stackexchange

问:
JPA persistence.xml - add DAO from referenced library
My question is quite simple.
Is it possible to add a DAO from a referenced library?
Fx. if you have multiple micro-services running sharing a some DAOs.</p>

```<code><persistence-unit name="defaultPersistenceUnit" transaction-type="RESOURCE_LOCAL">
    <provider>org.hibernate.jpa.HibernatePersistenceProvider</provider>
    <non-jta-data-source>DefaultDS</non-jta-data-source>

    <class>someproject.models.awesomeDAO</class>
    <class>referencedLibrary.models.sharedDAO</class>

    <properties>
        <property name="hibernate.dialect" value="org.hibernate.dialect.MySQLDialect"/>
    </properties>
</persistence-unit>
</code>```

答:
I assume by DAOs you actually mean Entities. You can add any entity class explictly with the <class> tag in persistence.xml as long as they are in the classpath.

You can even reference a jar file to be searched for annotated classes so you don't need to declare them explicitly with the tag <jar-file>

ContentLicense: CC BY-SA 4.0

Body:
My question is quite simple.
Is it possible to add a DAO from a referenced library?
Fx. if you have multiple micro-services running sharing a some DAOs.

<persistence-unit name="defaultPersistenceUnit" transaction-type="RESOURCE_LOCAL">
    <provider>org.hibernate.jpa.HibernatePersistenceProvider</provider>
    <non-jta-data-source>DefaultDS</non-jta-data-source>

    <class>someproject.models.awesomeDAO</class>
    <class>referencedLibrary.models.sharedDAO</class>

    <properties>
        <property name="hibernate.dialect" value="org.hibernate.dialect.MySQLDialect"/>
    </properties>
</persistence-unit>


问:
Cut out a sequence of files using glob in python
I have a directory with files like img-0001.jpg, img-0005.pg, img-0006.jpg, ... , img-xxxx.jpg.
What I need to do is to get a list with all files starting at 0238, literally img-0238.jpg. The next existing filename is img-0240.jpg

Right now I use glob to get all filenames.

```<code>list_images = glob.glob(path_images + "*.jpg")
</code>```

Thanks in advance

Edit:

-> The last filename is img-0315.jpg

答:
You can specify multiple repeated wildcards to match all files whose number is 23[89] or 2[4-9][0-9] or 30[0-9] etc;

```<code>list_images = []
for pattern in ('023[89]', '02[4-9][0-9]', '030[0-9]', '031[0-5]'):
    list_images.extend(glob.glob(
        os.path.join(path_images, '*{0}.jpg'.format(pattern))))
</code>```

or you can just filter out the ones you don't want.

```<code>list_images = [x for x in glob.glob(os.path.join(path_images, "*.jpg"))
    if 238 <= int(x[-8:-4]) <= 315]
</code>```

Body:
I have a directory with files like img-0001.jpg, img-0005.pg, img-0006.jpg, ... , img-xxxx.jpg.
What I need to do is to get a list with all files starting at 0238, literally img-0238.jpg. The next existing filename is img-0240.jpg

Right now I use glob to get all filenames.

list_images = glob.glob(path_images + "*.jpg")

Thanks in advance

Edit:

-> The last filename is img-0315.jpg

Body:
You can specify multiple repeated wildcards to match all files whose number is 23[89] or 2[4-9][0-9] or 30[0-9] etc;

list_images = []
for pattern in ('023[89]', '02[4-9][0-9]', '030[0-9]', '031[0-5]'):
    list_images.extend(glob.glob(
        os.path.join(path_images, '*{0}.jpg'.format(pattern))))

or you can just filter out the ones you don't want.

list_images = [x for x in glob.glob(os.path.join(path_images, "*.jpg"))
    if 238 <= int(x[-8:-4]) <= 315]


问:
Can gdb attach a zombie process(<defunct>)?
I have a program who run as zombie process. I want to debug it. But I got a gdb error.

```<code>mobile:/usr/local/ads5/bin# ps axf | grep ads_resolver
 5583 pts/2    S      0:00 ./ads_resolver main.cfg
 5584 pts/2    Zl     0:36  \_ [ads_resolver] <defunct>

mobile:/usr/local/ads5/bin# gdb ads_resolver 5584
GNU gdb 6.8-debian
Copyright (C) 2008 Free Software Foundation, Inc.
License GPLv3+: GNU GPL version 3 or later <http://gnu.org/licenses/gpl.html>
This is free software: you are free to change and redistribute it.
There is NO WARRANTY, to the extent permitted by law.  Type "show copying"
and "show warranty" for details.
This GDB was configured as "i486-linux-gnu"...
Attaching to program: /usr/local/ads5/bin/ads_resolver, process 5584
ptrace: Operation not permitted.
/usr/local/ads5/bin/5584: No such file or directory.
(gdb) info threads
No registers.
</code>```

There are my code that create the zombie process:

```<code>template < class T>
int Monitor < T >::Start()
{
    pid_t pid;
    pid = fork();
    if(pid == 0)
    {
        IgnoreSignal::IgnoreDaemon();
        signal(SIGCHLD,Monitor<T>::ReStart);

        pid = fork();
        if(pid == 0)
        {
            IgnoreSignal::IgnoreAll();
            T worker;
            worker.Run();
        }
        while(1)
        {
            sleep(60);
        }
    }
    return 0;
}
</code>```

答:
A zombie process has completed execution but the operating system is waiting for the parent to call wait(). This is just a status or a flag - the process no longer "exists" in terms of being executable.

So no it would not be possible for gdb to connect to a process that is no longer executing including a zombie process.

http://en.wikipedia.org/wiki/Zombie_process

ContentLicense: CC BY-SA 2.5

Body:
I have a program who run as zombie process. I want to debug it. But I got a gdb error.

mobile:/usr/local/ads5/bin# ps axf | grep ads_resolver
 5583 pts/2    S      0:00 ./ads_resolver main.cfg
 5584 pts/2    Zl     0:36  \_ [ads_resolver] <defunct>

mobile:/usr/local/ads5/bin# gdb ads_resolver 5584
GNU gdb 6.8-debian
Copyright (C) 2008 Free Software Foundation, Inc.
License GPLv3+: GNU GPL version 3 or later <http://gnu.org/licenses/gpl.html>
This is free software: you are free to change and redistribute it.
There is NO WARRANTY, to the extent permitted by law.  Type "show copying"
and "show warranty" for details.
This GDB was configured as "i486-linux-gnu"...
Attaching to program: /usr/local/ads5/bin/ads_resolver, process 5584
ptrace: Operation not permitted.
/usr/local/ads5/bin/5584: No such file or directory.
(gdb) info threads
No registers.

There are my code that create the zombie process:

template < class T>
int Monitor < T >::Start()
{
    pid_t pid;
    pid = fork();
    if(pid == 0)
    {
        IgnoreSignal::IgnoreDaemon();
        signal(SIGCHLD,Monitor<T>::ReStart);

        pid = fork();
        if(pid == 0)
        {
            IgnoreSignal::IgnoreAll();
            T worker;
            worker.Run();
        }
        while(1)
        {
            sleep(60);
        }
    }
    return 0;
}

ContentLicense: CC BY-SA 3.0


问:
Output Buffering dumps empty string, 2560 char long
I am dumping variables with:

```<code>ob_start(null, 4096);
define('SITERNDNUM', rand(10000000,99999999));
// other declarations and vars
Session::init();
//
$output_ob = ob_get_contents();
var_dump($output_ob);
</code>```

and all the output I get is:

```<code>string(2560) " "
</code>```

I have tried using the flush function and other output ones with no avail.

答:
The string is not empty. It is 2560 bytes long. var_dump() cannot display all characters and cancels the output for certain characters.

For your understanding:

```<code>$str = "\x00\x01\x02\n";
var_dump($str);  //string(4) " "
</code>```

The hexadecimal notation can help to make all bytes visible.

```<code>function strhex($s){
  return $s != '' ? '\\x'.implode('\\x',str_split(bin2hex($s),2)) : '';
}

$str = "\x00\x01\x02\n";

echo strhex($str);  //  \x00\x01\x02\x0a
</code>```

If you use this function instead of var_dump, all characters will be visible.

Body:
I am dumping variables with:

ob_start(null, 4096);
define('SITERNDNUM', rand(10000000,99999999));
// other declarations and vars
Session::init();
//
$output_ob = ob_get_contents();
var_dump($output_ob);

and all the output I get is:

string(2560) " "

I have tried using the flush function and other output ones with no avail.

Body:
The string is not empty. It is 2560 bytes long. var_dump() cannot display all characters and cancels the output for certain characters.

For your understanding:

$str = "\x00\x01\x02\n";
var_dump($str);  //string(4) " "

The hexadecimal notation can help to make all bytes visible.

function strhex($s){
  return $s != '' ? '\\x'.implode('\\x',str_split(bin2hex($s),2)) : '';
}

$str = "\x00\x01\x02\n";

echo strhex($str);  //  \x00\x01\x02\x0a

If you use this function instead of var_dump, all characters will be visible.


问:
Why "The system cannot find the batch label specified" is thrown even if label exists?
While running a batch file in Windows XP I have found randomly occurring error message:

The system cannot find the batch label specified name_of_label

Of course label existed. What causes this error?

答:
There are multiple possible ways to get the error.

Described by VonC - Wrong line endings, LF instead of CR/LF

Obscure long lines (if that happens accidential, your code is incredible worse)

Direct start another batch after calling a function.

Sample:```<code>@echo off
call :func
echo back from second
exit /b<br>
:func
second.bat
echo NEVER COME BACK HERE</code>```
This unexpectedly tries to goto to the label :func in second.bat.

But this can be (mis)-used to directly call labels in another batch file

This is the described behaviour of the answer of Marshal

Body:
There are multiple possible ways to get the error.

Described by VonC - Wrong line endings, LF instead of CR/LF

Obscure long lines (if that happens accidential, your code is incredible worse)

Direct start another batch after calling a function.

Sample:
@echo off
call :func
echo back from second
exit /b

:func
second.bat
echo NEVER COME BACK HERE

This unexpectedly tries to goto to the label :func in second.bat.

But this can be (mis)-used to directly call labels in another batch file

This is the described behaviour of the answer of Marshal


问:
How to check if variable is not exist
I can't find in docs how I can do negative statement like one below:

```<code>if !($some_var) {
  ... enter here if $some_var doesn't exist or empty
}
</code>```

I know that I can check that the variable is exits using the if statement:

```<code>if ($some_var) {
  ...
}
</code>```

But I can't find how to do if not statement

Is it possible for NGINX?

答:
Try this:</p>

```<code>
if($var = false) {
     ....
}
</code>```

Title: How to check if variable is not exist

Body:
I can't find in docs how I can do negative statement like one below:

if !($some_var) {
  ... enter here if $some_var doesn't exist or empty
}

I know that I can check that the variable is exits using the if statement:

if ($some_var) {
  ...
}

But I can't find how to do if not statement

Is it possible for NGINX?

Body:
Try this:

if($var = false) {
     ....
}


问:
Assign a Value to a New Field Depending on Which Existing Field Has A String Match
My data looks something like the following

```<code>Col1    COl2    Col3    COl4    COl5
Yes     No      No      No      No
No      Yes     No      No      No
</code>```

And I want to create a new column as follows:

```<code>Col1    COl2    Col3    COl4    COl5    NEW_FIELD
Yes     No      No      No      No      Col1
No      Yes     No      No      No      Col2
</code>```

Whereby the new field takes the name of the field where 'Yes' is matched (it only occurs in one of the columns between Col1 and Col5).

I believe I can do this with a CASE function but as I have approximately 10 columns, the syntax gets a little unwieldy and i'm wondering if there is a cleaner MIN() type function across fields?

答:
You can get the first value using coalesce() and case:

```<code>select t.*,
       (coalesce(case when col1 = 'Yes' then 'col1' end,
                 case when col2 = 'Yes' then 'col2' end,
                 case when col3 = 'Yes' then 'col3' end,
                 case when col4 = 'Yes' then 'col4' end,
                 case when col5 = 'Yes' then 'col5' end
                )
        ) as new_field
</code>```

Actually, coalesce() is not needed:

```<code>select t.*,
       (case when col1 = 'Yes' then 'col1'
             when col2 = 'Yes' then 'col2'
             when col3 = 'Yes' then 'col3'
             when col4 = 'Yes' then 'col4'
             when col5 = 'Yes' then 'col5'
        ) as new_field
</code>```

This does not seem particularly "unwieldy".

Body:
My data looks something like the following

Col1    COl2    Col3    COl4    COl5
Yes     No      No      No      No
No      Yes     No      No      No

And I want to create a new column as follows:

Col1    COl2    Col3    COl4    COl5    NEW_FIELD
Yes     No      No      No      No      Col1
No      Yes     No      No      No      Col2

Whereby the new field takes the name of the field where 'Yes' is matched (it only occurs in one of the columns between Col1 and Col5).

I believe I can do this with a CASE function but as I have approximately 10 columns, the syntax gets a little unwieldy and i'm wondering if there is a cleaner MIN() type function across fields?

Body:
You can get the first value using coalesce() and case:

select t.*,
       (coalesce(case when col1 = 'Yes' then 'col1' end,
                 case when col2 = 'Yes' then 'col2' end,
                 case when col3 = 'Yes' then 'col3' end,
                 case when col4 = 'Yes' then 'col4' end,
                 case when col5 = 'Yes' then 'col5' end
                )
        ) as new_field

Actually, coalesce() is not needed:

select t.*,
       (case when col1 = 'Yes' then 'col1'
             when col2 = 'Yes' then 'col2'
             when col3 = 'Yes' then 'col3'
             when col4 = 'Yes' then 'col4'
             when col5 = 'Yes' then 'col5'
        ) as new_field

This does not seem particularly "unwieldy".


问:
How can i Pass Variable from flask) o HTML without render template?
I'm new to using Flask and I've just been trying to pass a variable  to web pages. I know how pass variable in render_template method

but now I am trying a realtime streaming app. It uses different methods like .responses and yields

the flask code for streaming webcam is given below

```<code>@app.route('/')
def index():
    return render_template('index.html')

def get_frame():
    video=cv2.VideoCapture(0) #this makes a web cam object

while True:
    ret, frame = video.read()
    imgencode=cv2.imencode('.jpg',im)[1]
    stringData=imgencode.tostring()
    yield (b'--frame\r\n'
        b'Content-Type: text/plain\r\n\r\n'+stringData+b'\r\n')

del(video)

@app.route('/calc')
def calc():
return Response(get_frame(),mimetype='multipart/x-mixed-replace; boundary=frame')

if __name__ == '__main__':
app.run(host='localhost', debug=True, threaded=True)
</code>```

and template is

```<code> <html>
 <head>
 <title>Video Streaming Demonstration</title>
 </head>
 <body>
 <h1>Video Streaming Demonstration</h1>
 <img src="{{ url_for('calc') }}">
 </body>
 </html>
</code>```

Now I need add a label on my template like {{ value }}>

I have calculated the variable value from flask and I can print it on the console
but now I need to pass that value to a label on the same template that is streaming the video.
please help

答:
FLASK APP.py

#This route accepts request against the url http://domain_name/change_label
#You could add the argument, method=["POST"],
So the route only accepts post request against that url.
@app.route("/change_label")
def change_label():
    #Return the text you want the label to be
    return "New Label"
```

<p><strong>JAVASCRIPT_FILE</strong></p>

<pre class="lang-js prettyprint-override"><code>function change_label(){
//Create xhttp object
var xhttp = new XMLHttpRequest();
//Listen for the response of your xhttp object
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    //If the request is 200 aka succesfull, set the text of the label to the response text of the xhttp request
    document.getElementById("Id of the label").innerHTML =
    this.responseText;
  }
};
//Open a post request with the xhttp object.
xhttp.open("POST", "http://domain/change_label", true);
// Send the post request
xhttp.send();
}
</code>```

HTML FILE

```<code> <html>
 <head>
 <title>Video Streaming Demonstration</title>
 <script src="link_to_javascript"></script>
 </head>
 <body>
 <h1>Video Streaming Demonstration</h1>
 <img src="{{ url_for('calc') }}">
 </body>
 </html>
</code>```

Sorry if its hard to understand, i am very bad at explaining things, my brain is just not wired normally

Body:
I'm new to using Flask and I've just been trying to pass a variable  to web pages. I know how pass variable in render_template method

but now I am trying a realtime streaming app. It uses different methods like .responses and yields

the flask code for streaming webcam is given below

@app.route('/')
def index():
    return render_template('index.html')

def get_frame():
    video=cv2.VideoCapture(0) #this makes a web cam object

while True:
    ret, frame = video.read()
    imgencode=cv2.imencode('.jpg',im)[1]
    stringData=imgencode.tostring()
    yield (b'--frame\r\n'
        b'Content-Type: text/plain\r\n\r\n'+stringData+b'\r\n')

del(video)

@app.route('/calc')
def calc():
return Response(get_frame(),mimetype='multipart/x-mixed-replace; boundary=frame')

if __name__ == '__main__':
app.run(host='localhost', debug=True, threaded=True)

and template is

 <title>Video Streaming Demonstration</title>

Video Streaming Demonstration

Now I need add a label on my template like {{ value }}>

I have calculated the variable value from flask and I can print it on the console
but now I need to pass that value to a label on the same template that is streaming the video.
please help

Body:
FLASK APP.py

#This route accepts request against the url http://domain_name/change_label
#You could add the argument, method=["POST"],<br>So the route only accepts post request against that url.
@app.route("/change_label")
def change_label():
    #Return the text you want the label to be
    return "New Label"

JAVASCRIPT_FILE

function change_label(){
//Create xhttp object
var xhttp = new XMLHttpRequest();
//Listen for the response of your xhttp object
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    //If the request is 200 aka succesfull, set the text of the label to the response text of the xhttp request
    document.getElementById("Id of the label").innerHTML =
    this.responseText;
  }
};
//Open a post request with the xhttp object.
xhttp.open("POST", "http://domain/change_label", true);
// Send the post request
xhttp.send();
}

HTML FILE

 <html>
 <head>
 <title>Video Streaming Demonstration</title>
 <script src="link_to_javascript"></script>
 </head>
 <body>
 <h1>Video Streaming Demonstration</h1>
 <img src="{{ url_for('calc') }}">
 </body>
 </html>

Sorry if its hard to understand, i am very bad at explaining things, my brain is just not wired normally


问:
check username with bvalidator
Why the return value of my function always false

this is my function:

```<code>function checkUsername(username) {
    var ret=false;
    $.ajax({
        type: "POST",
        url: "user_validate.php",
        async: true,
        data: "username="+username,
        success: function(data){
            if(data == 0){
                ret = true;
            }else{
               ret = false;
            }
        },
        error:function() {
            alert("ERROR");
        }
    });
    return ret;
}
</code>```

Is var ret doesn't set the value?
Anything wrong with it..?
thanks before..!

答: The "A" in AJAX stands for "asynchronous"</p>

Title: check username with bvalidator

Body:
Why the return value of my function always false

this is my function:

function checkUsername(username) {
    var ret=false;
    $.ajax({
        type: "POST",
        url: "user_validate.php",
        async: true,
        data: "username="+username,
        success: function(data){
            if(data == 0){
                ret = true;
            }else{
               ret = false;
            }
        },
        error:function() {
            alert("ERROR");
        }
    });
    return ret;
}

Is var ret doesn't set the value?
Anything wrong with it..?
thanks before..!


问:
Nested routes vue default
I have this root vue component

```<code><template>
<router-view></router-view>
</template>
</code>```

Router-view should match either /main, /login urls as shown in the routes below

```<code>{path: '/login',component: 'login.vue'}
{path: '/main',component: 'main.vue', children:[
  {path: '/mainchild1',component: 'mainchild1.vue'},
  {path: '/mainchild2',component: 'mainchild2.vue'
]}
</code>```

The main component is a sidebar and a content-view that should be populated with /main children:

```<code>    //Main.vue
    <template>
    <sidebar></sidebar>
    <router-view></router-view>
    </template>
</code>```

The idea here is to keep a sidebar and render aside either

mainchild1.vue (on /main/mainchild1)

mainchild2.vue (on /main/mainchild1)

Now, if no route is specified in the url i want to redirect to the main component (/main) but with at least the sub view populated (either mainchild1 or mainchild2).

Here is where i am struggling, any help/hints is appreciated.

I tried to redirect on "/" to /main/mainchild1 but it simply renders the root  content, with the mainchild1.vue so removing the sidebar.

I am still learning vue and probably missing some steps in routing tecnique.

UPDATED

Ok, it seemes that i should remove the / from the child elements. This way it works.

To decide if this could be of any help or i should delete this
Thanks
Davide

答:
route.js

```<code>[
  path: '/', redirect: '/main/mainchild1',
  path: '/main', redirect: '/main/mainchild1', component: 'main.vue', children: [
    { path: '/main/mainchild1', component: mainchild1.vue },
    { path: '/main/mainchild2', component: mainchild2.vue }
  ]
]
</code>```

app.vue

```<code><template>
 <sidebar v-if="isLoggedIn"/>
 <router-view></router-view> <!-- components mapped with route '/' or '/main' will render here -->
</template>
</code>```

main.vue

```<code><template>
 <router-view></router-view> <!-- components mapped with route '/main/mainchild1' or '/main/mainchild2' will render here -->
</template>
</code>```

Title: Nested routes vue default

Body:
I have this root vue component

<template>
<router-view></router-view>
</template>

Router-view should match either /main, /login urls as shown in the routes below

{path: '/login',component: 'login.vue'}
{path: '/main',component: 'main.vue', children:[
  {path: '/mainchild1',component: 'mainchild1.vue'},
  {path: '/mainchild2',component: 'mainchild2.vue'
]}

The main component is a sidebar and a content-view that should be populated with /main children:

    //Main.vue
    <template>
    <sidebar></sidebar>
    <router-view></router-view>
    </template>

The idea here is to keep a sidebar and render aside either

mainchild1.vue (on /main/mainchild1)

mainchild2.vue (on /main/mainchild1)

Now, if no route is specified in the url i want to redirect to the main component (/main) but with at least the sub view populated (either mainchild1 or mainchild2).

Here is where i am struggling, any help/hints is appreciated.

I tried to redirect on "/" to /main/mainchild1 but it simply renders the root  content, with the mainchild1.vue so removing the sidebar.

I am still learning vue and probably missing some steps in routing tecnique.

UPDATED

Ok, it seemes that i should remove the / from the child elements. This way it works.

To decide if this could be of any help or i should delete this
Thanks
Davide

Body:
route.js

[
  path: '/', redirect: '/main/mainchild1',
  path: '/main', redirect: '/main/mainchild1', component: 'main.vue', children: [
    { path: '/main/mainchild1', component: mainchild1.vue },
    { path: '/main/mainchild2', component: mainchild2.vue }
  ]
]

app.vue

<template>
 <sidebar v-if="isLoggedIn"/>
 <router-view></router-view> <!-- components mapped with route '/' or '/main' will render here -->
</template>

main.vue

<template>
 <router-view></router-view> <!-- components mapped with route '/main/mainchild1' or '/main/mainchild2' will render here -->
</template>


问:
Django, Gunicorn, Nginx, Postgres, Digitial Ocean Server Error 500 on Image Upload
I am developing a website/blog using Django and am in the middle of figuring out the proper setup/settings.  I am running Ubuntu Server 16.04 in a virtual machine for testing.  I am using what seems to be a common setup with Gunicorn and Nginx as well as PostgreSQL for the database and hosting the static and media files on Digital Ocean Spaces.  I intend to host the site on Digital Ocean as well.

I have pieced together things from a few different guides here, here, here, and here.

I also use Django-Imagekit for handling images (url, resizing, etc) and manage everything in Django Admin.

The problem I am facing is that when I upload an image (either directly to an image form or via a post form) and save the object I end up getting a Server Error (500).  If I refresh the page it then works fine.  This also happens on the site itself (i.e. go to home page, server error, refresh, no error).

There are also absolutely no errors in my Gunicorn and Nginx logs.

File Structure:

```<code>site
├── project
│   ├── gallery
│   │   ├── static
│   │   │   ├── gallery
│   │   │   │   ├── css
│   │   │   │   └── images
│   │   ├── templates
│   │   │   └── gallery
│   │   ├── admin.py
│   │   ├── models.py
│   │   ├── urls.py
│   │   └── views.py
│   ├── posts
│   │   ├── static
│   │   │   ├── posts
│   │   │   │   ├── css
│   │   │   │   └── images
│   │   ├── templates
│   │   │   └── gallery
│   │   ├── admin.py
│   │   ├── models.py
│   │   ├── urls.py
│   │   └── views.py
│   ├── project
│   │   ├── settings
│   │   │   ├── base.py
│   │   │   ├── development.py
│   │   │   ├── local.py
│   │   │   ├── production.py
│   │   │   └── testing.py
│   │   ├── urls.py
│   │   └── wsgi.py
│   ├── static
│   └── templates
</code>```

gallery/models.py:

```<code>...
from imagekit.models import ImageSpecField
from imagekit.processors import ResizeToFit, ResizeToFill
...

class Watermark(object):
    def process(self, image):
        pass

class Image(models.Model):
    original = ImageField(upload_to='images/%Y/%m/%d/')
    large = ImageSpecField(source='original', processors=[Watermark(), \
        ResizeToFit(width=2000, height=2000, upscale=False)], \
        format='JPEG', options={'quality': 90})
    medium=...
    small=...
    wide=...
    home=...
    upload_date = models.DateTimeField(null=True, editable=False)

    def save(self):
    if not self.id and not self.original:
        return

    if self.upload_date is None:
        self.upload_date = timezone.now()

    image = PIL.Image.open(self.original)
    imgFormat = image.format
    MAX_HEIGHT = 4000
    MAX_WIDTH = 4000

    # Resize image if over MAX pixels in either direction
    (width, height) = image.size
    if height > MAX_HEIGHT or width > MAX_WIDTH:
        ratio = width / height
        output = BytesIO()

        if width > height:
            width = MAX_WIDTH
            height = int(width / ratio)
        else:
            height = MAX_HEIGHT
            width = int(height * ratio)

        size = (width, height)
        image = image.resize(size, PIL.Image.ANTIALIAS)
        image.save(output, format=imgFormat, quality=100)
        self.original = InMemoryUploadedFile(output, 'ImageField', \
            self.original.name, 'images/', sys.getsizeof(output), None)
    super(Image, self).save()
</code>```

posts/models.py:

```<code>class Post(models.Model):
    title = models.CharField(max_length=75)
    ...
    image = models.ForeignKey(Image, blank=True, null=True, \
        on_delete=models.SET_NULL)
    ...
</code>```

settings/base.py:

```<code>import os

BASE_DIR = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))

SECRET_KEY = os.environ['SECRET_KEY']

DEBUG = True

ALLOWED_HOSTS = []

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'posts',
    'gallery',
    'taggit',
    'ckeditor',
    'storages',
    'imagekit',
    ...
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'project.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
                'django.template.context_processors.media',
            ],
        },
    },
]

WSGI_APPLICATION = 'project.wsgi.application'

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True
</code>```

settings/testing.py:

```<code>from project.settings.base import *

# Override base.py settings here

DEBUG = False

ALLOWED_HOSTS = ['*']

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql_psycopg2',
        'NAME': 'test',
        'USER': 'user',
        'PASSWORD': '****',
        'HOST': 'localhost',
        'PORT': '1234',
    }
}

# DigitalOcean Spaces Settings
AWS_ACCESS_KEY_ID = '*****'
AWS_SECRET_ACCESS_KEY = '*****'
AWS_STORAGE_BUCKET_NAME = 'production-storage'
AWS_S3_ENDPOINT_URL = 'https://nyc3.digitaloceanspaces.com'
AWS_S3_OBJECT_PARAMETERS = {
    'CacheControl': 'max-age=86400'
}
AWS_LOCATION = 'static_test/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static', 'static'),
]

STATIC_URL = 'https://%s/%s/' % (AWS_S3_ENDPOINT_URL, AWS_LOCATION)
STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
IMAGEKIT_DEFAULT_IMAGE_CACHE_BACKEND = 'imagekit.imagecache.NonValidatingImageCacheBackend'

# Needed for CKEditor to work
AWS_QUERYSTRING_AUTH = False
</code>```

venv/bin/gunicorn_start:

```<code>#!/bin/bash

NAME="project"
DIR=/home/user/site/project
USER=brandon
GROUP=brandon
WORKERS=3
BIND=unix:/home/user/run/gunicorn.sock
DJANGO_SETTINGS_MODULE=project.settings.testing
DJANGO_WSGI_MODULE=project.wsgi
SECRET_KEY='*****'
LOG_LEVEL=error

cd $DIR
source ../../venv/bin/activate

export SECRET_KEY=$SECRET_KEY
export DJANGO_SETTINGS_MODULE=$DJANGO_SETTINGS_MODULE
export PYTHONPATH=$DIR:$PYTHONPATH

exec ../../venv/bin/gunicorn ${DJANGO_WSGI_MODULE}:application \
 --name $NAME \
 --workers $WORKERS \
 --user=$USER \
 --group=$GROUP \
 --bind=$BIND \
 --log-level=$LOG_LEVEL \
 --log-file=-
</code>```

/etc/nginx/sites-available/project:

```<code>upstream app_server {
    server unix:/home/user/run/gunicorn.sock fail_timeout=0;
}

server {
    listen 80;

    # add here the ip address of your server
    # or a domain pointing to that ip(like example.com or www.example.com)
    server_name 192.168.1.179

    keepalive_timeout 5;
    client_max_body_size 4G;
    access_log /home/user/logs/nginx-access.log;
    error_log /home/user/logs/nginx-error.log;

    location /static/ {
        alias /home/user/site/project/static;
    }

    # checks for static file, if not found proxy to app
    location / {
        try_files $uri @proxy_to_app;
    }

    location @proxy_to_app {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;
        proxy_pass http://app_server;
    }
}
</code>```

Any help would be appreciated.

Edit:

Setting Debug to True gave me the following errors.

The issue seems to be related to Django-Imagekit

```<code>Internal Server Error: /posts/
Traceback (most recent call last):
    File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 882, in _resolve_lookup
    current = current[bit]
TypeError: 'ImageCacheFile' object is not subscriptable

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "/home/user/venv/lib/python3.5/site-packages/django/core/handlers/exception.py", line 41, in inner
    response = get_response(request)
  File "/home/user/venv/lib/python3.5/site-packages/django/core/handlers/base.py", line 187, in _get_response
    response = self.process_exception_by_middleware(e, request)
  File "/home/user/venv/lib/python3.5/site-packages/django/core/handlers/base.py", line 185, in _get_response
    response = wrapped_callback(request, *callback_args, **callback_kwargs)
  File "/home/user/site/project/posts/views.py", line 39, in posts
    return render(request, 'posts/posts.html', {'posts':posts, 'recentTags':recent_tags})
  File "/home/user/venv/lib/python3.5/site-packages/django/shortcuts.py", line 30, in render
    content = loader.render_to_string(template_name, context, request, using=using)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/loader.py", line 68, in render_to_string
    return template.render(context, request)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/backends/django.py", line 66, in render
    return self.template.render(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 207, in render
    return self._render(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 199, in _render
    return self.nodelist.render(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 990, in render
    bit = node.render_annotated(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 957, in render_annotated
    return self.render(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/loader_tags.py", line 177, in render
    return compiled_parent._render(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 199, in _render
    return self.nodelist.render(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 990, in render
    bit = node.render_annotated(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 957, in render_annotated
    return self.render(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/loader_tags.py", line 72, in render
    result = block.nodelist.render(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 990, in render
    bit = node.render_annotated(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 957, in render_annotated
    return self.render(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/loader_tags.py", line 216, in render
    return template.render(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 209, in render
    return self._render(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 199, in _render
    return self.nodelist.render(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 990, in render
    bit = node.render_annotated(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 957, in render_annotated
    return self.render(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/defaulttags.py", line 216, in render
    nodelist.append(node.render_annotated(context))
  File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 957, in render_annotated
    return self.render(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/defaulttags.py", line 322, in render
    return nodelist.render(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 990, in render
    bit = node.render_annotated(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 957, in render_annotated
    return self.render(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 1040, in render
    output = self.filter_expression.resolve(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 708, in resolve
    obj = self.var.resolve(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 849, in resolve
    value = self._resolve_lookup(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 890, in _resolve_lookup
    current = getattr(current, bit)
  File "/home/user/venv/lib/python3.5/site-packages/imagekit/cachefiles/__init__.py", line 85, in url
    return self._storage_attr('url')
  File "/home/user/venv/lib/python3.5/site-packages/imagekit/cachefiles/__init__.py", line 75, in _storage_attr
    existence_required.send(sender=self, file=self)
  File "/home/user/venv/lib/python3.5/site-packages/django/dispatch/dispatcher.py", line 193, in send
    for receiver in self._live_receivers(sender)
  File "/home/user/venv/lib/python3.5/site-packages/django/dispatch/dispatcher.py", line 193, in <listcomp>
    for receiver in self._live_receivers(sender)
  File "/home/user/venv/lib/python3.5/site-packages/imagekit/registry.py", line 53, in existence_required_receiver
    self._receive(file, 'on_existence_required')
  File "/home/user/venv/lib/python3.5/site-packages/imagekit/registry.py", line 61, in _receive
    call_strategy_method(file, callback)
  File "/home/user/venv/lib/python3.5/site-packages/imagekit/utils.py", line 166, in call_strategy_method
    fn(file)
  File "/home/user/venv/lib/python3.5/site-packages/imagekit/cachefiles/strategies.py", line 15, in on_existence_required
    file.generate()
  File "/home/user/venv/lib/python3.5/site-packages/imagekit/cachefiles/__init__.py", line 94, in generate
    self.cachefile_backend.generate(self, force)
  File "/home/user/venv/lib/python3.5/site-packages/imagekit/cachefiles/backends.py", line 109, in generate
    self.generate_now(file, force=force)
  File "/home/user/venv/lib/python3.5/site-packages/imagekit/cachefiles/backends.py", line 96, in generate_now
    file._generate()
  File "/home/user/venv/lib/python3.5/site-packages/imagekit/cachefiles/__init__.py", line 103, in _generate
    content.seek(0)
ValueError: I/O operation on closed file.
</code>```

答:
Latest django-storages version has removed _save_content method. This is an updated version of this custom storage class:

class CustomS3Boto3Storage(S3Boto3Storage, ABC):
    """
    This is our custom version of S3Boto3Storage that fixes a bug in
    boto3 where the passed in file is closed upon upload.
    From:
    https://github.com/matthewwithanm/django-imagekit/issues/391#issuecomment-275367006
    https://github.com/boto/boto3/issues/929
    https://github.com/matthewwithanm/django-imagekit/issues/391
    """

    def _save(self, name, content):
        """
        We create a clone of the content file as when this is passed to
        boto3 it wrongly closes the file upon upload where as the storage
        backend expects it to still be open
        """
        # Seek our content back to the start
        content.seek(0, os.SEEK_SET)

        # Create a temporary file that will write to disk after a specified
        # size
        content_autoclose = SpooledTemporaryFile()

        # Write our original content into our copy that will be closed by boto3
        content_autoclose.write(content.read())

        # Upload the object which will auto close the content_autoclose
        # instance
        super(CustomS3Boto3Storage, self)._save(name, content_autoclose)

        # Cleanup if this is fixed upstream our duplicate should always close
        if not content_autoclose.closed:
            content_autoclose.close()
```

Body:
I am developing a website/blog using Django and am in the middle of figuring out the proper setup/settings.  I am running Ubuntu Server 16.04 in a virtual machine for testing.  I am using what seems to be a common setup with Gunicorn and Nginx as well as PostgreSQL for the database and hosting the static and media files on Digital Ocean Spaces.  I intend to host the site on Digital Ocean as well.

I have pieced together things from a few different guides here, here, here, and here.

I also use Django-Imagekit for handling images (url, resizing, etc) and manage everything in Django Admin.

The problem I am facing is that when I upload an image (either directly to an image form or via a post form) and save the object I end up getting a Server Error (500).  If I refresh the page it then works fine.  This also happens on the site itself (i.e. go to home page, server error, refresh, no error).

There are also absolutely no errors in my Gunicorn and Nginx logs.

File Structure:

site
├── project
│   ├── gallery
│   │   ├── static
│   │   │   ├── gallery
│   │   │   │   ├── css
│   │   │   │   └── images
│   │   ├── templates
│   │   │   └── gallery
│   │   ├── admin.py
│   │   ├── models.py
│   │   ├── urls.py
│   │   └── views.py
│   ├── posts
│   │   ├── static
│   │   │   ├── posts
│   │   │   │   ├── css
│   │   │   │   └── images
│   │   ├── templates
│   │   │   └── gallery
│   │   ├── admin.py
│   │   ├── models.py
│   │   ├── urls.py
│   │   └── views.py
│   ├── project
│   │   ├── settings
│   │   │   ├── base.py
│   │   │   ├── development.py
│   │   │   ├── local.py
│   │   │   ├── production.py
│   │   │   └── testing.py
│   │   ├── urls.py
│   │   └── wsgi.py
│   ├── static
│   └── templates

gallery/models.py:

...
from imagekit.models import ImageSpecField
from imagekit.processors import ResizeToFit, ResizeToFill
...

class Watermark(object):
    def process(self, image):
        pass

class Image(models.Model):
    original = ImageField(upload_to='images/%Y/%m/%d/')
    large = ImageSpecField(source='original', processors=[Watermark(), \
        ResizeToFit(width=2000, height=2000, upscale=False)], \
        format='JPEG', options={'quality': 90})
    medium=...
    small=...
    wide=...
    home=...
    upload_date = models.DateTimeField(null=True, editable=False)

    def save(self):
    if not self.id and not self.original:
        return

    if self.upload_date is None:
        self.upload_date = timezone.now()

    image = PIL.Image.open(self.original)
    imgFormat = image.format
    MAX_HEIGHT = 4000
    MAX_WIDTH = 4000

    # Resize image if over MAX pixels in either direction
    (width, height) = image.size
    if height > MAX_HEIGHT or width > MAX_WIDTH:
        ratio = width / height
        output = BytesIO()

        if width > height:
            width = MAX_WIDTH
            height = int(width / ratio)
        else:
            height = MAX_HEIGHT
            width = int(height * ratio)

        size = (width, height)
        image = image.resize(size, PIL.Image.ANTIALIAS)
        image.save(output, format=imgFormat, quality=100)
        self.original = InMemoryUploadedFile(output, 'ImageField', \
            self.original.name, 'images/', sys.getsizeof(output), None)
    super(Image, self).save()

posts/models.py:

class Post(models.Model):
    title = models.CharField(max_length=75)
    ...
    image = models.ForeignKey(Image, blank=True, null=True, \
        on_delete=models.SET_NULL)
    ...

settings/base.py:

import os

BASE_DIR = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))

SECRET_KEY = os.environ['SECRET_KEY']

DEBUG = True

ALLOWED_HOSTS = []

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'posts',
    'gallery',
    'taggit',
    'ckeditor',
    'storages',
    'imagekit',
    ...
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'project.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
                'django.template.context_processors.media',
            ],
        },
    },
]

WSGI_APPLICATION = 'project.wsgi.application'

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True

settings/testing.py:

from project.settings.base import *

# Override base.py settings here

DEBUG = False

ALLOWED_HOSTS = ['*']

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql_psycopg2',
        'NAME': 'test',
        'USER': 'user',
        'PASSWORD': '****',
        'HOST': 'localhost',
        'PORT': '1234',
    }
}

# DigitalOcean Spaces Settings
AWS_ACCESS_KEY_ID = '*****'
AWS_SECRET_ACCESS_KEY = '*****'
AWS_STORAGE_BUCKET_NAME = 'production-storage'
AWS_S3_ENDPOINT_URL = 'https://nyc3.digitaloceanspaces.com'
AWS_S3_OBJECT_PARAMETERS = {
    'CacheControl': 'max-age=86400'
}
AWS_LOCATION = 'static_test/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static', 'static'),
]

STATIC_URL = 'https://%s/%s/' % (AWS_S3_ENDPOINT_URL, AWS_LOCATION)
STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
IMAGEKIT_DEFAULT_IMAGE_CACHE_BACKEND = 'imagekit.imagecache.NonValidatingImageCacheBackend'

# Needed for CKEditor to work
AWS_QUERYSTRING_AUTH = False

venv/bin/gunicorn_start:

#!/bin/bash

NAME="project"
DIR=/home/user/site/project
USER=brandon
GROUP=brandon
WORKERS=3
BIND=unix:/home/user/run/gunicorn.sock
DJANGO_SETTINGS_MODULE=project.settings.testing
DJANGO_WSGI_MODULE=project.wsgi
SECRET_KEY='*****'
LOG_LEVEL=error

cd $DIR
source ../../venv/bin/activate

export SECRET_KEY=$SECRET_KEY
export DJANGO_SETTINGS_MODULE=$DJANGO_SETTINGS_MODULE
export PYTHONPATH=$DIR:$PYTHONPATH

exec ../../venv/bin/gunicorn ${DJANGO_WSGI_MODULE}:application \
 --name $NAME \
 --workers $WORKERS \
 --user=$USER \
 --group=$GROUP \
 --bind=$BIND \
 --log-level=$LOG_LEVEL \
 --log-file=-

/etc/nginx/sites-available/project:

upstream app_server {
    server unix:/home/user/run/gunicorn.sock fail_timeout=0;
}

server {
    listen 80;

    # add here the ip address of your server
    # or a domain pointing to that ip(like example.com or www.example.com)
    server_name 192.168.1.179

    keepalive_timeout 5;
    client_max_body_size 4G;
    access_log /home/user/logs/nginx-access.log;
    error_log /home/user/logs/nginx-error.log;

    location /static/ {
        alias /home/user/site/project/static;
    }

    # checks for static file, if not found proxy to app
    location / {
        try_files $uri @proxy_to_app;
    }

    location @proxy_to_app {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;
        proxy_pass http://app_server;
    }
}

Any help would be appreciated.

Edit:

Setting Debug to True gave me the following errors.

The issue seems to be related to Django-Imagekit

Internal Server Error: /posts/
Traceback (most recent call last):
    File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 882, in _resolve_lookup
    current = current[bit]
TypeError: 'ImageCacheFile' object is not subscriptable

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "/home/user/venv/lib/python3.5/site-packages/django/core/handlers/exception.py", line 41, in inner
    response = get_response(request)
  File "/home/user/venv/lib/python3.5/site-packages/django/core/handlers/base.py", line 187, in _get_response
    response = self.process_exception_by_middleware(e, request)
  File "/home/user/venv/lib/python3.5/site-packages/django/core/handlers/base.py", line 185, in _get_response
    response = wrapped_callback(request, *callback_args, **callback_kwargs)
  File "/home/user/site/project/posts/views.py", line 39, in posts
    return render(request, 'posts/posts.html', {'posts':posts, 'recentTags':recent_tags})
  File "/home/user/venv/lib/python3.5/site-packages/django/shortcuts.py", line 30, in render
    content = loader.render_to_string(template_name, context, request, using=using)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/loader.py", line 68, in render_to_string
    return template.render(context, request)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/backends/django.py", line 66, in render
    return self.template.render(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 207, in render
    return self._render(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 199, in _render
    return self.nodelist.render(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 990, in render
    bit = node.render_annotated(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 957, in render_annotated
    return self.render(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/loader_tags.py", line 177, in render
    return compiled_parent._render(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 199, in _render
    return self.nodelist.render(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 990, in render
    bit = node.render_annotated(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 957, in render_annotated
    return self.render(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/loader_tags.py", line 72, in render
    result = block.nodelist.render(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 990, in render
    bit = node.render_annotated(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 957, in render_annotated
    return self.render(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/loader_tags.py", line 216, in render
    return template.render(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 209, in render
    return self._render(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 199, in _render
    return self.nodelist.render(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 990, in render
    bit = node.render_annotated(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 957, in render_annotated
    return self.render(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/defaulttags.py", line 216, in render
    nodelist.append(node.render_annotated(context))
  File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 957, in render_annotated
    return self.render(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/defaulttags.py", line 322, in render
    return nodelist.render(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 990, in render
    bit = node.render_annotated(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 957, in render_annotated
    return self.render(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 1040, in render
    output = self.filter_expression.resolve(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 708, in resolve
    obj = self.var.resolve(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 849, in resolve
    value = self._resolve_lookup(context)
  File "/home/user/venv/lib/python3.5/site-packages/django/template/base.py", line 890, in _resolve_lookup
    current = getattr(current, bit)
  File "/home/user/venv/lib/python3.5/site-packages/imagekit/cachefiles/__init__.py", line 85, in url
    return self._storage_attr('url')
  File "/home/user/venv/lib/python3.5/site-packages/imagekit/cachefiles/__init__.py", line 75, in _storage_attr
    existence_required.send(sender=self, file=self)
  File "/home/user/venv/lib/python3.5/site-packages/django/dispatch/dispatcher.py", line 193, in send
    for receiver in self._live_receivers(sender)
  File "/home/user/venv/lib/python3.5/site-packages/django/dispatch/dispatcher.py", line 193, in <listcomp>
    for receiver in self._live_receivers(sender)
  File "/home/user/venv/lib/python3.5/site-packages/imagekit/registry.py", line 53, in existence_required_receiver
    self._receive(file, 'on_existence_required')
  File "/home/user/venv/lib/python3.5/site-packages/imagekit/registry.py", line 61, in _receive
    call_strategy_method(file, callback)
  File "/home/user/venv/lib/python3.5/site-packages/imagekit/utils.py", line 166, in call_strategy_method
    fn(file)
  File "/home/user/venv/lib/python3.5/site-packages/imagekit/cachefiles/strategies.py", line 15, in on_existence_required
    file.generate()
  File "/home/user/venv/lib/python3.5/site-packages/imagekit/cachefiles/__init__.py", line 94, in generate
    self.cachefile_backend.generate(self, force)
  File "/home/user/venv/lib/python3.5/site-packages/imagekit/cachefiles/backends.py", line 109, in generate
    self.generate_now(file, force=force)
  File "/home/user/venv/lib/python3.5/site-packages/imagekit/cachefiles/backends.py", line 96, in generate_now
    file._generate()
  File "/home/user/venv/lib/python3.5/site-packages/imagekit/cachefiles/__init__.py", line 103, in _generate
    content.seek(0)
ValueError: I/O operation on closed file.


问:
Property 'target' does not exist on type 'string'
I am making a search bar in Typescript but it is not taking any input. The term target on my onChange method keeps giving an error that

```<code>Property 'target' does not exist on type 'string'.
</code>```

```<code>export default class userSearchPage extends Component <{}, { searchItem: string}>{
  constructor(props: Readonly<{}>) {
    super(props);
    this.state = {
      searchItem: ''
    };
  }

  render() {
    return (

  <div>
    <PermanentDrawerLeft></PermanentDrawerLeft>
    <div className='main-content'>
      <SearchBar
        onChange={e => {
          this.setState({searchItem: e.target.value})
        }}

        onRequestSearch={() => console.log('onRequestSearch')}
        style={{
          margin: '0 auto',
          maxWidth: 800
        }}
      />
    </div>
  </div>
  );
}
}
</code>```

How could I fix this?

答:
I searched for your SearchBar material ui and in the documentation you can see that the onChange doesnt return the event but the actual value as you type. Which is a string...hence the error.

I would also suggest if you are using TypeScript to actually use types.

So for example your onChange should look like

onChange={value: string => this.setState({searchItem: value}) }

Body:
I am making a search bar in Typescript but it is not taking any input. The term target on my onChange method keeps giving an error that

Property 'target' does not exist on type 'string'.

export default class userSearchPage extends Component <{}, { searchItem: string}>{
  constructor(props: Readonly<{}>) {
    super(props);
    this.state = {
      searchItem: ''
    };
  }

  render() {
    return (

    <PermanentDrawerLeft></PermanentDrawerLeft>

      <SearchBar
        onChange={e => {
          this.setState({searchItem: e.target.value})
        }}

        onRequestSearch={() => console.log('onRequestSearch')}
        style={{
          margin: '0 auto',
          maxWidth: 800
        }}
      />

  );
}
}

How could I fix this?


问:
PHP - Mutidimensional array diff
i would like to ask for your help since I'm having difficulty resolving this matter. I had created a function to facilitate on array diff but it does not suffice to my needs. Thanks and more power!

```<code><?php
   $arraySession = array(
      'sampleA' => array('1', '2', '3'),
      'sampleB' => array('1', '2', '3'),
   );

$arrayPost = array(
    'sampleA' => array('1'),
    'sampleB' => array('1','2'),
);
</code>```

result should be:

```<code>array(
   'sampleA' => array('2', '3')
   'sampleB' => array('3'),
)
</code>```

my existing function:

```<code>    public function array_diff_multidimensional($session, $post) {
      $result = array();
      foreach($session as $sKey => $sValue){
          foreach($post as $pKey => $pValue) {
              if((string) $sKey == (string) $pKey) {
                  $result[$sKey] = array_diff($sValue, $pValue);
              } else {
                  $result[$sKey] = $sValue;
              }
          }
      }
      return $result;
    }
</code>```

Any help would be much appreciated! Happy coding!

答:
This should do it, assuming all keys occur in both arrays:

```<code>$diff = array();
foreach ($session as $key => $values) {
    $diff[$key] = array_diff($values, $post[$key]);
}
</code>```

Or, because I'm bored and array_map is underused:

```<code>$diff = array_combine(
    array_keys($session),
    array_map(function ($a, $b) { return array_diff($a, $b); }, $session, $post)
);
</code>```

(Assumed well ordered arrays though.)

Title: PHP - Mutidimensional array diff

Body:
i would like to ask for your help since I'm having difficulty resolving this matter. I had created a function to facilitate on array diff but it does not suffice to my needs. Thanks and more power!

<?php
   $arraySession = array(
      'sampleA' => array('1', '2', '3'),
      'sampleB' => array('1', '2', '3'),
   );

$arrayPost = array(
    'sampleA' => array('1'),
    'sampleB' => array('1','2'),
);

result should be:

array(
   'sampleA' => array('2', '3')
   'sampleB' => array('3'),
)

my existing function:

    public function array_diff_multidimensional($session, $post) {
      $result = array();
      foreach($session as $sKey => $sValue){
          foreach($post as $pKey => $pValue) {
              if((string) $sKey == (string) $pKey) {
                  $result[$sKey] = array_diff($sValue, $pValue);
              } else {
                  $result[$sKey] = $sValue;
              }
          }
      }
      return $result;
    }

Any help would be much appreciated! Happy coding!

Body:
This should do it, assuming all keys occur in both arrays:

$diff = array();
foreach ($session as $key => $values) {
    $diff[$key] = array_diff($values, $post[$key]);
}

Or, because I'm bored and array_map is underused:

$diff = array_combine(
    array_keys($session),
    array_map(function ($a, $b) { return array_diff($a, $b); }, $session, $post)
);

(Assumed well ordered arrays though.)


问:
How to check if the last 4 characteres are .pdf- VBA Code
I'm doing a VBA program to download all pdf files from a website.
I need to verify if the link ends in "/.pdf".
Can you help me?</p>

答:
```<code>Dim resultPDF As String
resultPDF = right("your link", 5)
</code>```

If you would put the link in a cell and you will select it:

```<code>resultPDF = right(ActiveCell.Value, 5)
</code>```

If you have many such links to analize, you must put them in a range. Let us say A:A range. From A2 to A20:

```<code>  Dim i as long, rng as Range, sh as Worksheet
  Set Sh = ActiveSheet' use here your sheet
  Set rng = sh.Range("A2:A20")
  For i = 2 To 20
      Debug.Print right(rng.Value, 5)
      If right(rng.Value, 5) = "\.pdf" then MsgBox "It is PDF!"
  Next i
</code>```

Body:
Dim resultPDF As String
resultPDF = right("your link", 5)

If you would put the link in a cell and you will select it:

resultPDF = right(ActiveCell.Value, 5)

If you have many such links to analize, you must put them in a range. Let us say A:A range. From A2 to A20:

  Dim i as long, rng as Range, sh as Worksheet
  Set Sh = ActiveSheet' use here your sheet
  Set rng = sh.Range("A2:A20")
  For i = 2 To 20
      Debug.Print right(rng.Value, 5)
      If right(rng.Value, 5) = "\.pdf" then MsgBox "It is PDF!"
  Next i


问:
faild to build body in activemq
I want use ActiveMQ in .net core,i use Apache.NMS.ActiveMQ for doing this but I have problem.
I see this error in ActiveMQ admin console:

```<code>Cannot display ObjectMessage body. Reason: Failed to build body from bytes. Reason: java.io.StreamCorruptedException: invalid stream header: 00010000
</code>```

thats part of my code for doing this:

```<code>private const String QUEUE_DESTINATION = "test-queue";
private IConnection _connection;
private ISession _session;
public MessageQueue()
{
    IConnectionFactory factory = new ConnectionFactory("tcp://localhost:61616?wireFormat.maxInactivityDuration=5000000");
    _connection = factory.CreateConnection();
    _connection.Start();
    _session = _connection.CreateSession();
}
</code>```

```<code>IDestination dest = _session.GetQueue(QUEUE_DESTINATION);
using (IMessageProducer producer = _session.CreateProducer(dest))
{
    var objectMessage = producer.CreateObjectMessage(newDoc);
    producer.Send(objectMessage);
}
</code>```

答:
The fact that the admin console can't display the body of an ObjectMessage isn't really an error. It's the expected behavior. Remember, from the broker's perspective the message body is just an array of bytes. It could be text data (encoded many different ways), image data, custom binary data, etc. The broker has no idea how to decode it. It will try to display the body as text, but if it fails it won't try anything else.

To be clear, in order to see the contents of an ObjectMessage the web console would have to have the object's definition in order to deserialize it. There is no mechanism to tell the web console about arbitrary data formats so it can deserialize message bodies reliably (other than simple text). This is one reason, among many, to avoid ObjectMessage.

I recommend you use a simple text format (e.g. JSON, XML) to represent your data and send that in your message rather than using ObjectMessage.

Title: faild to build body in activemq

Body:
I want use ActiveMQ in .net core,i use Apache.NMS.ActiveMQ for doing this but I have problem.
I see this error in ActiveMQ admin console:

Cannot display ObjectMessage body. Reason: Failed to build body from bytes. Reason: java.io.StreamCorruptedException: invalid stream header: 00010000

thats part of my code for doing this:

private const String QUEUE_DESTINATION = "test-queue";
private IConnection _connection;
private ISession _session;
public MessageQueue()
{
    IConnectionFactory factory = new ConnectionFactory("tcp://localhost:61616?wireFormat.maxInactivityDuration=5000000");
    _connection = factory.CreateConnection();
    _connection.Start();
    _session = _connection.CreateSession();
}

IDestination dest = _session.GetQueue(QUEUE_DESTINATION);
using (IMessageProducer producer = _session.CreateProducer(dest))
{
    var objectMessage = producer.CreateObjectMessage(newDoc);
    producer.Send(objectMessage);
}


问:
A difference output with difference ways for make a list that only exist from the dictionary
first i used a list methods remove() to delete the item that doesn't exist in the dictionary values.
The code is like this:

```<code>rollNumber = [47, 64, 69, 37, 76, 83, 95, 97]
sampleDict = {'Jhon':47, 'Emma':69, 'Kelly':76, 'Jason':97}
for num in rollNumber:
    if num not in sampleDict.values():
        rollNumber.remove(num)

print('After removing unwanted element from list', rollNumber)
</code>```

output : [47,69,76,95,97]
this is wrong answer

the second one i made a empty list and used append() methods from the item that in dictionary.values
the code is like this:

```<code>rollNumber = [47, 64, 69, 37, 76, 83, 95, 97]
sampleDict = {'Jhon':47, 'Emma':69, 'Kelly':76, 'Jason':97}
new = []
for num in rollNumber:
    if num in sampleDict.values():
        new.append(num)

print('After removing unwanted element from list', new)
</code>```

output : [47,69,76,97]
this the correct answer

Do you guys know why this happens?

答:
Since you are removing the element, it is not impacting the index of for loop and the for loop is skipping some list element due to the changed position of index once the number is removed.

```<code>        rollNumber = [47, 64, 69, 37, 76, 83, 95, 97]
        sampleDict = {'Jhon': 47, 'Emma': 69, 'Kelly': 76, 'Jason': 97}

        for num in rollNumber:
            print(num)
            if num not in sampleDict.values():
                rollNumber.remove(num)
                print(rollNumber)

        print('After removing unwanted element from list', rollNumber)

</code>```

Result

```<code>47
64
[47, 69, 37, 76, 83, 95, 97]
37
[47, 69, 76, 83, 95, 97]
83
[47, 69, 76, 95, 97]
97
After removing unwanted element from list [47, 69, 76, 95, 97]

</code>```

As you can see in the result for loop does not get executed for 69, 76 and 95 due to change in their index.

Body:
first i used a list methods remove() to delete the item that doesn't exist in the dictionary values.
The code is like this:

rollNumber = [47, 64, 69, 37, 76, 83, 95, 97]
sampleDict = {'Jhon':47, 'Emma':69, 'Kelly':76, 'Jason':97}
for num in rollNumber:
    if num not in sampleDict.values():
        rollNumber.remove(num)

print('After removing unwanted element from list', rollNumber)

output : [47,69,76,95,97]
this is wrong answer

the second one i made a empty list and used append() methods from the item that in dictionary.values
the code is like this:

rollNumber = [47, 64, 69, 37, 76, 83, 95, 97]
sampleDict = {'Jhon':47, 'Emma':69, 'Kelly':76, 'Jason':97}
new = []
for num in rollNumber:
    if num in sampleDict.values():
        new.append(num)

print('After removing unwanted element from list', new)

output : [47,69,76,97]
this the correct answer

Do you guys know why this happens?

Body:
Since you are removing the element, it is not impacting the index of for loop and the for loop is skipping some list element due to the changed position of index once the number is removed.

        rollNumber = [47, 64, 69, 37, 76, 83, 95, 97]
        sampleDict = {'Jhon': 47, 'Emma': 69, 'Kelly': 76, 'Jason': 97}

        for num in rollNumber:
            print(num)
            if num not in sampleDict.values():
                rollNumber.remove(num)
                print(rollNumber)

        print('After removing unwanted element from list', rollNumber)

Result

47
64
[47, 69, 37, 76, 83, 95, 97]
37
[47, 69, 76, 83, 95, 97]
83
[47, 69, 76, 95, 97]
97
After removing unwanted element from list [47, 69, 76, 95, 97]

As you can see in the result for loop does not get executed for 69, 76 and 95 due to change in their index.


问:
Timer for parallel controllers in jmeter
I need to add the time delay of 5 sec only in my child request(In the attached screenshot i want to add 5 min delay for req 2,3,4,5,7,8,10,11) which are in parallel controller. Can some one suggest the timer that i need to use in Jmeter.project structure</p>

答:
If this is really what you want:

JMeter timers obey JMeter scoping rules so if you want to introduce a delay before executing a Sampler - add a JSR223 Timer as a child of this Sampler and put return 5000 into "Script" area

JMeter will wait for the defined time (in the above case - for 5 seconds) before executing it.

However if you need to "sleep" for some time before this or that request - it's quite enough just to move them outside the Parallel Controller