-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
324 lines (212 loc) · 15.3 KB
/
index.html
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="description" content="Crónicas e sátiras de um front-end developer que queria ser instrutor">
<link rel="stylesheet" href="/bower_components/fancybox/source/jquery.fancybox.css">
<link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/style.css">
<title>Fora do sítio - Não sou developer</title>
</head>
<body>
<header id="header">
<div class="center">
<div class="wrap">
<div id="site">
<h1>
<a href="/">Fora do sítio</a>
</h1>
<h2>
<a href="/">Não sou developer</a>
</h2>
</div>
<nav id="menu">
<ul>
<li><a href="/">home</a></li>
<li><a href="/archives/">archive</a></li>
<li><a href="/images/random.png">random</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div id="content">
<div class="center">
<div class="main-col">
<article class="post">
<div class="post-content">
<header>
<div class="meta">
<div class="icon">
<i class="fa fa-file"></i>
</div>
<time datetime="2016-10-12T17:14:31.000Z">2016-10-12</time>
</div>
<h1 class="title" data-role="articleTitle"><a href="/2016/10/12/emoji-proposta-para-commits/">Como organizar commits... com emoji!</a></h1>
</header>
<div class="entry">
<blockquote>
<img src="/2016/10/12/emoji-proposta-para-commits/comic.png" alt="XKCD comic" title="XKCD comic">
<p><a href="https://xkcd.com/1296/" target="_blank" rel="external">https://xkcd.com/1296/</a></p>
</blockquote>
<p>Este artigo assume algum conhecimento prévio sobre <a href="https://www.youtube.com/watch?v=WVLhm1AMeYE" target="_blank" rel="external">Git e sistemas de gestão de versões</a>.</p>
<p>Só porque sou <em>hipster</em>, vou começar a marcar os meus <em>commits</em> com emoji. Assim, ao analisarem um símbolo à esquerda, já sabem que tipo de commit é!</p>
<ul>
<li>:wrench: (‘:wrench:’) Resolução de algum <em>bug</em> ou problema</li>
<li>:warning: (‘:warning:’) WorkInProgress?</li>
<li>:pencil: (‘:pencil:’) Algo relacionado com conteúdo textual (uma mensagem numa página ou uma <em>label</em>?)</li>
<li>:book: (‘:book:’) Atualização de documentação</li>
<li>:email: (‘:email:’) Algo relacionado com e-mail</li>
<li>:sunglasses: (‘:sunglasses:’) Estilização de componentes</li>
</ul>
<h3 id="Uh…-contexto"><a href="#Uh…-contexto" class="headerlink" title="Uh… contexto?"></a>Uh… contexto?</h3><p>Não é por acaso que, dentro do sistema de revisão/<em>versioning</em> Git, toda a revisão (<em>commit</em>) requer uma <em>mensagem</em>. Afinal de contas, qualquer alteração ao código de um projeto deve ser justificada, e é de esperar uma descrição para a mesma. Como é que vou aprovar ou inverter uma alteração da autoria de outrém se não souber o motivo por detrás dela?</p>
<p>É, portanto, de esperar que existam pessoas com uma justificada preocupação pelo modo como estas mensagens são escritas (como <a href="http://alistapart.com/article/the-art-of-the-commit" target="_blank" rel="external">este senhor</a>, ou <a href="http://chris.beams.io/posts/git-commit/" target="_blank" rel="external">este senhor</a>, ou <a href="https://github.com/erlang/otp/wiki/writing-good-commit-messages" target="_blank" rel="external">este senhor</a>).</p>
<p>Alguma vez ponderaste definir uma estrutura básica para uma mensagem relativa a um <em>commit</em>? Quiçá, para que seja possível analisar e rever o histórico de um projeto e das suas alterações? Ou mesmo apenas para reforçar alguma disciplina numa equipa desorganizada?</p>
</div>
<footer class="clearfix">
<div class="tags">
<i class="fa fa-tags"></i>
<a href="/tags/git-workflow-fun-emoji/">#git, workflow, fun, emoji</a>
</div>
</footer>
</div>
</article>
<article class="post">
<div class="post-content">
<header>
<div class="meta">
<div class="icon">
<i class="fa fa-file"></i>
</div>
<time datetime="2016-10-01T20:00:49.000Z">2016-10-01</time>
</div>
<h1 class="title" data-role="articleTitle"><a href="/2016/10/01/Wishlist-do-Programador/">Metas do Programador - Parte 1</a></h1>
</header>
<div class="entry">
<p>Existe, em diversos contextos profissionais, uma lista ‘virtual’ de metas que deverão ser atingidas por um trabalhador para este ser considerado ‘senior’. Digo ‘virtual’, isto porque nunca li um documento que reunisse todas estes supostos ‘feitos’… apenas tenho conhecimento deles por causa das frequentes situações laborais onde nos deparamos com um veterano a citar algo do género</p>
<blockquote>
<p>Não serás um verdadeiro x até fazeres y</p>
</blockquote>
<p>Segue-se uma lista, então, de tudo aquilo que considero ser tudo aquilo que um <em>web developer</em> deve fazer para ser reconhecido como um <em>ninja da web</em>… ou não, pois afinal de contas nem ‘senior’ sou *cofcof!</p>
<ul>
<li>Correr um programa à primeira — esta aplica-se a tudo!</li>
<li>Atualizar um projeto com repositório remoto sem fazer o extremamente genérico <em>git pull</em></li>
<li>Fazer um <em>git rebase</em> e não destruir nada (e sem conflitos)</li>
<li>Melhor ainda, fazer um <em>git rebase</em> tendo perfeita consciência do que está a fazer</li>
<li>Escrever um script considerado <em>útil</em> e com pelo menos 100 linhas de código em <em>vim</em></li>
<li>Melhor ainda, construir uma aplicação web completa usando apenas <em>vim</em>… nada de editores de texto avançados ou IDEs!</li>
<li>Fazer qualquer trabalho em <em>vim</em>… ser um verdadeiro <em>vi-ninja</em>! </li>
<li>Ler um ‘reconhecido’ livro de programação a 100%… — admitam, só leram 10, se tanto, até fazer de pisa-papéis!</li>
<li>Trabalhar em conjunto com um <em>designer</em> para definir nomes comuns para componentes <em>web</em> — que nome se dá àquela coisa que combina uma imagem de fundo e texto no meio dela? <a href="https://envato.com/blog/exploring-hero-image-trend-web-design/" target="_blank" rel="external">Hero</a>?</li>
<li>Trabalhar com dois cursores de rato — <em>because why not?</em></li>
</ul>
<p>Entretanto, espero ir atualizando esta lista com mais tarefas dignas de um <em>hardcore</em>… ou seja lá qual for a palavra <em>hipster</em> que se usa agora para definir ‘exemplo profissional a seguir e respeitado por colegas a nível local, nacional ou mesmo internacional’!</p>
</div>
<footer class="clearfix">
<div class="tags">
<i class="fa fa-tags"></i>
<a href="/tags/fun/">#fun</a>
</div>
</footer>
</div>
</article>
<article class="post">
<div class="post-content">
<header>
<div class="meta">
<div class="icon">
<i class="fa fa-file"></i>
</div>
<time datetime="2016-10-01T14:48:21.000Z">2016-10-01</time>
</div>
<h1 class="title" data-role="articleTitle"><a href="/2016/10/01/PoemaFailStack/">Hino ao Fail Stack</a></h1>
</header>
<div class="entry">
<ul>
<li>O <em>fail-stack developer</em> é aquele que sabe um pouco de muito… que na prática significa que sabe muito de nada!</li>
<li>O <em>fail-stack developer</em> é aquele que entra numa corrida até 8 pessoas e chega sempre em 4º lugar</li>
</ul>
</div>
<footer class="clearfix">
</footer>
</div>
</article>
<article class="post">
<div class="post-content">
<header>
<div class="meta">
<div class="icon">
<i class="fa fa-file"></i>
</div>
<time datetime="2016-10-01T13:50:47.000Z">2016-10-01</time>
</div>
<h1 class="title" data-role="articleTitle"><a href="/2016/10/01/failstack/">O Fail-stack developer</a></h1>
</header>
<div class="entry">
<p>A web é um ambiente complicado porque envolve diversas tecnologias: se deixares de lado uma boa parte delas, corres o risco de não conseguir montar um negócio sozinho, mas a alternativa é, na minha opinião pessoal, bem pior…</p>
<p>Em termos da <em>web</em>, existem duas especialidades gerais nas quais podem ser inseridas praticamente qualquer <em>web developer</em>:</p>
<ul>
<li>Front-end developer</li>
<li>Back-end developer</li>
</ul>
<h3 id="Front-end"><a href="#Front-end" class="headerlink" title="Front-end"></a>Front-end</h3><p>O <strong>Front-end-er</strong> é aquele que se especializa nas linguagens universais da web, e que são interpretadas pelos vossos <em>browsers</em>: html para estruturação de páginas/componentes, css (para estilização dessas mesmas páginas e/ou componentes), e o agora-omnipresente JavaScript, a linguagem de programação da Web. É este indivíduo que irá passar dores de cabeça a converter <em>designs</em> photoshop e desenhos em verdadeiros aglomerados de barras de navegação, painéis e imagens de destaque com um título. Possivelmente, é nas artimanhas, pequenos detalhes e animações que o Front-ender passa o seu tempo… Isto é, quando não está a tentar perceber o porquê do seu fantástico botão não apresentar bordas redondas num iPhone 3! Ou então o porquê daquele formulário todo personalizado e xispeteó — sim, a palavra <a href="http://www.priberam.pt/dlpo/xispeteo" target="_blank" rel="external">existe</a>! — não funcionar bem no Firefox desatualizado do avô do tio do teu malvado irmão gémeo!</p>
<p>A menos que este tenha veia de programador e se especialize numa das mais confusas linguagens de programação de sempre, o trabalho do front-end developer é próximo (mas não semelhante) ao de um <em>designer</em>, ao envolver conceitos de usabilidade e implementação de <em>interfaces</em> para a web. Este apenas usa o tal ‘JavaScript’ quando estritamente necessário e para desenrascar interações com os DOM (porque é <em>hipster</em> usar o termo neste tipo de temas). Caso contrário, é bem provável que este se preocupe mais com ‘oganização de código-fonte’ e repita constantemente termos como React-js, Angular-js e outros tantos terminados em jê-ésse. Também deve ser fã de SÁSSES e outras ferramentas intermédias que facilitam, depois de inúmeras dores de cabeça, o seu trabalho.</p>
<h3 id="Back-end"><a href="#Back-end" class="headerlink" title="Back-end"></a>Back-end</h3><p>O <strong>Back-end-er</strong> é um programador puro, muito próximo daquele que as universidades tencionavam que fosses: um <em>engenheiro</em> que sabe o que realmente é um HTTP (com ou sem S), e um FTP, e um SMTP e outros tantos TêPês… ele é que programa o teu ‘servidor’ PHP, Python ou seja-lá-qual-for a linguagem de escolha. É ele que monta os teus projetos em <em>Djangos</em>, <em>Express</em>, <em>Laravel</em>, e também é, normalmente, o responsável para determinar como é que são armazenados dados na tua aplicação, seja de utilizadores ou de produtos de uma loja ou… de perfis numa rede social! Quando uma página de resultados de pesquisa demora muito a carregar, é ao senhor do <em>backend</em> que se vão queixar.</p>
<p>Mas existem outras tantas tarefas que, apesar de consideravelmente distintas, também se inserem no domínio do <em>back-end</em>. Administração de sistema, por exemplo: quem vamos chatear quando um site está em baixo e não sabemos qual foi a causa? E quando é preciso configurar um servidor para enviar e receber e-mails? E para colocar um site numa máquina online? Administrador de sistema é, por si só, digno de ser considerado uma profissão a tempo inteiro!</p>
<p>E nem vou entrar na criação de APIs e outras tantas <em>chinesices</em>…</p>
<h3 id="Porque-este-caminho-todo-Qual-e-a-mensagem"><a href="#Porque-este-caminho-todo-Qual-e-a-mensagem" class="headerlink" title="Porquê este caminho todo? Qual é a mensagem?"></a>Porquê este caminho todo? Qual é a mensagem?</h3><p>A mensagem é simplesmente a de que não sou adepto do título <strong>front-end developer</strong> que, supostamente, é uma pessoa dominadora de ambos os domínios acima referidos. E tenho motivos para isso!</p>
<p>Ora, ser um front-end developer pode englobar princípios de estruturação, estilização, experiência de utilizador, programação de eventos em diversos níveis (dependendo do projeto) e ainda <em>design</em>. Passar para o domínio do <em>back-end</em>, por sua vez, envolve conhecimento ao nível da programação (quase sempre de ‘alto nível’), organização e arquitetura de soluções/projetos, segurança, protocolos web e gestão de sistemas — e a documentação, para onde vai? —. Alguns deste subdomínios são tão importantes que, por si só, justificariam especializações ou cargos profissionais! Sim, faz sentido, por exemplo, ter um front-end developer que não domina a área da experiência de utilizador mas percebe imenso de interações com a DOM, ou ter um back-end developer apenas especializado em fazer API.</p>
<p>Não me parece que o ramo extremamente genérico da ‘Informática’ seja pouco acessível ao ponto de termos gente que sabe um pouco de tudo mas não se especializa em nada. Em alguns casos específicos até pode fazer sentido, mas mesmo o mais ávido <em>full-stack*</em> acaba por se especializar em algo! E não é por acaso que na medicina existem tantos cargos — e sim, ‘Clínica Geral’ É uma especialização!</p>
<p>É preciso sim ter alguns conhecimentos gerais numa fase inicial da carreira, mas isso é porque ainda não sabemos como as coisas funcionam na prática e não definimos uma área de que realmente gostemos, ou nos sintamos à vontade. E aí sim, começamos a desenvolver traços individuais que nos caracterizam não só como profissionais mas como pessoas!</p>
</div>
<footer class="clearfix">
<div class="tags">
<i class="fa fa-tags"></i>
<a href="/tags/fun/">#fun</a>
</div>
</footer>
</div>
</article>
<nav id="pagination">
</nav>
</div>
</div>
</div>
<footer id="footer">
<div class="center">
© 2016
John Doe
.
Blog generated by <a href="http://hexo.io">hexo</a>
</div>
</footer>
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/js/header-animate.js"></script>
<script src="/bower_components/emojify.js/dist/js/emojify.min.js"></script>
<script>
emojify.setConfig({
only_crawl_id : null, // Use to restrict where emojify.js applies
img_dir : '/bower_components/emojify.js/dist/images/basic', // Directory for emoji images
});
var entries = document.querySelectorAll('.entry');
[].forEach.call(entries, function(entry){
emojify.run(entry);
});
</script>
<script src="/js/title-animate.js"></script>
<script src="/bower_components/jquery_lazyload/jquery.lazyload.js"></script>
<script>
$('img.lazy').lazyload();
</script>
<script src="/bower_components/fancybox/source/jquery.fancybox.pack.js"></script>
<script>
$('.fancybox').fancybox();
</script>
</body>
</html>