问:
DatePicker not closing after tap outside
In my application I have a textfield to add the date of birth. I add a datePicker to popup once user tap on the textfield. datePicker display correctly and after user select the date it is displaying in the textfield. The problem is after select the date the datePicker is not closing.

This is my code:

```<code>class BController: UIViewController, UITextFieldDelegate {

 @IBOutlet weak var dateOfBirth: UITextField!

    let datePicker = UIDatePicker()

    func textFieldShouldReturn(textField: UITextField) -> Bool {
         textField.resignFirstResponder()
       // self.view.endEditing(true)
        return true
    }

    func textFieldDidBeginEditing(textField: UITextField){
         if textField == dateOfBirth{
           // let datePicker = UIDatePicker()

            datePicker.datePickerMode = UIDatePickerMode.Date

            datePicker.backgroundColor = UIColor.blackColor()
            datePicker.setValue(UIColor.whiteColor(), forKey: "textColor")

            textField.inputView = datePicker
            datePicker.addTarget(self, action: "datePickerChanged:", forControlEvents: .ValueChanged)
        }
    }

    func datePickerChanged(sender: UIDatePicker){

        let formatter = NSDateFormatter()
        formatter.dateFormat = "dd-MM-yyyy"
        //    formatter.dateStyle = .ShortStyle
        //  formatter.timeStyle = .NoStyle
        dateOfBirth.text = formatter.stringFromDate(sender.date)

    }

    override func touchesBegan(touches: NSSet, withEvent event: UIEvent) {
        print("touch happened")
        self.view.endEditing(true)

    }

    override func viewDidLoad() {
        super.viewDidLoad()
        dateOfBirth.delegate = self
        text1.delegate =  self
        text2.delegate = self

        // Do any additional setup after loading the view.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

}
</code>```

I got console output as:

unrecognized selector sent to instance 0x7 Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[BController getCalendar:]: unrecognized selector sent to instance 0x78789050'

How to solve this issue? I'm using Xcode 6.2. If you need more information please let me know.

答:
I know this is an old question, and a slightly different approach to showing a date picker but I think the idea can still be applied.

Try wrapping the Date Picker View in a UIView() container which contains the gesture detector and spans the full size of the screen.

```<code>class ViewController: UIViewController {

var toolBar = UIToolbar()
var datePicker  = UIDatePicker()
var datePickerContainer = UIView()

override func viewDidLoad() {
    super.viewDidLoad()
}

@IBAction func showDatePicker(_ sender: UIButton) {
    datePicker = UIDatePicker()
    datePicker.autoresizingMask = .flexibleWidth
    datePicker.datePickerMode = .dateAndTime
    datePicker.preferredDatePickerStyle = .wheels
    datePicker.backgroundColor = .clear

    datePicker.addTarget(self, action: #selector(self.dateChanged(_:)), for: .valueChanged)
    datePicker.frame = CGRect(x: 0.0, y: UIScreen.main.bounds.size.height - 300, width: UIScreen.main.bounds.size.width, height: 300)

    datePickerContainer = UIView()
    datePickerContainer.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.size.width, height: UIScreen.main.bounds.size.height)
    datePickerContainer.backgroundColor = .clear
    datePickerContainer.addSubview(datePicker)
    self.view.addSubview(datePickerContainer)

    let tapGesture = UITapGestureRecognizer(target: self, action: #selector(touchedOutsideOverlay(_:)))
    datePickerContainer.addGestureRecognizer(tapGesture)

    toolBar = UIToolbar(frame: CGRect(x: 0, y: UIScreen.main.bounds.size.height - 300, width: UIScreen.main.bounds.size.width, height: 50))
    toolBar.barStyle = .black
    toolBar.items = [
        UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil),
        UIBarButtonItem(title: "Done", style: .done, target: self, action: #selector(self.onDoneButtonClick))
    ]
    toolBar.sizeToFit()
    self.view.addSubview(toolBar)
}

@objc func dateChanged(_ sender: UIDatePicker?) {
    let dateFormatter = DateFormatter()

    if let date = sender?.date {
        print("Picked the date: \(dateFormatter.string(from: date))")
    }
}

@objc func touchedOutsideOverlay(_ sender: UITapGestureRecognizer){
    removeDatePicker()
}

@objc func onDoneButtonClick() {
    removeDatePicker()
}

func removeDatePicker(){
    toolBar.removeFromSuperview()
    datePicker.removeFromSuperview()
    datePickerContainer.removeFromSuperview()
}
}
</code>```

ContentLicense: CC BY-SA 3.0

Body:
In my application I have a textfield to add the date of birth. I add a datePicker to popup once user tap on the textfield. datePicker display correctly and after user select the date it is displaying in the textfield. The problem is after select the date the datePicker is not closing.

This is my code:

class BController: UIViewController, UITextFieldDelegate {

 @IBOutlet weak var dateOfBirth: UITextField!

    let datePicker = UIDatePicker()

    func textFieldShouldReturn(textField: UITextField) -> Bool {
         textField.resignFirstResponder()
       // self.view.endEditing(true)
        return true
    }

    func textFieldDidBeginEditing(textField: UITextField){
         if textField == dateOfBirth{
           // let datePicker = UIDatePicker()

            datePicker.datePickerMode = UIDatePickerMode.Date

            datePicker.backgroundColor = UIColor.blackColor()
            datePicker.setValue(UIColor.whiteColor(), forKey: "textColor")

            textField.inputView = datePicker
            datePicker.addTarget(self, action: "datePickerChanged:", forControlEvents: .ValueChanged)
        }
    }

    func datePickerChanged(sender: UIDatePicker){

        let formatter = NSDateFormatter()
        formatter.dateFormat = "dd-MM-yyyy"
        //    formatter.dateStyle = .ShortStyle
        //  formatter.timeStyle = .NoStyle
        dateOfBirth.text = formatter.stringFromDate(sender.date)

    }

    override func touchesBegan(touches: NSSet, withEvent event: UIEvent) {
        print("touch happened")
        self.view.endEditing(true)

    }

    override func viewDidLoad() {
        super.viewDidLoad()
        dateOfBirth.delegate = self
        text1.delegate =  self
        text2.delegate = self

        // Do any additional setup after loading the view.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

}

I got console output as:

unrecognized selector sent to instance 0x7 Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[BController getCalendar:]: unrecognized selector sent to instance 0x78789050'

How to solve this issue? I'm using Xcode 6.2. If you need more information please let me know.

Body:
I know this is an old question, and a slightly different approach to showing a date picker but I think the idea can still be applied.

Try wrapping the Date Picker View in a UIView() container which contains the gesture detector and spans the full size of the screen.

class ViewController: UIViewController {

var toolBar = UIToolbar()
var datePicker  = UIDatePicker()
var datePickerContainer = UIView()

override func viewDidLoad() {
    super.viewDidLoad()
}

@IBAction func showDatePicker(_ sender: UIButton) {
    datePicker = UIDatePicker()
    datePicker.autoresizingMask = .flexibleWidth
    datePicker.datePickerMode = .dateAndTime
    datePicker.preferredDatePickerStyle = .wheels
    datePicker.backgroundColor = .clear

    datePicker.addTarget(self, action: #selector(self.dateChanged(_:)), for: .valueChanged)
    datePicker.frame = CGRect(x: 0.0, y: UIScreen.main.bounds.size.height - 300, width: UIScreen.main.bounds.size.width, height: 300)

    datePickerContainer = UIView()
    datePickerContainer.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.size.width, height: UIScreen.main.bounds.size.height)
    datePickerContainer.backgroundColor = .clear
    datePickerContainer.addSubview(datePicker)
    self.view.addSubview(datePickerContainer)

    let tapGesture = UITapGestureRecognizer(target: self, action: #selector(touchedOutsideOverlay(_:)))
    datePickerContainer.addGestureRecognizer(tapGesture)

    toolBar = UIToolbar(frame: CGRect(x: 0, y: UIScreen.main.bounds.size.height - 300, width: UIScreen.main.bounds.size.width, height: 50))
    toolBar.barStyle = .black
    toolBar.items = [
        UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil),
        UIBarButtonItem(title: "Done", style: .done, target: self, action: #selector(self.onDoneButtonClick))
    ]
    toolBar.sizeToFit()
    self.view.addSubview(toolBar)
}

@objc func dateChanged(_ sender: UIDatePicker?) {
    let dateFormatter = DateFormatter()

    if let date = sender?.date {
        print("Picked the date: \(dateFormatter.string(from: date))")
    }
}

@objc func touchedOutsideOverlay(_ sender: UITapGestureRecognizer){
    removeDatePicker()
}

@objc func onDoneButtonClick() {
    removeDatePicker()
}

func removeDatePicker(){
    toolBar.removeFromSuperview()
    datePicker.removeFromSuperview()
    datePickerContainer.removeFromSuperview()
}
}


来源: stackexchange

问:
How to make text properly aligned with padding in SwiftUI?
So I have these two texts that I'm trying to align at the same pixel basically, but it seems that one is more offset than the other.  Like so, the one on the bottom seems to be further left than the other.

Here is the code:

```<code>VStack(alignment: .leading) {
                    Text("Enter your phone number")
                        .padding(15)
                        .frame(alignment: .leading)
                        .foregroundColor(Color.white)
                        .font(Font.custom("URWDIN-Thin", size: 30))
                //Subtitle
                    Text("You will be sent a code for verification")
                        .padding(15)
                        .frame(alignment: .leading)
                        .foregroundColor(Color.white)
                        .font(Font.custom("URWDIN-Thin", size: 16))

</code>```

Any idea as to why this may be?

答:
You have chosen a font in which capital ‘E’ has a noticeable left side bearing. Left side bearing is the distance from the “pen position” to the left edge of the tight bounding box of the glyph.

That's why your lines of text look misaligned. Here's my test:

```<code>PlaygroundPage.current.setLiveView(
    VStack(alignment: .leading) {
        Text("Enter your phone number")
            .border(Color.red, width: 1)
            .font(Font.custom("URWDIN-Thin", size: 30))
        Text("You will be sent a code for verification")
            .border(Color.red, width: 1)
            .font(Font.custom("URWDIN-Thin", size: 16))
        Text("Enter your phone number")
            .border(Color.red, width: 1)
            .font(Font.system(size: 30))
        Text("You will be sent a code for verification")
            .border(Color.red, width: 1)
            .font(Font.system(size: 16))
    }
)
</code>```

Output:

Notice how, in both URW DIN Thin and in the system font (SF Pro), the capital ‘Y’ has a left side bearing of essentially zero: both glyphs touch the left edge of the frame.

The left side bearing of SF Pro's capital ‘E’ is not zero but it's small: a fraction of the vertical stroke width.

But the left side bearing of the capital ‘E’ in DRW UDM Thin is significant. It's about twice the vertical stroke width. That makes it quite noticeable compared to the zero bearing of the capital ‘Y’.

ContentLicense: CC BY-SA 4.0

Body:
So I have these two texts that I'm trying to align at the same pixel basically, but it seems that one is more offset than the other.  Like so, the one on the bottom seems to be further left than the other.

Here is the code:

VStack(alignment: .leading) {
                    Text("Enter your phone number")
                        .padding(15)
                        .frame(alignment: .leading)
                        .foregroundColor(Color.white)
                        .font(Font.custom("URWDIN-Thin", size: 30))
                //Subtitle
                    Text("You will be sent a code for verification")
                        .padding(15)
                        .frame(alignment: .leading)
                        .foregroundColor(Color.white)
                        .font(Font.custom("URWDIN-Thin", size: 16))

Any idea as to why this may be?

Body:
You have chosen a font in which capital ‘E’ has a noticeable left side bearing. Left side bearing is the distance from the “pen position” to the left edge of the tight bounding box of the glyph.

That's why your lines of text look misaligned. Here's my test:

PlaygroundPage.current.setLiveView(
    VStack(alignment: .leading) {
        Text("Enter your phone number")
            .border(Color.red, width: 1)
            .font(Font.custom("URWDIN-Thin", size: 30))
        Text("You will be sent a code for verification")
            .border(Color.red, width: 1)
            .font(Font.custom("URWDIN-Thin", size: 16))
        Text("Enter your phone number")
            .border(Color.red, width: 1)
            .font(Font.system(size: 30))
        Text("You will be sent a code for verification")
            .border(Color.red, width: 1)
            .font(Font.system(size: 16))
    }
)

Output:

Notice how, in both URW DIN Thin and in the system font (SF Pro), the capital ‘Y’ has a left side bearing of essentially zero: both glyphs touch the left edge of the frame.

The left side bearing of SF Pro's capital ‘E’ is not zero but it's small: a fraction of the vertical stroke width.

But the left side bearing of the capital ‘E’ in DRW UDM Thin is significant. It's about twice the vertical stroke width. That makes it quite noticeable compared to the zero bearing of the capital ‘Y’.


问:
How to find out CloudWatch GetMetricData cost is for which log group?
We have recently huge cost increasing (x8 times) on CloudWatch GetMetricData operation. We have a lot of log groups and different teams on the same Aws Account.

Do you know how could we find out the GetMetricData is for which log group ?

Thanks.

答: Unfortunately, there's no easy answer your question. We had the same issue where a line on the bill call "GetMetricsData API" was getting completely out of control. It's a shame AWS CloudTrail does not log such request. To discover the root cause, we had to disable all external monitoring tool we had plugged on this account one by one and monitor for a dent in the bill. See this article.</p>


问:
all github action jobs are queued and never running
Updated:

2-3 days later, my job failed automatically with the following error message.

I encountered difficulties as all of my GitHub Action jobs were stuck in a queued state and never executed.

I diligently checked the status of GitHub Actions on githubstatus.com, but couldn't find any indication of system downtime or issues.

Through extensive searching, I came across a thread discussing a similar problem.
It appears to be an older issue and quite puzzling, especially since GitHub Actions are functioning properly on other repositories.

here is yaml that I used

```<code>jobs:
  never-running-job:
    runs-on: node:16.13-alpine3.14
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js
        uses: actions/setup-node@v1
        with:
          node-version: '14.x'
      - name: preinstall
        run: yarn install
      - name: build app
        run: yarn run build
      - name: test app
        run: yarn run test
</code>```

答:
Updated

After the incident with GitHub Actions on February 5,
it seems that (even now) it is not working with many images except for 'ubuntu'.

I updated the 'runs-on' tag to 'ubuntu:latest', pushed the commit,
and finally, GitHub picked up my CI/CD jobs.

Originally, I used the node alpine image

old answers

I found incidents on the GitHub page when I encountered that error. Perhaps that is affecting the queued status.

Body:
Updated:

2-3 days later, my job failed automatically with the following error message.

I encountered difficulties as all of my GitHub Action jobs were stuck in a queued state and never executed.

I diligently checked the status of GitHub Actions on githubstatus.com, but couldn't find any indication of system downtime or issues.

Through extensive searching, I came across a thread discussing a similar problem.
It appears to be an older issue and quite puzzling, especially since GitHub Actions are functioning properly on other repositories.

here is yaml that I used

jobs:
  never-running-job:
    runs-on: node:16.13-alpine3.14
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js
        uses: actions/setup-node@v1
        with:
          node-version: '14.x'
      - name: preinstall
        run: yarn install
      - name: build app
        run: yarn run build
      - name: test app
        run: yarn run test


问:
Groupby A column and bring up the A value, only if the B values differ from the other ones, including nulls
I have this example, dataset:

```<code> A   B
11   A
11   V
11   C
12   A
12   A
12   A
12   A
13   A
13   A
13   B
13   B
14   C
14   C
14
14
</code>```

And I want it to return, the grouped A values, that has different values on the B column. So in this example, the expected output is:

```<code>[11, 13,14]
</code>```

I made an attempt at formulating the code, and I succeeded but it is terrible and  unoptimized. And I was looking for alternatives so I could iterate faster through my much bigger dataset. Would appreciate some help.

Here is my code:

```<code>user_mult_camps = []

for i in  df['A'].unique():
    filt = (df['A'] == i)
    df2 = df.loc[filt]
    x=df2['B'].unique()
    if len(x) > 1:
        user_mult_camps.append(i)
        print(i)
</code>```

答:
IIUC, you want to ensure all values are different?

You could use:

```<code>s = df.groupby('A')['B'].apply(lambda s: ~s.duplicated().any())

s[s].index.tolist()
</code>```

Output: [11]

Body:
I have this example, dataset:

 A   B
11   A
11   V
11   C
12   A
12   A
12   A
12   A
13   A
13   A
13   B
13   B
14   C
14   C
14
14

And I want it to return, the grouped A values, that has different values on the B column. So in this example, the expected output is:

[11, 13,14]

I made an attempt at formulating the code, and I succeeded but it is terrible and  unoptimized. And I was looking for alternatives so I could iterate faster through my much bigger dataset. Would appreciate some help.

Here is my code:

user_mult_camps = []

for i in  df['A'].unique():
    filt = (df['A'] == i)
    df2 = df.loc[filt]
    x=df2['B'].unique()
    if len(x) > 1:
        user_mult_camps.append(i)
        print(i)

Body:
IIUC, you want to ensure all values are different?

You could use:

s = df.groupby('A')['B'].apply(lambda s: ~s.duplicated().any())

s[s].index.tolist()

Output: [11]


问:
creating dataframe from vectors
enter image description hereI have the following vectors:

```<code>bid = c(1,5,10,20,30,40,50)
n = c(31,29,27,25,23,21,19)
yes = c(0,3,6,7,9,13,17)
no = n - yes
</code>```

I have two questions, and I don't find any solutions for them, I would appreciate if someone can help me.

Q1: I want to write R code to create a two-column dataframe df. Column 1 has Bid,
where each Bid is repeated n times; Column 2 has c(rep(1,yes),rep(0,no) at
each bid.

Q2: Then when I have the data frame df, I want to write R codes to generate
(from df) vectors bid, n, yes, and no, again.

答:
It is a bit unclear what you actually want. It is easier if you provide the desired result. Would this fit your Q1:</p>
```<code>library(tidyverse)
bid = c(1,5,10,20,30,40,50)
n = c(31,29,27,25,23,21,19)
yes = c(0,3,6,7,9,13,17)
no = n - yes

df <- tibble(bid, yes, n, no = n -yes) %>% dplyr::select(- n) %>% pivot_longer(cols = c(yes, no)) %>%  uncount(value) %>% mutate(yesno = ifelse(name == "yes", 1,0)) %>% dplyr::select(-name)

df2 <- df %>% group_by(bid) %>% table() %>%  as.data.frame() %>% pivot_wider(id_cols = bid, names_from = yesno, values_from = Freq) %>% mutate(n = yes + no) %>% rename(no = `0`, yes = `1`)

bid <- df2$bid
n <- df2$n
yes <- df2$yes
</code>```

Title: creating dataframe from vectors

Body:
enter image description hereI have the following vectors:

bid = c(1,5,10,20,30,40,50)
n = c(31,29,27,25,23,21,19)
yes = c(0,3,6,7,9,13,17)
no = n - yes

I have two questions, and I don't find any solutions for them, I would appreciate if someone can help me.

Q1: I want to write R code to create a two-column dataframe df. Column 1 has Bid,
where each Bid is repeated n times; Column 2 has c(rep(1,yes),rep(0,no) at
each bid.

Q2: Then when I have the data frame df, I want to write R codes to generate
(from df) vectors bid, n, yes, and no, again.

Body:
It is a bit unclear what you actually want. It is easier if you provide the desired result. Would this fit your Q1:

library(tidyverse)
bid = c(1,5,10,20,30,40,50)
n = c(31,29,27,25,23,21,19)
yes = c(0,3,6,7,9,13,17)
no = n - yes

df <- tibble(bid, yes, n, no = n -yes) %>% dplyr::select(- n) %>% pivot_longer(cols = c(yes, no)) %>%  uncount(value) %>% mutate(yesno = ifelse(name == "yes", 1,0)) %>% dplyr::select(-name)

df2 <- df %>% group_by(bid) %>% table() %>%  as.data.frame() %>% pivot_wider(id_cols = bid, names_from = yesno, values_from = Freq) %>% mutate(n = yes + no) %>% rename(no = `0`, yes = `1`)

bid <- df2$bid
n <- df2$n
yes <- df2$yes


问:
How to apply different animation on the same text when two different buttons are clicked
I have a button that when clicked will display a
 text
 element and I gave it an animation (going from top to bottom) but now I created another button that when clicked will delete the text in the
 element I want to add an animation for when that happens, but when I code the CSS to animate the text when deleted, it seems to override the previous animation.

Is there an if else statement in CSS or can I do it in JavaScript?
This is vanilla JavaScript and CSS.

<button class="button" onclick="Click()">click me</button>

This text should appear on click

<button class="butremove" onclick="ClickRemove()">click me to delete message</button>
```
<pre class="lang-css prettyprint-override"><code>@keyframes buttonappear {
  0% {top: 10px;}
  100% {top: 175px;}
}

#appear {
  position: absolute;
  top: 175px;
  animation-name: buttonappear;
  animation-duration: 2.5s;
}
</code>```

const Click = () => {
  document.getElementById("appear").style.display = "block";
}

const ClickRemove = () => {
  document.getElementById("appear").style.display = "none";
}
```

What CSS or JS code can I use to animate the text when it disappears without overriding the previous animation?

答:
Instead of using a @keyframes animation, you can use the transition property and toggle a CSS class on the
 element. Since you want to perform the animation in response to an action, transition works perfectly for this case. Also reversing states mid-animation is handled automatically.

Here's an example:

The approach here is to set the hidden styles on the
 element and define a separate class (visible) that contains the visible styles. Depending on which button is clicked, the visible class will be added to or removed from the
 element and the transition will animate between the two styles.

const message = document.querySelector("#message");

function clickShow() {
  message.classList.add("visible");
}

function clickRemove() {
  message.classList.remove("visible");
}```
<pre class="snippet-code-css lang-css prettyprint-override"><code>#message {
  position: absolute;
  opacity: 0;
  top: 10px;
  transition: 2.5s;
}

#message.visible {
  opacity: 1;
  top: 175px;
}</code>```

<button class="button" onclick="clickShow()">click me</button>

This text should appear on click

<button class="butremove" onclick="clickRemove()">click me to delete message</button>```
</div>
</div>
</p>
<p>Actually the code above can be simplified quite a bit if you want by only using one button that just toggles the message, like this:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const message = document.querySelector("#message");

function toggleMessage() {
  message.classList.toggle("visible");
}</code>```

#message {
  position: absolute;
  opacity: 0;
  top: 10px;
  transition: 2.5s;
}

#message.visible {
  opacity: 1;
  top: 175px;
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><button class="button" onclick="toggleMessage()">click me</button>
<p id="message">This text should appear on click</p></code>```

Body:
I have a button that when clicked will display a
 text
 element and I gave it an animation (going from top to bottom) but now I created another button that when clicked will delete the text in the
 element I want to add an animation for when that happens, but when I code the CSS to animate the text when deleted, it seems to override the previous animation.

Is there an if else statement in CSS or can I do it in JavaScript?
This is vanilla JavaScript and CSS.

<button class="button" onclick="Click()">click me</button>

This text should appear on click

<button class="butremove" onclick="ClickRemove()">click me to delete message</button>

@keyframes buttonappear {
  0% {top: 10px;}
  100% {top: 175px;}
}

#appear {
  position: absolute;
  top: 175px;
  animation-name: buttonappear;
  animation-duration: 2.5s;
}

const Click = () => {
  document.getElementById("appear").style.display = "block";
}

const ClickRemove = () => {
  document.getElementById("appear").style.display = "none";
}

What CSS or JS code can I use to animate the text when it disappears without overriding the previous animation?

Body:
Instead of using a @keyframes animation, you can use the transition property and toggle a CSS class on the <p> element. Since you want to perform the animation in response to an action, transition works perfectly for this case. Also reversing states mid-animation is handled automatically.

Here's an example:

The approach here is to set the hidden styles on the <p> element and define a separate class (visible) that contains the visible styles. Depending on which button is clicked, the visible class will be added to or removed from the <p> element and the transition will animate between the two styles.

const message = document.querySelector("#message");

function clickShow() {
  message.classList.add("visible");
}

function clickRemove() {
  message.classList.remove("visible");
}

#message {
  position: absolute;
  opacity: 0;
  top: 10px;
  transition: 2.5s;
}

#message.visible {
  opacity: 1;
  top: 175px;
}

<button class="button" onclick="clickShow()">click me</button>
<p id="message">This text should appear on click</p>

<button class="butremove" onclick="clickRemove()">click me to delete message</button>

Actually the code above can be simplified quite a bit if you want by only using one button that just toggles the message, like this:

const message = document.querySelector("#message");

function toggleMessage() {
  message.classList.toggle("visible");
}

#message {
  position: absolute;
  opacity: 0;
  top: 10px;
  transition: 2.5s;
}

#message.visible {
  opacity: 1;
  top: 175px;
}

<button class="button" onclick="toggleMessage()">click me</button>
<p id="message">This text should appear on click</p>


问:
How to match a value in one column to another column based on hierarchy level
I have a table that contains 4 columns: entry_id, NAME, type, upper_id.

Each entry_id corresponds to a specific upper_id. There can be many different entry_id's that correspond to SAME upper_id. The column type represent the level of that entry in terms of hierarchy.

```<code>1 --> First level
2 --> Second level
3 --> Third level
</code>```

I need to match what is in the upper_id to the entry_id in order to add another column for upper_name which will be found in the same table column name. In the example above, if upper_id = '1001' for an entry_id, I need to find this value in the entry_id and grab the name found.

An entry_id with type = '1' will always have an upper_id that has a value in the entry_id with a type = '2'. And an entry_id with a type = '2' will always have an upper id that has a value in entry_id with a type = '3'. An entry_id with type = '3' will never have an upper_id, and its upper_name column will be NULL.

The results will  look like this:

```<code>CREATE TABLE TBL_1
(     ENTRY_ID int,
      NAME string,
      TYPE int,
      UPPER_ID int
);

INSERT INTO TBL_1
values
(1234,'bichon',1,'1001'),
(1124,'yorkie',1,'1001'),
(1009,'golden',1,'1001'),
(6722,'poodle',1,'1001'),
(1001,'canine',2,'2002'),
(2002,'animal',3,NULL)
</code>```

Do you know how I can formulate a query that allows me to include an "upper_name" column from the data already in the table?

答:
left join the table with itself as following:

```<code>select
t1.ENTRY_ID ,
t1.NAME,
t1.TYPE,
t1.UPPER_ID,
t2.NAME as upper_name

from TBL_1 as t1
left join TBL_1 as t2 on t1.UPPER_ID = t2.ENTRY_ID
</code>```

The LEFT JOIN keyword returns all records from the left table (t1), and the matching records from the right table (t2),in case no matching record from the right table it will return null for its selected columns.

Body:
I have a table that contains 4 columns: entry_id, NAME, type, upper_id.

Each entry_id corresponds to a specific upper_id. There can be many different entry_id's that correspond to SAME upper_id. The column type represent the level of that entry in terms of hierarchy.

1 --> First level
2 --> Second level
3 --> Third level

I need to match what is in the upper_id to the entry_id in order to add another column for upper_name which will be found in the same table column name. In the example above, if upper_id = '1001' for an entry_id, I need to find this value in the entry_id and grab the name found.

An entry_id with type = '1' will always have an upper_id that has a value in the entry_id with a type = '2'. And an entry_id with a type = '2' will always have an upper id that has a value in entry_id with a type = '3'. An entry_id with type = '3' will never have an upper_id, and its upper_name column will be NULL.

The results will  look like this:

CREATE TABLE TBL_1
(     ENTRY_ID int,
      NAME string,
      TYPE int,
      UPPER_ID int
);

INSERT INTO TBL_1
values
(1234,'bichon',1,'1001'),
(1124,'yorkie',1,'1001'),
(1009,'golden',1,'1001'),
(6722,'poodle',1,'1001'),
(1001,'canine',2,'2002'),
(2002,'animal',3,NULL)

Do you know how I can formulate a query that allows me to include an "upper_name" column from the data already in the table?

Body:
left join the table with itself as following:

select
t1.ENTRY_ID ,
t1.NAME,
t1.TYPE,
t1.UPPER_ID,
t2.NAME as upper_name

from TBL_1 as t1
left join TBL_1 as t2 on t1.UPPER_ID = t2.ENTRY_ID

The LEFT JOIN keyword returns all records from the left table (t1), and the matching records from the right table (t2),in case no matching record from the right table it will return null for its selected columns.


问:
Unable to start RabbitMQ: undefined function rabbitmqctl_escript:main/1
I would like to start RabbitMQ installed as JFrog Xray and I get:

```<code>-bash-4.2$ /opt/jfrog/xray/app/third-party/rabbitmq/escript/rabbitmqctl
escript: exception error: undefined function rabbitmqctl_escript:main/1
  in function  escript:run/2 (escript.erl, line 758)
  in call from escript:start/1 (escript.erl, line 277)
  in call from init:start_em/1
  in call from init:do_boot/3
</code>```

I know that this is not the standard way to start the service, this is already a result of 3 days fighting!

Escript check says:

```<code>-bash-4.2$ escript -s /opt/jfrog/xray/app/third-party/rabbitmq/escript/rabbitmqctl
escript: Cannot load module rabbitmqctl_escript from archive
</code>```

Versions installed:

```<code># rpm -qa | grep 'erlang\|xray\|socat'
socat-1.7.3.2-2.el7.x86_64
erlang-22.3.4-1.el7.x86_64
xray-3.8.6-1.el6.x86_64
</code>```

RabbitMQ is part of Xray.
Version: RabbitMQ 3.8.3
It starts by using sbin/rabbitmq-server, but as Xray is using the rabbitmqctl, it should be used as well.

答: Resolved this issue by removing a soft link to the RabbitMQ-directory, which was used in PATH and other environmental variables.</p>

Body:
I would like to start RabbitMQ installed as JFrog Xray and I get:

-bash-4.2$ /opt/jfrog/xray/app/third-party/rabbitmq/escript/rabbitmqctl
escript: exception error: undefined function rabbitmqctl_escript:main/1
  in function  escript:run/2 (escript.erl, line 758)
  in call from escript:start/1 (escript.erl, line 277)
  in call from init:start_em/1
  in call from init:do_boot/3

I know that this is not the standard way to start the service, this is already a result of 3 days fighting!

Escript check says:

-bash-4.2$ escript -s /opt/jfrog/xray/app/third-party/rabbitmq/escript/rabbitmqctl
escript: Cannot load module rabbitmqctl_escript from archive

Versions installed:

# rpm -qa | grep 'erlang\|xray\|socat'
socat-1.7.3.2-2.el7.x86_64
erlang-22.3.4-1.el7.x86_64
xray-3.8.6-1.el6.x86_64

RabbitMQ is part of Xray.
Version: RabbitMQ 3.8.3
It starts by using sbin/rabbitmq-server, but as Xray is using the rabbitmqctl, it should be used as well.


问:
How do I get the "true" online status of a user via the slack api?
I'm working on a project where tickets are assigned to users based on their presence in Slack. This presence can be Active or Away, but one can also manually set this presence to Away. A clever user can manually set his or her presence and avoid being assigned work. This is something I would like to avoid.

For the moment I use the users.getPresence method which works fine, but I would like to retrieve the "true" presence of users.

The users.getPresence documentation page has the following info:

If you are requesting presence information for the authed user, this method returns the current presence, along with details on how it was calculated:

```<code>{
    "ok": true,
    "presence": "active",
    "online": true,
    "auto_away": false,
    "manual_away": false,
    "connection_count": 1,
    "last_activity": 1419027078
}
</code>```

This method provides information regarding the connection count and if a user has manually changed his status to Away. My assumption is that, using this information, I can see if a user is online but he is being sneaky.

However, I have no idea how to retrieve this information. What is this 'authed' user and can you only get this information for this user?

Furthermore, I accidentally retrieved this 'extended' getPresence data when I send a request to my app using an email address as input, instead of a Slack ID. However, the response is always the same:

```<code>{
    "ok": true,
    "presence": "away",
    "online": false,
    "auto_away": false,
    "manual_away": false,
    "connection_count": 0
}
</code>```

It doesn't matter if I'm active or manually away, the response is always the same.

Has anybody here figured out how this 'extended' getPresence works? I would love to know you did it.

If anybody has an idea on how to retrieve the "true" online status in Slack, please let me know :D

答: Authed user is the user that allowed their account data to be accessed, it is a breach of privacy for the API to allow an application to have access to user's "true" online status when they obviously do not want it known and have not consented to it.</p>

Body:
I'm working on a project where tickets are assigned to users based on their presence in Slack. This presence can be Active or Away, but one can also manually set this presence to Away. A clever user can manually set his or her presence and avoid being assigned work. This is something I would like to avoid.

For the moment I use the users.getPresence method which works fine, but I would like to retrieve the "true" presence of users.

The users.getPresence documentation page has the following info:

If you are requesting presence information for the authed user, this method returns the current presence, along with details on how it was calculated:

{
    "ok": true,
    "presence": "active",
    "online": true,
    "auto_away": false,
    "manual_away": false,
    "connection_count": 1,
    "last_activity": 1419027078
}

This method provides information regarding the connection count and if a user has manually changed his status to Away. My assumption is that, using this information, I can see if a user is online but he is being sneaky.

However, I have no idea how to retrieve this information. What is this 'authed' user and can you only get this information for this user?

Furthermore, I accidentally retrieved this 'extended' getPresence data when I send a request to my app using an email address as input, instead of a Slack ID. However, the response is always the same:

{
    "ok": true,
    "presence": "away",
    "online": false,
    "auto_away": false,
    "manual_away": false,
    "connection_count": 0
}

It doesn't matter if I'm active or manually away, the response is always the same.

Has anybody here figured out how this 'extended' getPresence works? I would love to know you did it.

If anybody has an idea on how to retrieve the "true" online status in Slack, please let me know :D


答:
The code below works fine for me.  I did not change the rest of the code.  Please note that different datatables are rendered in myTable1, myTable2, myTable3 based on data, data2 and data3.</p>
```<code>ui <- fluidPage(
  mainPanel("666",
            #      width = 9,
            tabPanel("123",
                     hr(),
                     selectInput(
                       "select",
                       "Select",
                       choices = NULL#,
                       #minLength = 1,
                       #value = "0610005C13Rik"
                     ),
                     #####
                     actionButton(inputId = "plot_1", label = "123",width=80,class="btn btn-success"),
                     actionButton(inputId = "plot_2", label = "456",width=80,class="btn btn-light"),
                     actionButton(inputId = "plot_3", label = "789",width=80,class="btn btn-danger"),
                     hr(),
                     uiOutput("all"),
                     uiOutput("mydata"),
                     # dataTableOutput('myTable1'),
                     # dataTableOutput('myTable2'),
                     # dataTableOutput('myTable3')
                     #####
            )
  ))
server <- function(input, output, session) {

  updateSelectInput(session, "select", choices = colnames(data[,-1]))
  observeEvent(list(input$plot_1,input$plot_2,input$plot_3), {
    updateTabsetPanel(session, "666",
                      selected = "123"
    )
  })

  #################
  global <- reactiveValues(out = NULL,
                           data = NULL
  )

  ######
  output$all <- renderUI({
    global$out
  })

  output$mydata <- renderUI({
    global$data
  })

  #####
  observeEvent(input$plot_1,{
    global$out <- plotOutput("myPlot_1")
    global$data <- DTOutput("myTable1")
  })

  observeEvent(input$plot_2, {

    global$out <- plotOutput("myPlot_2")
    global$data <- DTOutput("myTable2")
  })

  observeEvent(input$plot_3, {
    global$outtt <- plotOutput("myPlot_3")
    global$data <- DTOutput("myTable3")
  })

</code>```

Title: how to use three different data(data,data2 and data3) to generate and refresh result by three actionbutton

Body:
Here is my code:   My last question here

options(encoding = "UTF-8")
library(shiny)
library(shinythemes)
library(psych)              ## corr.test
library(DT)
library(pheatmap)
########

    data<-structure(list(Name = c("A", "A", "A", "B", "B", "B", "C", "C",
                                  "C", "D"), `0610005C13Rik` = c(0.42, 0.28, 0.16, 0.14, 0.23,
                                                                 0.12, 0, 0.06, 0.09, 0.27), `0610006L08Rik` = c(0, 0, 0, 0, 0,
                                                                                0, 0, 0, 0, 0), `0610007P14Rik` = c(12.81, 11.44, 13.94, 14.26,
                                                                                14.95, 14.55, 6.61, 8.52, 7.68, 5.13), `0610009B22Rik` = c(7.53,
                                                                                6.55, 7.32, 7.12, 6.33, 7.12, 5.87, 3.57, 3.95, 3.49), `0610009E02Rik` = c(0.19,
                                                                                0.25, 0.23, 0.18, 0.28, 0.3, 0.26, 0.14, 0.11, 0.11), `0610009L18Rik` = c(1.32,
                                                                                1.61, 1.26, 0.78, 1.12, 0.95, 3.45, 1.36, 0.94, 1.31), `0610009O20Rik` = c(18.73,
                                                                                17.38, 18.56, 21.46, 22.64, 21.24, 20.85, 21.85, 17.9, 23.44),
                         `0610010B08Rik` = c(0, 0, 0, 0, 0, 0, 0, 0, 0, 0), `0610010F05Rik` = c(5.14,
                                                                                4.49, 4.68, 4.63, 4.5, 4.15, 1.74, 2.3, 2.03, 2.28), `0610010K14Rik` = c(34.97,
                                                                                28.72, 32.6, 29.98, 29.93, 30.05, 38.07, 29.76, 28.63, 27.74
                                                                                )), row.names = c(NA, 10L), class = "data.frame")
    data2<-structure(list(Name = c("A", "A", "A", "B", "B", "B", "C", "C",
                                  "C", "D"), `0610005C13Rik` = c(0.42, 0.28, 0.16, 0.14, 0.23,
                                                                 0.12, 0, 0.06, 0.09, 0.27), `0610006L08Rik` = c(0, 0, 0, 0, 0,
                                                                                0, 0, 0, 0, 0), `0610007P14Rik` = c(12.81, 11.44, 13.94, 14.26,
                                                                                14.95, 14.55, 6.61, 8.52, 7.68, 5.13), `0610009B22Rik` = c(7.53,
                                                                                6.55, 7.32, 7.12, 6.33, 7.12, 5.87, 3.57, 3.95, 3.49), `0610009E02Rik` = c(0.19,
                                                                                0.25, 0.23, 0.18, 0.28, 0.3, 0.26, 0.14, 0.11, 0.11), `0610009L18Rik` = c(1.32,
                                                                                1.61, 1.26, 0.78, 1.12, 0.95, 3.45, 1.36, 0.94, 1.31), `0610009O20Rik` = c(18.73,
                                                                                17.38, 18.56, 21.46, 22.64, 21.24, 20.85, 21.85, 17.9, 23.44),
                         `0610010B08Rik` = c(0, 0, 0, 0, 0, 0, 0, 0, 0, 0), `0610010F05Rik` = c(5.14,
                                                                                4.49, 4.68, 4.63, 4.5, 4.15, 1.74, 2.3, 2.03, 2.28), `0610010K14Rik` = c(34.97,
                                                                                28.72, 32.6, 29.98, 29.93, 30.05, 38.07, 29.76, 28.63, 27.74
                                                                                )), row.names = c(NA, 10L), class = "data.frame")
    data3<-structure(list(Name = c("A", "A", "A", "B", "B", "B", "C", "C",
                                  "C", "D"), `0610005C13Rik` = c(0.42, 0.28, 0.16, 0.14, 0.23,
                                                                 0.12, 0, 0.06, 0.09, 0.27), `0610006L08Rik` = c(0, 0, 0, 0, 0,
                                                                                0, 0, 0, 0, 0), `0610007P14Rik` = c(12.81, 11.44, 13.94, 14.26,
                                                                                14.95, 14.55, 6.61, 8.52, 7.68, 5.13), `0610009B22Rik` = c(7.53,
                                                                                6.55, 7.32, 7.12, 6.33, 7.12, 5.87, 3.57, 3.95, 3.49), `0610009E02Rik` = c(0.19,
                                                                                0.25, 0.23, 0.18, 0.28, 0.3, 0.26, 0.14, 0.11, 0.11), `0610009L18Rik` = c(1.32,
                                                                                1.61, 1.26, 0.78, 1.12, 0.95, 3.45, 1.36, 0.94, 1.31), `0610009O20Rik` = c(18.73,
                                                                                17.38, 18.56, 21.46, 22.64, 21.24, 20.85, 21.85, 17.9, 23.44),
                         `0610010B08Rik` = c(0, 0, 0, 0, 0, 0, 0, 0, 0, 0), `0610010F05Rik` = c(5.14,
                                                                                4.49, 4.68, 4.63, 4.5, 4.15, 1.74, 2.3, 2.03, 2.28), `0610010K14Rik` = c(34.97,
                                                                                28.72, 32.6, 29.98, 29.93, 30.05, 38.07, 29.76, 28.63, 27.74
                                                                                )), row.names = c(NA, 10L), class = "data.frame")

    ######

    ui <- fluidPage(
        mainPanel("666",
    #      width = 9,
                      tabPanel("123",
                               hr(),
                               typeaheadInput(
                                 "select",
                                 "Select",
                                 choices = NULL,
                                 minLength = 1,
                                 value = "0610005C13Rik"
                               ),
                               #####
                               actionButton(inputId = "plot_1", label = "123",width=80,class="btn btn-success"),
                               actionButton(inputId = "plot_2", label = "456",width=80,class="btn btn-light"),
                               actionButton(inputId = "plot_3", label = "789",width=80,class="btn btn-danger"),
                               hr(),
                               uiOutput("all"),
                               uiOutput("mydata"),
                               # dataTableOutput('myTable1'),
                               # dataTableOutput('myTable2'),
                               # dataTableOutput('myTable3')
                               #####
                      )
          ))
    server <- function(input, output, session) {

      updateTypeaheadInput(session, "select", choices = colnames(data[,-1]))
      observeEvent(list(input$plot_1,input$plot_2,input$plot_3), {
        updateTabsetPanel(session, "666",
                          selected = "123"
        )
      })

      #################
      global <- reactiveValues(out = NULL,
                               data = NULL,
                               data2=NULL,
                               data3=NULL
      )

      ######
      output$all <- renderUI({
        global$out
      })

      output$mydata <- renderUI({
        global$data
        global$data2
        global$data3
      })

      #####
      observeEvent(input$plot_1,{
        global$out <- plotOutput("myPlot_1")
        global$data <- DTOutput("myTable1")
    #    myData_2(NULL)
    #    myData_3(NULL)
      })

      observeEvent(input$plot_2, {

        global$out <- plotOutput("myPlot_2")
        global$data2 <- DTOutput("myTable2")
        # myData_1(NULL)
        # myData_3(NULL)
      })

      observeEvent(input$plot_3, {
        global$outtt <- plotOutput("myPlot_3")
        global$data3 <- DTOutput("myTable3")
        # myData_1(NULL)
        # myData_2(NULL)
      })

      #########################################
      ##
      myPlot_1 = reactiveVal()
      myPlot_2 = reactiveVal()
      myPlot_3 = reactiveVal()
      #
      myData_1 = reactiveVal()
      myData_2 = reactiveVal()
      myData_3 = reactiveVal()

      ####################################  plot_1 plot_2
      observeEvent(input$plot_1, {
        validate(need(sum(unique(colnames(data[,-1])) %in% input$select)>0, "The gene is not found."))
        data_cor<-data[,-1]
        tm <- corr.test(data_cor[,input$select,drop=FALSE],
                        y = data_cor, use = "pairwise", "spearman", adjust="none",
                        alpha=0.05, ci=F, minlength=5)
        res <-setNames(as.data.frame(t(do.call(rbind, tm[c("r", "p")]))), c("Correlation", "P_value"))
        res<-res[-which(rownames(res)== input$select),]
        res<-data.frame(Gene=rownames(res),res)
        res<-res[order(res$Correlation,decreasing = T),]
        rownames(res)<-NULL
        res<-na.omit(res)
        res
        ##############
        data_correlation=t(data[, -1])
        data_subset=data_correlation[c(input$select, as.vector(head(res$Gene, 9))), ]
        myPlot_1(

          if(nrow(data_subset)>1){
            pheatmap(log2(data_subset+1), show_colnames = F,fontsize_row =13,
    #                 labels_row = as.expression(lapply(rownames(data_subset), function(a) bquote(italic(.(a))))),
                     cluster_rows = F, cluster_cols = F,
                     fontsize = 11,
                     cellwidth=4
            )
          }
        )
        myData_1(res)
      })
      ######################################## 2
      observeEvent(input$plot_2, {
        validate(need(sum(unique(colnames(data2[,-1])) %in% input$select)>0, "The gene is not found."))
        data_cor<-data2[,-1]
        tm <- corr.test(data_cor[,input$select,drop=FALSE],
                        y = data_cor, use = "pairwise", "spearman", adjust="none",
                        alpha=0.05, ci=F, minlength=5)
        res <-setNames(as.data.frame(t(do.call(rbind, tm[c("r", "p")]))), c("Correlation", "P_value"))
        res<-res[-which(rownames(res)== input$select),]
        res<-data.frame(Gene=rownames(res),res)
        res<-res[order(res$Correlation,decreasing = T),]
        rownames(res)<-NULL
        res<-na.omit(res)
        res
        ##############
        data_correlation=t(data2[, -1])
        data_subset=data_correlation[c(input$select, as.vector(head(res$Gene, 9))), ]
        myPlot_2(

          if(nrow(data_subset)>1){
            pheatmap(log2(data_subset+1), show_colnames = F,fontsize_row =13,
                     #                 labels_row = as.expression(lapply(rownames(data_subset), function(a) bquote(italic(.(a))))),
                     cluster_rows = F, cluster_cols = F,
                     fontsize = 11,
                     cellwidth=4
            )
          }
        )
        myData_2(res)
      })
      ########################################  3
      observeEvent(input$plot_3, {
        validate(need(sum(unique(colnames(data3[,-1])) %in% input$select)>0, "The gene is not found."))
        data_cor<-data3[,-1]
        tm <- corr.test(data_cor[,input$select,drop=FALSE],
                        y = data_cor, use = "pairwise", "spearman", adjust="none",
                        alpha=0.05, ci=F, minlength=5)
        res <-setNames(as.data.frame(t(do.call(rbind, tm[c("r", "p")]))), c("Correlation", "P_value"))
        res<-res[-which(rownames(res)== input$select),]
        res<-data.frame(Gene=rownames(res),res)
        res<-res[order(res$Correlation,decreasing = T),]
        rownames(res)<-NULL
        res<-na.omit(res)
        res
        ##############
        data_correlation=t(data3[, -1])
        data_subset=data_correlation[c(input$select, as.vector(head(res$Gene, 9))), ]
        myPlot_3(

          if(nrow(data_subset)>1){
            pheatmap(log2(data_subset+1), show_colnames = F,fontsize_row =13,
                     #                 labels_row = as.expression(lapply(rownames(data_subset), function(a) bquote(italic(.(a))))),
                     cluster_rows = F, cluster_cols = F,
                     fontsize = 11,
                     cellwidth=4
            )
          }
        )
        myData_3(res)
      })
      ###################################  1
      output$myPlot_1 = renderPlot({
        req(myPlot_1())
        myPlot_1()
      })

      output$myTable1 = renderDataTable({
        req(myData_1())

        myData_1()

      })
      #################################  2
      output$myPlot_2 = renderPlot({

        req(myPlot_2())
        myPlot_2()
      })

      output$myTable2 = renderDataTable({

        req(myData_2())

        myData_2()

      })
      #################################  3
      output$myPlot_3 = renderPlot({

        req(myPlot_3())
        myPlot_3()
      })

      output$myTable3 = renderDataTable({

        req(myData_3())
        myData_3()

      })

    }

    ###################

    # Create Shiny app ----
    shinyApp(ui = ui, server = server)

I used three different data and generate similar result(a picture and a table together).

But it only works when the third button was clicked.  I don't know why the former two actionbuttons don't generate similar tables.

And here was the answer gived by @YBS  but there was only the same data.

Here my question is how could I modify my code to use three different data.
My new code below doesn't work. I hope somebody can help me.

Body:
The code below works fine for me.  I did not change the rest of the code.  Please note that different datatables are rendered in myTable1, myTable2, myTable3 based on data, data2 and data3.

ui <- fluidPage(
  mainPanel("666",
            #      width = 9,
            tabPanel("123",
                     hr(),
                     selectInput(
                       "select",
                       "Select",
                       choices = NULL#,
                       #minLength = 1,
                       #value = "0610005C13Rik"
                     ),
                     #####
                     actionButton(inputId = "plot_1", label = "123",width=80,class="btn btn-success"),
                     actionButton(inputId = "plot_2", label = "456",width=80,class="btn btn-light"),
                     actionButton(inputId = "plot_3", label = "789",width=80,class="btn btn-danger"),
                     hr(),
                     uiOutput("all"),
                     uiOutput("mydata"),
                     # dataTableOutput('myTable1'),
                     # dataTableOutput('myTable2'),
                     # dataTableOutput('myTable3')
                     #####
            )
  ))
server <- function(input, output, session) {

  updateSelectInput(session, "select", choices = colnames(data[,-1]))
  observeEvent(list(input$plot_1,input$plot_2,input$plot_3), {
    updateTabsetPanel(session, "666",
                      selected = "123"
    )
  })

  #################
  global <- reactiveValues(out = NULL,
                           data = NULL
  )

  ######
  output$all <- renderUI({
    global$out
  })

  output$mydata <- renderUI({
    global$data
  })

  #####
  observeEvent(input$plot_1,{
    global$out <- plotOutput("myPlot_1")
    global$data <- DTOutput("myTable1")
  })

  observeEvent(input$plot_2, {

    global$out <- plotOutput("myPlot_2")
    global$data <- DTOutput("myTable2")
  })

  observeEvent(input$plot_3, {
    global$outtt <- plotOutput("myPlot_3")
    global$data <- DTOutput("myTable3")
  })


问:
VueJS v-for loop, detect if previous element in object was different? (Change cities, etc)
This is a tough one... I have an array like

```<code>
[{'city':'LA','store':'Bobs Burgers'},{'city':'LA','store':'Burger King'},{'city':'Sacramento','store':'Jimmy Burger'}]
</code>```

If I am looping through these burger places in a table and I want to add in a row when the city changes, how do I do that?

In PHP I would do

```<code>
<?php
foreach ($store in $burgerplaces){

if ($store['city']!=$prev_city){
   # show header for the city
}

#print store info

$prev_city=$store['city'];

}
?>
</code>```

答:
If i understood you correctly try like following snippet (in computed property first sort your array then loop, compare cities and add empty object before next city):

new Vue({
  el: "#demo",
  data() {
    return {
      burgers: [{'city':'LA','store':'Bobs Burgers'},{'city':'Sacramento','store':'Jimmy Burger'},{'city':'LA','store':'Burger King'}, {'city':'NY','store':'Burgers'}]
    }
  },
  computed: {
    byCities() {
      const arr = this.burgers.sort((a,b) => {
        const nameA = a.city.toUpperCase();
        const nameB = b.city.toUpperCase();
        if (nameA < nameB) {
          return -1;
        }
        if (nameA > nameB) {
          return 1;
        }
        return 0;
      })
      const res = []
      for(let i = 0; i < arr.length; i++){
        if (i ===0 || arr[i].city !== arr[i-1].city) {
          res.push({city: arr[i].city.toUpperCase()})
        }
        res.push(arr[i])
      }
      return res
    }
  }
})```
<pre class="snippet-code-html lang-html prettyprint-override"><code><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <li v-for="(burger, i) in byCities" :key="i">
    {{ burger.city }}  {{ burger.store }}
  </li>
</div></code>```

Body:
This is a tough one... I have an array like

[{'city':'LA','store':'Bobs Burgers'},{'city':'LA','store':'Burger King'},{'city':'Sacramento','store':'Jimmy Burger'}]

If I am looping through these burger places in a table and I want to add in a row when the city changes, how do I do that?

In PHP I would do

<?php
foreach ($store in $burgerplaces){

if ($store['city']!=$prev_city){
   # show header for the city
}

#print store info

$prev_city=$store['city'];

}
?>

Body:
If i understood you correctly try like following snippet (in computed property first sort your array then loop, compare cities and add empty object before next city):

new Vue({
  el: "#demo",
  data() {
    return {
      burgers: [{'city':'LA','store':'Bobs Burgers'},{'city':'Sacramento','store':'Jimmy Burger'},{'city':'LA','store':'Burger King'}, {'city':'NY','store':'Burgers'}]
    }
  },
  computed: {
    byCities() {
      const arr = this.burgers.sort((a,b) => {
        const nameA = a.city.toUpperCase();
        const nameB = b.city.toUpperCase();
        if (nameA < nameB) {
          return -1;
        }
        if (nameA > nameB) {
          return 1;
        }
        return 0;
      })
      const res = []
      for(let i = 0; i < arr.length; i++){
        if (i ===0 || arr[i].city !== arr[i-1].city) {
          res.push({city: arr[i].city.toUpperCase()})
        }
        res.push(arr[i])
      }
      return res
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <li v-for="(burger, i) in byCities" :key="i">
    {{ burger.city }}  {{ burger.store }}
  </li>
</div>


问:
Can a swig template file know whether it being compiled for python2 ("swig -python") or python3 ("swig -python -py3")?
Because Python2 and Python3 disagree about what strings look like, I have to generate slightly different templates depending on whether I'm generating for Python2 or Python3. SWIG provides all sorts of macros for dealing with strings in an agnostic format, but not one particular macro that I need.

The generated mymod_wrap.c by SWIG contains lines of the form:

```<code>#if PY_VERSION_HEX >= 0x03000000
</code>```

I tried including these in my template file, but that doesn't work.  SWIG has its own C preprocessor, and PY_VERSION_HEX is treated as undefined by that preprocessor.

As a temporary workaround, I'm adding -DPYTHON=2 or -DPYTHON=3 to my SWIG flags when building the template.  But it seems that the -py3 flag itself should be able to provide some way of making itself known.  I've found the documentation on what -py3 actually does to be rather meager.

Will I have to stick with my workaround, or is there a better solution?

答:
The documentation mentions that SWIGPYTHON_PY3 exists if the -py3 flag is set, but even then, it appears that this symbol can't be used in templates.

Finally, in one of the test suite file I found a piece of code that used:

```<code>#ifdef SWIGPYTHON_PY3 // set when using -py3
#define is_swig_py3 1
#else
#define is_swig_py3 0
#endif
</code>```

It turns out that if I place this at the beginning of my template file, I can then use

```<code>#if is_swig_py3
</code>```

inside a template.

Body:
Because Python2 and Python3 disagree about what strings look like, I have to generate slightly different templates depending on whether I'm generating for Python2 or Python3. SWIG provides all sorts of macros for dealing with strings in an agnostic format, but not one particular macro that I need.

The generated mymod_wrap.c by SWIG contains lines of the form:

#if PY_VERSION_HEX >= 0x03000000

I tried including these in my template file, but that doesn't work.  SWIG has its own C preprocessor, and PY_VERSION_HEX is treated as undefined by that preprocessor.

As a temporary workaround, I'm adding -DPYTHON=2 or -DPYTHON=3 to my SWIG flags when building the template.  But it seems that the -py3 flag itself should be able to provide some way of making itself known.  I've found the documentation on what -py3 actually does to be rather meager.

Will I have to stick with my workaround, or is there a better solution?

Body:
The documentation mentions that SWIGPYTHON_PY3 exists if the -py3 flag is set, but even then, it appears that this symbol can't be used in templates.

Finally, in one of the test suite file I found a piece of code that used:

#ifdef SWIGPYTHON_PY3 // set when using -py3
#define is_swig_py3 1
#else
#define is_swig_py3 0
#endif

It turns out that if I place this at the beginning of my template file, I can then use

#if is_swig_py3

inside a template.


问:
Send Outlook Email Via Python?
I am using Outlook 2003.

What is the best way to send email (through Outlook 2003) using Python?

答:
This is a pretty old question but there is one more solution. The current Outlook SMTP server is (as of 2022):

Host: smtp.office365.com

Port: 587 (for TLS)

Probably the easiest and cleanest solution is to use Red Mail that has these already set:

```<code>pip install redmail
</code>```

Then:

```<code>from redmail import outlook

outlook.user_name = "example@hotmail.com"
outlook.password = "<MY PASSWORD>"

outlook.send(
    receivers=["you@example.com"],
    subject="An example",
    text="Hi, this is an example."
)
</code>```

Red Mail supports all sorts of advanced features:

HTML and text bodies

Attachments from various types

Embedded images

It also has Jinja support

Links:

Documentation: https://red-mail.readthedocs.io/en/latest/

Source code: https://github.com/Miksus/red-mail

Disclaimer: I'm the author

Title: Send Outlook Email Via Python?

Body:
This is a pretty old question but there is one more solution. The current Outlook SMTP server is (as of 2022):

Host: smtp.office365.com

Port: 587 (for TLS)

Probably the easiest and cleanest solution is to use Red Mail that has these already set:

pip install redmail

Then:

from redmail import outlook

outlook.user_name = "example@hotmail.com"
outlook.password = "<MY PASSWORD>"

outlook.send(
    receivers=["you@example.com"],
    subject="An example",
    text="Hi, this is an example."
)

Red Mail supports all sorts of advanced features:

HTML and text bodies

Attachments from various types

Embedded images

It also has Jinja support

Links:

Documentation: https://red-mail.readthedocs.io/en/latest/

Source code: https://github.com/Miksus/red-mail

Disclaimer: I'm the author


问:
Vega-Lite Calculated Scale domainMax
I'm trying to calculate a value for domainMax on the Y-axis scale. I tried the following example where I want the Y-axis domainMax to be one greater than the maximum value in the dataset field named "value". The example produces the error 'Unrecognized signal name: "domMax"'. How can I get it to work?</p>
```<code>{
  "data": {
    "values": [
      {"date": "2021-03-01T00:00:00", "value": 1},
      {"date": "2021-04-01T00:00:00", "value": 3},
      {"date": "2021-05-01T00:00:00", "value": 2}
    ]
  },
  "transform": [
    { "calculate": "max(datum.value)+1","as": "domMax"}
  ],
  "mark": "line",
  "encoding": {
    "x": {
      "field": "date",
      "type": "temporal"
    },
    "y": {"field": "value", "type": "quantitative",
      "scale": {"domainMax": {"expr": "domMax"}}
    }
  }
}
</code>```

答:
This transform

```<code>"transform": [
    { "calculate": "max(datum.value)+1","as": "domMax"}
 ]
</code>```

adds a new column to your data set - it does not create a new signal. You can check that in the editor. Go to the DataViewer tab and select data_0 from the drop down. Can you see the new domMax column?

Signals are a different thing entirely - have a look here in the documentation.  Note that the link points to Vega, not Vega-Lite. (Vega-Lite specifications are compiled to Vega.)

Vega-Lite does not let you declare signals; you declare parameters instead. Here is another example using the domMax parameter. Vega-Lite parameters are translated to Vega signals.

It looks like you are trying to derive the value of your parameter/signal from the data. I am not sure you can do that in Vega-Lite.

On the other hand it's very easy in Vega. For example you could use the extent transform:
https://vega.github.io/vega/docs/transforms/extent/

Side comment - while Vega specifications are more verbose you can sometimes find their primitives simpler and a good way to understand how the visualisation works. (You can see compiled Vega in the editor.)

Title: Vega-Lite Calculated Scale domainMax

Body:
I'm trying to calculate a value for domainMax on the Y-axis scale. I tried the following example where I want the Y-axis domainMax to be one greater than the maximum value in the dataset field named "value". The example produces the error 'Unrecognized signal name: "domMax"'. How can I get it to work?

{
  "data": {
    "values": [
      {"date": "2021-03-01T00:00:00", "value": 1},
      {"date": "2021-04-01T00:00:00", "value": 3},
      {"date": "2021-05-01T00:00:00", "value": 2}
    ]
  },
  "transform": [
    { "calculate": "max(datum.value)+1","as": "domMax"}
  ],
  "mark": "line",
  "encoding": {
    "x": {
      "field": "date",
      "type": "temporal"
    },
    "y": {"field": "value", "type": "quantitative",
      "scale": {"domainMax": {"expr": "domMax"}}
    }
  }
}

Body:
This transform

"transform": [
    { "calculate": "max(datum.value)+1","as": "domMax"}
 ]

adds a new column to your data set - it does not create a new signal. You can check that in the editor. Go to the DataViewer tab and select data_0 from the drop down. Can you see the new domMax column?

Signals are a different thing entirely - have a look here in the documentation.  Note that the link points to Vega, not Vega-Lite. (Vega-Lite specifications are compiled to Vega.)

Vega-Lite does not let you declare signals; you declare parameters instead. Here is <a href="https://vega.github.io/editor/#/url/vega-lite/N4IgJAzgxgFgpgWwIYgFwhgF0wBwqgegIDc4BzJAOjIEtMYBXAI0poHsDp5kTykBaADZ04JAKyUAVhDYA7EABoQOJACckCCGgDaoWRrhoQAEzYIAskgAeikMSSCGh1ABYAvgF0lxpJhSpQe0c4LVRdE19nEAAmAAZogEZ+WIBmZISAFVjY1Gzc2NsgpzQEtwVQH0wouMTkl3SsnLzswodi1BSyisijGqTYsQbmpoKlIudozzKQTHVZCAAzNlUEHVAoBygGQR70ZCsACkqGBEpxgEoAagTbJFCTM0sbTyVkVQBrI2FZQyU4WSgbGMNFkZDQoBsARACxocEExiMlV+MwAnjgolUEDhlg4QNMUeDobD4UZxrZMGiogBHBhIWSYOi+GikWzQBzOCpmJAgp6EuBWHCqRGPax4tzitxAA" rel="nofollow noreferrer">another example using the domMax parameter. Vega-Lite parameters are translated to Vega signals.

It looks like you are trying to derive the value of your parameter/signal from the data. I am not sure you can do that in Vega-Lite.

On the other hand it's very easy in Vega. For example you could use the extent transform:
https://vega.github.io/vega/docs/transforms/extent/

Side comment - while Vega specifications are more verbose you can sometimes find their primitives simpler and a good way to understand how the visualisation works. (You can see compiled Vega in the editor.)


问:
How to Sign In with Twitter using Firebase_Auth with Flutter
How should one program a Sign In with Twitter feature using firebase_auth and Flutter?

I see a few examples using flutter_twitter_login or flutter_twitter, however they use a now Deprecated API and folks complain about Apple Store Rejection.

Firebase Auth offers a TwitterAuthProvider, but the following code remains incomplete:

final AuthCredential credential = TwitterAuthProvider.getCredential(
  authToken: twitterAccessToken,
  authTokenSecret: twitterAccessTokenSecret,
);
final AuthResult result = await auth.signInWithCredential(credential);
```

答:
This worked for me. (Referred from https://firebase.flutter.dev/docs/auth/social#twitter)

```<code>import 'package:twitter_login/twitter_login.dart';

Future<UserCredential> signInWithTwitter() async {
  // Create a TwitterLogin instance
  final twitterLogin = new TwitterLogin(
    apiKey: '<your consumer key>',
    apiSecretKey:' <your consumer secret>',
    redirectURI: '<your_scheme>://'
  );

  // Trigger the sign-in flow
  final authResult = await twitterLogin.login();

  // Create a credential from the access token
  final twitterAuthCredential = TwitterAuthProvider.credential(
    accessToken: authResult.authToken!,
    secret: authResult.authTokenSecret!,
  );

  // Once signed in, return the UserCredential
  return await FirebaseAuth.instance.signInWithCredential(twitterAuthCredential);
}
</code>```

This wasn't working initially for me.

Things I had to change in order for this to work.

Request for Elevated Permissions in Twitter Developer Portal.

Create a custom scheme (callback URL) and configure the ios/android files accordingly. As given in (https://pub.dev/packages/twitter_login).

Also configure this callback URL in the Twitter dev portal.

Body:
This worked for me. (Referred from https://firebase.flutter.dev/docs/auth/social#twitter)

import 'package:twitter_login/twitter_login.dart';

Future<UserCredential> signInWithTwitter() async {
  // Create a TwitterLogin instance
  final twitterLogin = new TwitterLogin(
    apiKey: '<your consumer key>',
    apiSecretKey:' <your consumer secret>',
    redirectURI: '<your_scheme>://'
  );

  // Trigger the sign-in flow
  final authResult = await twitterLogin.login();

  // Create a credential from the access token
  final twitterAuthCredential = TwitterAuthProvider.credential(
    accessToken: authResult.authToken!,
    secret: authResult.authTokenSecret!,
  );

  // Once signed in, return the UserCredential
  return await FirebaseAuth.instance.signInWithCredential(twitterAuthCredential);
}

This wasn't working initially for me.

Things I had to change in order for this to work.

Request for Elevated Permissions in Twitter Developer Portal.

Create a custom scheme (callback URL) and configure the ios/android files accordingly. As given in (https://pub.dev/packages/twitter_login).

Also configure this callback URL in the Twitter dev portal.


问:
why I get undefined value instead my input value
I'm new in JavaScript and I have a problem, it'll be great if someone could help me.
I'm trying to write something from one
 to h4.
my code is:

function ok() {
  document.getElementById("out").innerHTML = document.getElementById("name").value;
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><label id="label">your text is:</label>
<br>
<input type="text" />
<p id="name" style="font-family: 'Courier New', Courier, monospace;"></p>
<button type="submit" id="click" onclick="ok()">click</button>
<h4 id="out" style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;"></h4></code>```

but when I'm doing it I get undefined.
If someone could help me understand what I'm doing wrong it'll be great.

答:
You are referencing the wrong element. It's trying to get the value of
. But
 has no value.

The id="name" attribute must be in the input element.

In this way:

```<code><input id="name" type="text"/>
<p style="font-family: 'Courier New', Courier, monospace;"></p>
</code>```

Body:
I'm new in JavaScript and I have a problem, it'll be great if someone could help me.
I'm trying to write something from one
 to h4.
my code is:

function ok() {
  document.getElementById("out").innerHTML = document.getElementById("name").value;
}

your text is:

<input type="text" />

<button type="submit" id="click" onclick="ok()">click</button>

but when I'm doing it I get undefined.
If someone could help me understand what I'm doing wrong it'll be great.

Body:
You are referencing the wrong element. It's trying to get the value of <p>. But <p> has no value.

The id="name" attribute must be in the input element.

In this way:

<input id="name" type="text"/>
<p style="font-family: 'Courier New', Courier, monospace;"></p>


问:
Eslint not showing warnings - React
On my new project, ESLint is not outputting warnings like before, I'm using VSCode. If I have an unsed var somewhere in my code, it doesn't show the warning in the  terminal output anymore. Only in the problem tab.

Here's my eslint config file:

.eslintrc.json

```<code>{
  "env": {
      "browser": true,
      "es6": true
  },
  "extends": [
      "plugin:react/recommended",
      "airbnb-typescript",
      "plugin:@typescript-eslint/recommended",
      "plugin:@typescript-eslint/eslint-recommended",
      "prettier/@typescript-eslint",
      "plugin:prettier/recommended"
  ],
  "globals": {
      "Atomics": "readonly",
      "SharedArrayBuffer": "readonly"
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
      "ecmaFeatures": {
          "jsx": true
      },
      "ecmaVersion": 2018,
      "sourceType": "module",
      "project": "./tsconfig.json"
  },
  "plugins": [
      "react",
      "react-hooks",
      "@typescript-eslint",
      "prettier"
  ],
  "rules": {
    "prettier/prettier": "error",
    "react-hooks/rules-of-hooks":"error",
    "react-hooks/exhaustive-deps": "warn",
    "camelcase": "off",
    "@typescript-eslint/camelcase": "off",
    "react/jsx-filename-extension": [1, {"extensions": [".tsx"]}],
    "import/prefer-default-export": "off",
    "react/jsx-one-expression-per-line": "off",
    "react/jsx-props-no-spreading": "off",
    "react/prop-types": "off",
    "no-unused-expressions": "off",
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/explicit-function-return-type": [
      "error",
      {
        "allowExpressions": true
      }
    ],
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "ts": "never",
        "tsx": "never"
      }
    ],
    "semi":"off"
  },
  "settings": {
    "import/resolver": {
      "typescript": {}
    }
  }
}

</code>```

and Here is my package.json devDependencies:

package.json

```<code>  "dependencies": {
    ...,
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "^4.0.2"
  }
  "devDependencies": {
    "@types/react-router-dom": "^5.1.7",
    "@types/styled-components": "^5.1.7",
    "@typescript-eslint/eslint-plugin": "^4.14.2",
    "@typescript-eslint/parser": "^4.14.2",
    "eslint": "^7.19.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-airbnb-typescript": "^12.3.1",
    "eslint-config-prettier": "^7.2.0",
    "eslint-import-resolver-typescript": "^2.3.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "husky": "^5.0.8",
    "prettier": "^2.2.1",
    "prettier-eslint-cli": "^5.0.0",
    "typescript": "^4.1.3"
  }
</code>```

答:
Some tips to get it work

Check eslint extension, it should be installed and enabled.

Set these values in your VSCode configs ctrl + ,:

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.alwaysShowStatus": true
```

Sometimes it requires restarting eslint server after config changes applied.

Press Ctrl + Shift + p (⇧ ⌘ P) to open VSCode command palette menu

Type restart

Select ESLint: Restart ESLint Server

Or just restart VSCode.

Title: Eslint not showing warnings - React

Body:
On my new project, ESLint is not outputting warnings like before, I'm using VSCode. If I have an unsed var somewhere in my code, it doesn't show the warning in the  terminal output anymore. Only in the problem tab.

Here's my eslint config file:

.eslintrc.json

{
  "env": {
      "browser": true,
      "es6": true
  },
  "extends": [
      "plugin:react/recommended",
      "airbnb-typescript",
      "plugin:@typescript-eslint/recommended",
      "plugin:@typescript-eslint/eslint-recommended",
      "prettier/@typescript-eslint",
      "plugin:prettier/recommended"
  ],
  "globals": {
      "Atomics": "readonly",
      "SharedArrayBuffer": "readonly"
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
      "ecmaFeatures": {
          "jsx": true
      },
      "ecmaVersion": 2018,
      "sourceType": "module",
      "project": "./tsconfig.json"
  },
  "plugins": [
      "react",
      "react-hooks",
      "@typescript-eslint",
      "prettier"
  ],
  "rules": {
    "prettier/prettier": "error",
    "react-hooks/rules-of-hooks":"error",
    "react-hooks/exhaustive-deps": "warn",
    "camelcase": "off",
    "@typescript-eslint/camelcase": "off",
    "react/jsx-filename-extension": [1, {"extensions": [".tsx"]}],
    "import/prefer-default-export": "off",
    "react/jsx-one-expression-per-line": "off",
    "react/jsx-props-no-spreading": "off",
    "react/prop-types": "off",
    "no-unused-expressions": "off",
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/explicit-function-return-type": [
      "error",
      {
        "allowExpressions": true
      }
    ],
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "ts": "never",
        "tsx": "never"
      }
    ],
    "semi":"off"
  },
  "settings": {
    "import/resolver": {
      "typescript": {}
    }
  }
}

and Here is my package.json devDependencies:

package.json

  "dependencies": {
    ...,
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "^4.0.2"
  }
  "devDependencies": {
    "@types/react-router-dom": "^5.1.7",
    "@types/styled-components": "^5.1.7",
    "@typescript-eslint/eslint-plugin": "^4.14.2",
    "@typescript-eslint/parser": "^4.14.2",
    "eslint": "^7.19.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-airbnb-typescript": "^12.3.1",
    "eslint-config-prettier": "^7.2.0",
    "eslint-import-resolver-typescript": "^2.3.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "husky": "^5.0.8",
    "prettier": "^2.2.1",
    "prettier-eslint-cli": "^5.0.0",
    "typescript": "^4.1.3"
  }

Body:
Some tips to get it work

Check eslint extension, it should be installed and enabled.

Set these values in your VSCode configs ctrl + ,:

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.alwaysShowStatus": true

Sometimes it requires restarting eslint server after config changes applied.

Press Ctrl + Shift + p (⇧ ⌘ P) to open VSCode command palette menu

Type restart

Select ESLint: Restart ESLint Server

Or just restart VSCode.


问:
Npm running version 2.15.12 instead of the latest version 6 in windows
when i run npx create-react-app my-app i get an Npm version 2.15.12 warning

However when I check node -v i get 14.2.1 and npm -v I get 6.4.1

but when i install my app I get an error / warning.

You are using npm 2.15.12 so the project will be bootstrapped with an old unsupported version of tools.
Please update to npm 6 or higher for a better, fully supported experience.

I have done the following:

Uninstalled and reinstalled nodejs

deleted the npm_cache  and npm folder from ..AppData\Roaming

Deleted npm from ..programmes\node js

I have also tried using Windows power shell.

Someone help please.

答:
I got the same issue and solved it by this command in the Windows PowerShell:

```<code>npm install npm@7
</code>```

I hope it helps someone as well!

Body:
I got the same issue and solved it by this command in the Windows PowerShell:

npm install npm@7

I hope it helps someone as well!