Skip to content

Commit 2e0cef3

Browse files
paveloompaveloom
committed
Add a tree of pages called "Web development".
1 parent 7dc1b88 commit 2e0cef3

7 files changed

+158
-0
lines changed

‎content/notes/Web_development.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
+++
2+
title = "Web development"
3+
+++
4+
5+
Web development is the work involved in developing a website for the Internet.
6+
7+
## Tips
8+
9+
- [Disable vendor styling for `input[type="search"]` elements](@/notes/Web_development_Disable_vendor_styling_for_input_type_search_elements.md)
10+
- [External link Unicode symbols](@/notes/Web_development_External_link_Unicode_symbols.md)
11+
- [HTMLElement: blur() method](@/notes/Web_development_HTMLElement_blur_method.md)
12+
- [`rel="preconnect"`](@/notes/Web_development_rel_preconnect.md)
13+
- [Relative URL](@/notes/Web_development_Relative_URL.md)
14+
- [`-webkit-text-size-adjust`](@/notes/Web_development_-webkit-text-size-adjust.md)

‎content/notes/Web_development_-webkit-text-size-adjust.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
+++
2+
title = "Web development > -webkit-text-size-adjust"
3+
+++
4+
5+
Safari on iOS might scale text if it thinks the rendered content will be too small. Set `-webkit-text-size-adjust: 100%;` on `body` to bypass that behaviour.
6+
7+
## References
8+
9+
- [Stack Overflow: Some font-size's rendered larger on Safari (iPhone)](https://stackoverflow.com/questions/3226001/some-font-sizes-rendered-larger-on-safari-iphone)
10+
11+
## See also
12+
13+
- [Web development: Tips](@/notes/Web_development.md#Tips)

‎content/notes/Web_development_Disable_vendor_styling_for_input_type_search_elements.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
+++
2+
title = "Web development > Disable vendor styling for input[type=\"search\"] elements"
3+
+++
4+
5+
The following snippets should be added to a CSS stylesheet.
6+
7+
To remove the cancel button in Chrome and Safari, add
8+
9+
```css
10+
input[type="search"]::-webkit-search-cancel-button {
11+
appearance: none;
12+
}
13+
```
14+
15+
To remove Safari left inner padding under macOS or the magnifying glass on the left under iOS:
16+
17+
```css
18+
[type="search"]::-webkit-search-decoration {
19+
appearance: none;
20+
}
21+
```
22+
23+
## References
24+
25+
- [Stack Overflow: How do I remove all default Webkit search field styling?](https://stackoverflow.com/a/77190241)
26+
27+
## See also
28+
29+
- [Web development: Tips](@/notes/Web_development.md#Tips)

‎content/notes/Web_development_External_link_Unicode_symbols.md‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
+++
2+
title = "Web development > External link Unicode symbols"
3+
+++
4+
5+
There are a variety of Unicode symbols that can be used as symbols of an external link:
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+
Note that symbols can be rotated to achieve the necessary effect.
41+
42+
There is a [Unicode proposal for introduction of an external link symbol](https://www.unicode.org/L2/L2018/18303-external-link.pdf).
43+
44+
## References
45+
46+
- [miguelmota's gist](https://gist.github.com/miguelmota/322c89234d60de578f37d3c6d30f7e41)
47+
48+
## See also
49+
50+
- [Web development: Tips](@/notes/Web_development.md#Tips)

‎content/notes/Web_development_HTMLElement_blur_method.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
+++
2+
title = "Web development > HTMLElement: blur() method"
3+
+++
4+
5+
The `blur()` method makes the element lose keyboard focus.
6+
7+
To make the currently active element lose keyboard focus, run
8+
9+
```javascript
10+
document.activeElement.blur();
11+
```
12+
13+
## References
14+
15+
- [MDN Web Docs: HTMLElement: blur() method](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/blur)
16+
17+
## See also
18+
19+
- [Web development: Tips](@/notes/Web_development.md#Tips)

‎content/notes/Web_development_Relative_URL.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
+++
2+
title = "Web development > Relative URL"
3+
+++
4+
5+
To create a URL relative to the currently running script, use `document.currentScript.src` as follows:
6+
7+
```javascript
8+
const url = new URL(
9+
"./relative/path/to/file",
10+
document.currentScript.src
11+
);
12+
```
13+
14+
## References
15+
16+
- [MDN Web Docs: Resolving relative references to a URL](https://developer.mozilla.org/en-US/docs/Web/API/URL_API/Resolving_relative_references)
17+
18+
## See also
19+
20+
- [Web development: Tips](@/notes/Web_development.md#Tips)

‎content/notes/Web_development_rel_preconnect.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
+++
2+
title = "Web development > rel=\"preconnect\""
3+
+++
4+
5+
The `preconnect` keyword for the `rel` attribute of the `<link>` element allows one to create a connection to the origin early so as to speed up fetches to that origin in the near future.
6+
7+
## References
8+
9+
- [MDN Web Docs: `rel="preconnect"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel/preconnect)
10+
11+
## See also
12+
13+
- [Web development: Tips](@/notes/Web_development.md#Tips)

0 commit comments

Comments
 (0)