问:
A start to tiling the screen with triangles
At the moment, I'm trying to get started trying to tile the python turtle graphics screen with equilateral triangles of random colors. I've made a function which is successfully able to make a triangle starting at say coordinates v_1 = (x, y). Once it's made the triangle, I want the turtle to head to one of the other triangle vertices that are not equal to v_1 and start a new triangle there. I'd like to do all of this in a while loop. However, when I run my code, it seems that the turtle always goes back to the initial position of the first equilateral triangle and makes a new one on top of it. I'm not sure what I'm doing wrong. Here's my code:

```<code>from turtle import Turtle, colormode, done
from random import randint
colormode(255)

def make_left_triangle(bob: Turtle, x: float, y: float) -> None:
    """Makes an equilaterial triangle at coordinates (x, y) with the turtle bob moving left."""
    r: int = randint(0, 255)
    g: int = randint(0, 255)
    b: int = randint(0, 255)
    rand_n: int = randint(1, 2)
    i: int = 0
    bob.penup()
    bob.goto(x, y)
    bob.pendown()
    bob.fillcolor(r, g, b)
    bob.begin_fill()
    while i < 3:
        bob.forward(200)
        bob.left(120)
        i += 1
    bob.end_fill()
    while rand_n < 3:
        bob.forward(200)
        bob.left(120)
        rand_n += 1

def main() -> None:
    bob: Turtle = Turtle()
    i: int = 0
    rand_n: int = randint(25, 50)
    x_coord: float = 0
    y_coord: float = 0
    while i < rand_n:
        make_left_triangle(bob, x_coord, y_coord)
        x_coord = bob.pos()[0]
        y_coord = bob.pos()[1]
        i += 1
    done()

if __name__ == "__main__":
    main()
</code>```

Any help on what's going wrong would be greatly appreciated! Thanks

答:
The problem is that the orientation of the bob is preserved between different calls to make_left_triangle. For example, if you draw a triangle ABC:

```<code>   C
  / \
 /   \
A-----B
</code>```

and then move to vertex C you also turn in the direction of CA. So the next time you'll draw a new triangle CAB, which will be drawn over the initial ABC. You need to reset the orientation of the bob at the start of each make_left_triangle call.

Body:
At the moment, I'm trying to get started trying to tile the python turtle graphics screen with equilateral triangles of random colors. I've made a function which is successfully able to make a triangle starting at say coordinates v_1 = (x, y). Once it's made the triangle, I want the turtle to head to one of the other triangle vertices that are not equal to v_1 and start a new triangle there. I'd like to do all of this in a while loop. However, when I run my code, it seems that the turtle always goes back to the initial position of the first equilateral triangle and makes a new one on top of it. I'm not sure what I'm doing wrong. Here's my code:

from turtle import Turtle, colormode, done
from random import randint
colormode(255)

def make_left_triangle(bob: Turtle, x: float, y: float) -> None:
    """Makes an equilaterial triangle at coordinates (x, y) with the turtle bob moving left."""
    r: int = randint(0, 255)
    g: int = randint(0, 255)
    b: int = randint(0, 255)
    rand_n: int = randint(1, 2)
    i: int = 0
    bob.penup()
    bob.goto(x, y)
    bob.pendown()
    bob.fillcolor(r, g, b)
    bob.begin_fill()
    while i < 3:
        bob.forward(200)
        bob.left(120)
        i += 1
    bob.end_fill()
    while rand_n < 3:
        bob.forward(200)
        bob.left(120)
        rand_n += 1

def main() -> None:
    bob: Turtle = Turtle()
    i: int = 0
    rand_n: int = randint(25, 50)
    x_coord: float = 0
    y_coord: float = 0
    while i < rand_n:
        make_left_triangle(bob, x_coord, y_coord)
        x_coord = bob.pos()[0]
        y_coord = bob.pos()[1]
        i += 1
    done()

if __name__ == "__main__":
    main()

Any help on what's going wrong would be greatly appreciated! Thanks

Body:
The problem is that the orientation of the bob is preserved between different calls to make_left_triangle. For example, if you draw a triangle ABC:

   C
  / \
 /   \
A-----B

and then move to vertex C you also turn in the direction of CA. So the next time you'll draw a new triangle CAB, which will be drawn over the initial ABC. You need to reset the orientation of the bob at the start of each make_left_triangle call.


来源: stackexchange

问:
Integer expression expected
I want to read my files line by line every 5 seconds. This time I just tried one-line bash command to do this.
And bash command is:

```<code>let X=1;while [ $X -lt 20 ];do cat XXX.file |head -$X|tail -1;X=$X+1;sleep 5;done
</code>```

However I got the error like:

```<code>-bash: [: 1+1: integer expression expected
</code>```

What's the problem?
btw, why can't we do $X < 20? (Instead we have to do -lt, less than?)

thx

答:
I would use

```<code>X=`expr $X + 1`
</code>```

but that's just me.  And you cannot say $X < 20 because < is the input-redirect operator.

ContentLicense: CC BY-SA 3.0

Title: Integer expression expected

Body:
I want to read my files line by line every 5 seconds. This time I just tried one-line bash command to do this.
And bash command is:

let X=1;while [ $X -lt 20 ];do cat XXX.file |head -$X|tail -1;X=$X+1;sleep 5;done

However I got the error like:

-bash: [: 1+1: integer expression expected

What's the problem?
btw, why can't we do $X < 20? (Instead we have to do -lt, less than?)

thx

Body:
I would use

X=`expr $X + 1`

but that's just me.  And you cannot say $X < 20 because < is the input-redirect operator.


问:
FlatList not working inside BottomSheet on Android
I am using gorhom/react-native-bottom-sheet

The issue I am facing:

I have a FlatList inside a BottomSheet, I am able to scroll in FlaLlist on ios but it is not working on android.

答:
After a lot of research, I was able to resolve the issue by using BottomSheetFlatList instead of FlatList from the same package.

```<code>import { BottomSheetFlatList } from "@gorhom/bottom-sheet";

<BottomSheetFlatList
        ref={ref}
        initialNumToRender={3}
        keyExtractor={(item) => item?.id}
        showsVerticalScrollIndicator={false}
        maxToRenderPerBatch={3}
        windowSize={7}
        data={dat}
        renderItem={renderItem}
      />
</code>```

By doing so, it started working fine on android too.

But as I also wanted my Flatlist to auto-scroll using ref on a particular event.

After some research and because of the great documentation of @gorhom/bottom-sheet. I found out the solution in the troubleshooting section of the docs.

But as a developer, StackOverflow is our first go-to place for every issue. So, I decided to post the answer here.

ANSWER

Due to wrapping the content and handle with TapGestureHandler & PanGestureHandler, any gesture interaction would not function as expected.

To resolve this issue, please use ScrollView & FlatList from react-native-gesture-handler provide instead react-native.

```<code>import {
  ScrollView,
  FlatList
} from 'react-native-gesture-handler';
</code>```

find the original answer here-
https://gorhom.github.io/react-native-bottom-sheet/troubleshooting

ContentLicense: CC BY-SA 4.0

Body:
After a lot of research, I was able to resolve the issue by using BottomSheetFlatList instead of FlatList from the same package.

import { BottomSheetFlatList } from "@gorhom/bottom-sheet";

<BottomSheetFlatList
        ref={ref}
        initialNumToRender={3}
        keyExtractor={(item) => item?.id}
        showsVerticalScrollIndicator={false}
        maxToRenderPerBatch={3}
        windowSize={7}
        data={dat}
        renderItem={renderItem}
      />

By doing so, it started working fine on android too.

But as I also wanted my Flatlist to auto-scroll using ref on a particular event.

After some research and because of the great documentation of @gorhom/bottom-sheet. I found out the solution in the troubleshooting section of the docs.

But as a developer, StackOverflow is our first go-to place for every issue. So, I decided to post the answer here.

ANSWER

Due to wrapping the content and handle with TapGestureHandler & PanGestureHandler, any gesture interaction would not function as expected.

To resolve this issue, please use ScrollView & FlatList from react-native-gesture-handler provide instead react-native.

import {
  ScrollView,
  FlatList
} from 'react-native-gesture-handler';

find the original answer here-
https://gorhom.github.io/react-native-bottom-sheet/troubleshooting


问:
Cannot build after npm start
I am brand new to node.js and I am trying to build my app so that I can deploy it.

Right after I do npm start I cannot do anything. Sorry if the question is too obvious, but I have never used node.js before.

Cmd says that I can build my app which is what I want but I cannot type anything.
I have tried doing npm run build before doing npm start but I get an empty index.html.

These are my package.json's scripts:

答:
After running npm start your app is running continuously. So if you want to type a new command, you would have to stop it or open a new terminal window/tab and run that command there. Just make sure you are in the same path you want to be.
In order to stop a running process (e.g. npm start) simply press ctrl + c (that is, ctrl first, keep it pressed and then press c) no matter if you are using mac or windows

Title: Cannot build after npm start


问:
Simple JavaScript Bookmarklet not working on EDGE compatibility mode ie11
I am trying to run the following JavaScript as a test on a website / webapp*.

```<code>javascript: {window.alert("Hello World")}
</code>```

*This website / webapp forces the EDGE browser to run on IE11 compatibility mode.

But am getting an error (translated to english) :

```<code>"No Access to Website: Make sure that the Webadress //ieframe.dll/dnserror.htm?ErrorStatus=0x8007005# is correct".
</code>```

The JS Code is now visible in the url section, so I assume the above error has not much to do with the actual problem.

Tried it on Chrome and IE11 (native) and they both work with the mentioned website / webapp.

Is there a way to make it work on EDGE compatibility mode IE11?

Thanks for your help!
KR
Joe

答:
I think you can't make bookmarklet work in Edge IE mode as IE mode doesn't support Internet Explorer toolbars.

From the image above, you can see that Favorites bar belongs to IE toolbars so you can't use it in Edge IE mode.

If you really need this feature in Edge IE mode, I suggest that you can provide feedback to Edge team by pressing Alt+Shift+I in Edge browser. Edge team will check the feedbacks and improve the product continuously.

Body:
I am trying to run the following JavaScript as a test on a website / webapp*.

javascript: {window.alert("Hello World")}

*This website / webapp forces the EDGE browser to run on IE11 compatibility mode.

But am getting an error (translated to english) :

"No Access to Website: Make sure that the Webadress //ieframe.dll/dnserror.htm?ErrorStatus=0x8007005# is correct".

The JS Code is now visible in the url section, so I assume the above error has not much to do with the actual problem.

Tried it on Chrome and IE11 (native) and they both work with the mentioned website / webapp.

Is there a way to make it work on EDGE compatibility mode IE11?

Thanks for your help!
KR
Joe


问:
Worry about JWTs and consider refresh tokens
When you log in, you store the Access Token in the client header and the Refresh Token in Redis. And when the validity period of the AccessToken expires, the logic is used to check the expiration period of the RefreshToken by using the AccessToken as a KeyValue and reissue the AccessToken if it is valid. At this time, if the attacker steals the AccessToken, the attacker will also be able to obtain a new AccessToken even if the AccessToken expires, and it is expected that the attack will continue until the RefreshToken expires. When renewing AccessToken, I wonder if other conditions should be added instead of just checking the key value or if it is okay as it is. Also I wonder why this is ok</p>

答:
The idea is that you will make the lifetime of an access token very short and share it across different APIs without worrying. However, for refresh tokens you would be more careful and don't use it any where except the authorization server. (Do not store in the browser nor in other APIs).

This will ensure the safety of the refresh token and the short lifespan of the access token will ensure its safety.

I had the same concern before and I got clear explanations that you can check here
how is using JWT refresh token secure?


问:
How to solve this gets() function problem?
In my program if I use scanf(), the program works fine. But as it is obvious, scanf() stops reading the input if it encounters a whitespace. So, instead I used gets(). But the problem is I have to use gets(name[i]); twice. If I use it only once, it skips the 'Subject Name' input & jumps to 'Grade' input.

Can you tell me where the problem lies?
Here is the code, I removed almost all irrelevant parts.

```<code>#include <ctype.h>
#include <stdio.h>
#include <stdlib.h>
#include <string.h>

void selection1();

int main()
{
    int op;

    printf("\n\t\t\t\t\t\t\t\tCHOOSE A NUMBER FROM 0 to 4: ");
    scanf("%d", &op);
    switch(op)
    {
    case 0:
        exit(0);
        break;
    case 1:
        selection1();
        break;
    case 2:
        //selection2();
        break;
    case 3:
        //selection3();
        break;
    case 4:
        //selection4();
        break;
    default:
        printf("\t\t\t\t\t\t\t\tInvalid Selection!!!\n");
        break;
    }
    return 0;
}

void selection1()
{
    char name[20][50], grade[20][5];
    double credit[20][2];
    int i=0;

    for(;;)
    {
        printf("\t\t\t\t\t\t\t\tEnter Subject Name: ");
        gets(name[i]);
        //gets(name[i]);
        printf("\t\t\t\t\t\t\t\tEnter Grade: ");
        scanf("%s", &grade[i]);
        printf("\t\t\t\t\t\t\t\tEnter The Course Credits: ");
        scanf("%lf", &credit[i]);
    }
}
</code>```

答: So, I found using scanf(" %[^\n]%*c", &name[i]); instead of gets(name[i]); solve the problem. Thanks to everyone who commented. Your comments helped me to reach this answer :)

Body:
In my program if I use scanf(), the program works fine. But as it is obvious, scanf() stops reading the input if it encounters a whitespace. So, instead I used gets(). But the problem is I have to use gets(name[i]); twice. If I use it only once, it skips the 'Subject Name' input & jumps to 'Grade' input.

Can you tell me where the problem lies?
Here is the code, I removed almost all irrelevant parts.

#include <ctype.h>
#include <stdio.h>
#include <stdlib.h>
#include <string.h>

void selection1();

int main()
{
    int op;

    printf("\n\t\t\t\t\t\t\t\tCHOOSE A NUMBER FROM 0 to 4: ");
    scanf("%d", &op);
    switch(op)
    {
    case 0:
        exit(0);
        break;
    case 1:
        selection1();
        break;
    case 2:
        //selection2();
        break;
    case 3:
        //selection3();
        break;
    case 4:
        //selection4();
        break;
    default:
        printf("\t\t\t\t\t\t\t\tInvalid Selection!!!\n");
        break;
    }
    return 0;
}

void selection1()
{
    char name[20][50], grade[20][5];
    double credit[20][2];
    int i=0;

    for(;;)
    {
        printf("\t\t\t\t\t\t\t\tEnter Subject Name: ");
        gets(name[i]);
        //gets(name[i]);
        printf("\t\t\t\t\t\t\t\tEnter Grade: ");
        scanf("%s", &grade[i]);
        printf("\t\t\t\t\t\t\t\tEnter The Course Credits: ");
        scanf("%lf", &credit[i]);
    }
}


问:
Increase z-index of  UpdateProgress in ASP.NET
I have a little window that says loading. Sometimes it gets covered up by other controls on the page. How can I increase it's z-index so that it is always on top. Is there an attribute I can set so that it is always on top?

Here is the code for it:

```<code><script type="text/javascript" language="javascript"></script>
<form id="form1" runat="server">
<div>
    <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnablePageMethods="true">
        <Scripts></Scripts>
    </ajaxToolkit:ToolkitScriptManager>
<asp:UpdateProgress ID="ProgressBar" runat="server" AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="200">
    <ProgressTemplate>
        <div id="Loading">
        <img src='Images/loading.gif' alt='loading...' />
            <br /><br />Loading...
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>
</code>```

答:
```<code><div id="Loading" style="z-index: 999999;"></div>
</code>```

There are certain elements that no matter what, will show above yours. Dropdowncontrols in IE6 and 7 I think will always show over it.

If you have flash objects, you'll need to update their wmode setting to transparent I believe as well.

Body:
I have a little window that says loading. Sometimes it gets covered up by other controls on the page. How can I increase it's z-index so that it is always on top. Is there an attribute I can set so that it is always on top?

Here is the code for it:

<form id="form1" runat="server">

    <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnablePageMethods="true">

    </ajaxToolkit:ToolkitScriptManager>
<asp:UpdateProgress ID="ProgressBar" runat="server" AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="200">
    <ProgressTemplate>

Loading...

    </ProgressTemplate>
</asp:UpdateProgress>

Body:
<div id="Loading" style="z-index: 999999;"></div>

There are certain elements that no matter what, will show above yours. Dropdowncontrols in IE6 and 7 I think will always show over it.

If you have flash objects, you'll need to update their wmode setting to transparent I believe as well.


问:
Force disable dark mode in android application not working
I have force disable dark mode in my android application but still the app is in dark mode when my phone is in dark mode

I have also changed the theme for both light and night modes to light theme with no action bar but its not working

答:
1)Add this line in each activity just below onCreate

```<code>AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);

</code>```

OR

add this line in your themes under style section

```<code><item name="android:forceDarkAllowed" tools:targetApi="q">false</item>
</code>```

Body:
1)Add this line in each activity just below onCreate

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);

OR

add this line in your themes under style section

<item name="android:forceDarkAllowed" tools:targetApi="q">false</item>


问:
How to make navbar responsive?
I just learned about responsive design and adapting a page to smaller screens for accessibility, however, I'm having trouble thinking about a way to make my navbar responsive (showing the three bars instead of the whole navbar.

This is my custom navbar:

:root{ --main_color: #004771; --main_color_shade: #072060; --footer_color: #383838;}

.navbar_maincontainer{width:100%; height:50px; background-color:var(--main_color); display:flex; align-items:center; padding:0px 100px; font-size:17px;}

.navbar_link_wrapper{width:auto; height:100%; position:relative; }

.navbar_link{color:white; font-size:17px; width:100%; height:100%; display:flex; justify-content:center; align-items:center; padding:0px 30px;}

.navbar_link_wrapper:hover{background-color:var(--main_color_shade);}

.navbar_sublinks_container{position:absolute; box-shadow:4px 4px 4px rgba(0,0,0,0.2); width:300px; height:auto; left:0px; top:-700px; transition:all 600ms ease; background-color:#383838; z-index:9999999999; display:none; flex-direction:column;}

.navbar_sublink{padding:0px 15px; height:50px; display:flex; align-items:center; transition:all 600ms ease; color:rgba(255,255,255,0.8); font-size:14px; font-weight:400;}

.navbar_sublinks_line{width:100%; border-bottom:1px solid rgba(255,255,255,0.1); height:1px; margin:0 auto;}

.navbar_sublinks_title{padding:10px 0px; width:100%; color:white; font-size:13px;}

.active{background-color:var(--main_color_shade);}

.active_sub{background-color:rgba(0,0,0,0.3);}

.navbar_sublink:hover{background-color:rgba(0,0,0,0.3);}

.navbar_link_wrapper:hover .navbar_sublinks_container{display:flex;  top:100%;}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="navbar_maincontainer" style="">
    <div class="navbar_link_wrapper">
        Inicio
    </div>
    <div class="navbar_link_wrapper" style="margin-left:auto;">
        Servicios
        <div class="navbar_sublinks_container" style=" ">
            Clases a domicilio
            Clases en grupo
            Clases para cachorros
    </div>
    <div class="navbar_link_wrapper" style="">
        Quienes somos
    </div>
    <div class="navbar_link_wrapper">
        Formate con nosotros
        <div class="navbar_sublinks_container">
            Formación básica
            Formación avanzada
        </div>
    </div>
    <div class="navbar_link_wrapper">
        Contactar

    </div>
    <div class="navbar_link_wrapper">
        Testimonios
    </div>
    <div class="navbar_link_wrapper">
        Preguntas
    </div>
</div></code>```

答:
```<code><div class="nav-container">
  <nav>
    <ul class="mobile-nav">
      <li>
        <div class="menu-icon-container">
          <div class="menu-icon">
            <span class="line-1"></span>
            <span class="line-2"></span>
          </div>
        </div>
      </li>

      <li>
        <a href="#" class="link-logo"></a>
      </li>

      <li>
        <a href="" class="link-bag"></a>
      </li>
    </ul>

    <ul class="desktop-nav">
      <li>
        <a href="#" class="link-logo"></a>
      </li>
      <li>
        <a href="#">Mac</a>
      </li>
      <li>
        <a href="#">iPad</a>
      </li>
      <li>
        <a href="#">iPhone</a>
      </li>
      <li>
        <a href="#">Watch</a>
      </li>
      <li>
        <a href="#">TV</a>
      </li>
      <li>
        <a href="#">Music</a>
      </li>
      <li>
        <a href="#">Support</a>
      </li>
      <li>
        <a href="#" class="link-search"></a>
      </li>
      <li>
        <a href="#" class="link-bag"></a>
      </li>
    </ul>
  </nav>

  <!-- End of navigation menu items -->

  <div class="search-container hide">
    <div class="link-search"></div>
    <div class="search-bar">
      <form action="">
        <input type="text" placeholder="Search apple.com" />
      </form>
    </div>
    <div class="link-close"></div>

    <div class="quick-links">
      <h2>Quick Links</h2>
      <ul>
        <li>
          <a href="#">Visiting an Apple Store FAQ</a>
        </li>
        <li>
          <a href="#">Shop Apple Store Online</a>
        </li>
        <li>
          <a href="#">Accessories</a>
        </li>
        <li>
          <a href="#">AirPods</a>
        </li>
        <li>
          <a href="#">AirTag</a>
        </li>
      </ul>
    </div>
  </div>

  <div class="mobile-search-container">
    <div class="link-search"></div>
    <div class="search-bar">
      <form action="">
        <input type="text" placeholder="Search apple.com" />
      </form>
    </div>
    <span class="cancel-btn">Cancel</span>

    <div class="quick-links">
      <h2>Quick Links</h2>
      <ul>
        <li>
          <a href="#">Visiting an Apple Store FAQ</a>
        </li>
        <li>
          <a href="#">Shop Apple Store Online</a>
        </li>
        <li>
          <a href="#">Accessories</a>
        </li>
        <li>
          <a href="#">AirPods</a>
        </li>
        <li>
          <a href="#">AirTag</a>
        </li>
      </ul>
    </div>
  </div>
</div>

<div class="overlay"></div>

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>    const searchButton = document.querySelector("nav .desktop-nav .link-search");
    const closeButton = document.querySelector(".search-container .link-close");
    const desktopNav = document.querySelector(".desktop-nav");
    const searchContainer = document.querySelector(".search-container");
    const overlay = document.querySelector(".overlay");

    searchButton.addEventListener("click", () => {
        desktopNav.classList.add("hide");
        searchContainer.classList.remove("hide");
        overlay.classList.add("show");
    })

    closeButton.addEventListener("click", () => {
        desktopNav.classList.remove("hide");
        searchContainer.classList.add("hide");
        overlay.classList.remove("show");
    })

    overlay.addEventListener("click", () => {
        desktopNav.classList.remove("hide");
        searchContainer.classList.add("hide");
        overlay.classList.remove("show");
    })

    // Mobile Version

    const menuIconContainer = document.querySelector("nav .menu-icon-container");
    const navContainer = document.querySelector(".nav-container");

    menuIconContainer.addEventListener("click", () => {
        navContainer.classList.toggle("active");
    })

    const searchBar = document.querySelector(".mobile-search-container .search-bar");
    const nav = document.querySelector(".nav-container nav");
    const searchInput = document.querySelector(".mobile-search-container input");
    const cancelBtn = document.querySelector(".mobile-search-container .cancel-btn");

    searchInput.addEventListener("click", () => {
        searchBar.classList.add("active");
        nav.classList.add("move-up");
        desktopNav.classList.add("move-down");
    })

    cancelBtn.addEventListener("click", () => {
        searchBar.classList.remove("active");
        nav.classList.remove("move-up");
        desktopNav.classList.remove("move-down");
    })</code>```

    *,
    *::after,
    *::before {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: "Inter", sans-serif;
        font-weight: 300;
        overflow-y: scroll;
    }

    /* Desktop Nav */

    .nav-container {
        background: rgba(0, 0, 0, 0.8);
        height: 44px;
        z-index: 300;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
    }

    .nav-container nav {
        width: 1000px;
        margin: 0 auto;
        padding: 0 8px;
        height: 100%;
    }

    nav .desktop-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        list-style: none;
    }

    nav .desktop-nav li a {
        color: #fff;
        text-decoration: none;
        font-size: 14px;
        opacity: 0.8;
        transition: opacity 400ms;
    }

    nav .desktop-nav li a:hover {
        opacity: 1;
    }

    .link-logo {
        background: url('images/apple-logo.svg');
        display: block;
        background-position: center;
        height: 44px;
        width: 15px;
        background-repeat: no-repeat;
    }

    .link-search {
        background: url('images/search-icon.svg');
        display: block;
        background-position: center;
        background-size: 18px;
        height: 44px;
        width: 20px;
        background-repeat: no-repeat;
    }

    .link-bag {
        background: url('images/bag-icon.svg');
        display: block;
        background-position: center;
        background-size: 17px;
        height: 44px;
        width: 20px;
        background-repeat: no-repeat;
    }

    .link-close {
        background: url('images/close-icon.svg');
        display: block;
        background-position: center;
        background-size: 17px;
        height: 44px;
        width: 20px;
        background-repeat: no-repeat;
    }

    /* Search Container */

    .search-container.hide {
        opacity: 0;
        pointer-events: none;
    }

    .search-container {
        width: 60%;
        margin: 0 auto;
        padding: 0 42px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 200;
    }

    .search-container .link-search {
        position: absolute;
        left: 12px;
        opacity: 0.5;
    }

    .search-container .link-close {
        position: absolute;
        top: 0;
        right: 12px;
        opacity: 0.5;
        cursor: pointer;
        transition: all 400ms;
    }

    .search-container .link-close:hover {
        opacity: 0.7;
    }

    .search-container form {
        width: 100%;
        margin: 0 auto;
    }

    .search-container form input {
        width: 100%;
        height: 44px;
        border: 0;
        outline: none;
        background: transparent;
        color: #fff;
        font-family: "Inter", sans-serif;
        font-size: 17px;
    }

    /* Overlay */

    .overlay.show {
        position: fixed;
        background: rgba(0, 0, 0, 0.48);
        width: 100%;
        height: 100vh;
        left: 0;
        top: 0;
        z-index: 100;
    }

    /* Quick Links */

    .search-container .quick-links {
        background: #fff;
        position: absolute;
        left: 0;
        right: 0;
        padding: 16px 8px;
        border-radius: 0 0 16px 16px;
    }

    .search-container .quick-links h2 {
        text-transform: uppercase;
        font-size: 12px;
        color: #6e6e73;
        margin: 0 32px;
        margin-top: 10px;
    }

    .search-container .quick-links ul {
        list-style: none;
        margin-top: 12px;
    }

    .search-container .quick-links ul li a {
        display: inline-block;
        width: 100%;
        padding: 8px 50px;
        font-size: 14px;
        color: #1d1d1f;
        text-decoration: none;
        font-weight: 400;
    }

    .search-container .quick-links ul li a:hover {
        background: #f5f5f5;
        color: #2997ff;
    }

    /* Desktop Nav Animation */

    .desktop-nav li {
        transition: all 400ms ease;
    }

    .desktop-nav.hide li {
        opacity: 0;
        transform: scale(0.8);
        pointer-events: none;
    }

    /* Overlay Animation */

    .overlay {
        transition: all 400ms ease;
    }

    /* Navigation Menu Items Transition Delay */

    .desktop-nav li:nth-of-type(1),
    .desktop-nav.hide li:nth-of-type(10) {
        transition-delay: 0ms;
    }

    .desktop-nav li:nth-of-type(2),
    .desktop-nav.hide li:nth-of-type(9) {
        transition-delay: 30ms;
    }

    .desktop-nav li:nth-of-type(3),
    .desktop-nav.hide li:nth-of-type(8) {
        transition-delay: 60ms;
    }

    .desktop-nav li:nth-of-type(4),
    .desktop-nav.hide li:nth-of-type(7) {
        transition-delay: 90ms;
    }

    .desktop-nav li:nth-of-type(5),
    .desktop-nav.hide li:nth-of-type(6) {
        transition-delay: 120ms;
    }

    .desktop-nav li:nth-of-type(6),
    .desktop-nav.hide li:nth-of-type(5) {
        transition-delay: 150ms;
    }

    .desktop-nav li:nth-of-type(7),
    .desktop-nav.hide li:nth-of-type(4) {
        transition-delay: 180ms;
    }

    .desktop-nav li:nth-of-type(8),
    .desktop-nav.hide li:nth-of-type(3) {
        transition-delay: 210ms;
    }

    .desktop-nav li:nth-of-type(9),
    .desktop-nav.hide li:nth-of-type(2) {
        transition-delay: 240ms;
    }

    .desktop-nav li:nth-of-type(10),
    .desktop-nav.hide li:nth-of-type(1) {
        transition-delay: 270ms;
    }

    /* Search Container Animation */

    .search-container form,
    .search-container .link-search {
        opacity: 1;
        transform: translateX(0);
        transition: all 400ms ease;
        transition-delay: 300ms;
    }

    .search-container.hide form,
    .search-container.hide .link-search {
        opacity: 0;
        transform: translateX(50px);
    }

    .search-container .link-search {
        opacity: 0.6;
    }

    .search-container.hide .link-close {
        opacity: 0;
    }

    .search-container .link-close {
        opacity: 0.5;
        transition: all 400ms ease;
        transition-delay: 400ms;
    }

    .search-container.hide .quick-links h2 {
        opacity: 0;
        transform: translateX(50px);
    }

    .search-container .quick-links h2 {
        opacity: 1;
        transform: translateX(0);
        transition: all 400ms ease;
        transition-delay: 100ms;
    }

    .search-container.hide .quick-links ul li {
        transform: translateX(60px);
        opacity: 0;
    }

    .search-container .quick-links ul li {
        opacity: 1;
        transform: translateX(0);
        transition: all 400ms ease;
    }

    .search-container .quick-links ul li:nth-of-type(1) {
        transition-delay: 120ms;
    }

    .search-container .quick-links ul li:nth-of-type(2) {
        transition-delay: 140ms;
    }

    .search-container .quick-links ul li:nth-of-type(3) {
        transition-delay: 160ms;
    }

    .search-container .quick-links ul li:nth-of-type(4) {
        transition-delay: 180ms;
    }

    .search-container .quick-links ul li:nth-of-type(5) {
        transition-delay: 200ms;
    }

    /* Hidden Items */

    .mobile-nav,
    .mobile-search-container {
        display: none;
    }

    /* Media Queries */

    @media (max-width: 1100px) {
        .nav-container nav {
            width: 100%;
            padding: 0 32px;
        }
    }

    @media (max-width: 768px) {
        .nav-container .desktop-nav {
            flex-direction: column;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 0vh;
            background: #000;
            justify-content: start;
            overflow: hidden;
            z-index: -1;
            transition: all 1000ms ease;
        }

        .nav-container.active .desktop-nav {
            height: 100vh;
        }

        .nav-container .desktop-nav li {
            width: 100%;
            padding: 0 32px;
        }

        .nav-container .desktop-nav li:first-child {
            margin-top: 120px;
        }

        .nav-container .desktop-nav .link-logo,
        .nav-container .desktop-nav .link-search,
        .nav-container .desktop-nav .link-bag {
            display: none;
        }

        .nav-container .desktop-nav li a {
            padding: 16px 0;
            display: inline-block;
            border-bottom: 1px solid #616161;
            width: 100%;
            font-size: 17px;
            transform: translateY(-80px);
            opacity: 0;
            transition: all 700ms ease;
        }

        .nav-container.active .desktop-nav li a {
            transform: translateY(0);
            opacity: 1;
        }

        /* Mobile Nav */

        nav .mobile-nav {
            display: flex;
            width: 100%;
            justify-content: space-between;
            list-style: none;
        }

        nav .menu-icon-container {
            width: 20px;
            height: 44px;
            display: flex;
            align-items: center;
            cursor: pointer;
        }

        nav .menu-icon {
            position: relative;
            width: 100%;
        }

        nav .menu-icon .line-1,
        nav .menu-icon .line-2 {
            position: absolute;
            height: 1px;
            width: 100%;
            background: #fff;
            transition-property: transform, top;
            transition-delay: 0ms, 160ms;
            transition-duration: 200ms;
        }

        nav .menu-icon .line-1 {
            top: -4px;
        }

        nav .menu-icon .line-2 {
            top: 4px;
        }

        .nav-container.active nav .menu-icon-container .menu-icon .line-1 {
            top: 0;
            transform: rotateZ(45deg);
            transition-property: top, transform;
            transition-delay: 0ms, 160ms;
            transition-duration: 200ms;
        }

        .nav-container.active nav .menu-icon-container .menu-icon .line-2 {
            top: 0;
            transform: rotateZ(-45deg);
            transition-property: top, transform;
            transition-delay: 0ms, 160ms;
            transition-duration: 200ms;
        }

        /* Bag Icon Animation */

        .nav-container.active .mobile-nav .link-bag {
            transform: translateY(8px);
            opacity: 0;
            pointer-events: none;
        }

        .nav-container .mobile-nav .link-bag {
            transition: all 1000ms ease;
        }

        /* Search Box */

        .mobile-search-container input {
            width: 100%;
            padding: 12px 36px;
            font-family: "Inter", sans-serif;
            font-size: 17px;
            background: #1b1b1b;
            border: 0;
            color: #fff;
            border-radius: 8px;
            outline: none;
        }

        .mobile-search-container {
            position: relative;
            padding: 0 16px;
            margin-top: -30px;
            border-bottom: 1px solid #616161;
            display: flex;
            padding-bottom: 16px;
            align-items: center;
            transform: rotateX(90deg);
            opacity: 0;
            transition: all 600ms ease;
        }

        .nav-container.active .mobile-search-container {
            transform: rotateX(0deg);
            margin-top: 10px;
            opacity: 1;
        }

        .mobile-search-container .link-search {
            position: absolute;
            left: 24px;
            opacity: .5;
            background-size: 15px;
        }

        /* Nav Move Up */

        .nav-container nav.move-up {
            margin-top: -40px;
        }

        /* Cancel Button */

        .mobile-search-container .cancel-btn {
            color: #2997ff;
            font-size: 17px;
            font-weight: 400;
            cursor: pointer;
            width: 0px;
            overflow: hidden;
            transition: all 400ms ease;
        }

        .mobile-search-container .search-bar.active + .cancel-btn {
            padding: 0 16px;
            width: 74px;
        }

        .mobile-search-container .search-bar {
            flex: 1;
        }

        /* Desktop Nav Move Down */

        nav .desktop-nav.move-down li:first-child {
            margin-top: 150px;
        }

        nav .desktop-nav.move-down li {
            opacity: 0;
            pointer-events: none;
        }

        /* Quick Links */

        .mobile-search-container .search-bar.active ~ .quick-links {
            top: 80px;
            opacity: 1;
            pointer-events: auto;
            transition-delay: 40ms;
        }

        .mobile-search-container .quick-links {
            position: absolute;
            left: 0;
            right: 0;
            padding: 0 32px;
            opacity: 0;
            pointer-events: none;
            top: 10px;
            transition: all 400ms ease;
        }

        .mobile-search-container .quick-links ul {
            list-style: none;
        }

        .mobile-search-container .quick-links h2 {
            color: #86868b;
            font-size: 12px;
            text-transform: uppercase;
            font-weight: 400;
        }

        .mobile-search-container .quick-links ul li a {
            padding: 16px 0;
            display: inline-block;
            text-decoration: none;
            color: #fff;
            font-size: 14px;
            font-weight: 400;
            border-bottom: 1px solid #616161;
            width: 100%;
        }

        .mobile-search-container .quick-links ul li a:hover {
            color: #2997ff;
        }

        /* Nav Animation */

        .nav-container nav {
            transition: all 400ms ease;
        }
    }

    input,
    div,
    span,
    a {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }```
<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>Apple</title>
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>

        <div class="nav-container">
            <nav>
                <ul class="mobile-nav">
                    <li>
                        <div class="menu-icon-container">
                            <div class="menu-icon">
                                <span class="line-1"></span>
                                <span class="line-2"></span>
                            </div>
                        </div>
                    </li>

                    <li>

                    </li>

                    <li>

                    </li>
                </ul>

                <ul class="desktop-nav">
                    <li>

                    </li>
                    <li>
                        Mac
                    </li>
                    <li>
                        iPad
                    </li>
                    <li>
                        iPhone
                    </li>
                    <li>
                        Watch
                    </li>
                    <li>
                        TV
                    </li>
                    <li>
                        Music
                    </li>
                    <li>
                        Support
                    </li>
                    <li>

                    </li>
                    <li>

                    </li>
                </ul>
            </nav>

            <!-- End of navigation menu items -->

            <div class="search-container hide">
                <div class="link-search"></div>
                <div class="search-bar">
                    <form action="">
                        <input type="text" placeholder="Search apple.com">
                    </form>
                </div>
                <div class="link-close"></div>

                <div class="quick-links">
                    <h2>Quick Links</h2>
                    <ul>
                        <li>
                            Visiting an Apple Store FAQ
                        </li>
                        <li>
                            Shop Apple Store Online
                        </li>
                        <li>
                            Accessories
                        </li>
                        <li>
                            AirPods
                        </li>
                        <li>
                            AirTag
                        </li>
                    </ul>
                </div>
            </div>

            <div class="mobile-search-container">
                <div class="link-search"></div>
                <div class="search-bar">
                    <form action="">
                        <input type="text" placeholder="Search apple.com">
                    </form>
                </div>
                <span class="cancel-btn">Cancel</span>

                <div class="quick-links">
                    <h2>Quick Links</h2>
                    <ul>
                        <li>
                            Visiting an Apple Store FAQ
                        </li>
                        <li>
                            Shop Apple Store Online
                        </li>
                        <li>
                            Accessories
                        </li>
                        <li>
                            AirPods
                        </li>
                        <li>
                            AirTag
                        </li>
                    </ul>
                </div>
            </div>

        </div>

        <div class="overlay"></div>

        <script src="main.js"></script>

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

```

Title: How to make navbar responsive?

Body:
I just learned about responsive design and adapting a page to smaller screens for accessibility, however, I'm having trouble thinking about a way to make my navbar responsive (showing the three bars instead of the whole navbar.

This is my custom navbar:

:root{ --main_color: #004771; --main_color_shade: #072060; --footer_color: #383838;}

.navbar_maincontainer{width:100%; height:50px; background-color:var(--main_color); display:flex; align-items:center; padding:0px 100px; font-size:17px;}

.navbar_link_wrapper{width:auto; height:100%; position:relative; }

.navbar_link{color:white; font-size:17px; width:100%; height:100%; display:flex; justify-content:center; align-items:center; padding:0px 30px;}

.navbar_link_wrapper:hover{background-color:var(--main_color_shade);}

.navbar_sublinks_container{position:absolute; box-shadow:4px 4px 4px rgba(0,0,0,0.2); width:300px; height:auto; left:0px; top:-700px; transition:all 600ms ease; background-color:#383838; z-index:9999999999; display:none; flex-direction:column;}

.navbar_sublink{padding:0px 15px; height:50px; display:flex; align-items:center; transition:all 600ms ease; color:rgba(255,255,255,0.8); font-size:14px; font-weight:400;}

.navbar_sublinks_line{width:100%; border-bottom:1px solid rgba(255,255,255,0.1); height:1px; margin:0 auto;}

.navbar_sublinks_title{padding:10px 0px; width:100%; color:white; font-size:13px;}

.active{background-color:var(--main_color_shade);}

.active_sub{background-color:rgba(0,0,0,0.3);}

.navbar_sublink:hover{background-color:rgba(0,0,0,0.3);}

.navbar_link_wrapper:hover .navbar_sublinks_container{display:flex;  top:100%;}

        Inicio

        Servicios

            Clases a domicilio
            Clases en grupo
            Clases para cachorros

        Quienes somos

        Formate con nosotros

            Formación básica
            Formación avanzada

        Contactar

        Testimonios

        Preguntas

Body:
<div class="nav-container">
  <nav>
    <ul class="mobile-nav">
      <li>
        <div class="menu-icon-container">
          <div class="menu-icon">
            <span class="line-1"></span>
            <span class="line-2"></span>
          </div>
        </div>
      </li>

      <li>
        <a href="#" class="link-logo"></a>
      </li>

      <li>
        <a href="" class="link-bag"></a>
      </li>
    </ul>

    <ul class="desktop-nav">
      <li>
        <a href="#" class="link-logo"></a>
      </li>
      <li>
        <a href="#">Mac</a>
      </li>
      <li>
        <a href="#">iPad</a>
      </li>
      <li>
        <a href="#">iPhone</a>
      </li>
      <li>
        <a href="#">Watch</a>
      </li>
      <li>
        <a href="#">TV</a>
      </li>
      <li>
        <a href="#">Music</a>
      </li>
      <li>
        <a href="#">Support</a>
      </li>
      <li>
        <a href="#" class="link-search"></a>
      </li>
      <li>
        <a href="#" class="link-bag"></a>
      </li>
    </ul>
  </nav>

  <!-- End of navigation menu items -->

  <div class="search-container hide">
    <div class="link-search"></div>
    <div class="search-bar">
      <form action="">
        <input type="text" placeholder="Search apple.com" />
      </form>
    </div>
    <div class="link-close"></div>

    <div class="quick-links">
      <h2>Quick Links</h2>
      <ul>
        <li>
          <a href="#">Visiting an Apple Store FAQ</a>
        </li>
        <li>
          <a href="#">Shop Apple Store Online</a>
        </li>
        <li>
          <a href="#">Accessories</a>
        </li>
        <li>
          <a href="#">AirPods</a>
        </li>
        <li>
          <a href="#">AirTag</a>
        </li>
      </ul>
    </div>
  </div>

  <div class="mobile-search-container">
    <div class="link-search"></div>
    <div class="search-bar">
      <form action="">
        <input type="text" placeholder="Search apple.com" />
      </form>
    </div>
    <span class="cancel-btn">Cancel</span>

    <div class="quick-links">
      <h2>Quick Links</h2>
      <ul>
        <li>
          <a href="#">Visiting an Apple Store FAQ</a>
        </li>
        <li>
          <a href="#">Shop Apple Store Online</a>
        </li>
        <li>
          <a href="#">Accessories</a>
        </li>
        <li>
          <a href="#">AirPods</a>
        </li>
        <li>
          <a href="#">AirTag</a>
        </li>
      </ul>
    </div>
  </div>
</div>

<div class="overlay"></div>

    const searchButton = document.querySelector("nav .desktop-nav .link-search");
    const closeButton = document.querySelector(".search-container .link-close");
    const desktopNav = document.querySelector(".desktop-nav");
    const searchContainer = document.querySelector(".search-container");
    const overlay = document.querySelector(".overlay");

    searchButton.addEventListener("click", () => {
        desktopNav.classList.add("hide");
        searchContainer.classList.remove("hide");
        overlay.classList.add("show");
    })

    closeButton.addEventListener("click", () => {
        desktopNav.classList.remove("hide");
        searchContainer.classList.add("hide");
        overlay.classList.remove("show");
    })

    overlay.addEventListener("click", () => {
        desktopNav.classList.remove("hide");
        searchContainer.classList.add("hide");
        overlay.classList.remove("show");
    })

    // Mobile Version

    const menuIconContainer = document.querySelector("nav .menu-icon-container");
    const navContainer = document.querySelector(".nav-container");

    menuIconContainer.addEventListener("click", () => {
        navContainer.classList.toggle("active");
    })

    const searchBar = document.querySelector(".mobile-search-container .search-bar");
    const nav = document.querySelector(".nav-container nav");
    const searchInput = document.querySelector(".mobile-search-container input");
    const cancelBtn = document.querySelector(".mobile-search-container .cancel-btn");

    searchInput.addEventListener("click", () => {
        searchBar.classList.add("active");
        nav.classList.add("move-up");
        desktopNav.classList.add("move-down");
    })

    cancelBtn.addEventListener("click", () => {
        searchBar.classList.remove("active");
        nav.classList.remove("move-up");
        desktopNav.classList.remove("move-down");
    })

    *,
    *::after,
    *::before {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: "Inter", sans-serif;
        font-weight: 300;
        overflow-y: scroll;
    }

    /* Desktop Nav */

    .nav-container {
        background: rgba(0, 0, 0, 0.8);
        height: 44px;
        z-index: 300;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
    }

    .nav-container nav {
        width: 1000px;
        margin: 0 auto;
        padding: 0 8px;
        height: 100%;
    }

    nav .desktop-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        list-style: none;
    }

    nav .desktop-nav li a {
        color: #fff;
        text-decoration: none;
        font-size: 14px;
        opacity: 0.8;
        transition: opacity 400ms;
    }

    nav .desktop-nav li a:hover {
        opacity: 1;
    }

    .link-logo {
        background: url('images/apple-logo.svg');
        display: block;
        background-position: center;
        height: 44px;
        width: 15px;
        background-repeat: no-repeat;
    }

    .link-search {
        background: url('images/search-icon.svg');
        display: block;
        background-position: center;
        background-size: 18px;
        height: 44px;
        width: 20px;
        background-repeat: no-repeat;
    }

    .link-bag {
        background: url('images/bag-icon.svg');
        display: block;
        background-position: center;
        background-size: 17px;
        height: 44px;
        width: 20px;
        background-repeat: no-repeat;
    }

    .link-close {
        background: url('images/close-icon.svg');
        display: block;
        background-position: center;
        background-size: 17px;
        height: 44px;
        width: 20px;
        background-repeat: no-repeat;
    }

    /* Search Container */

    .search-container.hide {
        opacity: 0;
        pointer-events: none;
    }

    .search-container {
        width: 60%;
        margin: 0 auto;
        padding: 0 42px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 200;
    }

    .search-container .link-search {
        position: absolute;
        left: 12px;
        opacity: 0.5;
    }

    .search-container .link-close {
        position: absolute;
        top: 0;
        right: 12px;
        opacity: 0.5;
        cursor: pointer;
        transition: all 400ms;
    }

    .search-container .link-close:hover {
        opacity: 0.7;
    }

    .search-container form {
        width: 100%;
        margin: 0 auto;
    }

    .search-container form input {
        width: 100%;
        height: 44px;
        border: 0;
        outline: none;
        background: transparent;
        color: #fff;
        font-family: "Inter", sans-serif;
        font-size: 17px;
    }

    /* Overlay */

    .overlay.show {
        position: fixed;
        background: rgba(0, 0, 0, 0.48);
        width: 100%;
        height: 100vh;
        left: 0;
        top: 0;
        z-index: 100;
    }

    /* Quick Links */

    .search-container .quick-links {
        background: #fff;
        position: absolute;
        left: 0;
        right: 0;
        padding: 16px 8px;
        border-radius: 0 0 16px 16px;
    }

    .search-container .quick-links h2 {
        text-transform: uppercase;
        font-size: 12px;
        color: #6e6e73;
        margin: 0 32px;
        margin-top: 10px;
    }

    .search-container .quick-links ul {
        list-style: none;
        margin-top: 12px;
    }

    .search-container .quick-links ul li a {
        display: inline-block;
        width: 100%;
        padding: 8px 50px;
        font-size: 14px;
        color: #1d1d1f;
        text-decoration: none;
        font-weight: 400;
    }

    .search-container .quick-links ul li a:hover {
        background: #f5f5f5;
        color: #2997ff;
    }

    /* Desktop Nav Animation */

    .desktop-nav li {
        transition: all 400ms ease;
    }

    .desktop-nav.hide li {
        opacity: 0;
        transform: scale(0.8);
        pointer-events: none;
    }

    /* Overlay Animation */

    .overlay {
        transition: all 400ms ease;
    }

    /* Navigation Menu Items Transition Delay */

    .desktop-nav li:nth-of-type(1),
    .desktop-nav.hide li:nth-of-type(10) {
        transition-delay: 0ms;
    }

    .desktop-nav li:nth-of-type(2),
    .desktop-nav.hide li:nth-of-type(9) {
        transition-delay: 30ms;
    }

    .desktop-nav li:nth-of-type(3),
    .desktop-nav.hide li:nth-of-type(8) {
        transition-delay: 60ms;
    }

    .desktop-nav li:nth-of-type(4),
    .desktop-nav.hide li:nth-of-type(7) {
        transition-delay: 90ms;
    }

    .desktop-nav li:nth-of-type(5),
    .desktop-nav.hide li:nth-of-type(6) {
        transition-delay: 120ms;
    }

    .desktop-nav li:nth-of-type(6),
    .desktop-nav.hide li:nth-of-type(5) {
        transition-delay: 150ms;
    }

    .desktop-nav li:nth-of-type(7),
    .desktop-nav.hide li:nth-of-type(4) {
        transition-delay: 180ms;
    }

    .desktop-nav li:nth-of-type(8),
    .desktop-nav.hide li:nth-of-type(3) {
        transition-delay: 210ms;
    }

    .desktop-nav li:nth-of-type(9),
    .desktop-nav.hide li:nth-of-type(2) {
        transition-delay: 240ms;
    }

    .desktop-nav li:nth-of-type(10),
    .desktop-nav.hide li:nth-of-type(1) {
        transition-delay: 270ms;
    }

    /* Search Container Animation */

    .search-container form,
    .search-container .link-search {
        opacity: 1;
        transform: translateX(0);
        transition: all 400ms ease;
        transition-delay: 300ms;
    }

    .search-container.hide form,
    .search-container.hide .link-search {
        opacity: 0;
        transform: translateX(50px);
    }

    .search-container .link-search {
        opacity: 0.6;
    }

    .search-container.hide .link-close {
        opacity: 0;
    }

    .search-container .link-close {
        opacity: 0.5;
        transition: all 400ms ease;
        transition-delay: 400ms;
    }

    .search-container.hide .quick-links h2 {
        opacity: 0;
        transform: translateX(50px);
    }

    .search-container .quick-links h2 {
        opacity: 1;
        transform: translateX(0);
        transition: all 400ms ease;
        transition-delay: 100ms;
    }

    .search-container.hide .quick-links ul li {
        transform: translateX(60px);
        opacity: 0;
    }

    .search-container .quick-links ul li {
        opacity: 1;
        transform: translateX(0);
        transition: all 400ms ease;
    }

    .search-container .quick-links ul li:nth-of-type(1) {
        transition-delay: 120ms;
    }

    .search-container .quick-links ul li:nth-of-type(2) {
        transition-delay: 140ms;
    }

    .search-container .quick-links ul li:nth-of-type(3) {
        transition-delay: 160ms;
    }

    .search-container .quick-links ul li:nth-of-type(4) {
        transition-delay: 180ms;
    }

    .search-container .quick-links ul li:nth-of-type(5) {
        transition-delay: 200ms;
    }

    /* Hidden Items */

    .mobile-nav,
    .mobile-search-container {
        display: none;
    }

    /* Media Queries */

    @media (max-width: 1100px) {
        .nav-container nav {
            width: 100%;
            padding: 0 32px;
        }
    }

    @media (max-width: 768px) {
        .nav-container .desktop-nav {
            flex-direction: column;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 0vh;
            background: #000;
            justify-content: start;
            overflow: hidden;
            z-index: -1;
            transition: all 1000ms ease;
        }

        .nav-container.active .desktop-nav {
            height: 100vh;
        }

        .nav-container .desktop-nav li {
            width: 100%;
            padding: 0 32px;
        }

        .nav-container .desktop-nav li:first-child {
            margin-top: 120px;
        }

        .nav-container .desktop-nav .link-logo,
        .nav-container .desktop-nav .link-search,
        .nav-container .desktop-nav .link-bag {
            display: none;
        }

        .nav-container .desktop-nav li a {
            padding: 16px 0;
            display: inline-block;
            border-bottom: 1px solid #616161;
            width: 100%;
            font-size: 17px;
            transform: translateY(-80px);
            opacity: 0;
            transition: all 700ms ease;
        }

        .nav-container.active .desktop-nav li a {
            transform: translateY(0);
            opacity: 1;
        }

        /* Mobile Nav */

        nav .mobile-nav {
            display: flex;
            width: 100%;
            justify-content: space-between;
            list-style: none;
        }

        nav .menu-icon-container {
            width: 20px;
            height: 44px;
            display: flex;
            align-items: center;
            cursor: pointer;
        }

        nav .menu-icon {
            position: relative;
            width: 100%;
        }

        nav .menu-icon .line-1,
        nav .menu-icon .line-2 {
            position: absolute;
            height: 1px;
            width: 100%;
            background: #fff;
            transition-property: transform, top;
            transition-delay: 0ms, 160ms;
            transition-duration: 200ms;
        }

        nav .menu-icon .line-1 {
            top: -4px;
        }

        nav .menu-icon .line-2 {
            top: 4px;
        }

        .nav-container.active nav .menu-icon-container .menu-icon .line-1 {
            top: 0;
            transform: rotateZ(45deg);
            transition-property: top, transform;
            transition-delay: 0ms, 160ms;
            transition-duration: 200ms;
        }

        .nav-container.active nav .menu-icon-container .menu-icon .line-2 {
            top: 0;
            transform: rotateZ(-45deg);
            transition-property: top, transform;
            transition-delay: 0ms, 160ms;
            transition-duration: 200ms;
        }

        /* Bag Icon Animation */

        .nav-container.active .mobile-nav .link-bag {
            transform: translateY(8px);
            opacity: 0;
            pointer-events: none;
        }

        .nav-container .mobile-nav .link-bag {
            transition: all 1000ms ease;
        }

        /* Search Box */

        .mobile-search-container input {
            width: 100%;
            padding: 12px 36px;
            font-family: "Inter", sans-serif;
            font-size: 17px;
            background: #1b1b1b;
            border: 0;
            color: #fff;
            border-radius: 8px;
            outline: none;
        }

        .mobile-search-container {
            position: relative;
            padding: 0 16px;
            margin-top: -30px;
            border-bottom: 1px solid #616161;
            display: flex;
            padding-bottom: 16px;
            align-items: center;
            transform: rotateX(90deg);
            opacity: 0;
            transition: all 600ms ease;
        }

        .nav-container.active .mobile-search-container {
            transform: rotateX(0deg);
            margin-top: 10px;
            opacity: 1;
        }

        .mobile-search-container .link-search {
            position: absolute;
            left: 24px;
            opacity: .5;
            background-size: 15px;
        }

        /* Nav Move Up */

        .nav-container nav.move-up {
            margin-top: -40px;
        }

        /* Cancel Button */

        .mobile-search-container .cancel-btn {
            color: #2997ff;
            font-size: 17px;
            font-weight: 400;
            cursor: pointer;
            width: 0px;
            overflow: hidden;
            transition: all 400ms ease;
        }

        .mobile-search-container .search-bar.active + .cancel-btn {
            padding: 0 16px;
            width: 74px;
        }

        .mobile-search-container .search-bar {
            flex: 1;
        }

        /* Desktop Nav Move Down */

        nav .desktop-nav.move-down li:first-child {
            margin-top: 150px;
        }

        nav .desktop-nav.move-down li {
            opacity: 0;
            pointer-events: none;
        }

        /* Quick Links */

        .mobile-search-container .search-bar.active ~ .quick-links {
            top: 80px;
            opacity: 1;
            pointer-events: auto;
            transition-delay: 40ms;
        }

        .mobile-search-container .quick-links {
            position: absolute;
            left: 0;
            right: 0;
            padding: 0 32px;
            opacity: 0;
            pointer-events: none;
            top: 10px;
            transition: all 400ms ease;
        }

        .mobile-search-container .quick-links ul {
            list-style: none;
        }

        .mobile-search-container .quick-links h2 {
            color: #86868b;
            font-size: 12px;
            text-transform: uppercase;
            font-weight: 400;
        }

        .mobile-search-container .quick-links ul li a {
            padding: 16px 0;
            display: inline-block;
            text-decoration: none;
            color: #fff;
            font-size: 14px;
            font-weight: 400;
            border-bottom: 1px solid #616161;
            width: 100%;
        }

        .mobile-search-container .quick-links ul li a:hover {
            color: #2997ff;
        }

        /* Nav Animation */

        .nav-container nav {
            transition: all 400ms ease;
        }
    }

    input,
    div,
    span,
    a {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    <!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>Apple</title>
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>

        <div class="nav-container">
            <nav>
                <ul class="mobile-nav">
                    <li>
                        <div class="menu-icon-container">
                            <div class="menu-icon">
                                <span class="line-1"></span>
                                <span class="line-2"></span>
                            </div>
                        </div>
                    </li>

                    <li>
                        <a href="#" class="link-logo"></a>
                    </li>

                    <li>
                        <a href="" class="link-bag"></a>
                    </li>
                </ul>

                <ul class="desktop-nav">
                    <li>
                        <a href="#" class="link-logo"></a>
                    </li>
                    <li>
                        <a href="#">Mac</a>
                    </li>
                    <li>
                        <a href="#">iPad</a>
                    </li>
                    <li>
                        <a href="#">iPhone</a>
                    </li>
                    <li>
                        <a href="#">Watch</a>
                    </li>
                    <li>
                        <a href="#">TV</a>
                    </li>
                    <li>
                        <a href="#">Music</a>
                    </li>
                    <li>
                        <a href="#">Support</a>
                    </li>
                    <li>
                        <a href="#" class="link-search"></a>
                    </li>
                    <li>
                        <a href="#" class="link-bag"></a>
                    </li>
                </ul>
            </nav>

            <!-- End of navigation menu items -->

            <div class="search-container hide">
                <div class="link-search"></div>
                <div class="search-bar">
                    <form action="">
                        <input type="text" placeholder="Search apple.com">
                    </form>
                </div>
                <div class="link-close"></div>

                <div class="quick-links">
                    <h2>Quick Links</h2>
                    <ul>
                        <li>
                            <a href="#">Visiting an Apple Store FAQ</a>
                        </li>
                        <li>
                            <a href="#">Shop Apple Store Online</a>
                        </li>
                        <li>
                            <a href="#">Accessories</a>
                        </li>
                        <li>
                            <a href="#">AirPods</a>
                        </li>
                        <li>
                            <a href="#">AirTag</a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="mobile-search-container">
                <div class="link-search"></div>
                <div class="search-bar">
                    <form action="">
                        <input type="text" placeholder="Search apple.com">
                    </form>
                </div>
                <span class="cancel-btn">Cancel</span>

                <div class="quick-links">
                    <h2>Quick Links</h2>
                    <ul>
                        <li>
                            <a href="#">Visiting an Apple Store FAQ</a>
                        </li>
                        <li>
                            <a href="#">Shop Apple Store Online</a>
                        </li>
                        <li>
                            <a href="#">Accessories</a>
                        </li>
                        <li>
                            <a href="#">AirPods</a>
                        </li>
                        <li>
                            <a href="#">AirTag</a>
                        </li>
                    </ul>
                </div>
            </div>

        </div>

        <div class="overlay"></div>

        <script src="main.js"></script>

    </body>
    </html>


问:
Why str.startswith() works on filtering but str.match() does not work?
I have a Dataframe in which there is a column of Mobile numbers (df1). Also, I have another Dataframe same as df1 with some of df1's Mobile numbers (df2). I want to extract the rows of df1 that have the same Mobile numbers in df2.

I created a tuple from df2 Mobile numbers (df2_mobiles).  I used this code for extracting rows in df1 containing df2 Mobile numbers:

```<code>df1[df1.Mobile.str.match(df2_mobiles)]
</code>```

and received this error:
"first argument must be string or compiled pattern"

But when I use:

```<code>df1[df1.Mobile.str.startswith(df2_mobiles)]
</code>```

it works.
However I need exact match of mobile numbers. Anybody can help me how I can do this properly?

答:
Please check this link. I think it is answered here.
Use a list of values to select rows from a Pandas dataframe

You could use "isin" to find the exact match.

```<code>df1[df1.Mobile.isin(df2.Mobile.to_list())]
</code>```

Body:
I have a Dataframe in which there is a column of Mobile numbers (df1). Also, I have another Dataframe same as df1 with some of df1's Mobile numbers (df2). I want to extract the rows of df1 that have the same Mobile numbers in df2.

I created a tuple from df2 Mobile numbers (df2_mobiles).  I used this code for extracting rows in df1 containing df2 Mobile numbers:

df1[df1.Mobile.str.match(df2_mobiles)]

and received this error:
"first argument must be string or compiled pattern"

But when I use:

df1[df1.Mobile.str.startswith(df2_mobiles)]

it works.
However I need exact match of mobile numbers. Anybody can help me how I can do this properly?

Body:
Please check this link. I think it is answered here.
Use a list of values to select rows from a Pandas dataframe

You could use "isin" to find the exact match.

df1[df1.Mobile.isin(df2.Mobile.to_list())]


问:
Unity PUN 2 shooting not syncing
I wanted to add multiplayer to my game but i quickly faced many many problems, i cant find any clear solution online. i made a weapon script where the player can shoot and reload.
problems:

when i shoot, on 1 screen both players shoot, but at the other screen nothing happens

when i swap weapons, on 1 screen both players swap weapons, on the second screen nothing happens
note: im still a complete beginner so go easy on me please :)) thanks!

weapon script:

```<code>using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using TMPro;
using Photon.Pun;

public class weaponScript : MonoBehaviour
{
    public weaponSO weaponStats;

    public GameObject reloadingText;
    public TMP_Text ammoValue;
    public Transform firePoint;
    public GameObject bulletPrefab;
    public float bulletForce = 2f;
    public bool isShooting;
    public float pistolDamage;
    public int currentAmmoClip = 1;
    public int maxAmmoClip;
    public int currentReserve = 1;
    public int maxReserve;
    public float reloadTime = 2f;
    public bool isReloading = false;
    public int bulletsShot;
    public float startingDamage;
    PhotonView view;

    public void Start()
    {
        view = GetComponent<PhotonView>();

        if(view.IsMine)
        {
            view.RPC("Update", RpcTarget.AllBuffered);
        }
        WeaponStats();
        currentAmmoClip = maxAmmoClip;
        currentReserve = maxReserve;
        bulletsShot = maxAmmoClip - currentAmmoClip;
        isShooting = false;
        weaponStats.damage = startingDamage;

    }
    [PunRPC]
    public void Update()
    {

        ammoValue.text = currentAmmoClip.ToString("0") + "/" + currentReserve.ToString("0");
        if (Input.GetKeyDown(KeyCode.R))
        {
            if(currentReserve <= 0)
        {
            return;
        }
            if (currentAmmoClip == maxAmmoClip && !isReloading)
            {
                return;
            }
            else
            {
                StartCoroutine(Reload());
                return;
            }
        }

        if(Input.GetButtonDown("Fire1") && currentAmmoClip >= 1)
        {

            if(isReloading == false)
            {
                bulletsShot += 1;
                currentAmmoClip -= 1;
                isShooting = true;
                Shoot();
                FindObjectOfType<AudioManager>().Play("shot1");
                return;
            }
        }

        if(isReloading)
           return;

        if(currentAmmoClip <= 0 && currentReserve >= 1)
        {

            StartCoroutine(Reload());
            return;
        }

    }
    IEnumerator Reload()
    {

        reloadingText.SetActive(true);
        isReloading = true;
        yield return new WaitForSeconds(reloadTime);
        if(currentReserve <= bulletsShot)
        {
            currentAmmoClip += currentReserve;
            currentReserve = 0;
        }
        else
        {
            currentReserve -= bulletsShot;
            currentAmmoClip = maxAmmoClip;
        }
        bulletsShot = 0;
        reloadingText.SetActive(false);

        isReloading = false;
    }

    void Shoot()
    {
        GameObject bullet = Instantiate(bulletPrefab, firePoint.position, firePoint.rotation);
        Rigidbody2D rb = bullet.GetComponent<Rigidbody2D>();
        rb.AddForce(firePoint.up * bulletForce, ForceMode2D.Impulse);
    }

    public void WeaponStats()
    {
        pistolDamage = weaponStats.initialDamage;
        maxAmmoClip = weaponStats.maxAmmoClip;
        maxReserve = weaponStats.maxReserve;
        reloadTime = weaponStats.reloadTime;
        bulletForce = weaponStats.bulletForce;
        startingDamage = weaponStats.initialDamage;
    }
}
</code>```

weapon holder:

```<code>using UnityEngine;

public class WeaponHolder : MonoBehaviour
{

    public int selectedWeapon = 0;

    void Start()
    {
        SelectWeapon();
    }

    void Update()
    {
        if(FindObjectsOfType<weaponScript>()[0].isReloading == true)
        {
            return;
        }
        else
        {
            switchWeapon();
        }
    }

    public void switchWeapon()
    {
        int previousSelectedWeapon = selectedWeapon;
        if(Input.GetAxis("Mouse ScrollWheel") > 0f)
        {
            if(selectedWeapon >= transform.childCount - 1)
            {
                selectedWeapon = 0;
            }
            else
            {
                selectedWeapon++;
            }
        }

        if(Input.GetAxis("Mouse ScrollWheel") < 0f)
        {
            if(selectedWeapon <= 0)
            {
                selectedWeapon = transform.childCount - 1;
            }
            else
            {
                selectedWeapon--;
            }
        }

        if(previousSelectedWeapon != selectedWeapon)
        {
            SelectWeapon();
        }
    }

    public void SelectWeapon()
    {
        int i = 0;
        foreach (Transform weapon in transform)
        {
            if(i ==  selectedWeapon)
            {
                weapon.gameObject.SetActive(true);
            }
            else
            {
                weapon.gameObject.SetActive(false);
            }
            i++;
        }
    }
}
</code>```

i tried adding

```<code>        if(view.IsMine == true)
        {
            Debug.Log("true");
        }
        else
        {
            Debug.Log("false");
        }
</code>```

but nothing happened and i couldnt shoot anymore. thanks for reading

答:
The problem is you don't sync anything in your game. This means the other computer can't know what it has to do.

Whenever you want to sync something you have to call an RPC function.

Maybe watch some tutorials about how to do this properly and how to set up a simple multiplayer lobby.

EDIT:
What the other comments above mentioned with .IsMine is true, but you're doing it wrong. You have to call this in start or awake and whenever the view is not yours you disable the camera of the person only and disable shooting. Its important to only do this on your computer! If you are not doing everyone will shoot when you press Shoot and everyone will walk when you walk.

Title: Unity PUN 2 shooting not syncing

Body:
I wanted to add multiplayer to my game but i quickly faced many many problems, i cant find any clear solution online. i made a weapon script where the player can shoot and reload.
problems:

when i shoot, on 1 screen both players shoot, but at the other screen nothing happens

when i swap weapons, on 1 screen both players swap weapons, on the second screen nothing happens
note: im still a complete beginner so go easy on me please :)) thanks!

weapon script:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using TMPro;
using Photon.Pun;

public class weaponScript : MonoBehaviour
{
    public weaponSO weaponStats;

    public GameObject reloadingText;
    public TMP_Text ammoValue;
    public Transform firePoint;
    public GameObject bulletPrefab;
    public float bulletForce = 2f;
    public bool isShooting;
    public float pistolDamage;
    public int currentAmmoClip = 1;
    public int maxAmmoClip;
    public int currentReserve = 1;
    public int maxReserve;
    public float reloadTime = 2f;
    public bool isReloading = false;
    public int bulletsShot;
    public float startingDamage;
    PhotonView view;

    public void Start()
    {
        view = GetComponent<PhotonView>();

        if(view.IsMine)
        {
            view.RPC("Update", RpcTarget.AllBuffered);
        }
        WeaponStats();
        currentAmmoClip = maxAmmoClip;
        currentReserve = maxReserve;
        bulletsShot = maxAmmoClip - currentAmmoClip;
        isShooting = false;
        weaponStats.damage = startingDamage;

    }
    [PunRPC]
    public void Update()
    {

        ammoValue.text = currentAmmoClip.ToString("0") + "/" + currentReserve.ToString("0");
        if (Input.GetKeyDown(KeyCode.R))
        {
            if(currentReserve <= 0)
        {
            return;
        }
            if (currentAmmoClip == maxAmmoClip && !isReloading)
            {
                return;
            }
            else
            {
                StartCoroutine(Reload());
                return;
            }
        }

        if(Input.GetButtonDown("Fire1") && currentAmmoClip >= 1)
        {

            if(isReloading == false)
            {
                bulletsShot += 1;
                currentAmmoClip -= 1;
                isShooting = true;
                Shoot();
                FindObjectOfType<AudioManager>().Play("shot1");
                return;
            }
        }

        if(isReloading)
           return;

        if(currentAmmoClip <= 0 && currentReserve >= 1)
        {

            StartCoroutine(Reload());
            return;
        }

    }
    IEnumerator Reload()
    {

        reloadingText.SetActive(true);
        isReloading = true;
        yield return new WaitForSeconds(reloadTime);
        if(currentReserve <= bulletsShot)
        {
            currentAmmoClip += currentReserve;
            currentReserve = 0;
        }
        else
        {
            currentReserve -= bulletsShot;
            currentAmmoClip = maxAmmoClip;
        }
        bulletsShot = 0;
        reloadingText.SetActive(false);

        isReloading = false;
    }

    void Shoot()
    {
        GameObject bullet = Instantiate(bulletPrefab, firePoint.position, firePoint.rotation);
        Rigidbody2D rb = bullet.GetComponent<Rigidbody2D>();
        rb.AddForce(firePoint.up * bulletForce, ForceMode2D.Impulse);
    }

    public void WeaponStats()
    {
        pistolDamage = weaponStats.initialDamage;
        maxAmmoClip = weaponStats.maxAmmoClip;
        maxReserve = weaponStats.maxReserve;
        reloadTime = weaponStats.reloadTime;
        bulletForce = weaponStats.bulletForce;
        startingDamage = weaponStats.initialDamage;
    }
}

weapon holder:

using UnityEngine;

public class WeaponHolder : MonoBehaviour
{

    public int selectedWeapon = 0;

    void Start()
    {
        SelectWeapon();
    }

    void Update()
    {
        if(FindObjectsOfType<weaponScript>()[0].isReloading == true)
        {
            return;
        }
        else
        {
            switchWeapon();
        }
    }

    public void switchWeapon()
    {
        int previousSelectedWeapon = selectedWeapon;
        if(Input.GetAxis("Mouse ScrollWheel") > 0f)
        {
            if(selectedWeapon >= transform.childCount - 1)
            {
                selectedWeapon = 0;
            }
            else
            {
                selectedWeapon++;
            }
        }

        if(Input.GetAxis("Mouse ScrollWheel") < 0f)
        {
            if(selectedWeapon <= 0)
            {
                selectedWeapon = transform.childCount - 1;
            }
            else
            {
                selectedWeapon--;
            }
        }

        if(previousSelectedWeapon != selectedWeapon)
        {
            SelectWeapon();
        }
    }

    public void SelectWeapon()
    {
        int i = 0;
        foreach (Transform weapon in transform)
        {
            if(i ==  selectedWeapon)
            {
                weapon.gameObject.SetActive(true);
            }
            else
            {
                weapon.gameObject.SetActive(false);
            }
            i++;
        }
    }
}

i tried adding

        if(view.IsMine == true)
        {
            Debug.Log("true");
        }
        else
        {
            Debug.Log("false");
        }

but nothing happened and i couldnt shoot anymore. thanks for reading


问:
Is there a simple way to make Sequelize return it's date/time fields in a particular format?
We need to have sequelize return dates in a particular format, not the default one. As far as I can tell, there is no way to set that up in options, or any other way. Short of manually updating the dates every time after they are retrieved, anyone been able to solve this easily? Or am I missing something?</p>

答:
To format Date, you can use Sequelize.fn method. I tried all mentioned methods but it won't work with date_formate. Try to create with bellow one.

```<code>model.findAll({
  attributes: [
      'id',
      [sequelize.fn('FORMAT', sequelize.col('col_name'), 'yyyy-mm-dd'), 'col_name']
  ]})
  .then(function(result) {
    console.log(result);
  });
</code>```

here, i used 'FORMAT' instead of 'DATE_FORMAT', because it through error :
'date_format' is not a recognized built-in function name in api call.

Body:
To format Date, you can use Sequelize.fn method. I tried all mentioned methods but it won't work with date_formate. Try to create with bellow one.

model.findAll({
  attributes: [
      'id',
      [sequelize.fn('FORMAT', sequelize.col('col_name'), 'yyyy-mm-dd'), 'col_name']
  ]})
  .then(function(result) {
    console.log(result);
  });

here, i used 'FORMAT' instead of 'DATE_FORMAT', because it through error :
'date_format' is not a recognized built-in function name in api call.


问:
A script with type="text/babel" isn't executing or being requested by chrome, but it works as a "text/javascript" file
I'm trying to learn react and have this simple template from the getting started guide:

```<code><!DOCTYPE html>
  <head>
    <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone@7.9.4/babel.min.js"></script>
    <script type="text/babel" src="/main.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
</code>```

main.js has this code:

```<code>console.log("Works!")
</code>```

But this never runs. In fact, according to the devtools, it's not even being requested. Changing the type="text/babel" to text/javascript makes it run, but I can't use any JSX like that. I've also tried inlining the code and it still does not work.

答:
A little dig in the chrome devtools revealed that due to CORS policy the script request for "main.js" has been blocked. To overcome this you can disable the CORS policy for chrome.

TO disable CORS policy you can follow:
Disable CORS for Chrome Although it is not recommended.

Simplest thing to do is here is just use a conventional node environment to practice react.

Body:
I'm trying to learn react and have this simple template from the getting started guide:

<!DOCTYPE html>

main.js has this code:

console.log("Works!")

But this never runs. In fact, according to the devtools, it's not even being requested. Changing the type="text/babel" to text/javascript makes it run, but I can't use any JSX like that. I've also tried inlining the code and it still does not work.


问:
RSA key is not allowed
I can't configure SSH key-authentication on my new VDS server. After I've done ssh-copy-id I still get password prompt for user.

To debug I added LogLevel DEBUG3 in /etc/ssh/sshd_config and restarted systemctl restart sshd and saw in logs /var/log/secure this message:

RSA key is not allowed

Why does this happen and how do I fix it?

答:
OpenSSH disabled RSA scheme by default for security reasons.

Therefore the best option is to create new local keys using more secure algo:

ssh-keygen -t ed25519
```

Title: RSA key is not allowed


问:
Modify large string
I have a large string in the following format -

```<code>   <a href="12345.html"><a href="12345.html"><a href="12345.html"><a href="12345.html">
   <a href="12345.html"><a href="12345.html"><a href="12345.html"><a href="12345.html">
</code>```

Id like to store all occurances of the value that occurs before .html. So above html becomes something like 12345.html,12345.html,12345.html,12345.html,12345.html,12345.html,12345.html,12345.html

Do I need a regular expression? or some kind of replace method.

Thanks

答:
If you are accessing this string inside the java code, you can split the string on  "=' delimeter. It will result in a bunch of strings. One string will look like "

<p>So the steps are:
1. split the string which will result in string array.
2. Iterate over the resulting array and look for the pattern ">

Title: Modify large string

Body:
I have a large string in the following format -

Id like to store all occurances of the value that occurs before .html. So above html becomes something like 12345.html,12345.html,12345.html,12345.html,12345.html,12345.html,12345.html,12345.html

Do I need a regular expression? or some kind of replace method.

Thanks

Body:
If you are accessing this string inside the java code, you can split the string on  "=' delimeter. It will result in a bunch of strings. One string will look like "

So the steps are:
1. split the string which will result in string array.
2. Iterate over the resulting array and look for the pattern ">


问:
python: efficient and pythonic way to get sublist from a descending list which is larger than threshold
Given a list with descending order, e.g. [10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0, 0, 0, -1, -2, -2] and threshold = 1.2, I want to get sublist from original list with all elements larger than threshold

Method1:

orgin_lst = [10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0, 0, 0, -1, -2, -2]
lst = [i for i in orgin_lst if i > threshold]
```
<p>This is pythonic way but <strong>we don't use the descending property and cannot break out when found a element not larger than threshold</strong>. If there are few satisfied elements but oringal list is very large, the performance is not good.</p>
<p>Method2:</p>
<pre class="lang-py prettyprint-override"><code>orgin_lst = [10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0, 0, 0, -1, -2, -2]
lst = []
for i in orgin_lst:
    if i <= threshold:
        break
    lst.append(i)
</code>```

However this code is not quite pythonic.

Is there a way  that I can combine pythonic style and performance?

答:
Python 3.10+

Binary search is fast for sorted data, O(log n) time. And Python's bisect module already does it. It wants increasing data and yours is decreasing, but we can virtually make it increasing. Just use its shiny new key parameter to negate the O(log n) accessed elements (and search for the negated threshold):

```<code>from bisect import bisect_left
from operator import neg

i = bisect_left(orgin_lst, -threshold, key=neg)
lst = orgin_lst[:i]
</code>```

Alternatively, use a key function that returns False for values larger than the threshold and True otherwise. Since False is smaller than True (they act like 0 and 1, respectively), we again have a monotonically increasing sequence and can use bisect with this:

```<code>from bisect import bisect

i = bisect(orgin_lst, False, key=lambda x: x <= threshold)
lst = orgin_lst[:i]
</code>```

If you don't need a separate new list, you could use del orgin_lst[i:] to instead remove the unwanted elements.

Before Python 3.10

Previously I would've written a proxy class to do the job now done by that much more convenient key parameter:

```<code>from bisect import bisect_left

class Negate:
    def __getitem__(_, i):
        return -orgin_lst[i]

i = bisect_left(Negate(), -threshold, 0, len(orgin_lst))
lst = orgin_lst[:i]
</code>```

Or I might've written binary search myself, but I've done that so many times that at some point I started to loathe it.

Exponential search

Under your Method1, the list comprehension comparing every element, you wrote: "If there are few satisfied elements but oringal list is very large, the performance is not good". If that was not just an argument against that list comprehension but you actually do have mostly very few satisfied elements and a very long list, then exponential search could be better than binary search. But it would be more code (unless you find a package for it, I guess).

A simple iterative search like your Method2 (which I btw do find pythonic) or Chris' answer or with itertools.takewhile would also be fast in such extreme cases, but for cases with large numbers of satisfied elements, they'd be much slower than binary search and exponential search.

itertools.takewhile

Like I said it would be slower in general, but it's fast for those best-cases and it's quite simple and clean:

```<code>from itertools import takewhile

lst = list(takewhile(lambda x: x > threshold, orgin_lst))
</code>```

Faster loop

Like I said I do find your loop pythonic, and it's good for best-cases. But calling append to individually append elements to the result is quite costly. Would probably be faster to at first just find the first too small element, then find its index and slice:

```<code>for i in orgin_lst:
    if i <= threshold:
        lst = orgin_lst[:orgin_lst.index(i)]
        break
else:
    lst = orgin_lst[:]
</code>```

Again, if you're ok with just removing the unwanted elements from the existing list, use del inside the if and then you don't need the else part here.

A similar solution I wrote for another question ended up second-fastest in the benchmark there.

Alternative implementation:

```<code>cut = None
for i in orgin_lst:
    if i <= threshold:
        cut = orgin_lst.index(i)
        break
lst = orgin_lst[:cut]
</code>```

Body:
Given a list with descending order, e.g. [10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0, 0, 0, -1, -2, -2] and threshold = 1.2, I want to get sublist from original list with all elements larger than threshold

Method1:

orgin_lst = [10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0, 0, 0, -1, -2, -2]
lst = [i for i in orgin_lst if i > threshold]

This is pythonic way but we don't use the descending property and cannot break out when found a element not larger than threshold. If there are few satisfied elements but oringal list is very large, the performance is not good.

Method2:

orgin_lst = [10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0, 0, 0, -1, -2, -2]
lst = []
for i in orgin_lst:
    if i <= threshold:
        break
    lst.append(i)

However this code is not quite pythonic.

Is there a way  that I can combine pythonic style and performance?

Body:
Python 3.10+

Binary search is fast for sorted data, O(log n) time. And Python's bisect module already does it. It wants increasing data and yours is decreasing, but we can virtually make it increasing. Just use its shiny new key parameter to negate the O(log n) accessed elements (and search for the negated threshold):

from bisect import bisect_left
from operator import neg

i = bisect_left(orgin_lst, -threshold, key=neg)
lst = orgin_lst[:i]

Alternatively, use a key function that returns False for values larger than the threshold and True otherwise. Since False is smaller than True (they act like 0 and 1, respectively), we again have a monotonically increasing sequence and can use bisect with this:

from bisect import bisect

i = bisect(orgin_lst, False, key=lambda x: x <= threshold)
lst = orgin_lst[:i]

If you don't need a separate new list, you could use del orgin_lst[i:] to instead remove the unwanted elements.

Before Python 3.10

Previously I would've written a proxy class to do the job now done by that much more convenient key parameter:

from bisect import bisect_left

class Negate:
    def __getitem__(_, i):
        return -orgin_lst[i]

i = bisect_left(Negate(), -threshold, 0, len(orgin_lst))
lst = orgin_lst[:i]

Or I might've written binary search myself, but I've done that so many times that at some point I started to loathe it.

Exponential search

Under your Method1, the list comprehension comparing every element, you wrote: "If there are few satisfied elements but oringal list is very large, the performance is not good". If that was not just an argument against that list comprehension but you actually do have mostly very few satisfied elements and a very long list, then exponential search could be better than binary search. But it would be more code (unless you find a package for it, I guess).

A simple iterative search like your Method2 (which I btw do find pythonic) or Chris' answer or with itertools.takewhile would also be fast in such extreme cases, but for cases with large numbers of satisfied elements, they'd be much slower than binary search and exponential search.

itertools.takewhile

Like I said it would be slower in general, but it's fast for those best-cases and it's quite simple and clean:

from itertools import takewhile

lst = list(takewhile(lambda x: x > threshold, orgin_lst))

Faster loop

Like I said I do find your loop pythonic, and it's good for best-cases. But calling append to individually append elements to the result is quite costly. Would probably be faster to at first just find the first too small element, then find its index and slice:

for i in orgin_lst:
    if i <= threshold:
        lst = orgin_lst[:orgin_lst.index(i)]
        break
else:
    lst = orgin_lst[:]

Again, if you're ok with just removing the unwanted elements from the existing list, use del inside the if and then you don't need the else part here.

A similar solution I wrote for another question ended up second-fastest in the benchmark there.

Alternative implementation:

cut = None
for i in orgin_lst:
    if i <= threshold:
        cut = orgin_lst.index(i)
        break
lst = orgin_lst[:cut]


问:
Reseting number java
So i got problem in java to determine who the last kid who got the candy, n is how many children, m is how many candy, and s is the number of kid who got the first candy.
so basically if n =4, m=6, and s =2 the answer is 3, because all started from 2(number of kid who got the first candy)->3->4 and restart to 1->2->3 and 3 is the last kid who got the candy.
the code run perfectly but i encounter bug at n = 3333, m =3333, and s = 1</p>
```<code>public static void main(String[] args) {
    Scanner in = new Scanner(System.in);
        int n = in.nextInt();
        int m = in.nextInt();
        int s = in.nextInt();
        int total = m%n;
        int jaw = total+s-1;
            System.out.print(jaw);

}
</code>```

答:
The problem is that you arrive at person 0 , who does not exist.
3333%3333 = 0
then 0 + 1 - 1 = 0
As we are in a loop 0 is the last person of the previous turn ie person number m.
We solve this by saying that, if the result is zero we return m.</p>
```<code>import java.util.Scanner;
class sweets {
public static void main(String[] args) {
    Scanner in = new Scanner(System.in);
        int n = in.nextInt();
        int m = in.nextInt();
        int s = in.nextInt();
        int total = m%n;
        int jaw = total+s-1;
        if(jaw == 0){
                jaw = m;
                }
        System.out.print(jaw);
        }
}

</code>```

Title: Reseting number java

Body:
So i got problem in java to determine who the last kid who got the candy, n is how many children, m is how many candy, and s is the number of kid who got the first candy.
so basically if n =4, m=6, and s =2 the answer is 3, because all started from 2(number of kid who got the first candy)->3->4 and restart to 1->2->3 and 3 is the last kid who got the candy.
the code run perfectly but i encounter bug at n = 3333, m =3333, and s = 1

public static void main(String[] args) {
    Scanner in = new Scanner(System.in);
        int n = in.nextInt();
        int m = in.nextInt();
        int s = in.nextInt();
        int total = m%n;
        int jaw = total+s-1;
            System.out.print(jaw);

}

Body:
The problem is that you arrive at person 0 , who does not exist.
3333%3333 = 0
then 0 + 1 - 1 = 0
As we are in a loop 0 is the last person of the previous turn ie person number m.
We solve this by saying that, if the result is zero we return m.

import java.util.Scanner;
class sweets {
public static void main(String[] args) {
    Scanner in = new Scanner(System.in);
        int n = in.nextInt();
        int m = in.nextInt();
        int s = in.nextInt();
        int total = m%n;
        int jaw = total+s-1;
        if(jaw == 0){
                jaw = m;
                }
        System.out.print(jaw);
        }
}