问:
Rendering optimization using nested state in React
I have a React app where I believe -though not certain- that "nested state" causes me delays.

Here's the thing:

I keep my state in a variable called dataset.

dataset is an array of objects like this:

```<code>(5) [{…}, {…}, {…}, {…}, {…}]
</code>```

and each object has the following structure:

```<code>{id: '5', name: 'Bob', url: 'http://example.com', paid: 'yes'}
</code>```

Finally my render method displays the data in a table:

...
{dataset.map((entry) => (
    ...

{entry.name} has paid: {entry.paid}

    ...
))}
```

<p>It all seems to be working fine but then whenever I need to update the state because presumably user number 5 didn't pay this month I do this:</p>

<pre class="lang-js prettyprint-override"><code>// copy current state
let new_dataset = this.state.dataset.slice();

// modify the copy
new_dataset[5].paid = !this.state.dataset[5].paid;

// replace old state with the modified copy
this.setState({
    dataset: new_dataset
});
</code>```

However here's the problem:

Will React update all 5 rows or just the row holding the object I modified?

Wouldn't it be a waste to have react update 10000 rows just for a small change in one row? What's the best practice for such scenarios?

Thanks in advance.

P.S. I have already looked at how to Avoid Reconciliation but I'm not sure how to apply in this case.

答:
Will React update all 5 rows or just the row holding the object I
  modified?

It will update only what has been changed.
That is the purpose of reconciliation; I am not sure why you were looking for ways to avoid it. However, in your case you should use keys.

Body:
I have a React app where I believe -though not certain- that "nested state" causes me delays.

Here's the thing:

I keep my state in a variable called dataset.

dataset is an array of objects like this:

(5) [{…}, {…}, {…}, {…}, {…}]

and each object has the following structure:

{id: '5', name: 'Bob', url: 'http://example.com', paid: 'yes'}

Finally my render method displays the data in a table:

...
{dataset.map((entry) => (
    ...

{entry.name} has paid: {entry.paid}

    ...
))}

It all seems to be working fine but then whenever I need to update the state because presumably user number 5 didn't pay this month I do this:

// copy current state
let new_dataset = this.state.dataset.slice();

// modify the copy
new_dataset[5].paid = !this.state.dataset[5].paid;

// replace old state with the modified copy
this.setState({
    dataset: new_dataset
});

However here's the problem:

Will React update all 5 rows or just the row holding the object I modified?

Wouldn't it be a waste to have react update 10000 rows just for a small change in one row? What's the best practice for such scenarios?

Thanks in advance.

P.S. I have already looked at how to Avoid Reconciliation but I'm not sure how to apply in this case.


来源: stackexchange

问:
How can I add a badge to a standard UIButton?
Is it possible to add a standard-looking badge to a standard UIButton?

If it's not supported semi-natively, what would be the simplest way to achieve this?

Example image:

答:
I don't know how this is done out of the box and I honestly doubt that Apple built that into the SDK.

Anyway, you could create a custom view with a button on it, add the background of the badge as a UIImageView and place a label on it to hold the badge count.

That's a quick solution, it might be better to create a custom subclass of UIButton and add your badge stuff as a subview

ContentLicense: CC BY-SA 3.0

ContentLicense: CC BY-SA 2.5


问:
Insert statement conflict with foreign key constraint
I am writing the script for practice and Following is the emp and department table :

```<code>Create table Employee
(
EmpId       int,
Name        varchar(30),
Designation varchar(50),
DateOfBirth date,
Salary      int,
Department  int,
Gender      char(2),
Primary key(empId),
    foreign key(empId) references Department(DeptId)
)
Create table Department
(
DeptId      int,
Department  varchar(30),
Primary key(DeptId)
)
</code>```

When I am inserting rows into Employee table then I am getting the following error :

Msg 547, Level 16, State 0, Line 2
  The INSERT statement conflicted with the FOREIGN KEY constraint "FK_Employee_EmpId". The conflict occurred in database "Ramandeep", table "dbo.Department", column 'DeptId'.
  The statement has been terminated.

Below is the row which I am trying to insert :

```<code> Insert into Employee(EmpId,Name,Designation,DateOfBirth,Salary,Department,Gender) values (4,'Sam','Accountant','1973-05-13',6500,4,'M')
</code>```

And values are available in Department table

```<code>Insert into Department(DeptId,Department) values (1,'HR')
Insert into Department(DeptId,Department) values (2,'Operation')
Insert into Department(DeptId,Department) values (3,'IT')
Insert into Department(DeptId,Department) values (4,'Admin')
</code>```

I don't know why I am getting this error. Please help to fix it.

答:
The design does look wrong but actually does not throw an error. Perhaps you aren't doing things in the right order</p>

```<code>MariaDB [sandbox]> drop table if exists e;
Query OK, 0 rows affected (0.23 sec)

MariaDB [sandbox]> drop table if exists d;
Query OK, 0 rows affected (0.19 sec)

MariaDB [sandbox]> Create table D
    -> (
    -> DeptId      int,
    -> Department  varchar(30),
    -> Primary key(DeptId)
    -> );
Query OK, 0 rows affected (0.20 sec)

MariaDB [sandbox]>
MariaDB [sandbox]>
MariaDB [sandbox]> Create table E
    -> (
    -> EmpId       int,
    -> Name        varchar(30),
    -> Designation varchar(50),
    -> DateOfBirth date,
    -> Salary      int,
    -> Department  int,
    -> Gender      char(2),
    -> Primary key(empId),
    ->     foreign key(empId) references D(DeptId)
    -> )
    -> ;
Query OK, 0 rows affected (0.22 sec)

MariaDB [sandbox]>
MariaDB [sandbox]> Insert into D(DeptId,Department) values (1,'HR');
Query OK, 1 row affected (0.03 sec)

MariaDB [sandbox]> Insert into D(DeptId,Department) values (2,'Operation');
Query OK, 1 row affected (0.02 sec)

MariaDB [sandbox]> Insert into D(DeptId,Department) values (3,'IT');
Query OK, 1 row affected (0.04 sec)

MariaDB [sandbox]> Insert into D(DeptId,Department) values (4,'Admin');
Query OK, 1 row affected (0.03 sec)

MariaDB [sandbox]>
MariaDB [sandbox]> Insert into E(EmpId,Name,Designation,DateOfBirth,Salary,Department,Gender)
    -> values
    -> (4,'Sam','Accountant','1973-05-13',6500,4,'M');
Query OK, 1 row affected (0.04 sec)

MariaDB [sandbox]>
MariaDB [sandbox]> select * from e;
+-------+------+-------------+-------------+--------+------------+--------+
| EmpId | Name | Designation | DateOfBirth | Salary | Department | Gender |
+-------+------+-------------+-------------+--------+------------+--------+
|     4 | Sam  | Accountant  | 1973-05-13  |   6500 |          4 | M      |
+-------+------+-------------+-------------+--------+------------+--------+
1 row in set (0.00 sec)
</code>```

Body:
I am writing the script for practice and Following is the emp and department table :

Create table Employee
(
EmpId       int,
Name        varchar(30),
Designation varchar(50),
DateOfBirth date,
Salary      int,
Department  int,
Gender      char(2),
Primary key(empId),
    foreign key(empId) references Department(DeptId)
)
Create table Department
(
DeptId      int,
Department  varchar(30),
Primary key(DeptId)
)

When I am inserting rows into Employee table then I am getting the following error :

Msg 547, Level 16, State 0, Line 2
  The INSERT statement conflicted with the FOREIGN KEY constraint "FK_Employee_EmpId". The conflict occurred in database "Ramandeep", table "dbo.Department", column 'DeptId'.
  The statement has been terminated.

Below is the row which I am trying to insert :

 Insert into Employee(EmpId,Name,Designation,DateOfBirth,Salary,Department,Gender) values (4,'Sam','Accountant','1973-05-13',6500,4,'M')

And values are available in Department table

Insert into Department(DeptId,Department) values (1,'HR')
Insert into Department(DeptId,Department) values (2,'Operation')
Insert into Department(DeptId,Department) values (3,'IT')
Insert into Department(DeptId,Department) values (4,'Admin')

I don't know why I am getting this error. Please help to fix it.

Body:
The design does look wrong but actually does not throw an error. Perhaps you aren't doing things in the right order

MariaDB [sandbox]> drop table if exists e;
Query OK, 0 rows affected (0.23 sec)

MariaDB [sandbox]> drop table if exists d;
Query OK, 0 rows affected (0.19 sec)

MariaDB [sandbox]> Create table D
    -> (
    -> DeptId      int,
    -> Department  varchar(30),
    -> Primary key(DeptId)
    -> );
Query OK, 0 rows affected (0.20 sec)

MariaDB [sandbox]>
MariaDB [sandbox]>
MariaDB [sandbox]> Create table E
    -> (
    -> EmpId       int,
    -> Name        varchar(30),
    -> Designation varchar(50),
    -> DateOfBirth date,
    -> Salary      int,
    -> Department  int,
    -> Gender      char(2),
    -> Primary key(empId),
    ->     foreign key(empId) references D(DeptId)
    -> )
    -> ;
Query OK, 0 rows affected (0.22 sec)

MariaDB [sandbox]>
MariaDB [sandbox]> Insert into D(DeptId,Department) values (1,'HR');
Query OK, 1 row affected (0.03 sec)

MariaDB [sandbox]> Insert into D(DeptId,Department) values (2,'Operation');
Query OK, 1 row affected (0.02 sec)

MariaDB [sandbox]> Insert into D(DeptId,Department) values (3,'IT');
Query OK, 1 row affected (0.04 sec)

MariaDB [sandbox]> Insert into D(DeptId,Department) values (4,'Admin');
Query OK, 1 row affected (0.03 sec)

MariaDB [sandbox]>
MariaDB [sandbox]> Insert into E(EmpId,Name,Designation,DateOfBirth,Salary,Department,Gender)
    -> values
    -> (4,'Sam','Accountant','1973-05-13',6500,4,'M');
Query OK, 1 row affected (0.04 sec)

MariaDB [sandbox]>
MariaDB [sandbox]> select * from e;
+-------+------+-------------+-------------+--------+------------+--------+
| EmpId | Name | Designation | DateOfBirth | Salary | Department | Gender |
+-------+------+-------------+-------------+--------+------------+--------+
|     4 | Sam  | Accountant  | 1973-05-13  |   6500 |          4 | M      |
+-------+------+-------------+-------------+--------+------------+--------+
1 row in set (0.00 sec)


问:
Vba code to apply autofill method if there is only 1 row
The Autofill method of the following code snippet works fine if there are more than 1 row but fails and gives runtime error 1004 in case of only 1 row, Kindly suggest the required changes.</p>

```<code>Lastrow = ws3.Cells(Rows.Count, "B").End(xlUp).Row
ws1.Range("A2").FormulaR1C1 = _
    "=TEXT(RC[6],""000000000000"")&""-""&TEXT(RC[7],""0000"")"
ws1.Range("A2").AutoFill Destination:=ws1.Range("A2:A" & Lastrow), Type:=xlFillDefault
</code>```

答:
This is a really quick fix:

```<code>lastrow = Cells(Rows.Count, "B").End(xlUp).Row
Range("A2").FormulaR1C1 = "=TEXT(RC[6],""000000000000"")&""-""&TEXT(RC[7],""0000"")"
If lastrow > 2 Then
    Range("A2").AutoFill Destination:=Range("A2:A" & lastrow), Type:=xlFillDefault
End If
</code>```

In general, it will work. And it gives an error to you, because it the lastrow is 1 and it cannot do the AutoFill with it.

Body:
The Autofill method of the following code snippet works fine if there are more than 1 row but fails and gives runtime error 1004 in case of only 1 row, Kindly suggest the required changes.

Lastrow = ws3.Cells(Rows.Count, "B").End(xlUp).Row
ws1.Range("A2").FormulaR1C1 = _
    "=TEXT(RC[6],""000000000000"")&""-""&TEXT(RC[7],""0000"")"
ws1.Range("A2").AutoFill Destination:=ws1.Range("A2:A" & Lastrow), Type:=xlFillDefault

Body:
This is a really quick fix:

lastrow = Cells(Rows.Count, "B").End(xlUp).Row
Range("A2").FormulaR1C1 = "=TEXT(RC[6],""000000000000"")&""-""&TEXT(RC[7],""0000"")"
If lastrow > 2 Then
    Range("A2").AutoFill Destination:=Range("A2:A" & lastrow), Type:=xlFillDefault
End If

In general, it will work. And it gives an error to you, because it the lastrow is 1 and it cannot do the AutoFill with it.


问:
Is it possible to create an android.media.image instance from a file?
i would like create an android.media.Image instance with a file which is loading from the storage.
Cause i would like to do somenthing like this:

```<code> final Plane[] planes = image.getPlanes();
 final int yRowStride = planes[0].getRowStride();
 final int uvRowStride = planes[1].getRowStride();
 final int uvPixelStride = planes[1].getPixelStride();
</code>```

Any ideas ?

答:
try this code:

```<code>BitmapFactory.Options options = new BitmapFactory.Options();
options.inPreferredConfig = Bitmap.Config.ARGB_8888;
Bitmap bitmap = BitmapFactory.decodeFile(photoPath, options);
ByteArrayOutputStream stream = new ByteArrayOutputStream();
bitmap.Compress (Bitmap.CompressFormat.Jpeg, 100, stream);
ImageReader reader = ImageReader.newInstance(mWidth, mHeight, PixelFormat.RGBA_8888, 5);
Image img = reader.acquireLatestImage();
if(img != null){
    final Plane[] planes = image.getPlanes();
    final int yRowStride = planes[0].getRowStride();
    final int uvRowStride = planes[1].getRowStride();
    final int uvPixelStride = planes[1].getPixelStride();
}
</code>```

of course, you need to handle (missing file or wrong name/path, options and compress format)

Body:
i would like create an android.media.Image instance with a file which is loading from the storage.
Cause i would like to do somenthing like this:

 final Plane[] planes = image.getPlanes();
 final int yRowStride = planes[0].getRowStride();
 final int uvRowStride = planes[1].getRowStride();
 final int uvPixelStride = planes[1].getPixelStride();

Any ideas ?

Body:
try this code:

BitmapFactory.Options options = new BitmapFactory.Options();
options.inPreferredConfig = Bitmap.Config.ARGB_8888;
Bitmap bitmap = BitmapFactory.decodeFile(photoPath, options);
ByteArrayOutputStream stream = new ByteArrayOutputStream();
bitmap.Compress (Bitmap.CompressFormat.Jpeg, 100, stream);
ImageReader reader = ImageReader.newInstance(mWidth, mHeight, PixelFormat.RGBA_8888, 5);
Image img = reader.acquireLatestImage();
if(img != null){
    final Plane[] planes = image.getPlanes();
    final int yRowStride = planes[0].getRowStride();
    final int uvRowStride = planes[1].getRowStride();
    final int uvPixelStride = planes[1].getPixelStride();
}

of course, you need to handle (missing file or wrong name/path, options and compress format)


问:
CSS Flexbox Masonry excluding first block
I have been working on a masonry layout style for the posts list using the CSS flexbox and I achieved the layout but not the masonry layout for the post blocks.

If you check the sample code below you can see I have got the first post forced with 100% width what I want. But the remaining posts are wrapped or aligned equally which I want it to look like masonry.

How can I achieve this layout using CSS flexbox?

/* Box Sizing */
* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Post Layout Using Flex */
.post_layout {
    display: flex;
    flex-wrap: wrap;
    height: 100vw;
    max-height: 800px;
    border:1px solid red;
    box-sizing: border-box;
}
.first-post {
    width: 100%;
    transition: .8s opacity;
    border:1 px solid green;
}
.col-6 {
    width: 50%;
    transition: .8s opacity;
    border:1px solid blue;
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="post_layout">
    <div class="first-post">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget placerat lectus. Aliquam erat volutpat. Integer condimentum quis diam sed elementum. Donec vitae tellus in turpis condimentum ullamcorper non in nulla. Praesent erat ligula, facilisis sed augue eget, commodo ultrices eros. Morbi id augue semper, tincidunt purus et, semper ipsum. Vivamus tristique efficitur pharetra. Sed tempus malesuada purus, eget dapibus nibh ultrices vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent ante ipsum, tincidunt at varius et, ornare sed turpis.
    </div>
    <div class="col-6">
        In malesuada lorem vel nunc auctor tempor. Vivamus lobortis molestie lorem, non posuere orci auctor nec. Mauris auctor placerat aliquet. Cras venenatis tellus et mi euismod eleifend. Proin ultricies blandit metus eu vestibulum. Quisque iaculis placerat lobortis. Etiam eu fermentum nibh, ac faucibus metus. Nulla placerat justo et malesuada ornare.
    </div>
    <div class="col-6">
        Praesent efficitur ligula magna, eget maximus nibh maximus a. Nulla facilisi. In hac habitasse platea dictumst. Suspendisse vulputate nulla vitae nunc luctus, vitae venenatis est efficitur. Praesent iaculis, mauris condimentum vulputate fermentum, dui elit rutrum ligula, non efficitur risus tortor sed massa. Sed a dui semper, finibus ex quis, posuere tortor. Duis rutrum lacus vitae feugiat gravida. Nullam a orci sit amet purus tempor commodo. Praesent blandit nisl tellus, non accumsan felis sollicitudin eu. Vivamus fermentum elit id urna varius feugiat. Morbi consequat tortor at eros fringilla, eu euismod nulla consectetur.
    </div>
    <div class="col-6">
        Etiam dictum urna vitae ante varius cursus. Praesent mollis faucibus lorem et dignissim. Nullam consectetur rhoncus luctus. Curabitur ut mattis est. Nullam dictum finibus nisl, nec sollicitudin nibh placerat sit amet. Nam eleifend, leo volutpat gravida porta, nisi ipsum suscipit leo, quis iaculis nulla leo eget turpis. Suspendisse pulvinar at erat in ultricies. Praesent leo metus, bibendum in blandit sed, consequat sed nisi. Phasellus sit amet justo et felis maximus scelerisque. Praesent non dolor porta, scelerisque mauris ac, pharetra massa. Suspendisse blandit eu risus non elementum. Aenean bibendum sed mauris id dignissim. Sed nunc metus, convallis vel sagittis sed, porttitor a diam.
    </div>
    <div class="col-6">
        Etiam auctor odio eu dolor placerat pulvinar non cursus nisl. Vivamus venenatis sollicitudin quam non iaculis. Nullam sagittis dolor nec arcu gravida facilisis. Nulla non eros in metus consequat lacinia. Fusce viverra lectus sed lectus tempor facilisis. Nunc mi enim, pulvinar non vestibulum non
    </div>
    <div class="col-6">
        Nulla facilisi. Nulla pulvinar et nibh in fringilla. Integer pellentesque laoreet viverra. Suspendisse placerat massa et rutrum pretium. Curabitur tincidunt id massa non suscipit. Nunc dictum enim gravida augue interdum, eu luctus massa vulputate. Ut mi leo, facilisis ut massa vel, ullamcorper eleifend sapien. Suspendisse ornare velit cursus consectetur mattis. Phasellus placerat imperdiet nunc, ut facilisis turpis eleifend vel. Donec nec maximus tellus, aliquet sodales turpis. Mauris consectetur justo sem, et vulputate elit ornare sed. Maecenas vel mauris scelerisque lacus finibus bibendum vel id lectus. Aenean in hendrerit velit.
    </div>
    <div class="col-6">
        In malesuada lorem vel nunc auctor tempor. Vivamus lobortis molestie lorem, non posuere orci auctor nec. Mauris auctor placerat aliquet. Cras venenatis tellus et mi euismod eleifend. Proin ultricies blandit metus eu vestibulum. Quisque iaculis placerat lobortis. Etiam eu fermentum nibh, ac faucibus metus. Nulla placerat justo et malesuada ornare.
    </div>
</div></code>```

答:
You can take a look at https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts

The CSS Multi-column Layout Module extends the block layout mode to allow the easy definition of multiple columns of text. People have trouble reading text if lines are too long; if it takes too long for the eyes to move from the end of the one line to the beginning of the next, they lose track of which line they were on. Therefore, to make maximum use of a large screen, authors should have limited-width columns of text placed side by side, just as newspapers do

a tutorial among others https://css-tricks.com/almanac/properties/c/columns/

With just a few CSS rules, you can create a print-inspired layout that has the flexibility of the web. It’s like taking a newspaper, but as the paper gets smaller, the columns will adjust and balance automatically allowing the content to flow naturally.

snippet to test behavior.

/* Box Sizing */
* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Post Layout not Using Flex */
.post_layout {
    column-count:2;
    column-fill:balance;
    border:1px solid red;
    box-sizing: border-box;
}
.first-post {
    transition: .8s opacity;
    border:1 px solid green;
}
.col-6 {
    transition: .8s opacity;
    border:1px solid blue;
    margin:5px
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="first-post">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget placerat lectus. Aliquam erat volutpat. Integer condimentum quis diam sed elementum. Donec vitae tellus in turpis condimentum ullamcorper non in nulla. Praesent erat ligula, facilisis sed augue eget, commodo ultrices eros. Morbi id augue semper, tincidunt purus et, semper ipsum. Vivamus tristique efficitur pharetra. Sed tempus malesuada purus, eget dapibus nibh ultrices vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent ante ipsum, tincidunt at varius et, ornare sed turpis.
</div>
<div class="post_layout">
    <div class="col-6">
        In malesuada lorem vel nunc auctor tempor. Vivamus lobortis molestie lorem, non posuere orci auctor nec. Mauris auctor placerat aliquet. Cras venenatis tellus et mi euismod eleifend. Proin ultricies blandit metus eu vestibulum. Quisque iaculis placerat lobortis. Etiam eu fermentum nibh, ac faucibus metus. Nulla placerat justo et malesuada ornare.
    </div>
    <div class="col-6">
        Praesent efficitur ligula magna, eget maximus nibh maximus a. Nulla facilisi. In hac habitasse platea dictumst. Suspendisse vulputate nulla vitae nunc luctus, vitae venenatis est efficitur. Praesent iaculis, mauris condimentum vulputate fermentum, dui elit rutrum ligula, non efficitur risus tortor sed massa. Sed a dui semper, finibus ex quis, posuere tortor. Duis rutrum lacus vitae feugiat gravida. Nullam a orci sit amet purus tempor commodo. Praesent blandit nisl tellus, non accumsan felis sollicitudin eu. Vivamus fermentum elit id urna varius feugiat. Morbi consequat tortor at eros fringilla, eu euismod nulla consectetur.
    </div>
    <div class="col-6">
        Etiam dictum urna vitae ante varius cursus. Praesent mollis faucibus lorem et dignissim. Nullam consectetur rhoncus luctus. Curabitur ut mattis est. Nullam dictum finibus nisl, nec sollicitudin nibh placerat sit amet. Nam eleifend, leo volutpat gravida porta, nisi ipsum suscipit leo, quis iaculis nulla leo eget turpis. Suspendisse pulvinar at erat in ultricies. Praesent leo metus, bibendum in blandit sed, consequat sed nisi. Phasellus sit amet justo et felis maximus scelerisque. Praesent non dolor porta, scelerisque mauris ac, pharetra massa. Suspendisse blandit eu risus non elementum. Aenean bibendum sed mauris id dignissim. Sed nunc metus, convallis vel sagittis sed, porttitor a diam.
    </div>
    <div class="col-6">
        Etiam auctor odio eu dolor placerat pulvinar non cursus nisl. Vivamus venenatis sollicitudin quam non iaculis. Nullam sagittis dolor nec arcu gravida facilisis. Nulla non eros in metus consequat lacinia. Fusce viverra lectus sed lectus tempor facilisis. Nunc mi enim, pulvinar non vestibulum non
    </div>
    <div class="col-6">
        Nulla facilisi. Nulla pulvinar et nibh in fringilla. Integer pellentesque laoreet viverra. Suspendisse placerat massa et rutrum pretium. Curabitur tincidunt id massa non suscipit. Nunc dictum enim gravida augue interdum, eu luctus massa vulputate. Ut mi leo, facilisis ut massa vel, ullamcorper eleifend sapien. Suspendisse ornare velit cursus consectetur mattis. Phasellus placerat imperdiet nunc, ut facilisis turpis eleifend vel. Donec nec maximus tellus, aliquet sodales turpis. Mauris consectetur justo sem, et vulputate elit ornare sed. Maecenas vel mauris scelerisque lacus finibus bibendum vel id lectus. Aenean in hendrerit velit.
    </div>
    <div class="col-6">
        In malesuada lorem vel nunc auctor tempor. Vivamus lobortis molestie lorem, non posuere orci auctor nec. Mauris auctor placerat aliquet. Cras venenatis tellus et mi euismod eleifend. Proin ultricies blandit metus eu vestibulum. Quisque iaculis placerat lobortis. Etiam eu fermentum nibh, ac faucibus metus. Nulla placerat justo et malesuada ornare.
    </div>
</div></code>```

column-span is not supported , you need to take the first block out of the column boxe.

Body:
I have been working on a masonry layout style for the posts list using the CSS flexbox and I achieved the layout but not the masonry layout for the post blocks.

If you check the sample code below you can see I have got the first post forced with 100% width what I want. But the remaining posts are wrapped or aligned equally which I want it to look like masonry.

How can I achieve this layout using CSS flexbox?

/* Box Sizing */
* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Post Layout Using Flex */
.post_layout {
    display: flex;
    flex-wrap: wrap;
    height: 100vw;
    max-height: 800px;
    border:1px solid red;
    box-sizing: border-box;
}
.first-post {
    width: 100%;
    transition: .8s opacity;
    border:1 px solid green;
}
.col-6 {
    width: 50%;
    transition: .8s opacity;
    border:1px solid blue;
}

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget placerat lectus. Aliquam erat volutpat. Integer condimentum quis diam sed elementum. Donec vitae tellus in turpis condimentum ullamcorper non in nulla. Praesent erat ligula, facilisis sed augue eget, commodo ultrices eros. Morbi id augue semper, tincidunt purus et, semper ipsum. Vivamus tristique efficitur pharetra. Sed tempus malesuada purus, eget dapibus nibh ultrices vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent ante ipsum, tincidunt at varius et, ornare sed turpis.

        In malesuada lorem vel nunc auctor tempor. Vivamus lobortis molestie lorem, non posuere orci auctor nec. Mauris auctor placerat aliquet. Cras venenatis tellus et mi euismod eleifend. Proin ultricies blandit metus eu vestibulum. Quisque iaculis placerat lobortis. Etiam eu fermentum nibh, ac faucibus metus. Nulla placerat justo et malesuada ornare.

        Praesent efficitur ligula magna, eget maximus nibh maximus a. Nulla facilisi. In hac habitasse platea dictumst. Suspendisse vulputate nulla vitae nunc luctus, vitae venenatis est efficitur. Praesent iaculis, mauris condimentum vulputate fermentum, dui elit rutrum ligula, non efficitur risus tortor sed massa. Sed a dui semper, finibus ex quis, posuere tortor. Duis rutrum lacus vitae feugiat gravida. Nullam a orci sit amet purus tempor commodo. Praesent blandit nisl tellus, non accumsan felis sollicitudin eu. Vivamus fermentum elit id urna varius feugiat. Morbi consequat tortor at eros fringilla, eu euismod nulla consectetur.

        Etiam dictum urna vitae ante varius cursus. Praesent mollis faucibus lorem et dignissim. Nullam consectetur rhoncus luctus. Curabitur ut mattis est. Nullam dictum finibus nisl, nec sollicitudin nibh placerat sit amet. Nam eleifend, leo volutpat gravida porta, nisi ipsum suscipit leo, quis iaculis nulla leo eget turpis. Suspendisse pulvinar at erat in ultricies. Praesent leo metus, bibendum in blandit sed, consequat sed nisi. Phasellus sit amet justo et felis maximus scelerisque. Praesent non dolor porta, scelerisque mauris ac, pharetra massa. Suspendisse blandit eu risus non elementum. Aenean bibendum sed mauris id dignissim. Sed nunc metus, convallis vel sagittis sed, porttitor a diam.

        Etiam auctor odio eu dolor placerat pulvinar non cursus nisl. Vivamus venenatis sollicitudin quam non iaculis. Nullam sagittis dolor nec arcu gravida facilisis. Nulla non eros in metus consequat lacinia. Fusce viverra lectus sed lectus tempor facilisis. Nunc mi enim, pulvinar non vestibulum non

        Nulla facilisi. Nulla pulvinar et nibh in fringilla. Integer pellentesque laoreet viverra. Suspendisse placerat massa et rutrum pretium. Curabitur tincidunt id massa non suscipit. Nunc dictum enim gravida augue interdum, eu luctus massa vulputate. Ut mi leo, facilisis ut massa vel, ullamcorper eleifend sapien. Suspendisse ornare velit cursus consectetur mattis. Phasellus placerat imperdiet nunc, ut facilisis turpis eleifend vel. Donec nec maximus tellus, aliquet sodales turpis. Mauris consectetur justo sem, et vulputate elit ornare sed. Maecenas vel mauris scelerisque lacus finibus bibendum vel id lectus. Aenean in hendrerit velit.

        In malesuada lorem vel nunc auctor tempor. Vivamus lobortis molestie lorem, non posuere orci auctor nec. Mauris auctor placerat aliquet. Cras venenatis tellus et mi euismod eleifend. Proin ultricies blandit metus eu vestibulum. Quisque iaculis placerat lobortis. Etiam eu fermentum nibh, ac faucibus metus. Nulla placerat justo et malesuada ornare.

Body:
You can take a look at https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts

The CSS Multi-column Layout Module extends the block layout mode to allow the easy definition of multiple columns of text. People have trouble reading text if lines are too long; if it takes too long for the eyes to move from the end of the one line to the beginning of the next, they lose track of which line they were on. Therefore, to make maximum use of a large screen, authors should have limited-width columns of text placed side by side, just as newspapers do

a tutorial among others https://css-tricks.com/almanac/properties/c/columns/

With just a few CSS rules, you can create a print-inspired layout that has the flexibility of the web. It’s like taking a newspaper, but as the paper gets smaller, the columns will adjust and balance automatically allowing the content to flow naturally.

snippet to test behavior.

/* Box Sizing */
* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Post Layout not Using Flex */
.post_layout {
    column-count:2;
    column-fill:balance;
    border:1px solid red;
    box-sizing: border-box;
}
.first-post {
    transition: .8s opacity;
    border:1 px solid green;
}
.col-6 {
    transition: .8s opacity;
    border:1px solid blue;
    margin:5px
}

<div class="first-post">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget placerat lectus. Aliquam erat volutpat. Integer condimentum quis diam sed elementum. Donec vitae tellus in turpis condimentum ullamcorper non in nulla. Praesent erat ligula, facilisis sed augue eget, commodo ultrices eros. Morbi id augue semper, tincidunt purus et, semper ipsum. Vivamus tristique efficitur pharetra. Sed tempus malesuada purus, eget dapibus nibh ultrices vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent ante ipsum, tincidunt at varius et, ornare sed turpis.
</div>
<div class="post_layout">
    <div class="col-6">
        In malesuada lorem vel nunc auctor tempor. Vivamus lobortis molestie lorem, non posuere orci auctor nec. Mauris auctor placerat aliquet. Cras venenatis tellus et mi euismod eleifend. Proin ultricies blandit metus eu vestibulum. Quisque iaculis placerat lobortis. Etiam eu fermentum nibh, ac faucibus metus. Nulla placerat justo et malesuada ornare.
    </div>
    <div class="col-6">
        Praesent efficitur ligula magna, eget maximus nibh maximus a. Nulla facilisi. In hac habitasse platea dictumst. Suspendisse vulputate nulla vitae nunc luctus, vitae venenatis est efficitur. Praesent iaculis, mauris condimentum vulputate fermentum, dui elit rutrum ligula, non efficitur risus tortor sed massa. Sed a dui semper, finibus ex quis, posuere tortor. Duis rutrum lacus vitae feugiat gravida. Nullam a orci sit amet purus tempor commodo. Praesent blandit nisl tellus, non accumsan felis sollicitudin eu. Vivamus fermentum elit id urna varius feugiat. Morbi consequat tortor at eros fringilla, eu euismod nulla consectetur.
    </div>
    <div class="col-6">
        Etiam dictum urna vitae ante varius cursus. Praesent mollis faucibus lorem et dignissim. Nullam consectetur rhoncus luctus. Curabitur ut mattis est. Nullam dictum finibus nisl, nec sollicitudin nibh placerat sit amet. Nam eleifend, leo volutpat gravida porta, nisi ipsum suscipit leo, quis iaculis nulla leo eget turpis. Suspendisse pulvinar at erat in ultricies. Praesent leo metus, bibendum in blandit sed, consequat sed nisi. Phasellus sit amet justo et felis maximus scelerisque. Praesent non dolor porta, scelerisque mauris ac, pharetra massa. Suspendisse blandit eu risus non elementum. Aenean bibendum sed mauris id dignissim. Sed nunc metus, convallis vel sagittis sed, porttitor a diam.
    </div>
    <div class="col-6">
        Etiam auctor odio eu dolor placerat pulvinar non cursus nisl. Vivamus venenatis sollicitudin quam non iaculis. Nullam sagittis dolor nec arcu gravida facilisis. Nulla non eros in metus consequat lacinia. Fusce viverra lectus sed lectus tempor facilisis. Nunc mi enim, pulvinar non vestibulum non
    </div>
    <div class="col-6">
        Nulla facilisi. Nulla pulvinar et nibh in fringilla. Integer pellentesque laoreet viverra. Suspendisse placerat massa et rutrum pretium. Curabitur tincidunt id massa non suscipit. Nunc dictum enim gravida augue interdum, eu luctus massa vulputate. Ut mi leo, facilisis ut massa vel, ullamcorper eleifend sapien. Suspendisse ornare velit cursus consectetur mattis. Phasellus placerat imperdiet nunc, ut facilisis turpis eleifend vel. Donec nec maximus tellus, aliquet sodales turpis. Mauris consectetur justo sem, et vulputate elit ornare sed. Maecenas vel mauris scelerisque lacus finibus bibendum vel id lectus. Aenean in hendrerit velit.
    </div>
    <div class="col-6">
        In malesuada lorem vel nunc auctor tempor. Vivamus lobortis molestie lorem, non posuere orci auctor nec. Mauris auctor placerat aliquet. Cras venenatis tellus et mi euismod eleifend. Proin ultricies blandit metus eu vestibulum. Quisque iaculis placerat lobortis. Etiam eu fermentum nibh, ac faucibus metus. Nulla placerat justo et malesuada ornare.
    </div>
</div>

column-span is not supported , you need to take the first block out of the column boxe.


问:
How to scroll in mobile browser using Appium and selenium?
How to scroll in mobile browser using Appium and selenium? Scroll is working in app but not in browser. Using scrollToExact method. web app was developed using ionic framework</p>

答:
There several ways how to get it done.

If you are using instance of AppiumDriver, you need to switch to native view before you can use TouchAction

```<code>driver.context("NATIVE_APP");
// Get your screen size to set properly start point (startX, startY)
// and end point (endX, endY) for scrolling
Dimension screenSize = driver.manage().window().getSize();
new TouchAction(driver)
  .press(<startX>, <startY>)
  .waitAction(500)
  .press(<endX>, <endY>)
  .release()
  .perform();
</code>```

If you are using instance of RemoteWebDriver, then you can do it like this:

```<code>driver.get("https://www.google.de");
ExecuteMethod method = new RemoteExecuteMethod(driver);
RemoteTouchScreen screen = new RemoteTouchScreen(method);
screen.up(10, 20);
</code>```

Body:
There several ways how to get it done.

If you are using instance of AppiumDriver, you need to switch to native view before you can use TouchAction

driver.context("NATIVE_APP");
// Get your screen size to set properly start point (startX, startY)
// and end point (endX, endY) for scrolling
Dimension screenSize = driver.manage().window().getSize();
new TouchAction(driver)
  .press(<startX>, <startY>)
  .waitAction(500)
  .press(<endX>, <endY>)
  .release()
  .perform();

If you are using instance of RemoteWebDriver, then you can do it like this:

driver.get("https://www.google.de");
ExecuteMethod method = new RemoteExecuteMethod(driver);
RemoteTouchScreen screen = new RemoteTouchScreen(method);
screen.up(10, 20);


问:
Put a file on FTP site with contents from string variable (no local file)
I want to upload a file to an FTP server, but the file content is held in a variable, not in an actual local file. I want to avoid using a file; this is to avoid security risks when dealing with sensitive data on a (possibly) not-so-secure system(*), as well as to minimize the (already low) overhead of file handling.

But PHP's FTP API only offers uploading files from local files via the function ftp_put or (when the file is already opened as a file handle) ftp_fput.

Currently, I use this function with a temporary file in which I write the contents before the upload:

```<code>$tmpfile = tmpfile();
fwrite($tmpfile, $content);
fseek($tmpfile, 0);
ftp_fput($ftp, $filename, $tmpfile, FTP_BINARY);
</code>```

Is there a simpler way without using files on the local (PHP) site at all?

There is ftp_raw which can be used to send arbitrary commands, so I could issue the PUT command manually, however I don't see a way to manually write the data on the data channel...

I don't know if it is important, but the FTP connection is secured with SSL (ftp_ssl_connect).

(*) Consider the scenario where an attacker has read-only control over the entire file system.

答:
With no local file involved (ftp_fput):</p>

```<code>$stream = fopen('php://memory','r+');
fwrite($stream, $newFileContent);
rewind($stream);

$success = ftp_fput($connectionId, "remoteFileName", $stream, FTP_BINARY);

fclose($stream);
</code>```

Body:
I want to upload a file to an FTP server, but the file content is held in a variable, not in an actual local file. I want to avoid using a file; this is to avoid security risks when dealing with sensitive data on a (possibly) not-so-secure system(*), as well as to minimize the (already low) overhead of file handling.

But PHP's FTP API only offers uploading files from local files via the function ftp_put or (when the file is already opened as a file handle) ftp_fput.

Currently, I use this function with a temporary file in which I write the contents before the upload:

$tmpfile = tmpfile();
fwrite($tmpfile, $content);
fseek($tmpfile, 0);
ftp_fput($ftp, $filename, $tmpfile, FTP_BINARY);

Is there a simpler way without using files on the local (PHP) site at all?

There is ftp_raw which can be used to send arbitrary commands, so I could issue the PUT command manually, however I don't see a way to manually write the data on the data channel...

I don't know if it is important, but the FTP connection is secured with SSL (ftp_ssl_connect).

(*) Consider the scenario where an attacker has read-only control over the entire file system.

Body:
With no local file involved (ftp_fput):

$stream = fopen('php://memory','r+');
fwrite($stream, $newFileContent);
rewind($stream);

$success = ftp_fput($connectionId, "remoteFileName", $stream, FTP_BINARY);

fclose($stream);


问:
While passing id from a json to an URL, undefined value is getting passed
I've a sample JSON as given below:

```<code>[
    {
        "componentid": 4,
        "displayImageUrl": "https://via.placeholder.com/350x200",
        "title": "theme",
        "shortdesc": "to set theme for different applications"
    },
    {
        "componentid": 7,
        "displayImageUrl": "https://via.placeholder.com/350x200",
        "title": "preferences",
        "shortdesc": "preferences screen for apps"
    }
]
</code>```

And I prepared a HTML content based on that data. Code is given below:

```<code>function prepareTopComponentList(data) {

    var preparedHtml = "";

    for (var count = 0; count < data.length; count++) {
        preparedHtml += "<div class=\"col-lg-4\" style=\"margin-top: 20px\">\n" +
            "                <div class=\"card wow fadeIn\" data-wow-delay=\"0.2s\">\n" +
            "                    <img class=\"img-fluid\" src=\"";
        preparedHtml += data[0].displayImageUrl;
        preparedHtml += "\" alt=\"N/A\">\n" +
            "                    <div class=\"card-body\">\n" +
            "                        <h4 class=\"card-title\">";
        preparedHtml += data[0].title;
        preparedHtml += "</h4>\n" +
            "                        <p class=\"card-text\">";
        preparedHtml += data[0].shortdesc;
        preparedHtml += "</p>\n" +
            "                        <a onclick = \"redirect(this, this);\" href='#' class=\"btn btn-info\" id=\"";
        preparedHtml += "component_desc_" + data[count].componentid;

        /*I replaced 0 with count so that we can get proper ids*/
        //console.log(data[0].componentid);

        preparedHtml += "\">Learn more</a>\n" +
            "                    </div>\n" +
            "\n" +
            "                </div>\n" +
            "            </div>";
    }

    $("#div_top_component").append(preparedHtml);

}
</code>```

Now, I'm redirecting to a page based on value of componentid. Redirection function code is given below:

```<code>function redirect(element, data) {
    // data = prepareTopComponentList(data);
    for (var count = 0; count < data.length; count++) {
        var url = "inside.dell.com";
        var query = data[count].componentid;
        var finalUrl = "inside.dell.com/componentid=" + query;
        console.log(finalUrl);
    }
    window.location = "inside.dell.com/componentid=" + query;
}
</code>```

When I run this code, I get this error:

```<code>The requested URL /Reusable Components/pages/inside.dell.com/componentid=undefined was not found on this server.
</code>```

That error is fine, I don't have any problem with that. However in redirection URL, component id is undefined. How do I make sure that value of component ID gets passed to URL?

答:
Declare your query variable outside of for loop.

```<code>function redirect(element, data) {
// data = prepareTopComponentList(data);
var query;
for (var count = 0; count < data.length; count++) {
    var url = "inside.dell.com";
    query = data[count].componentid;
    var finalUrl = "inside.dell.com/componentid=" + query;
    console.log(finalUrl);
}
window.location = "inside.dell.com/componentid=" + query;
}
</code>```

Body:
I've a sample JSON as given below:

[
    {
        "componentid": 4,
        "displayImageUrl": "https://via.placeholder.com/350x200",
        "title": "theme",
        "shortdesc": "to set theme for different applications"
    },
    {
        "componentid": 7,
        "displayImageUrl": "https://via.placeholder.com/350x200",
        "title": "preferences",
        "shortdesc": "preferences screen for apps"
    }
]

And I prepared a HTML content based on that data. Code is given below:

function prepareTopComponentList(data) {

    var preparedHtml = "";

    for (var count = 0; count < data.length; count++) {
        preparedHtml += "
\n" +
            "
\n" +
            "                    \n" +
            "
\n" +
            "
";
        preparedHtml += data[0].title;
        preparedHtml += "
\n" +
            "
";
        preparedHtml += data[0].shortdesc;
        preparedHtml += "
\n" +
            "                        Learn more\n" +
            "
\n" +
            "\n" +
            "
\n" +
            "
";
    }

    $("#div_top_component").append(preparedHtml);

}

Now, I'm redirecting to a page based on value of componentid. Redirection function code is given below:

function redirect(element, data) {
    // data = prepareTopComponentList(data);
    for (var count = 0; count < data.length; count++) {
        var url = "inside.dell.com";
        var query = data[count].componentid;
        var finalUrl = "inside.dell.com/componentid=" + query;
        console.log(finalUrl);
    }
    window.location = "inside.dell.com/componentid=" + query;
}

When I run this code, I get this error:

The requested URL /Reusable Components/pages/inside.dell.com/componentid=undefined was not found on this server.

That error is fine, I don't have any problem with that. However in redirection URL, component id is undefined. How do I make sure that value of component ID gets passed to URL?

Body:
Declare your query variable outside of for loop.

function redirect(element, data) {
// data = prepareTopComponentList(data);
var query;
for (var count = 0; count < data.length; count++) {
    var url = "inside.dell.com";
    query = data[count].componentid;
    var finalUrl = "inside.dell.com/componentid=" + query;
    console.log(finalUrl);
}
window.location = "inside.dell.com/componentid=" + query;
}


问:
Data oriented design - how are data dependencies solved?
I saw "Data-Oriented Design and C++" by Mike Acton and I found it quite interesting. I don't understand how data dependencies are solved though.

Imagine I have a simple 2d engine with:
* physical data - to handle physics
* graphical data - to render sprites
* sound data - to play sounds

Graphical data and sound data depend on position stored in physical data. Position can be referenced from the physical data, but that in my opinion kills the whole point of DOD - to have required data in the same memory location.

How is such situation handled in Data Oriented Design?

答: Not sure if perfectly DOD, but if your IDs or handles are shared throughout your physics and graphics subsystems, you could have your physics subsystem produce an array of positions and IDs/handles of all updated objects and use that as an input for the graphics subsystem.</p>


问:
iframe in javascript - height can't change on mobile device
I have this script code.The problem is no matter what value I define for the height in "var Mobile" , when viewed on mobile device it always remain same small height. On desktop it is ok and change height corresponging to its value.

 ```

答:
Try to replace

```<code>if (screen.width < 860)
</code>```

with

```<code>if( window.innerWidth < 860 ) {...}
</code>```

Body:
Try to replace

if (screen.width < 860)

with

if( window.innerWidth < 860 ) {...}


问:
Simplest server to server authentication
I have microservice on a new server/vps that will only ever be called via REST by monolith app to perform some heavy lifting and then post the operation results back to the monolith in few minutes.

How should I protect these two endpoints? I think my main goal, for now, is just preventing someone that found servers address to be able to do anything.

Almost every solution I google seems like overkill/premature optimization.

Is it sufficient that I generate random long token once on each machine and then just pass it to headers and check it's presence on the other end?

Do I even need to SSL this? As far as I understand we need SSL encryption for clients that are trying to send sensitive data via wireless or unsafe shared networks.

What are the chances(is it even possible?) that somebody is gonna eavesdrop between two digitalocean vps's sending data via http? Did it ever happen before ?

答:
Q: Is it sufficient that I generate random long token once on each machine and then just pass it to headers and check it's presence on the other end?

A: Generally microservices are behind a GateKeeper/Gateway(nginx,haproxy) so you can expose the endpoints you want. In your case I would recommend to create a private network between the two vps's and expose your microservice on that internal IP.

Q: Do I even need to SSL this? As far as I understand we need SSL encryption for clients that are trying to send sensitive data via wireless or unsafe shared networks.

A: No. If you use internal networks and don't expose to the public then there is no need for SSL/TLS. If you would do something with Tier 3/4 then you would need encryption for cross datacenter communication.

Q: What are the chances(is it even possible?) that somebody is gonna eavesdrop between two digitalocean vps's sending data via http? Did it ever happen before ?

A: There are bots that scan for open ports on servers/computers and try to penetrate them with exploits. In all cases always use a firewall like UFW/firewalld.

So let's say you have two servers with these microservices using the internal private network from your favorite provider:

VPS1 (ip = 10.0.1.50)

```<code>FooBarService:1337
BarFooService:7331
</code>```

VPS2 (ip = 10.0.1.51)

```<code>AnotherMicroService:9999
</code>```

Now both VPS's can access each other's services by simply calling the ip + port.

Good luck.

Body:
Q: Is it sufficient that I generate random long token once on each machine and then just pass it to headers and check it's presence on the other end?

A: Generally microservices are behind a GateKeeper/Gateway(nginx,haproxy) so you can expose the endpoints you want. In your case I would recommend to create a private network between the two vps's and expose your microservice on that internal IP.

Q: Do I even need to SSL this? As far as I understand we need SSL encryption for clients that are trying to send sensitive data via wireless or unsafe shared networks.

A: No. If you use internal networks and don't expose to the public then there is no need for SSL/TLS. If you would do something with Tier 3/4 then you would need encryption for cross datacenter communication.

Q: What are the chances(is it even possible?) that somebody is gonna eavesdrop between two digitalocean vps's sending data via http? Did it ever happen before ?

A: There are bots that scan for open ports on servers/computers and try to penetrate them with exploits. In all cases always use a firewall like UFW/firewalld.

So let's say you have two servers with these microservices using the internal private network from your favorite provider:

VPS1 (ip = 10.0.1.50)

FooBarService:1337
BarFooService:7331

VPS2 (ip = 10.0.1.51)

AnotherMicroService:9999

Now both VPS's can access each other's services by simply calling the ip + port.

Good luck.


问:
I can't upload a JPG image in my form
I use Symfony 3.2 and I build my form with file field which accepts only jpg, jpeg, gif and png extensions. Unfortunately, I can't upload any image with .jpg extension, although I mentioned the image/jpeg mime-type in allowed mime-types. The error "mimeTypesMessage" is displaying.

I'd be grateful if you took a look. Thanks

ImageType.php

```<code>/**
 * Defines the form used to create and manipulate images.
 *
 * @author XXX
 */
class ImageType extends AbstractType {

    /**
     * Main function of the class.
     *
     * @param FormBuilderInterface $builder
     * @param array $options
     */
    public function buildForm(FormBuilderInterface $builder, array $options) {

        $builder
                ->add('title', TextType::class, array(
                    'label' => 'Tytuł',
                    'constraints' => [
                        new Length([
                            'min' => 3,
                            'max' => 128,
                            'minMessage' => 'Tytuł musi posiadać minimum 3 znaki.',
                            'maxMessage' => 'Tytuł może zawierać maksymalnie 128 znaków.',
                        ]),
                    ],
                ))
                ->add('file', FileType::class, array(
//                    'mapped' => false,
                    'constraints' => [
                        new Image([
                            'maxSize' => '2M',
                            'maxSizeMessage' => 'Maksymalny rozmiar obrazka wynosi 2 MB. Wgraj mniejsze zdjęcie.',
                            'mimeTypes' => ['image/jpeg,', 'image/pjpeg', 'image/png', 'image/gif'],
                            'mimeTypesMessage' => 'Nieobsługiwany format pliku. Dozwolone rozszerzenia obrazków to: jpg, gif, png.',
                            'uploadErrorMessage' => 'Dodawanie obrazka zakończyło się niepowodzeniem.',

                            'minWidth' => 1000,
                            'minWidthMessage' => 'Minimalna szerokość obrazka to px',
                            'minHeight' => 1000,
                            'minHeightMessage' => 'Minimalna wysokość obrazka to px',
                            'maxWidth' => 1100,
                            'maxWidthMessage' => 'Maksymalna szerokość obrazka to px',
                            'maxHeight' => 1100,
                            'maxHeightMessage' => 'Maksymalna wysokość obrazka to px',
                        ]),
                    ],
                ))
                ->add('source', TextType::class, array(
                    'label' => 'Źródło',
                    'required' => false,
                ))
                ->add('reset', ResetType::class, array(
                    'label' => 'Reset'
                ))
                ->add('submit', SubmitType::class, array(
                    'label' => 'Zapisz'
                ))
                ;
    }

    /**
     * Configures form options.
     *
     * @param OptionsResolver $resolver
     */
    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults([
            'data_class' => Object::class,
        ]);
    }

}
</code>```

ObjectController.php

```<code>public function addImageAction(Request $request) {

    $object = new Object();

    // create form with multiple buttons
    $form = $this->createForm(ImageType::class, $object)
            ->add('saveAndCreateNew', SubmitType::class);

    // fill the object by values from the form (if submitted)
    $form->handleRequest($request);

    if ($form->isSubmitted() && $form->isValid()) {

        $file = $object->getFile();

        if(!$file->getError()) {
            $ext = $file->guessExtension();
            if ($ext == 'jpeg') {
                $ext = 'jpg';
            }

            $object->setName(md5(uniqid()) . '.' . $ext );
            $object->setFile($file->getClientOriginalName());
            $object->setFormat($file->getMimeType());

        } else {
            $this->addFlash('danger', 'Wystąpił nieznany błąd w przesyłaniu formularza. Spróbuj ponownie.');
            return $this->redirectToRoute('app_object_addimage');
        }

// rest of form handling...
</code>```

What is strange to me, image/jpeg mime-type isn't listed on the IANA page (http://www.iana.org/assignments/media-types/media-types.xhtml). Unfortunately, I haven't found the issue solution on the Internet yet.

答:
I've got the same issue with $file->guessExtension() and cannot find any solution, same as you.

Until I found the $file->guessClientExtension() function here and it works for me after swapped with Symfony 3.3.10.

My code example:

```<code>$imageForm->add('image', FileType::class, array(
    'label' => false,
    'attr' => array(
        'accept' => "image/*",
        'multiple' => "multiple",
    ),
    'required' => true,
    'multiple' => true,
));

$imageForm->handleRequest($request);

if ($imageForm->isSubmitted() && $imageForm->isValid()) {
    $model = $imageForm->getData();
    $files = $model->getImage();

    foreach($files as $file) {
        $newFileName = $someGeneratedIdentifier.'.'.$file->guessClientExtension();

        $file->move(
            $this->getParameter('directory').'/'.$someSubdirectory,
            $newFileName
        );

...
</code>```

Title: I can't upload a JPG image in my form

Body:
I use Symfony 3.2 and I build my form with file field which accepts only jpg, jpeg, gif and png extensions. Unfortunately, I can't upload any image with .jpg extension, although I mentioned the image/jpeg mime-type in allowed mime-types. The error "mimeTypesMessage" is displaying.

I'd be grateful if you took a look. Thanks

ImageType.php

/**
 * Defines the form used to create and manipulate images.
 *
 * @author XXX
 */
class ImageType extends AbstractType {

    /**
     * Main function of the class.
     *
     * @param FormBuilderInterface $builder
     * @param array $options
     */
    public function buildForm(FormBuilderInterface $builder, array $options) {

        $builder
                ->add('title', TextType::class, array(
                    'label' => 'Tytuł',
                    'constraints' => [
                        new Length([
                            'min' => 3,
                            'max' => 128,
                            'minMessage' => 'Tytuł musi posiadać minimum 3 znaki.',
                            'maxMessage' => 'Tytuł może zawierać maksymalnie 128 znaków.',
                        ]),
                    ],
                ))
                ->add('file', FileType::class, array(
//                    'mapped' => false,
                    'constraints' => [
                        new Image([
                            'maxSize' => '2M',
                            'maxSizeMessage' => 'Maksymalny rozmiar obrazka wynosi 2 MB. Wgraj mniejsze zdjęcie.',
                            'mimeTypes' => ['image/jpeg,', 'image/pjpeg', 'image/png', 'image/gif'],
                            'mimeTypesMessage' => 'Nieobsługiwany format pliku. Dozwolone rozszerzenia obrazków to: jpg, gif, png.',
                            'uploadErrorMessage' => 'Dodawanie obrazka zakończyło się niepowodzeniem.',

                            'minWidth' => 1000,
                            'minWidthMessage' => 'Minimalna szerokość obrazka to px',
                            'minHeight' => 1000,
                            'minHeightMessage' => 'Minimalna wysokość obrazka to px',
                            'maxWidth' => 1100,
                            'maxWidthMessage' => 'Maksymalna szerokość obrazka to px',
                            'maxHeight' => 1100,
                            'maxHeightMessage' => 'Maksymalna wysokość obrazka to px',
                        ]),
                    ],
                ))
                ->add('source', TextType::class, array(
                    'label' => 'Źródło',
                    'required' => false,
                ))
                ->add('reset', ResetType::class, array(
                    'label' => 'Reset'
                ))
                ->add('submit', SubmitType::class, array(
                    'label' => 'Zapisz'
                ))
                ;
    }

    /**
     * Configures form options.
     *
     * @param OptionsResolver $resolver
     */
    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults([
            'data_class' => Object::class,
        ]);
    }

}

ObjectController.php

public function addImageAction(Request $request) {

    $object = new Object();

    // create form with multiple buttons
    $form = $this->createForm(ImageType::class, $object)
            ->add('saveAndCreateNew', SubmitType::class);

    // fill the object by values from the form (if submitted)
    $form->handleRequest($request);

    if ($form->isSubmitted() && $form->isValid()) {

        $file = $object->getFile();

        if(!$file->getError()) {
            $ext = $file->guessExtension();
            if ($ext == 'jpeg') {
                $ext = 'jpg';
            }

            $object->setName(md5(uniqid()) . '.' . $ext );
            $object->setFile($file->getClientOriginalName());
            $object->setFormat($file->getMimeType());

        } else {
            $this->addFlash('danger', 'Wystąpił nieznany błąd w przesyłaniu formularza. Spróbuj ponownie.');
            return $this->redirectToRoute('app_object_addimage');
        }

// rest of form handling...

What is strange to me, image/jpeg mime-type isn't listed on the IANA page (http://www.iana.org/assignments/media-types/media-types.xhtml). Unfortunately, I haven't found the issue solution on the Internet yet.

Body:
I've got the same issue with $file->guessExtension() and cannot find any solution, same as you.

Until I found the $file->guessClientExtension() function here and it works for me after swapped with Symfony 3.3.10.

My code example:

$imageForm->add('image', FileType::class, array(
    'label' => false,
    'attr' => array(
        'accept' => "image/*",
        'multiple' => "multiple",
    ),
    'required' => true,
    'multiple' => true,
));

$imageForm->handleRequest($request);

if ($imageForm->isSubmitted() && $imageForm->isValid()) {
    $model = $imageForm->getData();
    $files = $model->getImage();

    foreach($files as $file) {
        $newFileName = $someGeneratedIdentifier.'.'.$file->guessClientExtension();

        $file->move(
            $this->getParameter('directory').'/'.$someSubdirectory,
            $newFileName
        );

...


问:
Swift Open Link in Safari
I am currently opening the link in my app in a WebView, but I'm looking for an option to open the link in Safari instead.

答:
since iOS 10 you should use:</p>
```<code>guard let url = URL(string: linkUrlString) else {
    return
}

if #available(iOS 10.0, *) {
    UIApplication.shared.open(url, options: [:], completionHandler: nil)
} else {
    UIApplication.shared.openURL(url)
}
</code>```

ContentLicense: CC BY-SA 4.0

Title: Swift Open Link in Safari

Body:
since iOS 10 you should use:

guard let url = URL(string: linkUrlString) else {
    return
}

if #available(iOS 10.0, *) {
    UIApplication.shared.open(url, options: [:], completionHandler: nil)
} else {
    UIApplication.shared.openURL(url)
}


问:
Deploy eureka server in PCF : Getting 404 after cf push to Cloud foundry
My manifest.yml file is as follows

---
   applications:
   - name: eureka-test-service
   memory: 1024M
   instances: 1
   host: eureka-test-service
   path: target/test-eureka-service-0.0.1-SNAPSHOT.jar
   buildpack: https://github.com/cloudfoundry/java-buildpack
   env:
    SPRING_PROFILES_ACTIVE : cloud

And my application.properties

```<code>`server.port=8761
eureka.instance.hostname=localhost
eureka.client.register-with-eureka=false
eureka.client.fetchRegistry=false
eureka.client.serviceUrl.defaultZone=http://${eureka.instance.hostname}:${server.port}/eureka/`
</code>```

When I push the Eureka server to PCF via cf push , I get the app running successfully with URL in the space in PCF . But on hitting the URL I get a XML and https:/eureka gives 404

答:
It worked after I gave the proper property

```<code>eureka.instance.hostname=${vcap.application.uris[0]}
eureka.instance.non-secure-port=80
eureka.instance.metadata-map.instanceId=${vcap.application.instance_id}
eureka.instance.leaseRenewalIntervalInSeconds = 5
eureka.client.registryFetchIntervalSeconds = 5
#eureka.client.serviceUrl.defaultZone=${vcap.services.eureka-service.credentials.uri}/eureka/
eureka.client.service-url.defaultZone=${vcap.services.eureka-service.credentials.uri:http://localhost:8761}/eureka/
</code>```

This link https://github.com/making/cf-eureka-server is helpful!

Body:
My manifest.yml file is as follows

---
   applications:
   - name: eureka-test-service
   memory: 1024M
   instances: 1
   host: eureka-test-service
   path: target/test-eureka-service-0.0.1-SNAPSHOT.jar
   buildpack: https://github.com/cloudfoundry/java-buildpack
   env:
    SPRING_PROFILES_ACTIVE : cloud

And my application.properties

`server.port=8761
eureka.instance.hostname=localhost
eureka.client.register-with-eureka=false
eureka.client.fetchRegistry=false
eureka.client.serviceUrl.defaultZone=http://${eureka.instance.hostname}:${server.port}/eureka/`

When I push the Eureka server to PCF via cf push , I get the app running successfully with URL in the space in PCF . But on hitting the URL I get a XML and https:/eureka gives 404

Body:
It worked after I gave the proper property

eureka.instance.hostname=${vcap.application.uris[0]}
eureka.instance.non-secure-port=80
eureka.instance.metadata-map.instanceId=${vcap.application.instance_id}
eureka.instance.leaseRenewalIntervalInSeconds = 5
eureka.client.registryFetchIntervalSeconds = 5
#eureka.client.serviceUrl.defaultZone=${vcap.services.eureka-service.credentials.uri}/eureka/
eureka.client.service-url.defaultZone=${vcap.services.eureka-service.credentials.uri:http://localhost:8761}/eureka/

This link https://github.com/making/cf-eureka-server is helpful!


问:
Where did all the text go on mobile site? Elements not appearing on iPhone.
I have created a website for my dad as a favour for putting me through design school. After uploading it to the network hosting site that my dad uses I discovered that when opening the site on my iPhone, all the text (or most of it) completely disappears. I am not sure what is doing this because when I test the site through Chrome Developer Tools, JsFiddle, etc it appears to be fine. The site is pretty simple so I am using Flexbox for the layout. Let me know if you need any other details.

I am not sure what is going on and would very much appreciate it if someone could take a poke around and point me in the right direction. I am providing a JsFiddle that includes the homepage html and the relevant CSS as well as posting it here. Thanks.

https://jsfiddle.net/ericvnwk/vfnejmw7/2/

The HTML:

```<code><title>
  Fairfield Tree Nurseries Inc.</title>
<script src="https://use.typekit.net/hlp7xgg.js"></script>
<script>
  try {
    Typekit.load({
      async: true
    });
  } catch (e) {}

</script>

<body>
  <div class="header">
    <img class="logo" src="https://s1.postimg.org/1ic483yqhr/logo.png" alt="Fairfield Tree Nurseries Inc." width="80px" height="80px">
    <div class="title"><a href="index.html"> Fairfield Tree Nurseries Inc. </a>
</div>
    <nav class="navbar navtop">
      <ul>
        <li><a href="about.html">About</a></li>
        <li><a href="products.html">Products</a></li>
        <li><a href="shipping.html">Shipping</a></li>
        <li><a href="location.html">Location</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </div>

  <div class="header-border">
  </div>

  <div class="main">

    <div class="fw-content fw-top">
      <div class="fw-image">
        <img src="https://s1.postimg.org/1ic4840vnj/welcome.jpg" alt="Welcome to Fairfield Tree Nurseries">
      </div>
      <div class="cntr-type">
        <h2> Welcome to </h2>
        <h1> Fairfield Tree Nurseries </h1>
      </div>
    </div>

    <div class="arrow">
      <div class="down-arrow"></div>
    </div>

    <div class="fw-content below">
      <div class="fw-image">
        <img src="https://s1.postimg.org/1lvq5tqycf/about-home.jpg" alt="Welcome to Fairfield Tree Nurseries">
      </div>
      <div class="cntr-type">
        <h4 id="green"> We are a wholesale tree nursery producing field <br> grown nursery stock in the Lower Fraser Valley <br> community of Chilliwack, British Columbia. </h4>
        <div class="btn" id="green-btn">
          <a href="about.html">
            <h3>Learn More</h3></a>
        </div>
      </div>
    </div>

    <div class="fw-content">
      <div class="fw-image">
        <img src="https://s1.postimg.org/51y1xx3dpr/field-wide.jpg" alt="Field wide angle">
      </div>
      <div class="cntr-type up">
        <h4 class="shadow" id="white"> We offer an expanded product line to include a wide <br> range of field grown grafted conifers, specialty broadleaf <br> evergreen/deciduous shrubs and specimen plant material. </h4>
        <div class="btn btn-shadow" id="white-btn">
          <a href="products.html">
            <h3 class="">Discover More</h3></a>
        </div>
      </div>
    </div>

    <div class="hw-content hide">
      <div class="hw-left">
        <div class="cntr-type cntr-type-special">
          <h4 id="white"> Our products can be found throughout <br> North America and we pride ourselves in <br> providing expert service and support to all <br> of our clients, wherever they are. </h4>
          <div class="btn" id="white-btn">
            <a href="shipping.html">
              <h3>Shipping Info</h3></a>
          </div>
        </div>
      </div>
      <div class="hw-right">
        <img src="https://s1.postimg.org/2lbtizus33/leaves-sky-wide.jpg">
        <div class="cntr-type cntr-type-special">
          <h4 id="green"> We are located in the Lower <br> Fraser Valley community of Chilliwack, <br> British Columbia, Canada. </h4>
          <div class="btn" id="green-btn">
            <a href="location.html">
              <h3>View Map</h3></a>
          </div>
        </div>
      </div>
    </div>

    <div class="fw-content hidden-content empty bkg-green">
      <div class="cntr-type">
        <h4 id="white"> Our products can be found throughout <br> North America and we pride ourselves in <br> providing expert service and support to all <br> of our clients, wherever they are. </h4>
        <div class="btn" id="white-btn">
          <a href="shipping.html">
            <h3>Shipping Info</h3></a>
        </div>
      </div>
    </div>

    <div class="fw-content hidden-content">
      <div class="fw-image">
        <img src="https://s1.postimg.org/2lbtizus33/leaves-sky-wide.jpg">
      </div>
      <div class="cntr-type">
        <h4 id="green"> We are located in the Lower <br> Fraser Valley community of Chilliwack, <br> British Columbia, Canada. </h4>
        <div class="btn" id="green-btn">
          <a href="location.html">
            <h3>View Map</h3></a>
        </div>
      </div>
    </div>

    <div class="fw-content empty">
      <div class="cntr-type">
        <h4 id="green"> For more information or to place an order please contact us, <br> we would love to hear from you. </h4>
        <div class="btn" id="green-btn">
          <a href="contact.html">
            <h3>Contact Us</h3></a>
        </div>
      </div>
    </div>

  </div>

  <div class="footer">
    <div class="footer-main">
      <img src="https://s1.postimg.org/8ax5ukoq6n/logo-white.png">
      <!--<div class="logo-footer">
          </div> -->
      <div class="title" style="color: white;"><a href="index.html"> Fairfield Tree Nurseries </a></div>
      <nav class="navbar navfoot">
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="products.html">Products</a></li>
          <li><a href="shipping.html">Shipping</a></li>
          <li><a href="location.html">Location</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </div>
  </div>
  <div class="copyright">
    <p> © 2017 Fairfield Tree Nurseries Inc. All rights reserved.
  </div>
</body>
</code>```

And the CSS:

```<code>   body {
  margin: 0 auto;
  font-family: "proxima-nova-alt", sans-serif;
  text-align: center;
  position: relative;
  color: #707070;
}

/*================ NAV & HEADER STYLES + FOOTER ==================*/

.header {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  top: 0;
  height: 120px;
  padding: 15px 40px 15px 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.header-border {
  background-color: #009948;
  height: 2px;
  width: 100%;
}

.title {
  font-size: 24px;
  font-weight: 300;
  color: #009948;
  padding-left: 20px;
  text-align: left;
}

.navbar {
  margin-left: auto;
}

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

.navbar li {
  display: inline-block;
  font-weight: 400;
  font-size: 16px;
  padding-left: 4vw;
}

.navbar a {
  text-decoration: none;
  color: #969696;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: .3s color;
}

.navbar a:hover {
  color: #009948;
}

.footer {
  width: 100%;
  max-width: 1200px;
  background-color: #333;
}

.footer-main {
  height: 200px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 20px 80px 0px 80px;
  margin: 0 auto;
}

.footer h6 a {
  transition: .3s color;
}

.footer h6 a:hover {
  color: #009948;
}

.copyright {
  height: 80px;
  padding: 20px;
  color: #505050;
  background-color: rgba(10, 10, 10, .5);
  padding: 40px 80px 10px 80px;
}

.copyright p {
  text-align: left;
  font-size: 16px;
  letter-spacing: 1px;
  font-weight: 400;
  max-width: 1500px;
  margin: 0 auto;
}

.navfoot a {
  color: #707070;
  transition: .3s color;
}

.navfoot a:hover {
  color: white;
}

/*================ PAGES STYLES ===================*/

.main {
  max-width: 1500px;
  margin: 0 auto;
  overflow: hidden;
}

/*=============== Home PAGE ================*/

.fw-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 600px;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 3;
}

.fw-top {
  border-top: 2px solid white;
}

.below {
  margin-top: -30px;
  position: relative;
  z-index: 1;
}

.fw-image img {
  max-height: 600px;
}

.hw-content {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 600px;
  position: relative;
  background-color: #009948;
  max-width: 1500px;
  margin: 0 auto;
  margin-top: -2px;
}

.hw-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50%;
}

.hw-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 50%;
  margin-left: auto;
}

.hw-right img {
  height: 600px;
}

.cntr-type {
  position: absolute;
  left: auto;
}

.up {
  margin-top: -60px;
}

.arrow {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
}

.down-arrow {
  margin: -2px;
  width: 0;
  height: 0;
  border-right: 30px solid transparent;
  border-left: 30px solid transparent;
  border-top: 30px solid #009948;
}

/*================ TEXT STYLES ===================*/

h1 {
  font-size: 60px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0;
}

h2 {
  margin: 0;
  font-size: 36px;
  font-weight: 100;
  letter-spacing: 2px;
  color: white;
  text-transform: uppercase;
}

h3 {
  font-size: 12px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0;
}

h4 {
  font-size: 24px;
  line-height: 36px;
  font-weight: 300;
  letter-spacing: 0.1px;
}

h5 {
  text-align: left;
  font-size: 24px;
  font-weight: 400;
  color: #009948;
  margin: 10px 0 0 0;
  letter-spacing: 1px;
}

h6 {
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: left;
  margin: 20px 0 0 0;
}

p {
  font-size: 20px;
  line-height: 28px;
  font-weight: 300;
  letter-spacing: 0.1px;
  text-align: left;
}

a {
  text-decoration: none;
  color: inherit;
}

.currentlink a {
  color: #009948;
}

#green {
  color: #009948;
}

#grey {
  color: #2f2f2f;
}

#white {
  color: #fff;
}

.shadow {
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

/*================ BUTTON STYLES ====================*/

.btn {
  width: 150px;
  height: 30px;
  margin: auto;
  border: 2px solid;
  border-radius: 20px;
  line-height: 30px;
}

.btn a {
  text-decoration: none;
}

#green-btn {
  background-color: rgba(0, 153, 72, 0);
  border-color: #009948;
  color: #009948;
  transition: .5s background-color, color;
  margin-bottom: 15px;
}

#white-btn {
  background-color: rgba(255, 255, 255, 0);
  border-color: #fff;
  color: #fff;
  transition: .5s background-color, color;
}

#green-btn:hover {
  border-color: #009948;
  background-color: rgba(0, 153, 72, 1);
  color: #fff;
}

#white-btn:hover {
  border-color: #fff;
  background-color: rgba(255, 255, 255, 1);
  color: #009948;
  text-shadow: none;
}

.btn-shadow {
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

/*================================
  RESPONSIVE Styling
  ================================*/

@media screen and (min-width:500px) {
  .hidden-content {
    display: none;
  }
}

@media screen and (max-width:500px) {
  .header {
    flex-direction: column;
    height: inherit;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
  }
  .title {
    text-align: center;
    width: 100%;
    padding: 0;
    margin-top: 10px;
  }
  .navbar {
    margin: 15px 0 0 0;
    width: 100%;
    padding: 0;
  }
  .navbar ul {
    display: flex;
    flex-direction: column;
  }
  .navbar li {
    font-weight: 400;
    padding: 7.5px 0 7.5px 0;
    border-top: 2px solid #009948;
    width: 100%;
  }
  .navbar a {
    text-decoration: none;
    width: inherit;
    margin: 100px;
  }
  .navbar a:active {
    background-color: white;
    color: #009948;
  }
  .navtop {
    padding: 10px 0 0 0;
  }
  .main {
    overflow: hidden;
  }
  .arrow {
    margin-top: -4px;
  }
  .cntr-type {
    padding: 0 5%;
  }
  .up {
    margin-top: 0px;
  }
  .btn {
    width: 120px;
    height: 30px;
    margin: auto;
    border: 2px solid;
    border-radius: 20px;
    line-height: 30px;
  }
  .btn-shadow {
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    box-shadow: inset 2px 2px 40px rgba(255, 255, 255, 0.5);
  }
  .hide {
    display: none;
  }
  .hidden-content {
    display: flex;
  }
  .footer {
    flex-direction: column;
    justify-content: center;
    height: inherit;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 5px;
  }
  .footer-main {
    display: flex;
    flex-direction: column;
    padding: 30px 0 0 0;
    height: inherit;
  }
  .navfoot {
    background-color: #707070;
    padding: 0px;
  }
  .navfoot li {
    border-color: #333;
  }
  .navfoot a {
    color: #333;
  }
  .copyright {
    padding: 20px 0 0 0;
  }
  .copyright p {
    width: 80%;
  }
  .questions {
    padding-top: 0;
  }
  .question-box {
    margin-top: 30px;
  }
  /*==============FONT STYLES==============*/
  h1 {
    font-size: 36px;
  }
  h2 {
    font-size: 24px;
  }
  h3 {
    font-size: 10px;
    font-weight: 400;
  }
  h4 {
    font-size: 16px;
    line-height: 24px;
  }
  br {
    display: none;
  }
  p {
    font-size: 18px;
  }
}

@media screen and (max-width:1024px) and (min-width:500px) {
  .header {
    flex-direction: column;
    padding: 20px 0 0 0;
    height: inherit;
  }
  .navbar {
    margin: 0;
  }
  .navtop {
    padding: 10px 0 0 0;
  }
  .title {
    margin: 10px 0 10px 0;
  }
}

@media screen and (max-width:1024px) {
  .fw-content {
    height: inherit;
    overflow: hidden;
  }
  .fw-image {
    height: inherit;
  }
  .fw-image img {
    width: auto;
    height: 45vh;
    display: flex;
    justify-content: space-between;
  }
  .fw-top {
    border: none;
  }
  .cntr-type {
    padding: 0 10%;
  }
  .cntr-type-special {
    padding: 0;
    width: 300px;
  }
  .cntr-type-special h4 {
    font-size: 20px;
    line-height: 32px;
  }
  .empty {
    height: 60vh;
  }
  .empty-s {
    height: 40vh;
  }
  h4 br {
    display: none;
  }
  .question-mark {
    margin-top: -30px;
  }
}

@media screen and (min-width: 501px) {
  .navtop {
    padding: 10px 0 10px 0;
  }
}

@media screen and (max-width: 700px) {
  .bkg-green {
    background-color: #009948;
  }
  .hw-contact .contact-info {
    display: none;
  }
  .contact-info {
    width: 75%;
  }
  .fw-contact {
    padding: 15px 0 25px 0;
  }
  .contact-form {
    width: 100%;
  }
  .contact-form form {
    width: 90%;
  }
}

@media screen and (min-width:700px) {
  .hidden-content2 {
    display: none;
  }
}

@media screen and (min-width:1240px) {
  .header {
    max-width: none;
  }
  .footer {
    max-width: none;
  }
}

@media screen and (min-width:1580px) {
  .header {
    padding: 15px 0 15px 0;
    max-width: 1500px;
  }
  .footer-main {
    max-width: 1500px;
  }
  .copyright {}
}
</code>```

答: You are adding the hidden-content and hide classes which have display: none in them.

Body:
I have created a website for my dad as a favour for putting me through design school. After uploading it to the network hosting site that my dad uses I discovered that when opening the site on my iPhone, all the text (or most of it) completely disappears. I am not sure what is doing this because when I test the site through Chrome Developer Tools, JsFiddle, etc it appears to be fine. The site is pretty simple so I am using Flexbox for the layout. Let me know if you need any other details.

I am not sure what is going on and would very much appreciate it if someone could take a poke around and point me in the right direction. I am providing a JsFiddle that includes the homepage html and the relevant CSS as well as posting it here. Thanks.

https://jsfiddle.net/ericvnwk/vfnejmw7/2/

The HTML:

<title>
  Fairfield Tree Nurseries Inc.</title>

 Fairfield Tree Nurseries Inc.

About

Products

Shipping

Location

Contact

 Welcome to

 Fairfield Tree Nurseries

 We are a wholesale tree nursery producing field
 grown nursery stock in the Lower Fraser Valley
 community of Chilliwack, British Columbia.

Learn More

 We offer an expanded product line to include a wide
 range of field grown grafted conifers, specialty broadleaf
 evergreen/deciduous shrubs and specimen plant material.

Discover More

 Our products can be found throughout
 North America and we pride ourselves in
 providing expert service and support to all
 of our clients, wherever they are.

Shipping Info

 We are located in the Lower
 Fraser Valley community of Chilliwack,
 British Columbia, Canada.

View Map

 Our products can be found throughout
 North America and we pride ourselves in
 providing expert service and support to all
 of our clients, wherever they are.

Shipping Info

 We are located in the Lower
 Fraser Valley community of Chilliwack,
 British Columbia, Canada.

View Map

 For more information or to place an order please contact us,
 we would love to hear from you.

Contact Us

 Fairfield Tree Nurseries

Home

About

Products

Shipping

Location

Contact

 © 2017 Fairfield Tree Nurseries Inc. All rights reserved.

And the CSS:

   body {
  margin: 0 auto;
  font-family: "proxima-nova-alt", sans-serif;
  text-align: center;
  position: relative;
  color: #707070;
}

/*================ NAV & HEADER STYLES + FOOTER ==================*/

.header {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  top: 0;
  height: 120px;
  padding: 15px 40px 15px 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.header-border {
  background-color: #009948;
  height: 2px;
  width: 100%;
}

.title {
  font-size: 24px;
  font-weight: 300;
  color: #009948;
  padding-left: 20px;
  text-align: left;
}

.navbar {
  margin-left: auto;
}

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

.navbar li {
  display: inline-block;
  font-weight: 400;
  font-size: 16px;
  padding-left: 4vw;
}

.navbar a {
  text-decoration: none;
  color: #969696;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: .3s color;
}

.navbar a:hover {
  color: #009948;
}

.footer {
  width: 100%;
  max-width: 1200px;
  background-color: #333;
}

.footer-main {
  height: 200px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: 20px 80px 0px 80px;
  margin: 0 auto;
}

.footer h6 a {
  transition: .3s color;
}

.footer h6 a:hover {
  color: #009948;
}

.copyright {
  height: 80px;
  padding: 20px;
  color: #505050;
  background-color: rgba(10, 10, 10, .5);
  padding: 40px 80px 10px 80px;
}

.copyright p {
  text-align: left;
  font-size: 16px;
  letter-spacing: 1px;
  font-weight: 400;
  max-width: 1500px;
  margin: 0 auto;
}

.navfoot a {
  color: #707070;
  transition: .3s color;
}

.navfoot a:hover {
  color: white;
}

/*================ PAGES STYLES ===================*/

.main {
  max-width: 1500px;
  margin: 0 auto;
  overflow: hidden;
}

/*=============== Home PAGE ================*/

.fw-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 600px;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 3;
}

.fw-top {
  border-top: 2px solid white;
}

.below {
  margin-top: -30px;
  position: relative;
  z-index: 1;
}

.fw-image img {
  max-height: 600px;
}

.hw-content {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 600px;
  position: relative;
  background-color: #009948;
  max-width: 1500px;
  margin: 0 auto;
  margin-top: -2px;
}

.hw-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50%;
}

.hw-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 50%;
  margin-left: auto;
}

.hw-right img {
  height: 600px;
}

.cntr-type {
  position: absolute;
  left: auto;
}

.up {
  margin-top: -60px;
}

.arrow {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
}

.down-arrow {
  margin: -2px;
  width: 0;
  height: 0;
  border-right: 30px solid transparent;
  border-left: 30px solid transparent;
  border-top: 30px solid #009948;
}

/*================ TEXT STYLES ===================*/

h1 {
  font-size: 60px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0;
}

h2 {
  margin: 0;
  font-size: 36px;
  font-weight: 100;
  letter-spacing: 2px;
  color: white;
  text-transform: uppercase;
}

h3 {
  font-size: 12px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0;
}

h4 {
  font-size: 24px;
  line-height: 36px;
  font-weight: 300;
  letter-spacing: 0.1px;
}

h5 {
  text-align: left;
  font-size: 24px;
  font-weight: 400;
  color: #009948;
  margin: 10px 0 0 0;
  letter-spacing: 1px;
}

h6 {
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: left;
  margin: 20px 0 0 0;
}

p {
  font-size: 20px;
  line-height: 28px;
  font-weight: 300;
  letter-spacing: 0.1px;
  text-align: left;
}

a {
  text-decoration: none;
  color: inherit;
}

.currentlink a {
  color: #009948;
}

#green {
  color: #009948;
}

#grey {
  color: #2f2f2f;
}

#white {
  color: #fff;
}

.shadow {
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

/*================ BUTTON STYLES ====================*/

.btn {
  width: 150px;
  height: 30px;
  margin: auto;
  border: 2px solid;
  border-radius: 20px;
  line-height: 30px;
}

.btn a {
  text-decoration: none;
}

#green-btn {
  background-color: rgba(0, 153, 72, 0);
  border-color: #009948;
  color: #009948;
  transition: .5s background-color, color;
  margin-bottom: 15px;
}

#white-btn {
  background-color: rgba(255, 255, 255, 0);
  border-color: #fff;
  color: #fff;
  transition: .5s background-color, color;
}

#green-btn:hover {
  border-color: #009948;
  background-color: rgba(0, 153, 72, 1);
  color: #fff;
}

#white-btn:hover {
  border-color: #fff;
  background-color: rgba(255, 255, 255, 1);
  color: #009948;
  text-shadow: none;
}

.btn-shadow {
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

/*================================
  RESPONSIVE Styling
  ================================*/

@media screen and (min-width:500px) {
  .hidden-content {
    display: none;
  }
}

@media screen and (max-width:500px) {
  .header {
    flex-direction: column;
    height: inherit;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
  }
  .title {
    text-align: center;
    width: 100%;
    padding: 0;
    margin-top: 10px;
  }
  .navbar {
    margin: 15px 0 0 0;
    width: 100%;
    padding: 0;
  }
  .navbar ul {
    display: flex;
    flex-direction: column;
  }
  .navbar li {
    font-weight: 400;
    padding: 7.5px 0 7.5px 0;
    border-top: 2px solid #009948;
    width: 100%;
  }
  .navbar a {
    text-decoration: none;
    width: inherit;
    margin: 100px;
  }
  .navbar a:active {
    background-color: white;
    color: #009948;
  }
  .navtop {
    padding: 10px 0 0 0;
  }
  .main {
    overflow: hidden;
  }
  .arrow {
    margin-top: -4px;
  }
  .cntr-type {
    padding: 0 5%;
  }
  .up {
    margin-top: 0px;
  }
  .btn {
    width: 120px;
    height: 30px;
    margin: auto;
    border: 2px solid;
    border-radius: 20px;
    line-height: 30px;
  }
  .btn-shadow {
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    box-shadow: inset 2px 2px 40px rgba(255, 255, 255, 0.5);
  }
  .hide {
    display: none;
  }
  .hidden-content {
    display: flex;
  }
  .footer {
    flex-direction: column;
    justify-content: center;
    height: inherit;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 5px;
  }
  .footer-main {
    display: flex;
    flex-direction: column;
    padding: 30px 0 0 0;
    height: inherit;
  }
  .navfoot {
    background-color: #707070;
    padding: 0px;
  }
  .navfoot li {
    border-color: #333;
  }
  .navfoot a {
    color: #333;
  }
  .copyright {
    padding: 20px 0 0 0;
  }
  .copyright p {
    width: 80%;
  }
  .questions {
    padding-top: 0;
  }
  .question-box {
    margin-top: 30px;
  }
  /*==============FONT STYLES==============*/
  h1 {
    font-size: 36px;
  }
  h2 {
    font-size: 24px;
  }
  h3 {
    font-size: 10px;
    font-weight: 400;
  }
  h4 {
    font-size: 16px;
    line-height: 24px;
  }
  br {
    display: none;
  }
  p {
    font-size: 18px;
  }
}

@media screen and (max-width:1024px) and (min-width:500px) {
  .header {
    flex-direction: column;
    padding: 20px 0 0 0;
    height: inherit;
  }
  .navbar {
    margin: 0;
  }
  .navtop {
    padding: 10px 0 0 0;
  }
  .title {
    margin: 10px 0 10px 0;
  }
}

@media screen and (max-width:1024px) {
  .fw-content {
    height: inherit;
    overflow: hidden;
  }
  .fw-image {
    height: inherit;
  }
  .fw-image img {
    width: auto;
    height: 45vh;
    display: flex;
    justify-content: space-between;
  }
  .fw-top {
    border: none;
  }
  .cntr-type {
    padding: 0 10%;
  }
  .cntr-type-special {
    padding: 0;
    width: 300px;
  }
  .cntr-type-special h4 {
    font-size: 20px;
    line-height: 32px;
  }
  .empty {
    height: 60vh;
  }
  .empty-s {
    height: 40vh;
  }
  h4 br {
    display: none;
  }
  .question-mark {
    margin-top: -30px;
  }
}

@media screen and (min-width: 501px) {
  .navtop {
    padding: 10px 0 10px 0;
  }
}

@media screen and (max-width: 700px) {
  .bkg-green {
    background-color: #009948;
  }
  .hw-contact .contact-info {
    display: none;
  }
  .contact-info {
    width: 75%;
  }
  .fw-contact {
    padding: 15px 0 25px 0;
  }
  .contact-form {
    width: 100%;
  }
  .contact-form form {
    width: 90%;
  }
}

@media screen and (min-width:700px) {
  .hidden-content2 {
    display: none;
  }
}

@media screen and (min-width:1240px) {
  .header {
    max-width: none;
  }
  .footer {
    max-width: none;
  }
}

@media screen and (min-width:1580px) {
  .header {
    padding: 15px 0 15px 0;
    max-width: 1500px;
  }
  .footer-main {
    max-width: 1500px;
  }
  .copyright {}
}


问:
Filtering data using RXJava2 Flowable
I am using Room and RxJava and I would like to use the power of the second to filter data coming from the first.

Let's say room is returning Users.

```<code>Flowable<List<User> getUsers()
</code>```

Then I wanted to filter users by age > 18 for example, so I performed the following :

```<code>userDao.getUsers()
.flatMap(listUser -> Flowable.fromIterable(listUser).filter(user -> user.age > 18))
.toList()
.toFlowable()
</code>```

Unfortunately this is not working.
My guess is that toList() is never finishing since onTerminated is never called by room.
So my question is : what am I doing wrong ? How can I filter my users and still have a Flowable at the end ?

Thanks

答:
Room will never call onComplete (and then the toList will never finish) but the inner flow built using fromIterable is finite and will trigger onComplete. So the toList and toFlowable should be called on the flow inside the flatMap</p>

```<code>userDao.getUsers()
.flatMap(listUser -> Flowable.fromIterable(listUser).filter(user -> user.age > 18).toList().toFlowable())
</code>```

Title: Filtering data using RXJava2 Flowable

Body:
I am using Room and RxJava and I would like to use the power of the second to filter data coming from the first.

Let's say room is returning Users.

Flowable<List<User> getUsers()

Then I wanted to filter users by age > 18 for example, so I performed the following :

userDao.getUsers()
.flatMap(listUser -> Flowable.fromIterable(listUser).filter(user -> user.age > 18))
.toList()
.toFlowable()

Unfortunately this is not working.
My guess is that toList() is never finishing since onTerminated is never called by room.
So my question is : what am I doing wrong ? How can I filter my users and still have a Flowable at the end ?

Thanks

Body:
Room will never call onComplete (and then the toList will never finish) but the inner flow built using fromIterable is finite and will trigger onComplete. So the toList and toFlowable should be called on the flow inside the flatMap

userDao.getUsers()
.flatMap(listUser -> Flowable.fromIterable(listUser).filter(user -> user.age > 18).toList().toFlowable())


问:
I want to highlight the countries in my openlayer map
I am very new to openlayers, I want to make some countries already selected (with some color filled on the selected areas) when i open my page. I am using the GML layer with kml file as input. But still it doesn't seems like a perfect solutions to me. I am assuming i already have kml file which contains the boundary coordinates.
Can some one help me to find this solution? if this is not the correct way please suggest me. I highly appreciate for any suggestions. Thanks in advance.</p>

答: This example select some areas on mouse over. Maybe looking the source you can change the behaviour to select some areas on load the map.</p>


问:
Adding the word Null to a CSV file
My query grabs data and puts it into a CSV file. As you can see below I have added a mapping to say  if any fields equal to 1970-01-01 00:00:00 put it to null before writing to the CSV.

However I am getting errors when I do this mapping.

My Code:

```<code>from datetime import datetime
import csv

csv_file = 'File_' + str(datetime.now().strftime('%Y_%m_%d - %H.%M.%S')) + '.csv'

header_names = { 'VT': 'Side',  'NCR': 'ExTime',  'N': 'Name', 'DT': 'Party', ' RD ': 'Period', ‘DATE’:’Date’}

with open(csv_file, 'w', newline='') as f:
    w = csv.DictWriter(f, fieldnames=header_names.keys(), restval='', extrasaction='ignore')
    w.writerow(header_names,)
    for doc in res['hits']['hits']:
        my_dict = doc['_source']

mapping = {0: "None",1: "yes", 6: "no", 9: "maybe", 100:"no/yes", 101: "no/maybe"}
VT1 = my_dict['VT']
my_dict['VT'] = mapping.get(int(VT1), VT1)

mapping1 = {0: "New", 1: "Cancel", 2: "Future"}
DT1 = my_dict['DT']
my_dict['DT'] = mapping1.get(int(DT1), DT1)

mapping2 = {1920-01-01 00:00:00: 'Null'}
PT1 = my_dict['DATE']
my_dict['DATE'] = mapping2.get(int(PT1), PT1)

w.writerow(my_dict)
</code>```

Error one:

```<code>mapping2 = {01/01/1970  00:00:00: ' '}
                  ^
SyntaxError: invalid token
</code>```

Error two

```<code>Traceback (most recent call last):
  File "C:/Users/rich/.PyCharmCE2017.2/config/scratches/CSV.py", in <module>
    my_dict['DATE'] = mapping12.get(int(PT1), PT1)
ValueError: invalid literal for int() with base 10: '1920-01-01 00:00:00'
</code>```

How am I able to say if the date equals to 1920-01-01 put the word Null?

答:
Your entry has no datatype.

If you're dealing with strings then it should be a string.

```<code>mapping2 = { "1920-01-01 00:00:00": "Null" }
PT1 = my_dict['DATE']
my_dict['DATE'] = mapping2.get( PT1, PT1 )
</code>```

Title: Adding the word Null to a CSV file

Body:
My query grabs data and puts it into a CSV file. As you can see below I have added a mapping to say  if any fields equal to 1970-01-01 00:00:00 put it to null before writing to the CSV.

However I am getting errors when I do this mapping.

My Code:

from datetime import datetime
import csv

csv_file = 'File_' + str(datetime.now().strftime('%Y_%m_%d - %H.%M.%S')) + '.csv'

header_names = { 'VT': 'Side',  'NCR': 'ExTime',  'N': 'Name', 'DT': 'Party', ' RD ': 'Period', ‘DATE’:’Date’}

with open(csv_file, 'w', newline='') as f:
    w = csv.DictWriter(f, fieldnames=header_names.keys(), restval='', extrasaction='ignore')
    w.writerow(header_names,)
    for doc in res['hits']['hits']:
        my_dict = doc['_source']

mapping = {0: "None",1: "yes", 6: "no", 9: "maybe", 100:"no/yes", 101: "no/maybe"}
VT1 = my_dict['VT']
my_dict['VT'] = mapping.get(int(VT1), VT1)

mapping1 = {0: "New", 1: "Cancel", 2: "Future"}
DT1 = my_dict['DT']
my_dict['DT'] = mapping1.get(int(DT1), DT1)

mapping2 = {1920-01-01 00:00:00: 'Null'}
PT1 = my_dict['DATE']
my_dict['DATE'] = mapping2.get(int(PT1), PT1)

w.writerow(my_dict)

Error one:

mapping2 = {01/01/1970  00:00:00: ' '}
                  ^
SyntaxError: invalid token

Error two

Traceback (most recent call last):
  File "C:/Users/rich/.PyCharmCE2017.2/config/scratches/CSV.py", in <module>
    my_dict['DATE'] = mapping12.get(int(PT1), PT1)
ValueError: invalid literal for int() with base 10: '1920-01-01 00:00:00'

How am I able to say if the date equals to 1920-01-01 put the word Null?

Body:
Your entry has no datatype.

If you're dealing with strings then it should be a string.

mapping2 = { "1920-01-01 00:00:00": "Null" }
PT1 = my_dict['DATE']
my_dict['DATE'] = mapping2.get( PT1, PT1 )