Skip to content

Commit b6d297a

Browse files
ui2codeui2code
committed
#22 [add] en_US version
1 parent e3c64b7 commit b6d297a

File tree

7 files changed

+983
-3
lines changed

7 files changed

+983
-3
lines changed

‎translations/en_US/01-global.md‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,54 @@
2828
2. [Comments](05-javascript.md#comments)
2929
3. [Variables](05-javascript.md#variables)
3030
4. [Performance](05-javascript.md#performance)
31+
32+
## Identation
33+
34+
The indentation style is using tab soft and the size of the indentation is 2.
35+
36+
```html
37+
<!-- Good -->
38+
<section>
39+
<h3 class="title"></h3>
40+
<p class="text"></p>
41+
</section>
42+
43+
<!-- Bad -->
44+
<section>
45+
<h3 class="title"></h3>
46+
<p class="text"></p>
47+
</section>
48+
```
49+
50+
```css
51+
/* Good */
52+
.item {
53+
background: red;
54+
color: white;
55+
}
56+
57+
/* Bad */
58+
.item {
59+
background: red;
60+
color: white;
61+
}
62+
```
63+
64+
Example configuration file (.editorconfig):
65+
66+
```bash
67+
root = true
68+
69+
[*]
70+
indent_style = space
71+
indent_size = 2
72+
end_of_line = lf
73+
charset = utf-8
74+
trim_trailing_whitespace = true
75+
insert_final_newline = true
76+
77+
[*.md]
78+
trim_trailing_whitespace = false
79+
```
80+
81+
**[⬆ back to the top](#summary)**

‎translations/en_US/02-commits.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,36 @@
2828
2. [Comments](05-javascript.md#comments)
2929
3. [Variables](05-javascript.md#variables)
3030
4. [Performance](05-javascript.md#performance)
31+
32+
## English
33+
34+
For the contribution in projects, the message **commit**, **pull request** and **issue** must be written in English.
35+
36+
## Task number
37+
38+
Having a `issue` or a task in Trello, Jira or other task management software for one or more commits, inform the beginning of the same message.
39+
40+
## Status
41+
42+
To facilitate, the message should have the following status:
43+
44+
- add
45+
- update
46+
- del
47+
- fix
48+
49+
The `status` will be informed in the message brackets. And it could be interpreted as the status of a file or code snippet.
50+
51+
## Message convention
52+
53+
Use lowercase letters
54+
55+
```bash
56+
// Good
57+
git commit -m "#10 [add] readme with the rules"
58+
59+
// Bad
60+
git commit -m "my first commit"
61+
```
62+
63+
**[⬆ back to the top](#summary)**

‎translations/en_US/03-html.md‎

Lines changed: 200 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,203 @@
2828
2. [Comments](05-javascript.md#comments)
2929
3. [Variables](05-javascript.md#variables)
3030
4. [Performance](05-javascript.md#performance)
31+
32+
## Syntax
33+
34+
Use double quotes
35+
36+
```html
37+
<!-- Good -->
38+
<div class="section">
39+
40+
<!-- Bad-->
41+
<div class='section'>
42+
```
43+
44+
Do not use the character `/` to elements that do not have closing tag.
45+
46+
```html
47+
<!-- Good -->
48+
<img src="..." alt="...">
49+
50+
<!-- Bad-->
51+
<img src="..." alt="..." />
52+
```
53+
54+
**[⬆ back to the top](#summary)**
55+
56+
## Comments
57+
58+
The most common use of comments in HTML, is to signal the closing of a tag. The character `/` would be the same as writing `end`. The preference in the tag identification is by its class.
59+
60+
```html
61+
<!-- Good -->
62+
<div class="container" id="section">
63+
</div><!-- /container -->
64+
65+
<!-- Bad -->
66+
<div class="container" id="section">
67+
</div><!-- section -->
68+
```
69+
70+
The ideal is that the comments are not in the production environment, just being a guideline for development. We can also have a comment block to facilitate understanding.
71+
72+
```html
73+
<!-- Good -->
74+
<!--
75+
Comment block ...
76+
-->
77+
<div></div>
78+
79+
<!-- Bad -->
80+
<!--
81+
###############################################################
82+
# Comment block ...
83+
###############################################################
84+
-->
85+
<div></div>
86+
```
87+
88+
**[⬆ back to the top](#summary)**
89+
90+
## Character Encoding
91+
92+
Always use `utf-8`
93+
94+
```html
95+
<head>
96+
<meta charset="utf-8">
97+
</head>
98+
```
99+
100+
**[⬆ back to the top](#summary)**
101+
102+
## Attribute Order
103+
104+
The attributes order facilitates reading and organization
105+
106+
1. class
107+
2. id, name
108+
3. data-*
109+
4. src, for, type, href
110+
5. title, alt
111+
6. aria-*, role, itemprop
112+
113+
```html
114+
<div class="..." id="..." itemprop="..."></div>
115+
<a class="..." href="...">...</a>
116+
<img class="..." src="..." alt="...">
117+
```
118+
119+
**[⬆ back to the top](#summary)**
120+
121+
## Performance
122+
123+
If you need to have external script inside the tag `head`, should always be last.
124+
125+
```html
126+
<!-- Good -->
127+
<link rel="stylesheet" href="style.css" />
128+
<script src="scripts.min.js"></script>
129+
130+
<!-- Bad -->
131+
<script src="scripts.min.js"></script>
132+
</head>
133+
```
134+
135+
Ideally, the scripts are in the end of the file, before the closing tag `body`.
136+
137+
```html
138+
<!-- Good -->
139+
<script src="scripts.min.js"></script>
140+
</body>
141+
142+
<!-- Bad -->
143+
<script src="scripts.min.js"></script>
144+
</head>
145+
```
146+
147+
Remove spaces and comments, no doubt bring better performance and are dispensable in the production environment.
148+
149+
```html
150+
<!-- Good -->
151+
<html><head>...</head><body><div class="main">...</div></body></html>
152+
153+
<!-- Bad -->
154+
<html>
155+
<head>
156+
...
157+
</head>
158+
<body>
159+
<div class="main">
160+
...
161+
</div><!-- /main -->
162+
</body>
163+
</html>
164+
```
165+
166+
**[⬆ back to the top](#summary)**
167+
168+
## Base Code
169+
170+
Basic HTML use for projects
171+
172+
```html
173+
<!DOCTYPE html>
174+
<html class="no-js" lang="pt-BR" xml:lang="pt-BR">
175+
<head>
176+
<meta charset="utf-8">
177+
<title></title>
178+
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
179+
<meta name="viewport" content="width=device-width,initial-scale=1">
180+
<script type="text/javascript">
181+
// to identify if javascript is active
182+
var tagHtml = document.getElementsByTagName("html")[0];
183+
tagHtml.className = tagHtml.className.replace('no-js', 'js');
184+
</script>
185+
</head>
186+
<body>
187+
188+
</body>
189+
</html>
190+
```
191+
192+
Meta tags that use more.
193+
194+
```html
195+
<meta name="format-detection" content="telephone=no">
196+
<meta name="referrer" content="origin">
197+
<meta name="description" content="Description">
198+
199+
<!-- facebook -->
200+
<meta property="og:site_name" content="Site name">
201+
<meta property="og:title" content="Title">
202+
<meta property="og:type" content="website">
203+
<meta property="og:url" content="Url">
204+
<meta property="og:description" content="Description">
205+
<meta property="og:image" content="Image">
206+
<meta property="fb:admins" content="">
207+
<meta property="fb:app_id" content="">
208+
209+
<link rel="image_src" href="Image">
210+
211+
<!-- component schema.org -->
212+
<meta itemprop="name" content="Site name">
213+
<meta itemprop="description" content="Description">
214+
<meta itemprop="image" content="Image">
215+
<meta itemprop="url" content="Url">
216+
217+
<meta name="geo.country" content="">
218+
<meta name="geo.region" content="">
219+
<meta name="geo.placename" content="">
220+
221+
<!-- favicon -->
222+
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
223+
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
224+
<link rel="icon" href="/favicon.ico" type="image/x-icon">
225+
226+
<!-- canonical -->
227+
<link rel="canonical" href="Url">
228+
```
229+
230+
**[⬆ back to the top](#summary)**

0 commit comments

Comments
 (0)