问:
Dynamic sort with large workbook
I can do some basic sortinng using vba however i cannot get things to work when i want to make it dynamic...
what i have done now is set a hard stop at 10k, however the workbooks i need to sort change rapidly in size.

what would be the best approach and why?

i have tried to set the "Range" to Range("a1:B" & lastrow), respectively for each select however this seems to hang and not execute the macro.

```<code>    ActiveWorkbook.Worksheets("Rapportage").Sort.SortFields.Add2 Key:=Range( _
        "A1:BZ1"), SortOn:=xlSortOnValues, Order:=xlAscending, DataOption:= _
        xlSortNormal
    With ActiveWorkbook.Worksheets("Rapportage").Sort
        .SetRange Range("A1:BZ9999")
        .Header = xlYes
        .MatchCase = False
        .Orientation = xlLeftToRight
        .SortMethod = xlPinYin
        .Apply
    End With
    Application.CutCopyMode = False
    Range("q3", Range("q5 : q9999")).FormulaR1C1 = "=RC[1]+RC[2]"
    Rows("5:9999").Select
    ActiveWorkbook.Worksheets("Rapportage").Sort.SortFields.Clear
    ActiveWorkbook.Worksheets("Rapportage").Sort.SortFields.Add2 Key:=Range( _
        "B5:B9999"), SortOn:=xlSortOnValues, Order:=xlAscending, DataOption:= _
        xlSortNormal
    ActiveWorkbook.Worksheets("Rapportage").Sort.SortFields.Add2 Key:=Range( _
        "C5:C9999"), SortOn:=xlSortOnValues, Order:=xlAscending, DataOption:= _
        xlSortNormal
    ActiveWorkbook.Worksheets("Rapportage").Sort.SortFields.Add2 Key:=Range( _
        "F5:F9999"), SortOn:=xlSortOnValues, Order:=xlAscending, DataOption:= _
        xlSortNormal
    ActiveWorkbook.Worksheets("Rapportage").Sort.SortFields.Add2 Key:=Range( _
        "E5:E9999"), SortOn:=xlSortOnValues, Order:=xlAscending, DataOption:= _
        xlSortNormal
    ActiveWorkbook.Worksheets("Rapportage").Sort.SortFields.Add2 Key:=Range( _
        "I5:I9999"), SortOn:=xlSortOnValues, Order:=xlAscending, DataOption:= _
        xlSortTextAsNumbers
    With ActiveWorkbook.Worksheets("Rapportage").Sort
        .SetRange Range("A5:BZ9999")
        .Header = xlGuess
        .MatchCase = False
        .Orientation = xlTopToBottom
        .SortMethod = xlPinYin
        .Apply
    End With```
```

答:
I think your code should look somewhat like the procedure below. Note that the Key defines the column to be sorted on. It's specified by a single cell in it, usually in the first row but I chose the fifth because the first row is excluded from your range - not that VBA or Excel would take offence.

```<code>Sub TestSort()
    ' 041

    Dim Cell    As Range
    Dim SortRng As Range

    With ActiveWorkbook.Worksheets("Rapportage")
        Set Cell = .Cells(5, 2)

        With .Sort.SortFields
            .Clear
            .Add Key:=Cell, SortOn:=xlSortOnValues, _
                                        Order:=xlAscending, DataOption:=xlSortNormal
            .Add Key:=Cell.Offset(, 1), SortOn:=xlSortOnValues, _
                                        Order:=xlAscending, DataOption:=xlSortNormal
            .Add Key:=Cell.Offset(, 4), SortOn:=xlSortOnValues, _
                                        Order:=xlAscending, DataOption:=xlSortNormal
            .Add Key:=Cell.Offset(, 3), SortOn:=xlSortOnValues, _
                                        Order:=xlAscending, DataOption:=xlSortNormal
            .Add Key:=Cell.Offset(, 7), SortOn:=xlSortOnValues, _
                                        Order:=xlAscending, DataOption:=xlSortNormal
        End With

        Set SortRng = .Range(.Cells(5, "A"), _
                             .Cells(.Rows.Count, "A").End(xlUp).Offset(, 77))
        With .Sort
            .SetRange SortRng
            .Header = xlNo
            .MatchCase = False
            .Orientation = xlTopToBottom
            .SortMethod = xlPinYin
            .Apply
        End With
    End With
End Sub
</code>```

Specifying the column to sort on is different from specifying the range to be sorted. That enters the code only after the keys have all been set and the actual sorting process is initiated.

Title: Dynamic sort with large workbook

Body:
I can do some basic sortinng using vba however i cannot get things to work when i want to make it dynamic...
what i have done now is set a hard stop at 10k, however the workbooks i need to sort change rapidly in size.

what would be the best approach and why?

i have tried to set the "Range" to Range("a1:B" & lastrow), respectively for each select however this seems to hang and not execute the macro.

    ActiveWorkbook.Worksheets("Rapportage").Sort.SortFields.Add2 Key:=Range( _
        "A1:BZ1"), SortOn:=xlSortOnValues, Order:=xlAscending, DataOption:= _
        xlSortNormal
    With ActiveWorkbook.Worksheets("Rapportage").Sort
        .SetRange Range("A1:BZ9999")
        .Header = xlYes
        .MatchCase = False
        .Orientation = xlLeftToRight
        .SortMethod = xlPinYin
        .Apply
    End With
    Application.CutCopyMode = False
    Range("q3", Range("q5 : q9999")).FormulaR1C1 = "=RC[1]+RC[2]"
    Rows("5:9999").Select
    ActiveWorkbook.Worksheets("Rapportage").Sort.SortFields.Clear
    ActiveWorkbook.Worksheets("Rapportage").Sort.SortFields.Add2 Key:=Range( _
        "B5:B9999"), SortOn:=xlSortOnValues, Order:=xlAscending, DataOption:= _
        xlSortNormal
    ActiveWorkbook.Worksheets("Rapportage").Sort.SortFields.Add2 Key:=Range( _
        "C5:C9999"), SortOn:=xlSortOnValues, Order:=xlAscending, DataOption:= _
        xlSortNormal
    ActiveWorkbook.Worksheets("Rapportage").Sort.SortFields.Add2 Key:=Range( _
        "F5:F9999"), SortOn:=xlSortOnValues, Order:=xlAscending, DataOption:= _
        xlSortNormal
    ActiveWorkbook.Worksheets("Rapportage").Sort.SortFields.Add2 Key:=Range( _
        "E5:E9999"), SortOn:=xlSortOnValues, Order:=xlAscending, DataOption:= _
        xlSortNormal
    ActiveWorkbook.Worksheets("Rapportage").Sort.SortFields.Add2 Key:=Range( _
        "I5:I9999"), SortOn:=xlSortOnValues, Order:=xlAscending, DataOption:= _
        xlSortTextAsNumbers
    With ActiveWorkbook.Worksheets("Rapportage").Sort
        .SetRange Range("A5:BZ9999")
        .Header = xlGuess
        .MatchCase = False
        .Orientation = xlTopToBottom
        .SortMethod = xlPinYin
        .Apply
    End With```

Body:
I think your code should look somewhat like the procedure below. Note that the Key defines the column to be sorted on. It's specified by a single cell in it, usually in the first row but I chose the fifth because the first row is excluded from your range - not that VBA or Excel would take offence.

Sub TestSort()
    ' 041

    Dim Cell    As Range
    Dim SortRng As Range

    With ActiveWorkbook.Worksheets("Rapportage")
        Set Cell = .Cells(5, 2)

        With .Sort.SortFields
            .Clear
            .Add Key:=Cell, SortOn:=xlSortOnValues, _
                                        Order:=xlAscending, DataOption:=xlSortNormal
            .Add Key:=Cell.Offset(, 1), SortOn:=xlSortOnValues, _
                                        Order:=xlAscending, DataOption:=xlSortNormal
            .Add Key:=Cell.Offset(, 4), SortOn:=xlSortOnValues, _
                                        Order:=xlAscending, DataOption:=xlSortNormal
            .Add Key:=Cell.Offset(, 3), SortOn:=xlSortOnValues, _
                                        Order:=xlAscending, DataOption:=xlSortNormal
            .Add Key:=Cell.Offset(, 7), SortOn:=xlSortOnValues, _
                                        Order:=xlAscending, DataOption:=xlSortNormal
        End With

        Set SortRng = .Range(.Cells(5, "A"), _
                             .Cells(.Rows.Count, "A").End(xlUp).Offset(, 77))
        With .Sort
            .SetRange SortRng
            .Header = xlNo
            .MatchCase = False
            .Orientation = xlTopToBottom
            .SortMethod = xlPinYin
            .Apply
        End With
    End With
End Sub

Specifying the column to sort on is different from specifying the range to be sorted. That enters the code only after the keys have all been set and the actual sorting process is initiated.


来源: stackexchange

问:
KSQL Windowed Aggregation Stream, Session ending
I am grouping events coming from a kafka topic by one of its properties and over time using the KSQL Windowed Aggregation, specifically the Session Window.

I have been able to create a stream of "session start signals" as described in this answer.

-- create a stream with a new 'data' topic:
CREATE STREAM DATA (USER_ID INT)
    WITH (kafka_topic='data', value_format='json', partitions=2);

-- create a table that tracks user interactions per session:
CREATE TABLE SESSION AS
SELECT USER_ID, COUNT(USER_ID) AS COUNT
  FROM DATA
WINDOW SESSION (5 SECONDS)
   GROUP BY USER_ID;

-- Create a stream over the existing `SESSIONS` topic.
CREATE STREAM SESSION_STREAM (ROWKEY INT KEY, COUNT BIGINT)
   WITH (kafka_topic='SESSIONS', value_format='JSON', window_type='Session');

-- Create a stream of window start events:
CREATE STREAM SESSION_STARTS AS
    SELECT * FROM SESSION_STREAM
    WHERE WINDOWSTART = WINDOWEND;
```

Would be possible to create a stream of "session end signals" every time a the Windowed Aggregation ends?

答:
I'm assuming by this you mean you want to emit an event/row when a session window hasn't seen any new messages that fit into the session for the 5 seconds you've configured for the window?

I don't think this is possible at present.

Because the source data can have records that are out-of-order, i.e. an event with a timestamp much earlier than rows already processed, a session window can not be 'closed' once the 5 SECONDS window has elapsed.

Existing sessions will, by default, be closed after 24 hours if no new data is received that should be included in the session.  This can be controlled by setting a GRACE PERIOD in the window definition.

This closing of windows once the grace period has elapsing does not result in any row being output at present.  However, KLIP 10 - Add Suppress to KSQL may give you want you once it is implemented

ContentLicense: CC BY-SA 4.0

Body:
I am grouping events coming from a kafka topic by one of its properties and over time using the KSQL Windowed Aggregation, specifically the Session Window.

I have been able to create a stream of "session start signals" as described in this answer.

-- create a stream with a new 'data' topic:
CREATE STREAM DATA (USER_ID INT)
    WITH (kafka_topic='data', value_format='json', partitions=2);

-- create a table that tracks user interactions per session:
CREATE TABLE SESSION AS
SELECT USER_ID, COUNT(USER_ID) AS COUNT
  FROM DATA
WINDOW SESSION (5 SECONDS)
   GROUP BY USER_ID;

-- Create a stream over the existing `SESSIONS` topic.
CREATE STREAM SESSION_STREAM (ROWKEY INT KEY, COUNT BIGINT)
   WITH (kafka_topic='SESSIONS', value_format='JSON', window_type='Session');

-- Create a stream of window start events:
CREATE STREAM SESSION_STARTS AS
    SELECT * FROM SESSION_STREAM
    WHERE WINDOWSTART = WINDOWEND;

Would be possible to create a stream of "session end signals" every time a the Windowed Aggregation ends?


问:
What do the TensorFlow Dataset's functions cache() and prefetch() do?
I am following TensorFlow's Image Segmentation tutorial. In there there are the following lines:

```<code>train_dataset = train.cache().shuffle(BUFFER_SIZE).batch(BATCH_SIZE).repeat()
train_dataset = train_dataset.prefetch(buffer_size=tf.data.experimental.AUTOTUNE)
</code>```

What does the cache() function do? The official documentation is pretty obscure and self-referencing:

Caches the elements in this dataset.

What does the prefetch() function do? The official documentation is again pretty obscure:

Creates a Dataset that prefetches elements from this dataset.

答:
The tf.data.Dataset.cache transformation can cache a dataset, either in memory or on local storage. This will save some operations (like file opening and data reading) from being executed during each epoch. The next epochs will reuse the data cached by the cache transformation.

You can find more about the cache in tensorflow here.

Prefetch overlaps the preprocessing and model execution of a training step. While the model is executing training step s, the input pipeline is reading the data for step s+1. Doing so reduces the step time to the maximum (as opposed to the sum) of the training and the time it takes to extract the data.

You can find more about prefetch in tensorflow here.

Hope this answers your question. Happy Learning.

Body:
I am following TensorFlow's Image Segmentation tutorial. In there there are the following lines:

train_dataset = train.cache().shuffle(BUFFER_SIZE).batch(BATCH_SIZE).repeat()
train_dataset = train_dataset.prefetch(buffer_size=tf.data.experimental.AUTOTUNE)

What does the cache() function do? The official documentation is pretty obscure and self-referencing:

Caches the elements in this dataset.

What does the prefetch() function do? The official documentation is again pretty obscure:

Creates a Dataset that prefetches elements from this dataset.


问:
Automation of docker image creation
I’m new with docker.
Plaining: to automate build process and create docker image and store the same on dockerHub.
This entire build process I want to configure in DockerFile.

here is my Dockerfile

```<code># the first stage of our build will use a maven 3.6.1 parent image
FROM maven:3.6.1-jdk-8-alpine AS MAVEN_BUILD

# copy the pom and src code to the container
WORKDIR ./

COPY ./ ./

# package our application code
RUN mvn clean package -X

FROM java:8-jdk-alpine

WORKDIR ./
EXPOSE 8080
ENTRYPOINT ["java", "-jar", "config-consumer-0.0.1-SNAPSHOT.jar"]
</code>```

build report on running automation build from Docker hub

```<code>figuring mojo 'org.sprin
gframework
.boot:spring-boot-maven-plugin:2.2.7.RELEASE:repackage' with basic configurator -->
[DEBUG] (f) attach = true
[DEBUG] (f) excludeDevtools = true
[DEBUG] (f) excludes = []
[DEBUG] (f) executable = false
[DEBUG] (f) finalName = config-consumer-0.0.1-SNAPSHOT
[DEBUG] (f) includeSystemScope = false
[DEBUG] (f) includes = []
[DEBUG] (f) outputDirectory = /target
[DEBUG] (f) project = MavenProject: com.my.config:config-consumer:0.0.1-SNAPSHOT @ /pom.xml
[DEBUG] (f) skip = false
[DEBUG] -- end configuration --
[INFO] Replaci
ng main arti
fact with repackaged archive
[INFO] -------------------------------------------------------
-----------------
[INFO] BUILD SUCCESS
[INFO] --------------------------
----------------------------------------------
[INFO] Total time: 42.126 s
[INFO] Finished at: 2020-06-02T10:38:05Z
[INFO
] ------------------------------------------------------------------------
Removing intermediate container 1ad5140601c5
---> f68f9fc066f1
Step 5/8 : FROM java:8-jdk-alpine
---> 3fd9dd82815c
Step 6/8 : WORKDIR ./
---> Using cache
---> ef8bf11c31c1
Step 7/8 : EXPOSE 8080
---> Using cache
---> cc296c743b8b
Step 8/8 : ENTRYPOINT ["java", "-jar", "config-consumer-0.0.1-SNAPSHOT.jar"]
---> Using cache
---> 726792fb0fd9
Successfully built 726792fb0fd9
Successfully tagged user/microservicedummy:latest
Pushing index.docker.io/user/microservicedummy:latest...
Done!
Build finished
</code>```

error report on running container.

```<code>sudo docker run -p 3333:8080  user/microservicedummy
Unable to find image 'user/microservicedummy:latest' locally
latest: Pulling from user/microservicedummy
709515475419: Pull complete
38a1c0aaa6fd: Pull complete
5b58c996e33e: Pull complete
Digest: sha256:7cf1809d2ea43c16a103985db626435715e589b898808fb87c565eaa096e52cd
Status: Downloaded newer image for user/microservicedummy:latest
Error: Unable to access jarfile config-consumer-0.0.1-SNAPSHOT.jar
</code>```

container details are mention below...

```<code>CONTAINER ID        IMAGE                         COMMAND                  CREATED             STATUS                      PORTS               NAMES
38b0a07f9677        user/microservicedummy   "java -jar config-co…"   15 minutes ago      Exited (1) 15 minutes ago                       mystifying_burnell
</code>```

答:
Your Dockerfile is a multi-stage build with two stages.  When you reach the second FROM line, Docker essentially starts over; nothing will be in your final image that isn't COPYed in or otherwise built after the final FROM line.

You need to COPY the jar file from the first stage:

```<code>COPY --from=MAVEN_BUILD /target/config-consumer-0.0.1-SNAPSHOT.jar .
</code>```

I'd put this immediately after the WORKDIR line.

You should be able to verify the same thing by running

```<code>docker build -t nitishk58/microservicedummy .
docker run nitishk58/microservicedummy
</code>```

offline; I'd expect you'd get the same results.

I also might change the final image to be a JRE-based image (FROM java:8-jre-alpine) to not include the full JDK; this will result in a significantly smaller image.

Title: Automation of docker image creation

Body:
I’m new with docker.
Plaining: to automate build process and create docker image and store the same on dockerHub.
This entire build process I want to configure in DockerFile.

here is my Dockerfile

# the first stage of our build will use a maven 3.6.1 parent image
FROM maven:3.6.1-jdk-8-alpine AS MAVEN_BUILD

# copy the pom and src code to the container
WORKDIR ./

COPY ./ ./

# package our application code
RUN mvn clean package -X

FROM java:8-jdk-alpine

WORKDIR ./
EXPOSE 8080
ENTRYPOINT ["java", "-jar", "config-consumer-0.0.1-SNAPSHOT.jar"]

build report on running automation build from Docker hub

figuring mojo 'org.sprin
gframework
.boot:spring-boot-maven-plugin:2.2.7.RELEASE:repackage' with basic configurator -->
[DEBUG] (f) attach = true
[DEBUG] (f) excludeDevtools = true
[DEBUG] (f) excludes = []
[DEBUG] (f) executable = false
[DEBUG] (f) finalName = config-consumer-0.0.1-SNAPSHOT
[DEBUG] (f) includeSystemScope = false
[DEBUG] (f) includes = []
[DEBUG] (f) outputDirectory = /target
[DEBUG] (f) project = MavenProject: com.my.config:config-consumer:0.0.1-SNAPSHOT @ /pom.xml
[DEBUG] (f) skip = false
[DEBUG] -- end configuration --
[INFO] Replaci
ng main arti
fact with repackaged archive
[INFO] -------------------------------------------------------
-----------------
[INFO] BUILD SUCCESS
[INFO] --------------------------
----------------------------------------------
[INFO] Total time: 42.126 s
[INFO] Finished at: 2020-06-02T10:38:05Z
[INFO
] ------------------------------------------------------------------------
Removing intermediate container 1ad5140601c5
---> f68f9fc066f1
Step 5/8 : FROM java:8-jdk-alpine
---> 3fd9dd82815c
Step 6/8 : WORKDIR ./
---> Using cache
---> ef8bf11c31c1
Step 7/8 : EXPOSE 8080
---> Using cache
---> cc296c743b8b
Step 8/8 : ENTRYPOINT ["java", "-jar", "config-consumer-0.0.1-SNAPSHOT.jar"]
---> Using cache
---> 726792fb0fd9
Successfully built 726792fb0fd9
Successfully tagged user/microservicedummy:latest
Pushing index.docker.io/user/microservicedummy:latest...
Done!
Build finished

error report on running container.

sudo docker run -p 3333:8080  user/microservicedummy
Unable to find image 'user/microservicedummy:latest' locally
latest: Pulling from user/microservicedummy
709515475419: Pull complete
38a1c0aaa6fd: Pull complete
5b58c996e33e: Pull complete
Digest: sha256:7cf1809d2ea43c16a103985db626435715e589b898808fb87c565eaa096e52cd
Status: Downloaded newer image for user/microservicedummy:latest
Error: Unable to access jarfile config-consumer-0.0.1-SNAPSHOT.jar

container details are mention below...

CONTAINER ID        IMAGE                         COMMAND                  CREATED             STATUS                      PORTS               NAMES
38b0a07f9677        user/microservicedummy   "java -jar config-co…"   15 minutes ago      Exited (1) 15 minutes ago                       mystifying_burnell

Body:
Your Dockerfile is a multi-stage build with two stages.  When you reach the second FROM line, Docker essentially starts over; nothing will be in your final image that isn't COPYed in or otherwise built after the final FROM line.

You need to COPY the jar file from the first stage:

COPY --from=MAVEN_BUILD /target/config-consumer-0.0.1-SNAPSHOT.jar .

I'd put this immediately after the WORKDIR line.

You should be able to verify the same thing by running

docker build -t nitishk58/microservicedummy .
docker run nitishk58/microservicedummy

offline; I'd expect you'd get the same results.

I also might change the final image to be a JRE-based image (FROM java:8-jre-alpine) to not include the full JDK; this will result in a significantly smaller image.


问:
Find longest sequence of common words from list of words in python
I searched a lot for a solution and I indeed have found similar questions. This answer gives back the longest sequence of CHARACTERS that might NOT belong in all of the strings in the input list. This answer gives back the longest common sequences of WORDS that MUST belong to all of the strings in the input list.

I am looking for a combination of the above solutions. That is, I want the longest sequence of common WORDS that might NOT appear in all of the words/phrases of the input list.

Here are some examples of what is expected:

['exterior lighting', 'interior lighting'] --> 'lighting'

['ambient lighting', 'ambient light'] --> 'ambient'

['led turn signal lamp', 'turn signal lamp', 'signal and ambient lamp', 'turn signal light'] --> 'turn signal lamp'

['ambient lighting', 'infrared light'] --> ''

Thank you

答:
this code will also sort your desired list by the most common word in your list.
it will count the amount of every word in your list, and than will cut the words that appeared only once and sort it.</p>

```<code>lst=['led turn signal lamp', 'turn signal lamp', 'signal and ambient lamp', 'turn signal light']
d = {}
d_words={}
for i in lst:
    for j in i.split():
      if j in d:
          d[j] = d[j]+1
      else:
          d[j]= 1
for k,v in d.items():
    if v!=1:
        d_words[k] = v
sorted_words = sorted(d_words,key= d_words.get,reverse = True)
print(sorted_words)
</code>```

Body:
this code will also sort your desired list by the most common word in your list.
it will count the amount of every word in your list, and than will cut the words that appeared only once and sort it.

lst=['led turn signal lamp', 'turn signal lamp', 'signal and ambient lamp', 'turn signal light']
d = {}
d_words={}
for i in lst:
    for j in i.split():
      if j in d:
          d[j] = d[j]+1
      else:
          d[j]= 1
for k,v in d.items():
    if v!=1:
        d_words[k] = v
sorted_words = sorted(d_words,key= d_words.get,reverse = True)
print(sorted_words)


问:
How to change the cell value of multiple sheets in Google Sheets [Google App Script]?
I have many sheets {(for example) 01.01, 01.02, 01.03 ..... 12.30, 12.31}.

Sheets are duplicated by one sheet, so all sheets of cell address J1 is the same date value.

I want to change J1 cell value by Google App Script.

For example:

J1 value in 01.01 sheet is 2020.1.1

J1 value in 01.02 sheet is 2020.1.2

J1 value in 01.03 sheet is 2020.1.3

J1 value in 12.30 sheet is 2020.12.30

J1 value in 12.31 sheet is 2020.12.31

Here is my Google Sheet

答:
Seeing your sheet it is in korean so I don't know exactly how you want your information to be formatted.

But what I understand is that you want to format the same cell in every sheet using the name of the sheet. I can explain how to get started in that.

function updateCell() {
    const a1NotationRange = "J1"; // The range to be modified in every sheet

    // Retrieve the spreadsheet
    const ss = SpreadsheetApp.getActiveSpreadsheet();

    // Get the full list of sheets and change the value of `a1NotationRange`
    // And execute a function for every single sheet
    const sheets = ss.getSheets();
    sheets.forEach((sheet) => {
        const sheetName = sheet.getName();

        // If you want to modify the format to be inserted you should expand
        // this snippet of code here.

        sheet.getRange(a1NotationRange).setValue(sheetName);

    })
}
```

The concept is very simple, get the all the sheets inside a variable. And then iterate through them to change the range reflected in a1NotationRange.

Reference:

If you are new to javascript programming you could use some of these links to guide you in this code:

forEach()

Arrow functions expressions

If you need more help using the Apps Script services:

getActiveSpreadsheet()

getSheets()

setValue()

Body:
Seeing your sheet it is in korean so I don't know exactly how you want your information to be formatted.

But what I understand is that you want to format the same cell in every sheet using the name of the sheet. I can explain how to get started in that.

function updateCell() {
    const a1NotationRange = "J1"; // The range to be modified in every sheet

    // Retrieve the spreadsheet
    const ss = SpreadsheetApp.getActiveSpreadsheet();

    // Get the full list of sheets and change the value of `a1NotationRange`
    // And execute a function for every single sheet
    const sheets = ss.getSheets();
    sheets.forEach((sheet) => {
        const sheetName = sheet.getName();

        // If you want to modify the format to be inserted you should expand
        // this snippet of code here.

        sheet.getRange(a1NotationRange).setValue(sheetName);

    })
}

The concept is very simple, get the all the sheets inside a variable. And then iterate through them to change the range reflected in a1NotationRange.

Reference:

If you are new to javascript programming you could use some of these links to guide you in this code:

forEach()

Arrow functions expressions

If you need more help using the Apps Script services:

getActiveSpreadsheet()

getSheets()

setValue()


问:
Trying to get my
 to fill out the bottom of my container using Flexbox
Utter beginner here.

I'm trying to get my nav bar list items to spread evenly along the bottom of the nav container.
I'm trying to do this specifically in flexbox. Justify-content: space-between; is what I've been trying but it doesn't seem to wanna play the game.

Code included below

Any ideas as to how I can achieve this with flexbox?

Thank you for taking the time to read this

Have a good day
Johnathan

@import url('https://fonts.googleapis.com/css2?family=Tenali+Ramakrishna&display=swap');
/*font-family: 'Tenali Ramakrishna', sans-serif;*/

* { /*Hugs border to edges of screen */
  margin: 0;
  padding: 0;
}

body{

 padding: 40px;
 overflow-x: hidden; /* For Opera */

 -webkit-box-shadow:
  inset #19d4ff 0 0 0 5px,
  inset #18cdf7 0 0 0 1px,
  inset #53dfff 0 0 0 10px,
  inset #50d8f7 0 0 0 11px,
  inset #8ce9ff 0 0 0 16px,
  inset #88e2f7 0 0 0 17px,
  inset #c5f4ff 0 0 0 22px,
  inset #bfecf7 0 0 0 23px;
 -moz-box-shadow:
  inset #19d4ff 0 0 0 5px,
  inset #18cdf7 0 0 0 1px,
  inset #53dfff 0 0 0 10px,
  inset #50d8f7 0 0 0 11px,
  inset #8ce9ff 0 0 0 16px,
  inset #88e2f7 0 0 0 17px,
  inset #c5f4ff 0 0 0 22px,
  inset #bfecf7 0 0 0 23px;
  box-shadow:
  inset #19d4ff 0 0 0 5px,
  inset #18cdf7 0 0 0 1px,
  inset #53dfff 0 0 0 10px,
  inset #50d8f7 0 0 0 11px,
  inset #8ce9ff 0 0 0 16px,
  inset #88e2f7 0 0 0 17px,
  inset #c5f4ff 0 0 0 22px,
  inset #bfecf7 0 0 0 23px;
  font-family: 'Tenali Ramakrishna', sans-serif;
  text-align: center;
}

header{
 display: flex;
  /*Lovely Gold*/
}

nav{
  padding: 0;
  background-color: #fcba03;

        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: center;
        align-items: center;

  width: 100%; /*Nav is filling 100% of it's available container*/
}

#header-img{

}

#title{
  font-size: 42px;
}

nav ul{

        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        flex-direction: row;
        justify-content: flex-start;
}

a, li {
  display: flex;
  justify-content: flex-start;
  font-family: 'Tenali Ramakrishna', sans-serif;
  font-weight: 400;
  font-size: 32px;
  text-decoration: none;
}

/* w3 schools- https://www.w3schools.com/css/tryit.asp?filename=trycss_mediaqueries_navbar
Parts have been edited*/

 a:hover{
  color: blue;
  transform: scale(1.1);
}

  @media screen and (max-width: 600px) {
  .nav a {
    float: none;
    width: 100%;
  }
}
  ```
<pre class="snippet-code-html lang-html prettyprint-override"><code><!doctype html>

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<body>

<header id="header">

    <nav id="nav-bar">

        <img class="logo" src="http://pngimg.com/uploads/sun/sun_PNG13450.png" id="header-img" alt="SunLogo">

      <div id="title">
        <h1> Vitamin D </h1>
      </div>

      <ul>
        <li>Video</li>
        <li>Benefits</li>
        <li>How It Works</li>

      </ul>
    </nav>

</header></code>```

答:
You're almost there just need a width 100% on the ul and using space-around was the right way to go.

@import url('https://fonts.googleapis.com/css2?family=Tenali+Ramakrishna&display=swap');
/*font-family: 'Tenali Ramakrishna', sans-serif;*/

* { /*Hugs border to edges of screen */
  margin: 0;
  padding: 0;
}

body{

 padding: 40px;
 overflow-x: hidden; /* For Opera */

 -webkit-box-shadow:
  inset #19d4ff 0 0 0 5px,
  inset #18cdf7 0 0 0 1px,
  inset #53dfff 0 0 0 10px,
  inset #50d8f7 0 0 0 11px,
  inset #8ce9ff 0 0 0 16px,
  inset #88e2f7 0 0 0 17px,
  inset #c5f4ff 0 0 0 22px,
  inset #bfecf7 0 0 0 23px;
 -moz-box-shadow:
  inset #19d4ff 0 0 0 5px,
  inset #18cdf7 0 0 0 1px,
  inset #53dfff 0 0 0 10px,
  inset #50d8f7 0 0 0 11px,
  inset #8ce9ff 0 0 0 16px,
  inset #88e2f7 0 0 0 17px,
  inset #c5f4ff 0 0 0 22px,
  inset #bfecf7 0 0 0 23px;
  box-shadow:
  inset #19d4ff 0 0 0 5px,
  inset #18cdf7 0 0 0 1px,
  inset #53dfff 0 0 0 10px,
  inset #50d8f7 0 0 0 11px,
  inset #8ce9ff 0 0 0 16px,
  inset #88e2f7 0 0 0 17px,
  inset #c5f4ff 0 0 0 22px,
  inset #bfecf7 0 0 0 23px;
  font-family: 'Tenali Ramakrishna', sans-serif;
  text-align: center;
}

header{
 display: flex;
  /*Lovely Gold*/
}

nav{
  padding: 0;
  background-color: #fcba03;

        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: center;
        align-items: center;

  width: 100%; /*Nav is filling 100% of it's available container*/
}

#header-img{

}

#title{
  font-size: 42px;
}

nav ul{

        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        flex-direction: row;
        justify-content: flex-start;
        width:100%;
        justify-content: space-around;

}

a, li {
  display: flex;
  justify-content: flex-start;
  font-family: 'Tenali Ramakrishna', sans-serif;
  font-weight: 400;
  font-size: 32px;
  text-decoration: none;
}

/* w3 schools- https://www.w3schools.com/css/tryit.asp?filename=trycss_mediaqueries_navbar
Parts have been edited*/

 a:hover{
  color: blue;
  transform: scale(1.1);
}

  @media screen and (max-width: 600px) {
  .nav a {
    float: none;
    width: 100%;
  }
}
  ```
<pre class="snippet-code-html lang-html prettyprint-override"><code><!doctype html>

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<body>

<header id="header">

    <nav id="nav-bar">

        <img class="logo" src="http://pngimg.com/uploads/sun/sun_PNG13450.png" id="header-img" alt="SunLogo">

      <div id="title">
        <h1> Vitamin D </h1>
      </div>

      <ul>
        <li>Video</li>
        <li>Benefits</li>
        <li>How It Works</li>

      </ul>
    </nav>

</header></code>```

Title: Trying to get my <ul> to fill out the bottom of my container using Flexbox

Body:
Utter beginner here.

I'm trying to get my nav bar list items to spread evenly along the bottom of the nav container.
I'm trying to do this specifically in flexbox. Justify-content: space-between; is what I've been trying but it doesn't seem to wanna play the game.

Code included below

Any ideas as to how I can achieve this with flexbox?

Thank you for taking the time to read this

Have a good day
Johnathan

@import url('https://fonts.googleapis.com/css2?family=Tenali+Ramakrishna&display=swap');
/*font-family: 'Tenali Ramakrishna', sans-serif;*/

* { /*Hugs border to edges of screen */
  margin: 0;
  padding: 0;
}

body{

 padding: 40px;
 overflow-x: hidden; /* For Opera */

 -webkit-box-shadow:
  inset #19d4ff 0 0 0 5px,
  inset #18cdf7 0 0 0 1px,
  inset #53dfff 0 0 0 10px,
  inset #50d8f7 0 0 0 11px,
  inset #8ce9ff 0 0 0 16px,
  inset #88e2f7 0 0 0 17px,
  inset #c5f4ff 0 0 0 22px,
  inset #bfecf7 0 0 0 23px;
 -moz-box-shadow:
  inset #19d4ff 0 0 0 5px,
  inset #18cdf7 0 0 0 1px,
  inset #53dfff 0 0 0 10px,
  inset #50d8f7 0 0 0 11px,
  inset #8ce9ff 0 0 0 16px,
  inset #88e2f7 0 0 0 17px,
  inset #c5f4ff 0 0 0 22px,
  inset #bfecf7 0 0 0 23px;
  box-shadow:
  inset #19d4ff 0 0 0 5px,
  inset #18cdf7 0 0 0 1px,
  inset #53dfff 0 0 0 10px,
  inset #50d8f7 0 0 0 11px,
  inset #8ce9ff 0 0 0 16px,
  inset #88e2f7 0 0 0 17px,
  inset #c5f4ff 0 0 0 22px,
  inset #bfecf7 0 0 0 23px;
  font-family: 'Tenali Ramakrishna', sans-serif;
  text-align: center;
}

header{
 display: flex;
  /*Lovely Gold*/
}

nav{
  padding: 0;
  background-color: #fcba03;

        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: center;
        align-items: center;

  width: 100%; /*Nav is filling 100% of it's available container*/
}

#header-img{

}

#title{
  font-size: 42px;
}

nav ul{

        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        flex-direction: row;
        justify-content: flex-start;
}

a, li {
  display: flex;
  justify-content: flex-start;
  font-family: 'Tenali Ramakrishna', sans-serif;
  font-weight: 400;
  font-size: 32px;
  text-decoration: none;
}

/* w3 schools- https://www.w3schools.com/css/tryit.asp?filename=trycss_mediaqueries_navbar
Parts have been edited*/

 a:hover{
  color: blue;
  transform: scale(1.1);
}

  @media screen and (max-width: 600px) {
  .nav a {
    float: none;
    width: 100%;
  }
}

<!doctype html>

 Vitamin D

Video

Benefits

How It Works

Body:
You're almost there just need a width 100% on the ul and using space-around was the right way to go.

@import url('https://fonts.googleapis.com/css2?family=Tenali+Ramakrishna&display=swap');
/*font-family: 'Tenali Ramakrishna', sans-serif;*/

* { /*Hugs border to edges of screen */
  margin: 0;
  padding: 0;
}

body{

 padding: 40px;
 overflow-x: hidden; /* For Opera */

 -webkit-box-shadow:
  inset #19d4ff 0 0 0 5px,
  inset #18cdf7 0 0 0 1px,
  inset #53dfff 0 0 0 10px,
  inset #50d8f7 0 0 0 11px,
  inset #8ce9ff 0 0 0 16px,
  inset #88e2f7 0 0 0 17px,
  inset #c5f4ff 0 0 0 22px,
  inset #bfecf7 0 0 0 23px;
 -moz-box-shadow:
  inset #19d4ff 0 0 0 5px,
  inset #18cdf7 0 0 0 1px,
  inset #53dfff 0 0 0 10px,
  inset #50d8f7 0 0 0 11px,
  inset #8ce9ff 0 0 0 16px,
  inset #88e2f7 0 0 0 17px,
  inset #c5f4ff 0 0 0 22px,
  inset #bfecf7 0 0 0 23px;
  box-shadow:
  inset #19d4ff 0 0 0 5px,
  inset #18cdf7 0 0 0 1px,
  inset #53dfff 0 0 0 10px,
  inset #50d8f7 0 0 0 11px,
  inset #8ce9ff 0 0 0 16px,
  inset #88e2f7 0 0 0 17px,
  inset #c5f4ff 0 0 0 22px,
  inset #bfecf7 0 0 0 23px;
  font-family: 'Tenali Ramakrishna', sans-serif;
  text-align: center;
}

header{
 display: flex;
  /*Lovely Gold*/
}

nav{
  padding: 0;
  background-color: #fcba03;

        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: center;
        align-items: center;

  width: 100%; /*Nav is filling 100% of it's available container*/
}

#header-img{

}

#title{
  font-size: 42px;
}

nav ul{

        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        flex-direction: row;
        justify-content: flex-start;
        width:100%;
        justify-content: space-around;

}

a, li {
  display: flex;
  justify-content: flex-start;
  font-family: 'Tenali Ramakrishna', sans-serif;
  font-weight: 400;
  font-size: 32px;
  text-decoration: none;
}

/* w3 schools- https://www.w3schools.com/css/tryit.asp?filename=trycss_mediaqueries_navbar
Parts have been edited*/

 a:hover{
  color: blue;
  transform: scale(1.1);
}

  @media screen and (max-width: 600px) {
  .nav a {
    float: none;
    width: 100%;
  }
}

<!doctype html>

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<body>

<header id="header">

    <nav id="nav-bar">

        <img class="logo" src="http://pngimg.com/uploads/sun/sun_PNG13450.png" id="header-img" alt="SunLogo">

      <div id="title">
        <h1> Vitamin D </h1>
      </div>

      <ul>
        <li><a class="nav-link" href="#video">Video</a></li>
        <li><a class="nav-link" href="#benefits">Benefits</a></li>
        <li><a class="nav-link" href="#how-it-works">How It Works</a></li>

      </ul>
    </nav>

</header>


问:
C/C++ Printing stack bottom to top with recursion
Hey I am trying to print a "stack" from bottom to top using recusion. Everything in the code is as should and only the print function should be modified. I am not getting any recursion print and unfortunately I do not know why.

```<code>struct element{
    int i;
    element *next;
};

struct stack{
    element *top;
};

void print(stack *st);

int main(){
    element *e5 = (element*) malloc(sizeof(element));
    element *e4 = (element*) malloc(sizeof(element));
    element *e3 = (element*) malloc(sizeof(element));
    element *e2 = (element*) malloc(sizeof(element));
    element *e1 = (element*) malloc(sizeof(element));

    e5->i = 5; e5->next = NULL;
    e4->i = 4; e4->next = e5;
    e3->i = 3; e3->next = e4;
    e2->i = 2; e2->next = e3;
    e1->i = 1; e1->next = e2;

    stack start;
    start.top = e1;
    element *e;

    print(&start);

    return 0;
}

void print(stack *st){
    stack nxt;
    nxt.top = st->top->next;
    if (st->top != NULL){
        print(&nxt);
        printf("%i\n", st->top);
    }
    else
        printf("%i\n", st->top->i);
}
</code>```

Thank you for your input!

答:
In your else you have a possible crash on this line:

```<code>printf("%i\n", st->top->i); //<-- possible crash here
</code>```

You should be more clear about what errors you see from you program.

It looks to me like this will crash the program before anything is printed.

Body:
Hey I am trying to print a "stack" from bottom to top using recusion. Everything in the code is as should and only the print function should be modified. I am not getting any recursion print and unfortunately I do not know why.

struct element{
    int i;
    element *next;
};

struct stack{
    element *top;
};

void print(stack *st);

int main(){
    element *e5 = (element*) malloc(sizeof(element));
    element *e4 = (element*) malloc(sizeof(element));
    element *e3 = (element*) malloc(sizeof(element));
    element *e2 = (element*) malloc(sizeof(element));
    element *e1 = (element*) malloc(sizeof(element));

    e5->i = 5; e5->next = NULL;
    e4->i = 4; e4->next = e5;
    e3->i = 3; e3->next = e4;
    e2->i = 2; e2->next = e3;
    e1->i = 1; e1->next = e2;

    stack start;
    start.top = e1;
    element *e;

    print(&start);

    return 0;
}

void print(stack *st){
    stack nxt;
    nxt.top = st->top->next;
    if (st->top != NULL){
        print(&nxt);
        printf("%i\n", st->top);
    }
    else
        printf("%i\n", st->top->i);
}

Thank you for your input!

Body:
In your else you have a possible crash on this line:

printf("%i\n", st->top->i); //<-- possible crash here

You should be more clear about what errors you see from you program.

It looks to me like this will crash the program before anything is printed.


问:
how to remove a string from a code using methods, arrays and loops?
I made a code that removes symbols and characters from a "string text" using "method" and "arrays" and "loops", and everything was built in successfully.

But, when I tried testing it on an actual String text, it wasn't running. Someone clarify what I did wrong. here is the code:

```<code>public static String remove(String text, char symbol){
    String a= " ";
    for(int i=1; i<text.length();i++){
        char letter=text.charAt(i);
        if(letter !=symbol){
            a+=letter;
        }
    }
    return a;
}
</code>```

答:
i is not 1, it should be 0. Try this code:

```<code>public static String remove(String text, char symbol) {

    StringBuilder a = new StringBuilder();
    for (int i = 0; i < text.length(); i++) {
        char letter = text.charAt(i);
        if (letter != symbol) {
            a.append(letter);
        }
    }
    return a.toString();
}
</code>```

Body:
I made a code that removes symbols and characters from a "string text" using "method" and "arrays" and "loops", and everything was built in successfully.

But, when I tried testing it on an actual String text, it wasn't running. Someone clarify what I did wrong. here is the code:

public static String remove(String text, char symbol){
    String a= " ";
    for(int i=1; i<text.length();i++){
        char letter=text.charAt(i);
        if(letter !=symbol){
            a+=letter;
        }
    }
    return a;
}

Body:
i is not 1, it should be 0. Try this code:

public static String remove(String text, char symbol) {

    StringBuilder a = new StringBuilder();
    for (int i = 0; i < text.length(); i++) {
        char letter = text.charAt(i);
        if (letter != symbol) {
            a.append(letter);
        }
    }
    return a.toString();
}


答:
@import url('https://fonts.googleapis.com/css2?family=Tenali+Ramakrishna&display=swap');
/*font-family: 'Tenali Ramakrishna', sans-serif;*/

* { /*Hugs border to edges of screen */
  margin: 0;
  padding: 0;
}

body{

 padding: 40px;
 overflow-x: hidden; /* For Opera */

 -webkit-box-shadow:
  inset #19d4ff 0 0 0 5px,
  inset #18cdf7 0 0 0 1px,
  inset #53dfff 0 0 0 10px,
  inset #50d8f7 0 0 0 11px,
  inset #8ce9ff 0 0 0 16px,
  inset #88e2f7 0 0 0 17px,
  inset #c5f4ff 0 0 0 22px,
  inset #bfecf7 0 0 0 23px;
 -moz-box-shadow:
  inset #19d4ff 0 0 0 5px,
  inset #18cdf7 0 0 0 1px,
  inset #53dfff 0 0 0 10px,
  inset #50d8f7 0 0 0 11px,
  inset #8ce9ff 0 0 0 16px,
  inset #88e2f7 0 0 0 17px,
  inset #c5f4ff 0 0 0 22px,
  inset #bfecf7 0 0 0 23px;
  box-shadow:
  inset #19d4ff 0 0 0 5px,
  inset #18cdf7 0 0 0 1px,
  inset #53dfff 0 0 0 10px,
  inset #50d8f7 0 0 0 11px,
  inset #8ce9ff 0 0 0 16px,
  inset #88e2f7 0 0 0 17px,
  inset #c5f4ff 0 0 0 22px,
  inset #bfecf7 0 0 0 23px;
  font-family: 'Tenali Ramakrishna', sans-serif;
  text-align: center;
}

header{
 display: flex;
  /*Lovely Gold*/
}

nav{
  padding: 0;
  background-color: #fcba03;

        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: center;
        align-items: center;

  width: 100%; /*Nav is filling 100% of it's available container*/
}

#header-img{

}

#title{
  font-size: 42px;
}

nav ul{

        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        flex-direction: row;
        justify-content: space-between;
}

a, li {
  display: flex;
  justify-content: flex-start;
  font-family: 'Tenali Ramakrishna', sans-serif;
  font-weight: 400;
  font-size: 32px;
  margin-right: 10px;
  text-decoration: none;
}

/* w3 schools- https://www.w3schools.com/css/tryit.asp?filename=trycss_mediaqueries_navbar
Parts have been edited*/

 a:hover{
  color: blue;
  transform: scale(1.1);
}

  @media screen and (max-width: 600px) {
  .nav a {
    float: none;
    width: 100%;
  }
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><!doctype html>

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<body>

<header id="header">

    <nav id="nav-bar">

        <img class="logo" src="http://pngimg.com/uploads/sun/sun_PNG13450.png" id="header-img" alt="SunLogo">

      <div id="title">
        <h1> Vitamin D </h1>
      </div>

      <ul>
        <li>Video</li>
        <li>Benefits</li>
        <li>How It Works</li>

      </ul>
    </nav>

</header></code>```

```<code>nav ul {
 justify-content: space-around; // or space-between
}

a, li {
  margin-right: 10px;
}
</code>```

You can add this

Body:
@import url('https://fonts.googleapis.com/css2?family=Tenali+Ramakrishna&display=swap');
/*font-family: 'Tenali Ramakrishna', sans-serif;*/

* { /*Hugs border to edges of screen */
  margin: 0;
  padding: 0;
}

body{

 padding: 40px;
 overflow-x: hidden; /* For Opera */

 -webkit-box-shadow:
  inset #19d4ff 0 0 0 5px,
  inset #18cdf7 0 0 0 1px,
  inset #53dfff 0 0 0 10px,
  inset #50d8f7 0 0 0 11px,
  inset #8ce9ff 0 0 0 16px,
  inset #88e2f7 0 0 0 17px,
  inset #c5f4ff 0 0 0 22px,
  inset #bfecf7 0 0 0 23px;
 -moz-box-shadow:
  inset #19d4ff 0 0 0 5px,
  inset #18cdf7 0 0 0 1px,
  inset #53dfff 0 0 0 10px,
  inset #50d8f7 0 0 0 11px,
  inset #8ce9ff 0 0 0 16px,
  inset #88e2f7 0 0 0 17px,
  inset #c5f4ff 0 0 0 22px,
  inset #bfecf7 0 0 0 23px;
  box-shadow:
  inset #19d4ff 0 0 0 5px,
  inset #18cdf7 0 0 0 1px,
  inset #53dfff 0 0 0 10px,
  inset #50d8f7 0 0 0 11px,
  inset #8ce9ff 0 0 0 16px,
  inset #88e2f7 0 0 0 17px,
  inset #c5f4ff 0 0 0 22px,
  inset #bfecf7 0 0 0 23px;
  font-family: 'Tenali Ramakrishna', sans-serif;
  text-align: center;
}

header{
 display: flex;
  /*Lovely Gold*/
}

nav{
  padding: 0;
  background-color: #fcba03;

        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: center;
        align-items: center;

  width: 100%; /*Nav is filling 100% of it's available container*/
}

#header-img{

}

#title{
  font-size: 42px;
}

nav ul{

        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        flex-direction: row;
        justify-content: space-between;
}

a, li {
  display: flex;
  justify-content: flex-start;
  font-family: 'Tenali Ramakrishna', sans-serif;
  font-weight: 400;
  font-size: 32px;
  margin-right: 10px;
  text-decoration: none;
}

/* w3 schools- https://www.w3schools.com/css/tryit.asp?filename=trycss_mediaqueries_navbar
Parts have been edited*/

 a:hover{
  color: blue;
  transform: scale(1.1);
}

  @media screen and (max-width: 600px) {
  .nav a {
    float: none;
    width: 100%;
  }
}

<!doctype html>

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<body>

<header id="header">

    <nav id="nav-bar">

        <img class="logo" src="http://pngimg.com/uploads/sun/sun_PNG13450.png" id="header-img" alt="SunLogo">

      <div id="title">
        <h1> Vitamin D </h1>
      </div>

      <ul>
        <li><a class="nav-link" href="#video">Video</a></li>
        <li><a class="nav-link" href="#benefits">Benefits</a></li>
        <li><a class="nav-link" href="#how-it-works">How It Works</a></li>

      </ul>
    </nav>

</header>

nav ul {
 justify-content: space-around; // or space-between
}

a, li {
  margin-right: 10px;
}

You can add this


问:
Listeners for changes to app config/resources files
I have an app running in tomcat6 which reads a resource file (a simple text file, no xml) at startup to configure/instantiate some classes. Now I want to be able to modify that file and the changes to be reflected in the app without having to restart the server. Is there a way to do that? </p>

<p>Basically if I could define and attach a listener to that resource, that's all I need. </p>

答:
Start a timer in the web app which gets the resource file as below:

In a ServletContextListener.contextInitialized(),

```<code>package com.servlets;

import java.io.File;
import java.net.MalformedURLException;
import java.net.URL;
import java.util.Timer;
import java.util.TimerTask;

import javax.servlet.ServletContext;
import javax.servlet.ServletContextEvent;
import javax.servlet.ServletContextListener;

public class WatcherListener
    implements ServletContextListener
{
public void contextInitialized(ServletContextEvent event)
{
    ServletContext servletContext = event.getServletContext();
    Timer timer = new Timer("ResourceListener");
    timer.schedule(new MyWatcherTask(servletContext), 15);
}

public void contextDestroyed(ServletContextEvent event)
{
}

private class MyWatcherTask extends TimerTask
{
    private final ServletContext servletContext;
    private long lastModifiedTime = -1;

    public MyWatcherTask(ServletContext servletContext)
    {
        this.servletContext = servletContext;
    }

    public void run()
    {
        URL resource = null;
        try {
            resource = servletContext.getResource("resouceFileName");
            File resourceFile = new File(resource.toString());
            long current = resourceFile.lastModified();
            if (current > lastModifiedTime) {
                reloadReources();
            }
            lastModifiedTime = current;
        } catch (MalformedURLException e) {
            e.printStackTrace();
        }

    }
}
}
</code>```

The above code is just a template

ContentLicense: CC BY-SA 3.0

Body:
I have an app running in tomcat6 which reads a resource file (a simple text file, no xml) at startup to configure/instantiate some classes. Now I want to be able to modify that file and the changes to be reflected in the app without having to restart the server. Is there a way to do that?

Basically if I could define and attach a listener to that resource, that's all I need.

Body:
Start a timer in the web app which gets the resource file as below:

In a ServletContextListener.contextInitialized(),

package com.servlets;

import java.io.File;
import java.net.MalformedURLException;
import java.net.URL;
import java.util.Timer;
import java.util.TimerTask;

import javax.servlet.ServletContext;
import javax.servlet.ServletContextEvent;
import javax.servlet.ServletContextListener;

public class WatcherListener
    implements ServletContextListener
{
public void contextInitialized(ServletContextEvent event)
{
    ServletContext servletContext = event.getServletContext();
    Timer timer = new Timer("ResourceListener");
    timer.schedule(new MyWatcherTask(servletContext), 15);
}

public void contextDestroyed(ServletContextEvent event)
{
}

private class MyWatcherTask extends TimerTask
{
    private final ServletContext servletContext;
    private long lastModifiedTime = -1;

    public MyWatcherTask(ServletContext servletContext)
    {
        this.servletContext = servletContext;
    }

    public void run()
    {
        URL resource = null;
        try {
            resource = servletContext.getResource("resouceFileName");
            File resourceFile = new File(resource.toString());
            long current = resourceFile.lastModified();
            if (current > lastModifiedTime) {
                reloadReources();
            }
            lastModifiedTime = current;
        } catch (MalformedURLException e) {
            e.printStackTrace();
        }

    }
}
}

The above code is just a template


问:
Optaplanner: Define constraints dynamically based on PlanningSolution property
Assume I have this implementation of a ConstraintProvider.

package com.example.solver;

import com.example.domain.Lesson;
import org.optaplanner.core.api.score.buildin.hardsoft.HardSoftScore;
import org.optaplanner.core.api.score.stream.Constraint;
import org.optaplanner.core.api.score.stream.ConstraintFactory;
import org.optaplanner.core.api.score.stream.ConstraintProvider;
import org.optaplanner.core.api.score.stream.Joiners;

public class TimeTableConstraintProvider implements ConstraintProvider {

    @Override
    public Constraint[] defineConstraints(ConstraintFactory constraintFactory) {
        return new Constraint[] {
                roomConflict(constraintFactory),
                teacherConflict(constraintFactory),
        };
    }

    private Constraint roomConflict(ConstraintFactory constraintFactory) {
        return constraintFactory.from(Lesson.class)
                .join(Lesson.class,
                        Joiners.equal(Lesson::getTimeslot),
                        Joiners.equal(Lesson::getRoom),
                        Joiners.lessThan(Lesson::getId))
                .penalize("Room conflict", HardSoftScore.ONE_HARD);
    }

    private Constraint teacherConflict(ConstraintFactory constraintFactory) {
        return constraintFactory.from(Lesson.class)
                .join(Lesson.class,
                        Joiners.equal(Lesson::getTimeslot),
                        Joiners.equal(Lesson::getTeacher),
                        Joiners.lessThan(Lesson::getId))
                .penalize("Teacher conflict", HardSoftScore.ONE_HARD);
    }
```

Assume that I only want to constrain with roomConflict in case my PlanningSolution has boolean property considerRoomConflict. Likewise, I only want to use roomConflict in case my PlanningSolution has boolean property considerTeacherConflict.

Assume that I would have 5 such conditionals. What would be a good implementation hereof?

答:
Use @ConstraintConfiguration with @ConstraintWeight. Some of the optaplanner-examples use it.

```<code>@ConstraintWeight("Teacher conflict")
// To disable, change to HardSoftScore.ZERO
private HardSoftScore teacherConflict = HardSoftScore.ONE_HARD;
</code>```

Then use penalizeConfigurable() instead of penalize():

```<code>constraintFactory.from(Lesson.class)
.join(...)
.penalizeConfigurable("Teacher conflict")
</code>```

Body:
Assume I have this implementation of a ConstraintProvider.

package com.example.solver;

import com.example.domain.Lesson;
import org.optaplanner.core.api.score.buildin.hardsoft.HardSoftScore;
import org.optaplanner.core.api.score.stream.Constraint;
import org.optaplanner.core.api.score.stream.ConstraintFactory;
import org.optaplanner.core.api.score.stream.ConstraintProvider;
import org.optaplanner.core.api.score.stream.Joiners;

public class TimeTableConstraintProvider implements ConstraintProvider {

    @Override
    public Constraint[] defineConstraints(ConstraintFactory constraintFactory) {
        return new Constraint[] {
                roomConflict(constraintFactory),
                teacherConflict(constraintFactory),
        };
    }

    private Constraint roomConflict(ConstraintFactory constraintFactory) {
        return constraintFactory.from(Lesson.class)
                .join(Lesson.class,
                        Joiners.equal(Lesson::getTimeslot),
                        Joiners.equal(Lesson::getRoom),
                        Joiners.lessThan(Lesson::getId))
                .penalize("Room conflict", HardSoftScore.ONE_HARD);
    }

    private Constraint teacherConflict(ConstraintFactory constraintFactory) {
        return constraintFactory.from(Lesson.class)
                .join(Lesson.class,
                        Joiners.equal(Lesson::getTimeslot),
                        Joiners.equal(Lesson::getTeacher),
                        Joiners.lessThan(Lesson::getId))
                .penalize("Teacher conflict", HardSoftScore.ONE_HARD);
    }

Assume that I only want to constrain with roomConflict in case my PlanningSolution has boolean property considerRoomConflict. Likewise, I only want to use roomConflict in case my PlanningSolution has boolean property considerTeacherConflict.

Assume that I would have 5 such conditionals. What would be a good implementation hereof?

Body:
Use @ConstraintConfiguration with @ConstraintWeight. Some of the optaplanner-examples use it.

@ConstraintWeight("Teacher conflict")
// To disable, change to HardSoftScore.ZERO
private HardSoftScore teacherConflict = HardSoftScore.ONE_HARD;

Then use penalizeConfigurable() instead of penalize():

constraintFactory.from(Lesson.class)
.join(...)
.penalizeConfigurable("Teacher conflict")


问:
React navigation 5 tabBarVisible not completely hidden
I added a button in tabBarIcon and it is not completely hidden when using tabBarVisible,my code:

file: App.js

i'm just added a different icon in AddScreen.

```<code>import HomeStack from './stacks/Home';
import UserStack from './stacks/User';
import AddStack from './stacks/Add';

import AddIcon from './AddIcon';

const Tab = createBottomTabNavigator();
export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen
          name="Home"
          component={HomeStack}
          options={{
            tabBarIcon: () => <IconAnt name={'home'} style={styles.icon} />,
          }}
        />
        <Tab.Screen
          name="Add"
          component={AddStack}
          options={{
            tabBarIcon: () => <AddIcon />, // icon add
            title: '',
          }}
        />
        <Tab.Screen
          name="User"
          component={UserStack}
          options={{
            tabBarIcon: () => <IconAnt name={'user'} style={styles.icon} />,
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}
</code>```

file: stacks/Home.js

when press 'go to detail', I'm hide the tabbar

```<code>function HomeScreen({navigation}) {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Home!</Text>
      <TouchableOpacity onPress={() => navigation.navigate('Detail')}>
        <Text>go to detail/Text>
      </TouchableOpacity>
    </View>
  );
}

function DetailScreen() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Detail!</Text>
    </View>
  );
}

const HomeStack = createStackNavigator();
export default function ({navigation, route}) {
  var tabBarVisible = true;
  if (typeof route.state !== 'undefined') {
    const {routes} = route.state;
    if (routes.length > 1) {
      tabBarVisible = false;
    }
  }
  navigation.setOptions({tabBarVisible});
  // tabbar will hide when moving to Detail screen
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name={'Home'} component={HomeScreen} />
      <HomeStack.Screen name={'Detail'} component={DetailScreen} />
    </HomeStack.Navigator>
  );
}
</code>```

AddIcon.js

file icon of AddScreen

```<code>export default function () {
  return (
    <View style={styles.container}>
      <View style={styles.button}>
        <IconAnt name={'plus'} style={{fontSize: 30, color: '#fff'}} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    alignItems: 'center',
    zIndex: 99,
  },
  button: {
    alignItems: 'center',
    justifyContent: 'center',
    width: 72,
    height: 72,
    borderRadius: 72 / 2,
    backgroundColor: 'red',
    position: 'absolute',
    marginTop: -45,
    shadowColor: 'red',
    shadowRadius: 5,
    shadowOffset: {height: 10},
    shadowOpacity: 0.3,
    borderWidth: 2,
    borderColor: '#FFFFFF',
    zIndex: 99,
  },
});
</code>```

Screenshot:
Home screen
Detail screen

How do I hide it completely? Thanks!

答:
Actually your tab bar is hiding but as you place this on above of the tabs that's why you still able to see after making tabBarVisible = false you also have to hide it manually with styles while making tabBarVisible = false, Check the route and apply styles dynamically.

pass style object to tabBarOptions

```<code>tabBarOptions: {
   style: {
      opacity: 0
   }
}
</code>```

Or this may also work

```<code>tabBarOptions: {
   style: {
      top: 50
   }
}
</code>```

Edit: By looking into your code I had to change some structure of your navigator and now it's working in the snack, You were rendering stack inside the tabs but it should be tabs inside a stack.

Link to snack

Body:
I added a button in tabBarIcon and it is not completely hidden when using tabBarVisible,my code:

file: App.js

i'm just added a different icon in AddScreen.

import HomeStack from './stacks/Home';
import UserStack from './stacks/User';
import AddStack from './stacks/Add';

import AddIcon from './AddIcon';

const Tab = createBottomTabNavigator();
export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen
          name="Home"
          component={HomeStack}
          options={{
            tabBarIcon: () => <IconAnt name={'home'} style={styles.icon} />,
          }}
        />
        <Tab.Screen
          name="Add"
          component={AddStack}
          options={{
            tabBarIcon: () => <AddIcon />, // icon add
            title: '',
          }}
        />
        <Tab.Screen
          name="User"
          component={UserStack}
          options={{
            tabBarIcon: () => <IconAnt name={'user'} style={styles.icon} />,
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

file: stacks/Home.js

when press 'go to detail', I'm hide the tabbar

function HomeScreen({navigation}) {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Home!</Text>
      <TouchableOpacity onPress={() => navigation.navigate('Detail')}>
        <Text>go to detail/Text>
      </TouchableOpacity>
    </View>
  );
}

function DetailScreen() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Detail!</Text>
    </View>
  );
}

const HomeStack = createStackNavigator();
export default function ({navigation, route}) {
  var tabBarVisible = true;
  if (typeof route.state !== 'undefined') {
    const {routes} = route.state;
    if (routes.length > 1) {
      tabBarVisible = false;
    }
  }
  navigation.setOptions({tabBarVisible});
  // tabbar will hide when moving to Detail screen
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name={'Home'} component={HomeScreen} />
      <HomeStack.Screen name={'Detail'} component={DetailScreen} />
    </HomeStack.Navigator>
  );
}

AddIcon.js

file icon of AddScreen

export default function () {
  return (
    <View style={styles.container}>
      <View style={styles.button}>
        <IconAnt name={'plus'} style={{fontSize: 30, color: '#fff'}} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    alignItems: 'center',
    zIndex: 99,
  },
  button: {
    alignItems: 'center',
    justifyContent: 'center',
    width: 72,
    height: 72,
    borderRadius: 72 / 2,
    backgroundColor: 'red',
    position: 'absolute',
    marginTop: -45,
    shadowColor: 'red',
    shadowRadius: 5,
    shadowOffset: {height: 10},
    shadowOpacity: 0.3,
    borderWidth: 2,
    borderColor: '#FFFFFF',
    zIndex: 99,
  },
});

Screenshot:
Home screen
Detail screen

How do I hide it completely? Thanks!

Body:
Actually your tab bar is hiding but as you place this on above of the tabs that's why you still able to see after making tabBarVisible = false you also have to hide it manually with styles while making tabBarVisible = false, Check the route and apply styles dynamically.

pass style object to tabBarOptions

tabBarOptions: {
   style: {
      opacity: 0
   }
}

Or this may also work

tabBarOptions: {
   style: {
      top: 50
   }
}

Edit: By looking into your code I had to change some structure of your navigator and now it's working in the snack, You were rendering stack inside the tabs but it should be tabs inside a stack.

Link to snack


问:
Create BigQuery materialized view using Cloud Deployment Manager
I can create native and external tables, as well as views in BigQuery using Deployment Manager, however, there doesn't seem to be any way to create a materialized view. Page at:  https://cloud.google.com/bigquery/docs/materialized-views-intro says its still in beta - is it typical for GCP beta features to have no support in Deployment Manager?

Is there a workaround for this? Only thing I can think of is using a Job resource https://cloud.google.com/bigquery/docs/reference/rest/v2/jobs/insert and specifying a DDL query like: CREATE MATERIALIZED VIEW ... but I don't think Deployment Manager will track and manage the resource correctly.

Edit: for anyone else, this works even though not documented:

```<code>- name: test-mv
  type: bigquery.v2.table
  properties:
    datasetId: experiments
    tableReference:
      datasetId: experiments
      tableId: test_mv
    materializedView:
      query: "select test, COUNT(*) as counter from experiments.test group by test"
</code>```

答:
According to Google Cloud Deployment Manager documentation bigquery.v2.table resource type is actually leveraging tables REST object as a part of BigQuery API inventory.

Having said this, I assume that you can fully rely on tables.insert method as per Bigquery guidelines here:

Call the tables.insert method with a defined materializedView resource
  as part of your API request. The materializedView resource contains a
  query field.

```<code>"materializedView": {
    "query": "select product_id,sum(clicks) as
                sum_clicks from project-id.my_dataset.my_base_table
                group by 1"
  }
</code>```

Defining appropriate materializedView property in the initial deployment configuration or Python/Jinja template.

I haven't tested yet the mentioned above API functionality, but once you have any further doubts with the implementation I'll try to dig deeper.

Body:
I can create native and external tables, as well as views in BigQuery using Deployment Manager, however, there doesn't seem to be any way to create a materialized view. Page at:  https://cloud.google.com/bigquery/docs/materialized-views-intro says its still in beta - is it typical for GCP beta features to have no support in Deployment Manager?

Is there a workaround for this? Only thing I can think of is using a Job resource https://cloud.google.com/bigquery/docs/reference/rest/v2/jobs/insert and specifying a DDL query like: CREATE MATERIALIZED VIEW ... but I don't think Deployment Manager will track and manage the resource correctly.

Edit: for anyone else, this works even though not documented:

- name: test-mv
  type: bigquery.v2.table
  properties:
    datasetId: experiments
    tableReference:
      datasetId: experiments
      tableId: test_mv
    materializedView:
      query: "select test, COUNT(*) as counter from experiments.test group by test"

Body:
According to Google Cloud Deployment Manager documentation bigquery.v2.table resource type is actually leveraging tables REST object as a part of BigQuery API inventory.

Having said this, I assume that you can fully rely on tables.insert method as per Bigquery guidelines here:

Call the tables.insert method with a defined materializedView resource
  as part of your API request. The materializedView resource contains a
  query field.

"materializedView": {
    "query": "select product_id,sum(clicks) as
                sum_clicks from project-id.my_dataset.my_base_table
                group by 1"
  }

Defining appropriate materializedView property in the initial deployment configuration or Python/Jinja template.

I haven't tested yet the mentioned above API functionality, but once you have any further doubts with the implementation I'll try to dig deeper.


问:
Why does g++ 10.1 complain about a named lambda in a header file and others do not?
I have a header file with a named lambda that I use for measuring the execution time of some functions (the lambda is partially a result of this question How to Write a Lambda Wrapping a Function with Optional Return Value). It resides in a header file that I include from several translation units. This has worked well with g++ 8 and g++ 9. Now when I switch to g++ 10.1 I get an error when linking.

Please check the following reduced example.

Here is the example in Wandbox: https://wandbox.org/permlink/Sizb6txrkW5dkJwT.

File "Lambda.h":

```<code>#pragma once

#include <string>

auto measure = [](bool enabled, const std::string& taskName, auto&& function,
        auto&&... parameters) -> decltype(auto)
{
    return std::forward<decltype(function)>(function)(
            std::forward<decltype(parameters)>(parameters)...);
};
</code>```

File "Test1.cpp":

```<code>#include "Lambda.h"
</code>```

File "Test2.cpp":

```<code>#include "Lambda.h"
</code>```

Then I build like this:

```<code>g++ -c Test1.cpp
g++ -c Test2.cpp
g++ -shared -o Test.dll Test1.o Test2.o
</code>```

Everything works fine up to g++ 9.2, but with g++ 10.1 I get this error message:

```<code>ld.exe: Test2.o:Test2.cpp:(.bss+0x0): multiple definition of `measure'; Test1.o:Test1.cpp:(.bss+0x0): first defined here
collect2.exe: error: ld returned 1 exit status
</code>```

Why? How can I compile my project with g++ 10.1? I use the named lambda like I would use a template function, therefore I need to write my named lambda into a header file to be able to use it anywhere in the project and I cannot somehow separate declaration from definition, right?

I am looking forward to an answer!

答:
I get an error when linking.

Why?

Because you violate the One Definition Rule by defining the variable multiple times.

and others do not?

Why?

¯\_(ツ)_/¯ Language implementations are not required to diagnose ODR violations.

I use the named lambda like I would use a template function, therefore I need to write my named lambda into a header file to be able to use it anywhere in the project and I cannot somehow separate declaration from definition, right?

Right.

How can I compile my project with g++ 10.1?

Simple solution: Declare the variable inline (C++17 feature).

As simple, but has curious detail that each TU has their own instance: Declare the variable static.

Third solution: The lambda captures nothing, so you might as well define a template function instead.

Fourth solution: Instead of storing the lambda as global variable, write an inline function that returns an instance of the lambda.

Body:
I have a header file with a named lambda that I use for measuring the execution time of some functions (the lambda is partially a result of this question How to Write a Lambda Wrapping a Function with Optional Return Value). It resides in a header file that I include from several translation units. This has worked well with g++ 8 and g++ 9. Now when I switch to g++ 10.1 I get an error when linking.

Please check the following reduced example.

Here is the example in Wandbox: https://wandbox.org/permlink/Sizb6txrkW5dkJwT.

File "Lambda.h":

#pragma once

#include <string>

auto measure = [](bool enabled, const std::string& taskName, auto&& function,
        auto&&... parameters) -> decltype(auto)
{
    return std::forward<decltype(function)>(function)(
            std::forward<decltype(parameters)>(parameters)...);
};

File "Test1.cpp":

#include "Lambda.h"

File "Test2.cpp":

#include "Lambda.h"

Then I build like this:

g++ -c Test1.cpp
g++ -c Test2.cpp
g++ -shared -o Test.dll Test1.o Test2.o

Everything works fine up to g++ 9.2, but with g++ 10.1 I get this error message:

ld.exe: Test2.o:Test2.cpp:(.bss+0x0): multiple definition of `measure'; Test1.o:Test1.cpp:(.bss+0x0): first defined here
collect2.exe: error: ld returned 1 exit status

Why? How can I compile my project with g++ 10.1? I use the named lambda like I would use a template function, therefore I need to write my named lambda into a header file to be able to use it anywhere in the project and I cannot somehow separate declaration from definition, right?

I am looking forward to an answer!


问:
React show Material-UI Tooltip only for text that has ellipsis
Looking for a way to have material-ui's tooltip expand the text in a table cell ONLY if the text is cut off with an ellipsis (overflowing).

Currently in my table I have a cell like this:

```<code><TableCell className={classes.descriptionCell}>{row.description}</TableCell>
</code>```

and my styling for descriptionCell is like this:

```<code>    descriptionCell: {
        whiteSpace: 'nowrap',
        maxWidth: '200px',
        overflow: 'hidden',
        textOverflow: 'ellipsis'
    }
</code>```

This makes the text behave the way I would like it to in this table, but I want to be able to hover and view the rest of it in a tooltip, preferably Material-UI's built in tooltip component.

I know there is a package that exists here https://www.npmjs.com/package/react-ellipsis-with-tooltip which should do this, BUT it uses bootstrap tooltip, not material UI.

答:
based on @Dheeraj answer - this is the very close to his component but in type script version and more makes sense props names:

```<code>import React, { useRef, useEffect, useState } from 'react';
import Tooltip from '@material-ui/core/Tooltip';

interface Props {
  tooltip: string;
  text: string;
}

const OverflowTooltip = (props: Props) => {

  const textElementRef = useRef<HTMLInputElement | null>(null);

  const compareSize = () => {
    const compare =
      textElementRef.current.scrollWidth > textElementRef.current.clientWidth;
    setHover(compare);
  };

  useEffect(() => {
    compareSize();
    window.addEventListener('resize', compareSize);
  }, []);

  useEffect(() => () => {
    window.removeEventListener('resize', compareSize);
  }, []);

  const [hoverStatus, setHover] = useState(false);

  return (
    <Tooltip
      title={props.tooltip}
      interactive
      disableHoverListener={!hoverStatus}
    >
      <div
        ref={textElementRef}
        style={{
          whiteSpace: 'nowrap',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
        }}
      >
        {props.text}
      </div>
    </Tooltip>
  );
};

export default OverflowTooltip;
</code>```

and we use it like this:

```<code><OverflowTooltip
    tooltip={'tooltip message here'}
    text={'very long text here'}
/>
</code>```

Body:
Looking for a way to have material-ui's tooltip expand the text in a table cell ONLY if the text is cut off with an ellipsis (overflowing).

Currently in my table I have a cell like this:

<TableCell className={classes.descriptionCell}>{row.description}</TableCell>

and my styling for descriptionCell is like this:

    descriptionCell: {
        whiteSpace: 'nowrap',
        maxWidth: '200px',
        overflow: 'hidden',
        textOverflow: 'ellipsis'
    }

This makes the text behave the way I would like it to in this table, but I want to be able to hover and view the rest of it in a tooltip, preferably Material-UI's built in tooltip component.

I know there is a package that exists here https://www.npmjs.com/package/react-ellipsis-with-tooltip which should do this, BUT it uses bootstrap tooltip, not material UI.

Body:
based on @Dheeraj answer - this is the very close to his component but in type script version and more makes sense props names:

import React, { useRef, useEffect, useState } from 'react';
import Tooltip from '@material-ui/core/Tooltip';

interface Props {
  tooltip: string;
  text: string;
}

const OverflowTooltip = (props: Props) => {

  const textElementRef = useRef<HTMLInputElement | null>(null);

  const compareSize = () => {
    const compare =
      textElementRef.current.scrollWidth > textElementRef.current.clientWidth;
    setHover(compare);
  };

  useEffect(() => {
    compareSize();
    window.addEventListener('resize', compareSize);
  }, []);

  useEffect(() => () => {
    window.removeEventListener('resize', compareSize);
  }, []);

  const [hoverStatus, setHover] = useState(false);

  return (
    <Tooltip
      title={props.tooltip}
      interactive
      disableHoverListener={!hoverStatus}
    >
      <div
        ref={textElementRef}
        style={{
          whiteSpace: 'nowrap',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
        }}
      >
        {props.text}
      </div>
    </Tooltip>
  );
};

export default OverflowTooltip;

and we use it like this:

<OverflowTooltip
    tooltip={'tooltip message here'}
    text={'very long text here'}
/>


答:
you were missing width 100% on the ul

@import url('https://fonts.googleapis.com/css2?family=Tenali+Ramakrishna&display=swap');
/*font-family: 'Tenali Ramakrishna', sans-serif;*/

* { /*Hugs border to edges of screen */
  margin: 0;
  padding: 0;
}

body{

 padding: 40px;
 overflow-x: hidden; /* For Opera */

 -webkit-box-shadow:
  inset #19d4ff 0 0 0 5px,
  inset #18cdf7 0 0 0 1px,
  inset #53dfff 0 0 0 10px,
  inset #50d8f7 0 0 0 11px,
  inset #8ce9ff 0 0 0 16px,
  inset #88e2f7 0 0 0 17px,
  inset #c5f4ff 0 0 0 22px,
  inset #bfecf7 0 0 0 23px;
 -moz-box-shadow:
  inset #19d4ff 0 0 0 5px,
  inset #18cdf7 0 0 0 1px,
  inset #53dfff 0 0 0 10px,
  inset #50d8f7 0 0 0 11px,
  inset #8ce9ff 0 0 0 16px,
  inset #88e2f7 0 0 0 17px,
  inset #c5f4ff 0 0 0 22px,
  inset #bfecf7 0 0 0 23px;
  box-shadow:
  inset #19d4ff 0 0 0 5px,
  inset #18cdf7 0 0 0 1px,
  inset #53dfff 0 0 0 10px,
  inset #50d8f7 0 0 0 11px,
  inset #8ce9ff 0 0 0 16px,
  inset #88e2f7 0 0 0 17px,
  inset #c5f4ff 0 0 0 22px,
  inset #bfecf7 0 0 0 23px;
  font-family: 'Tenali Ramakrishna', sans-serif;
  text-align: center;
}

header{
 display: flex;
  /*Lovely Gold*/
}

nav{
  padding: 0;
  background-color: #fcba03;

        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: center;
        align-items: center;

  width: 100%; /*Nav is filling 100% of it's available container*/
}

#header-img{

}

#title{
  font-size: 42px;
}

nav ul{
        width: 100%; /*added*/
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        flex-direction: row;
        justify-content: space-around;/*changed from flex-start to this*/
}

a, li {
  display: flex;
  justify-content: flex-start;
  font-family: 'Tenali Ramakrishna', sans-serif;
  font-weight: 400;
  font-size: 32px;
  text-decoration: none;
}

/* w3 schools- https://www.w3schools.com/css/tryit.asp?filename=trycss_mediaqueries_navbar
Parts have been edited*/

 a:hover{
  color: blue;
  transform: scale(1.1);
}

  @media screen and (max-width: 600px) {
  .nav a {
    float: none;
    width: 100%;
  }
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><!doctype html>

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<body>

<header id="header">

    <nav id="nav-bar">

        <img class="logo" src="http://pngimg.com/uploads/sun/sun_PNG13450.png" id="header-img" alt="SunLogo">

      <div id="title">
        <h1> Vitamin D </h1>
      </div>

      <ul>
        <li>Video</li>
        <li>Benefits</li>
        <li>How It Works</li>

      </ul>
    </nav>

</header></code>```

Body:
Utter beginner here.

I'm trying to get my nav bar list items to spread evenly along the bottom of the nav container.
I'm trying to do this specifically in flexbox. Justify-content: space-between; is what I've been trying but it doesn't seem to wanna play the game.

Code included below

Any ideas as to how I can achieve this with flexbox?

Thank you for taking the time to read this

Have a good day
Johnathan

@import url('https://fonts.googleapis.com/css2?family=Tenali+Ramakrishna&display=swap');
/*font-family: 'Tenali Ramakrishna', sans-serif;*/

* { /*Hugs border to edges of screen */
  margin: 0;
  padding: 0;
}

body{

 padding: 40px;
 overflow-x: hidden; /* For Opera */

 -webkit-box-shadow:
  inset #19d4ff 0 0 0 5px,
  inset #18cdf7 0 0 0 1px,
  inset #53dfff 0 0 0 10px,
  inset #50d8f7 0 0 0 11px,
  inset #8ce9ff 0 0 0 16px,
  inset #88e2f7 0 0 0 17px,
  inset #c5f4ff 0 0 0 22px,
  inset #bfecf7 0 0 0 23px;
 -moz-box-shadow:
  inset #19d4ff 0 0 0 5px,
  inset #18cdf7 0 0 0 1px,
  inset #53dfff 0 0 0 10px,
  inset #50d8f7 0 0 0 11px,
  inset #8ce9ff 0 0 0 16px,
  inset #88e2f7 0 0 0 17px,
  inset #c5f4ff 0 0 0 22px,
  inset #bfecf7 0 0 0 23px;
  box-shadow:
  inset #19d4ff 0 0 0 5px,
  inset #18cdf7 0 0 0 1px,
  inset #53dfff 0 0 0 10px,
  inset #50d8f7 0 0 0 11px,
  inset #8ce9ff 0 0 0 16px,
  inset #88e2f7 0 0 0 17px,
  inset #c5f4ff 0 0 0 22px,
  inset #bfecf7 0 0 0 23px;
  font-family: 'Tenali Ramakrishna', sans-serif;
  text-align: center;
}

header{
 display: flex;
  /*Lovely Gold*/
}

nav{
  padding: 0;
  background-color: #fcba03;

        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: center;
        align-items: center;

  width: 100%; /*Nav is filling 100% of it's available container*/
}

#header-img{

}

#title{
  font-size: 42px;
}

nav ul{

        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        flex-direction: row;
        justify-content: flex-start;
}

a, li {
  display: flex;
  justify-content: flex-start;
  font-family: 'Tenali Ramakrishna', sans-serif;
  font-weight: 400;
  font-size: 32px;
  text-decoration: none;
}

/* w3 schools- https://www.w3schools.com/css/tryit.asp?filename=trycss_mediaqueries_navbar
Parts have been edited*/

 a:hover{
  color: blue;
  transform: scale(1.1);
}

  @media screen and (max-width: 600px) {
  .nav a {
    float: none;
    width: 100%;
  }
}

<!doctype html>

 Vitamin D

Video

Benefits

How It Works

Body:
you were missing width 100% on the ul

@import url('https://fonts.googleapis.com/css2?family=Tenali+Ramakrishna&display=swap');
/*font-family: 'Tenali Ramakrishna', sans-serif;*/

* { /*Hugs border to edges of screen */
  margin: 0;
  padding: 0;
}

body{

 padding: 40px;
 overflow-x: hidden; /* For Opera */

 -webkit-box-shadow:
  inset #19d4ff 0 0 0 5px,
  inset #18cdf7 0 0 0 1px,
  inset #53dfff 0 0 0 10px,
  inset #50d8f7 0 0 0 11px,
  inset #8ce9ff 0 0 0 16px,
  inset #88e2f7 0 0 0 17px,
  inset #c5f4ff 0 0 0 22px,
  inset #bfecf7 0 0 0 23px;
 -moz-box-shadow:
  inset #19d4ff 0 0 0 5px,
  inset #18cdf7 0 0 0 1px,
  inset #53dfff 0 0 0 10px,
  inset #50d8f7 0 0 0 11px,
  inset #8ce9ff 0 0 0 16px,
  inset #88e2f7 0 0 0 17px,
  inset #c5f4ff 0 0 0 22px,
  inset #bfecf7 0 0 0 23px;
  box-shadow:
  inset #19d4ff 0 0 0 5px,
  inset #18cdf7 0 0 0 1px,
  inset #53dfff 0 0 0 10px,
  inset #50d8f7 0 0 0 11px,
  inset #8ce9ff 0 0 0 16px,
  inset #88e2f7 0 0 0 17px,
  inset #c5f4ff 0 0 0 22px,
  inset #bfecf7 0 0 0 23px;
  font-family: 'Tenali Ramakrishna', sans-serif;
  text-align: center;
}

header{
 display: flex;
  /*Lovely Gold*/
}

nav{
  padding: 0;
  background-color: #fcba03;

        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: center;
        align-items: center;

  width: 100%; /*Nav is filling 100% of it's available container*/
}

#header-img{

}

#title{
  font-size: 42px;
}

nav ul{
        width: 100%; /*added*/
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        flex-direction: row;
        justify-content: space-around;/*changed from flex-start to this*/
}

a, li {
  display: flex;
  justify-content: flex-start;
  font-family: 'Tenali Ramakrishna', sans-serif;
  font-weight: 400;
  font-size: 32px;
  text-decoration: none;
}

/* w3 schools- https://www.w3schools.com/css/tryit.asp?filename=trycss_mediaqueries_navbar
Parts have been edited*/

 a:hover{
  color: blue;
  transform: scale(1.1);
}

  @media screen and (max-width: 600px) {
  .nav a {
    float: none;
    width: 100%;
  }
}

<!doctype html>

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<body>

<header id="header">

    <nav id="nav-bar">

        <img class="logo" src="http://pngimg.com/uploads/sun/sun_PNG13450.png" id="header-img" alt="SunLogo">

      <div id="title">
        <h1> Vitamin D </h1>
      </div>

      <ul>
        <li><a class="nav-link" href="#video">Video</a></li>
        <li><a class="nav-link" href="#benefits">Benefits</a></li>
        <li><a class="nav-link" href="#how-it-works">How It Works</a></li>

      </ul>
    </nav>

</header>