adicionado tutoriais/makefiles.md

2 files changed, 117 insertions, 0 deletions

diff --git a/tutoriais/makefiles.md b/tutoriais/makefiles.md
new file mode 100644
index 0000000..35d8921
--- /dev/null
+++ b/tutoriais/makefiles.md
@@ -0,0 +1,116 @@
+# Como dev, como você dev pensar?
+## _Ou como usar makefiles...?_
+
+Já vou começando dando um spoiler: _foque no que quer chegar,
+não em como chegar_.
+
+Todo objeto que você quer construir tem o seu propósito, seja um HTML,
+um programa nativo ou qualquer coisa. Quando você começa a analisar o 
+propósito daquilo que você quer construir, você sempre chega nas melhores
+descrições do que quer fazer. _Descrição_ é uma palavra chave aqui.
+
+Se você quer construir um HTML para um blog ou um site, você faz o mais óbvio
+pra construir o seu HTML: um bloco de notas, e um HTML. Pronto. Se precisar
+fazer outra página, você só dá um ctrl-c/ctrl-v. Até aqui, está tudo certo, 
+não tem muito o que pensar. Mas agora vamos dizer que você queira fazer
+uma mudança na estruturação do seu HTML, talvez adicionar uma header, footer,
+um css. Agora essas mudanças precisam ser replicadas manualmente em cada HTML
+que você criou.
+
+Mas temos um computador, podemos automatizar isso, não? Se todas as páginas
+terão a mesma base, porquê não dizemos ao computador: construa esse HTML pra mim
+usando esses pedaços? E não precisa ser algo grande.
+
+<pre style="font-family:monospace;color: rgb(68, 68, 68); background-color: rgb(243, 243, 243); font-weight: 400; "><span style="color: rgb(136, 0, 0); font-weight: 700;">index.html: header.html.part index.html.part footer.html.part</span>
+	cat header.html.part index.html.part footer.html.part &gt; index.html</pre>
+
+E salvamos isso em um arquivo chamado `Makefile` pra que o programa `make` 
+leia isso pra nós e crie o index.html pra gente. A primeira linha contém o que
+nós queremos (index.html) e o que vamos usar pra construir o que queremos.
+Logo abaixo, e identado **com tabs**, o comando que queremos executar pra cada
+um dos htmls que queremos fazer. 
+
+Com isso, chegamos no conceito de "fonte".
+Você pode entender a fonte como fonte de um recurso que um programa precisa pra 
+construir algo para nós, nós estamos passando o que queremos e os requisitos 
+para a construção do que queremos. Perceba que nós ainda queremos o HTML 
+completo, mas agora melhoramos a _descrição_ do nosso HTML para nós focarmos
+apenas naquilo que é necessário: um HTML é construído com header, footer e o
+nosso conteúdo. Agora podemos só editar o conteúdo, ou a header, ou a footer,
+e todo HTML conterá as mudanças que queremos.
+
+Então fazemos isso para cada arquivo que criamos.
+
+<pre style="font-family:monospace;color: rgb(68, 68, 68); background-color: rgb(243, 243, 243); font-weight: 400; "><span style="color: rgb(136, 0, 0); font-weight: 700;">index.html: header.html.part index.html.part footer.html.part</span>
+	cat header.html.part index.html.part footer.html.part &gt; index.html
+
+<span style="color: rgb(136, 0, 0); font-weight: 700;">about.html: header.html.part about.html.part footer.html.part</span>
+	cat header.html.part about.html.part footer.html.part &gt; about.html</pre>
+
+Mas estamos no tema de automação usando o computador, não? Ok que reduzimos
+bastante a quantidade de mudanças manuais que precisariamos fazer, mas podemos
+ir um pouco além disso.
+
+<pre style="font-family:monospace;color: rgb(68, 68, 68); background-color: rgb(243, 243, 243); font-weight: 400; "><span style="color: rgb(136, 0, 0); font-weight: 700;">%.html: header.phtml %.phtml footer.phtml</span>
+    cat <span style="color: rgb(171, 86, 86); font-weight: 400;">$^</span> &gt; <span style="color: rgb(171, 86, 86); font-weight: 400;">&#36;@</span>
+</pre>
+
+Agora os arquivos deverão ter uma extensão diferente porque o Makefile se
+confunde um pouco se usarmos o jeito anterior, porém agora o `make` vai tentar
+a executar essa regra para todo *.html que for requisitado. O `$^` significa
+todos os requisitos, em ordem que foram declarados, e o <span>&#36;@</span>
+significa o nome da output, para fins de tornar essa regra mais genérica.
+
+Com isso, estabelecemos um padrão para o nosso projeto. Todo HTML é construído
+seguindo essa regra: existe um header.phtml, um outro .phtml com a mesmo nome,
+e footer.phtml. E não só isso, como ainda podemos prosseguir adicionando mais
+regras, e ainda regras sobre arquivos que existem.
+
+<pre style="font-family:monospace;color: rgb(68, 68, 68); background-color: rgb(243, 243, 243); font-weight: 400; "><span style="color: rgb(136, 0, 0); font-weight: 700;">%.html: header.phtml %.phtml footer.phtml</span>
+    cat <span style="color: rgb(171, 86, 86); font-weight: 400;">$^</span> &gt; <span style="color: rgb(171, 86, 86); font-weight: 400;">&#36;@</span>
+
+<span style="color: rgb(136, 0, 0); font-weight: 700;">%.phtml: %.md</span>
+    markdown &lt; <span style="color: rgb(171, 86, 86); font-weight: 400;">$&lt;</span> &gt; <span style="color: rgb(171, 86, 86); font-weight: 400;">&#36;@</span></pre>
+
+Agora toda vez que um phtml não existir, ele vai tentar criar a partir de um 
+arquivo markdown.
+
+Note o que estamos fazendo aqui: nós queremos um arquivo html. Não é o phtml, 
+não é o markdown, e sim o html final. Os phtmls e os arquivos markdowns são
+apenas formas de se chegar no html. E cada vez que adicionamos mais uma camada
+de dependência e regras de resolução de dependência, estamos aumentando a
+capacidade de descrever o resultado final que queremos.
+
+O mesmo vale para o seu programa e na arquitetura do seu programa. Quanto mais
+você consegue descrever sobre o seu programa, mais você irá notar componentes,
+partes que se mantém estáveis, padrões, testes e outras coisas, e notar que essas
+coisas existem irá tornar o seu programa mais simples de desenvolver, ou
+pelo menos você irá fazer menos cagadas, afinal: você vai estar entendendo o
+seu programa.
+
+Por fim, note que isso resulta em um grafo, mais especificamente uma árvore:
+
+    index.html
+      |
+      +--- header.phtml
+      +--- footer.phtml
+      +--- index.phtml
+
+    about.html
+      |
+      +--- header.phtml
+      +--- footer.phtml
+      +--- about.phtml
+            |
+            + --- about.md
+
+Ao notar essa árvore, perceba que nós não só podemos notar padrões mas agora
+podemos planejar o que devemos fazer para resolver todos os problemas de forma
+geral.
+
+As conexões também são pontos de resolução de problemas. Perceba aqui que o
+`make` é um programa que nós já tinhamos em mãos para resolver as dependências
+mas mesmo esses programas precisam de outros pra transformar "simbolos em
+outros simbolos". Então não tenha medo de fazer _código que escreve código_, o
+seu trabalho sempre foi resolver problemas usando o computador, inclusive os
+seus próprios problemas.
diff --git a/tutoriais/posts.csv b/tutoriais/posts.csv
new file mode 100644
index 0000000..ab5541f
--- /dev/null
+++ b/tutoriais/posts.csv
@@ -0,0 +1 @@
+Como dev, como você dev pensar?|makefiles.html|Mon, 15 Jun 2026 11:59:51 -0300