From 42005ccd19df93a4362408185057a74b86bf698c Mon Sep 17 00:00:00 2001 From: esquizo Date: Mon, 15 Jun 2026 12:15:42 -0300 Subject: adicionado tutoriais/makefiles.md --- Makefile | 17 +++++++- templates/base.m4 | 3 ++ tutoriais/makefiles.md | 116 +++++++++++++++++++++++++++++++++++++++++++++++++ tutoriais/posts.csv | 1 + 4 files changed, 135 insertions(+), 2 deletions(-) create mode 100644 tutoriais/makefiles.md create mode 100644 tutoriais/posts.csv diff --git a/Makefile b/Makefile index 10d5f86..fb581fb 100644 --- a/Makefile +++ b/Makefile @@ -9,9 +9,12 @@ PAGES=index.html\ blog/rss.html\ blog/espacos-liminares.html\ blog/problemas-rust.html\ + tutoriais/index.html\ + tutoriais/index.rss\ + tutoriais/makefiles.html\ about.html -RSS = blog/index.rss +RSS = blog/index.rss tutoriais/index.rss URL ?= http://localhost:8000 @@ -22,7 +25,14 @@ clean: dist: all tar -cv static $(RSS) $(PAGES) | gzip > dist.tar.gz - + +distzip: all + zip -f dist.zip static $(RSS) $(PAGES) + +tutoriais/index.rss: tutoriais/posts.csv + ./csv2rss.sh 'Tutoriais do Esquizo' '$(URL)/tutoriais' 'Tutoriais das vozes da minha cabeça' \ + < tutoriais/posts.csv > tutoriais/index.rss + blog/index.rss: blog/posts.csv ./csv2rss.sh 'Blogs do Esquizo' '$(URL)/blog' 'Transliteração das vozes da minha cabeça' \ < blog/posts.csv > blog/index.rss @@ -30,6 +40,9 @@ blog/index.rss: blog/posts.csv blog/index.html: blog/posts.csv templates/base.m4 m4 -DPAGECONTENT="$$(./csv2index.sh /blog < $<)" templates/base.m4 > $@ +tutoriais/index.html: tutoriais/posts.csv templates/base.m4 + m4 -DPAGECONTENT="$$(./csv2index.sh /tutoriais < $<)" templates/base.m4 > $@ + static/style.css: src/css/style.css src/css/style.css src/css/base.css src/css/navbar.css src/css/scanlines.css esbuild src/css/style.css --external:'/static/*' --bundle --minify --outfile=static/style.css diff --git a/templates/base.m4 b/templates/base.m4 index 75c3e84..5489f83 100644 --- a/templates/base.m4 +++ b/templates/base.m4 @@ -44,6 +44,7 @@ define(`BUTTON_LIST', `
  • Home
  • Quem eu sou?
  • Blog
    • +
  • Tutoriais
  • Git
    • @@ -51,7 +52,9 @@ define(`BUTTON_LIST', `
    + changequote(`[[', `]]')dnl PAGECONTENT + changequote`'dnl
    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. + +
    index.html: header.html.part index.html.part footer.html.part
+	cat header.html.part index.html.part footer.html.part > index.html
    + +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. + +
    index.html: header.html.part index.html.part footer.html.part
+	cat header.html.part index.html.part footer.html.part > index.html
+
+about.html: header.html.part about.html.part footer.html.part
+	cat header.html.part about.html.part footer.html.part > about.html
    + +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. + +
    %.html: header.phtml %.phtml footer.phtml
+    cat $^ > $@
+
    + +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 $@ +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. + +
    %.html: header.phtml %.phtml footer.phtml
+    cat $^ > $@
+
+%.phtml: %.md
+    markdown < $< > $@
    + +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 -- cgit v1.2.3