问:
CSS: Is font-size not acurrate?
So, link and link give hints about how fonts are implementation dependent.
This question is very especific to font-size in the following case:

font-size: 50px; will take aditional space to render (60px in my case)

div {
  height: 50px;
  font-size: 50px;
  background: green;
}

span {
  background: red;
}

.lineheight {
  line-height: 50px;
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><p>Green is 50px, Red is not</p>
<div><span>fg</span></div>

<p>You can still see the overflow without span:</p>
<div>jAaMgÁ</div>

<p>line-height does not solve the issue (just makes it prettier)</p>
<div class="lineheight"><span>jAaMgÁ</span></div></code>```

What i expect to happen is: ascender and descender inside em square

What i get is: descender is draw outside the em square.

From the documentation link: "The font size corresponds to the em square"

From this reference the em square should include both descender and ascender:

So why is the browser doing something else? I tried Firefox and Chrome, and both seem consistent with this (miss?)behaviour... did the specification change? if so, what is the appropiate way to tell the browser the font height including descender and ascender?

(width can be ignored, and you are free to use up to CSS4, but CSS3 is appreciated)

答:
It is not acurrate.

CSS3 introduced a few changes allowing OpenType fonts: link. But also altering how font-size works:

CSS2 font-size: The font size corresponds to the em square.

CSS3 font-size: The font-size is a scale factor applied to the EM unit of the font.

If your browser supports only CSS2 the em square will be exactly the same as the font-size.

But, by supporting CSS3 most browsers will now multiply the font-size against the font's "em unit" which is diferent for each font but allways > 1.

As a result you will end with a bigger em square than expected which is the cause of the inacurracy.

A quick dirty solution would be to adjust the font size to your needs:

```<code>  font-size-adjust:0.4; //equivalent to 1:1 ratio
</code>```

This will allow you to alter the font "em unit" thus the span height without changing the font-size.

div {
  height: 50px;
  font-size: 50px;
  background: green;
  font-size-adjust:0.4;
}

span {
  background: red;
}

.lineheight {
  line-height: 50px;
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><p>Green is 50px, Red is 50px too</p>
<div><span>fg</span></div>

<p>Combine with line-height for best results</p>
<div class="lineheight"><span>fgjAaMgÁ</span></div></code>```

Title: CSS: Is font-size not acurrate?

Body:
So, link and link give hints about how fonts are implementation dependent.
This question is very especific to font-size in the following case:

font-size: 50px; will take aditional space to render (60px in my case)

div {
  height: 50px;
  font-size: 50px;
  background: green;
}

span {
  background: red;
}

.lineheight {
  line-height: 50px;
}

Green is 50px, Red is not

fg

You can still see the overflow without span:

jAaMgÁ

line-height does not solve the issue (just makes it prettier)

jAaMgÁ

What i expect to happen is: ascender and descender inside em square

What i get is: descender is draw outside the em square.

From the documentation link: "The font size corresponds to the em square"

From this reference the em square should include both descender and ascender:

So why is the browser doing something else? I tried Firefox and Chrome, and both seem consistent with this (miss?)behaviour... did the specification change? if so, what is the appropiate way to tell the browser the font height including descender and ascender?

(width can be ignored, and you are free to use up to CSS4, but CSS3 is appreciated)

Body:
It is not acurrate.

CSS3 introduced a few changes allowing OpenType fonts: link. But also altering how font-size works:

CSS2 font-size: The font size corresponds to the em square.

CSS3 font-size: The font-size is a scale factor applied to the EM unit of the font.

If your browser supports only CSS2 the em square will be exactly the same as the font-size.

But, by supporting CSS3 most browsers will now multiply the font-size against the font's "em unit" which is diferent for each font but allways > 1.

As a result you will end with a bigger em square than expected which is the cause of the inacurracy.

A quick dirty solution would be to adjust the font size to your needs:

  font-size-adjust:0.4; //equivalent to 1:1 ratio

This will allow you to alter the font "em unit" thus the span height without changing the font-size.

div {
  height: 50px;
  font-size: 50px;
  background: green;
  font-size-adjust:0.4;
}

span {
  background: red;
}

.lineheight {
  line-height: 50px;
}

<p>Green is 50px, Red is 50px too</p>
<div><span>fg</span></div>

<p>Combine with line-height for best results</p>
<div class="lineheight"><span>fgjAaMgÁ</span></div>


来源: stackexchange

问:
Calculate sum of differences between rows but only if the previous cell is bigger than the current one
I started to get a headache around my problem that I cannot figure out for the love of me.
There are unknown amounts of column if that makes any difference, but basically each row needs to be compared to the previous one and ONLY when the previous value is greater, the difference between them gets added to the sum.

So for example I have this table

```<code>  |  A  |
--|-----|
1 | 100 |
2 |  90 |
3 |  80 |
4 | 100 |
5 |  70 |
6 |  20 |
7 | 100 |
...
</code>```

Expected result: 100, derived from ((100-90) + (90-80) + (100-70) + (70-20))

I have spent a whole day browsing every single excel tutorial page and cannot find a single helpful answer. Please help :(

答:
If you want to do it in one formula, a basic way would be two use two ranges offset by one cell:

```<code>=SUMPRODUCT((A1:A6-A2:A7)*(A1:A6>A2:A7))
</code>```

If you wanted to make a bit more dynamic (assuming there are no gaps in  the data) you could try

```<code>=SUMPRODUCT((A1:INDEX(A:A,COUNT(A:A)-1)-A2:INDEX(A:A,COUNT(A:A)))*(A1:INDEX(A:A,COUNT(A:A)-1)>A2:INDEX(A:A,COUNT(A:A))))
</code>```

If there are blanks between numbers, this won't work and you would probably need to go back to a simpler pull-down formula

ContentLicense: CC BY-SA 4.0

Body:
I started to get a headache around my problem that I cannot figure out for the love of me.
There are unknown amounts of column if that makes any difference, but basically each row needs to be compared to the previous one and ONLY when the previous value is greater, the difference between them gets added to the sum.

So for example I have this table

  |  A  |
--|-----|
1 | 100 |
2 |  90 |
3 |  80 |
4 | 100 |
5 |  70 |
6 |  20 |
7 | 100 |
...

Expected result: 100, derived from ((100-90) + (90-80) + (100-70) + (70-20))

I have spent a whole day browsing every single excel tutorial page and cannot find a single helpful answer. Please help :(

Body:
If you want to do it in one formula, a basic way would be two use two ranges offset by one cell:

=SUMPRODUCT((A1:A6-A2:A7)*(A1:A6>A2:A7))

If you wanted to make a bit more dynamic (assuming there are no gaps in  the data) you could try

=SUMPRODUCT((A1:INDEX(A:A,COUNT(A:A)-1)-A2:INDEX(A:A,COUNT(A:A)))*(A1:INDEX(A:A,COUNT(A:A)-1)>A2:INDEX(A:A,COUNT(A:A))))

If there are blanks between numbers, this won't work and you would probably need to go back to a simpler pull-down formula


问:
Different Checkstyle Rules For Main And Test In Maven
I am trying to setup a maven project such that I will be able to run checkstyle using two distinct rule sets: one for main, and one for test. What I would like to do is something along the lines of:

```<code><reporting>
  <plugins>
    <!-- One configuration for main -->
    <plugin>
      <groupId>org.apache.maven.plugins</groupId>
      <artifactId>maven-checkstyle-plugin</artifactId>
      <configuration>
        <configLocation>checkstyle</configLocation>
      </configuration>
    </plugin>
    <!-- But a different set of rules for test -->
    <plugin>
      <groupId>org.apache.maven.plugins</groupId>
      <artifactId>maven-checkstyle-plugin</artifactId>
      <configuration>
        <sourceDirectory>${project.build.testSourceDirectory}</sourceDirectory>
        <configLocation>checkstyle-test.xml</configLocation>
      </configuration>
    </plugin>
  </plugins>
</reporting>
</code>```

I have been successfully able to run one version or the other, but not both at the sames time. Including trying to bind them to different executions phases, but it seems the rule of thumb is the last definition is the only one used.

So I would either like to:

-Ideally - have two seperate checkstyle configuration files that can be run independently

OR

-Have a single checkstyle config, use the config property includeTestSourceDirectory to check main and test at the same time, but have some rules selectively applied to one of main/test or the other.

答:
I have been unable to find any mechanism by which different checkstyle rules can be applied to different source roots at compile time (the other answer may work for report generation, but my needs are specifically compile time checking). The solution implemented is to have the rules that apply to source and then use the checkstyle supressions mechanism to exclude certain rules on the test classes i.e.</p>

```<code><suppress checks="CheckInappropiateForTests" files=".*Test\.java"/>
</code>```

ContentLicense: CC BY-SA 3.0

Body:
I am trying to setup a maven project such that I will be able to run checkstyle using two distinct rule sets: one for main, and one for test. What I would like to do is something along the lines of:

<reporting>
  <plugins>

    <plugin>
      <groupId>org.apache.maven.plugins</groupId>
      <artifactId>maven-checkstyle-plugin</artifactId>
      <configuration>
        <configLocation>checkstyle</configLocation>
      </configuration>
    </plugin>

    <plugin>
      <groupId>org.apache.maven.plugins</groupId>
      <artifactId>maven-checkstyle-plugin</artifactId>
      <configuration>
        <sourceDirectory>${project.build.testSourceDirectory}</sourceDirectory>
        <configLocation>checkstyle-test.xml</configLocation>
      </configuration>
    </plugin>
  </plugins>
</reporting>

I have been successfully able to run one version or the other, but not both at the sames time. Including trying to bind them to different executions phases, but it seems the rule of thumb is the last definition is the only one used.

So I would either like to:

-Ideally - have two seperate checkstyle configuration files that can be run independently

OR

-Have a single checkstyle config, use the config property includeTestSourceDirectory to check main and test at the same time, but have some rules selectively applied to one of main/test or the other.

Body:
I have been unable to find any mechanism by which different checkstyle rules can be applied to different source roots at compile time (the other answer may work for report generation, but my needs are specifically compile time checking). The solution implemented is to have the rules that apply to source and then use the checkstyle supressions mechanism to exclude certain rules on the test classes i.e.

<suppress checks="CheckInappropiateForTests" files=".*Test\.java"/>


问:
Unable to login from dist/index.html in angular 8 and It's allowing me If I use proxy.conf.json file
I am working with index.html page from angular 8 dist folder. Unable to login through dist/index.html page. Getting the error below for login API URL. I spent two days but no luck. Please let me know If you have any solution for this.

enter image description here

enter image description here

Thanks in advance.

答: Do you have CORS enabled on your API?  If you are running from the dist folder, then you are serving your application on port 80 but your API is on 8080 which could cause a CORS issue.  You would need to enable CORS on your API.  This is implemented differently depending on your API langugage implementation.</p>


问:
Learning web scraping. I get an error of 'NoneType' object has no attribute 'text' when trying to retrieve text in an element
Code: https://pastebin.com/JeifRAyT

```<code>def FetchPrice():
    URLForStock = requests.get('https://finance.yahoo.com/quote/MSFT?p=MSFT')
    soup = bs4.BeautifulSoup(URLForStock.text, "html5lib")
    Price=soup.find('span', {'class': 'Trsdu(0.3s) Fw(b) Fz(36px) Mb(-4px) D(ib)'}).text
    return Price
</code>```

Page I'm trying to scrape off of: https://finance.yahoo.com/quote/MSFT

The element I am trying to retrieve: https://imgur.com/a/S2mo5vN

Here's what the HTML looks like: https://imgur.com/a/vdriBD9

I don't get what's wrong with line 4. I have it looking for a span. I also have the class I'm looking for. What am I missing?

答:
Possible duplicate of -:
you can look below to find the answer

How to understand this raw HTML of Yahoo! Finance when retrieving data using Python?

Body:
Code: https://pastebin.com/JeifRAyT

def FetchPrice():
    URLForStock = requests.get('https://finance.yahoo.com/quote/MSFT?p=MSFT')
    soup = bs4.BeautifulSoup(URLForStock.text, "html5lib")
    Price=soup.find('span', {'class': 'Trsdu(0.3s) Fw(b) Fz(36px) Mb(-4px) D(ib)'}).text
    return Price

Page I'm trying to scrape off of: https://finance.yahoo.com/quote/MSFT

The element I am trying to retrieve: https://imgur.com/a/S2mo5vN

Here's what the HTML looks like: https://imgur.com/a/vdriBD9

I don't get what's wrong with line 4. I have it looking for a span. I also have the class I'm looking for. What am I missing?


问:
How to change name of a kubernetes node
I have a running node in a kubernetes cluster.  Is there a way I can change its name?

I have tried to

delete the node using kubectl delete

change the name in the node's manifest

add the node back.

But the node won't start.

Anyone know how it should be done?

Thanks

答:
Changing the node's name is not possible at the moment, it requires you to remove and rejoin the node.
You need to make sure the hostname is changed to the new name, remove the node, reset it and rejoin it.

(you will notice that with the command : kubectl edit node  , you will get an error if you try and save the name:
A copy of your changes has been stored to "/tmp/kubectl-edit-qlh54.yaml"
error: At least one of apiVersion, kind and name was changed
)

Ideally you have removed the running pods on it.
You can try to run kubectl drain <node_name_to_rename> . Proceed at your own risk if that doesn't complete . --ignore-daemon-sets can be used to ignore possible issues for pods that cannot be evicted.

In short, for a node that has been renamed and is out of the cluster on CentOS 7:

```<code>kubectl delete node <original-nodename>
</code>```

Then on the node that you want to rejoin, as root:

```<code>kubeadm reset
</code>```

check the output and see if it applies to your setup (for potential further cleanup).

Now generate the join command on the master node:

```<code>export KUBECONFIG=/etc/kubernetes/admin.conf #(or wherever you have it)
kubeadm token create --print-join-command
</code>```

Run the output on the worker node you have just reset:

```<code>kubeadm join <masternode_ip_address>:6443 --token somegeneratedtoken --discovery-token-ca-cert-hash sha256:somesha256hashthatyougotfromtheabovecommand
</code>```

If you run kubectl get nodes it should show up now with the new name

output in my case:

```<code>W0220 10:43:23.286109   11473 join.go:346] [preflight] WARNING: JoinControlPane.controlPlane settings will be ignored when control-plane flag is not set.
[preflight] Running pre-flight checks
[preflight] Reading configuration from the cluster...
[preflight] FYI: You can look at this config file with 'kubectl -n kube-system get cm kubeadm-config -oyaml'
[kubelet-start] Downloading configuration for the kubelet from the "kubelet-config-1.17" ConfigMap in the kube-system namespace
[kubelet-start] Writing kubelet configuration to file "/var/lib/kubelet/config.yaml"
[kubelet-start] Writing kubelet environment file with flags to file "/var/lib/kubelet/kubeadm-flags.env"
[kubelet-start] Starting the kubelet
[kubelet-start] Waiting for the kubelet to perform the TLS Bootstrap...

This node has joined the cluster:
* Certificate signing request was sent to apiserver and a response was received.
* The Kubelet was informed of the new secure connection details.

Run 'kubectl get nodes' on the control-plane to see this node join the cluster.
</code>```

Enjoy your renamed node!

Based on source: https://www.youtube.com/watch?v=TqoA9HwFLVU

Title: How to change name of a kubernetes node

Body:
Changing the node's name is not possible at the moment, it requires you to remove and rejoin the node.
You need to make sure the hostname is changed to the new name, remove the node, reset it and rejoin it.

(you will notice that with the command : kubectl edit node  , you will get an error if you try and save the name:
A copy of your changes has been stored to "/tmp/kubectl-edit-qlh54.yaml"
error: At least one of apiVersion, kind and name was changed
)

Ideally you have removed the running pods on it.
You can try to run kubectl drain <node_name_to_rename> . Proceed at your own risk if that doesn't complete . --ignore-daemon-sets can be used to ignore possible issues for pods that cannot be evicted.

In short, for a node that has been renamed and is out of the cluster on CentOS 7:

kubectl delete node <original-nodename>

Then on the node that you want to rejoin, as root:

kubeadm reset

check the output and see if it applies to your setup (for potential further cleanup).

Now generate the join command on the master node:

export KUBECONFIG=/etc/kubernetes/admin.conf #(or wherever you have it)
kubeadm token create --print-join-command

Run the output on the worker node you have just reset:

kubeadm join <masternode_ip_address>:6443 --token somegeneratedtoken --discovery-token-ca-cert-hash sha256:somesha256hashthatyougotfromtheabovecommand

If you run kubectl get nodes it should show up now with the new name

output in my case:

W0220 10:43:23.286109   11473 join.go:346] [preflight] WARNING: JoinControlPane.controlPlane settings will be ignored when control-plane flag is not set.
[preflight] Running pre-flight checks
[preflight] Reading configuration from the cluster...
[preflight] FYI: You can look at this config file with 'kubectl -n kube-system get cm kubeadm-config -oyaml'
[kubelet-start] Downloading configuration for the kubelet from the "kubelet-config-1.17" ConfigMap in the kube-system namespace
[kubelet-start] Writing kubelet configuration to file "/var/lib/kubelet/config.yaml"
[kubelet-start] Writing kubelet environment file with flags to file "/var/lib/kubelet/kubeadm-flags.env"
[kubelet-start] Starting the kubelet
[kubelet-start] Waiting for the kubelet to perform the TLS Bootstrap...

This node has joined the cluster:
* Certificate signing request was sent to apiserver and a response was received.
* The Kubelet was informed of the new secure connection details.

Run 'kubectl get nodes' on the control-plane to see this node join the cluster.

Enjoy your renamed node!

Based on source: https://www.youtube.com/watch?v=TqoA9HwFLVU


问:
How to enable CORS in ASP.NET Core
I am trying to enable cross origin resources sharing on my ASP.NET Core Web API, but I am stuck.

The EnableCors attribute accepts policyName of type string as parameter:

// Summary:
//     Creates a new instance of the Microsoft.AspNetCore.Cors.Core.EnableCorsAttribute.
//
// Parameters:
//   policyName:
//     The name of the policy to be applied.
public EnableCorsAttribute(string policyName);

```

What does the policyName mean and how can I configure CORS on an ASP.NET Core Web API?

答:
All the workaround mentioned above may work or may not work, in most cases it will not work. I have given the solution here

Currently I am working on Angular and Web API(.net Core) and came across CORS issue explained below

The solution provided above will always work. With 'OPTIONS' request it is really necessary to enable 'Anonymous Authentication'. With the solution mentioned here you don't have to do all the steps mentioned above, like IIS settings.

Anyways someone marked my above post as duplicate with this post, but I can see that this post is only to enable CORS in ASP.net Core, but my post is related to, Enabling and implementing CORS in ASP.net Core and Angular.

Title: How to enable CORS in ASP.NET Core

Body:
I am trying to enable cross origin resources sharing on my ASP.NET Core Web API, but I am stuck.

The EnableCors attribute accepts policyName of type string as parameter:

// Summary:
//     Creates a new instance of the Microsoft.AspNetCore.Cors.Core.EnableCorsAttribute.
//
// Parameters:
//   policyName:
//     The name of the policy to be applied.
public EnableCorsAttribute(string policyName);

What does the policyName mean and how can I configure CORS on an ASP.NET Core Web API?


问:
How can I make JQuery Mobile ignore elements by css class?
I have a standard link I want to style my own way within a footer like so:

```<code><div data-role="page">
<div id="footer" data-role="footer" data-position="fixed">
    <a href="somelink.html>some link</a>
</div>
</code>```

I want the  tag to stay as is and not be transfered into this:

```<code><a href="somelink.html" data-theme="a" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-up-a">
    <span class="ui-btn-inner ui-btn-corner-all">
        <span class="ui-btn-text">some link</span>
    </span>
</a>
</code>```

Is there some kind of attribute I can add to the link to stop JQM generated this themed code? I need something similar to the data-role="none" class explained here (but not for a form element)

答:
It's just as you said, add the data-role="none" attribute to the anchor tag.

Live Example w/ data-role="none" : http://jsfiddle.net/CrBdX/2/

Live Example wo/ data-role="none" : http://jsfiddle.net/CrBdX/1/

HTML:

```<code><div data-role="page">
    <div id="footer" data-role="footer" data-position="fixed">
        <a href="somelink.html" data-role="none">some link</a>
    </div>
</div>
</code>```

Body:
I have a standard link I want to style my own way within a footer like so:

    some link

I want the  tag to stay as is and not be transfered into this:

        some link

Is there some kind of attribute I can add to the link to stop JQM generated this themed code? I need something similar to the data-role="none" class explained here (but not for a form element)

Body:
It's just as you said, add the data-role="none" attribute to the anchor tag.

Live Example w/ data-role="none" : http://jsfiddle.net/CrBdX/2/

Live Example wo/ data-role="none" : http://jsfiddle.net/CrBdX/1/

HTML:

<div data-role="page">
    <div id="footer" data-role="footer" data-position="fixed">
        <a href="somelink.html" data-role="none">some link</a>
    </div>
</div>


问:
Hamburger menu doesn't close after click on anchor tag
After clicking on some anchor item in the menu I want to be able to close the menu, but it doesn't work. The remove method in javascript is not working for some reason. If I go through pages the menu closes itself but not on the index page and it stays open. I'm still learning Javascript so bear with me. Here's the additional CSS

const netflix_open_btn = document.querySelector('.netflix-open-btn');
const netflix_close_btn = document.querySelector('.netflix-close-btn');
const netflix_nav = document.querySelectorAll('.netflix-nav');

netflix_open_btn.addEventListener('click', () => {
 netflix_nav.forEach(nav_el => { nav_el.classList.add('visible') });
});

netflix_close_btn.addEventListener('click', () => {
 netflix_nav.forEach(nav_el => { nav_el.classList.remove('visible') });
});```
<pre class="snippet-code-css lang-css prettyprint-override"><code>.netflix-text {
 text-transform: uppercase;
}

.netflix-list li a:hover{
  color: #d6aa55;
}

.netflix-nav-btn {
 border: 0;
 background: transparent;
 cursor: pointer;
  font-size: 20px;
  z-index: 10;
}

.netflix-open-btn {
 position: fixed;
 top: 30px;
  left: 10px;
  z-index: 10;
}

.netflix-nav {
 position: fixed;
 top: 0;
 left: 0;
 height: 100vh;
 transform: translateX(-100%);
  transition: transform .3s ease-in-out;
  z-index: 10;
}

.netflix-nav.visible {
 transform: translateX(0);
}

.netflix-nav-black {
 background-color: black;
 width: 60%;
 max-width: 480px;
 min-width: 320px;
 transition-delay: .4s;
}

.netflix-nav-black.visible {
 transition-delay: 0s;
}

.netflix-nav-red {
 background-color: rgb(214, 170, 85);
 transition-delay: .2s;
 width: 95%;
}

.netflix-nav-red.visible {
 transition-delay: .2s;
}

.netflix-nav-white {
 background-color: #fff;
 padding: 40px;
 position: relative;
 transition-delay: 0s;
 width: 95%;
}

.netflix-nav-white.visible {
 transition-delay: .4s;
}

.netflix-close-btn {
 opacity: 0.3;
 position: absolute;
 top: 40px;
 right: 30px;
}

.netflix-logo {
 width: 245px;
}

@media (max-width:768px){
  .netflix-logo{
    width: 197px;
  }
}

.netflix-list {
 list-style-type: none;
 padding: 0;
}

.netflix-list li {
 margin: 20px 0;
}

.netflix-list li a {
 color: rgb(34, 31, 31);
 font-size: 19px;
 text-decoration: none;
 text-transform: uppercase;
}

.netflix-list ul {
 list-style-type: none;
 padding-left: 20px;
}</code>```

<button class="netflix-nav-btn netflix-open-btn">

  </button>

        <button class="netflix-nav-btn netflix-close-btn">

        </button>

Home

About

Services

Tattoo

Beauty

Piercing

Contact

                            Danish

```

答:
for that you will have to create a function which you can call every time you click a link!

  const netflix_open_btn = document.querySelector(".netflix-open-btn");
  const netflix_nav = document.querySelectorAll(".netflix-nav");

  netflix_open_btn.addEventListener("click", () => {
    netflix_nav.forEach(nav_el => {
      nav_el.classList.add("visible");
    });
  });
  function closeTab() {
    netflix_nav.forEach(nav_el => {
      nav_el.classList.remove("visible");
    });
  }```
<pre class="snippet-code-css lang-css prettyprint-override"><code>.netflix-text {
  text-transform: uppercase;
}

.netflix-list li a:hover {
  color: #d6aa55;
}

.netflix-nav-btn {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 20px;
  z-index: 10;
}

.netflix-open-btn {
  position: fixed;
  top: 30px;
  left: 10px;
  z-index: 10;
}

.netflix-nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
  z-index: 10;
}

.netflix-nav.visible {
  transform: translateX(0);
}

.netflix-nav-black {
  background-color: black;
  width: 60%;
  max-width: 480px;
  min-width: 320px;
  transition-delay: 0.4s;
}

.netflix-nav-black.visible {
  transition-delay: 0s;
}

.netflix-nav-red {
  background-color: rgb(214, 170, 85);
  transition-delay: 0.2s;
  width: 95%;
}

.netflix-nav-red.visible {
  transition-delay: 0.2s;
}

.netflix-nav-white {
  background-color: #fff;
  padding: 40px;
  position: relative;
  transition-delay: 0s;
  width: 95%;
}

.netflix-nav-white.visible {
  transition-delay: 0.4s;
}

.netflix-close-btn {
  opacity: 0.3;
  position: absolute;
  top: 40px;
  right: 30px;
}

.netflix-logo {
  width: 245px;
}

@media (max-width: 768px) {
  .netflix-logo {
    width: 197px;
  }
}

.netflix-list {
  list-style-type: none;
  padding: 0;
}

.netflix-list li {
  margin: 20px 0;
}

.netflix-list li a {
  color: rgb(34, 31, 31);
  font-size: 19px;
  text-decoration: none;
  text-transform: uppercase;
}

.netflix-list ul {
  list-style-type: none;
  padding-left: 20px;
}</code>```

<button class="netflix-nav-btn netflix-open-btn">
   open
</button>

      <button
        onclick="closeTab()"
        class="netflix-nav-btn netflix-close-btn"
      >
        close
      </button>

          Home

About

Services

Tattoo

Beauty

Piercing

Contact

          href="index.php">Danish

```

Body:
After clicking on some anchor item in the menu I want to be able to close the menu, but it doesn't work. The remove method in javascript is not working for some reason. If I go through pages the menu closes itself but not on the index page and it stays open. I'm still learning Javascript so bear with me. Here's the additional CSS

const netflix_open_btn = document.querySelector('.netflix-open-btn');
const netflix_close_btn = document.querySelector('.netflix-close-btn');
const netflix_nav = document.querySelectorAll('.netflix-nav');

netflix_open_btn.addEventListener('click', () => {
 netflix_nav.forEach(nav_el => { nav_el.classList.add('visible') });
});

netflix_close_btn.addEventListener('click', () => {
 netflix_nav.forEach(nav_el => { nav_el.classList.remove('visible') });
});

.netflix-text {
 text-transform: uppercase;
}

.netflix-list li a:hover{
  color: #d6aa55;
}

.netflix-nav-btn {
 border: 0;
 background: transparent;
 cursor: pointer;
  font-size: 20px;
  z-index: 10;
}

.netflix-open-btn {
 position: fixed;
 top: 30px;
  left: 10px;
  z-index: 10;
}

.netflix-nav {
 position: fixed;
 top: 0;
 left: 0;
 height: 100vh;
 transform: translateX(-100%);
  transition: transform .3s ease-in-out;
  z-index: 10;
}

.netflix-nav.visible {
 transform: translateX(0);
}

.netflix-nav-black {
 background-color: black;
 width: 60%;
 max-width: 480px;
 min-width: 320px;
 transition-delay: .4s;
}

.netflix-nav-black.visible {
 transition-delay: 0s;
}

.netflix-nav-red {
 background-color: rgb(214, 170, 85);
 transition-delay: .2s;
 width: 95%;
}

.netflix-nav-red.visible {
 transition-delay: .2s;
}

.netflix-nav-white {
 background-color: #fff;
 padding: 40px;
 position: relative;
 transition-delay: 0s;
 width: 95%;
}

.netflix-nav-white.visible {
 transition-delay: .4s;
}

.netflix-close-btn {
 opacity: 0.3;
 position: absolute;
 top: 40px;
 right: 30px;
}

.netflix-logo {
 width: 245px;
}

@media (max-width:768px){
  .netflix-logo{
    width: 197px;
  }
}

.netflix-list {
 list-style-type: none;
 padding: 0;
}

.netflix-list li {
 margin: 20px 0;
}

.netflix-list li a {
 color: rgb(34, 31, 31);
 font-size: 19px;
 text-decoration: none;
 text-transform: uppercase;
}

.netflix-list ul {
 list-style-type: none;
 padding-left: 20px;
}

<button class="netflix-nav-btn netflix-open-btn">

  </button>

        <button class="netflix-nav-btn netflix-close-btn">

        </button>

Home

About

Services

Tattoo

Beauty

Piercing

Contact

                            Danish

Body:
for that you will have to create a function which you can call every time you click a link!

  const netflix_open_btn = document.querySelector(".netflix-open-btn");
  const netflix_nav = document.querySelectorAll(".netflix-nav");

  netflix_open_btn.addEventListener("click", () => {
    netflix_nav.forEach(nav_el => {
      nav_el.classList.add("visible");
    });
  });
  function closeTab() {
    netflix_nav.forEach(nav_el => {
      nav_el.classList.remove("visible");
    });
  }

.netflix-text {
  text-transform: uppercase;
}

.netflix-list li a:hover {
  color: #d6aa55;
}

.netflix-nav-btn {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 20px;
  z-index: 10;
}

.netflix-open-btn {
  position: fixed;
  top: 30px;
  left: 10px;
  z-index: 10;
}

.netflix-nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
  z-index: 10;
}

.netflix-nav.visible {
  transform: translateX(0);
}

.netflix-nav-black {
  background-color: black;
  width: 60%;
  max-width: 480px;
  min-width: 320px;
  transition-delay: 0.4s;
}

.netflix-nav-black.visible {
  transition-delay: 0s;
}

.netflix-nav-red {
  background-color: rgb(214, 170, 85);
  transition-delay: 0.2s;
  width: 95%;
}

.netflix-nav-red.visible {
  transition-delay: 0.2s;
}

.netflix-nav-white {
  background-color: #fff;
  padding: 40px;
  position: relative;
  transition-delay: 0s;
  width: 95%;
}

.netflix-nav-white.visible {
  transition-delay: 0.4s;
}

.netflix-close-btn {
  opacity: 0.3;
  position: absolute;
  top: 40px;
  right: 30px;
}

.netflix-logo {
  width: 245px;
}

@media (max-width: 768px) {
  .netflix-logo {
    width: 197px;
  }
}

.netflix-list {
  list-style-type: none;
  padding: 0;
}

.netflix-list li {
  margin: 20px 0;
}

.netflix-list li a {
  color: rgb(34, 31, 31);
  font-size: 19px;
  text-decoration: none;
  text-transform: uppercase;
}

.netflix-list ul {
  list-style-type: none;
  padding-left: 20px;
}

<button class="netflix-nav-btn netflix-open-btn">
  <i class="fas fa-bars fa-2x"></i> open
</button>

<div class="netflix-nav netflix-nav-black">
  <div class="netflix-nav netflix-nav-red">
    <div class="netflix-nav netflix-nav-white">
      <button
        onclick="closeTab()"
        class="netflix-nav-btn netflix-close-btn"
      >
        <i class="fas fa-times"></i>close
      </button>

      <img class="netflix-logo" src="images/GOLD.png" alt="Logo" />

      <ul class="netflix-list">
        <li>
          <a onclick="closeTab()" href="index-en.php" class="gold">Home</a>
        </li>
        <li><a onclick="closeTab()" href="#about">About</a></li>
        <li><a onclick="closeTab()" href="#services">Services</a></li>
        <li>
          <ul>
            <li><a href="tattoo-en.html">Tattoo</a></li>
            <li><a href="beauty-en.html">Beauty</a></li>
            <li><a href="piercing-en.html">Piercing</a></li>
          </ul>
        </li>
        <li><a href="#contact">Contact</a></li>
        <li>
          <a href="index.php">Danish</a
          ><img src="/images//denmark.svg" alt="danish-flag" class="flag" />
        </li>
      </ul>
    </div>
  </div>
</div>


问:
Cannot open the connection for the driver: org.eclipse.birt.report.data.oda.jdbc
I got the following problem

In Eclipse, in the Report Design Perspective , when I try to preview I get the following error:

```<code>Chart NewChart:
+ An exception occurred during processing. Please see the following message for details:
Cannot open the connection for the driver: org.eclipse.birt.report.data.oda.jdbc.
    org.eclipse.birt.report.data.oda.jdbc.JDBCException: Cannot load JDBC Driver class: com.mysql.jdbc.Driver.
</code>```

I also checked in Eclipse in the folder org.eclipse.birt.report.data.oda.jdbc/drivers and it was empty. Should it be?
I checked the externalLibs directory, and there I have mysql-connector.jar and I do not know what to check for next.

答:
This worked for me

Download mysql-connector-java-5.1.44-bin.jar file from google

Paste the jar file to location: Eclipse/Contents/Eclipse/plugins/org.eclipse.birt.report.data.oda.jdbc_.../drivers* folder

or

paste "mysql-connector-java-5.0.8-bin.jar" jar file to

location: WEB-INF\platform\plugins\org.eclipse.birt.report.data.oda.jdbc_INSTALLED_VERSION\drivers folder

Go to manage drivers, under jar files section use add option and select the mysql-connector-java-5.1.44-bin.jar file from any location from your local machine and then Test Connection

Connection Successful

Body:
I got the following problem

In Eclipse, in the Report Design Perspective , when I try to preview I get the following error:

Chart NewChart:
+ An exception occurred during processing. Please see the following message for details:
Cannot open the connection for the driver: org.eclipse.birt.report.data.oda.jdbc.
    org.eclipse.birt.report.data.oda.jdbc.JDBCException: Cannot load JDBC Driver class: com.mysql.jdbc.Driver.

I also checked in Eclipse in the folder org.eclipse.birt.report.data.oda.jdbc/drivers and it was empty. Should it be?
I checked the externalLibs directory, and there I have mysql-connector.jar and I do not know what to check for next.


问:
Display message when some or all checkboxes aren't checked
I have this page that has multiple checkboxes and when clicked, an element appears.

I have this stripped down version to show it simply:

```<code><!DOCTYPE html>
<html>
<body>

<p>Display some text when the checkbox is checked:</p>

Checkbox 1: <input type="checkbox" id="check1"  onclick="box1()"><br>
Checkbox 2: <input type="checkbox" id="check2"  onclick="box2()">

<p id="fill">No boxes are checked</p>

<p id="text" style="display:none">Checkbox1 is CHECKED!</p>
<p id="text2" style="display:none">Checkbox2 is CHECKED!</p>

<script>
function box1() {
  var checkBox = document.getElementById("check1");
  var text = document.getElementById("text");
  var fill = document.getElementById("fill");
  if (checkBox.checked == true){
      text.style.display = "block";
      fill.style.display = "none";
  } else {
      text.style.display = "none";
      fill.style.display = "block";
  }
}
</script>
<script>
function box2() {
  var checkBox = document.getElementById("check2");
  var text = document.getElementById("text2");
  var fill = document.getElementById("fill");
  if (checkBox.checked == true){
    text.style.display = "block";
    fill.style.display = "none";
  } else {
     text.style.display = "none";
     fill.style.display = "block";
  }
 }
</script>

</body>
</html>
</code>```

My problem is that the text shows even a box is checked as shown in the image. How can I do this effectively? thanks!

答: You forgot to define fill through a document.getElementById in the second checkbox. Right now you are disabling the fill on the first checkbox when interacting with the second one. I think this is causing some problems.</p>

Body:
I have this page that has multiple checkboxes and when clicked, an element appears.

I have this stripped down version to show it simply:

<!DOCTYPE html>

Display some text when the checkbox is checked:

Checkbox 1: <input type="checkbox" id="check1"  onclick="box1()">

Checkbox 2: <input type="checkbox" id="check2"  onclick="box2()">

No boxes are checked

Checkbox1 is CHECKED!

Checkbox2 is CHECKED!

My problem is that the text shows even a box is checked as shown in the image. How can I do this effectively? thanks!


问:
Uncaught ReferenceError: variable is not defined? (no jQuery involved)
this is my first question on stackoverflow.

I am learning about javascript and decided to start a project.
I'm making a scoreboard to keep track of the score during table tennis. I managed to make this work and decided to add some features like a match history and show which player has to serve.
However, I'm stuck with the ReferenceError. In most other questions about this, people just forgot to add the variable or it had something to do with jquery. I don't think that's my problem.

In table tennis the player with serve changes every 2 points. I decided to add scorePlayer1 and scorePlayer2 to make a totalScore. When this is divided by 2, I can check if this is an integer, and if it is, the player with serve changes. However, whatever I try, the variable totalScore is not defined.

I learned HTML/CSS first at w3schools.com and later used it to learn javascript.
I have pasted the code into multiple syntax checkers, but got no errors.

The button is there to pick the serve player. Then, I want to swith the right to serve to the opposite player after 2 points are scored. I tried this with function changeServePlayer. However, when I try this in Chrome and type in the console: totalScore, it returns the Uncaught ReferenceError. Why does this happen or is there a better way to achieve the goal?

Here's code I used:

var currentScorePlayerOne = 0;
var currentScorePlayerTwo = 0;
var currentServePlayer;
var totalScore;

window.addEventListener("keyup", checkKeyPress);

function checkKeyPress(key) {
  if (key.keyCode == "90" && currentScorePlayerOne != 0) { //Z
    document.getElementById('scorePlayerOne').innerHTML = --currentScorePlayerOne;
    changeServePlayer();
    changeServeIcon();
  }
  if (key.keyCode == "88") { //X
    document.getElementById('scorePlayerOne').innerHTML = ++currentScorePlayerOne;
    changeServePlayer();
    changeServeIcon();
  }
  if (key.keyCode == "78" && currentScorePlayerTwo != 0) { //N
    document.getElementById('scorePlayerTwo').innerHTML = --currentScorePlayerTwo;
    changeServePlayer();
    changeServeIcon();
  }
  if (key.keyCode == "77") { //M
    document.getElementById('scorePlayerTwo').innerHTML = ++currentScorePlayerTwo;
    changeServePlayer();
    changeServeIcon();
  }
  updateSet();
}

function updateSet() {
  if (currentScorePlayerOne > 10 && currentScorePlayerOne > currentScorePlayerTwo + 1) {
    resetScores();
  }
  if (currentScorePlayerTwo > 10 && currentScorePlayerTwo > currentScorePlayerOne + 1) {
    resetScores();
  }
}

function resetScores() {
  currentScorePlayerOne = 0;
  currentScorePlayerTwo = 0;
  document.getElementById('scorePlayerOne').innerHTML = currentScorePlayerOne;
  document.getElementById('scorePlayerTwo').innerHTML = currentScorePlayerTwo;
}

function changeServePlayer() {
  totalScore = currentScorePlayerOne + currentScorePlayerTwo;
  Number.isInteger(totalScore / 2);
  if (Number.isInteger == true && totalScore != 0 && currentServePlayer == 1) {
    currentServePlayer = 2;
  }
  if (Number.isInteger == true && totalScore != 0 && currentServePlayer == 2) {
    currentServePlayer = 1;
  }
}

function changeServeIcon() {
  if (currentServePlayer == 1) {
    document.getElementById('serveP1').style.opacity = "1";
    document.getElementById('serveP2').style.opacity = "0.2";
  } else {
    document.getElementById('serveP2').style.opacity = "1";
    document.getElementById('serveP1').style.opacity = "0.2";
  }
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><!DOCTYPE html>
<html>

<head>
  <script src="Scoreboard1javascript.js"></script>
</head>

<body>
  <button type="button" onclick="chooseServingPlayer()">
   Serve
  </button>

  <script>
    var randomServeNumber;

    function chooseServingPlayer() {
      if (currentScorePlayerOne == 0 && currentScorePlayerTwo == 0) {
        document.getElementById('serveP1').style.opacity = "0.2";
        document.getElementById('serveP2').style.opacity = "0.2";
        randomServeNumber = Math.floor(Math.random() * 10);
        if (randomServeNumber > 5) {
          currentServePlayer = 1;
          changeServeIcon();
        } else {
          currentServePlayer = 2;
          changeServeIcon();
        }
      }
    }

    function changeServeIcon() {
      if (currentServePlayer == 1) {
        document.getElementById('serveP1').style.opacity = "1";
        document.getElementById('serveP2').style.opacity = "0.2";
      } else {
        document.getElementById('serveP2').style.opacity = "1";
        document.getElementById('serveP1').style.opacity = "0.2";
      }
    }
  </script>

  <nav>
    <img src="tafeltennisbat.png" alt="serve" style="width: 50px; height: 50px; opacity: 0.2" id="serveP1"> Score P1
  </nav>
  <nav>
    Score P2
    <img src="tafeltennisbat.png" alt="serve" style="width: 50px; height: 50px; opacity: 0.2" id="serveP2">
  </nav>
  <nav id="scorePlayerOne" style="font-size: 50px">
    0
  </nav>
  <nav id="scorePlayerTwo" style="font-size: 50px">
    0
  </nav>

</body>

</html></code>```

答:
I forgot to check which file I was referencing in my html script. I was referencing an old version of the javascript, which made every change I made in javascript useless.

It can be really that stupid sometimes...

Body:
this is my first question on stackoverflow.

I am learning about javascript and decided to start a project.
I'm making a scoreboard to keep track of the score during table tennis. I managed to make this work and decided to add some features like a match history and show which player has to serve.
However, I'm stuck with the ReferenceError. In most other questions about this, people just forgot to add the variable or it had something to do with jquery. I don't think that's my problem.

In table tennis the player with serve changes every 2 points. I decided to add scorePlayer1 and scorePlayer2 to make a totalScore. When this is divided by 2, I can check if this is an integer, and if it is, the player with serve changes. However, whatever I try, the variable totalScore is not defined.

I learned HTML/CSS first at w3schools.com and later used it to learn javascript.
I have pasted the code into multiple syntax checkers, but got no errors.

The button is there to pick the serve player. Then, I want to swith the right to serve to the opposite player after 2 points are scored. I tried this with function changeServePlayer. However, when I try this in Chrome and type in the console: totalScore, it returns the Uncaught ReferenceError. Why does this happen or is there a better way to achieve the goal?

Here's code I used:

var currentScorePlayerOne = 0;
var currentScorePlayerTwo = 0;
var currentServePlayer;
var totalScore;

window.addEventListener("keyup", checkKeyPress);

function checkKeyPress(key) {
  if (key.keyCode == "90" && currentScorePlayerOne != 0) { //Z
    document.getElementById('scorePlayerOne').innerHTML = --currentScorePlayerOne;
    changeServePlayer();
    changeServeIcon();
  }
  if (key.keyCode == "88") { //X
    document.getElementById('scorePlayerOne').innerHTML = ++currentScorePlayerOne;
    changeServePlayer();
    changeServeIcon();
  }
  if (key.keyCode == "78" && currentScorePlayerTwo != 0) { //N
    document.getElementById('scorePlayerTwo').innerHTML = --currentScorePlayerTwo;
    changeServePlayer();
    changeServeIcon();
  }
  if (key.keyCode == "77") { //M
    document.getElementById('scorePlayerTwo').innerHTML = ++currentScorePlayerTwo;
    changeServePlayer();
    changeServeIcon();
  }
  updateSet();
}

function updateSet() {
  if (currentScorePlayerOne > 10 && currentScorePlayerOne > currentScorePlayerTwo + 1) {
    resetScores();
  }
  if (currentScorePlayerTwo > 10 && currentScorePlayerTwo > currentScorePlayerOne + 1) {
    resetScores();
  }
}

function resetScores() {
  currentScorePlayerOne = 0;
  currentScorePlayerTwo = 0;
  document.getElementById('scorePlayerOne').innerHTML = currentScorePlayerOne;
  document.getElementById('scorePlayerTwo').innerHTML = currentScorePlayerTwo;
}

function changeServePlayer() {
  totalScore = currentScorePlayerOne + currentScorePlayerTwo;
  Number.isInteger(totalScore / 2);
  if (Number.isInteger == true && totalScore != 0 && currentServePlayer == 1) {
    currentServePlayer = 2;
  }
  if (Number.isInteger == true && totalScore != 0 && currentServePlayer == 2) {
    currentServePlayer = 1;
  }
}

function changeServeIcon() {
  if (currentServePlayer == 1) {
    document.getElementById('serveP1').style.opacity = "1";
    document.getElementById('serveP2').style.opacity = "0.2";
  } else {
    document.getElementById('serveP2').style.opacity = "1";
    document.getElementById('serveP1').style.opacity = "0.2";
  }
}

<!DOCTYPE html>

  <button type="button" onclick="chooseServingPlayer()">
   Serve
  </button>

     Score P1

    Score P2

    0

    0


问:
How to match a class property from application.yml to the java class with a different class name?
I am using Spring Framework and need to match a class property from application.yml to the java class with a different class name?

I have the following application.yml file:

```<code>service:
  cms:
    webClient:
      basePath: http://www.example.com
      connectionTimeoutSeconds: 3
      readTimeoutSeconds: 3
    url:
      path: /some/path/
      parameters:
        tree: basic
    credential:
      username: misha
      password: 123
</code>```

and my java class for service.cms properties:

```<code>// block A: It already works

@Getter
@Setter
@ConfigurationProperties(prefix = "service.cms")
public class CmsProperties {
  private WebClientProperties webClient; // I want rename it to webClientProperties
  private UrlProperties url;
  private CredentialProperties credential;
}

</code>```

where WebClientProperties is

```<code>@Getter
@Setter
@NoArgsConstructor
@AllArgsConstructor
public class WebClientProperties {
  private String basePath;
  private int connectionTimeoutSeconds;
  private int readTimeoutSeconds;
}
</code>```

I would like to rename java field name CmsProperties#webClient into CmsProperties#WebClientProperties, but I must keep the original name webClient in the application.yml.
Just using @Value over CmsProperties#webClient does not work:

```<code>//Block B: `webClient` name is changed to `WebClientProperties`.
// This what I want - but it did not work!

@Getter
@Setter
@ConfigurationProperties(prefix = "service.cms")
public class CmsProperties {
  @Value("${webClient}")
  private WebClientProperties webClientProperties; // Name changed to `webClientProperties`
  ...
}
</code>```

I have errors:

```<code>Injection of autowired dependencies failed; nested exception is java.lang.IllegalArgumentException: Could not resolve placeholder 'webClient' in value "${webClient}"
</code>```

Is it possible to do it?

答:
Please, take a look at a similar question here

So you don't need @Value("${webClient}"). Just create a setter:

public void setWebClient(WebClientProperties webClient) {
    this.webClientProperties = webClient;
}
```

Body:
I am using Spring Framework and need to match a class property from application.yml to the java class with a different class name?

I have the following application.yml file:

service:
  cms:
    webClient:
      basePath: http://www.example.com
      connectionTimeoutSeconds: 3
      readTimeoutSeconds: 3
    url:
      path: /some/path/
      parameters:
        tree: basic
    credential:
      username: misha
      password: 123

and my java class for service.cms properties:

// block A: It already works

@Getter
@Setter
@ConfigurationProperties(prefix = "service.cms")
public class CmsProperties {
  private WebClientProperties webClient; // I want rename it to webClientProperties
  private UrlProperties url;
  private CredentialProperties credential;
}

where WebClientProperties is

@Getter
@Setter
@NoArgsConstructor
@AllArgsConstructor
public class WebClientProperties {
  private String basePath;
  private int connectionTimeoutSeconds;
  private int readTimeoutSeconds;
}

I would like to rename java field name CmsProperties#webClient into CmsProperties#WebClientProperties, but I must keep the original name webClient in the application.yml.
Just using @Value over CmsProperties#webClient does not work:

//Block B: `webClient` name is changed to `WebClientProperties`.
// This what I want - but it did not work!

@Getter
@Setter
@ConfigurationProperties(prefix = "service.cms")
public class CmsProperties {
  @Value("${webClient}")
  private WebClientProperties webClientProperties; // Name changed to `webClientProperties`
  ...
}

I have errors:

Injection of autowired dependencies failed; nested exception is java.lang.IllegalArgumentException: Could not resolve placeholder 'webClient' in value "${webClient}"

Is it possible to do it?


问:
Is it possible to create a method using these interfaces as parameters?
I'm not sure how to word my issue so that it's clear. But I'll try my best sorry:

I have 4 interfaces:

```<code>        interface OnGetViewPagerListener {
            void onSuccessViewPager(Response<Feed> response);
            void onFailedViewPager();
        }

        interface OnNextPageViewPagerListener {
            void onSuccessViewPagerNextPage(Response<Feed> response);
            void onFailedViewPagerNextPage();
        }

        interface OnGetGridViewListener{
            void onSuccessGridView(Response<Feed> response);
            void onFailedGridView();
        }

        interface OnNextPageGridViewListener{
            void onSuccessGridViewNextPage(Response<Feed> response);
            void onFailedGridViewNextPage();
        }
</code>```

And I'm implementing these interfaces into my class MainRepo. Inside each of these methods, contains a network call:

Main Repo Class

```<code>@Override
public void getPostsViewPager(OnGetViewPagerListener onGetViewPagerListener, String url) {

        //Network Call

        RetrofitInterfaces.IGetTop service = RetrofitClientInstance.getRetrofitInstance()
                .create(RetrofitInterfaces.IGetTop.class);
        Call<Feed> call = service.listRepos(url);
        call.enqueue(new Callback<Feed>() {
            @Override
            public void onResponse(@NonNull Call<Feed> call, @NonNull Response<Feed> response) {
                onGetViewPagerListener.onSuccessViewPager(response);
            }
            @Override
            public void onFailure(@NonNull Call<Feed> call, @NonNull Throwable t) {
                onGetViewPagerListener.onFailedViewPager();
            }
        });
}
</code>```

Is it possible to create a method with the networkcall, and with parameters where I could use any of the 4 interfaces?

```<code>private makeNetworkCall(interface canUseAnyOfThe4InterfacesHere, String url){
    //Network call
}
</code>```

In case this is confusing, here is my code:

https://pastebin.com/y8kq9ZjQ

And as you can see, I don't want to have to type out each network call every time I use each interface.

答:
My take on this:

These four interfaces are not needed. They are all the same interface:

```<code>interface BaseCallback {
    void onSuccess(Response<Feed> response);
    void onFail();
}
</code>```

then your function:

```<code>void makeCall(BaseCallback callback, String url) {
    //do call and then callback.onSuccess
}
</code>```

If you insist on different callbacks,

```<code>    interface OnGetViewPagerListener extends BaseCallback {
    }

    interface OnNextPageViewPagerListener extends BaseCallback {
    }

    interface OnGetGridViewListener extends BaseCallback {
    }

    interface OnNextPageGridViewListener extends BaseCallback {
    }
</code>```

I do not think this is needed

Body:
I'm not sure how to word my issue so that it's clear. But I'll try my best sorry:

I have 4 interfaces:

        interface OnGetViewPagerListener {
            void onSuccessViewPager(Response<Feed> response);
            void onFailedViewPager();
        }

        interface OnNextPageViewPagerListener {
            void onSuccessViewPagerNextPage(Response<Feed> response);
            void onFailedViewPagerNextPage();
        }

        interface OnGetGridViewListener{
            void onSuccessGridView(Response<Feed> response);
            void onFailedGridView();
        }

        interface OnNextPageGridViewListener{
            void onSuccessGridViewNextPage(Response<Feed> response);
            void onFailedGridViewNextPage();
        }

And I'm implementing these interfaces into my class MainRepo. Inside each of these methods, contains a network call:

Main Repo Class

@Override
public void getPostsViewPager(OnGetViewPagerListener onGetViewPagerListener, String url) {

        //Network Call

        RetrofitInterfaces.IGetTop service = RetrofitClientInstance.getRetrofitInstance()
                .create(RetrofitInterfaces.IGetTop.class);
        Call<Feed> call = service.listRepos(url);
        call.enqueue(new Callback<Feed>() {
            @Override
            public void onResponse(@NonNull Call<Feed> call, @NonNull Response<Feed> response) {
                onGetViewPagerListener.onSuccessViewPager(response);
            }
            @Override
            public void onFailure(@NonNull Call<Feed> call, @NonNull Throwable t) {
                onGetViewPagerListener.onFailedViewPager();
            }
        });
}

Is it possible to create a method with the networkcall, and with parameters where I could use any of the 4 interfaces?

private makeNetworkCall(interface canUseAnyOfThe4InterfacesHere, String url){
    //Network call
}

In case this is confusing, here is my code:

https://pastebin.com/y8kq9ZjQ

And as you can see, I don't want to have to type out each network call every time I use each interface.

Body:
My take on this:

These four interfaces are not needed. They are all the same interface:

interface BaseCallback {
    void onSuccess(Response<Feed> response);
    void onFail();
}

then your function:

void makeCall(BaseCallback callback, String url) {
    //do call and then callback.onSuccess
}

If you insist on different callbacks,

    interface OnGetViewPagerListener extends BaseCallback {
    }

    interface OnNextPageViewPagerListener extends BaseCallback {
    }

    interface OnGetGridViewListener extends BaseCallback {
    }

    interface OnNextPageGridViewListener extends BaseCallback {
    }

I do not think this is needed


问:
How can i Change tab background color on selection using javascript?
Although the question is really common I really couldn't quite find a definite answer. I have two tabs 'Tab1' and 'Tab2' I want the color of the active tab to change when the user clicks on it. Is there any way I can do it by pure js?

CSS

```<code>#tab1:hover, #tab2:hover, #tab3:hover {
  background: teal;
}

#tab1Content, #tab2Content, #tab3Content {
  width: 500px;
  height: 100px;
  padding: 20px;
  border: 1px solid #B00098;
  border-radius: 10px;
}

.tab button{
      color:#1e84d8;
    /*margin-bottom: 0 px;*/
    background-color: #e7f6ff;
    float: left;
    cursor: pointer;
    transition: 0.1s;
    width:50%;
    border-top: 1px solid #ebebeb;
    border-left: 1px solid #ebebeb;
    border-right: none;
    border-bottom: 1px solid #20a3eb;
}
      #tab1btn{
                border: 1px solid rgb(19, 18, 18);
                padding: 20px;
                overflow: hidden;
                color: rgb(16, 8, 32);
                font-size: 25px;
                font-style: initial;
                font-family: 'Times New Roman', Times, serif;
            }

      #tab2btn{
                border: 1px solid rgb(19, 18, 18);
                padding: 20px;
                overflow: hidden;
                color: rgb(16, 8, 32);
                font-size: 25px;
                font-style: initial;
                font-family: 'Times New Roman', Times, serif;
            }
</code>```

HTML

```<code><div class="tab" >
  <button  id= "tab1btn"  value="Chasis_1">Chasis 1</button>
  <button  id= "tab2btn" value="Chasis_2" >Chasis 2</button>
</div>
</code>```

答:
It isn't very tricky  to do. You can do it in very simple steps:

Create an active class style for tabs

Then add onClick events on your button (you can also do it using addEventListener

When tab is clicked, remove active class from active tab, and add it to the clicked tab

Example -

JS:

```<code>function selectTab (e) {
  e.preventDefault();

  // select current active tab and remove active class (if-any)
  let activeTab = document.querySelector('.tab > .active');
  if (activeTab) activeTab.classList.remove('active');

  e.target.element.classList.add('active');
}
</code>```

HTML:

```<code><div class="tab">
  <button id="tab1btn" value="Chasis_1" onClick(e => selectTab(e))>
    Chasis 1
  </button>
  <button id="tab2btn" value="Chasis_2" onClick(e => selectTab(e))>
    Chasis 2
  </button>
</div>
</code>```

CSS:

```<code>.tab > button.active {
  background-color: #cecece;
}
</code>```

Body:
Although the question is really common I really couldn't quite find a definite answer. I have two tabs 'Tab1' and 'Tab2' I want the color of the active tab to change when the user clicks on it. Is there any way I can do it by pure js?

CSS

#tab1:hover, #tab2:hover, #tab3:hover {
  background: teal;
}

#tab1Content, #tab2Content, #tab3Content {
  width: 500px;
  height: 100px;
  padding: 20px;
  border: 1px solid #B00098;
  border-radius: 10px;
}

.tab button{
      color:#1e84d8;
    /*margin-bottom: 0 px;*/
    background-color: #e7f6ff;
    float: left;
    cursor: pointer;
    transition: 0.1s;
    width:50%;
    border-top: 1px solid #ebebeb;
    border-left: 1px solid #ebebeb;
    border-right: none;
    border-bottom: 1px solid #20a3eb;
}
      #tab1btn{
                border: 1px solid rgb(19, 18, 18);
                padding: 20px;
                overflow: hidden;
                color: rgb(16, 8, 32);
                font-size: 25px;
                font-style: initial;
                font-family: 'Times New Roman', Times, serif;
            }

      #tab2btn{
                border: 1px solid rgb(19, 18, 18);
                padding: 20px;
                overflow: hidden;
                color: rgb(16, 8, 32);
                font-size: 25px;
                font-style: initial;
                font-family: 'Times New Roman', Times, serif;
            }

HTML

  <button  id= "tab1btn"  value="Chasis_1">Chasis 1</button>
  <button  id= "tab2btn" value="Chasis_2" >Chasis 2</button>

Body:
It isn't very tricky  to do. You can do it in very simple steps:

Create an active class style for tabs

Then add onClick events on your button (you can also do it using addEventListener

When tab is clicked, remove active class from active tab, and add it to the clicked tab

Example -

JS:

function selectTab (e) {
  e.preventDefault();

  // select current active tab and remove active class (if-any)
  let activeTab = document.querySelector('.tab > .active');
  if (activeTab) activeTab.classList.remove('active');

  e.target.element.classList.add('active');
}

HTML:

<div class="tab">
  <button id="tab1btn" value="Chasis_1" onClick(e => selectTab(e))>
    Chasis 1
  </button>
  <button id="tab2btn" value="Chasis_2" onClick(e => selectTab(e))>
    Chasis 2
  </button>
</div>

CSS:

.tab > button.active {
  background-color: #cecece;
}


问:
Usage of exact prop with react router
I am creating a private route as follows.

```<code>const PrivateRoute = (props) => {
  const { component: Component, path } = props;
  const isAuthenticated = true;

  return (
    <Route
      // exact (1)
      path={path}
      render={() => (
        isAuthenticated
          ? (
            <Component />
          )
          : (
            <Redirect
              to="/"
            />
          ))}
    />
  );
};
</code>```

I am implementing in the app js file as follows.

```<code> <Router>
      <Switch>
        <PrivateRoutes
          // exact (2)
          path="/users"
          component={Users}
        />
        <PrivateRoutes
          // exact (3)
          path="/users/add"
          component={AddUser}
        />
      </Switch>
 </Router>
</code>```

I noticed the following behaviors based on me commenting off the exact keyword in location (1),(2),(3)

When 1,2,3 are commented the AddUser component is viewable when i go to /users/add

When only 2,3 are commented the AddUser component gives a blank white screen when i go to /users/add

When only 1 is commented the AddUser component is viewable when i go to /users/add

When 1,2,3 are not commented the AddUser component is viewable when i go to /users/add

I thought we only have to pass the exact keyword to the Route Component which we import from react-router.How ever in one of the above cases not putting exact on  causes the AddUsers component to not render.

What is the reason for this behavior ?

答:
React-router matches the first route, so you need to sort your routes components by the most complex at the top, something like:

/very/complex/route

/very/complex

/very

The problem you have in your code is that you don't pass the ...rest props of the  component to your  component. It should be something like this:

```<code>const PrivateRoute = ({ children, ...rest }) => {
 return (
   <Route
     {...rest}
     render={props =>
      auth.isAuthenticated ? (
        children
      ) : (
        <Redirect
          to={{
            pathname: '/login',
            state: { from: props.location },
          }}
        />
       )
     }
   />
  )
</code>```

Notice that the ...rest contains the "exact" prop that is defined in your , so that you don't have to define it twice - once in the PrivateRoute and once in the Route.
So when you specify it in 1 and not in 2,3 it doesn't matter, but the opposite does because "exact" is a prop of
Hope this helps!

Title: Usage of exact prop with react router

Body:
I am creating a private route as follows.

const PrivateRoute = (props) => {
  const { component: Component, path } = props;
  const isAuthenticated = true;

  return (
    <Route
      // exact (1)
      path={path}
      render={() => (
        isAuthenticated
          ? (
            <Component />
          )
          : (
            <Redirect
              to="/"
            />
          ))}
    />
  );
};

I am implementing in the app js file as follows.

 <Router>
      <Switch>
        <PrivateRoutes
          // exact (2)
          path="/users"
          component={Users}
        />
        <PrivateRoutes
          // exact (3)
          path="/users/add"
          component={AddUser}
        />
      </Switch>
 </Router>

I noticed the following behaviors based on me commenting off the exact keyword in location (1),(2),(3)

When 1,2,3 are commented the AddUser component is viewable when i go to /users/add

When only 2,3 are commented the AddUser component gives a blank white screen when i go to /users/add

When only 1 is commented the AddUser component is viewable when i go to /users/add

When 1,2,3 are not commented the AddUser component is viewable when i go to /users/add

I thought we only have to pass the exact keyword to the Route Component which we import from react-router.How ever in one of the above cases not putting exact on  causes the AddUsers component to not render.

What is the reason for this behavior ?

Body:
React-router matches the first route, so you need to sort your routes components by the most complex at the top, something like:

/very/complex/route

/very/complex

/very

The problem you have in your code is that you don't pass the ...rest props of the  component to your  component. It should be something like this:

const PrivateRoute = ({ children, ...rest }) => {
 return (
   <Route
     {...rest}
     render={props =>
      auth.isAuthenticated ? (
        children
      ) : (
        <Redirect
          to={{
            pathname: '/login',
            state: { from: props.location },
          }}
        />
       )
     }
   />
  )

Notice that the ...rest contains the "exact" prop that is defined in your , so that you don't have to define it twice - once in the PrivateRoute and once in the Route.
So when you specify it in 1 and not in 2,3 it doesn't matter, but the opposite does because "exact" is a prop of
Hope this helps!


问:
Javascript regex to check if a value begins with a number followed by anything else
How would i go about doing a regex to see if it begins with a number and any character can follow after. My current expression is

```<code>var validaddress = /^[0-9][A-Za-z0-9]+$/;
</code>```

But this isn't the right way. Im new to this, help anyone?

答: You could also use /^\d/ as the briefest approach.

Body:
How would i go about doing a regex to see if it begins with a number and any character can follow after. My current expression is

var validaddress = /^[0-9][A-Za-z0-9]+$/;

But this isn't the right way. Im new to this, help anyone?


问:
when can I use dot notation to access a dictionary in Python
I am modifying somebody's code in the context of the 'gym'' environment and came across the use of the dot notation to access a dictionary.
the following snippet shows that the dictionary in gym can use the notation but when I duplicate it it throws an error.

```<code>import gym
env = gym.Env
env = make('connectx', debug=True)
config = env.configuration
print(config)
print(config.timeout)
dct = {'timeout': 5, 'columns': 7, 'rows': 6, 'inarow': 4, 'steps': 1000}
print(dct.timeout)
</code>```

this provides the following output:

```<code>{'timeout': 5, 'columns': 7, 'rows': 6, 'inarow': 4, 'steps': 1000}
5

---------------------------------------------------------------------------
AttributeError                            Traceback (most recent call last)
   <ipython-input-45-674d59d34c55> in <module>
      6 print(config.timeout)
      7 dct = {'timeout': 5, 'columns': 7, 'rows': 6, 'inarow': 4, 'steps': 1000}
----> 8 print(dct.timeout)

AttributeError: 'dict' object has no attribute 'timeout'
</code>```

I am using Python 3. Can somebody explain please?
Thanks

答:
In python you cannot access a dictionnary value with dict.key, you need to use dict[key]

Example :

```<code>d = {"foo": 2}
print(d["foo"])
# 2

key = foo
print(d[key])
# 2

print(d.foo)
# AttributeError: 'dict' object has no attribute 'foo'

print(d.key)
# AttributeError: 'dict' object has no attribute 'key'
</code>```

If you really want to use the dot notation, you can use a class (your config is probably a class instance by the way):

```<code>class MyClass():
    def __init__(self):
        self.foo = "bar"

a = MyClass()
print(a.foo)
# bar
</code>```

Body:
I am modifying somebody's code in the context of the 'gym'' environment and came across the use of the dot notation to access a dictionary.
the following snippet shows that the dictionary in gym can use the notation but when I duplicate it it throws an error.

import gym
env = gym.Env
env = make('connectx', debug=True)
config = env.configuration
print(config)
print(config.timeout)
dct = {'timeout': 5, 'columns': 7, 'rows': 6, 'inarow': 4, 'steps': 1000}
print(dct.timeout)

this provides the following output:

{'timeout': 5, 'columns': 7, 'rows': 6, 'inarow': 4, 'steps': 1000}
5

---------------------------------------------------------------------------
AttributeError                            Traceback (most recent call last)
   <ipython-input-45-674d59d34c55> in <module>
      6 print(config.timeout)
      7 dct = {'timeout': 5, 'columns': 7, 'rows': 6, 'inarow': 4, 'steps': 1000}
----> 8 print(dct.timeout)

AttributeError: 'dict' object has no attribute 'timeout'

I am using Python 3. Can somebody explain please?
Thanks

Body:
In python you cannot access a dictionnary value with dict.key, you need to use dict[key]

Example :

d = {"foo": 2}
print(d["foo"])
# 2

key = foo
print(d[key])
# 2

print(d.foo)
# AttributeError: 'dict' object has no attribute 'foo'

print(d.key)
# AttributeError: 'dict' object has no attribute 'key'

If you really want to use the dot notation, you can use a class (your config is probably a class instance by the way):

class MyClass():
    def __init__(self):
        self.foo = "bar"

a = MyClass()
print(a.foo)
# bar


问:
Reformat Date Before Form Submitted
I have a form with a date field and a calendar picker. When I use this I have it entering the date as dd/mm/yyyy. This works.

I want to store the date as yyyymmdd though. Is there a way using javascript to reformat the date? For example, I click submit, it reformats the date and then does the submit and writes the reformatted date to the database?

Maybe there is a better approach? e.g. using a hidden input field that has the correctly formatted version of the date somehow?

答:
function submit(){
var date  = document.getElementById('datefield').value;
var e = date;
var output = e.replace(/\-/g,"");
document.getElementById('output').innerHTML = output;
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><input id="datefield" data-date-format="YYYY MM DD" type="date">
<button onclick="submit()">format!</button>
<div id="output"></div></code>```

Title: Reformat Date Before Form Submitted

Body:
function submit(){
var date  = document.getElementById('datefield').value;
var e = date;
var output = e.replace(/\-/g,"");
document.getElementById('output').innerHTML = output;
}

<input id="datefield" data-date-format="YYYY MM DD" type="date">
<button onclick="submit()">format!</button>
<div id="output"></div>


问:
Get unexpected exception when using dataflow
when im using dataflow with these steps:
- Read from bigquery
- Convert table row to json string
- Insert to elasticsearch (7.5.2)
It looks work great with ~100k records, but in real (8m records ~ 65gb) dataflow throw exception after 300k insertion.

```<code>Error message from worker: java.lang.RuntimeException: unexpected org.apache.beam.runners.dataflow.worker.util.common.worker.CachingShuffleBatchReader.read(CachingShuffleBatchReader.java:104) org.apache.beam.runners.dataflow.worker.util.common.worker.BatchingShuffleEntryReader$ShuffleReadIterator.fillEntries(BatchingShuffleEntryReader.java:125) org.apache.beam.runners.dataflow.worker.util.common.worker.BatchingShuffleEntryReader$ShuffleReadIterator.fillEntriesIfNeeded(BatchingShuffleEntryReader.java:119) org.apache.beam.runners.dataflow.worker.util.common.worker.BatchingShuffleEntryReader$ShuffleReadIterator.hasNext(BatchingShuffleEntryReader.java:84) org.apache.beam.runners.dataflow.worker.util.common.ForwardingReiterator.hasNext(ForwardingReiterator.java:63) org.apache.beam.runners.dataflow.worker.util.common.worker.GroupingShuffleEntryIterator.advance(GroupingShuffleEntryIterator.java:109) org.apache.beam.runners.dataflow.worker.GroupingShuffleReader$GroupingShuffleReaderIterator.advance(GroupingShuffleReader.java:272) org.apache.beam.runners.dataflow.worker.GroupingShuffleReader$GroupingShuffleReaderIterator.start(GroupingShuffleReader.java:266) org.apache.beam.runners.dataflow.worker.util.common.worker.ReadOperation$SynchronizedReaderIterator.start(ReadOperation.java:361) org.apache.beam.runners.dataflow.worker.util.common.worker.ReadOperation.runReadLoop(ReadOperation.java:194) org.apache.beam.runners.dataflow.worker.util.common.worker.ReadOperation.start(ReadOperation.java:159) org.apache.beam.runners.dataflow.worker.util.common.worker.MapTaskExecutor.execute(MapTaskExecutor.java:77) org.apache.beam.runners.dataflow.worker.BatchDataflowWorker.executeWork(BatchDataflowWorker.java:411) org.apache.beam.runners.dataflow.worker.BatchDataflowWorker.doWork(BatchDataflowWorker.java:380) org.apache.beam.runners.dataflow.worker.BatchDataflowWorker.getAndPerformWork(BatchDataflowWorker.java:305) org.apache.beam.runners.dataflow.worker.DataflowBatchWorkerHarness$WorkerThread.doWork(DataflowBatchWorkerHarness.java:140) org.apache.beam.runners.dataflow.worker.DataflowBatchWorkerHarness$WorkerThread.call(DataflowBatchWorkerHarness.java:120) org.apache.beam.runners.dataflow.worker.DataflowBatchWorkerHarness$WorkerThread.call(DataflowBatchWorkerHarness.java:107) java.base/java.util.concurrent.FutureTask.run(FutureTask.java:264) java.base/java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1128) java.base/java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:628) java.base/java.lang.Thread.run(Thread.java:834) Caused by: java.util.concurrent.ExecutionException: java.io.IOException: DEADLINE_EXCEEDED: (g)RPC timed out when customerdataworker-khanhn-02170116-o318-harness-8pqr talking to customerdataworker-khanhn-02170116-o318-harness-f8zt:12346. Server unresponsive (ping error: Deadline Exceeded, {"created":"@1581934551.886578453","description":"Deadline Exceeded","file":"third_party/grpc/src/core/ext/filters/deadline/deadline_filter.cc","file_line":69,"grpc_status":4}). Typically one can self manage this issue, please read: https://cloud.google.com/dataflow/docs/guides/common-errors#tsg-rpc-timeout org.apache.beam.vendor.guava.v26_0_jre.com.google.common.util.concurrent.AbstractFuture.getDoneValue(AbstractFuture.java:531) org.apache.beam.vendor.guava.v26_0_jre.com.google.common.util.concurrent.AbstractFuture.get(AbstractFuture.java:492) org.apache.beam.vendor.guava.v26_0_jre.com.google.common.util.concurrent.AbstractFuture$TrustedFuture.get(AbstractFuture.java:83) org.apache.beam.vendor.guava.v26_0_jre.com.google.common.util.concurrent.Uninterruptibles.getUninterruptibly(Uninterruptibles.java:196) org.apache.beam.vendor.guava.v26_0_jre.com.google.common.cache.LocalCache$Segment.getAndRecordStats(LocalCache.java:2312) org.apache.beam.vendor.guava.v26_0_jre.com.google.common.cache.LocalCache$Segment.loadSync(LocalCache.java:2278) org.apache.beam.vendor.guava.v26_0_jre.com.google.common.cache.LocalCache$Segment.lockedGetOrLoad(LocalCache.java:2154) org.apache.beam.vendor.guava.v26_0_jre.com.google.common.cache.LocalCache$Segment.get(LocalCache.java:2044) org.apache.beam.vendor.guava.v26_0_jre.com.google.common.cache.LocalCache.get(LocalCache.java:3952) org.apache.beam.vendor.guava.v26_0_jre.com.google.common.cache.LocalCache.getOrLoad(LocalCache.java:3974) org.apache.beam.vendor.guava.v26_0_jre.com.google.common.cache.LocalCache$LocalLoadingCache.get(LocalCache.java:4958) org.apache.beam.runners.dataflow.worker.util.common.worker.CachingShuffleBatchReader.read(CachingShuffleBatchReader.java:101) ... 21 more Caused by: java.io.IOException: DEADLINE_EXCEEDED: (g)RPC timed out when customerdataworker-khanhn-02170116-o318-harness-8pqr talking to customerdataworker-khanhn-02170116-o318-harness-f8zt:12346. Server unresponsive (ping error: Deadline Exceeded, {"created":"@1581934551.886578453","description":"Deadline Exceeded","file":"third_party/grpc/src/core/ext/filters/deadline/deadline_filter.cc","file_line":69,"grpc_status":4}). Typically one can self manage this issue, please read: https://cloud.google.com/dataflow/docs/guides/common-errors#tsg-rpc-timeout org.apache.beam.runners.dataflow.worker.ApplianceShuffleReader.readIncludingPosition(Native Method) org.apache.beam.runners.dataflow.worker.ChunkingShuffleBatchReader.read(ChunkingShuffleBatchReader.java:58) org.apache.beam.runners.dataflow.worker.util.common.worker.CachingShuffleBatchReader$1.load(CachingShuffleBatchReader.java:70) org.apache.beam.runners.dataflow.worker.util.common.worker.CachingShuffleBatchReader$1.load(CachingShuffleBatchReader.java:66) org.apache.beam.vendor.guava.v26_0_jre.com.google.common.cache.LocalCache$LoadingValueReference.loadFuture(LocalCache.java:3528) org.apache.beam.vendor.guava.v26_0_jre.com.google.common.cache.LocalCache$Segment.loadSync(LocalCache.java:2277) ... 27 more
</code>```

I also use these configs as recommendations at (increase disk size, num of workers) : https://cloud.google.com/dataflow/docs/guides/common-errors#tsg-rpc-timeout but it seems still not working.
My current configs:

```<code>--runner=DataflowRunner \
      --numWorkers=10 \
      --maxNumWorkers=20 \
      --diskSizeGb=150 \
      --workerMachineType=n1-standard-1 \
      --region=asia-east1" && \
</code>```

---Update 1:
Log on stackdriverenter image description here

答: Thanks for the replies, I have solved the problem. The root cause is that VM instances created by dataflow have firewall rules, we should allow connections between those.</p>

Body:
when im using dataflow with these steps:
- Read from bigquery
- Convert table row to json string
- Insert to elasticsearch (7.5.2)
It looks work great with ~100k records, but in real (8m records ~ 65gb) dataflow throw exception after 300k insertion.

Error message from worker: java.lang.RuntimeException: unexpected org.apache.beam.runners.dataflow.worker.util.common.worker.CachingShuffleBatchReader.read(CachingShuffleBatchReader.java:104) org.apache.beam.runners.dataflow.worker.util.common.worker.BatchingShuffleEntryReader$ShuffleReadIterator.fillEntries(BatchingShuffleEntryReader.java:125) org.apache.beam.runners.dataflow.worker.util.common.worker.BatchingShuffleEntryReader$ShuffleReadIterator.fillEntriesIfNeeded(BatchingShuffleEntryReader.java:119) org.apache.beam.runners.dataflow.worker.util.common.worker.BatchingShuffleEntryReader$ShuffleReadIterator.hasNext(BatchingShuffleEntryReader.java:84) org.apache.beam.runners.dataflow.worker.util.common.ForwardingReiterator.hasNext(ForwardingReiterator.java:63) org.apache.beam.runners.dataflow.worker.util.common.worker.GroupingShuffleEntryIterator.advance(GroupingShuffleEntryIterator.java:109) org.apache.beam.runners.dataflow.worker.GroupingShuffleReader$GroupingShuffleReaderIterator.advance(GroupingShuffleReader.java:272) org.apache.beam.runners.dataflow.worker.GroupingShuffleReader$GroupingShuffleReaderIterator.start(GroupingShuffleReader.java:266) org.apache.beam.runners.dataflow.worker.util.common.worker.ReadOperation$SynchronizedReaderIterator.start(ReadOperation.java:361) org.apache.beam.runners.dataflow.worker.util.common.worker.ReadOperation.runReadLoop(ReadOperation.java:194) org.apache.beam.runners.dataflow.worker.util.common.worker.ReadOperation.start(ReadOperation.java:159) org.apache.beam.runners.dataflow.worker.util.common.worker.MapTaskExecutor.execute(MapTaskExecutor.java:77) org.apache.beam.runners.dataflow.worker.BatchDataflowWorker.executeWork(BatchDataflowWorker.java:411) org.apache.beam.runners.dataflow.worker.BatchDataflowWorker.doWork(BatchDataflowWorker.java:380) org.apache.beam.runners.dataflow.worker.BatchDataflowWorker.getAndPerformWork(BatchDataflowWorker.java:305) org.apache.beam.runners.dataflow.worker.DataflowBatchWorkerHarness$WorkerThread.doWork(DataflowBatchWorkerHarness.java:140) org.apache.beam.runners.dataflow.worker.DataflowBatchWorkerHarness$WorkerThread.call(DataflowBatchWorkerHarness.java:120) org.apache.beam.runners.dataflow.worker.DataflowBatchWorkerHarness$WorkerThread.call(DataflowBatchWorkerHarness.java:107) java.base/java.util.concurrent.FutureTask.run(FutureTask.java:264) java.base/java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1128) java.base/java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:628) java.base/java.lang.Thread.run(Thread.java:834) Caused by: java.util.concurrent.ExecutionException: java.io.IOException: DEADLINE_EXCEEDED: (g)RPC timed out when customerdataworker-khanhn-02170116-o318-harness-8pqr talking to customerdataworker-khanhn-02170116-o318-harness-f8zt:12346. Server unresponsive (ping error: Deadline Exceeded, {"created":"@1581934551.886578453","description":"Deadline Exceeded","file":"third_party/grpc/src/core/ext/filters/deadline/deadline_filter.cc","file_line":69,"grpc_status":4}). Typically one can self manage this issue, please read: https://cloud.google.com/dataflow/docs/guides/common-errors#tsg-rpc-timeout org.apache.beam.vendor.guava.v26_0_jre.com.google.common.util.concurrent.AbstractFuture.getDoneValue(AbstractFuture.java:531) org.apache.beam.vendor.guava.v26_0_jre.com.google.common.util.concurrent.AbstractFuture.get(AbstractFuture.java:492) org.apache.beam.vendor.guava.v26_0_jre.com.google.common.util.concurrent.AbstractFuture$TrustedFuture.get(AbstractFuture.java:83) org.apache.beam.vendor.guava.v26_0_jre.com.google.common.util.concurrent.Uninterruptibles.getUninterruptibly(Uninterruptibles.java:196) org.apache.beam.vendor.guava.v26_0_jre.com.google.common.cache.LocalCache$Segment.getAndRecordStats(LocalCache.java:2312) org.apache.beam.vendor.guava.v26_0_jre.com.google.common.cache.LocalCache$Segment.loadSync(LocalCache.java:2278) org.apache.beam.vendor.guava.v26_0_jre.com.google.common.cache.LocalCache$Segment.lockedGetOrLoad(LocalCache.java:2154) org.apache.beam.vendor.guava.v26_0_jre.com.google.common.cache.LocalCache$Segment.get(LocalCache.java:2044) org.apache.beam.vendor.guava.v26_0_jre.com.google.common.cache.LocalCache.get(LocalCache.java:3952) org.apache.beam.vendor.guava.v26_0_jre.com.google.common.cache.LocalCache.getOrLoad(LocalCache.java:3974) org.apache.beam.vendor.guava.v26_0_jre.com.google.common.cache.LocalCache$LocalLoadingCache.get(LocalCache.java:4958) org.apache.beam.runners.dataflow.worker.util.common.worker.CachingShuffleBatchReader.read(CachingShuffleBatchReader.java:101) ... 21 more Caused by: java.io.IOException: DEADLINE_EXCEEDED: (g)RPC timed out when customerdataworker-khanhn-02170116-o318-harness-8pqr talking to customerdataworker-khanhn-02170116-o318-harness-f8zt:12346. Server unresponsive (ping error: Deadline Exceeded, {"created":"@1581934551.886578453","description":"Deadline Exceeded","file":"third_party/grpc/src/core/ext/filters/deadline/deadline_filter.cc","file_line":69,"grpc_status":4}). Typically one can self manage this issue, please read: https://cloud.google.com/dataflow/docs/guides/common-errors#tsg-rpc-timeout org.apache.beam.runners.dataflow.worker.ApplianceShuffleReader.readIncludingPosition(Native Method) org.apache.beam.runners.dataflow.worker.ChunkingShuffleBatchReader.read(ChunkingShuffleBatchReader.java:58) org.apache.beam.runners.dataflow.worker.util.common.worker.CachingShuffleBatchReader$1.load(CachingShuffleBatchReader.java:70) org.apache.beam.runners.dataflow.worker.util.common.worker.CachingShuffleBatchReader$1.load(CachingShuffleBatchReader.java:66) org.apache.beam.vendor.guava.v26_0_jre.com.google.common.cache.LocalCache$LoadingValueReference.loadFuture(LocalCache.java:3528) org.apache.beam.vendor.guava.v26_0_jre.com.google.common.cache.LocalCache$Segment.loadSync(LocalCache.java:2277) ... 27 more

I also use these configs as recommendations at (increase disk size, num of workers) : https://cloud.google.com/dataflow/docs/guides/common-errors#tsg-rpc-timeout but it seems still not working.
My current configs:

--runner=DataflowRunner \
      --numWorkers=10 \
      --maxNumWorkers=20 \
      --diskSizeGb=150 \
      --workerMachineType=n1-standard-1 \
      --region=asia-east1" && \

---Update 1:
Log on stackdriverenter image description here


问:
Why EF6 LINQ does not generate proper "is null" SQL for null string variable comparison?
We have an EDMX-based EF6 application, where we'd like to run a LINQ query like this.

```<code>string category = ... // comes from somewhere and equals to null
context.Product.Where(e => e.Category == category).ToArray();
</code>```

The problem I see is that the generated SQL contains a [table].[Category] = @p... in the where clause, regardless of the variable category being null or not. So at the end of the day the query returns no results if the variable is null, instead of generating a proper is null criteria and return the proper rows.

I've tested with the explicit e => e.Category == null expression and that does generate the is null as expected.

I've also checked the EDMX and the SQL, and the corresponding Category column is nullable indeed in both places, so that might not be the issue.

Any help would be appreciated.

答:
Try to set context.Configuration.UseDatabaseNullSemantics to false. This is the property which affects the mentioned behavior.

See the documentation here

Body:
We have an EDMX-based EF6 application, where we'd like to run a LINQ query like this.

string category = ... // comes from somewhere and equals to null
context.Product.Where(e => e.Category == category).ToArray();

The problem I see is that the generated SQL contains a [table].[Category] = @p... in the where clause, regardless of the variable category being null or not. So at the end of the day the query returns no results if the variable is null, instead of generating a proper is null criteria and return the proper rows.

I've tested with the explicit e => e.Category == null expression and that does generate the is null as expected.

I've also checked the EDMX and the SQL, and the corresponding Category column is nullable indeed in both places, so that might not be the issue.

Any help would be appreciated.


问:
Bootstrap modal - Don't disable the page
I'm using bootstrap modal in my code and I'd like it to just pop up without making the page behind totally unusable.

```<code>$("<div>")
  .attr({ id: "myModal", tabindex: "-1", role: "dialog" })
  .addClass("modal fade")
  .append(
    $("<div>")
      .addClass("modal-dialog modal-lg")
      .attr("role", "document")
      .append(
        $("<div>")
          .addClass("modal-content")
          .append(
            $("<div>")
              .addClass("modal-header")
              .addClass("bg-info text-white")
              .html("EXAMPLE"),
            $("<div>")
              .addClass("modal-body")
              .html("EXAMPLE"),
            $("<div>")
              .addClass("modal-footer")
              .html("EXAMPLE")
          )
      )
  )
  .modal({
    backdrop: false
  });
</code>```

This makes a Modal without backdrop, but the modal-dialog div don't allow me to use my page behind. I want to be allowed to scroll the page, to click on buttons and keep my modal visible.

答:
When you open the modal, it adds 'modal-open' class to body tag, preventing the user from scrolling/using the page.

Note: that is the intended functionality of modals. Maybe what you are looking for could be achieved with popovers, or a custom element.

If you want to to proceed with the current implementation, you can remove modal-open class from body

```<code>$("body").removeClass("modal-open");
</code>```

or add custom css

```<code>body.modal-open { overflow: scroll; }
</code>```

Body:
I'm using bootstrap modal in my code and I'd like it to just pop up without making the page behind totally unusable.

$("
")
  .attr({ id: "myModal", tabindex: "-1", role: "dialog" })
  .addClass("modal fade")
  .append(
    $("
")
      .addClass("modal-dialog modal-lg")
      .attr("role", "document")
      .append(
        $("
")
          .addClass("modal-content")
          .append(
            $("
")
              .addClass("modal-header")
              .addClass("bg-info text-white")
              .html("EXAMPLE"),
            $("
")
              .addClass("modal-body")
              .html("EXAMPLE"),
            $("
")
              .addClass("modal-footer")
              .html("EXAMPLE")
          )
      )
  )
  .modal({
    backdrop: false
  });

This makes a Modal without backdrop, but the modal-dialog div don't allow me to use my page behind. I want to be allowed to scroll the page, to click on buttons and keep my modal visible.

Body:
When you open the modal, it adds 'modal-open' class to body tag, preventing the user from scrolling/using the page.

Note: that is the intended functionality of modals. Maybe what you are looking for could be achieved with popovers, or a custom element.

If you want to to proceed with the current implementation, you can remove modal-open class from body

$("body").removeClass("modal-open");

or add custom css

body.modal-open { overflow: scroll; }


答:
With the code you have given, I have added only one css property to have class active and a background-color to the active as green ..,

```<code>.active {
  background-color: green !important;
}
</code>```

The JS part inclusion,

```<code>const tab1btn = document.getElementById('tab1btn');
const tab2btn = document.getElementById('tab2btn');

function changeBackground(event){
  const active = document.querySelector('.active');
  if(active){
    active.classList.remove('active')
  }
  event.target.className = "active";
}

tab1btn.addEventListener('click', changeBackground.bind(this));
tab2btn.addEventListener('click', changeBackground.bind(this));
</code>```

I believe you have only these two button and need to change the background color based on the selection,

Get those buttons using, getElementById() and make addEventListener() to each button separately and have a common function changeBackground() which has the code that changes the active class between switching of tabs..

const tab1btn = document.getElementById('tab1btn');
const tab2btn = document.getElementById('tab2btn');

function changeBackground(event){
  const active = document.querySelector('.active');
  if(active){
    active.classList.remove('active')
  }
  event.target.className = "active";
}

tab1btn.addEventListener('click', changeBackground.bind(this));
tab2btn.addEventListener('click', changeBackground.bind(this));```
<pre class="snippet-code-css lang-css prettyprint-override"><code>#tab1:hover, #tab2:hover, #tab3:hover {
  background: teal;
}

#tab1Content, #tab2Content, #tab3Content {
  width: 500px;
  height: 100px;
  padding: 20px;
  border: 1px solid #B00098;
  border-radius: 10px;
}

.tab button{
      color:#1e84d8;
    /*margin-bottom: 0 px;*/
    background-color: #e7f6ff;
    float: left;
    cursor: pointer;
    transition: 0.1s;
    width:50%;
    border-top: 1px solid #ebebeb;
    border-left: 1px solid #ebebeb;
    border-right: none;
    border-bottom: 1px solid #20a3eb;
}
      #tab1btn{
                border: 1px solid rgb(19, 18, 18);
                padding: 20px;
                overflow: hidden;
                color: rgb(16, 8, 32);
                font-size: 25px;
                font-style: initial;
                font-family: 'Times New Roman', Times, serif;
            }

      #tab2btn{
                border: 1px solid rgb(19, 18, 18);
                padding: 20px;
                overflow: hidden;
                color: rgb(16, 8, 32);
                font-size: 25px;
                font-style: initial;
                font-family: 'Times New Roman', Times, serif;
            }

.active {
  background-color: green !important;
}</code>```

  <button  id= "tab1btn"  value="Chasis_1">Chasis 1</button>
  <button  id= "tab2btn" value="Chasis_2" >Chasis 2</button>

```

Title: How can i Change tab background color on selection using javascript?

Body:
With the code you have given, I have added only one css property to have class active and a background-color to the active as green ..,

.active {
  background-color: green !important;
}

The JS part inclusion,

const tab1btn = document.getElementById('tab1btn');
const tab2btn = document.getElementById('tab2btn');

function changeBackground(event){
  const active = document.querySelector('.active');
  if(active){
    active.classList.remove('active')
  }
  event.target.className = "active";
}

tab1btn.addEventListener('click', changeBackground.bind(this));
tab2btn.addEventListener('click', changeBackground.bind(this));

I believe you have only these two button and need to change the background color based on the selection,

Get those buttons using, getElementById() and make addEventListener() to each button separately and have a common function changeBackground() which has the code that changes the active class between switching of tabs..

const tab1btn = document.getElementById('tab1btn');
const tab2btn = document.getElementById('tab2btn');

function changeBackground(event){
  const active = document.querySelector('.active');
  if(active){
    active.classList.remove('active')
  }
  event.target.className = "active";
}

tab1btn.addEventListener('click', changeBackground.bind(this));
tab2btn.addEventListener('click', changeBackground.bind(this));

#tab1:hover, #tab2:hover, #tab3:hover {
  background: teal;
}

#tab1Content, #tab2Content, #tab3Content {
  width: 500px;
  height: 100px;
  padding: 20px;
  border: 1px solid #B00098;
  border-radius: 10px;
}

.tab button{
      color:#1e84d8;
    /*margin-bottom: 0 px;*/
    background-color: #e7f6ff;
    float: left;
    cursor: pointer;
    transition: 0.1s;
    width:50%;
    border-top: 1px solid #ebebeb;
    border-left: 1px solid #ebebeb;
    border-right: none;
    border-bottom: 1px solid #20a3eb;
}
      #tab1btn{
                border: 1px solid rgb(19, 18, 18);
                padding: 20px;
                overflow: hidden;
                color: rgb(16, 8, 32);
                font-size: 25px;
                font-style: initial;
                font-family: 'Times New Roman', Times, serif;
            }

      #tab2btn{
                border: 1px solid rgb(19, 18, 18);
                padding: 20px;
                overflow: hidden;
                color: rgb(16, 8, 32);
                font-size: 25px;
                font-style: initial;
                font-family: 'Times New Roman', Times, serif;
            }

.active {
  background-color: green !important;
}

<div class="tab" >
  <button  id= "tab1btn"  value="Chasis_1">Chasis 1</button>
  <button  id= "tab2btn" value="Chasis_2" >Chasis 2</button>
</div>


问:
How to display error on PHP Plates templating engine
I am trying to set up platesphp for one of my projects.

One of the methods in the model checks for the email address supplied by a new user and tells if the email they trying to use exists or not.

Something like

```<code>class UserModel extends BaseModel
{
    public $errors = [];

    public function validate()
    {
        if (filter_var($this->request->post['email'], FILTER_VALIDATE_EMAIL) === false) {
            $this->errors[] = 'Invalid email';
        }
        if ($this->emailExists($this->request->post['email'])) {
            $this->errors[] = 'Email already exist';
        }
    }

    protected function emailExists($email)
    {
        $sql = 'SELECT * FROM user_account WHERE email = :email';
        -----
        -----
        $stmt->execute();
        return $stmt->fetch() !== false;
    }
}
</code>```

and in the controller

```<code>public function register()
{
    $this->load->getModel('UserModel');

    if ($this->model_UserModel->registerUser($this->request->post)) {
        echo "Success ... load (redirect) second page";
    } else {
        $data ['error'] = $this->model_UserModel->errors;
        echo $this->template->render('home/home', $data);
    }
}
</code>```

If the email exists and I var dump $data ['error'] it says "Email already Exist" as defined in the validate method in the UserModel.

Now, I am trying to get the error message on my home template by adding these lines on the tpl file

```<code><?php if (!empty($this->e($errors))): ?>
    <?php foreach($errors as $error): ?>
        <li><?=$this->e($error)?></li>
    <?php endforeach ?>
<?php endif;?>
</code>```

But now if I click on the register page the template says

Notice: Undefined variable: errors in C:\xampp\htdocs\vem\App\Views\template\register\registeruser.tpl on line 14

How do I move forward?

I even tried setting the $this->e($error) = '' but naa, shows another error.

答:
You need use error not errors:

```<code><?php if (!empty($this->e($error))): ?>
    <?php foreach($error as $error_item): ?>
        <li><?=$this->e($error_item)?></li>
    <?php endforeach ?>
<?php endif;?>
</code>```

Body:
I am trying to set up platesphp for one of my projects.

One of the methods in the model checks for the email address supplied by a new user and tells if the email they trying to use exists or not.

Something like

class UserModel extends BaseModel
{
    public $errors = [];

    public function validate()
    {
        if (filter_var($this->request->post['email'], FILTER_VALIDATE_EMAIL) === false) {
            $this->errors[] = 'Invalid email';
        }
        if ($this->emailExists($this->request->post['email'])) {
            $this->errors[] = 'Email already exist';
        }
    }

    protected function emailExists($email)
    {
        $sql = 'SELECT * FROM user_account WHERE email = :email';
        -----
        -----
        $stmt->execute();
        return $stmt->fetch() !== false;
    }
}

and in the controller

public function register()
{
    $this->load->getModel('UserModel');

    if ($this->model_UserModel->registerUser($this->request->post)) {
        echo "Success ... load (redirect) second page";
    } else {
        $data ['error'] = $this->model_UserModel->errors;
        echo $this->template->render('home/home', $data);
    }
}

If the email exists and I var dump $data ['error'] it says "Email already Exist" as defined in the validate method in the UserModel.

Now, I am trying to get the error message on my home template by adding these lines on the tpl file

<?php if (!empty($this->e($errors))): ?>
    <?php foreach($errors as $error): ?>

<?=$this->e($error)?>

    <?php endforeach ?>
<?php endif;?>

But now if I click on the register page the template says

Notice: Undefined variable: errors in C:\xampp\htdocs\vem\App\Views\template\register\registeruser.tpl on line 14

How do I move forward?

I even tried setting the $this->e($error) = '' but naa, shows another error.

Body:
You need use error not errors:

<?php if (!empty($this->e($error))): ?>
    <?php foreach($error as $error_item): ?>
        <li><?=$this->e($error_item)?></li>
    <?php endforeach ?>
<?php endif;?>