Skip to content

Commit 336bec5

Browse files
ui2codeui2code
committed
#20 [update] Improvement of the summary
1 parent 90be9d6 commit 336bec5

File tree

6 files changed

+1010
-871
lines changed

6 files changed

+1010
-871
lines changed

‎translations/pt_BR/01-global.md‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
# Global
2+
3+
## Summary
4+
5+
1. [Global](01-global.md)
6+
1. [Identation](01-global.md#identation)
7+
2. [Commits](02-commits.md)
8+
1. [English](02-commits.md#english)
9+
2. [Task number](02-commits.md#task-number)
10+
3. [Status](02-commits.md#status)
11+
4. [Message convention](02-commits.md#message-convention)
12+
3. [HTML](03-html.md)
13+
1. [HTML Syntax](03-html.md#html-syntax)
14+
2. [HTML Comments](03-html.md#html-comments)
15+
3. [HTML Character Encoding](03-html.md#html-character-encoding)
16+
4. [HTML Attribute Order](03-html.md#html-attribute-order)
17+
5. [HTML Performance](03-html.md#html-performance)
18+
6. [HTML Base Code](03-html.md#html-base-code)
19+
4. [CSS](04-css.md)
20+
1. [CSS Syntax](04-css.md#css-syntax)
21+
2. [CSS Comments](04-css.md#css-comments)
22+
3. [CSS Declaration Order](04-css.md#css-declaration-order)
23+
4. [CSS Name](04-css.md#css-name)
24+
5. [CSS Performance](04-css.md#css-performance)
25+
6. [CSS Media Queries](04-css.md#css-media-queries)
26+
5. [Javascript](05-javascript.md)
27+
1. [Javascript Syntax](05-javascript.md#javascript-syntax)
28+
2. [Javascript Comments](05-javascript.md#javascript-comments)
29+
3. [Javascript Variables](05-javascript.md#javascript-variables)
30+
4. [Javascript Performance](05-javascript.md#javascript-performance)
31+
32+
## Identation
33+
34+
O estilo de identação é usando espaços e o tamanho da identação é 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+
Exemplo do arquivo de configuração (.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+
**[⬆ voltar ao topo](#summary)**

‎translations/pt_BR/02-commits.md‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
# Commits
2+
3+
## Summary
4+
5+
1. [Global](01-global.md)
6+
1. [Identation](01-global.md#identation)
7+
2. [Commits](02-commits.md)
8+
1. [English](02-commits.md#english)
9+
2. [Task number](02-commits.md#task-number)
10+
3. [Status](02-commits.md#status)
11+
4. [Message convention](02-commits.md#message-convention)
12+
3. [HTML](03-html.md)
13+
1. [HTML Syntax](03-html.md#html-syntax)
14+
2. [HTML Comments](03-html.md#html-comments)
15+
3. [HTML Character Encoding](03-html.md#html-character-encoding)
16+
4. [HTML Attribute Order](03-html.md#html-attribute-order)
17+
5. [HTML Performance](03-html.md#html-performance)
18+
6. [HTML Base Code](03-html.md#html-base-code)
19+
4. [CSS](04-css.md)
20+
1. [CSS Syntax](04-css.md#css-syntax)
21+
2. [CSS Comments](04-css.md#css-comments)
22+
3. [CSS Declaration Order](04-css.md#css-declaration-order)
23+
4. [CSS Name](04-css.md#css-name)
24+
5. [CSS Performance](04-css.md#css-performance)
25+
6. [CSS Media Queries](04-css.md#css-media-queries)
26+
5. [Javascript](05-javascript.md)
27+
1. [Javascript Syntax](05-javascript.md#javascript-syntax)
28+
2. [Javascript Comments](05-javascript.md#javascript-comments)
29+
3. [Javascript Variables](05-javascript.md#javascript-variables)
30+
4. [Javascript Performance](05-javascript.md#javascript-performance)
31+
32+
## English
33+
34+
Para a contribuiição em projetos, a mensagem do **commit**, título do **pull request** e a **issue**, devem ser escritos em inglês.
35+
36+
## Task number
37+
38+
Tendo uma `issue` ou uma tarefa no Trello, Jira ou outro software de gerenciamento de tarefas para 1 ou mais commits, informar no começo da mensagem do mesmo.
39+
40+
## Status
41+
42+
Para facilitar, a mensagem deverá ter os seguintes status:
43+
44+
- add
45+
- update
46+
- del
47+
- fix
48+
49+
O `status` será informado na mensagem entre colchetes. E poderá ser interpretado como status de um arquivo ou trecho de código.
50+
51+
## Message convention
52+
53+
Usar letras minúsculas
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+
**[⬆ voltar ao topo](#summary)**

‎translations/pt_BR/03-html.md‎

Lines changed: 230 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,230 @@
1+
# HTML
2+
3+
## Summary
4+
5+
1. [Global](01-global.md)
6+
1. [Identation](01-global.md#identation)
7+
2. [Commits](02-commits.md)
8+
1. [English](02-commits.md#english)
9+
2. [Task number](02-commits.md#task-number)
10+
3. [Status](02-commits.md#status)
11+
4. [Message convention](02-commits.md#message-convention)
12+
3. [HTML](03-html.md)
13+
1. [HTML Syntax](03-html.md#html-syntax)
14+
2. [HTML Comments](03-html.md#html-comments)
15+
3. [HTML Character Encoding](03-html.md#html-character-encoding)
16+
4. [HTML Attribute Order](03-html.md#html-attribute-order)
17+
5. [HTML Performance](03-html.md#html-performance)
18+
6. [HTML Base Code](03-html.md#html-base-code)
19+
4. [CSS](04-css.md)
20+
1. [CSS Syntax](04-css.md#css-syntax)
21+
2. [CSS Comments](04-css.md#css-comments)
22+
3. [CSS Declaration Order](04-css.md#css-declaration-order)
23+
4. [CSS Name](04-css.md#css-name)
24+
5. [CSS Performance](04-css.md#css-performance)
25+
6. [CSS Media Queries](04-css.md#css-media-queries)
26+
5. [Javascript](05-javascript.md)
27+
1. [Javascript Syntax](05-javascript.md#javascript-syntax)
28+
2. [Javascript Comments](05-javascript.md#javascript-comments)
29+
3. [Javascript Variables](05-javascript.md#javascript-variables)
30+
4. [Javascript Performance](05-javascript.md#javascript-performance)
31+
32+
## HTML Syntax
33+
34+
Use aspas duplas
35+
36+
```html
37+
<!-- Good -->
38+
<div class="section">
39+
40+
<!-- Bad-->
41+
<div class='section'>
42+
```
43+
44+
Não use o caractere `/`, para elementos que não tem tem tag de fechamento
45+
46+
```html
47+
<!-- Good -->
48+
<img src="..." alt="...">
49+
50+
<!-- Bad-->
51+
<img src="..." alt="..." />
52+
```
53+
54+
**[⬆ voltar ao topo](#summary)**
55+
56+
## HTML Comments
57+
58+
O uso mais frequente de comentários no HTMl, é para sinalizar o fechamento de uma tag. O caractere `/` seria o mesmo que escrever `end`. A preferência na identificação da tag, é por sua classe.
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+
O ideal é que os comentários não estejam no ambiente de produção, sendo apenas uma orientação para o desenvolvimento. Também podemos ter um bloco de comentários para facilitar o entendimento.
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+
**[⬆ voltar ao topo](#summary)**
89+
90+
## HTML Character Encoding
91+
92+
Sempre use `UTF-8`
93+
94+
```html
95+
<head>
96+
<meta charset="utf-8">
97+
</head>
98+
```
99+
100+
**[⬆ voltar ao topo](#summary)**
101+
102+
## HTML Attribute Order
103+
104+
A ordem de atributos facilita a leitura e organização
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+
**[⬆ voltar ao topo](#summary)**
120+
121+
## HTML Performance
122+
123+
Se for necessário ter script externo dentro da tag `head`, sempre deve estar por último.
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+
O ideal que os scripts estejam no final do arquivo, antes do fechamento da 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+
Eliminar espaços e comentários, sem dúvida trazem uma melhor performance e são dispensáveis no ambiente de produção
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+
**[⬆ voltar ao topo](#summary)**
167+
168+
## HTML Base Code
169+
170+
HTMl básico que uso para os projetos
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+
Tags meta que mais uso.
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+
**[⬆ voltar ao topo](#summary)**

0 commit comments

Comments
 (0)