问:
Error: require() of ES modules is not supported when importing node-fetch
I'm creating a program to analyze security camera streams and got stuck on the very first line. At the moment my .js file has nothing but the import of node-fetch and it gives me an error message. What am I doing wrong?

Running Ubuntu 20.04.2 LTS in Windows Subsystem for Linux.

Node version:

```<code>user@MYLLYTIN:~/CAMSERVER$ node -v
v14.17.6
</code>```

node-fetch package version:

```<code>user@MYLLYTIN:~/CAMSERVER$ npm v node-fetch

node-fetch@3.0.0 | MIT | deps: 2 | versions: 63
A light-weight module that brings Fetch API to node.js
https://github.com/node-fetch/node-fetch

keywords: fetch, http, promise, request, curl, wget, xhr, whatwg

dist
.tarball: https://registry.npmjs.org/node-fetch/-/node-fetch-3.0.0.tgz
.shasum: 79da7146a520036f2c5f644e4a26095f17e411ea
.integrity: sha512-bKMI+C7/T/SPU1lKnbQbwxptpCrG9ashG+VkytmXCPZyuM9jB6VU+hY0oi4lC8LxTtAeWdckNCTa3nrGsAdA3Q==
.unpackedSize: 75.9 kB

dependencies:
data-uri-to-buffer: ^3.0.1 fetch-blob: ^3.1.2

maintainers:
- endless <jimmy@warting.se>
- bitinn <bitinn@gmail.com>
- timothygu <timothygu99@gmail.com>
- akepinski <npm@kepinski.ch>

dist-tags:
latest: 3.0.0        next: 3.0.0-beta.10

published 3 days ago by endless <jimmy@warting.se>
</code>```

esm package version:

```<code>user@MYLLYTIN:~/CAMSERVER$ npm v esm

esm@3.2.25 | MIT | deps: none | versions: 140
Tomorrow's ECMAScript modules today!
https://github.com/standard-things/esm#readme

keywords: commonjs, ecmascript, export, import, modules, node, require

dist
.tarball: https://registry.npmjs.org/esm/-/esm-3.2.25.tgz
.shasum: 342c18c29d56157688ba5ce31f8431fbb795cc10
.integrity: sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==
.unpackedSize: 308.6 kB

maintainers:
- jdalton <john.david.dalton@gmail.com>

dist-tags:
latest: 3.2.25

published over a year ago by jdalton <john.david.dalton@gmail.com>
</code>```

Contents of the .js file (literally nothing but the import):

```<code>user@MYLLYTIN:~/CAMSERVER$ cat server.js
import fetch from "node-fetch";
</code>```

Result:

```<code>user@MYLLYTIN:~/CAMSERVER$ node -r esm server.js
/home/user/CAMSERVER/node_modules/node-fetch/src/index.js:1
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/user/CAMSERVER/node_modules/node-fetch/src/index.js
require() of ES modules is not supported.
require() of /home/user/CAMSERVER/node_modules/node-fetch/src/index.js from /home/user/CAMSERVER/server.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/user/CAMSERVER/node_modules/node-fetch/package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1089:13) {
  code: 'ERR_REQUIRE_ESM'
}
user@MYLLYTIN:~/CAMSERVER$
</code>```

答:
Many times that error happens through the current version of fetch what we can do to solve it, is to install a previous version I tried it and it worked for me.

to install the previous version:
npm i node-fetch@2.6.1 or whatever you prefer.

Body:
I'm creating a program to analyze security camera streams and got stuck on the very first line. At the moment my .js file has nothing but the import of node-fetch and it gives me an error message. What am I doing wrong?

Running Ubuntu 20.04.2 LTS in Windows Subsystem for Linux.

Node version:

user@MYLLYTIN:~/CAMSERVER$ node -v
v14.17.6

node-fetch package version:

user@MYLLYTIN:~/CAMSERVER$ npm v node-fetch

node-fetch@3.0.0 | MIT | deps: 2 | versions: 63
A light-weight module that brings Fetch API to node.js
https://github.com/node-fetch/node-fetch

keywords: fetch, http, promise, request, curl, wget, xhr, whatwg

dist
.tarball: https://registry.npmjs.org/node-fetch/-/node-fetch-3.0.0.tgz
.shasum: 79da7146a520036f2c5f644e4a26095f17e411ea
.integrity: sha512-bKMI+C7/T/SPU1lKnbQbwxptpCrG9ashG+VkytmXCPZyuM9jB6VU+hY0oi4lC8LxTtAeWdckNCTa3nrGsAdA3Q==
.unpackedSize: 75.9 kB

dependencies:
data-uri-to-buffer: ^3.0.1 fetch-blob: ^3.1.2

maintainers:
- endless <jimmy@warting.se>
- bitinn <bitinn@gmail.com>
- timothygu <timothygu99@gmail.com>
- akepinski <npm@kepinski.ch>

dist-tags:
latest: 3.0.0        next: 3.0.0-beta.10

published 3 days ago by endless <jimmy@warting.se>

esm package version:

user@MYLLYTIN:~/CAMSERVER$ npm v esm

esm@3.2.25 | MIT | deps: none | versions: 140
Tomorrow's ECMAScript modules today!
https://github.com/standard-things/esm#readme

keywords: commonjs, ecmascript, export, import, modules, node, require

dist
.tarball: https://registry.npmjs.org/esm/-/esm-3.2.25.tgz
.shasum: 342c18c29d56157688ba5ce31f8431fbb795cc10
.integrity: sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==
.unpackedSize: 308.6 kB

maintainers:
- jdalton <john.david.dalton@gmail.com>

dist-tags:
latest: 3.2.25

published over a year ago by jdalton <john.david.dalton@gmail.com>

Contents of the .js file (literally nothing but the import):

user@MYLLYTIN:~/CAMSERVER$ cat server.js
import fetch from "node-fetch";

Result:

user@MYLLYTIN:~/CAMSERVER$ node -r esm server.js
/home/user/CAMSERVER/node_modules/node-fetch/src/index.js:1
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/user/CAMSERVER/node_modules/node-fetch/src/index.js
require() of ES modules is not supported.
require() of /home/user/CAMSERVER/node_modules/node-fetch/src/index.js from /home/user/CAMSERVER/server.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/user/CAMSERVER/node_modules/node-fetch/package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1089:13) {
  code: 'ERR_REQUIRE_ESM'
}
user@MYLLYTIN:~/CAMSERVER$


来源: stackexchange

问:
Best Case and Worst Case of an Algorithm: When are they considered to be the "same"?
I am trying to determine the Best Case and Worst Case of the algorithm below but I have been really confused since our professor claims that the Best Case and Worse Case of the algorithm are the "Same"

```<code>
    import math
    def sum(Arr, left, right):
        if(left>right):
            return 0
        elif(left == right):
            return Arr[left]
        else:
            mid = left+ math.floor((right-left)/2)
            leftSum = sum(Arr, left, mid)
            rightSum = sum(Arr, mid+1, right)
            return leftSum + rightSum;
    def findSum(Arr):
        return sum(Arr, 0, len(Arr)-1)

    arr = [1,2,3,4,5,7,8,9]
    print(findSum(arr));

</code>```

The algorithm finds the sum of an array by divide-and-conquer, and here were my initial thought:

Best Case:
The input array only has 1 element, hence it would meet the second condition and return Arr[left]. No recursion is involved and takes Constant Time(O(1))

Worst Case:
The Input array could be arbitrary large(N elements), and each element needs to be scanned once at least, and it would take
Linear Time(O(N))

I saw an explanation from another post with similar questions, and the explanation was that no matter how large/small the input array is, the algorithm has to loop over it once, so it's Linear Time for both Worse/Best Case. But I was still confused, the Best Case of the algorithm does not involve any recursion, so can we still claim that it is Linear Time(O(N)) instead of Constant Time(O(1))?

答:
Your understanding of time complexity is wrong and you are mixing it with best case worst case scenarios which makes it more confusing. An algorithm isn't considered constant when the input data is of length 1 and it does only one operation. The length of the input data has nothing to do with the best/worst case scenarios.

Time complexity relates the growth of the number of operations an algorithm does to its input data. So, we say an algorithm is constant when there is no relation between the input data and the number of operations. Or an algorithm is linear if the number of its operations grows linearly compared to the quantity of the input data.

The best/worst case scenarios are about the content of the data and how it's already structured. This is relevant in say, some sorting algorithms. Insertion sort for example, will only do linear work if the data is already sorted (best case) but quadratic work if it isn't. On the other hand, merge sort will do linearithmic work regardless of the sorting status of the input data.

I repeat, time complexity is the rate of growth of the number of operations an algorithm does in relation to the growth of its input data.

Now, to your example, does the data (not its quantity) have any impact on your algorithm? Does it matter for summing whether the numbers are say sorted or not? Or whether they are small or large (within reason of course)? It does not. The work is always the same. So the best and worst case become the same as your Professor says.

ContentLicense: CC BY-SA 4.0

Body:
I am trying to determine the Best Case and Worst Case of the algorithm below but I have been really confused since our professor claims that the Best Case and Worse Case of the algorithm are the "Same"

    import math
    def sum(Arr, left, right):
        if(left>right):
            return 0
        elif(left == right):
            return Arr[left]
        else:
            mid = left+ math.floor((right-left)/2)
            leftSum = sum(Arr, left, mid)
            rightSum = sum(Arr, mid+1, right)
            return leftSum + rightSum;
    def findSum(Arr):
        return sum(Arr, 0, len(Arr)-1)

    arr = [1,2,3,4,5,7,8,9]
    print(findSum(arr));

The algorithm finds the sum of an array by divide-and-conquer, and here were my initial thought:

Best Case:
The input array only has 1 element, hence it would meet the second condition and return Arr[left]. No recursion is involved and takes Constant Time(O(1))

Worst Case:
The Input array could be arbitrary large(N elements), and each element needs to be scanned once at least, and it would take
Linear Time(O(N))

I saw an explanation from another post with similar questions, and the explanation was that no matter how large/small the input array is, the algorithm has to loop over it once, so it's Linear Time for both Worse/Best Case. But I was still confused, the Best Case of the algorithm does not involve any recursion, so can we still claim that it is Linear Time(O(N)) instead of Constant Time(O(1))?


问:
Include mapping table property reference with LINQ query
I have following Schema in EF Code First Architecture.

Class Teacher

```<code>public class Teacher
{
[Key]
public int Teacher_PK { get; set; }
public string Name { get; set; }
public int Age { get; set; }
public virtual ICollection<TeacherClassroom> TeacherClassroom { get; set; } // I have added this to access classroom class's property
}
</code>```

Class Classroom

```<code>public class Classroom
{
[Key]
public int Classroom_PK { get; set; }
public string ClassName { get; set; }
public int ClassStrength { get; set; }
}
</code>```

I have made a table to establish relationship b/w those tables.

```<code>public class TeacherClassroom
{
[Key]
public int TecherClassroom_PK { get; set; }

[ForeignKey("Teacher_FK")]
public virtual Teacher Teacher { get; set; }

[Required]
public int Teacher_FK { get; set; }

[ForeignKey("Classroom_FK")]
public virtual Classroom Classroom { get; set; }

[Required]
public int Classroom_FK { get; set; }
}
</code>```

Now I want to access Classroom class's property from Teacher class, for that I have added a virtual ICollection<TeacherClassroom> in Teacher class, but I can not get the data of classroom class's property.

So far I have tried follwing

```<code>var teacher = await _context.Teacher.Include(c=>c.TeacherClassroom.Select(y=>y.Classroom))
                .FirstOrDefaultAsync(m => m.Teacher_PK == id);
</code>```

In the above Sentence I am getting Classroom Property as null.

Thank You in Advance.

答:
```<code>var teacher = await _context.Teacher.SelectMany(m=> m.TeacherClassroom).FirstOrDefaultAsync(m => m.Teacher_PK == id);
</code>```

Can you try?

"The SelectMany() keyword creates a new collection as a result of combining the two collections according to the common fields"

Body:
I have following Schema in EF Code First Architecture.

Class Teacher

public class Teacher
{
[Key]
public int Teacher_PK { get; set; }
public string Name { get; set; }
public int Age { get; set; }
public virtual ICollection<TeacherClassroom> TeacherClassroom { get; set; } // I have added this to access classroom class's property
}

Class Classroom

public class Classroom
{
[Key]
public int Classroom_PK { get; set; }
public string ClassName { get; set; }
public int ClassStrength { get; set; }
}

I have made a table to establish relationship b/w those tables.

public class TeacherClassroom
{
[Key]
public int TecherClassroom_PK { get; set; }

[ForeignKey("Teacher_FK")]
public virtual Teacher Teacher { get; set; }

[Required]
public int Teacher_FK { get; set; }

[ForeignKey("Classroom_FK")]
public virtual Classroom Classroom { get; set; }

[Required]
public int Classroom_FK { get; set; }
}

Now I want to access Classroom class's property from Teacher class, for that I have added a virtual ICollection<TeacherClassroom> in Teacher class, but I can not get the data of classroom class's property.

So far I have tried follwing

var teacher = await _context.Teacher.Include(c=>c.TeacherClassroom.Select(y=>y.Classroom))
                .FirstOrDefaultAsync(m => m.Teacher_PK == id);

In the above Sentence I am getting Classroom Property as null.

Thank You in Advance.

Body:
var teacher = await _context.Teacher.SelectMany(m=> m.TeacherClassroom).FirstOrDefaultAsync(m => m.Teacher_PK == id);

Can you try?

"The SelectMany() keyword creates a new collection as a result of combining the two collections according to the common fields"


问:
Appending a cloned row of a table to a specified position on table
```<code>function CreateInterface(){
    document.getElementById("welcome").innerHTML=
       '<form action="?" method="get" onsubmit=" return validate(this)">' +
       '<table id="dataTable" summary="" cellspacing="3" cellpadding="0" border="0">' +
       '<tr id="tablerow">' + '<td><INPUT type="checkbox" name="chk"/></td> '+
       '<th>Userid   : </th>' + '<td ><input name="userid" type="text" class="text" value="" maxlength="10" /></td>' +
       '</tr>' + '<tr><td colspan="2" align="center">'+
       '<INPUT type="button" value="Add" onclick="addRow()" />' +
       '<INPUT type="button" value="Delete" onclick="delRow()" />' +
       '<input type="submit" value="submit" />'+'</td></tr>' +
       '</table>' +
       '</form>';
}

function addRow(){

  var clnNode=document.getElementById("tablerow").cloneNode(true);
  document.getElementById("dataTable").appendChild(clnNode);
}
</code>```

This is my code , i want this cloned node to be inserted above the buttons. In fact this code is not working, i.e. node is not getting added to table. Please help me solve this

答:
You need to use insertBefore and pass lastChild as second parameter to insert the cloned row just above buttons.

```<code>function addRow(){
    var table=document.getElementById("dataTable")
    var clnNode=document.getElementById("tablerow").cloneNode(true);
    table.insertBefore(clnNode,table.lastChild);
}
</code>```

Here is working example: http://jsfiddle.net/amantur/8KYum/10/

As for code is not working, you are not calling CreateInterface from anywhere. Set it up to run on onLoad and things will work.

ContentLicense: CC BY-SA 3.0

Body:
function CreateInterface(){
    document.getElementById("welcome").innerHTML=
       '<form action="?" method="get" onsubmit=" return validate(this)">' +
       '
' +
       '
' + '<INPUT type="checkbox" name="chk"/>	 '+
       'Userid   : 	' + '<input name="userid" type="text" class="text" value="" maxlength="10" />	' +
       '
' + '
'+
       '<INPUT type="button" value="Add" onclick="addRow()" />' +
       '<INPUT type="button" value="Delete" onclick="delRow()" />' +
       '<input type="submit" value="submit" />'+'
' +
       '
' +
       '</form>';
}

function addRow(){

  var clnNode=document.getElementById("tablerow").cloneNode(true);
  document.getElementById("dataTable").appendChild(clnNode);
}

This is my code , i want this cloned node to be inserted above the buttons. In fact this code is not working, i.e. node is not getting added to table. Please help me solve this

Body:
You need to use insertBefore and pass lastChild as second parameter to insert the cloned row just above buttons.

function addRow(){
    var table=document.getElementById("dataTable")
    var clnNode=document.getElementById("tablerow").cloneNode(true);
    table.insertBefore(clnNode,table.lastChild);
}

Here is working example: http://jsfiddle.net/amantur/8KYum/10/

As for code is not working, you are not calling CreateInterface from anywhere. Set it up to run on onLoad and things will work.


问:
How to parse XML correctly by specifying the parent of the subcategories?
Faced with such a problem. It is necessary to pair categories with subcategories genres from liters, I want to do this through a simple function without bicycles. At this link, the generated XML with genres, which needs to be parsed by substituting the id attribute as the parent to the child sections.

There is such an XML structure:

```<code><genres>
        <genre id="5003" title="бизнес-книги" type="root">
                <genre id="5049" title="банковское дело" token="bankovskoe_delo" type="genre"/>
                <genre id="210646" title="бизнес-справочники" token="business-spravochniki" type="genre"/>
                <genre id="5051" title="бухучет / налогообложение / аудит" token="buhuchet_nalogooblozhenie_audit" type="genre"/>
                <genre id="6784" title="государственное и муниципальное управление" token="gosudarstvennoe_i_munitsipalnoe_upravlenie" type="genre"/>
                <genre id="5060" title="делопроизводство" token="deloproizvodstvo" type="genre"/>
                <genre id="5061" title="зарубежная деловая литература" token="zarubezhnaya_delovaya_literatura" type="genre"/>
                <genre id="5062" title="интернет-бизнес" token="internet" type="genre"/>
                 <genre id="5047" title="кадровый менеджмент" token="kadrovyj_menedzhment" type="container">
                          <genre id="5334" title="аттестация персонала" token="attestaciya_personala" type="genre"/>
                          <genre id="5330" title="гендерные различия" token="gendernyye_razlichiya" type="genre"/>
                          <genre id="5332" title="конфликты" token="konflikty" type="genre"/>
                          <genre id="5336" title="коучинг" token="kouching" type="genre"/>
                          <genre id="5333" title="мотивация" token="motivaciya" type="genre"/>
                          <genre id="5335" title="поиск и подбор персонала" token="poisk_presonala_hr" type="genre"/>
                          <genre id="5331" title="тимбилдинг" token="timbilding" type="genre"/>
                          <genre id="6583" title="управление персоналом" token="upravlenie_personalom" type="genre"/>
                 </genre>
...
</genres>
</code>```

PHP Code:

```<code>$url = 'https://partnersdnld.litres.ru/genres_list_2/';

$dom = new DOMDocument('1.0', 'utf-8');

$dom->load($url);
$xpath = new DOMXpath($dom);

foreach ($xpath->evaluate('//genre') as $node) {
    var_dump(
        [
            'parent_id' => $xpath->evaluate('string(ancestor::genre[1]/id)', $node),
            'id' => $xpath->evaluate('string(id)', $node),
            'title' => $xpath->evaluate('string(title)', $node),
        ]
    );
}
</code>```

And he got confused in the sections and attributes. Can someone tell me why it outputs empty results and how to parse parent_id and the rest of the data correctly?

答:
The attributes are on a different Xpath axis. id is short for child::id and will fetch the element node on the child axis. For the attribute axis use attribute::id or the shortcut @id.

Additionally to fetch the attribute from the context node I would suggest using the DOM method. No need for Xpath in this case:

foreach ($xpath->evaluate('//genre') as $node) {
    var_dump(
        [
            'parent_id' => $xpath->evaluate('string(ancestor::genre[1]/@id)', $node),
            'id' => $node->getAttribute('id'),
            'title' => $node->getAttribute('title'),
        ]
    );
}
```

Body:
Faced with such a problem. It is necessary to pair categories with subcategories genres from liters, I want to do this through a simple function without bicycles. At this link, the generated XML with genres, which needs to be parsed by substituting the id attribute as the parent to the child sections.

There is such an XML structure:

<genres>
        <genre id="5003" title="бизнес-книги" type="root">
                <genre id="5049" title="банковское дело" token="bankovskoe_delo" type="genre"/>
                <genre id="210646" title="бизнес-справочники" token="business-spravochniki" type="genre"/>
                <genre id="5051" title="бухучет / налогообложение / аудит" token="buhuchet_nalogooblozhenie_audit" type="genre"/>
                <genre id="6784" title="государственное и муниципальное управление" token="gosudarstvennoe_i_munitsipalnoe_upravlenie" type="genre"/>
                <genre id="5060" title="делопроизводство" token="deloproizvodstvo" type="genre"/>
                <genre id="5061" title="зарубежная деловая литература" token="zarubezhnaya_delovaya_literatura" type="genre"/>
                <genre id="5062" title="интернет-бизнес" token="internet" type="genre"/>
                 <genre id="5047" title="кадровый менеджмент" token="kadrovyj_menedzhment" type="container">
                          <genre id="5334" title="аттестация персонала" token="attestaciya_personala" type="genre"/>
                          <genre id="5330" title="гендерные различия" token="gendernyye_razlichiya" type="genre"/>
                          <genre id="5332" title="конфликты" token="konflikty" type="genre"/>
                          <genre id="5336" title="коучинг" token="kouching" type="genre"/>
                          <genre id="5333" title="мотивация" token="motivaciya" type="genre"/>
                          <genre id="5335" title="поиск и подбор персонала" token="poisk_presonala_hr" type="genre"/>
                          <genre id="5331" title="тимбилдинг" token="timbilding" type="genre"/>
                          <genre id="6583" title="управление персоналом" token="upravlenie_personalom" type="genre"/>
                 </genre>
...
</genres>

PHP Code:

$url = 'https://partnersdnld.litres.ru/genres_list_2/';

$dom = new DOMDocument('1.0', 'utf-8');

$dom->load($url);
$xpath = new DOMXpath($dom);

foreach ($xpath->evaluate('//genre') as $node) {
    var_dump(
        [
            'parent_id' => $xpath->evaluate('string(ancestor::genre[1]/id)', $node),
            'id' => $xpath->evaluate('string(id)', $node),
            'title' => $xpath->evaluate('string(title)', $node),
        ]
    );
}

And he got confused in the sections and attributes. Can someone tell me why it outputs empty results and how to parse parent_id and the rest of the data correctly?


问:
InputAccessoryView / View Pinned to Keyboard with SwiftUI
Is there an equivalent to InputAccessoryView in SwiftUI (or any indication one is coming?)

And if not, how would you emulate the behavior of an InputAccessoryView (i.e. a view pinned to the top of the keyboard)? Desired behavior is something like iMessage, where there is a view pinned to the bottom of the screen that animates up when the keyboard is opened and is positioned directly above the keyboard. For example:

Keyboard closed:

Keyboard open:

答:
You can do it this way without using a UIViewRepresentable.
Its based on https://stackoverflow.com/a/67502495/5718200</p>
```<code>.onReceive(NotificationCenter.default.publisher(for: UITextField.textDidBeginEditingNotification)) { notification in
        if let textField = notification.object as? UITextField {
            let yourAccessoryView = UIToolbar()
            // set your frame, buttons here
            textField.inputAccessoryView = yourAccessoryView
        }
    }
}
</code>```

Body:
You can do it this way without using a UIViewRepresentable.
Its based on https://stackoverflow.com/a/67502495/5718200

.onReceive(NotificationCenter.default.publisher(for: UITextField.textDidBeginEditingNotification)) { notification in
        if let textField = notification.object as? UITextField {
            let yourAccessoryView = UIToolbar()
            // set your frame, buttons here
            textField.inputAccessoryView = yourAccessoryView
        }
    }
}


问:
How would you convert List<T> to Vector<T> C#
I'm using the vectors C# library using System.Numerics;
I need to convert List to a Vector

I've tried implicitly and explicitly converting the type but it does not have inbuilt compatibility.
I have read the documentation looking for a method that can do do this conversion, but didn't find any suitable.

I know I could achieve this conversion using a simple for loop but doing this conversion many times within my program seems terribly inefficient and I'm wondering if anyone knows of a better way to get the same result.

答:
Vector<T> has a constructor which takes a Span<T>, and CollectionsMarshal.AsSpan lets you get a Span<T> from a List<T>.

E.g.:

```<code>var list = new List<int>() { 1, 2, 3, 4, 5, 6, 7, 8 };
var vector = new Vector<int>(CollectionsMarshal.AsSpan(list));
</code>```

See on SharpLab.

This results in a single memory copy from the contents of the array backing the List<T>, to the memory backing the Vector<T>.

Heed the warnings in the docs for CollectionsMarshal.AsSpan: it returns a reference to the array which is currently backing the List<T>, but that will change if the list is updated. For just taking a snapshot for copying into a Vector<T>, however, it's fine.

Body:
Vector<T> has a constructor which takes a Span<T>, and CollectionsMarshal.AsSpan lets you get a Span<T> from a List<T>.

E.g.:

var list = new List<int>() { 1, 2, 3, 4, 5, 6, 7, 8 };
var vector = new Vector<int>(CollectionsMarshal.AsSpan(list));

See on SharpLab.

This results in a single memory copy from the contents of the array backing the List<T>, to the memory backing the Vector<T>.

Heed the warnings in the docs for CollectionsMarshal.AsSpan: it returns a reference to the array which is currently backing the List<T>, but that will change if the list is updated. For just taking a snapshot for copying into a Vector<T>, however, it's fine.


问:
first search algorithm
I need to use the first search algorithm

Can anyone assist me in regards how I use first search algorithm?

Thanks in advance

答: Expanding the states by alphabetical order from Node A the below is the Open/Closed list maintained for Depth First Search traveral for the above graph. Answer:

Title: first search algorithm


问:
Load external XAML file using LoadComponent
I have found some evidence that this is possible,

```<code>self.scene = Canvas()
Application.LoadComponent(self.scene, Uri('app.xaml', UriKind.Relative))
</code>```

but my code is failing:

```<code>class Program
{
    [STAThread]
    static void Main(string[] args)
    {
        Canvas scene = new Canvas();
        Application.LoadComponent(scene, new Uri("app.xaml", UriKind.Relative));
    }
}
</code>```

I am using the same app.xaml with 'Build Action: None', and 'Copy always".

```<code><Canvas
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="System.Windows.Controls.Canvas"
    x:Name="ball_design" >

    <Canvas x:Name="workaround_canvas" >

        <TextBlock x:Name="fps" Canvas.Left="10" Canvas.Top="10" Height="40" Canvas.ZIndex="10000" Text="-- fps" />
    <Canvas x:Name="wpfe_ball_0" Width="52" Height="52" Canvas.Left="0" Canvas.Top="30">
      <!-- Layer 3/<Group>/<Path> -->
      <Path Opacity="0.900000" StrokeThickness="2.000000" Stroke="#ffa6d000" StrokeMiterLimit="1.000000" Fill="#ffcbff00" Data="F1 M 51.000000,26.000000 C 51.000000,39.806641 39.807129,51.000000 26.000000,51.000000 C 12.192871,51.000000 1.000000,39.806641 1.000000,26.000000 C 1.000000,12.193359 12.192871,1.000000 26.000000,1.000000 C 39.807129,1.000000 51.000000,12.193359 51.000000,26.000000 Z"/>

      <!-- Layer 3/<Group>/<Path> -->
      <Path Opacity="0.740000" Data="F1 M 43.143066,13.087891 C 50.602051,22.888672 49.009766,36.642578 39.590332,43.812500 C 30.170898,50.980469 16.489258,48.842773 9.032715,39.042969 C 1.573242,29.240234 3.166016,15.486328 12.584961,8.316406 C 22.003906,1.149414 35.685547,3.285156 43.143066,13.087891 Z">
        <Path.Fill>
          <RadialGradientBrush MappingMode="Absolute" GradientOrigin="156.791016,170.453125" Center="156.791016,170.453125" RadiusX="53.626404" RadiusY="53.626404">
            <RadialGradientBrush.GradientStops>
              <GradientStop Offset="0.000000" Color="#ffffffff"/>
              <GradientStop Offset="0.361685" Color="#fff5f7dd"/>
              <GradientStop Offset="0.415730" Color="#ffebf0bc"/>
              <GradientStop Offset="1.000000" Color="#ffcbff00"/>
            </RadialGradientBrush.GradientStops>
            <RadialGradientBrush.Transform>
              <MatrixTransform Matrix="1.190000,0.165000,-0.165000,-1.281300,-113.414185,241.757843" />
            </RadialGradientBrush.Transform>
          </RadialGradientBrush>
        </Path.Fill>
      </Path>

      <!-- Layer 3/<Group>/<Path> -->
      <Path Fill="#ffffffff" Data="F1 M 23.100586,9.477539 C 24.741699,11.634766 23.116211,15.630859 19.470703,18.404297 C 15.825684,21.178711 11.540039,21.678711 9.899414,19.522461 C 8.258301,17.365234 9.883789,13.369141 13.529297,10.594727 C 17.174316,7.821289 21.459961,7.321289 23.100586,9.477539 Z"/>
    </Canvas>
    <TextBlock x:Name="dbgwin" FontSize="10" Canvas.Top="10" Canvas.Left="250" Height="500" Width="200" Text="IronPython DLR" />

  </Canvas>
</Canvas>
</code>```

I get IOException: Cannot locate resource 'app.xaml'.

What is a solution?

答: You will need Absolute File URI including entire file://c:/ etc.. because Relative is used inside the application's resources only.</p>

ContentLicense: CC BY-SA 2.5

Body:
I have found some evidence that this is possible,

self.scene = Canvas()
Application.LoadComponent(self.scene, Uri('app.xaml', UriKind.Relative))

but my code is failing:

class Program
{
    [STAThread]
    static void Main(string[] args)
    {
        Canvas scene = new Canvas();
        Application.LoadComponent(scene, new Uri("app.xaml", UriKind.Relative));
    }
}

I am using the same app.xaml with 'Build Action: None', and 'Copy always".

<Canvas
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="System.Windows.Controls.Canvas"
    x:Name="ball_design" >

    <Canvas x:Name="workaround_canvas" >

        <TextBlock x:Name="fps" Canvas.Left="10" Canvas.Top="10" Height="40" Canvas.ZIndex="10000" Text="-- fps" />
    <Canvas x:Name="wpfe_ball_0" Width="52" Height="52" Canvas.Left="0" Canvas.Top="30">

      <Path Opacity="0.900000" StrokeThickness="2.000000" Stroke="#ffa6d000" StrokeMiterLimit="1.000000" Fill="#ffcbff00" Data="F1 M 51.000000,26.000000 C 51.000000,39.806641 39.807129,51.000000 26.000000,51.000000 C 12.192871,51.000000 1.000000,39.806641 1.000000,26.000000 C 1.000000,12.193359 12.192871,1.000000 26.000000,1.000000 C 39.807129,1.000000 51.000000,12.193359 51.000000,26.000000 Z"/>

      <Path Opacity="0.740000" Data="F1 M 43.143066,13.087891 C 50.602051,22.888672 49.009766,36.642578 39.590332,43.812500 C 30.170898,50.980469 16.489258,48.842773 9.032715,39.042969 C 1.573242,29.240234 3.166016,15.486328 12.584961,8.316406 C 22.003906,1.149414 35.685547,3.285156 43.143066,13.087891 Z">
        <Path.Fill>
          <RadialGradientBrush MappingMode="Absolute" GradientOrigin="156.791016,170.453125" Center="156.791016,170.453125" RadiusX="53.626404" RadiusY="53.626404">
            <RadialGradientBrush.GradientStops>
              <GradientStop Offset="0.000000" Color="#ffffffff"/>
              <GradientStop Offset="0.361685" Color="#fff5f7dd"/>
              <GradientStop Offset="0.415730" Color="#ffebf0bc"/>
              <GradientStop Offset="1.000000" Color="#ffcbff00"/>
            </RadialGradientBrush.GradientStops>
            <RadialGradientBrush.Transform>
              <MatrixTransform Matrix="1.190000,0.165000,-0.165000,-1.281300,-113.414185,241.757843" />
            </RadialGradientBrush.Transform>
          </RadialGradientBrush>
        </Path.Fill>
      </Path>

      <Path Fill="#ffffffff" Data="F1 M 23.100586,9.477539 C 24.741699,11.634766 23.116211,15.630859 19.470703,18.404297 C 15.825684,21.178711 11.540039,21.678711 9.899414,19.522461 C 8.258301,17.365234 9.883789,13.369141 13.529297,10.594727 C 17.174316,7.821289 21.459961,7.321289 23.100586,9.477539 Z"/>
    </Canvas>
    <TextBlock x:Name="dbgwin" FontSize="10" Canvas.Top="10" Canvas.Left="250" Height="500" Width="200" Text="IronPython DLR" />

  </Canvas>
</Canvas>

I get IOException: Cannot locate resource 'app.xaml'.

What is a solution?

LastEditorDisplayName: Shay Erlichmen

OwnerDisplayName: Akash Kava


问:
How do I preserve side data when concatenating files in ffmpeg?
I have multiple 360 videos that I'm trying to concatenate in ffmpeg.  The command it self is pretty straightforward:

```<code>ffmpeg -f concat -i 0036_concat.txt -c copy -strict unofficial 36.mp4
</code>```

where 0036_concat.txt is just a list of the individual files.  The issue I'm having is that I can't get ffmpeg to preserve side data.  Very simply put, ffprobe on any of the source files includes this:

```<code>Side data:
  spherical: equirectangular (0.000000/0.000000/0.000000)
</code>```

And I can't, for the life of me, get that to propagate to the output file.

this question has a solution that works for single files, but it doesn't work when concatenating multiple files.

I'd be perfectly fine injecting that entire string if anyone knows how.

答:
Although it seems like ffmpeg doesn't support this, I found that ExifTool seems to do the job. Run this command after your ffmpeg concat:</p>
```<code>exiftool -tagsFromFile first_file_inside_concat_file.mp4 -all:all 36.mp4
</code>```

Body:
I have multiple 360 videos that I'm trying to concatenate in ffmpeg.  The command it self is pretty straightforward:

ffmpeg -f concat -i 0036_concat.txt -c copy -strict unofficial 36.mp4

where 0036_concat.txt is just a list of the individual files.  The issue I'm having is that I can't get ffmpeg to preserve side data.  Very simply put, ffprobe on any of the source files includes this:

Side data:
  spherical: equirectangular (0.000000/0.000000/0.000000)

And I can't, for the life of me, get that to propagate to the output file.

this question has a solution that works for single files, but it doesn't work when concatenating multiple files.

I'd be perfectly fine injecting that entire string if anyone knows how.

Body:
Although it seems like ffmpeg doesn't support this, I found that ExifTool seems to do the job. Run this command after your ffmpeg concat:

exiftool -tagsFromFile first_file_inside_concat_file.mp4 -all:all 36.mp4


问:
Use boolean key from class in widget | Flutter
First things first I wanna mention that I'm relatively nooby at using keys and classes to make the code cleaner. I just started with this project and I'm thankful about all information you can add to the answer of my question.

I have following class:

```<code>class SideMenuItem extends StatelessWidget {
  const SideMenuItem({
    Key? key,
    this.isActive,
    this.isHover = false,
    this.itemCount,
    this.showBorder = true,
    @required this.icon,
    @required this.title,
    @required this.press,
  }) : super(key: key);

  final bool? isActive, isHover, showBorder;
  final int? itemCount;
  final Icon? icon;
  final String? title;
  final VoidCallback? press;

  @override
  Widget build(BuildContext context) {
  ...
  Row(
    children: [
      icon!,
      const SizedBox(width: kDefaultPadding * 0.75),
      Text(
        title!,
        style: Theme.of(context).textTheme.button?.copyWith(
              color: (isActive! || isHover!)
                  ? kTextColor
                  : kGrayColor,
                 ),
       ),
       const Spacer(),
     ],
   ),
  ...
}
</code>```

And this widget I wanna make use of isActive and isHovered as well:

```<code>            SideMenuItem(
                icon: Icon(Icons.inbox, size: 20, color: (isActive || isHover) ? kPrimaryColor : kGrayColor,),
                title: "Bestellungen",
                press: () {})
</code>```

But as you might now I can't use the both variables in the other widget. Any help?

Thanks

答:
style can receive null if it can't find  Theme.of(context).textTheme.button.

To have hovered effect, you can wrap SideMenuItem with InkWell by providing its hoverColor  or making it transparent and using onHover callback.

//state level
bool isHover = false;
bool isActive = false;
 ....

InkWell(
    onTap: () {},
    hoverColor: Colors.transparent,
    onHover: (value) {
      setState(() {
        isHover = value;
      });
    },
    child: SideMenuItem(
      title: "Bestellungen",
      isActive: isActive,
      isHover: isHover,
    ),
  ),

```

Body:
First things first I wanna mention that I'm relatively nooby at using keys and classes to make the code cleaner. I just started with this project and I'm thankful about all information you can add to the answer of my question.

I have following class:

class SideMenuItem extends StatelessWidget {
  const SideMenuItem({
    Key? key,
    this.isActive,
    this.isHover = false,
    this.itemCount,
    this.showBorder = true,
    @required this.icon,
    @required this.title,
    @required this.press,
  }) : super(key: key);

  final bool? isActive, isHover, showBorder;
  final int? itemCount;
  final Icon? icon;
  final String? title;
  final VoidCallback? press;

  @override
  Widget build(BuildContext context) {
  ...
  Row(
    children: [
      icon!,
      const SizedBox(width: kDefaultPadding * 0.75),
      Text(
        title!,
        style: Theme.of(context).textTheme.button?.copyWith(
              color: (isActive! || isHover!)
                  ? kTextColor
                  : kGrayColor,
                 ),
       ),
       const Spacer(),
     ],
   ),
  ...
}

And this widget I wanna make use of isActive and isHovered as well:

            SideMenuItem(
                icon: Icon(Icons.inbox, size: 20, color: (isActive || isHover) ? kPrimaryColor : kGrayColor,),
                title: "Bestellungen",
                press: () {})

But as you might now I can't use the both variables in the other widget. Any help?

Thanks


问:
Append a txt file in .Net
I am Creating a txt file in.Net with the help of below code.

```<code>StreamWriter writerVer = new StreamWriter(@"c:\Version.txt");
writerVer.WriteLine("Version : " + Context.Parameters["ver"]);
File.SetAttributes(@"C:\Version.txt", FileAttributes.Hidden);
</code>```

Then I need to Update the file on the next line by keeping the above code as it is.

This code overrites the entire file.

```<code>StreamWriter writer = new StreamWriter(@"c:\Version.txt");
writer.WriteLine("Connection string : "+con);
</code>```

Regrads,

Sachin K

答:
Alternatively, you could use the static helper methods: File.AppendAllText or File.AppendText.

Note that the latter actually returns a StreamWriter instance, so you'll need to close it before proceeding otherwise you're relying on the GC to do it for you.

Title: Append a txt file in .Net

Body:
I am Creating a txt file in.Net with the help of below code.

StreamWriter writerVer = new StreamWriter(@"c:\Version.txt");
writerVer.WriteLine("Version : " + Context.Parameters["ver"]);
File.SetAttributes(@"C:\Version.txt", FileAttributes.Hidden);

Then I need to Update the file on the next line by keeping the above code as it is.

This code overrites the entire file.

StreamWriter writer = new StreamWriter(@"c:\Version.txt");
writer.WriteLine("Connection string : "+con);

Regrads,

Sachin K


问:
Slick Slider does not work with Bootstrap Tab
I want to slide the images using slick slider. I used the Bootstrap tab menu and each tab has to show a slick slider properly. But I have a problem. The first tab content shows slick slider without any problem but when I click the second tab it shows only one image. It does not work properly. How can I fix this problem?

<!DOCTYPE html>

  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <title>Focus Education</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />

      New

      Popular

      Recommend

```

答:
So my first impression was that there seemed to be a bit "too much" going on. I went through and simplified some things. The two biggest issues that caused it not to function as expected was you need to include active on each tab-pane class. Only include show on the "New" tab since that is the one you want to display on load.

Simplified JS ~

$(document).ready(function() {

    $('.your-class').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3
    });
});
```
<p>See it in action here ~
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code><!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <title>Focus Education</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
</head>
<style>
  * {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  body {
    padding: 15px;
    background-color: #35bb60;
  }

  div.your-class {
    opacity: 1;
  }

  .nav-tabs .nav-link {
    color: #fff;
  }

  .wrap-modal-slider {
    padding: 0 30px;
    opacity: 0;
    transition: all 0.3s;
  }

  .wrap-modal-slider.open {
    opacity: 1;
  }

  .your-class {
    width: 726px;
    margin: 0 auto;
    position: relative;
  }
  /* Arrows */

  .slick-prev,
  .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
  }

  .slick-prev:hover,
  .slick-prev:focus,
  .slick-next:hover,
  .slick-next:focus {
    color: transparent;
    outline: none;
    background: transparent;
  }

  .slick-prev:hover:before,
  .slick-prev:focus:before,
  .slick-next:hover:before,
  .slick-next:focus:before {
    opacity: 1;
  }

  .slick-prev.slick-disabled:before,
  .slick-next.slick-disabled:before {
    opacity: .25;
  }

  .slick-prev:before,
  .slick-next:before {
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;
    opacity: .75;
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .slick-prev {
    left: -25px;
  }

  [dir='rtl'] .slick-prev {
    right: -25px;
    left: auto;
  }

  .slick-prev:before {
    content: '←';
  }

  [dir='rtl'] .slick-prev:before {
    content: '→';
  }

  .slick-next {
    right: -25px;
  }

  [dir='rtl'] .slick-next {
    right: auto;
    left: -25px;
  }

  .slick-next:before {
    content: '→';
  }

  [dir='rtl'] .slick-next:before {
    content: '←';
  }
  /* Dots */

  .slick-dotted.slick-slider {
    margin-bottom: 30px;
  }

  .slick-dots {
    position: absolute;
    bottom: -25px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
  }

  .slick-dots li {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
  }

  .slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
  }

  .slick-dots li button:hover,
  .slick-dots li button:focus {
    outline: none;
  }

  .slick-dots li button:hover:before,
  .slick-dots li button:focus:before {
    opacity: 1;
  }

  .slick-dots li button:before {
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '•';
    text-align: center;
    opacity: .25;
    color: black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .slick-dots li.slick-active button:before {
    opacity: .75;
    color: black;
  }
</style>

<body>
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      New
    </li>
    <li class="nav-item">
      Popular
    </li>
    <li class="nav-item">
      Recommend
    </li>
  </ul>
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade active show" id="home" role="tabpanel" aria-labelledby="home-tab">
      <div class="your-class">
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
      </div>
    </div>
    <div class="tab-pane fade active" id="profile" role="tabpanel" aria-labelledby="profile-tab">
      <div class="your-class">
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
      </div>
    </div>
    <div class="tab-pane fade active" id="contact" role="tabpanel" aria-labelledby="contact-tab">
      <div class="your-class">
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
      </div>
    </div>
  </div>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
$(document).ready(function() {

    $('.your-class').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3
    });
});
</script>

</html>  </code>```

Body:
So my first impression was that there seemed to be a bit "too much" going on. I went through and simplified some things. The two biggest issues that caused it not to function as expected was you need to include active on each tab-pane class. Only include show on the "New" tab since that is the one you want to display on load.

Simplified JS ~

$(document).ready(function() {

    $('.your-class').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3
    });
});

See it in action here ~

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <title>Focus Education</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
</head>
<style>
  * {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  body {
    padding: 15px;
    background-color: #35bb60;
  }

  div.your-class {
    opacity: 1;
  }

  .nav-tabs .nav-link {
    color: #fff;
  }

  .wrap-modal-slider {
    padding: 0 30px;
    opacity: 0;
    transition: all 0.3s;
  }

  .wrap-modal-slider.open {
    opacity: 1;
  }

  .your-class {
    width: 726px;
    margin: 0 auto;
    position: relative;
  }
  /* Arrows */

  .slick-prev,
  .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
  }

  .slick-prev:hover,
  .slick-prev:focus,
  .slick-next:hover,
  .slick-next:focus {
    color: transparent;
    outline: none;
    background: transparent;
  }

  .slick-prev:hover:before,
  .slick-prev:focus:before,
  .slick-next:hover:before,
  .slick-next:focus:before {
    opacity: 1;
  }

  .slick-prev.slick-disabled:before,
  .slick-next.slick-disabled:before {
    opacity: .25;
  }

  .slick-prev:before,
  .slick-next:before {
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;
    opacity: .75;
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .slick-prev {
    left: -25px;
  }

  [dir='rtl'] .slick-prev {
    right: -25px;
    left: auto;
  }

  .slick-prev:before {
    content: '←';
  }

  [dir='rtl'] .slick-prev:before {
    content: '→';
  }

  .slick-next {
    right: -25px;
  }

  [dir='rtl'] .slick-next {
    right: auto;
    left: -25px;
  }

  .slick-next:before {
    content: '→';
  }

  [dir='rtl'] .slick-next:before {
    content: '←';
  }
  /* Dots */

  .slick-dotted.slick-slider {
    margin-bottom: 30px;
  }

  .slick-dots {
    position: absolute;
    bottom: -25px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
  }

  .slick-dots li {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
  }

  .slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
  }

  .slick-dots li button:hover,
  .slick-dots li button:focus {
    outline: none;
  }

  .slick-dots li button:hover:before,
  .slick-dots li button:focus:before {
    opacity: 1;
  }

  .slick-dots li button:before {
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '•';
    text-align: center;
    opacity: .25;
    color: black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .slick-dots li.slick-active button:before {
    opacity: .75;
    color: black;
  }
</style>

<body>
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">New</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Popular</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Recommend</a>
    </li>
  </ul>
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade active show" id="home" role="tabpanel" aria-labelledby="home-tab">
      <div class="your-class">
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
      </div>
    </div>
    <div class="tab-pane fade active" id="profile" role="tabpanel" aria-labelledby="profile-tab">
      <div class="your-class">
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
      </div>
    </div>
    <div class="tab-pane fade active" id="contact" role="tabpanel" aria-labelledby="contact-tab">
      <div class="your-class">
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/ffffff/000000" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300" alt=""></div>
        <div><img src="http://via.placeholder.com/242x300/000000/ffffff" alt=""></div>
      </div>
    </div>
  </div>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
$(document).ready(function() {

    $('.your-class').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3
    });
});
</script>

</html>


问:
Dynamically create an object with keys based on type
I have this code:

```<code>type Foo = {
  fiz: 'baz',
  bar: 'biz'
}

const foo: Partial<Foo> = {}
</code>```

Essentially, the type will change a lot, and I want to do smth like this:

```<code>Object.keys(Foo).map(key=>{
  foo[key] = null;
})
</code>```

But that's obviously impossible. Is there a way to make it work dynamically? Or am I stuck with typing each key dynamically?

Link to playground

答: Im not entirely sure what your goal is. Are you trying to ensure your objects will always start with all keys, even if they have no values?. I dont think this would be possible based on the type due to the type not existing at runtime. Instead you could create an object of that type with all keys and use the spread operator {...foo} to create other objects with those keys (Example).</p>

Body:
I have this code:

type Foo = {
  fiz: 'baz',
  bar: 'biz'
}

const foo: Partial<Foo> = {}

Essentially, the type will change a lot, and I want to do smth like this:

Object.keys(Foo).map(key=>{
  foo[key] = null;
})

But that's obviously impossible. Is there a way to make it work dynamically? Or am I stuck with typing each key dynamically?

Link to playground


问:
How to base64 encode an image using python
I have a stream of data that comes from a device and I need to convert it into a jpeg and then base64 encode it to transfer it over the network.

My Python 2.7 code so far looks like this:

```<code>from PIL import Image
import io

image = Image.open(io.BytesIO(self.imagebuffer)) # Image buffer contains the image data from the device.
image.save("test.jpg") # Writes the image to the disk in jpeg format
image.show() # Opens the image using the OS image view
</code>```

I can see I have the image I want and can save it to the disk in jpeg format.

What I don't understand is if I can base64 encode the image from the image object or if I need to write it to the disk first. I would like to avoid writing it if possible.

The 2nd question I have is what is PIL doing in this process? Is it taking the data and putting the required special codes into the file to make it a jpeg file? I think the answer tot his is yes as I can change the file extension to .bmp and the correct file is written on the disk.

So in summary, is it possible to get a base64 encoded version of my jpeg file from the image object without writing it to disk first?

答:
Please try this to base64 encode an image using python

import base64

with open("test.jpg", "rb") as image_file:
    encoded_string = base64.b64encode(image_file.read())
    print(encoded_string)
```
<p><strong>OR</strong></p>
<pre class="lang-py prettyprint-override"><code>import base64

image = open('test.jpeg', 'rb')
image_read = image.read()
image_encode = base64.b64encode(image_read)
print(image_encode)
</code>```

Body:
I have a stream of data that comes from a device and I need to convert it into a jpeg and then base64 encode it to transfer it over the network.

My Python 2.7 code so far looks like this:

from PIL import Image
import io

image = Image.open(io.BytesIO(self.imagebuffer)) # Image buffer contains the image data from the device.
image.save("test.jpg") # Writes the image to the disk in jpeg format
image.show() # Opens the image using the OS image view

I can see I have the image I want and can save it to the disk in jpeg format.

What I don't understand is if I can base64 encode the image from the image object or if I need to write it to the disk first. I would like to avoid writing it if possible.

The 2nd question I have is what is PIL doing in this process? Is it taking the data and putting the required special codes into the file to make it a jpeg file? I think the answer tot his is yes as I can change the file extension to .bmp and the correct file is written on the disk.

So in summary, is it possible to get a base64 encoded version of my jpeg file from the image object without writing it to disk first?

Body:
Please try this to base64 encode an image using python

import base64

with open("test.jpg", "rb") as image_file:
    encoded_string = base64.b64encode(image_file.read())
    print(encoded_string)

OR

import base64

image = open('test.jpeg', 'rb')
image_read = image.read()
image_encode = base64.b64encode(image_read)
print(image_encode)


问:
Replace every occurrence inside function with value
I would like to replace every occurrence of @attribute2 with a value x if the occurrence is within two curly braces. In the example below the two occurrences each in e2 and e3 should be replaced but not in e1.
How would I go about this?

```<code><div class="alert">
    <h1>e1 @attribute1,@attribute2,@attribute1,@attribute2</h1>
    <h1>e2 {{ @attribute1,@attribute2,@attribute1,@attribute2 }}</h1>
    <h1>e3 {{ addone(@attribute1,@attribute2,@attribute1,@attribute2) }}</h1>
<div>
</code>```

答:
How about the following if you can use a variable-width lookbehind and lookahead to detect the opening and closing curly braces, {{... and ...}}:

(?<={{.*)@attribute2(?=.*}})

Body:
I would like to replace every occurrence of @attribute2 with a value x if the occurrence is within two curly braces. In the example below the two occurrences each in e2 and e3 should be replaced but not in e1.
How would I go about this?

e1 @attribute1,@attribute2,@attribute1,@attribute2

e2 {{ @attribute1,@attribute2,@attribute1,@attribute2 }}

e3 {{ addone(@attribute1,@attribute2,@attribute1,@attribute2) }}


问:
Determine time of event in R
Wondering what the most effective way to determine event time in R is. Other answers seemed to not have grouping by ID, and that's a big chunk of what I need.

My data looks something like this:

```<code>time = rep(c(1:5),2)
id = c(rep(1,5),rep(2,5))
event = c(0,0,0,1,1,0,1,1,1,1)

df = data.frame(cbind(time,id,event))
df
   time id event
1     1  1     0
2     2  1     0
3     3  1     0
4     4  1     1
5     5  1     1
6     1  2     0
7     2  2     1
8     3  2     1
9     4  2     1
10    5  2     1
>
</code>```

Where "event" is binary observation (death of individual in experiment), and (should) remain 1 once it is first observed.

I need to determine the first time of event == 1, for each id number, and generate a vector of the id number and time first observed where event =1.

I originally was going to sloppily subset the data where event =1, and then just pick the minimum value of the week for each id, but that gets even sloppier when grouping by ID. Then I tried some aggregating but also struggled to do it across the ID grouping. I know tidyverse has some options but I'm a n00b.

I'm sure there's a very straightforward way to do this. Thanks!

答:
Try this if you want to keep the structure of the original dataframe

```<code>library(dplyr)

df %>%
  group_by(id) %>%
  mutate(d=ifelse(event==1, min(time[event>0]), 0)) %>%
  ungroup()
# A tibble: 10 × 4
    time    id event     d
   <dbl> <dbl> <dbl> <dbl>
 1     1     1     0     0
 2     2     1     0     0
 3     3     1     0     0
 4     4     1     1     4
 5     5     1     1     4
 6     1     2     0     0
 7     2     2     1     2
 8     3     2     1     2
 9     4     2     1     2
10     5     2     1     2
</code>```

Data

```<code>df <- structure(list(time = c(1, 2, 3, 4, 5, 1, 2, 3, 4, 5), id = c(1,
1, 1, 1, 1, 2, 2, 2, 2, 2), event = c(0, 0, 0, 1, 1, 0, 1, 1,
1, 1)), class = "data.frame", row.names = c(NA, -10L))
</code>```

Title: Determine time of event in R

Body:
Wondering what the most effective way to determine event time in R is. Other answers seemed to not have grouping by ID, and that's a big chunk of what I need.

My data looks something like this:

time = rep(c(1:5),2)
id = c(rep(1,5),rep(2,5))
event = c(0,0,0,1,1,0,1,1,1,1)

df = data.frame(cbind(time,id,event))
df
   time id event
1     1  1     0
2     2  1     0
3     3  1     0
4     4  1     1
5     5  1     1
6     1  2     0
7     2  2     1
8     3  2     1
9     4  2     1
10    5  2     1
>

Where "event" is binary observation (death of individual in experiment), and (should) remain 1 once it is first observed.

I need to determine the first time of event == 1, for each id number, and generate a vector of the id number and time first observed where event =1.

I originally was going to sloppily subset the data where event =1, and then just pick the minimum value of the week for each id, but that gets even sloppier when grouping by ID. Then I tried some aggregating but also struggled to do it across the ID grouping. I know tidyverse has some options but I'm a n00b.

I'm sure there's a very straightforward way to do this. Thanks!

Body:
Try this if you want to keep the structure of the original dataframe

library(dplyr)

df %>%
  group_by(id) %>%
  mutate(d=ifelse(event==1, min(time[event>0]), 0)) %>%
  ungroup()
# A tibble: 10 × 4
    time    id event     d
   <dbl> <dbl> <dbl> <dbl>
 1     1     1     0     0
 2     2     1     0     0
 3     3     1     0     0
 4     4     1     1     4
 5     5     1     1     4
 6     1     2     0     0
 7     2     2     1     2
 8     3     2     1     2
 9     4     2     1     2
10     5     2     1     2

Data

df <- structure(list(time = c(1, 2, 3, 4, 5, 1, 2, 3, 4, 5), id = c(1,
1, 1, 1, 1, 2, 2, 2, 2, 2), event = c(0, 0, 0, 1, 1, 0, 1, 1,
1, 1)), class = "data.frame", row.names = c(NA, -10L))


问:
Get Live Stream from a Camera connected via usb using python
I want to grab live images from a camera which is connected via USB with my computer.

I am using an Industrial Camera with usb port.

At device manager the camera is shown with its name and id so I think it is connected to PC.

I ran a 'findcam' program but it is not showing any existance of camera

```<code>import cv2

cap = cv2.VideoCapture(0)

while True:
    ret, frame = cap.read()
    cv2.imshow('Live Video', frame)
    if cv2.waitKey(1) & 0xFF == ord('q'):
        break

cap.release()
cv2.destroyAllWindows()
</code>```

The given code which i tried is running for webcam on my laptop but when the same code i run on my PC with an external camera.

it constantly showing an error.

The Error:

```<code>Traceback (most recent call last):

File "C:/Users/Admin/PycharmProjects/industrialcamera/ICvideocapture.py", line 11, in <module>

cv2.imshow('Live Video', frame)

cv2.error: OpenCV(4.1.0) C:\projects\opencv-python\opencv\modules\highgui\src\window.cpp:352: error: (-215:Assertion failed) size.width>0 && size.height>0 in function 'cv::imshow'
</code>```

I tried changing Index -1 , 0 , 1 but the error is constant

please help to find, weather it is my PC problem or camera problem or is their is any other way to stream(in python)

Thank You

答:
you can debugg by checking the ret value :</p>
```<code>import cv2
cap = cv2.VideoCapture(0)
counter = 0
while True:.
    ret, frame = cap.read()
    if ret :
        cv2.imshow('Live Video', frame)
        print(f" frame {counter} : ok ")
    if not ret :
        print(f" frame {counter} : ...")
    if cv2.waitKey(1) & 0xFF == ord('q'):
        break
cap.release()
cv2.destroyAllWindows()
</code>```

Body:
I want to grab live images from a camera which is connected via USB with my computer.

I am using an Industrial Camera with usb port.

At device manager the camera is shown with its name and id so I think it is connected to PC.

I ran a 'findcam' program but it is not showing any existance of camera

import cv2

cap = cv2.VideoCapture(0)

while True:
    ret, frame = cap.read()
    cv2.imshow('Live Video', frame)
    if cv2.waitKey(1) & 0xFF == ord('q'):
        break

cap.release()
cv2.destroyAllWindows()

The given code which i tried is running for webcam on my laptop but when the same code i run on my PC with an external camera.

it constantly showing an error.

The Error:

Traceback (most recent call last):

File "C:/Users/Admin/PycharmProjects/industrialcamera/ICvideocapture.py", line 11, in <module>

cv2.imshow('Live Video', frame)

cv2.error: OpenCV(4.1.0) C:\projects\opencv-python\opencv\modules\highgui\src\window.cpp:352: error: (-215:Assertion failed) size.width>0 && size.height>0 in function 'cv::imshow'

I tried changing Index -1 , 0 , 1 but the error is constant

please help to find, weather it is my PC problem or camera problem or is their is any other way to stream(in python)

Thank You

Body:
you can debugg by checking the ret value :

import cv2
cap = cv2.VideoCapture(0)
counter = 0
while True:.
    ret, frame = cap.read()
    if ret :
        cv2.imshow('Live Video', frame)
        print(f" frame {counter} : ok ")
    if not ret :
        print(f" frame {counter} : ...")
    if cv2.waitKey(1) & 0xFF == ord('q'):
        break
cap.release()
cv2.destroyAllWindows()


问:
Find DOM elements at top and bottom of scrolling div with jQuery
I have a scrolling div containing list items. I have this boilerplate scroll event defined

```<code>$("#scrollingDiv").scroll(function(e) {

});
</code>```

Inside of this scroll event function, how can I figure out which elements are at the top and bottom of the currently visible area?

答:
You could try computing the positions of the list items with respect to the scrolling
 and then scan the positions to see which ones match up with the scrollTop of the
.

Something like this perhaps:

```<code>var base = $('#scrollingDiv').offset().top;
var offs = [ ];
$('li').each(function() {
    var $this = $(this);
    offs.push({
        offset: $this.offset().top - base,
        height: $this.height()
    });
});
$("#scrollingDiv").scroll(function() {
    var y = this.scrollTop;
    for(var i = 0; i < offs.length; ++i) {
        if(y < offs[i].offset
        || y > offs[i].offset + offs[i].height)
            continue;
        // Entry i is at the top so do things to it.
        return;
    }
});
</code>```

Live version (open your console please): http://jsfiddle.net/ambiguous/yHH7C/

You'd probably want to play with the fuzziness of the if to get something that works sensibly (1px visible hardly makes an element the top one) but the basic idea should be clear enough. Mixing in the height of #scrollingDiv will let you see which
 is at the bottom.

If you have a lot of list items, then a linear search might not be what you want but you should be able to solve that without too much effort.

Body:
I have a scrolling div containing list items. I have this boilerplate scroll event defined

$("#scrollingDiv").scroll(function(e) {

});

Inside of this scroll event function, how can I figure out which elements are at the top and bottom of the currently visible area?

Body:
You could try computing the positions of the list items with respect to the scrolling <div> and then scan the positions to see which ones match up with the scrollTop of the <div>.

Something like this perhaps:

var base = $('#scrollingDiv').offset().top;
var offs = [ ];
$('li').each(function() {
    var $this = $(this);
    offs.push({
        offset: $this.offset().top - base,
        height: $this.height()
    });
});
$("#scrollingDiv").scroll(function() {
    var y = this.scrollTop;
    for(var i = 0; i < offs.length; ++i) {
        if(y < offs[i].offset
        || y > offs[i].offset + offs[i].height)
            continue;
        // Entry i is at the top so do things to it.
        return;
    }
});

Live version (open your console please): http://jsfiddle.net/ambiguous/yHH7C/

You'd probably want to play with the fuzziness of the if to get something that works sensibly (1px visible hardly makes an element the top one) but the basic idea should be clear enough. Mixing in the height of #scrollingDiv will let you see which <li> is at the bottom.

If you have a lot of list items, then a linear search might not be what you want but you should be able to solve that without too much effort.


问:
Include mapping table property reference with LINQ query
I have following Schema in EF Code First Architecture.

Class Teacher

```<code>public class Teacher
{
[Key]
public int Teacher_PK { get; set; }
public string Name { get; set; }
public int Age { get; set; }
public virtual ICollection<TeacherClassroom> TeacherClassroom { get; set; } // I have added this to access classroom class's property
}
</code>```

Class Classroom

```<code>public class Classroom
{
[Key]
public int Classroom_PK { get; set; }
public string ClassName { get; set; }
public int ClassStrength { get; set; }
}
</code>```

I have made a table to establish relationship b/w those tables.

```<code>public class TeacherClassroom
{
[Key]
public int TecherClassroom_PK { get; set; }

[ForeignKey("Teacher_FK")]
public virtual Teacher Teacher { get; set; }

[Required]
public int Teacher_FK { get; set; }

[ForeignKey("Classroom_FK")]
public virtual Classroom Classroom { get; set; }

[Required]
public int Classroom_FK { get; set; }
}
</code>```

Now I want to access Classroom class's property from Teacher class, for that I have added a virtual ICollection<TeacherClassroom> in Teacher class, but I can not get the data of classroom class's property.

So far I have tried follwing

```<code>var teacher = await _context.Teacher.Include(c=>c.TeacherClassroom.Select(y=>y.Classroom))
                .FirstOrDefaultAsync(m => m.Teacher_PK == id);
</code>```

In the above Sentence I am getting Classroom Property as null.

Thank You in Advance.

答:
You need to incude both levels:

_context.Teacher.Include(c => c.TeacherClassroom)
                .ThenInclude(tc => tc.Classroom)
                .FirstOrDefaultAsync(m => m.Teacher_PK == id);
```

Body:
I have following Schema in EF Code First Architecture.

Class Teacher

public class Teacher
{
[Key]
public int Teacher_PK { get; set; }
public string Name { get; set; }
public int Age { get; set; }
public virtual ICollection<TeacherClassroom> TeacherClassroom { get; set; } // I have added this to access classroom class's property
}

Class Classroom

public class Classroom
{
[Key]
public int Classroom_PK { get; set; }
public string ClassName { get; set; }
public int ClassStrength { get; set; }
}

I have made a table to establish relationship b/w those tables.

public class TeacherClassroom
{
[Key]
public int TecherClassroom_PK { get; set; }

[ForeignKey("Teacher_FK")]
public virtual Teacher Teacher { get; set; }

[Required]
public int Teacher_FK { get; set; }

[ForeignKey("Classroom_FK")]
public virtual Classroom Classroom { get; set; }

[Required]
public int Classroom_FK { get; set; }
}

Now I want to access Classroom class's property from Teacher class, for that I have added a virtual ICollection<TeacherClassroom> in Teacher class, but I can not get the data of classroom class's property.

So far I have tried follwing

var teacher = await _context.Teacher.Include(c=>c.TeacherClassroom.Select(y=>y.Classroom))
                .FirstOrDefaultAsync(m => m.Teacher_PK == id);

In the above Sentence I am getting Classroom Property as null.

Thank You in Advance.


问:
uncheck debug mode in Websphere Application Server through script
i need to uncheck Websphere Aplication Server debug mode through script,I'm WAS 7.0 server running on Windows 2008R2 64bit.</p>

答:
You can disable debug mode even if Websphere is shut down. Open this file:

```<code>/usr/IBM/AppServer/profiles/<my profile>/config/cells/<my cell>/nodes/<my node>/servers/<server>/server.xml
</code>```

Search for node jvmEntries, attribute debugMode="true" and set it to false. Start Websphere.

Body:
You can disable debug mode even if Websphere is shut down. Open this file:

/usr/IBM/AppServer/profiles/<my profile>/config/cells/<my cell>/nodes/<my node>/servers/<server>/server.xml

Search for node jvmEntries, attribute debugMode="true" and set it to false. Start Websphere.


问:
Add new class to existing class when the page is loaded
Hello everyone I try to add a new class 'visible' to existing class 'menu' when the page is ready and all elements are loaded.

This is the code that I use.

.point {
  position: absolute;
  top: 50%;
  left: 50%;
}

.menu ul {
  background: rgb(255, 255, 255);
  height: 0px;
  opacity: 0;
  position: absolute;
  transition: .5s ease-in-out;
  transition-delay: 0.2s;
}

.menu li:hover ul {
  width: 300px;
  height: 200px;
  top: 30px;
  left: 30px;
  opacity: 1;
}

.menu li {
  list-style-type: none;
}

.menu ul li a {
  list-style-type: none;
  text-decoration: none;
  text-align: left;
  color: rgb(66, 66, 66);
}

.menu ul li h1 {
  font-family: Arial, Helvetica, sans-serif;
  list-style-type: none;
  text-decoration: none;
  text-align: left;
}

.point div {
  position: absolute;
  width: 60px;
  height: 60px;
  background: #999;
  z-index: 1;
  cursor: grab;
}

.point:hover div {
  background: #000;
  position: absolute;
  width: 60px;
  height: 60px;
  z-index: 2;
  cursor: grab;
}

nav.menu {
  visibility: hidden;
}

nav.menu.visible {
  visibility: visible;
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><body>
  <canvas class="webgl"></canvas>
  <div class="loading-bar"></div>
  <nav class="menu">
    <li>
      <div class="point point-0">
        <div class="point"></div>
        <ul>
          <li>
            <h1 href="#">num</h1>
          </li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
        </ul>
      </div>
    </li>
  </nav>
</body></code>```

https://jsfiddle.net/pect25L3/

I tryed

```<code>window.onload = function() {
document.getElementById('menu').className = 'visible';
};
</code>```

But nothing happens. Where can be my mistake?

Thank you.

答: The problem is '.menu' is a class in your HTML and you are using 'getElementById' in your JS.</p>

Body:
Hello everyone I try to add a new class 'visible' to existing class 'menu' when the page is ready and all elements are loaded.

This is the code that I use.

.point {
  position: absolute;
  top: 50%;
  left: 50%;
}

.menu ul {
  background: rgb(255, 255, 255);
  height: 0px;
  opacity: 0;
  position: absolute;
  transition: .5s ease-in-out;
  transition-delay: 0.2s;
}

.menu li:hover ul {
  width: 300px;
  height: 200px;
  top: 30px;
  left: 30px;
  opacity: 1;
}

.menu li {
  list-style-type: none;
}

.menu ul li a {
  list-style-type: none;
  text-decoration: none;
  text-align: left;
  color: rgb(66, 66, 66);
}

.menu ul li h1 {
  font-family: Arial, Helvetica, sans-serif;
  list-style-type: none;
  text-decoration: none;
  text-align: left;
}

.point div {
  position: absolute;
  width: 60px;
  height: 60px;
  background: #999;
  z-index: 1;
  cursor: grab;
}

.point:hover div {
  background: #000;
  position: absolute;
  width: 60px;
  height: 60px;
  z-index: 2;
  cursor: grab;
}

nav.menu {
  visibility: hidden;
}

nav.menu.visible {
  visibility: visible;
}

  <canvas class="webgl"></canvas>

num

2

3

4

5

https://jsfiddle.net/pect25L3/

I tryed

window.onload = function() {
document.getElementById('menu').className = 'visible';
};

But nothing happens. Where can be my mistake?

Thank you.


问:
float:right doesn't work even though the anchor element is within a div
I am currently trying to make a sidebar, which has an 'X' button at the top right corner. I tried to use float: right in order to place it on the right but it doesn't work.

The anchor that I used for the cross is within a div, but I don't know why it doesn't seem to work. I don't think the css with .side-nav .btn-close contains the problem.

I think there's something wrong with the side-nav class.

*{
    box-sizing: border;
}

html {
    background-color: #dfdfdf;
}

body {
    padding: 0;
    margin: 0;
}

.navbar {
    display:flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
}

.logo {
    font-size: 1.5rem;
    margin: .5rem;
    color:white;
}

.navbar-links ul{
    display:flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.navbar-links li a{
    text-decoration: none;
    color:white;
    display: block;
    padding: 1rem;
}

.toggle-button {
    position: absolute;
    top: .75rem;
    left: 1rem;
    width: 30px;
    height: 21px;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    display: none;
}

.toggle-button .bar {
    background-color:white;
    width: 100%;
    height: 3px;
}

.side-nav {
    height: 100%;
    width: 250px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #9ed39f;
    overflow: hidden;
    transition: 0.5s;
    display: flex;
}

.side-nav .btn-close {
    font-size: 36px;
    border-bottom: none;
    text-decoration: none;
    color: #fff;
    float:right;
    margin-right:25px;
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Responsive Sidebar</title>
  </head>
  <body>
    <nav class="navbar">

        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>

      <div class="logo">Brand Name</div>
      <div class="navbar-links">
        <ul>
          <li>Home</li>
          <li>Abvout</li>
          <li>Services</li>
          <li>Contact</li>
        </ul>
      </div>
    </nav>
    <div class="side-nav">
      ×
      <ul>
        <li>Home</li>
        <li>About</li>
        <li>Services</li>
        <li>Contact</li>
      </ul>
    </div>
    <main>
     epturi, quod illo. Voluptatum
      alias possimus ipsum omnis. Aspernatur animi debitis natus sed
      exercitationem repudiandae excepturi, ipsum hi
    </main>
  </body>
</html></code>```

答:
I have modified your code a little. It should work now.

I have added wrapper div to your button and the ul in sidebar. Since you are using position:fixed on .side-nav, you have to use position: absolute on the X Button.

    * {
      box-sizing: border;
    }

    html {
      background-color: #dfdfdf;
    }

    body {
      padding: 0;
      margin: 0;
    }

    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #333;
    }

    .logo {
      font-size: 1.5rem;
      margin: .5rem;
      color: white;
    }

    .navbar-links ul {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .navbar-links li a {
      text-decoration: none;
      color: white;
      display: block;
      padding: 1rem;
    }

    .toggle-button {
      position: absolute;
      top: .75rem;
      left: 1rem;
      width: 30px;
      height: 21px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      display: none;
    }

    .toggle-button .bar {
      background-color: white;
      width: 100%;
      height: 3px;
    }

    .side-nav {
      height: 100%;
      width: 250px;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: #9ed39f;
      overflow: hidden;
      transition: 0.5s;
      display: flex;
    }

    .side-nav .btn-close {
      font-size: 36px;
      border-bottom: none;
      text-decoration: none;
      color: #fff;
      float: right;
      margin-right: 25px;
    }

/* Added These 2 Wrapper class */
    .btn-close-wrapper {
      position: absolute;
      display: block;
      width: 100%;
      text-align: right;
    }

    .ul-wrapper {
      padding-top: 50px;
    }```
<pre class="snippet-code-html lang-html prettyprint-override"><code><!DOCTYPE html>
<html lang="en">

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

</head>

<body>
  <nav class="navbar">

      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>

    <div class="logo">Brand Name</div>
    <div class="navbar-links">
      <ul>
        <li>Home</li>
        <li>Abvout</li>
        <li>Services</li>
        <li>Contact</li>
      </ul>
    </div>
  </nav>
  <div class="side-nav">

    <!-- Used wrapper div for close button and ul -->
    <div class="btn-close-wrapper">
      ×
    </div>
    <div class="ul-wrapper">
      <ul>
        <li>Home</li>
        <li>About</li>
        <li>Services</li>
        <li>Contact</li>
      </ul>
    </div>
  </div>
  <main>
    epturi, quod illo. Voluptatum
    alias possimus ipsum omnis. Aspernatur animi debitis natus sed
    exercitationem repudiandae excepturi, ipsum hi
  </main>
</body>

</html></code>```

Body:
I am currently trying to make a sidebar, which has an 'X' button at the top right corner. I tried to use float: right in order to place it on the right but it doesn't work.

The anchor that I used for the cross is within a div, but I don't know why it doesn't seem to work. I don't think the css with .side-nav .btn-close contains the problem.

I think there's something wrong with the side-nav class.

*{
    box-sizing: border;
}

html {
    background-color: #dfdfdf;
}

body {
    padding: 0;
    margin: 0;
}

.navbar {
    display:flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
}

.logo {
    font-size: 1.5rem;
    margin: .5rem;
    color:white;
}

.navbar-links ul{
    display:flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.navbar-links li a{
    text-decoration: none;
    color:white;
    display: block;
    padding: 1rem;
}

.toggle-button {
    position: absolute;
    top: .75rem;
    left: 1rem;
    width: 30px;
    height: 21px;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    display: none;
}

.toggle-button .bar {
    background-color:white;
    width: 100%;
    height: 3px;
}

.side-nav {
    height: 100%;
    width: 250px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #9ed39f;
    overflow: hidden;
    transition: 0.5s;
    display: flex;
}

.side-nav .btn-close {
    font-size: 36px;
    border-bottom: none;
    text-decoration: none;
    color: #fff;
    float:right;
    margin-right:25px;
}

<!DOCTYPE html>

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

Brand Name

Home

Abvout

Services

Contact

      ×

Home

About

Services

Contact

     epturi, quod illo. Voluptatum
      alias possimus ipsum omnis. Aspernatur animi debitis natus sed
      exercitationem repudiandae excepturi, ipsum hi

Body:
I have modified your code a little. It should work now.

I have added wrapper div to your button and the ul in sidebar. Since you are using position:fixed on .side-nav, you have to use position: absolute on the X Button.

    * {
      box-sizing: border;
    }

    html {
      background-color: #dfdfdf;
    }

    body {
      padding: 0;
      margin: 0;
    }

    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #333;
    }

    .logo {
      font-size: 1.5rem;
      margin: .5rem;
      color: white;
    }

    .navbar-links ul {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .navbar-links li a {
      text-decoration: none;
      color: white;
      display: block;
      padding: 1rem;
    }

    .toggle-button {
      position: absolute;
      top: .75rem;
      left: 1rem;
      width: 30px;
      height: 21px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      display: none;
    }

    .toggle-button .bar {
      background-color: white;
      width: 100%;
      height: 3px;
    }

    .side-nav {
      height: 100%;
      width: 250px;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: #9ed39f;
      overflow: hidden;
      transition: 0.5s;
      display: flex;
    }

    .side-nav .btn-close {
      font-size: 36px;
      border-bottom: none;
      text-decoration: none;
      color: #fff;
      float: right;
      margin-right: 25px;
    }

/* Added These 2 Wrapper class */
    .btn-close-wrapper {
      position: absolute;
      display: block;
      width: 100%;
      text-align: right;
    }

    .ul-wrapper {
      padding-top: 50px;
    }

<!DOCTYPE html>
<html lang="en">

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

</head>

<body>
  <nav class="navbar">
    <a href="#" class="toggle-button">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
    </a>
    <div class="logo">Brand Name</div>
    <div class="navbar-links">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Abvout</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </nav>
  <div class="side-nav">

    <!-- Used wrapper div for close button and ul -->
    <div class="btn-close-wrapper">
      <a href="#" class="btn-close">&times;</a>
    </div>
    <div class="ul-wrapper">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
  <main>
    epturi, quod illo. Voluptatum
    alias possimus ipsum omnis. Aspernatur animi debitis natus sed
    exercitationem repudiandae excepturi, ipsum hi
  </main>
</body>

</html>


答:
your trying to get class='menu' with getById.  change class to id

window.onload = function() {
document.getElementById('menu').className = 'visible';
};```
<pre class="snippet-code-css lang-css prettyprint-override"><code>.point {
  position: absolute;
  top: 50%;
  left: 50%;
}

.menu ul {
  background: rgb(255, 255, 255);
  height: 0px;
  opacity: 0;
  position: absolute;
  transition: .5s ease-in-out;
  transition-delay: 0.2s;
}

.menu li:hover ul {
  width: 300px;
  height: 200px;
  top: 30px;
  left: 30px;
  opacity: 1;
}

.menu li {
  list-style-type: none;
}

.menu ul li a {
  list-style-type: none;
  text-decoration: none;
  text-align: left;
  color: rgb(66, 66, 66);
}

.menu ul li h1 {
  font-family: Arial, Helvetica, sans-serif;
  list-style-type: none;
  text-decoration: none;
  text-align: left;
}

.point div {
  position: absolute;
  width: 60px;
  height: 60px;
  background: #999;
  z-index: 1;
  cursor: grab;
}

.point:hover div {
  background: #000;
  position: absolute;
  width: 60px;
  height: 60px;
  z-index: 2;
  cursor: grab;
}

nav.menu {
  visibility: hidden;
}

nav.menu.visible {
  visibility: visible;
}</code>```

  <canvas class="webgl"></canvas>

num

2

3

4

5

```

Title: Add new class to existing class when the page is loaded

Body:
your trying to get class='menu' with getById.  change class to id

window.onload = function() {
document.getElementById('menu').className = 'visible';
};

.point {
  position: absolute;
  top: 50%;
  left: 50%;
}

.menu ul {
  background: rgb(255, 255, 255);
  height: 0px;
  opacity: 0;
  position: absolute;
  transition: .5s ease-in-out;
  transition-delay: 0.2s;
}

.menu li:hover ul {
  width: 300px;
  height: 200px;
  top: 30px;
  left: 30px;
  opacity: 1;
}

.menu li {
  list-style-type: none;
}

.menu ul li a {
  list-style-type: none;
  text-decoration: none;
  text-align: left;
  color: rgb(66, 66, 66);
}

.menu ul li h1 {
  font-family: Arial, Helvetica, sans-serif;
  list-style-type: none;
  text-decoration: none;
  text-align: left;
}

.point div {
  position: absolute;
  width: 60px;
  height: 60px;
  background: #999;
  z-index: 1;
  cursor: grab;
}

.point:hover div {
  background: #000;
  position: absolute;
  width: 60px;
  height: 60px;
  z-index: 2;
  cursor: grab;
}

nav.menu {
  visibility: hidden;
}

nav.menu.visible {
  visibility: visible;
}

<body>
  <canvas class="webgl"></canvas>
  <div class="loading-bar"></div>
  <nav id="menu">
    <li>
      <div class="point point-0">
        <div class="point"></div>
        <ul>
          <li>
            <h1 href="#">num</h1>
          </li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
        </ul>
      </div>
    </li>
  </nav>
  <script>document.getElementById('menu').className = 'visible';</script>
</body>