问:
align different image ridimension and delete margin
I should like know how I can fix different image alignment and remove margin.  I want to align items in the center but there is a part of iamge that I think is margin that I can't remove. The part I want remove is the orange zone

.content {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px;
  width: 100%;
}

.content__row {
  display: flex;
  width: 100%;
  margin: 5px 0;
}

.content__img {
  display: flex;
  width: 80%;
  height: 90%;
  padding: 0%;
}

.content__a {
  text-decoration: none;
  align-items: center;
}

.content__p {
  align-items: center;
  text-align: center;
  width: 80%;
  font-size: 35px;
  font-weight: 900;
  font-family: 'Ubuntu', sans-serif;
  color: rgb(39, 39, 255);
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="content">
  <div class="content__row">

      <img class="content__img" src="https://via.placeholder.com/300x600" alt="">
      <p class="content__p">COMPILARE
        <br>
        <span class="content__span">730?</span>
      </p>

      <img class="content__img" src="https://via.placeholder.com/300x600" alt="">
      <p class="content__p">CALCOLARE
        <br>
        <span class="content__span">L'ISEE?</span>
      </p>

      <img class="content__img" src="https://via.placeholder.com/300x600" alt="">
      <p class="content__p">CALCOLARE
        <br>
        <span class="content__span">L'ISEE?</span>
      </p>

  </div>
</div></code>```

答:
Removed so many unnecessary things from CSS and added a couple.
Basically, see the comments in CSS

* {
  margin: 0;
  box-sizing: border-box;
}

.content {
  display: flex;
  padding: 20px;
}

.content__row {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 20px; /* add */
}

.content__a {
  text-decoration: none;
  flex: 1;
}

.content__img {
  height: 200px;     /* add */
  width: 100%;       /* add */
  object-fit: cover; /* add */
}

.content__p {
  text-align: center;
  font: 900 normal 1rem/1.5 Ubuntu, sans-serif;
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="content">
  <div class="content__row">

      <img class="content__img" src="http://placekitten.com/300/300" alt="">
      <p class="content__p">COMPILARE<br><span class="content__span">730?</span></p>

      <img class="content__img" src="http://placekitten.com/300/300" alt="">
      <p class="content__p">CALCOLARE<br><span class="content__span">L'ISEE?</span></p>

      <img class="content__img" src="http://placekitten.com/300/300" alt="">
      <p class="content__p">CALCOLARE<br><span class="content__span">L'ISEE?</span></p>

  </div>
</div></code>```

Body:
I should like know how I can fix different image alignment and remove margin.  I want to align items in the center but there is a part of iamge that I think is margin that I can't remove. The part I want remove is the orange zone

.content {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px;
  width: 100%;
}

.content__row {
  display: flex;
  width: 100%;
  margin: 5px 0;
}

.content__img {
  display: flex;
  width: 80%;
  height: 90%;
  padding: 0%;
}

.content__a {
  text-decoration: none;
  align-items: center;
}

.content__p {
  align-items: center;
  text-align: center;
  width: 80%;
  font-size: 35px;
  font-weight: 900;
  font-family: 'Ubuntu', sans-serif;
  color: rgb(39, 39, 255);
}

COMPILARE

        730?

CALCOLARE

        L'ISEE?

CALCOLARE

        L'ISEE?

Body:
Removed so many unnecessary things from CSS and added a couple.
Basically, see the comments in CSS

* {
  margin: 0;
  box-sizing: border-box;
}

.content {
  display: flex;
  padding: 20px;
}

.content__row {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 20px; /* add */
}

.content__a {
  text-decoration: none;
  flex: 1;
}

.content__img {
  height: 200px;     /* add */
  width: 100%;       /* add */
  object-fit: cover; /* add */
}

.content__p {
  text-align: center;
  font: 900 normal 1rem/1.5 Ubuntu, sans-serif;
}

<div class="content">
  <div class="content__row">
    <a class="content__a" href="#">
      <img class="content__img" src="http://placekitten.com/300/300" alt="">
      <p class="content__p">COMPILARE<br><span class="content__span">730?</span></p>
    </a>
    <a class="content__a" href="#">
      <img class="content__img" src="http://placekitten.com/300/300" alt="">
      <p class="content__p">CALCOLARE<br><span class="content__span">L'ISEE?</span></p>
    </a>
    <a class="content__a" href="#">
      <img class="content__img" src="http://placekitten.com/300/300" alt="">
      <p class="content__p">CALCOLARE<br><span class="content__span">L'ISEE?</span></p>
    </a>
  </div>
</div>


来源: stackexchange

问:
Transformers: How to use CUDA for inferencing?
I have fine-tuned my models with GPU but inferencing process is very slow, I think this is because inferencing uses CPU by default. Here is my inferencing code:

```<code>txt = "This was nice place"
model = transformers.BertForSequenceClassification.from_pretrained(model_path, num_labels=24)
tokenizer = transformers.BertTokenizer.from_pretrained('TurkuNLP/bert-base-finnish-cased-v1')
encoding = tokenizer.encode_plus(txt, add_special_tokens = True, truncation = True, padding = "max_length", return_attention_mask = True, return_tensors = "pt")
output = model(**encoding)
output = output.logits.softmax(dim=-1).detach().cpu().flatten().numpy().tolist()
</code>```

Here is my second inferencing code, which is using pipeline (for different model):

```<code>classifier = transformers.pipeline("sentiment-analysis", model="distilbert-base-uncased-finetuned-sst-2-english")
result = classifier(txt)
</code>```

How can I force transformers library to do faster inferencing on GPU? I have tried adding model.to(torch.device("cuda")) but that throws error:

```<code>Expected all tensors to be on the same device, but found at least two devices, cuda:0 and cpu
</code>```

I suppose the problem is related to the data not being sent to GPU. There is a similar issue here: pytorch summary fails with huggingface model II: Expected all tensors to be on the same device, but found at least two devices, cuda:0 and cpu

How would I send data to GPU with and without pipeline? Any advise is highly appreciated.

答:
You should transfer your input to CUDA as well before performing the inference:

```<code>device = torch.device('cuda')

# transfer model
model.to(device)

# define input and transfer to device
encoding = tokenizer.encode_plus(txt,
     add_special_tokens=True,
     truncation=True,
     padding="max_length",
     return_attention_mask=True,
     return_tensors="pt")

encoding = encoding.to(device)

# inference
output = model(**encoding)
</code>```

Be aware nn.Module.to is in-place, while torch.Tensor.to is not (it does a copy!).

ContentLicense: CC BY-SA 4.0

Body:
I have fine-tuned my models with GPU but inferencing process is very slow, I think this is because inferencing uses CPU by default. Here is my inferencing code:

txt = "This was nice place"
model = transformers.BertForSequenceClassification.from_pretrained(model_path, num_labels=24)
tokenizer = transformers.BertTokenizer.from_pretrained('TurkuNLP/bert-base-finnish-cased-v1')
encoding = tokenizer.encode_plus(txt, add_special_tokens = True, truncation = True, padding = "max_length", return_attention_mask = True, return_tensors = "pt")
output = model(**encoding)
output = output.logits.softmax(dim=-1).detach().cpu().flatten().numpy().tolist()

Here is my second inferencing code, which is using pipeline (for different model):

classifier = transformers.pipeline("sentiment-analysis", model="distilbert-base-uncased-finetuned-sst-2-english")
result = classifier(txt)

How can I force transformers library to do faster inferencing on GPU? I have tried adding model.to(torch.device("cuda")) but that throws error:

Expected all tensors to be on the same device, but found at least two devices, cuda:0 and cpu

I suppose the problem is related to the data not being sent to GPU. There is a similar issue here: pytorch summary fails with huggingface model II: Expected all tensors to be on the same device, but found at least two devices, cuda:0 and cpu

How would I send data to GPU with and without pipeline? Any advise is highly appreciated.

Body:
You should transfer your input to CUDA as well before performing the inference:

device = torch.device('cuda')

# transfer model
model.to(device)

# define input and transfer to device
encoding = tokenizer.encode_plus(txt,
     add_special_tokens=True,
     truncation=True,
     padding="max_length",
     return_attention_mask=True,
     return_tensors="pt")

encoding = encoding.to(device)

# inference
output = model(**encoding)

Be aware nn.Module.to is in-place, while torch.Tensor.to is not (it does a copy!).


问:
WooCommerce Checkout add default value to Billing fields if custom checkbox checked
I've already created a custom checkbox field in the checkout page with a  name of billng_anonymouse, now I want when a customer checks this checkbox it should add a default value to billing_first_name and billing_last_name.

currently, I'm using this function to add a default value for billing fields

```<code>function zk_set_checkout_field_input_value_default($fields) {
    $fields['billing']['billing_first_name']['default'] = 'First';
    $fields['billing']['billing_last_name']['default'] = 'Last';
    return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'zk_set_checkout_field_input_value_default' );
</code>```

but the problem is the default values are always there, how to show them using an IF function only if the checkbox is checked.

答:
You can use custom_attributes in woocommerce_checkout_fields so you have a value stored in attribute to use on checkbox check and uncheck. try the below code.

```<code>function zk_set_checkout_field_input_value_default($fields) {
    $fields['billing']['billing_first_name']['custom_attributes'] = array( 'data-default' => 'First' );
    $fields['billing']['billing_last_name']['custom_attributes'] = array('data-default'=>'Last' );
    return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'zk_set_checkout_field_input_value_default' );

function add_custom_checkout_field( $checkout ) {
    $current_user = wp_get_current_user();
    $billng_anonymouse = $current_user->billng_anonymouse;
    woocommerce_form_field( 'billng_anonymouse', array(
        'type'  => 'checkbox',
        'class' => array( 'form-row-wide' ),
        'label' => 'Billng anonymouse'
    ), $checkout->get_value( 'billng_anonymouse' ) );
}
add_action( 'woocommerce_before_checkout_billing_form', 'add_custom_checkout_field' );

function add_custom_js(){
    ?>
    <script type="text/javascript">
        (function($){
            $(document).on('change', '#billng_anonymouse', function(event) {
                if( $(this).is(':checked') ){
                    $('#billing_first_name').val($('#billing_first_name').data('default'));
                    $('#billing_last_name').val($('#billing_last_name').data('default'));
                }else{
                    $('#billing_first_name').val('');
                    $('#billing_last_name').val('');
                }
            });
        })(jQuery);
    </script>
    <?php
}
add_action( 'woocommerce_after_checkout_form', 'add_custom_js', 10, 1 );
</code>```

Tested and works.

Body:
I've already created a custom checkbox field in the checkout page with a  name of billng_anonymouse, now I want when a customer checks this checkbox it should add a default value to billing_first_name and billing_last_name.

currently, I'm using this function to add a default value for billing fields

function zk_set_checkout_field_input_value_default($fields) {
    $fields['billing']['billing_first_name']['default'] = 'First';
    $fields['billing']['billing_last_name']['default'] = 'Last';
    return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'zk_set_checkout_field_input_value_default' );

but the problem is the default values are always there, how to show them using an IF function only if the checkbox is checked.

Body:
You can use custom_attributes in woocommerce_checkout_fields so you have a value stored in attribute to use on checkbox check and uncheck. try the below code.

function zk_set_checkout_field_input_value_default($fields) {
    $fields['billing']['billing_first_name']['custom_attributes'] = array( 'data-default' => 'First' );
    $fields['billing']['billing_last_name']['custom_attributes'] = array('data-default'=>'Last' );
    return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'zk_set_checkout_field_input_value_default' );

function add_custom_checkout_field( $checkout ) {
    $current_user = wp_get_current_user();
    $billng_anonymouse = $current_user->billng_anonymouse;
    woocommerce_form_field( 'billng_anonymouse', array(
        'type'  => 'checkbox',
        'class' => array( 'form-row-wide' ),
        'label' => 'Billng anonymouse'
    ), $checkout->get_value( 'billng_anonymouse' ) );
}
add_action( 'woocommerce_before_checkout_billing_form', 'add_custom_checkout_field' );

function add_custom_js(){
    ?>
    <script type="text/javascript">
        (function($){
            $(document).on('change', '#billng_anonymouse', function(event) {
                if( $(this).is(':checked') ){
                    $('#billing_first_name').val($('#billing_first_name').data('default'));
                    $('#billing_last_name').val($('#billing_last_name').data('default'));
                }else{
                    $('#billing_first_name').val('');
                    $('#billing_last_name').val('');
                }
            });
        })(jQuery);
    </script>
    <?php
}
add_action( 'woocommerce_after_checkout_form', 'add_custom_js', 10, 1 );

Tested and works.


问:
divide a list of positive integers by the length of digits
I would like to divide a list of positive integers by the length of digits.

For example, int_list = [1,3,13,888,1004]
-> [1,3] , [13] , [888] , [1004]

I have implemented below:

def seperate_by_digit(int_list):
    len_set = set()  # track how many digits we have

    int_dict = {}  # key : len of digits  / val : list of integer
    for int_ele in int_list:
        n = len(str(int_ele))
        if n not in len_set:
            int_dict[n] = [int_ele]
            len_set.add(n)
        else:
            sub_int_list = int_dict[n]
            sub_int_list.append(int_ele)
            int_dict[n] = sub_int_list
    return int_dict
```

Is there any better, cleaner way to complete this task?

答:
To get the length of the digits, it simpler to use the string representation.

Assuming you don't have negative numbers, one solution is to first sort your list, then groupby the list based on length.

from itertools import groupby

def split_list(lst):
    return [list(g) for _, g in
            groupby(sorted(lst), key=lambda x: len(str(x)))]

lst = [1, 3, 13, 888, 1004]

print(split_list(lst))
```
<p>output:</p>
<pre class="lang-none prettyprint-override"><code>[[1, 3], [13], [888], [1004]]
</code>```

Body:
I would like to divide a list of positive integers by the length of digits.

For example, int_list = [1,3,13,888,1004]
-> [1,3] , [13] , [888] , [1004]

I have implemented below:

def seperate_by_digit(int_list):
    len_set = set()  # track how many digits we have

    int_dict = {}  # key : len of digits  / val : list of integer
    for int_ele in int_list:
        n = len(str(int_ele))
        if n not in len_set:
            int_dict[n] = [int_ele]
            len_set.add(n)
        else:
            sub_int_list = int_dict[n]
            sub_int_list.append(int_ele)
            int_dict[n] = sub_int_list
    return int_dict

Is there any better, cleaner way to complete this task?

Body:
To get the length of the digits, it simpler to use the string representation.

Assuming you don't have negative numbers, one solution is to first sort your list, then groupby the list based on length.

from itertools import groupby

def split_list(lst):
    return [list(g) for _, g in
            groupby(sorted(lst), key=lambda x: len(str(x)))]

lst = [1, 3, 13, 888, 1004]

print(split_list(lst))

output:

[[1, 3], [13], [888], [1004]]


问:
Flutter: Getting error in List when combining
Iam trying to shorten these steps

```<code>List<String> questionText = [
    'You can lead a cow down stairs but not up stairs.',
];
</code>```
```<code>List<bool> questionAnswer = [
    false,
</code>```

Combining these 2 List to single in another class but getting error in 'Question'

```<code>class Question {
  String questionText;
  bool questionAnswer;

  Question({required String q, required bool a}) {
    questionText = q;
    questionAnswer = a;
  }
}
</code>```

//Error Here Error Img

答:
It's written like this in dart.

```<code>class Question {
  String questionText;
  bool questionAnswer;

  Question({required this.questionText, required this.questionAnswer});
}
</code>```

Check: https://dart.dev/guides/language/language-tour#constructors

Create an object like so:

```<code>Question question = Question(
   questionText: "You can lead a cow down stairs but not upstairs",
   questionAnswer: false,
);
</code>```

Body:
Iam trying to shorten these steps

List<String> questionText = [
    'You can lead a cow down stairs but not up stairs.',
];

List<bool> questionAnswer = [
    false,

Combining these 2 List to single in another class but getting error in 'Question'

class Question {
  String questionText;
  bool questionAnswer;

  Question({required String q, required bool a}) {
    questionText = q;
    questionAnswer = a;
  }
}

//Error Here Error Img

Body:
It's written like this in dart.

class Question {
  String questionText;
  bool questionAnswer;

  Question({required this.questionText, required this.questionAnswer});
}

Check: https://dart.dev/guides/language/language-tour#constructors

Create an object like so:

Question question = Question(
   questionText: "You can lead a cow down stairs but not upstairs",
   questionAnswer: false,
);


问:
How to set focus on a view when a layout is created and displayed?
Currently, I have a layout which contains a Button, a TextView and an EditText. When the layout is displayed, the focus will be automatically put on the EditText, which will trigger the keyboard to show up on Android phone. It is not what I want. Is there any way that I can set the focus on TextView or on nothing when a layout is displayed?

答:
You can use the following Kotlin extension

```<code>fun View.focusAndShowKeyboard() {
  /**
   * This is to be called when the window already has focus.
   */
  fun View.showTheKeyboardNow() {
    if (isFocused) {
      post {
        // We still post the call, just in case we are being notified of the windows focus
        // but InputMethodManager didn't get properly setup yet.
        val imm = context.getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
        imm.showSoftInput(this, InputMethodManager.SHOW_IMPLICIT)
      }
    }
  }

  requestFocus()

  if (hasWindowFocus()) {
    // No need to wait for the window to get focus.
    showTheKeyboardNow()
  } else {
    // We need to wait until the window gets focus.
    viewTreeObserver.addOnWindowFocusChangeListener(
      object : ViewTreeObserver.OnWindowFocusChangeListener {
        override fun onWindowFocusChanged(hasFocus: Boolean) {
          // This notification will arrive just before the InputMethodManager gets set up.
          if (hasFocus) {
            this@focusAndShowKeyboard.showTheKeyboardNow()
            // It’s very important to remove this listener once we are done.
            viewTreeObserver.removeOnWindowFocusChangeListener(this)
          }
        }
      }
    )
  }
}
</code>```

And just call your view.focusAndShowKeyboard() in override fun onViewCreated(..) or override fun OnCreate(..)

PS: For hiding Views use the following extension

```<code>fun View.hideKeyboard() {
  val imm = context.getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
  imm.hideSoftInputFromWindow(windowToken, 0)
}
</code>```

Make sure the views are focusable before that using the following android XML attributes, u can also do it programmatically

```<code>android:focusableInTouchMode="true"
android:focusable="true"
</code>```

ContentLicense: CC BY-SA 3.0

Body:
You can use the following Kotlin extension

fun View.focusAndShowKeyboard() {
  /**
   * This is to be called when the window already has focus.
   */
  fun View.showTheKeyboardNow() {
    if (isFocused) {
      post {
        // We still post the call, just in case we are being notified of the windows focus
        // but InputMethodManager didn't get properly setup yet.
        val imm = context.getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
        imm.showSoftInput(this, InputMethodManager.SHOW_IMPLICIT)
      }
    }
  }

  requestFocus()

  if (hasWindowFocus()) {
    // No need to wait for the window to get focus.
    showTheKeyboardNow()
  } else {
    // We need to wait until the window gets focus.
    viewTreeObserver.addOnWindowFocusChangeListener(
      object : ViewTreeObserver.OnWindowFocusChangeListener {
        override fun onWindowFocusChanged(hasFocus: Boolean) {
          // This notification will arrive just before the InputMethodManager gets set up.
          if (hasFocus) {
            this@focusAndShowKeyboard.showTheKeyboardNow()
            // It’s very important to remove this listener once we are done.
            viewTreeObserver.removeOnWindowFocusChangeListener(this)
          }
        }
      }
    )
  }
}

And just call your view.focusAndShowKeyboard() in override fun onViewCreated(..) or override fun OnCreate(..)

PS: For hiding Views use the following extension

fun View.hideKeyboard() {
  val imm = context.getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
  imm.hideSoftInputFromWindow(windowToken, 0)
}

Make sure the views are focusable before that using the following android XML attributes, u can also do it programmatically

android:focusableInTouchMode="true"
android:focusable="true"


问:
How to stretch HTML inputs across the entire table cell
I'm making a calculator and I cant seem to figure out the way to make a html button stretch across the entire cell. Best I got was to get the button to stretch across the cell only horizontally. Why does width:100% work in my .buttons class but when I add height:100% it does nothing at all?

body {
  background-image: url("images/background.jpg");
  background-color: #cccccc;
}

.square {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 900px;
  width: 1200px;
  background-color: rgb(255, 255, 255);
  outline: 5px solid rgb(0, 0, 0);
}

.calculator {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 700px;
  width: 500px;
  background-color: rgb(255, 255, 255);
  outline: 5px solid rgb(0, 0, 0);
  border-radius: 5px;
}

input {
  width: 100%;
  height: 100%
}

table {
  width: 501px;
  height: 700px;
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><body>
  <div class="square">
    <div class="calculator">
      <form method="post">
        <table border="1" width=100%>
          <tr>
            <td colspan="4">
              <input type="text" id="inputbox" />
            </td>
          </tr>
          <tr>
            <td colspan="3"><input type="submit" name="reset" value="RESET" /></td>
            <td><input type="submit" name="divide" value="/" /></td>
          </tr>
          <tr>
            <td><input type="submit" name="7" value="7" /></td>
            <td><input type="submit" name="8" value="8" /></td>
            <td><input type="submit" name="9" value="9" /></td>
            <td><input type="submit" name="multiply" value="*" /></td>
          </tr>
          <tr>
            <td><input type="submit" name="4" value="4" /></td>
            <td><input type="submit" name="5" value="5" /></td>
            <td><input type="submit" name="6" value="6" /></td>
            <td><input type="submit" name="minus" value="-" /></td>
          </tr>
          <tr>
            <td><input type="submit" name="1" class="buttons" value="1" /></td>
            <td><input type="submit" name="2" value="2" /></td>
            <td><input type="submit" name="3" value="3" /></td>
            <td><input type="submit" name="add" value="+" /></td>
          </tr>
          <tr>
            <td colspan="2"><input type="submit" name="0" value="0" /></td>
            <td><input type="submit" name="point" value="." /></td>
            <td><input type="submit" name="result" value="=" /></td>
          </tr>
        </table>
      </form>
    </div>
  </div>
</body></code>```

答:
Use width: 100%; and height: 100% for input (buttons).
For safari and firefox add -webkit-appearance: none;

body {
  background-image: url("images/background.jpg");
  background-color: #cccccc;
}
.square {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 900px;
  width: 1200px;
  background-color: rgb(255, 255, 255);
  outline: 5px solid rgb(0, 0, 0);
}
.calculator {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 700px;
  width: 500px;
  background-color: rgb(255, 255, 255);
  outline: 5px solid rgb(0, 0, 0);
  border-radius: 5px;
}

table {
  width: 501px;
  height: 700px;
}
.buttons {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  text-align: center;
}
#inputbox{
background: #6b6b6b;
color:black;
}
input{
width:100%;
height:100%;
font-size: 22px;
outline: none;
border:0;
background: #3f3f3f;
cursor: pointer;
color: white;
-webkit-appearance: none;
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<div class="square">
  <div class="calculator">
    <table border="1" width=100%>
      <tr>
        <td colspan="4">
          <input type="text" id="inputbox" />
        </td>
      </tr>
      <tr>
        <td colspan="3"><input type="submit" name="display" value="RESET" /></td>
        <td><input type="submit" value="/" /></td>
      </tr>
      <tr>
        <td><input type="submit" value="7" /></td>
        <td><input type="submit" value="8" /></td>
        <td><input type="submit" value="9" /></td>
        <td><input type="submit" value="*" /></td>
      </tr>
      <tr>
        <td><input type="submit" value="4" /></td>
        <td><input type="submit" value="5" /></td>
        <td><input type="submit" value="6" /></td>
        <td><input type="submit" value="-" /></td>
      </tr>
      <tr>
        <td><input type="submit" value="1" /></td>
        <td><input type="submit" value="2" /></td>
        <td><input type="submit" value="3" /></td>
        <td><input type="submit" value="+" /></td>
      </tr>
      <tr>
        <td colspan="2"><input type="submit" value="0" /></td>
        <td><input type="submit" value="." /></td>
        <td><input type="submit" value="=" /></td>
      </tr>
    </table>
  </div>
</div></code>```

snippet codepen

Body:
I'm making a calculator and I cant seem to figure out the way to make a html button stretch across the entire cell. Best I got was to get the button to stretch across the cell only horizontally. Why does width:100% work in my .buttons class but when I add height:100% it does nothing at all?

body {
  background-image: url("images/background.jpg");
  background-color: #cccccc;
}

.square {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 900px;
  width: 1200px;
  background-color: rgb(255, 255, 255);
  outline: 5px solid rgb(0, 0, 0);
}

.calculator {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 700px;
  width: 500px;
  background-color: rgb(255, 255, 255);
  outline: 5px solid rgb(0, 0, 0);
  border-radius: 5px;
}

input {
  width: 100%;
  height: 100%
}

table {
  width: 501px;
  height: 700px;
}

      <form method="post">

              <input type="text" id="inputbox" />

            <input type="submit" name="reset" value="RESET" />
            <input type="submit" name="divide" value="/" />

            <input type="submit" name="7" value="7" />
            <input type="submit" name="8" value="8" />
            <input type="submit" name="9" value="9" />
            <input type="submit" name="multiply" value="*" />

            <input type="submit" name="4" value="4" />
            <input type="submit" name="5" value="5" />
            <input type="submit" name="6" value="6" />
            <input type="submit" name="minus" value="-" />

            <input type="submit" name="1" class="buttons" value="1" />
            <input type="submit" name="2" value="2" />
            <input type="submit" name="3" value="3" />
            <input type="submit" name="add" value="+" />

            <input type="submit" name="0" value="0" />
            <input type="submit" name="point" value="." />
            <input type="submit" name="result" value="=" />

      </form>

Body:
Use width: 100%; and height: 100% for input (buttons).
For safari and firefox add -webkit-appearance: none;

body {
  background-image: url("images/background.jpg");
  background-color: #cccccc;
}
.square {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 900px;
  width: 1200px;
  background-color: rgb(255, 255, 255);
  outline: 5px solid rgb(0, 0, 0);
}
.calculator {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 700px;
  width: 500px;
  background-color: rgb(255, 255, 255);
  outline: 5px solid rgb(0, 0, 0);
  border-radius: 5px;
}

table {
  width: 501px;
  height: 700px;
}
.buttons {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  text-align: center;
}
#inputbox{
background: #6b6b6b;
color:black;
}
input{
width:100%;
height:100%;
font-size: 22px;
outline: none;
border:0;
background: #3f3f3f;
cursor: pointer;
color: white;
-webkit-appearance: none;
}

<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<div class="square">
  <div class="calculator">
    <table border="1" width=100%>
      <tr>
        <td colspan="4">
          <input type="text" id="inputbox" />
        </td>
      </tr>
      <tr>
        <td colspan="3"><input type="submit" name="display" value="RESET" /></td>
        <td><input type="submit" value="/" /></td>
      </tr>
      <tr>
        <td><input type="submit" value="7" /></td>
        <td><input type="submit" value="8" /></td>
        <td><input type="submit" value="9" /></td>
        <td><input type="submit" value="*" /></td>
      </tr>
      <tr>
        <td><input type="submit" value="4" /></td>
        <td><input type="submit" value="5" /></td>
        <td><input type="submit" value="6" /></td>
        <td><input type="submit" value="-" /></td>
      </tr>
      <tr>
        <td><input type="submit" value="1" /></td>
        <td><input type="submit" value="2" /></td>
        <td><input type="submit" value="3" /></td>
        <td><input type="submit" value="+" /></td>
      </tr>
      <tr>
        <td colspan="2"><input type="submit" value="0" /></td>
        <td><input type="submit" value="." /></td>
        <td><input type="submit" value="=" /></td>
      </tr>
    </table>
  </div>
</div>

snippet codepen


问:
How to rebuild newlib and newlib-nano of GNU Arm Embedded Toolchain
I downloaded the toolchain “gcc-arm-none-eabi-6-2017-q2-update-win32-sha1.exe” (Windows) from https://developer.arm.com/open-source/gnu-toolchain/gnu-rm/downloads and installed it on my Windows 10 PC.

The installation folder contains a release.txt in “../share/doc/gcc-arm-none-eabi/” which tells:

This release includes the following items:

newlib and newlib-nano :
  git://sourceware.org/git/newlib-cygwin.git commit 0d79b021a4ec4e6b9aa1a9f6db0e29a137005ce7

And also the readme.txt in “../share/doc/gcc-arm-none-eabi/” contains:

C Libraries usage *

This toolchain is released with two prebuilt C libraries based on
  newlib: one is the standard newlib (libc.a) and the other is
  newlib-nano (libc_nano.a) for code size.

Now I want exactly rebuild all the libc.a and libc_nano.a contained in “../arm-none-eabi/lib/thumb”

At the moment I can build on Ubuntu with “gcc-arm-none-eabi-6-2017-q2-update-linux.tar.bz2”

```<code>$ # Downloaded newlib-cygwin (with corresponding hash) into folder newlib-cygwin
$ mkdir build
$ cd build
$ ../newlib-cygwin/configure --target=arm-none-eabi --disable-newlib-supplied-syscalls
$ make
</code>```

How do I have to configure the newlib to build the exact copies of libc.a and for libc_nano.a contained in gcc-arm-none-eabi-6-2017-q2-update-linux.tar.bz2?

```<code>$ # Downloaded newlib-cygwin (with corresponding hash) into folder newlib-cygwin
$ mkdir build
$ cd build
$ ../newlib-cygwin/configure --target=arm-none-eabi --???
$ make
</code>```

答:
Hints about how the compiler was configured are found in:

$COMPILER_PATH/arm-none-eabi/include/newlib.h

$COMPILER_PATH/arm-none-eabi/include/newlib-nano/newlib.h

The #defines there have a close correspondence to the options that were passed to 'configure', when newlib was built.

Body:
I downloaded the toolchain “gcc-arm-none-eabi-6-2017-q2-update-win32-sha1.exe” (Windows) from https://developer.arm.com/open-source/gnu-toolchain/gnu-rm/downloads and installed it on my Windows 10 PC.

The installation folder contains a release.txt in “../share/doc/gcc-arm-none-eabi/” which tells:

This release includes the following items:

newlib and newlib-nano :
  git://sourceware.org/git/newlib-cygwin.git commit 0d79b021a4ec4e6b9aa1a9f6db0e29a137005ce7

And also the readme.txt in “../share/doc/gcc-arm-none-eabi/” contains:

C Libraries usage *

This toolchain is released with two prebuilt C libraries based on
  newlib: one is the standard newlib (libc.a) and the other is
  newlib-nano (libc_nano.a) for code size.

Now I want exactly rebuild all the libc.a and libc_nano.a contained in “../arm-none-eabi/lib/thumb”

At the moment I can build on Ubuntu with “gcc-arm-none-eabi-6-2017-q2-update-linux.tar.bz2”

$ # Downloaded newlib-cygwin (with corresponding hash) into folder newlib-cygwin
$ mkdir build
$ cd build
$ ../newlib-cygwin/configure --target=arm-none-eabi --disable-newlib-supplied-syscalls
$ make

How do I have to configure the newlib to build the exact copies of libc.a and for libc_nano.a contained in gcc-arm-none-eabi-6-2017-q2-update-linux.tar.bz2?

$ # Downloaded newlib-cygwin (with corresponding hash) into folder newlib-cygwin
$ mkdir build
$ cd build
$ ../newlib-cygwin/configure --target=arm-none-eabi --???
$ make


问:
Jetson AGX Xavier python3 matplotlib 3.3.4 installation error
I want to use yolov5 at my Jetson AGX Xavier developer kit and I have to upgrade matplotlib to version 3.3.4 highest version that python3.6 support. I'm using python version 3.6.9(default of Jetson AGX Xavier) and python3.6 support matplotlib version 3.3.4. But I CANNOT upgrade that over 2.1.1(and this version is default also).

I've upgrade setuptools and I tried all command I can.

```<code>$ sudo apt-get install python3-matplotlib
$ python3 -m pip install --upgrade matplotlib
$ python3 -m pip install matplotlib==3.3.4
</code>```

How can I solve this problem?

Error code and image is here.

```<code>Defaulting to user installation because normal site-packages is not writeable
Collecting matplotlib==3.3.4
  Using cached matplotlib-3.3.4.tar.gz (37.9 MB)
  Preparing metadata (setup.py) ... error
  ERROR: Command errored out with exit status -4:
   command: /usr/bin/python3 -c 'import io, os, sys, setuptools, tokenize; sys.argv[0] = '"'"'/tmp/pip-install-tk3o5hkn/matplotlib_53b7f655efb14a6a9d86b117497e1927/setup.py'"'"'; __file__='"'"'/tmp/pip-install-tk3o5hkn/matplotlib_53b7f655efb14a6a9d86b117497e1927/setup.py'"'"';f = getattr(tokenize, '"'"'open'"'"', open)(__file__) if os.path.exists(__file__) else io.StringIO('"'"'from setuptools import setup; setup()'"'"');code = f.read().replace('"'"'\r\n'"'"', '"'"'\n'"'"');f.close();exec(compile(code, __file__, '"'"'exec'"'"'))' egg_info --egg-base /tmp/pip-pip-egg-info-sz1ykkr8
       cwd: /tmp/pip-install-tk3o5hkn/matplotlib_53b7f655efb14a6a9d86b117497e1927/
  Complete output (19 lines):

  Edit setup.cfg to change the build options; suppress output with --quiet.

  BUILDING MATPLOTLIB
    matplotlib: yes [3.3.4]
        python: yes [3.6.9 (default, Dec  8 2021, 21:08:43)  [GCC 8.4.0]]
      platform: yes [linux]
   sample_data: yes [installing]
         tests: no  [skipping due to configuration]
        macosx: no  [Mac OS-X only]

  running egg_info
  creating /tmp/pip-pip-egg-info-sz1ykkr8/matplotlib.egg-info
  writing /tmp/pip-pip-egg-info-sz1ykkr8/matplotlib.egg-info/PKG-INFO
  writing dependency_links to /tmp/pip-pip-egg-info-sz1ykkr8/matplotlib.egg-info/dependency_links.txt
  writing namespace_packages to /tmp/pip-pip-egg-info-sz1ykkr8/matplotlib.egg-info/namespace_packages.txt
  writing requirements to /tmp/pip-pip-egg-info-sz1ykkr8/matplotlib.egg-info/requires.txt
  writing top-level names to /tmp/pip-pip-egg-info-sz1ykkr8/matplotlib.egg-info/top_level.txt
  writing manifest file '/tmp/pip-pip-egg-info-sz1ykkr8/matplotlib.egg-info/SOURCES.txt'
  ----------------------------------------
WARNING: Discarding https://files.pythonhosted.org/packages/22/d4/e7ca532e68a9357742604e1e4ae35d9c09a4a810de39a9d80402bd12f50f/matplotlib-3.3.4.tar.gz#sha256=3e477db76c22929e4c6876c44f88d790aacdf3c3f8f3a90cb1975c0bf37825b0 (from https://pypi.org/simple/matplotlib/) (requires-python:>=3.6). Command errored out with exit status -4: python setup.py egg_info Check the logs for full command output.
ERROR: Could not find a version that satisfies the requirement matplotlib==3.3.4 (from versions: 0.86, 0.86.1, 0.86.2, 0.91.0, 0.91.1, 1.0.1, 1.1.0, 1.1.1, 1.2.0, 1.2.1, 1.3.0, 1.3.1, 1.4.0, 1.4.1rc1, 1.4.1, 1.4.2, 1.4.3, 1.5.0, 1.5.1, 1.5.2, 1.5.3, 2.0.0b1, 2.0.0b2, 2.0.0b3, 2.0.0b4, 2.0.0rc1, 2.0.0rc2, 2.0.0, 2.0.1, 2.0.2, 2.1.0rc1, 2.1.0, 2.1.1, 2.1.2, 2.2.0rc1, 2.2.0, 2.2.2, 2.2.3, 2.2.4, 2.2.5, 3.0.0rc2, 3.0.0, 3.0.1, 3.0.2, 3.0.3, 3.1.0rc1, 3.1.0rc2, 3.1.0, 3.1.1, 3.1.2, 3.1.3, 3.2.0rc1, 3.2.0rc3, 3.2.0, 3.2.1, 3.2.2, 3.3.0rc1, 3.3.0, 3.3.1, 3.3.2, 3.3.3, 3.3.4)
ERROR: No matching distribution found for matplotlib==3.3.4
</code>```

error

答:
I solved this problem!!!!

This line was added to bashrc and the problem was solved.

export OPENBLAS_CORETYPE=ARMV8 python3

Body:
I want to use yolov5 at my Jetson AGX Xavier developer kit and I have to upgrade matplotlib to version 3.3.4 highest version that python3.6 support. I'm using python version 3.6.9(default of Jetson AGX Xavier) and python3.6 support matplotlib version 3.3.4. But I CANNOT upgrade that over 2.1.1(and this version is default also).

I've upgrade setuptools and I tried all command I can.

$ sudo apt-get install python3-matplotlib
$ python3 -m pip install --upgrade matplotlib
$ python3 -m pip install matplotlib==3.3.4

How can I solve this problem?

Error code and image is here.

Defaulting to user installation because normal site-packages is not writeable
Collecting matplotlib==3.3.4
  Using cached matplotlib-3.3.4.tar.gz (37.9 MB)
  Preparing metadata (setup.py) ... error
  ERROR: Command errored out with exit status -4:
   command: /usr/bin/python3 -c 'import io, os, sys, setuptools, tokenize; sys.argv[0] = '"'"'/tmp/pip-install-tk3o5hkn/matplotlib_53b7f655efb14a6a9d86b117497e1927/setup.py'"'"'; __file__='"'"'/tmp/pip-install-tk3o5hkn/matplotlib_53b7f655efb14a6a9d86b117497e1927/setup.py'"'"';f = getattr(tokenize, '"'"'open'"'"', open)(__file__) if os.path.exists(__file__) else io.StringIO('"'"'from setuptools import setup; setup()'"'"');code = f.read().replace('"'"'\r\n'"'"', '"'"'\n'"'"');f.close();exec(compile(code, __file__, '"'"'exec'"'"'))' egg_info --egg-base /tmp/pip-pip-egg-info-sz1ykkr8
       cwd: /tmp/pip-install-tk3o5hkn/matplotlib_53b7f655efb14a6a9d86b117497e1927/
  Complete output (19 lines):

  Edit setup.cfg to change the build options; suppress output with --quiet.

  BUILDING MATPLOTLIB
    matplotlib: yes [3.3.4]
        python: yes [3.6.9 (default, Dec  8 2021, 21:08:43)  [GCC 8.4.0]]
      platform: yes [linux]
   sample_data: yes [installing]
         tests: no  [skipping due to configuration]
        macosx: no  [Mac OS-X only]

  running egg_info
  creating /tmp/pip-pip-egg-info-sz1ykkr8/matplotlib.egg-info
  writing /tmp/pip-pip-egg-info-sz1ykkr8/matplotlib.egg-info/PKG-INFO
  writing dependency_links to /tmp/pip-pip-egg-info-sz1ykkr8/matplotlib.egg-info/dependency_links.txt
  writing namespace_packages to /tmp/pip-pip-egg-info-sz1ykkr8/matplotlib.egg-info/namespace_packages.txt
  writing requirements to /tmp/pip-pip-egg-info-sz1ykkr8/matplotlib.egg-info/requires.txt
  writing top-level names to /tmp/pip-pip-egg-info-sz1ykkr8/matplotlib.egg-info/top_level.txt
  writing manifest file '/tmp/pip-pip-egg-info-sz1ykkr8/matplotlib.egg-info/SOURCES.txt'
  ----------------------------------------
WARNING: Discarding https://files.pythonhosted.org/packages/22/d4/e7ca532e68a9357742604e1e4ae35d9c09a4a810de39a9d80402bd12f50f/matplotlib-3.3.4.tar.gz#sha256=3e477db76c22929e4c6876c44f88d790aacdf3c3f8f3a90cb1975c0bf37825b0 (from https://pypi.org/simple/matplotlib/) (requires-python:>=3.6). Command errored out with exit status -4: python setup.py egg_info Check the logs for full command output.
ERROR: Could not find a version that satisfies the requirement matplotlib==3.3.4 (from versions: 0.86, 0.86.1, 0.86.2, 0.91.0, 0.91.1, 1.0.1, 1.1.0, 1.1.1, 1.2.0, 1.2.1, 1.3.0, 1.3.1, 1.4.0, 1.4.1rc1, 1.4.1, 1.4.2, 1.4.3, 1.5.0, 1.5.1, 1.5.2, 1.5.3, 2.0.0b1, 2.0.0b2, 2.0.0b3, 2.0.0b4, 2.0.0rc1, 2.0.0rc2, 2.0.0, 2.0.1, 2.0.2, 2.1.0rc1, 2.1.0, 2.1.1, 2.1.2, 2.2.0rc1, 2.2.0, 2.2.2, 2.2.3, 2.2.4, 2.2.5, 3.0.0rc2, 3.0.0, 3.0.1, 3.0.2, 3.0.3, 3.1.0rc1, 3.1.0rc2, 3.1.0, 3.1.1, 3.1.2, 3.1.3, 3.2.0rc1, 3.2.0rc3, 3.2.0, 3.2.1, 3.2.2, 3.3.0rc1, 3.3.0, 3.3.1, 3.3.2, 3.3.3, 3.3.4)
ERROR: No matching distribution found for matplotlib==3.3.4

error


问:
How to handle changing props inside a component
I'm making a Form wrapper and I'm wondering how to handle data object prop.

From what I have seen out there, there are some (like FormKit) that mutate the prop object that holds the data. This is not a recommended way according to the official docs. Then there are those (like VueFormulate) that create a shallow copy of the data object before emiting the changed object. To support nested data object you need to deep copy the data object on every change. This seems wasteful with large forms.

Is there an alternative where you don't deep copy an object and you don't mutate object prop?

答:
You could possibly use v-model. as the docs will say, it's shorthand for the child component having a property bound from the parent and when a change event occurs you emit an update event from the child to the parent to have the parent update the property, and the child will subsequently sync to the new value.

ie:

```<code>childComponent *has value change*
  onChange (value) => this.$emit("updateValue", value)

parentComponent *recieved "updateValue" event*
  onUpdateValue(value) => this.parentValue = value

</code>```

Body:
You could possibly use v-model. as the docs will say, it's shorthand for the child component having a property bound from the parent and when a change event occurs you emit an update event from the child to the parent to have the parent update the property, and the child will subsequently sync to the new value.

ie:

childComponent *has value change*
  onChange (value) => this.$emit("updateValue", value)

parentComponent *recieved "updateValue" event*
  onUpdateValue(value) => this.parentValue = value


问:
Create sql query - MSSQL with distinct
I have a table with columns Id,DoucmentId,Name,Created,MinorVersion,MajorVersion

with example data  :

```<code>GUID,1,'document1',GETDATE(),1,0)
GUID,1,'document1',GETDATE(),2,0)
GUID,1,'document1',GETDATE(),1,1)
GUID,2,'document2',GETDATE(),1,0)
</code>```

In query i need get all unique with higest major and minor version :

```<code>GUID,1,'document1',GETDATE(),1,1)
GUID,2,'document2',GETDATE(),1,0)
</code>```

I have this query, but i need return all column in table...

```<code>SELECT DISTINCT
          DocumentId,
          MAX(MajorVersion),
          MAX(MinorVersion)
FROM ComDoc_Document
GROUP BY(DocumentId)
</code>```

Is here some trick to get this?

Thanks for help

EDIT : My configuration is MSSQL 2008R2 standart

答:
```<code>SELECT Id,DocumentId,Name,Created,MinorVersion,MajorVersion
FROM
(
SELECT *
    ,RANK() OVER
    (PARTITION BY DocumentID ORDER BY MajorVersion DESC, MinorVersion DESC) AS 'RANK'
FROM ComDoc_Document
) tmp
WHERE RANK = 1
</code>```

this also has the advantage that if you later decide to retrieve the last two revisions for each document, you just do WHERE RANK <= 2

Title: Create sql query - MSSQL with distinct

Body:
I have a table with columns Id,DoucmentId,Name,Created,MinorVersion,MajorVersion

with example data  :

GUID,1,'document1',GETDATE(),1,0)
GUID,1,'document1',GETDATE(),2,0)
GUID,1,'document1',GETDATE(),1,1)
GUID,2,'document2',GETDATE(),1,0)

In query i need get all unique with higest major and minor version :

GUID,1,'document1',GETDATE(),1,1)
GUID,2,'document2',GETDATE(),1,0)

I have this query, but i need return all column in table...

SELECT DISTINCT
          DocumentId,
          MAX(MajorVersion),
          MAX(MinorVersion)
FROM ComDoc_Document
GROUP BY(DocumentId)

Is here some trick to get this?

Thanks for help

EDIT : My configuration is MSSQL 2008R2 standart

Body:
SELECT Id,DocumentId,Name,Created,MinorVersion,MajorVersion
FROM
(
SELECT *
    ,RANK() OVER
    (PARTITION BY DocumentID ORDER BY MajorVersion DESC, MinorVersion DESC) AS 'RANK'
FROM ComDoc_Document
) tmp
WHERE RANK = 1

this also has the advantage that if you later decide to retrieve the last two revisions for each document, you just do WHERE RANK <= 2


问:
Insert number into livesearch ReactJS
I am working on my first app in ReactJS.
As a beginner I ran into a problem.
My app is phonebook so I have livesearch to display recommended data.
For strings everything works well, but when I want to create option "Search By Number" my app dosen't work. So can you show me what and where should I do to resolve a problem. Problem is in wrong regEx?
I try with this:   const pattern = /^[0-9\b]+$/ , where should I put this?

Thanks for your help!

Error:
TypeError: index.number.match is not a function
(anonymous function)

This is my code:

```<code>import React, {useState, useEffect} from 'react'
import '../CSS/App.css';
import axios from 'axios';

export default function Number() {
    const [numberList, setNumberList] = useState([]);
    const [text, setText] = useState("");
    const [suggestions, setSuggestions] = useState([]);
    const [showNumber, setShowNumber] = useState([]);

    useEffect(() => {
        const loadNumbers = async () => {
            const response = await axios.get("http://localhost:3001/numbers");
            setNumberList(response.data);

        };
        loadNumbers();

    }, [])

    const onChangeHandler = (text) => {
        let matches = [];
        if (text.length > 0 ) {
            matches = numberList.filter((index) => {
                const regex = new RegExp(`${(text)}`, "gi");
                return index.number.match(regex);
            })

        }
        console.log('matches', matches);
        setSuggestions(matches);
        setText(text);

    }
}
</code>```

And this is part of my API:  http://localhost:3001/numbers

```<code>{"id":1,"name":"Voditelj","number":26327,"visible":true,"active":true,"createdAt":"2021-11-12T15:36:51.000Z","updatedAt":"2021-11-12T15:36:51.000Z","DepartmentId":1,"RegionId":1,"Region":{"id":1,"regionTitle":"Firule","createdAt":"2021-10-29T10:11:40.000Z","updatedAt":"2021-10-29T10:11:40.000Z"},"Department":{"id":1,"departmentTitle":"Služba za informatiku","alias":"INF","createdAt":"2021-10-29T10:14:32.000Z","updatedAt":"2021-10-29T10:14:32.000Z","RegionId":1}},{"id":2,"name":"Voditelj","number":26333,"visible":true,"active":true,"createdAt":"2021-11-12T15:37:42.000Z","updatedAt":"2021-11-12T15:37:42.000Z","DepartmentId":2,"RegionId":1,"Region":{"id":1,"regionTitle":"Firule","createdAt":"2021-10-29T10:11:40.000Z","updatedAt":"2021-10-29T10:11:40.000Z"},"Department":{"id":2,"departmentTitle":"Služba za tehničke poslove","alias":"TEH","createdAt":"2021-10-29T10:14:47.000Z","updatedAt":"2021-10-29T10:14:47.000Z","RegionId":1}},{"id":3,"name":"Voditelj","number":27333,"visible":true,"active":true,"createdAt":"2021-11-12T15:37:52.000Z","updatedAt":"2021-11-12T15:37:52.000Z","DepartmentId":3,"RegionId":2,"Region":{"id":2,"regionTitle":"Križine","createdAt":"2021-10-29T10:11:46.000Z","updatedAt":"2021-10-29T10:11:46.000Z"},"Department":{"id":3,"departmentTitle":"Služba za tehničke poslove","alias":"TEH","createdAt":"2021-10-29T10:14:51.000Z","updatedAt":"2021-10-29T12:20:43.000Z","RegionId":2}}
</code>```

答:
So I found a mistake. Stupid mistake.</p>
```<code>const onChangeHandler = (text) => {
        let matches = [];

        if (text.length > 0 ) {
            matches = numberList.filter((index) => {
                const regex = new RegExp(`${(text)}`, "gi");
                return index.number.toString().match(regex); //toString has been missing
            })

        }
        console.log('matches', matches);
        setSuggestions(matches);
        setText(text);

    }
</code>```

Title: Insert number into livesearch ReactJS

Body:
I am working on my first app in ReactJS.
As a beginner I ran into a problem.
My app is phonebook so I have livesearch to display recommended data.
For strings everything works well, but when I want to create option "Search By Number" my app dosen't work. So can you show me what and where should I do to resolve a problem. Problem is in wrong regEx?
I try with this:   const pattern = /^[0-9\b]+$/ , where should I put this?

Thanks for your help!

Error:
TypeError: index.number.match is not a function
(anonymous function)

This is my code:

import React, {useState, useEffect} from 'react'
import '../CSS/App.css';
import axios from 'axios';

export default function Number() {
    const [numberList, setNumberList] = useState([]);
    const [text, setText] = useState("");
    const [suggestions, setSuggestions] = useState([]);
    const [showNumber, setShowNumber] = useState([]);

    useEffect(() => {
        const loadNumbers = async () => {
            const response = await axios.get("http://localhost:3001/numbers");
            setNumberList(response.data);

        };
        loadNumbers();

    }, [])

    const onChangeHandler = (text) => {
        let matches = [];
        if (text.length > 0 ) {
            matches = numberList.filter((index) => {
                const regex = new RegExp(`${(text)}`, "gi");
                return index.number.match(regex);
            })

        }
        console.log('matches', matches);
        setSuggestions(matches);
        setText(text);

    }
}

And this is part of my API:  http://localhost:3001/numbers

{"id":1,"name":"Voditelj","number":26327,"visible":true,"active":true,"createdAt":"2021-11-12T15:36:51.000Z","updatedAt":"2021-11-12T15:36:51.000Z","DepartmentId":1,"RegionId":1,"Region":{"id":1,"regionTitle":"Firule","createdAt":"2021-10-29T10:11:40.000Z","updatedAt":"2021-10-29T10:11:40.000Z"},"Department":{"id":1,"departmentTitle":"Služba za informatiku","alias":"INF","createdAt":"2021-10-29T10:14:32.000Z","updatedAt":"2021-10-29T10:14:32.000Z","RegionId":1}},{"id":2,"name":"Voditelj","number":26333,"visible":true,"active":true,"createdAt":"2021-11-12T15:37:42.000Z","updatedAt":"2021-11-12T15:37:42.000Z","DepartmentId":2,"RegionId":1,"Region":{"id":1,"regionTitle":"Firule","createdAt":"2021-10-29T10:11:40.000Z","updatedAt":"2021-10-29T10:11:40.000Z"},"Department":{"id":2,"departmentTitle":"Služba za tehničke poslove","alias":"TEH","createdAt":"2021-10-29T10:14:47.000Z","updatedAt":"2021-10-29T10:14:47.000Z","RegionId":1}},{"id":3,"name":"Voditelj","number":27333,"visible":true,"active":true,"createdAt":"2021-11-12T15:37:52.000Z","updatedAt":"2021-11-12T15:37:52.000Z","DepartmentId":3,"RegionId":2,"Region":{"id":2,"regionTitle":"Križine","createdAt":"2021-10-29T10:11:46.000Z","updatedAt":"2021-10-29T10:11:46.000Z"},"Department":{"id":3,"departmentTitle":"Služba za tehničke poslove","alias":"TEH","createdAt":"2021-10-29T10:14:51.000Z","updatedAt":"2021-10-29T12:20:43.000Z","RegionId":2}}

Body:
So I found a mistake. Stupid mistake.

const onChangeHandler = (text) => {
        let matches = [];

        if (text.length > 0 ) {
            matches = numberList.filter((index) => {
                const regex = new RegExp(`${(text)}`, "gi");
                return index.number.toString().match(regex); //toString has been missing
            })

        }
        console.log('matches', matches);
        setSuggestions(matches);
        setText(text);

    }


问:
python errors in Apple TensorFlow on M1 (apple silicon)
Running on a M1 mac mini under Big Sur, most current version.

Following the current Apple docs to install tensorflow in a virtual environment I created called "apple_tensorflow". Apple docs here:
https://developer.apple.com/metal/tensorflow-plugin/

Am getting the following errors - how can I fix?

```<code>(apple_tensorflow) GR@mysys ~ % python
Python 3.8.6 | packaged by conda-forge | (default, Jan 25 2021, 22:55:00)
[Clang 11.0.1 ] on darwin
Type "help", "copyright", "credits" or "license" for more information.
>>> import tensorflow as tf
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
  File "/opt/homebrew/Caskroom/miniforge/base/envs/apple_tensorflow/lib/python3.8/site-packages/tensorflow/__init__.py", line 449, in <module>
    _ll.load_library(_plugin_dir)
  File "/opt/homebrew/Caskroom/miniforge/base/envs/apple_tensorflow/lib/python3.8/site-packages/tensorflow/python/framework/load_library.py", line 155, in load_library
    py_tf.TF_LoadLibrary(lib)
tensorflow.python.framework.errors_impl.NotFoundError: dlopen(/opt/homebrew/Caskroom/miniforge/base/envs/apple_tensorflow/lib/python3.8/site-packages/tensorflow-plugins/libmetal_plugin.dylib, 6): Symbol not found: _OBJC_CLASS_$_MPSGraphCompilationDescriptor
  Referenced from: /opt/homebrew/Caskroom/miniforge/base/envs/apple_tensorflow/lib/python3.8/site-packages/tensorflow-plugins/libmetal_plugin.dylib (which was built for Mac OS X 12.0)
  Expected in: /System/Library/Frameworks/MetalPerformanceShadersGraph.framework/Versions/A/MetalPerformanceShadersGraph

>>>
</code>```

All required dependencies are correctly installed. Same errors exist when I try from a jupyter notebook.

Thanks in advance for any help, suggestions or input.

答:
I also go this error when following Apple's tensor flow instructions this morning (Feb 9, 2022). I am also on Big Sur. Something I missed is the Apple doc we followed is for the new PluggableDevices version of Tensorflow and Apple only supports this with MacOS 12.1 and up.

PluggableDevices prevents TensorFlow devs from having to modify the core of TensorFlow every time a new company comes out with new hardware, like Apple's M1.

Because we are still on Big Sur we will have to use the alpha version of tensorflow-macos.

I'm not ready to upgrade to the new version of MacOS so I installed Miniforge3, created a Python 3.8 environment (as required by tf macos alpha) with conda and installed using the Alpha instructions on the github page:

([https://github.com/apple/tensorflow_macos/issues/153])

```<code>wget https://raw.githubusercontent.com/mwidjaja1/DSOnMacARM/main/environment.yml

conda env create --file=./environment.yml --name=tensorflow

conda activate tensorflow

pip install --upgrade --force --no-dependencies https://github.com/apple/tensorflow_macos/releases/download/v0.1alpha3/tensorflow_macos-0.1a3-cp38-cp38-macosx_11_0_arm64.whl https://github.com/apple/tensorflow_macos/releases/download/v0.1alpha3/tensorflow_addons_macos-0.1a3-cp38-cp38-macosx_11_0_arm64.whl
</code>```

And then I ran the MINST test program...

```<code>python ./test-minst.py
1875/1875 [==============================] - 1s 351us/step - loss: 0.0000e+00 - accuracy: 0.1062
Epoch 2/10
1875/1875 [==============================] - 1s 350us/step - loss: 0.0000e+00 - accuracy: 0.1045
Epoch 3/10
1875/1875 [==============================] - 1s 358us/step - loss: 0.0000e+00 - accuracy: 0.1050
Epoch 4/10
1875/1875 [==============================] - 1s 358us/step - loss: 0.0000e+00 - accuracy: 0.1070
Epoch 5/10
1875/1875 [==============================] - 1s 359us/step - loss: 0.0000e+00 - accuracy: 0.1069
Epoch 6/10
1875/1875 [==============================] - 1s 349us/step - loss: 0.0000e+00 - accuracy: 0.1068
Epoch 7/10
1875/1875 [==============================] - 1s 348us/step - loss: 0.0000e+00 - accuracy: 0.1049
Epoch 8/10
1875/1875 [==============================] - 1s 360us/step - loss: 0.0000e+00 - accuracy: 0.1038
Epoch 9/10
1875/1875 [==============================] - 1s 350us/step - loss: 0.0000e+00 - accuracy: 0.1056
Epoch 10/10
1875/1875 [==============================] - 1s 348us/step - loss: 0.0000e+00 - accuracy: 0.1073
</code>```

Body:
Running on a M1 mac mini under Big Sur, most current version.

Following the current Apple docs to install tensorflow in a virtual environment I created called "apple_tensorflow". Apple docs here:
https://developer.apple.com/metal/tensorflow-plugin/

Am getting the following errors - how can I fix?

(apple_tensorflow) GR@mysys ~ % python
Python 3.8.6 | packaged by conda-forge | (default, Jan 25 2021, 22:55:00)
[Clang 11.0.1 ] on darwin
Type "help", "copyright", "credits" or "license" for more information.
>>> import tensorflow as tf
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
  File "/opt/homebrew/Caskroom/miniforge/base/envs/apple_tensorflow/lib/python3.8/site-packages/tensorflow/__init__.py", line 449, in <module>
    _ll.load_library(_plugin_dir)
  File "/opt/homebrew/Caskroom/miniforge/base/envs/apple_tensorflow/lib/python3.8/site-packages/tensorflow/python/framework/load_library.py", line 155, in load_library
    py_tf.TF_LoadLibrary(lib)
tensorflow.python.framework.errors_impl.NotFoundError: dlopen(/opt/homebrew/Caskroom/miniforge/base/envs/apple_tensorflow/lib/python3.8/site-packages/tensorflow-plugins/libmetal_plugin.dylib, 6): Symbol not found: _OBJC_CLASS_$_MPSGraphCompilationDescriptor
  Referenced from: /opt/homebrew/Caskroom/miniforge/base/envs/apple_tensorflow/lib/python3.8/site-packages/tensorflow-plugins/libmetal_plugin.dylib (which was built for Mac OS X 12.0)
  Expected in: /System/Library/Frameworks/MetalPerformanceShadersGraph.framework/Versions/A/MetalPerformanceShadersGraph

>>>

All required dependencies are correctly installed. Same errors exist when I try from a jupyter notebook.

Thanks in advance for any help, suggestions or input.

Body:
I also go this error when following Apple's tensor flow instructions this morning (Feb 9, 2022). I am also on Big Sur. Something I missed is the Apple doc we followed is for the new PluggableDevices version of Tensorflow and Apple only supports this with MacOS 12.1 and up.

PluggableDevices prevents TensorFlow devs from having to modify the core of TensorFlow every time a new company comes out with new hardware, like Apple's M1.

Because we are still on Big Sur we will have to use the alpha version of tensorflow-macos.

I'm not ready to upgrade to the new version of MacOS so I installed Miniforge3, created a Python 3.8 environment (as required by tf macos alpha) with conda and installed using the Alpha instructions on the github page:

([https://github.com/apple/tensorflow_macos/issues/153])

wget https://raw.githubusercontent.com/mwidjaja1/DSOnMacARM/main/environment.yml

conda env create --file=./environment.yml --name=tensorflow

conda activate tensorflow

pip install --upgrade --force --no-dependencies https://github.com/apple/tensorflow_macos/releases/download/v0.1alpha3/tensorflow_macos-0.1a3-cp38-cp38-macosx_11_0_arm64.whl https://github.com/apple/tensorflow_macos/releases/download/v0.1alpha3/tensorflow_addons_macos-0.1a3-cp38-cp38-macosx_11_0_arm64.whl

And then I ran the MINST test program...

python ./test-minst.py
1875/1875 [==============================] - 1s 351us/step - loss: 0.0000e+00 - accuracy: 0.1062
Epoch 2/10
1875/1875 [==============================] - 1s 350us/step - loss: 0.0000e+00 - accuracy: 0.1045
Epoch 3/10
1875/1875 [==============================] - 1s 358us/step - loss: 0.0000e+00 - accuracy: 0.1050
Epoch 4/10
1875/1875 [==============================] - 1s 358us/step - loss: 0.0000e+00 - accuracy: 0.1070
Epoch 5/10
1875/1875 [==============================] - 1s 359us/step - loss: 0.0000e+00 - accuracy: 0.1069
Epoch 6/10
1875/1875 [==============================] - 1s 349us/step - loss: 0.0000e+00 - accuracy: 0.1068
Epoch 7/10
1875/1875 [==============================] - 1s 348us/step - loss: 0.0000e+00 - accuracy: 0.1049
Epoch 8/10
1875/1875 [==============================] - 1s 360us/step - loss: 0.0000e+00 - accuracy: 0.1038
Epoch 9/10
1875/1875 [==============================] - 1s 350us/step - loss: 0.0000e+00 - accuracy: 0.1056
Epoch 10/10
1875/1875 [==============================] - 1s 348us/step - loss: 0.0000e+00 - accuracy: 0.1073


问:
How to fix refreshing error with Echo and Angular
I'm setting up a web server with Go (using Echo) as the backend and Angular 6 as the frontend.
What I do is make a simple app using Angular-cli 'ng new my-app', add a helloworld component and a '/helloworld' route and then build it into production with 'ng build --prod' which output as 'dist' folder.
Folder structure:

```<code>dist
├── assets
│   ├── icons
│   └── logo.png
├── favicon.ico
├── index.html
├── main.js
├── polyfills.js
├── runtime.js
└── styles.css
</code>```

I then have Go serve the static files in that 'dist' folder with following code
main.go

```<code>func main() {
    e := echo.New()
    e.Static("/", "dist")
    e.File("/", "dist/index.html")
    e.Start(":3000")
}
</code>```

Now when I use the browser and go to 'localhost:3000/' then the page will be serve correctly, I can navigate around using href thanks to Angular routing ,for example to: 'localhost:3000/home' the page will show correctly but if I try refreshing it then Echo will return a page content that shows:

{"message":"Not Found"}

I know I can setup the route manually like this:

```<code>e.File("/home","dist/index.html")
</code>```

However if I have a lot more routes then its quite a hassle to do all that.

What I need is that any route that's not defined for Echo will be map to 'index.html'. I did try with:

```<code>e.File("/*", "dist/index.html")
</code>```

and

```<code>e.GET("/*", func(c echo.Context)
    return c.File("dist/index.html")
})
</code>```

but then I get a blank page with error

```<code>"Uncaught SyntaxError: Unexpected token <  "
</code>```

with all 3 files main.js, polyfill.js and runtime.js

I'm new to Echo so I don't know how to do this.

答:
Leaving this here as an alternative, in case any one wants a complete example. Using "/*" will capture any routes starting with "/" or whatever prefix you want that hasn't been defined.</p>
```<code>package main

import (
    "github.com/labstack/echo/v4"
    "github.com/labstack/echo/v4/middleware"
)

const (
    HTTP_PORT = ":1234"
)

func main() {
    e := echo.New()

    // Logger Middleware
    e.Use(middleware.Logger())

    // Setup routes
    SetupRoutes(e)

    e.Logger.Fatal(e.Start(HTTP_PORT))
}

func SetupRoutes(e *echo.Echo) {
    // Catpure route /
    e.GET("/", getWebApp)

    // Catpure route /test
    e.GET("/test", getTest)

    // Catpure all routes starting with / that haven't been defined
    e.GET("/*", getWebApp)

    // Use e.Any() for all request methods GET, PUT, POST, PATCH and DELETE
    e.Any("/*", getWebApp)
}

func getWebApp(ctx echo.Context) error {
    return ctx.File("../website_src/index.html")
}

func getTest(ctx echo.Context) error {
    return ctx.String(http.StatusOK, "Hello")
}
</code>```

Body:
I'm setting up a web server with Go (using Echo) as the backend and Angular 6 as the frontend.
What I do is make a simple app using Angular-cli 'ng new my-app', add a helloworld component and a '/helloworld' route and then build it into production with 'ng build --prod' which output as 'dist' folder.
Folder structure:

dist
├── assets
│   ├── icons
│   └── logo.png
├── favicon.ico
├── index.html
├── main.js
├── polyfills.js
├── runtime.js
└── styles.css

I then have Go serve the static files in that 'dist' folder with following code
main.go

func main() {
    e := echo.New()
    e.Static("/", "dist")
    e.File("/", "dist/index.html")
    e.Start(":3000")
}

Now when I use the browser and go to 'localhost:3000/' then the page will be serve correctly, I can navigate around using href thanks to Angular routing ,for example to: 'localhost:3000/home' the page will show correctly but if I try refreshing it then Echo will return a page content that shows:

{"message":"Not Found"}

I know I can setup the route manually like this:

e.File("/home","dist/index.html")

However if I have a lot more routes then its quite a hassle to do all that.

What I need is that any route that's not defined for Echo will be map to 'index.html'. I did try with:

e.File("/*", "dist/index.html")

and

e.GET("/*", func(c echo.Context)
    return c.File("dist/index.html")
})

but then I get a blank page with error

"Uncaught SyntaxError: Unexpected token <  "

with all 3 files main.js, polyfill.js and runtime.js

I'm new to Echo so I don't know how to do this.

Body:
Leaving this here as an alternative, in case any one wants a complete example. Using "/*" will capture any routes starting with "/" or whatever prefix you want that hasn't been defined.

package main

import (
    "github.com/labstack/echo/v4"
    "github.com/labstack/echo/v4/middleware"
)

const (
    HTTP_PORT = ":1234"
)

func main() {
    e := echo.New()

    // Logger Middleware
    e.Use(middleware.Logger())

    // Setup routes
    SetupRoutes(e)

    e.Logger.Fatal(e.Start(HTTP_PORT))
}

func SetupRoutes(e *echo.Echo) {
    // Catpure route /
    e.GET("/", getWebApp)

    // Catpure route /test
    e.GET("/test", getTest)

    // Catpure all routes starting with / that haven't been defined
    e.GET("/*", getWebApp)

    // Use e.Any() for all request methods GET, PUT, POST, PATCH and DELETE
    e.Any("/*", getWebApp)
}

func getWebApp(ctx echo.Context) error {
    return ctx.File("../website_src/index.html")
}

func getTest(ctx echo.Context) error {
    return ctx.String(http.StatusOK, "Hello")
}


问:
How to make Google map draggable and keep marker in the center of the screen?
I have a button which enable/disable draggable option for the map.

And I need to keep the marker in the center of the map while user will drag the map.

var map;

function toggleMapDraggable() {
  if (map.get("draggable")) {
    map.set("draggable", false);
  } else {
    map.set("draggable", true);
  }
}

function initialize() {

  var locations = [
    ['WELWYN GARDEN CITY ', 51.805616, -0.192647, 2],
    ['STANMORE  ', 51.603199, -0.296803, 1]
  ];

  map = new google.maps.Map(document.getElementById('map_canvas'), {
    navigationControl: true,
    scrollwheel: false,
    scaleControl: false,
    draggable: false,
    zoom: 10,
    center: new google.maps.LatLng(51.75339, -0.210114),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var infowindow = new google.maps.InfoWindow();
  var image = 'http://maps.google.com/mapfiles/ms/micons/blue.png';

  var marker, i;

  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map,
      icon: image,
      zIndex: 10
    });

    window.google.maps.event.addListener(map , 'drag', function (event) {
            marker.setPosition( map .getCenter() );
    });

    google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));
  }
}
google.maps.event.addDomListener(window, 'load', initialize);```
<pre class="snippet-code-css lang-css prettyprint-override"><code>html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}</code>```

<input type="button" value="toggle draggable" onclick="toggleMapDraggable();" />

```

答:
If still actual, now you can use this solution.

Init parameters:

```<code>let mapOptions = {
        zoom: 8,
        center: {lat: 50.4501, lng: 30.5234}
    },
    modalMap = new google.maps.Map(document.getElementById('transfers-map'), mapOptions),
    marker = new google.maps.Marker({
        map: modalMap,
        position: modalMap.getCenter(),
        draggable: false,
    });
</code>```

Solution:

```<code>google.maps.event.addListener(modalMap, 'drag', function () {
    marker.setPosition(modalMap.getCenter());
});
</code>```

Body:
I have a button which enable/disable draggable option for the map.

And I need to keep the marker in the center of the map while user will drag the map.

var map;

function toggleMapDraggable() {
  if (map.get("draggable")) {
    map.set("draggable", false);
  } else {
    map.set("draggable", true);
  }
}

function initialize() {

  var locations = [
    ['WELWYN GARDEN CITY ', 51.805616, -0.192647, 2],
    ['STANMORE  ', 51.603199, -0.296803, 1]
  ];

  map = new google.maps.Map(document.getElementById('map_canvas'), {
    navigationControl: true,
    scrollwheel: false,
    scaleControl: false,
    draggable: false,
    zoom: 10,
    center: new google.maps.LatLng(51.75339, -0.210114),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var infowindow = new google.maps.InfoWindow();
  var image = 'http://maps.google.com/mapfiles/ms/micons/blue.png';

  var marker, i;

  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map,
      icon: image,
      zIndex: 10
    });

    window.google.maps.event.addListener(map , 'drag', function (event) {
            marker.setPosition( map .getCenter() );
    });

    google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));
  }
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<input type="button" value="toggle draggable" onclick="toggleMapDraggable();" />

Body:
If still actual, now you can use this solution.

Init parameters:

let mapOptions = {
        zoom: 8,
        center: {lat: 50.4501, lng: 30.5234}
    },
    modalMap = new google.maps.Map(document.getElementById('transfers-map'), mapOptions),
    marker = new google.maps.Marker({
        map: modalMap,
        position: modalMap.getCenter(),
        draggable: false,
    });

Solution:

google.maps.event.addListener(modalMap, 'drag', function () {
    marker.setPosition(modalMap.getCenter());
});


答:
if your nan values are np.nan use this

```<code>l = [x for x in yourlist if ~np.isnan(x)]
</code>```

if they are just nans use this

```<code>cleanedList = [x for x in yourlist if str(x) != 'nan']
</code>```

Title: How to remove nan values from a list of values inside a variable in Python?

Body:
[ 0.          0.          0.          0.          0.          0.
0.          0.          0.          0.09034446  0.16660596  0.20366712
0.21721049  0.22288556  0.2647726   0.30133098  0.35875865  0.67048766
0.83591387  0.84130192  1.00343632  1.08201832  1.32280598  3.71048433
4.92399325  5.7334934   5.78915343  5.79743345 11.87101934         nan
nan         nan         nan         nan]
In this list, I want to remove nan values and keep only the floating-point values.

Body:
if your nan values are np.nan use this

l = [x for x in yourlist if ~np.isnan(x)]

if they are just nans use this

cleanedList = [x for x in yourlist if str(x) != 'nan']


问:
How to pass a large string variable in jsp without any alteration?
I'm in a need to obtain a data from the backend and it will be assigned to local variables through JSP in the front-end. The actual string data coming from backend is below:

```<code>"{\"deltas\":[{\"source\":{\"position\":63,\"lines\":[]},\"target\":{\"position\":65,\"lines\":[\"return {\"]},\"type\":\"INSERT\"},{\"source\":{\"position\":57,\"lines\":[\"//comment one\",\"//comment two\",\"//comment three\"]},\"target\":{\"position\":62,\"lines\":[]},\"type\":\"DELETE\"},{\"source\":{\"position\":53,\"lines\":[\"\"]},\"target\":{\"position\":56,\"lines\":[\"version.open(options,endpoint, false);\",\"version.send(payload);\",\"result \= version.responseE4X;\"]},\"type\":\"CHANGE\"},{\"source\":{\"position\":44,\"lines\":[]},\"target\":{\"position\":44,\"lines\":[\"            \\\"\<sch:status\>\\\"+status+\\\"\</sch:status\>\\\"+\",\"            \\\"\<sch:workflowExternalRef\>\\\"+refId+\\\"\</sch:workflowExternalRef\>\\\"+\",\"            \\\"\<sch:description\>\\\"+description+\\\"\</sch:description\>\\\" +\"]},\"type\":\"INSERT\"},{\"source\":{\"position\":42,\"lines\":[\"} else if(taskType\=\=\\\"registration\\\"){\"]},\"target\":{\"position\":42,\"lines\":[\"} else if(taskType\=\=\\\"appRegistration\\\"){\"]},\"type\":\"CHANGE\"},{\"source\":{\"position\":35,\"lines\":[\"} else if(taskType\=\=\\\"app\\\"){\"]},\"target\":{\"position\":35,\"lines\":[\"} else if(taskType\=\=\\\"application\\\"){\"]},\"type\":\"CHANGE\"},{\"source\":{\"position\":28,\"lines\":[\"} else if(taskType\=\=\\\"signup\\\"){\"]},\"target\":{\"position\":28,\"lines\":[\"} else if(taskType\=\=\\\"user-signup\\\"){\"]},\"type\":\"CHANGE\"},{\"source\":{\"position\":14,\"lines\":[\"                              { name : \\\"\\\", value :cookie },\"]},\"target\":{\"position\":14,\"lines\":[\"                              { name : \\\"Cookie\\\", value :cookie },\"]},\"type\":\"CHANGE\"},{\"source\":{\"position\":11,\"lines\":[\"var cookie\=session.get(\\\"\\\");\"]},\"target\":{\"position\":11,\"lines\":[\"var cookie\=session.get(\\\"workflowCookie\\\");\"]},\"type\":\"CHANGE\"}]}"
</code>```

I'm using JSP to assign it to a local variable as below:

```<code>var diffOutputList = '<c:out value="${diffResponse.diffOutputList}"/>'
</code>```

After this when I'm printing the diffOutputList in the console, it is printing like below:

```<code>{"deltas":[{"source":{"position":63,"lines":[]},"target":{"position":65,"lines":["return {"]},"type":"INSERT"},{"source":{"position":57,"lines":["//comment one","//comment two","//comment three"]},"target":{"position":62,"lines":[]},"type":"DELETE"},{"source":{"position":53,"lines":[""]},"target":{"position":56,"lines":["version.open(options,endpoint, false);","version.send(payload);","result = version.responseE4X;"]},"type":"CHANGE"},{"source":{"position":44,"lines":[]},"target":{"position":44,"lines":["            "<sch:status>"+status+"</sch:status>"+","            "<sch:workflowExternalRef>"+refId+"</sch:workflowExternalRef>"+","            "<sch:description>"+description+"</sch:description>" +"]},"type":"INSERT"},{"source":{"position":42,"lines":["} else if(taskType=="registration"){"]},"target":{"position":42,"lines":["} else if(taskType=="appRegistration"){"]},"type":"CHANGE"},{"source":{"position":35,"lines":["} else if(taskType=="app"){"]},"target":{"position":35,"lines":["} else if(taskType=="application"){"]},"type":"CHANGE"},{"source":{"position":28,"lines":["} else if(taskType=="signup"){"]},"target":{"position":28,"lines":["} else if(taskType=="user-signup"){"]},"type":"CHANGE"},{"source":{"position":14,"lines":["                              { name : "", value :cookie },"]},"target":{"position":14,"lines":["                              { name : "Cookie", value :cookie },"]},"type":"CHANGE"},{"source":{"position":11,"lines":["var cookie=session.get("");"]},"target":{"position":11,"lines":["var cookie=session.get("workflowCookie");"]},"type":"CHANGE"}]}
</code>```

But I need the string in the below format:

```<code>'{"deltas":[{"source":{"position":63,"lines":[]},"target":{"position":65,"lines":["return {"]},"type":"INSERT"},{"source":{"position":57,"lines":["//comment one","//comment two","//comment three"]},"target":{"position":62,"lines":[]},"type":"DELETE"},{"source":{"position":53,"lines":[""]},"target":{"position":56,"lines":["version.open(options,endpoint, false);","version.send(payload);","result = version.responseE4X;"]},"type":"CHANGE"},{"source":{"position":44,"lines":[]},"target":{"position":44,"lines":["            \\"<sch:status>\\"+status+\\"</sch:status>\\"+","            \\"<sch:workflowExternalRef>\\"+refId+\\"</sch:workflowExternalRef>\\"+","            \\"<sch:description>\\"+description+\\"</sch:description>\\" +"]},"type":"INSERT"},{"source":{"position":42,"lines":["} else if(taskType==\\"registration\\"){"]},"target":{"position":42,"lines":["} else if(taskType==\\"appRegistration\\"){"]},"type":"CHANGE"},{"source":{"position":35,"lines":["} else if(taskType==\\"app\\"){"]},"target":{"position":35,"lines":["} else if(taskType==\\"application\\"){"]},"type":"CHANGE"},{"source":{"position":28,"lines":["} else if(taskType==\\"signup\\"){"]},"target":{"position":28,"lines":["} else if(taskType==\\"user-signup\\"){"]},"type":"CHANGE"},{"source":{"position":14,"lines":["                              { name : \\"\\", value :cookie },"]},"target":{"position":14,"lines":["                              { name : \\"Cookie\\", value :cookie },"]},"type":"CHANGE"},{"source":{"position":11,"lines":["var cookie=session.get(\\"\\");"]},"target":{"position":11,"lines":["var cookie=session.get(\\"workflowCookie\\");"]},"type":"CHANGE"}]}'
</code>```

答:
c:out automatically escapes XML tags in the rendering. The escaping replaces " by ".

You can disable the escaping with the escapeXml parameter:

```<code>var diffOutputList = '<c:out escapeXml="false" value="${diffResponse.diffOutputList}" />'
</code>```

But in this case, c:out is not really necessary, you could use:

```<code>var diffOutputList = '${diffResponse.diffOutputList}'
</code>```

Body:
I'm in a need to obtain a data from the backend and it will be assigned to local variables through JSP in the front-end. The actual string data coming from backend is below:

"{\"deltas\":[{\"source\":{\"position\":63,\"lines\":[]},\"target\":{\"position\":65,\"lines\":[\"return {\"]},\"type\":\"INSERT\"},{\"source\":{\"position\":57,\"lines\":[\"//comment one\",\"//comment two\",\"//comment three\"]},\"target\":{\"position\":62,\"lines\":[]},\"type\":\"DELETE\"},{\"source\":{\"position\":53,\"lines\":[\"\"]},\"target\":{\"position\":56,\"lines\":[\"version.open(options,endpoint, false);\",\"version.send(payload);\",\"result \= version.responseE4X;\"]},\"type\":\"CHANGE\"},{\"source\":{\"position\":44,\"lines\":[]},\"target\":{\"position\":44,\"lines\":[\"            \\\"\<sch:status\>\\\"+status+\\\"\</sch:status\>\\\"+\",\"            \\\"\<sch:workflowExternalRef\>\\\"+refId+\\\"\</sch:workflowExternalRef\>\\\"+\",\"            \\\"\<sch:description\>\\\"+description+\\\"\</sch:description\>\\\" +\"]},\"type\":\"INSERT\"},{\"source\":{\"position\":42,\"lines\":[\"} else if(taskType\=\=\\\"registration\\\"){\"]},\"target\":{\"position\":42,\"lines\":[\"} else if(taskType\=\=\\\"appRegistration\\\"){\"]},\"type\":\"CHANGE\"},{\"source\":{\"position\":35,\"lines\":[\"} else if(taskType\=\=\\\"app\\\"){\"]},\"target\":{\"position\":35,\"lines\":[\"} else if(taskType\=\=\\\"application\\\"){\"]},\"type\":\"CHANGE\"},{\"source\":{\"position\":28,\"lines\":[\"} else if(taskType\=\=\\\"signup\\\"){\"]},\"target\":{\"position\":28,\"lines\":[\"} else if(taskType\=\=\\\"user-signup\\\"){\"]},\"type\":\"CHANGE\"},{\"source\":{\"position\":14,\"lines\":[\"                              { name : \\\"\\\", value :cookie },\"]},\"target\":{\"position\":14,\"lines\":[\"                              { name : \\\"Cookie\\\", value :cookie },\"]},\"type\":\"CHANGE\"},{\"source\":{\"position\":11,\"lines\":[\"var cookie\=session.get(\\\"\\\");\"]},\"target\":{\"position\":11,\"lines\":[\"var cookie\=session.get(\\\"workflowCookie\\\");\"]},\"type\":\"CHANGE\"}]}"

I'm using JSP to assign it to a local variable as below:

var diffOutputList = '<c:out value="${diffResponse.diffOutputList}"/>'

After this when I'm printing the diffOutputList in the console, it is printing like below:

{"deltas":[{"source":{"position":63,"lines":[]},"target":{"position":65,"lines":["return {"]},"type":"INSERT"},{"source":{"position":57,"lines":["//comment one","//comment two","//comment three"]},"target":{"position":62,"lines":[]},"type":"DELETE"},{"source":{"position":53,"lines":[""]},"target":{"position":56,"lines":["version.open(options,endpoint, false);","version.send(payload);","result = version.responseE4X;"]},"type":"CHANGE"},{"source":{"position":44,"lines":[]},"target":{"position":44,"lines":["            "<sch:status>"+status+"</sch:status>"+","            "<sch:workflowExternalRef>"+refId+"</sch:workflowExternalRef>"+","            "<sch:description>"+description+"</sch:description>" +"]},"type":"INSERT"},{"source":{"position":42,"lines":["} else if(taskType=="registration"){"]},"target":{"position":42,"lines":["} else if(taskType=="appRegistration"){"]},"type":"CHANGE"},{"source":{"position":35,"lines":["} else if(taskType=="app"){"]},"target":{"position":35,"lines":["} else if(taskType=="application"){"]},"type":"CHANGE"},{"source":{"position":28,"lines":["} else if(taskType=="signup"){"]},"target":{"position":28,"lines":["} else if(taskType=="user-signup"){"]},"type":"CHANGE"},{"source":{"position":14,"lines":["                              { name : "", value :cookie },"]},"target":{"position":14,"lines":["                              { name : "Cookie", value :cookie },"]},"type":"CHANGE"},{"source":{"position":11,"lines":["var cookie=session.get("");"]},"target":{"position":11,"lines":["var cookie=session.get("workflowCookie");"]},"type":"CHANGE"}]}

But I need the string in the below format:

'{"deltas":[{"source":{"position":63,"lines":[]},"target":{"position":65,"lines":["return {"]},"type":"INSERT"},{"source":{"position":57,"lines":["//comment one","//comment two","//comment three"]},"target":{"position":62,"lines":[]},"type":"DELETE"},{"source":{"position":53,"lines":[""]},"target":{"position":56,"lines":["version.open(options,endpoint, false);","version.send(payload);","result = version.responseE4X;"]},"type":"CHANGE"},{"source":{"position":44,"lines":[]},"target":{"position":44,"lines":["            \\"<sch:status>\\"+status+\\"</sch:status>\\"+","            \\"<sch:workflowExternalRef>\\"+refId+\\"</sch:workflowExternalRef>\\"+","            \\"<sch:description>\\"+description+\\"</sch:description>\\" +"]},"type":"INSERT"},{"source":{"position":42,"lines":["} else if(taskType==\\"registration\\"){"]},"target":{"position":42,"lines":["} else if(taskType==\\"appRegistration\\"){"]},"type":"CHANGE"},{"source":{"position":35,"lines":["} else if(taskType==\\"app\\"){"]},"target":{"position":35,"lines":["} else if(taskType==\\"application\\"){"]},"type":"CHANGE"},{"source":{"position":28,"lines":["} else if(taskType==\\"signup\\"){"]},"target":{"position":28,"lines":["} else if(taskType==\\"user-signup\\"){"]},"type":"CHANGE"},{"source":{"position":14,"lines":["                              { name : \\"\\", value :cookie },"]},"target":{"position":14,"lines":["                              { name : \\"Cookie\\", value :cookie },"]},"type":"CHANGE"},{"source":{"position":11,"lines":["var cookie=session.get(\\"\\");"]},"target":{"position":11,"lines":["var cookie=session.get(\\"workflowCookie\\");"]},"type":"CHANGE"}]}'

Body:
c:out automatically escapes XML tags in the rendering. The escaping replaces " by &#034;.

You can disable the escaping with the escapeXml parameter:

var diffOutputList = '<c:out escapeXml="false" value="${diffResponse.diffOutputList}" />'

But in this case, c:out is not really necessary, you could use:

var diffOutputList = '${diffResponse.diffOutputList}'


答:
Here's a quick implementation using a defaultdict.

```<code>from collections import defaultdict as dd

def separate_by_digit(int_list):
    int_dict = dd(list)
    for k in int_list:
        int_dict[len(str(k))].append(k)
    return int_dict

print(list(separate_by_digit([1,3,13,888,1004]).values()))
</code>```

Result:

```<code>[[1, 3], [13], [888], [1004]]
</code>```

Body:
I would like to divide a list of positive integers by the length of digits.

For example, int_list = [1,3,13,888,1004]
-> [1,3] , [13] , [888] , [1004]

I have implemented below:

def seperate_by_digit(int_list):
    len_set = set()  # track how many digits we have

    int_dict = {}  # key : len of digits  / val : list of integer
    for int_ele in int_list:
        n = len(str(int_ele))
        if n not in len_set:
            int_dict[n] = [int_ele]
            len_set.add(n)
        else:
            sub_int_list = int_dict[n]
            sub_int_list.append(int_ele)
            int_dict[n] = sub_int_list
    return int_dict

Is there any better, cleaner way to complete this task?

Body:
Here's a quick implementation using a defaultdict.

from collections import defaultdict as dd

def separate_by_digit(int_list):
    int_dict = dd(list)
    for k in int_list:
        int_dict[len(str(k))].append(k)
    return int_dict

print(list(separate_by_digit([1,3,13,888,1004]).values()))

Result:

[[1, 3], [13], [888], [1004]]


问:
Symfony - modify data from databases
I would like use somethings - if i have encode, then i add in News.class.php public function save and use strtoupper. This working good.
How can i make somethings if i get data from database?

my DB:

```<code>id | title  | body
1  | title1 | body1
2  | title1 | body2
</code>```

etc.

if i use $news->getTitle() then i have: title1
i must make:

strtoupper($news->getTitle()) - it is good, but i dont will every time add my function decode.
I would like use $news->getTitle() and at once this is strtoupper. Where i can this make? Which file? I dont will edit model generated auto with Symfony. I would like make this in NewsTable.class.php, but how?

答:
Edit your News.class.php (not the table) file and add this:

```<code>public function getTitle()
{
  return urldecode($this->title);
}
</code>```

Title: Symfony - modify data from databases

Body:
I would like use somethings - if i have encode, then i add in News.class.php public function save and use strtoupper. This working good.
How can i make somethings if i get data from database?

my DB:

id | title  | body
1  | title1 | body1
2  | title1 | body2

etc.

if i use $news->getTitle() then i have: title1
i must make:

strtoupper($news->getTitle()) - it is good, but i dont will every time add my function decode.
I would like use $news->getTitle() and at once this is strtoupper. Where i can this make? Which file? I dont will edit model generated auto with Symfony. I would like make this in NewsTable.class.php, but how?

Body:
Edit your News.class.php (not the table) file and add this:

public function getTitle()
{
  return urldecode($this->title);
}


问:
What does "printf-style function with dynamic format string and no further arguments should use print-style function instead" mean?

printf-style function with dynamic format string and no further arguments should use print-style function instead

My VScode keeps highlighting my fmt.Fprintf(w, prettyJSON.String()) statements with the warning stated above. Not sure what it means, or how to fix. Here is an example on how I use Fprintf():

func (s *Server) getWorkSpaces(w http.ResponseWriter, r *http.Request) {
    client := &http.Client{}
    var prettyJSON bytes.Buffer
    req, err := http.NewRequest("GET", "url.com", nil)
    if err != nil {
        // if there was an error parsing the request, return an error to user and quit function
        responses.ERROR(w, http.StatusBadRequest, fmt.Errorf("unable to read request body: %v", err))
        return
    }

    resp, err := client.Do(req)
    if err != nil {
        // if there was an error parsing the request, return an error to user and quit function
        responses.ERROR(w, http.StatusBadRequest, fmt.Errorf("unable to read request body: %v", err))
        return
    }

    body, err := ioutil.ReadAll(resp.Body)
    if err != nil {
        log.Fatalln(err)
    }
    error := json.Indent(&prettyJSON, body, "", "\t")
    if error != nil {
        log.Println("JSON parse error: ", error)
        return
    }

    fmt.Fprintf(w, prettyJSON.String())
}
```

How can I stop this error? Could someone explain to me why my VScode is throwing that up on the screen? Note that my code runs and works well.

答:
fmt.Fprintf() expects a format string that may contain verbs that will be substituted with arguments. If you do not pass arguments, that hints you're likely not having / using a format string, so you shouldn't use fmt.Fprintf() in the first place.

To just write arguments into an io.Writer, use fmt.Fprint().

```<code>fmt.Fprint(w, prettyJSON.String())
</code>```

The warning is more than justified from vet, because the format string may not get outputted as-is:

```<code>fmt.Print("%%\n")
fmt.Printf("%%\n")
</code>```

The above prints (try it on the Go Playground):

```<code>%%
%
</code>```

The % is a special character in format strings, and to emit (output) a single % sign you have to use double % in the format string. This is just to prove the point, there are other differences.

See related questions:

No placeholders in format string

Format a Go string without printing?

Body:
printf-style function with dynamic format string and no further arguments should use print-style function instead

My VScode keeps highlighting my fmt.Fprintf(w, prettyJSON.String()) statements with the warning stated above. Not sure what it means, or how to fix. Here is an example on how I use Fprintf():

func (s *Server) getWorkSpaces(w http.ResponseWriter, r *http.Request) {
    client := &http.Client{}
    var prettyJSON bytes.Buffer
    req, err := http.NewRequest("GET", "url.com", nil)
    if err != nil {
        // if there was an error parsing the request, return an error to user and quit function
        responses.ERROR(w, http.StatusBadRequest, fmt.Errorf("unable to read request body: %v", err))
        return
    }

    resp, err := client.Do(req)
    if err != nil {
        // if there was an error parsing the request, return an error to user and quit function
        responses.ERROR(w, http.StatusBadRequest, fmt.Errorf("unable to read request body: %v", err))
        return
    }

    body, err := ioutil.ReadAll(resp.Body)
    if err != nil {
        log.Fatalln(err)
    }
    error := json.Indent(&prettyJSON, body, "", "\t")
    if error != nil {
        log.Println("JSON parse error: ", error)
        return
    }

    fmt.Fprintf(w, prettyJSON.String())
}

How can I stop this error? Could someone explain to me why my VScode is throwing that up on the screen? Note that my code runs and works well.

Body:
fmt.Fprintf() expects a format string that may contain verbs that will be substituted with arguments. If you do not pass arguments, that hints you're likely not having / using a format string, so you shouldn't use fmt.Fprintf() in the first place.

To just write arguments into an io.Writer, use fmt.Fprint().

fmt.Fprint(w, prettyJSON.String())

The warning is more than justified from vet, because the format string may not get outputted as-is:

fmt.Print("%%\n")
fmt.Printf("%%\n")

The above prints (try it on the Go Playground):

%%
%

The % is a special character in format strings, and to emit (output) a single % sign you have to use double % in the format string. This is just to prove the point, there are other differences.

See related questions:

No placeholders in format string

Format a Go string without printing?


问:
Image .HEIC not loaded properly on browsers
We have a mobile app that uploads images to our web server and those images are displayed on a dashboard that opens on browsers like chrome, IE and firefox latest versions; Our users have windows 7 machines or even Android or IOS mobiles; Images with extension .HEIC uploaded from IOS 11 are not displayed properly on any device; Before telling me that Windows 7 and ANDROID do not support .HEIC images, I have taken the image from the webserver to my PC: can anybody tell me why if I right click on that image and open it with any browser it opens successfully ?! And why, using the same browser, it won't be displayed through the dashboard ? I need to know if I can fix the problem somehow before I convert it to any compatible type like jpeg or png. Below is my dashboard final code and examples of errors thrown by the browsers:

```<code><div class="HAL_Upload_Image_container">
   <div class="HAL_Upload_Image" style="background-image:url('http://myImageURL.com/My_Folder/10//2018/0618/123456/CLIENT%5C29-06-2018%2009-37-16%20AM-505.PNG');"></div>
   <div class="HAL_Image_Name"> 29-06-2018 09-37-16 AM-505 </div>
</div>

<div class="HAL_Upload_Image_container">
   <div class="HAL_Upload_Image" style="background-image:url('http://myImageURL.com/My_Folder/10//2018/0618/123456/CLIENT%5C29-06-2018%2009-37-16%20AM-739.PNG');"></div>
   <div class="HAL_Image_Name">  29-06-2018 09-37-16 AM-739 </div>
</div>

<div class="HAL_Upload_Image_container">
   <div class="BAN_Upload_Image" style="background-image:url('http://myImageURL.com/My_Folder/10//2018/0618/123456/CLIENT%5C29-06-2018%2009-37-16%20AM-942.HEIC');"></div>
   <div class="HAL_Image_Name">  29-06-2018 09-37-16 AM-942 </div>
</div>
</code>```

Chrome has logged in the console: Failed to load resource: the server responded with a status of 404 (Not Found), if I paste the source in the browser same error is thrown

IE 11 did not log any error and image is not displayed

FireFox did log any error and image is not displayed as well

Safari has logged the same error as chrome

BUT the image exists in the folder as the 2 others; The 3 have the same URL but their names and extensions differ a bit ... Any hints?

答:
In your url, there is an extra / after the 10.

```<code>http://myImageURL.com/My_Folder/10//2018/0618/123456/CLIENT%5C29-06-2018%2009-37-16%20AM-942.HEIC
</code>```

I'm assuming this was a typo when submitting here.

For HEIC, it is an Apple format on iOS.  The browsers do not support this file type due to licensing agreements.  I'm guessing your computer was somehow converting the image or the program was able to identify the filetype.

In short, there isn't a good way to display these images as .HEIC until the browser developers write in support.

Here is an article online that talks about solutions.  It was written in 2020, so there may be better options out there.

https://shkspr.mobi/blog/2020/12/coping-with-heic-in-the-browser/

The CDN option may be the best bet since you are serving the images on a mobile app.

Body:
We have a mobile app that uploads images to our web server and those images are displayed on a dashboard that opens on browsers like chrome, IE and firefox latest versions; Our users have windows 7 machines or even Android or IOS mobiles; Images with extension .HEIC uploaded from IOS 11 are not displayed properly on any device; Before telling me that Windows 7 and ANDROID do not support .HEIC images, I have taken the image from the webserver to my PC: can anybody tell me why if I right click on that image and open it with any browser it opens successfully ?! And why, using the same browser, it won't be displayed through the dashboard ? I need to know if I can fix the problem somehow before I convert it to any compatible type like jpeg or png. Below is my dashboard final code and examples of errors thrown by the browsers:

 29-06-2018 09-37-16 AM-505

  29-06-2018 09-37-16 AM-739

  29-06-2018 09-37-16 AM-942

Chrome has logged in the console: Failed to load resource: the server responded with a status of 404 (Not Found), if I paste the source in the browser same error is thrown

IE 11 did not log any error and image is not displayed

FireFox did log any error and image is not displayed as well

Safari has logged the same error as chrome

BUT the image exists in the folder as the 2 others; The 3 have the same URL but their names and extensions differ a bit ... Any hints?

Body:
In your url, there is an extra / after the 10.

http://myImageURL.com/My_Folder/10//2018/0618/123456/CLIENT%5C29-06-2018%2009-37-16%20AM-942.HEIC

I'm assuming this was a typo when submitting here.

For HEIC, it is an Apple format on iOS.  The browsers do not support this file type due to licensing agreements.  I'm guessing your computer was somehow converting the image or the program was able to identify the filetype.

In short, there isn't a good way to display these images as .HEIC until the browser developers write in support.

Here is an article online that talks about solutions.  It was written in 2020, so there may be better options out there.

https://shkspr.mobi/blog/2020/12/coping-with-heic-in-the-browser/

The CDN option may be the best bet since you are serving the images on a mobile app.