Web 开发问题汇总(四)

archives, web development

1.如何实现如下布局：两个元素A和B，其中A的宽度为包裹其内容，B则占用剩余的宽度？

A:A 元素利用 float 的包裹性，B 元素则利用 BFC。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<div class="container">
    <div class="right"></div>
    <div class="left"></div>
</div>

.container {
    width:600px;
    height:200px;
    border:1px solid;
}
.left {
    width:auto;
    height:200px;
    background:red;
    overflow:hidden;
}
.right {
    height:200px;
    width:200px;
    background:blue;
    float:left;
}

Reference:Expand a div to fill the remaining width

2.Meaning of ~ in import of scss files

A:

From documentation on a sass-loader#imports project,

webpack provides an advanced mechanism to resolve files. The sass-loader uses node-sass' custom importer feature to pass all queries to the webpack resolving engine. Thus you can import your Sass modules from node_modules. Just prepend them with a ~ to tell webpack that this is not a relative import

So if you have a file named foo.css and a module foo then you would use ~ if you want to include the module.

Reference:Meaning of ~ in import of scss files

3.为什么创建 Observable 时传入的函数签名不需要包含 this? 示例如下:

1
2
3
4
5
6
7
8
9
10
11
12
13

// API Document:
constructor(subscribe?: (this: Observable<T>, subscriber: Subscriber<T>) => TeardownLogic)

// Usage code:
const observable = new Observable(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  setTimeout(() => {
    subscriber.next(4);
    subscriber.complete();
  }, 1000);
});

A:Here this is a special syntax in Typescript. It specifies the type of the “this” the function expects. So here it just means it should be called by a Observable with the same Type T as the Subscriber.

It comes first in the parameter list. It is a fake parameter, and should invoked without it.

More info can be found Here.

Reference:Confused by Rxjs Observable constructor and ‘this’ argument

4.How to make a div take the remaining height?

A:

  1. Flex
  2. Absolute Positioning
  3. Table
  4. CSS3 cacl

Reference:How to make a div take the remaining height

5.Dynamic modal height based on content in Ionic4?

A:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

// Modal page template:
<div class="inner-content">
  <!-- Construct your view hierarchy here-->
</div>

// Present method:
async presentAutoHeightModal() {
  const modal = await this.modalController.create({
      component: AutoHeightModalPage,
      cssClass: 'auto-height'
    });

    return await modal.present();
}

// app.scss
ion-modal.auto-height {
    flex-direction: column;
    justify-content: flex-end;
    --height: auto;
    
    .ion-page {
        position: relative;
        display: block;
        contain: content;

        .inner-content {
            max-height: 80vh;
            overflow: auto;
            padding: 10px;
        }
    }
}

6.Invalid Host Header

A:通过外网访问本地的 ionic 开发服务时提示 Invalid Host Header，原因是 angular 默认会对 host 进行验证，所以我们可以通过传入 --disableHostCheck=true 来关闭验证，由于是 ionic 工程，我们传入的参数需要在 -- 之后，也就是类似如下命令: ionic serve --port 8080 -- --disableHostCheck=true.

ionic serve uses the Angular CLI. Use ng serve –help to list all Angular CLI options for serving your app. See the ng serve docs[1] for explanations. Options not listed below are considered advanced and can be passed to the Angular CLI using the – separator after the Ionic CLI arguments.

Reference:Ionic 4 angular - Invalid Host header error

Reference:

7.error: illegal character: ‘\ufeff’ in java

A:You probably have a Byte Order Marker (BOM) at the start of the file. You can use sed to remove it:

1

sed '1s/^.//' infile >> outfile

Reference:

8.Why super.clone can downcast to subclass?

A:

1

The method clone for class Object performs a specific cloning operation. First, if the class of this object does not implement the interface Cloneable, then a CloneNotSupportedException is thrown. Note that all arrays are considered to implement the interface Cloneable and that the return type of the clone method of an array type T[] is T[] where T is any reference or primitive type. Otherwise, this method creates a new instance of the class of this object and initializes all its fields with exactly the contents of the corresponding fields of this object, as if by assignment; the contents of the fields are not themselves cloned. Thus, this method performs a "shallow copy" of this object, not a "deep copy" operation.

Reference:

9.How to generate MetaModel classes with Spring Data JPA in eclipse?

A:

  1. add maven denpendency
1
2
3
4

<dependency>
  <groupId>org.hibernate</groupId>
  <artifactId>hibernate-jpamodelgen</artifactId>
</dependency>
  1. Maven > Update project

10.Use webroot plugin to obtain certificates

A:

1

$ certbot-auto certonly --webroot --webroot-path /var/lib/tomcat8/webapps/ROOT -d www.tenneshop.com --webroot-path /var/lib/tomcat8/apiapps/ROOT -d api.tenneshop.com

Reference:
* User Guide

11.flex 布局下怎样实现text-overflow: ellipsis 效果?

A:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

<div class="flex-parent">

   <div class="flex-child long-and-truncated">
       1. This is a long string that is OK to truncate please and thank you
   </div>

   <div class="flex-child short-and-fixed">
       <div></div>
       <div></div>
       <div></div>
   </div>

</div>

<div class="flex-parent has-child">

   <div class="flex-child long-and-truncated-with-child">
       <h2>2. This is a long string that is OK to truncate please and thank you</h2>
   </div>

   <div class="flex-child short-and-fixed">
       <div></div>
       <div></div>
       <div></div>
   </div>

</div>

<div class="flex-parent has-child">

   <div class="flex-child long-and-truncated-with-child-corrected">
       <h2>3. This is a long string that is OK to truncate please and thank you</h2>
   </div>

   <div class="flex-child short-and-fixed">
       <div></div>
       <div></div>
       <div></div>
   </div>

</div>

.flex-parent {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  padding: 10px;
  margin: 30px 0;
}
   
h2 {
  font-size: 1rem;
  font-weight: normal;
}
   
.long-and-truncated {
  -webkit-box-flex: 1;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
   
.short-and-fixed {
  white-space: nowrap;
}
   
.short-and-fixed>div {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: lightgreen;
  display: inline-block;
}
   
.long-and-truncated-with-child {
  -webkit-box-flex: 1;
  flex: 1;
}
   
.long-and-truncated-with-child h2 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
   
.long-and-truncated-with-child-corrected {
  -webkit-box-flex: 1;
  flex: 1;
  min-width: 0;
  /* or some value */
}
   
.long-and-truncated-with-child-corrected h2 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
   
body {
  padding: 40px;
}

Reference:

12.Disable Hypertext Application Language (HAL) in JSON?

A:spring.data.rest.default-media-type=application/json

Reference:

13.What is the speed of each preset option for network throttling?

A:

1
2
3
4
5
6
7
8
9

Preset,download(kb/s),upload(kb/s),RTT(ms)
GPRS,50,20,500
Regular 2G,250,50,300
Good 2G,450,150,150
Regular 3G,750,250,100
Good 3G, 1000,750,40
Regular 4G, 4000,3000,20
DSL 2000, 1000,5
WiFi 30000,150000,2

Reference:

14.Allocation failed - JavaScript heap out of memory

A:export NODE_OPTIONS=--max_old_space_size=8192

Reference:

15.How to Find JAVA_HOME

A: java -XshowSettings:properties -version

Reference: