tukain/pages
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update

Browse source
This commit is contained in:
tukain 2024-09-12 23:33:09 -03:00
commit 70bc0a13a4
49 changed files with 5043 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
404.html Normal file
View file

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="pt-br" />
<meta name="description" content="Meu website pessoal" />
<meta name="author" content="Tukain" />
<meta name="generator" content="Lume" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/assets/fav.webp" type="image/webp" />
<link href="/assets/css/styles.css" rel="stylesheet">
<title>Tukain's Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="/">início</a>
<li>
</ul>
<ul>
<li>
<a href="/blog.html">blog</a>
</li>
<li>
<a href="/conversor.html">conversor</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="alert">
<hgroup>
<h1>Página não encontrada - Erro 404</h1>
<p>A página requisitada não foi encontrada.</p>
</hgroup>
</div>
</main>
</body>
</html>

21
assets/css/colors.css Normal file
View file

@ -0,0 +1,21 @@
:root {
--background: #1F1F1F;
--foreground: #D6DBE5;
--grey: #303030;
--red: #F81118;
--green: #2DC55E;
--yellow: #ECBA0F;
--blue: #2A84D2;
--purple: #4E5AB7;
--cyan: #1081D6;
--bright-background: #1a1a1a;
--bright-foreground: #FFFFFF;
--bright-grey: #707070;
--bright-red: #DE352E;
--bright-green: #1DD361;
--bright-yellow: #FB3D09;
--bright-blue: #1081D6;
--bright-purple: #5350B9;
--bright-cyan: #0F7DDB;
}

113
assets/css/prism.css Normal file
View file

@ -0,0 +1,113 @@
/* PrismJS 1.29.0
https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+bash+c+go+liquid+lua+makefile+markup-templating+toml+yaml */
code[class*=language-],
pre[class*=language-] {
color: var(--foreground);
background: 0 0;
font-size: 1em;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none
}
pre[class*=language-] {
padding: 1em;
margin: .5em 0;
overflow: auto
}
:not(pre)>code[class*=language-],
pre[class*=language-] {
background: var(--bright-background);
}
:not(pre)>code[class*=language-] {
padding: .1em;
border-radius: .3em;
white-space: normal
}
.token.block-comment,
.token.cdata,
.token.comment,
.token.doctype,
.token.prolog {
color: var(--bright-grey);
}
.token.punctuation {
color: var(--foreground)
}
.token.attr-name,
.token.deleted,
.token.namespace,
.token.tag {
color: var(--red)
}
.token.function-name {
color: var(--blue)
}
.token.boolean,
.token.function,
.token.number {
color: var(--purple)
}
.token.class-name,
.token.constant,
.token.property,
.token.symbol {
color: var(--yellow)
}
.token.atrule,
.token.builtin,
.token.important,
.token.keyword,
.token.selector {
color: var(--bright-yellow)
}
.token.attr-value,
.token.char,
.token.regex,
.token.string,
.token.variable {
color: var(--green)
}
.token.entity,
.token.operator,
.token.url {
color: var(--cyan)
}
.token.bold,
.token.important {
font-weight: 700
}
.token.italic {
font-style: italic
}
.token.entity {
cursor: help
}
.token.inserted {
color: green
}

381
assets/css/styles.css Normal file
View file

@ -0,0 +1,381 @@
@import "/assets/css/colors.css";
:root {
--border: solid 1px var(--grey);
--border-radius: 5px;
}
*::-webkit-scrollbar {
display: none;
}
* {
margin: 0;
padding: 0;
scroll-padding: 4.5em;
transition: all 0.2s;
}
html {
position: relative;
min-height: 100%;
font-family: Verdana, Geneva, Tahoma, sans-serif
}
body {
background-color: var(--background);
color: var(--foreground);
}
main {
min-height: 100vh;
}
a {
text-decoration: none;
color: var(--blue);
}
a:hover {
opacity: 80%;
}
hr {
border: var(--border);
border-bottom: none;
}
blockquote {
background-color: var(--grey);
color: var(--blue);
border-left: solid 5px var(--blue);
margin: 1em auto;
padding: 10px 1em;
}
pre, kdb, p > code {
font-family: monospace;
background-color: var(--grey);
color: var(--green);
border-radius: var(--border-radius);
font-size: 12pt;
padding: 3px;
}
figcaption, cite > p, blockquote > p {
color: inherit;
background-color: inherit;
}
header {
position: sticky;
top: 0;
z-index: 10;
}
p, hr, ul, ol {
margin-top: 0.5em;
margin-bottom: 0.5em;
list-style-position: inside;
}
footer {
position: relative;
padding: 1em 0;
margin-top: 2em;
text-align: center;
background-color: var(--grey);
}
footer > p {
margin: 0;
padding: 0;
}
.intro {
max-width: 60ch;
margin: 1em;
}
.card {
min-width: 16em;
max-width: 16em;
margin: 5px;
background-color: var(--background);
}
.card hgroup {
border-left: var(--border);
border-right: var(--border);
border-bottom: var(--border);
border-radius: 0px 0px var(--border-radius) var(--border-radius);
padding: 1em;
height: 8em;
}
.tags {
border: var(--border);
border-radius: var(--border-radius);
margin: 5px;
padding: 1em;
}
.tags-link {
color: var(--foreground);
}
.tags:hover {
background-color: var(--blue);
}
.tags-link:hover {
color: var(--background);
}
.center {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
ul, ol, .post p {
font-size: 16pt;
}
.thumbnail {
display: flex;
border-radius: var(--border-radius) var(--border-radius) 0px 0px;
min-width: 100%;
height: 6em;
background-color: var(--grey);
}
.thumbnail > p {
align-content: center;
justify-content: center;
margin-left: auto;
margin-right: auto;
}
.thumbnail > img {
max-width: 100%;
height: 5em;
object-fit: contain;
margin: auto;
}
.post {
max-width: 80ch;
}
.post hgroup > h1 {
font-size: 24pt;
margin: 0;
padding: 0;
}
.post hgroup > p {
font-size: 18pt;
}
.post-link {
color: var(--foreground);
}
.post {
display: block;
margin-left: auto;
margin-right: auto;
padding: 1em;
}
.post img {
border-radius: var(--border-radius);
max-height: 400px;
}
.post h1 {
font-size: 20pt;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.post-content > h1 {
border-bottom: var(--border);
}
.post-thumbnail {
display: flex;
border-radius: var(--border-radius);
width: 100%;
height: 200px;
margin-bottom: 1em;
background-color: var(--grey);
}
.post-thumbnail > p {
align-content: center;
justify-content: center;
margin-left: auto;
margin-right: auto;
font-size: 24pt;
}
iframe, .post-content img {
max-width: 100%;
object-fit: cover;
display: block;
margin: 1em auto;
border: var(--border);
}
.alert {
display: flex;
flex-wrap: wrap;
justify-content: center;
border-radius: var(--border-radius);
background-color: var(--red);
color: var(--grey);
padding: 3em;
margin: 3em;
}
table, th, td {
border: var(--border);
padding: 5px;
border-collapse: collapse;
}
table {
display: block;
margin-left: auto;
margin-right: auto;
border: none;
overflow: scroll;
}
th, td {
padding-left: 1em;
padding-right: 1em;
margin: 0;
}
th {
font-weight: bold;
background-color: var(--grey);
}
th:hover {
opacity: 80%;
}
td:hover {
background-color: var(--grey);
opacity: 50%;
}
nav {
background-color: var(--background);
border-bottom: var(--border);
height: 60px;
display: flex;
align-items: center;
margin-bottom: 1em;
justify-content: space-between;
}
nav a {
padding: 20px;
align-items: center;
text-decoration: none;
color: var(--foreground);
}
nav > ul {
list-style: none;
display: inline-flex;
}
#drop-zone {
display: flex;
justify-content: center;
}
button {
background-color: var(--grey);
color: var(--foreground);
padding: 5px 15px;
margin: 2px;
border: var(--border);
border-radius: var(--border-radius);
}
button:hover {
background-color: var(--blue);
color: var(--background);
}
#download-button, #reset-button {
margin: 8px;
}
#convert {
padding: 10px 18px;
}
#convert:hover {
background-color: var(--cyan);
}
#image-canvas{
display: block;
margin: auto;
max-height: 250px;
border: var(--border);
border-radius: var(--border-radius);
}
#custom-menu {
margin: 5px;
}
#loading-screen {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
text-align: center;
backdrop-filter: blur(10px);
}
@media only screen and (max-width: 830px) {
.post hgroup > h1 {
font-size: 22pt;
margin: 0 !important;
}
.post hgroup > p {
font-size: 16pt;
}
.post {
border: none;
}
.post h1 {
font-size: 18pt;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.post-thumbnail {
max-height: 150px;
}
ul, ol, .post p {
font-size: 14pt;
}
}

BIN
assets/fav.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.8 KiB

300
assets/js/prism.js Normal file
View file

File diff suppressed because one or more lines are too long

186
assets/js/walls/convert.js Normal file
View file

@ -0,0 +1,186 @@
// Canvas loading variables
var imageLoader = document.getElementById('drop-zone');
imageLoader.addEventListener('change', e => {
handleImage(e.target.files[0])
});
window.addEventListener('paste', e => {
handleImage(e.clipboardData.files[0])
});
// Prevent default drag behaviors
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(e => {
document.body.addEventListener(e, preventDefaults, false)
});
// Handle dropped files
document.body.addEventListener('drop', e => {
handleImage(e.dataTransfer.files[0])
});
// Prevent default drag behaviors
function preventDefaults(e) {
e.preventDefault();
e.stopPropagation();
}
var canvas = document.getElementById('image-canvas');
var ctx = canvas.getContext('2d');
// Buttons and divs that get hidden/change
const downloadButton = document.getElementById('download-button');
const resetButton = document.getElementById('reset-button');
const loadingScreen = document.getElementById("loading-screen");
const colours_div = document.getElementById("colours");
const palette_div = document.getElementById('palette')
// Changing visibility of download/reset buttons, image canvas, and the menu for custom theme
downloadButton.style.visibility = 'hidden';
resetButton.style.visibility = 'hidden';
canvas.style.visibility = 'hidden';
loadingScreen.style.visibility = 'hidden';
// Global variables
let ogimage;
let theme = [];
let nodes = 0;
let colour_palette_count = 0;
let menuVisible = false;
let list_of_themes;
// Fetch data from themes.json
fetch("/assets/js/walls/themes.json")
.then((res) => res.json())
.then((data) => {
list_of_themes = data;
});
// Loads image onto canvas
function handleImage(source){
ogimage = source;
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.onload = function(){
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img,0,0);
}
img.src = event.target.result;
}
reader.readAsDataURL(source);
downloadButton.style.visibility = 'hidden';
resetButton.style.visibility = 'hidden';
canvas.style.visibility = 'visible';
}
// Resets the image by taking the data of the original image and calling handleImage
function reset(){
handleImage(ogimage);
}
// Displays the colour palette
function displayPalette(){
// Deletes previous colour palette
if (colour_palette_count != 0){
for (var i = 0; i < colour_palette_count; i++){
document.getElementById("palette").removeChild(palette_div.lastElementChild);
}
colour_palette_count = 0;
}
// Create new colour palette
var width = Math.max(window.screen.width, window.innerWidth);
var square = "1em";
if (width < 500){
square = "0.5em"
}
for(var i = 0; i < theme.length; i+=3){
const palette_node = document.createElement("div");
palette_node.style.display = "inline-block";
palette_node.style.height = square;
palette_node.style.width = square;
palette_node.style.border = 'var(--border)';
palette_node.style.backgroundColor = "rgb("+theme[i]+","+theme[i+1]+","+theme[i+2]+")";
palette_div.appendChild(palette_node);
colour_palette_count++;
}
}
function initialize(){
loadingScreen.style.opacity = '100';
loadingScreen.style.visibility = 'visible';
loadingScreen.style.transition = '0s';
setTimeout(function(){
convertImage();
loadingScreen.style.transition = '0.5s';
loadingScreen.style.opacity = '0';
loadingScreen.style.visibility = 'hidden';
},0);
}
/*
This is the function that processes the image.
It works by scanning every pixel and finding the nearest colour.
After finding the nearest colour, it uses that data to reconstruct the image.
*/
function convertImage(){
downloadButton.style.visibility = 'hidden';
resetButton.style.visibility = 'hidden';
// Assigning variables
var imageData = ctx.getImageData(0,0,canvas.width, canvas.height);
var pixels = imageData.data;
var numPixels = pixels.length;
var lens = [];
var minimum = 0;
var x = 0;
// Create the canvas to the dimensions of the image
ctx.clearRect(0, 0, canvas.width, canvas.height);
// For every pixel in the image
for (var i = 0; i < numPixels; i+=4) {
minimum = 0;
// For the amount of colours there are in the theme
for (var j = 0; j < theme.length; j+=3) {
// 3d distance formula
lens[x] = (Math.sqrt(Math.pow(pixels[i]-theme[j],2)+Math.pow(pixels[i+1]-theme[j+1],2)+Math.pow(pixels[i+2]-theme[j+2],2)));
x += 1;
}
x = 0;
// Sort to find the smallest value (closest distance)
for (var k = 1; k < lens.length; k++) {
if (lens[k] < lens[minimum]){
minimum = k;
}
}
// Assign the R,G, and B values based on the smallest value
for (var k = 0; k < 3; k++){
pixels[i+k] = theme[minimum*3+k]
}
}
// Reconstruct the image and make the download/reset buttons visible
ctx.putImageData(imageData, 0, 0);
downloadButton.style.visibility = 'visible';
resetButton.style.visibility = 'visible';
loadingScreen.style.visibility = 'hidden';
}
//Download function. Works on desktop browsers only at the moment.
function downloadImage(){
image = canvas.toDataURL("image/png");
var link = document.createElement('a');
link.download = "wallpaper-theme-converter.png";
link.href = image;
link.click();
}
// Change values from RGB values of each palette, stored in themes.json
function changeTheme(name){
theme = list_of_themes[name];
displayPalette();
}

156
assets/js/walls/themes.json Normal file
View file

@ -0,0 +1,156 @@
{
"Brogrammer":[
31,31,31,
26,26,26,
48,48,48,
214,219,229,
255,255,255,
248,17,24,
45,197,94,
236,186,15,
42,132,210,
78,90,183,
16,129,214,
222,53,46,
29,211,97,
251,61,9,
16,129,214,
83,80,185,
15,125,219
],
"Onedark":[
23,27,35,
40,44,52,
57,61,69,
74,78,86,
154,161,174,
171,178,191,
224,108,117,
152,195,121,
229,192,123,
97,175,239,
198,120,221,
86,182,194],
"Gruvbox":[
40,40,40,
29,32,33,
50,48,47,
60,56,54,
80,73,69,
102,92,84,
124,111,100,
235,219,178,
251,241,199,
213,196,161,
189,174,147,
168,153,132,
146,131,116,
204,36,29,
251,73,52,
214,93,14,
254,128,25,
215,153,33,
250,189,47,
152,151,26,
184,187,38,
104,157,106,
142,192,124,
69,133,136,
131,165,152,
177,98,134,
211,134,155],
"Nord":[
46,52,64,
59,66,82,
67,76,94,
76,86,106,
216,222,233,
229,233,240,
236,239,244,
143,188,187,
136,192,208,
129,161,193,
94,113,172,
191,97,106,
208,135,112,
235,203,139,
163,190,140,
180,142,173],
"Everforest":[
35,42,46,
45,53,59,
52,63,68,
61,72,77,
71,82,88,
79,88,94,
86,99,95,
84,58,72,
81,64,69,
66,80,71,
58,81,93,
77,76,67,
211,198,170,
230,126,128,
230,152,117,
219,188,127,
167,192,128,
131,192,146,
127,187,179,
214,153,182,
122,132,120,
133,146,137,
157,169,160],
"Solarized":[
0,43,54,
7,54,66,
88,110,117,
101,123,131,
131,148,150,
147,161,161,
238,232,213,
253,246,227,
181,137,0,
203,75,22,
220,50,47,
211,54,130,
108,113,196,
38,139,210,
42,161,152,
133,153,0],
"Catppuccin":[
22,19,32,
26,24,38,
30,30,46,
48,45,65,
87,82,104,
110,108,126,
152,139,162,
195,186,198,
217,224,238,
201,203,255,
245,224,220,
242,205,205,
221,182,242,
245,194,231,
232,162,175,
242,143,173,
248,189,150,
250,227,176,
171,233,179,
181,232,224,
150,205,251,
137,220,235],
"Dracula":[
40,42,54,
68,71,90,
68,71,90,
248,248,242,
98,114,164,
139,233,253,
80,250,123,
255,184,108,
255,121,198,
189,147,249,
255,85,85,
241,250,140]
}

BIN
assets/media/172e102163b5d12004bf2b02448225ee.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
assets/media/d33433eab22f20a3d127bef9476018b3.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
assets/media/posts/46a54cc30ea925f976fc9b3f046da947.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 69 KiB

BIN
assets/media/posts/6ebb3e1fd862ed25261a0aa0e51a5564.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 109 KiB

BIN
assets/media/posts/87bfdf33161881e40a88ddcf123be791.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 64 KiB

BIN
assets/media/posts/901d15628e3491670f85c866621023eb.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
assets/media/tutoriais/5ea23c05e100e5031eca4abfca246e35.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 65 KiB

354
blog.html Normal file
View file

@ -0,0 +1,354 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="pt-br" />
<meta name="description" content="Meu website pessoal" />
<meta name="author" content="Tukain" />
<meta name="generator" content="Lume" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/assets/fav.webp" type="image/webp" />
<link href="/assets/css/styles.css" rel="stylesheet">
<title>Tukain's Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="/">início</a>
<li>
</ul>
<ul>
<li>
<a href="/blog.html">blog</a>
</li>
<li>
<a href="/conversor.html">conversor</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="post center">
<ul style="list-style: none">
<li>
<hgroup>
<a href="/posts/proton.html">
<h1>Tô usando o Proton</h1>
</a>
<p>O serviço gratuito agora é até que bem bacana</p>
</hgroup>
</li>
<hr>
<li>
<hgroup>
<a href="/posts/lume ssg.html">
<h1>Lume - O novo SSG que estou utilizando</h1>
</a>
<p>O Jekyll deu uma experiência ótima, mas o Lume está dando uma incrível.</p>
</hgroup>
</li>
<hr>
<li>
<hgroup>
<a href="/posts/tô usando o jekyll de novo.html">
<h1>Tô usando o Jekyll de novo</h1>
</a>
<p>Acho melhor eu ir logo a um psicólogo, isso não deve ser normal</p>
</hgroup>
</li>
<hr>
<li>
<hgroup>
<a href="/posts/emacs!.html">
<h1>Emacs!</h1>
</a>
<p>Não sei se vou voltar totalmente, mas já tô configurando ele.</p>
</hgroup>
</li>
<hr>
<li>
<hgroup>
<a href="/posts/um setup (quase) completamente novo.html">
<h1>Um setup (quase) completamente novo</h1>
</a>
<p>Os pensamentos intrusivos me dominaram</p>
</hgroup>
</li>
<hr>
<li>
<hgroup>
<a href="/posts/simplifiquei o site.html">
<h1>Simplifiquei o site</h1>
</a>
<p>Não estou mais usando nem o Bootstrap, nem o Jekyll.</p>
</hgroup>
</li>
<hr>
<li>
<hgroup>
<a href="/posts/voltei ao chromeos flex.html">
<h1>Voltei ao ChromeOS Flex</h1>
</a>
<p>E a usar o VSCode também.</p>
</hgroup>
</li>
<hr>
<li>
<hgroup>
<a href="/posts/agora eu tô usando bootstrap.html">
<h1>Agora eu tô usando Bootstrap</h1>
</a>
<p>Eita que cara que não sabe se usa ou não um framework</p>
</hgroup>
</li>
<hr>
<li>
<hgroup>
<a href="/posts/jekyll.html">
<h1>Jekyll</h1>
</a>
<p>O gerador de sites estáticos que estou usando agora</p>
</hgroup>
</li>
<hr>
<li>
<hgroup>
<a href="/posts/eu usei eu usei javascript.html">
<h1>Eu usei... Eu usei Javascript.</h1>
</a>
<p>Pelo menos não é React.</p>
</hgroup>
</li>
<hr>
<li>
<hgroup>
<a href="/posts/o que ando fazendo.html">
<h1>O que ando fazendo</h1>
</a>
<p>Algumas das coisas que fiz e estou fazendo no momento</p>
</hgroup>
</li>
<hr>
<li>
<hgroup>
<a href="/posts/harebuild.html">
<h1>Harebuild</h1>
</a>
<p>Um build system no estilo do Zig Build System</p>
</hgroup>
</li>
<hr>
<li>
<hgroup>
<a href="/posts/ziglang.html">
<h1>Zig</h1>
</a>
<p>A linguagem com o melhor build system que já usei até hoje</p>
</hgroup>
</li>
<hr>
<li>
<hgroup>
<a href="/posts/neatvi.html">
<h1>Neatvi</h1>
</a>
<p>Um editor de texto extremamente simples, mas extensível.</p>
</hgroup>
</li>
<hr>
<li>
<hgroup>
<a href="/posts/automatizei o sistema de blogs do site.html">
<h1>Automatizei o sistema de blogs do site</h1>
</a>
<p>Agora a criação de posts é semelhante ao Hugo.</p>
</hgroup>
</li>
<hr>
<li>
<hgroup>
<a href="/posts/alpine linux.html">
<h1>Alpine Linux</h1>
</a>
<p>Simplesmente incrível</p>
</hgroup>
</li>
<hr>
<li>
<hgroup>
<a href="/posts/meu progresso com a raylib.html">
<h1>Meu progresso</h1>
</a>
<p>Como anda o meu progresso com o raylib.ha</p>
</hgroup>
</li>
<hr>
<li>
<hgroup>
<a href="/posts/raylib.ha.html">
<h1>raylib.ha</h1>
</a>
<p>Meu primeiro projeto com a Hare</p>
</hgroup>
</li>
<hr>
<li>
<hgroup>
<a href="/posts/algumas atualizações.html">
<h1>Algumas atualizações</h1>
</a>
<p>Porquê eu sou tão indeciso?</p>
</hgroup>
</li>
<hr>
<li>
<hgroup>
<a href="/posts/até mais pico.css.html">
<h1>Até mais, Pico.css!</h1>
</a>
<p>Você foi extremamente útil, mas não preciso mais de você.</p>
</hgroup>
</li>
<hr>
<li>
<hgroup>
<a href="/posts/deixando a hare de lado por enquanto.html">
<h1>Deixando a Hare de lado... Por enquanto.</h1>
</a>
<p>Devo me concentrar em apenas uma linguagem por enquanto.</p>
</hgroup>
</li>
<hr>
<li>
<hgroup>
<a href="/posts/a simplicidade de c e hare.html">
<h1>A simplicidade de C e Hare</h1>
</a>
<p>Nem um pouco parecido com um mostro de 7 cabeças</p>
</hgroup>
</li>
<hr>
<li>
<hgroup>
<a href="/posts/hare.html">
<h1>Hare</h1>
</a>
<p>A linguagem que escolhi para aprender a programar</p>
</hgroup>
</li>
<hr>
<li>
<hgroup>
<a href="/posts/a linguagem golang.html">
<h1>Golang</h1>
</a>
<p>Uma linguagem simples</p>
</hgroup>
</li>
<hr>
<li>
<hgroup>
<a href="/posts/o editor de código lite-xl.html">
<h1>Lite-XL</h1>
</a>
<p>Um editor de texto no estilo do VSCode</p>
</hgroup>
</li>
<hr>
<li>
<hgroup>
<a href="/posts/qutebrowser.html">
<h1>Qutebrowser</h1>
</a>
<p>Meu navegador web favorito</p>
</hgroup>
</li>
<hr>
<li>
<hgroup>
<a href="/posts/reconstruindo meu site.html">
<h1>Reconstruindo meu site</h1>
</a>
<p>Como foi refazer o meu site usando o pico.css 2.0</p>
</hgroup>
</li>
<hr>
<li>
<hgroup>
<a href="/posts/neovim, o rei dos editores.html">
<h1>Neovim</h1>
</a>
<p>Por que eu não usei isso antes?</p>
</hgroup>
</li>
<hr>
<li>
<hgroup>
<a href="/posts/o protocolo gemini.html">
<h1>Gemini</h1>
</a>
<p>Um protocolo muito interessante</p>
</hgroup>
</li>
<hr>
<li>
<hgroup>
<a href="/posts/prism.html">
<h1>Testando o Prism.js</h1>
</a>
<p>Teste de syntax highlighting</p>
</hgroup>
</li>
<hr>
<li>
<hgroup>
<a href="/posts/teste do lumecms.html">
<h1>Teste do LumeCMS</h1>
</a>
<p>Isso é só um teste.</p>
</hgroup>
</li>
<hr>
</ul>
</div>
</main>
</body>
</html>

80
conversor.html Normal file
View file

@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="pt-br" />
<meta name="description" content="Meu website pessoal" />
<meta name="author" content="Tukain" />
<meta name="generator" content="Lume" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/assets/fav.webp" type="image/webp" />
<link href="/assets/css/styles.css" rel="stylesheet">
<title>Tukain's Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="/">início</a>
<li>
</ul>
<ul>
<li>
<a href="/blog.html">blog</a>
</li>
<li>
<a href="/conversor.html">conversor</a>
</li>
</ul>
</nav>
</header>
<main>
<head>
<title>{{ title }}</title>
<link rel="stylesheet" href="/assets/css/styles.css" />
<script src="/assets/js/walls/convert.js" defer></script>
</head>
<div id="loading-screen">
<p>Loading...</p>
</div>
<br/>
<div id="main-container">
<div id="drop-zone" ondragover="handleImage();">
<input type="file" id="image-loader" name="image-loader" accept=".jpg, .jpeg, .png, .webp" />
</div>
<br/>
<canvas id="image-canvas"></canvas>
<div style="display:flex; justify-content: center;">
<button class="important-button" id ="download-button" type="button" onclick="downloadImage()">Baixar</button>
<button class="important-button" id ="reset-button" type="button" onclick="reset()">Restaurar</button>
</div>
<div style="text-align: center">
<h3 id = "loading">Selecione um tema</h3>
<div id="palette" style="height:1em;">
</div>
<hr/>
<button type="button" onclick="changeTheme('Brogrammer')">Brogrammer</button>
<button type="button" onclick="changeTheme('Onedark')">Onedark</button>
<button type="button" onclick="changeTheme('Gruvbox')">Gruvbox</button>
<button type="button" onclick="changeTheme('Nord')">Nord</button>
<button type="button" onclick="changeTheme('Solarized')">Solarized</button>
<button type="button" onclick="changeTheme('Catppuccin')">Catppuccin</button>
<button type="button" onclick="changeTheme('Dracula')">Dracula</button>
<button type="button" onclick="changeTheme('Everforest')">Everforest</button>
<br/>
<hr/>
<button class="important-button" id="convert" type="button" onclick="initialize()">Converter</button>
</div>
</div>
<!--
Original Code From:
https://github.com/NotNeelPatel/WallpaperThemeConverter
-->
</main>
</body>
</html>

88
index.html Normal file
View file

@ -0,0 +1,88 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="pt-br" />
<meta name="description" content="Meu website pessoal" />
<meta name="author" content="Tukain" />
<meta name="generator" content="Lume" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/assets/fav.webp" type="image/webp" />
<link href="/assets/css/styles.css" rel="stylesheet">
<title>Tukain's Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="/">início</a>
<li>
</ul>
<ul>
<li>
<a href="/blog.html">blog</a>
</li>
<li>
<a href="/conversor.html">conversor</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="center">
<hgroup class="intro">
<h1>Tukainpng</h1>
<p>
Usuário Linux / Blogger / Admirador de software livre
</p>
</hgroup>
</div>
<div class="center">
<article class="card">
<a href="https://codeberg.org/tukain" class="post-link">
<div class="center">
<div class="thumbnail">
<img src="/assets/media/d33433eab22f20a3d127bef9476018b3.webp">
</div>
</div>
<hgroup>
<h3>
Meu codeberg
</h3>
<p>
Local onde você pode encontrar meus projetos e outras coisas em que
estou trabalhando.
</p>
</hgroup>
</a>
</article>
<article class="card">
<a href="https://www.linkedin.com/in/diogo-fernandes-710193282/" class="post-link">
<div class="center">
<div class="thumbnail">
<img src="/assets/media/172e102163b5d12004bf2b02448225ee.webp">
</div>
</div>
<hgroup>
<h3>
Meu LinkedIn
</h3>
<p>
Local onde você pode entrar em contato, ver onde
trabalhei e quais são as minhas conexões.
</p>
</hgroup>
</a>
</article>
</div>
</main>
</body>
</html>

81
posts/a linguagem golang.html Normal file
View file

@ -0,0 +1,81 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="pt-br" />
<meta name="description" content="Uma linguagem simples" />
<meta name="author" content="Tukain" />
<meta name="generator" content="Lume" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/assets/fav.webp" type="image/webp" />
<link href="/assets/css/styles.css" rel="stylesheet">
<title>Tukain's Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="/">início</a>
<li>
</ul>
<ul>
<li>
<a href="/blog.html">blog</a>
</li>
<li>
<a href="/conversor.html">conversor</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="post">
<article>
<hgroup>
<a href="/posts/a linguagem golang.html">
<h1>Golang</h1>
</a>
<p>Uma linguagem simples</p>
</hgroup>
<hr>
<div class="post-content">
<p>Nos últimos dias eu estive estudando linguagens de programação (não, eu não
planejo seguir uma carreira nisso, é só um hobbie), e até agora já dei uma
olhada em Javascript, Lua, C, Rust, Elisp e agora Go.</p>
<h1>Uma sintaxe simples</h1>
<p>Eu nem sequer tenho conhecimento da lógica de programação, mas
eu consegui, de forma intuitiva re-escrever alguns programas de exemplo, feitos
originalmente em C, em Go. E foi algo extremamente satisfatório.</p>
<p>Foi como um <em>click</em>, e pronto, não só tinha “traduzido” o código C em Go, como fiz
um programa mais sofisticado, sem precisar quebrar a cabeça para fazer
isso.</p>
<p>Para mim, a sintaxe do Go me lembrou muito a sintaxe do C em
alguns aspectos e Lua em outros, o que me permitiu em muito pouco tempo
entender como certas coisas funcionam.</p>
<h1>Eu não nem sequer sei lógica de programação</h1>
<p>Esse é um ponto que eu quero dar certo ênfase, eu não sei,
factualmente, o que é a lógica de programação, eu tenho certo entendimento
intuitivo de certas coisas por conta de experiências passadas, mas nunca
estudei sobre propriamente.</p>
<p>Isso é algo que faço a muito tempo na
verdade, eu estudo pouco, quebro minha cabeça muito e chega alguma hora que eu
acabo aprendendo. Definitivamente não é uma forma eficiente de se aprender
qualquer coisa, muito menos recomendo, porém, é algo que funciona até certo
grau comigo.</p>
<p>Isso me agrada porque me mostra que eu estou progredindo,
mesmo que aos poucos, e alegra meu dia saber disso.</p>
<h1><em>Fin</em></h1>
<p>Enfim, é só isso o que eu tenho a dizer por enquanto</p>
<p>Até o próximo post!</p>
</div>
</article>
</div>
</main>
</body>
</html>

140
posts/a simplicidade de c e hare.html Normal file
View file

@ -0,0 +1,140 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="pt-br" />
<meta name="description" content="Nem um pouco parecido com um mostro de 7 cabeças" />
<meta name="author" content="Tukain" />
<meta name="generator" content="Lume" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/assets/fav.webp" type="image/webp" />
<link href="/assets/css/styles.css" rel="stylesheet">
<title>Tukain's Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="/">início</a>
<li>
</ul>
<ul>
<li>
<a href="/blog.html">blog</a>
</li>
<li>
<a href="/conversor.html">conversor</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="post">
<article>
<hgroup>
<a href="/posts/a simplicidade de c e hare.html">
<h1>A simplicidade de C e Hare</h1>
</a>
<p>Nem um pouco parecido com um mostro de 7 cabeças</p>
</hgroup>
<hr>
<div class="post-content">
<p>Recentemente eu fiz um post sobre os meus estudos com a linguagem de
programação Hare, falei sobre o que eu planejo fazer com esse conhecimento
entre outras coisas. Mas algo que eu não comentei sobre foi o fato de eu estar
estudando Hare em conjunto com C (só mencionei que a sintaxe da Hare é
semelhante a C).</p>
<h1>Por quê estou fazendo isso?</h1>
<p>Bom, isso é algo que eu simplesmente esqueci de comentar no meu último post, estou fazendo isso
por 2 motivos principais:</p>
<p>As sintaxes são semelhantes, então posso pegar
um conhecimento novo de uma e levar para outra; Ambas são linguagens low-level,
com foco em alto desempenho e possuem manipulação manual de memória, então
posso aprender esse conceito de forma prática. Claro que existem outros motivos
para eu fazer algo nesse estilo, mas eu não vejo a necessidade de listar todos
eles aqui. Afinal, já é algo “estranho” para um jovem da minha idade ter
interesse em uma “linguagem defasada e insegura” como a C, ao invés de querer
aprender algo como Python, Ruby ou Javascript.</p>
<h1>Existe algum outro motivo?</h1>
<p>Óbviamente que sim. Aprender C/Hare é algo como um sonho que
quero, e posso, tornar realidade. É algo que chega perto de uma romantização,
um sentimento que dá vontade de correr atrás, de se esforçar para
alcança-lo.</p>
<p>Quase como você sonha em ter seu próprio carro, viver
sozinho, ou viajar o mundo. Não é um sentimento fácil de por em palavras.</p>
<h1>Como está meu progresso até agora?</h1>
<p>Bom, eu iniciei meus estudos a
pouquíssimo tempo, então ainda estou em meus estágios iniciais. Porém já
aprendi alguns conceitos básicos como if statements, which loop, for loop,
switch-case, structs e alguns types também (tanto em C quanto em Hare).</p>
<p>Também comecei a fazer alguns programas extremamente simples só para fixar
esses conceitos na minha cabeça, um exemplo desses programas é um programa que
cria um arquivo vazio usando um nome que o usuário fornece.</p>
<h1>Escrito em C:</h1>
<pre><code class="language-c">int main()
{
FILE *arq;
char nome[100];
printf(&quot;Digite o nome do arquivo: &quot;);
scanf(&quot;%s&quot;, &amp;nome[0]);
if (fopen(nome, &quot;r&quot;))
{
printf(&quot;O arquivo já existe.\n&quot;);
}
else
{
arq = fopen(nome, &quot;w&quot;);
}
}
</code></pre>
<h1>Escrito em Hare:</h1>
<pre><code class="language-rust">use os;
use bufio;
use strings;
export fn main() void = {
let arquivo = nomeDoArquivo();
if (os::exists(arquivo)) {
fmt::println(&quot;Arquivo já existe.\n&quot;)!;
} else {
os::create(arquivo, 384)!;
};
};
fn nomeDoArquivo() str = {
fmt::printf(&quot;Escreva o nome do arquivo.\n:&quot;)!;
const inputUser = bufio::read_line(os::stdin)! as []u8;
return strings::fromutf8(inputUser)!;
};
</code></pre>
<h1>As diferenças</h1>
<p>Algo que já para notar nesses exemplos é que o código
em Hare é um pouco maior que o código em C, o motivo disso é que a Hare tem um
foco na manipulação de erros. O que faz com que você tenha não só ter plena
noção do que deve ser feito em caso de algum erro, mas também dizer ao programa
o que ele vai fazer em caso de erro.</p>
<p>A consequência disso é ter um pouco
mais de linhas de código necessárias e também mais símbolos para serem
utilizados durante a escrita do programa.</p>
<p>Apesar disso, eu acho a
sintaxe da Hare mais legível que a C em alguns casos, como por exemplo na
criação e utilização de structs.</p>
<h1><em>Fin</em></h1>
<p>Bem, isso é tudo o que eu tenho a dizer por agora.</p>
<p>Até o próximo post!</p>
</div>
</article>
</div>
</main>
</body>
</html>

104
posts/agora eu tô usando bootstrap.html Normal file
View file

@ -0,0 +1,104 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="pt-br" />
<meta name="description" content="Eita que cara que não sabe se usa ou não um framework" />
<meta name="author" content="Tukain" />
<meta name="generator" content="Lume" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/assets/fav.webp" type="image/webp" />
<link href="/assets/css/styles.css" rel="stylesheet">
<title>Tukain's Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="/">início</a>
<li>
</ul>
<ul>
<li>
<a href="/blog.html">blog</a>
</li>
<li>
<a href="/conversor.html">conversor</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="post">
<article>
<hgroup>
<a href="/posts/agora eu tô usando bootstrap.html">
<h1>Agora eu tô usando Bootstrap</h1>
</a>
<p>Eita que cara que não sabe se usa ou não um framework</p>
</hgroup>
<hr>
<div class="post-content">
<p>Olha só quem tá dando as caras de novo? O muleque que vive dando hate no
Javascript… E olha só! Usando o Bootstrap.</p>
<h1>Pois é, tô usando Bootstrap.</h1>
<p>Sendo bem sincero, eu não faço a menor ideia se isso será algo permanente
(duvido muito) ou se sequer vá ser duradouro, mas o que importa é que na data
de publicação deste post, eu usei Bootstrap.</p>
<p>Também estou usando o Javascript do Bootstrap, então é questão de tempo até
esse site ter mais alguns elementos interativos.</p>
<p>Mas uma vez a estrutura do meu site se provou versátil, visto que em torno de 3
horas, eu já tinha adaptado todo o site para o Bootstrap.</p>
<p>Até agora, a única coisa negativa que eu consigo dizer sobre o Bootstrap é o
quão enorme os elementos html ficam, mas isso é algo que acontece até mesmo com
o Tailwind, então não acho que seja algo que mereça tanto destaque.</p>
<h1>O design</h1>
<p>O design do Bootstrap é algo que realmente me atrai, é um visual simplista com
elementos fáceis de ler, poucas distrações e com um ótimo contraste.</p>
<p>É claro que eu gostava (e ainda gosto) de como a aparência do meu site estava
ficando, e também da paleta de cores, mas eu (pelo menos agora) quero me
concentrar em estruturar o meu site e em fazer articos, e deixar a estilização
dele para o futuro.</p>
<p>Uma mudança na lista de posts (e nos posts em si) é a presença de thumbnails,
agora eu tenho mais uma coisa para me preocupar quando fazer um post! Yay… 😭</p>
<p>Bom, nem tanto, o meu script sempre deixa um placeholder pro caso
de eu não ter alguma imagem para usar, então isso não é lá uma coisa que eu
<strong>tenha</strong> que me preocupar.</p>
<h1>Ainda estou usando o Jekyll</h1>
<p>Claro que eu não me daria todo esse trabalho só para deixar de usar o Jekyll,
simplesmente não tem como eu voltar atrás, todo o site está estruturado para
usar o Jekyll.</p>
<p>A cada dia que se passa eu gosto mais e mais do Jekyll, a facilidade de só
precisar criar uma template e ter dezenas de páginas geradas com o mesmo design
e com a única diferença mesmo sendo o conteúdo da página sempre me da um
pequeno pico de dopamina.</p>
<p>É a mesma sensação de ficar minutos modificando algo escrito em C e na hora da
compilação você não ter nenhum erro.</p>
<p>Uma coisa que eu removi foram as tags, mas isso é algo que eu planejo por de
volta quando estiver mais confortável com o Bootstrap.</p>
<h1>Já já isso aqui vai se tornar o meu portifólio</h1>
<p>Não é atoa que eu tô usando o Bootstrap, pelo menos aqui no Brasil, saber
utilizar o Bootstrap é uma habilidade desejável, já que ele agiliza no processo
de fazer o front-end de algo, claro que só saber isso não é o suficiente, da
mesma forma que só saber React não é.</p>
<p>Mas é uma boa eu me familiarizar com o Bootstrap, já que eventualmente eu vou
ter que entrar em território sombrio (React 😱).</p>
<p>Óbvio que também ter no currículo que você sabe de Bootstrap continua sendo um
destaque, principalmente quando comparado a não ter, mas enfim, já tô
extendendo demais esse assunto.</p>
<h1><em>Fin</em></h1>
<p>Bem, esse é mais um post curto para a coleção, mas eu já tô aqui a umas boas 4
horas, então é melhor eu descansar as mãos (<strong>NÃO PENSE BESTEIRA 🫵</strong>).</p>
<p>Até o próximo post!</p>
</div>
</article>
</div>
</main>
</body>
</html>

187
posts/algumas atualizações.html Normal file
View file

@ -0,0 +1,187 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="pt-br" />
<meta name="description" content="Porquê eu sou tão indeciso?" />
<meta name="author" content="Tukain" />
<meta name="generator" content="Lume" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/assets/fav.webp" type="image/webp" />
<link href="/assets/css/styles.css" rel="stylesheet">
<title>Tukain's Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="/">início</a>
<li>
</ul>
<ul>
<li>
<a href="/blog.html">blog</a>
</li>
<li>
<a href="/conversor.html">conversor</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="post">
<article>
<hgroup>
<a href="/posts/algumas atualizações.html">
<h1>Algumas atualizações</h1>
</a>
<p>Porquê eu sou tão indeciso?</p>
</hgroup>
<hr>
<div class="post-content">
<p>Tudo bem com você? Espero que sim. Bom, na última semana eu ando passando
quase que por uma montanha-russa de emoções. Mudei a estrutura do meu site,
migrei do Github para 3 serviços Git diferentes, voltei a usar o Neovim, decidi
deixar a Hare de lado… Mas esse último não durou muito, e eu vou começar
comentando sobre ele.</p>
<h1>Já estou usando a Hare de novo.</h1>
<p>Bom,
apesar de tudo o que eu disse em um post de uma semana atrás, eu acabei
voltando a usar a Hare. Dessa vez eu não sei muito bem como explicar o motivo
de voltar, mas posso dizer que foi algo mais emocional do que lógico. Algo como
um sentimento de nostalgia, já que Hare foi a primeira linguagem de programação
que eu realmente parei para estudar e aprender a programar com ela.</p>
<p>Pode
haver também um pouco de orgulho envolvido, já que ela é uma linguagem
relativamente desconhecida e por conta disso não existem tutoriais e vídeos
sobre ela por aí, com excessão dos vindos dos próprios desenvolvedores da Hare
e de poucas excessões como o Tsoding.</p>
<p>E não, eu ainda não sei programar,
mas posso dizer que estou aprendendo uma coisa ou outra, e devo isso à Hare.
Acho que o design dela faz com que quando eu tente fazer algo e ele não
funciona, o problema está puramente na forma em que eu me expressei, e não na
forma que eu pensei.</p>
<p>Um exemplo muito bom disso é um problema que tive
ao fazer um clone do comando “cat”. O problema era o seguinte:</p>
<p>O
programa conseguia ler o arquivo dado pelo usuário sem problema, porém, ele
mostrava apenas a primeira linha do arquivo. Então, eu precisaria de uma forma
de mostrar a linha atual e depois disso a próxima e assim por diante,
incrementando a posição atual.</p>
<p>Eu provavelmente não vou conseguir
escrever exatamente como que estava a linha de código que só mostrava a
primeira linha, mas era algo mais ou menos assim:</p>
<pre><code class="language-rust">fn lerArquivo(lines: []str) void = {
let total = len(lines);
for (let i = 0z; i &lt; total) {
fmt::println(lines[i])!;
i=i+1;
};
};
</code></pre>
<p>O erro está na 6ª linha, eu tentei fazer o valor de “i” ser incrementado por
“1” até que o valor de “i” fosse igual ao “total”, o que em questão de lógica
está correto, mas a expressão “i = i+1” está errada.</p>
<p>Se eu não estou
enganado, esta é a sintaxe usada na linguagem de programação Lua.</p>
<p>A
forma correta de incrementar um número em Hare (e em outras línguas) é com o
operador “+=”, que serve justamente para incrementar. Então, feita essa pequena
modificação, o programa re-itera pelo arquivo, lê, e escreve a linha atual sem
nenhum problema.</p>
<p>E sim, eu tomei como base parte de um exemplo da
documentação da Hare para fazer esse programa, sendo essa parte alguns dos
módulos usados, mas a lógica em si e a execução foram feitos por conta
própria.</p>
<h1>O site sofreu várias mudanças</h1>
<p>Acompanhada dessa minha
saga de estudos sobre programação, vieram também diversas mudanças com esse
site. Se bem que nesse aspecto, mudar o site é algo extremamente
recorrente. <s><a href="/2024/04/29/automatizei-o-sistema-de-blogs-do-site.html">Mas devo mencionar a atual presença de nenhum framework ou
gerador de site estático sendo usada para a criação de páginas/posts.</a></s></p>
<p>Em
relação a Web, a única coisa que se mantém consistente em todas as versões do
meu site que já existiram é a falta ou presença mínima de javascript. Com
excessão disso, já fiz diversas mudanças que variam de coisas como a estrutura
de arquivos do site, para tags usadas, classes, propriedades, enfim, toda a
infraestrutura.</p>
<p>A mudança mais atual é o meu próprio css sendo
implementado e alterado conforme minhas necessidades. É a basicamente a minha
primeira vez fazendo o css do meu site completamente do 0, e tomando cuidado
também em relação a resposividade dele com aparelhos mobile, na verdade dando
um foco especial a esses aparelhos.</p>
<p>O motivo disso é porque a única
pessoa que eu tenho não só plena certeza de que lê todos os posts, como também
é alguém que eu sempre tento agradar com cada post: a minha namorada.</p>
<p>E
bom, a forma que ela lê os artigos é por meio do celular dela, então nada mais
justo do que dar uma atenção especial para este tipo de aparelho.</p>
<h1>Migrei do Github para 3 serviços Git diferentes</h1>
<p>Ok, isso é algo que
precisa de uma explicação mais detalhada.</p>
<p>A não muito tempo atrás esse
site, junto de outros projetos, era hosteado no Github, o que eu já devo
admitir que não gostava nem um pouco. A interface gráfica é muito sem
personalidade, basicamente um espelho das interfaces corporativas que vemos
pelo mundo afora.</p>
<p>O que não é uma surpresa na verdade, afinal, o Github
é um produto da Microsoft, então isso não é nada além do mínimo esperado. E
claro, ele também é algo de código fechado.</p>
<p>Ao menos para mim, não é
muito confortável deixar algo de código aberto guardado em um produto de código
fechado, muito menos depender desse produto.</p>
<p>Mas enfim, o motivo que me
fez deixar de usar o Github foi simples: Ele simplesmente desabilitou minha
conta por conta de “atividade suspeita na conta”, sendo que essa atividade foi
realizada por mim mesmo, usando uma chave ssh verificada pela minha conta (que
inclusive tem também autenticação de 2 fatores via OTP e app).</p>
<p>E já que
o Github descidiu dar o primeiro passo, eu segui adiante.</p>
<p>Atualmente o
meu site é hosteado no Codeberg, e também é nele que guardo meus projetos,
porém, ele não é o meu Git principal, ele é o meu secundário. O meu git
primário é o git.cbps.xyz/guapito, e eu também tenho um git reserva que uso
como backup no git.disroot.org.</p>
<p>Eu mantenho todos os 3 gits
sincronizados usando uma função que os 3 compartilham por usarem o mesmo
software de servidor: push mirrors.</p>
<p>Tudo o que eu preciso fazer é
garantir que todos os 3 possuem os mesmos repositórios, depois, em 1 dos gits
eu adiciono os repositórios dos demais nas configurações do repositório
respectivo na seção de push mirros e pronto, quaisquer mudanças feitas nesse
repositório serão refletidas nos demais.</p>
<h1>Voltei a usar o Neovim</h1>
<p>Bom, eu já esperava que essa volta viria cedo ou tarde. O Helix é um ótimo
editor de texto, e ele realmente é melhor que a minha configuração do Neovim,
porém, o problema vive justamente aí, eu posso deixar o meu Neovim melhor que o
Helix com apenas alguns ajustes e 2/3 plugins.</p>
<p><s><a href="/2024/05/30/minha-nova-configura%C3%A7%C3%A3o-do-neovim.html">E eu fiz diversas
mudanças na minha configuração do Neovim, a única coisa que está faltando mesmo
é suporte a lsp, tirando isso, ela já está melhor que o Helix em seu estado
atual.</a></s></p>
<p>A simples possibilidade de modificar a interface e como as coisas
funcionam da forma que quiser já é algo que me faz preferir o Neovim. Claro que
eu não sou um maníaco por customização, sempre que uma opção limitada for
melhor que a customizável em certa tarefa, eu vou usar a opção limitada, e bom,
esse foi o caso do Helix enquanto eu não aprimorava a minha configuração do
Neovim.</p>
<p>E agora que a minha configuração está muito mais madura, eu
oficialmente posso colocar o Helix em uma posição de editor de texto
secundário, tomando o lugar do Emacs, que deixei de utilizar a um tempo.</p>
<h1><em>Fin</em></h1>
<p>Enfim, obrigado por ler este artigo, significa muito
para mim.</p>
<p>Até o próximo post!</p>
</div>
</article>
</div>
</main>
</body>
</html>

144
posts/alpine linux.html Normal file
View file

@ -0,0 +1,144 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="pt-br" />
<meta name="description" content="Simplesmente incrível" />
<meta name="author" content="Tukain" />
<meta name="generator" content="Lume" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/assets/fav.webp" type="image/webp" />
<link href="/assets/css/styles.css" rel="stylesheet">
<title>Tukain's Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="/">início</a>
<li>
</ul>
<ul>
<li>
<a href="/blog.html">blog</a>
</li>
<li>
<a href="/conversor.html">conversor</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="post">
<article>
<hgroup>
<a href="/posts/alpine linux.html">
<h1>Alpine Linux</h1>
</a>
<p>Simplesmente incrível</p>
</hgroup>
<hr>
<div class="post-content">
<p>Ontem, eu desinstalei o Arch Linux e instalei o Alpine no lugar, o motivo
não é nada relacionado com o Arch em si, só fiz isso porque eu queria voltar ao
workflow minimalista que eu tinha no Alpine.</p>
<p>Sem pacotes desnecessários,
sem bloatware, sem instabilidades aleatórias.</p>
<p>Porém, eu descobri algo
que me deixou extremamente intrigado, e também me pergunto até agora como não
tinha visto isso antes nos meus últimos 2 anos de experiência com o Alpine.</p>
<h1>$ apk fetch -R</h1>
<p>Isso acima é um comando do gerenciador de pacotes do
Alpine, o APK. Esse comando em si faz a seguinte ação: ele baixa um pacote que
o usuário especifica, junto de suas dependências.</p>
<p>Em suma, isso te dá a
possibilidade de gerir o seu próprio repositório de pacotes apk, sendo esse a
sua intenção.</p>
<p>Porém, eu notei que essa ideia de repositório local me
daria a possibilidade de fazer um backup de todo o meu setup, incluindo todos
os programas/bibliotecas e suas dependências, e poderia restaurar ele por
completo, mesmo sem conexão com a internet. Sendo a única coisa necessária ter
os arquivos comigo.</p>
<h1>E então eu o pus em prática</h1>
<p>No momento, eu
tenho cerca de 680 pacotes guardados em um diretório, e 78 manuais em outro.
Não se deixe enganar pelos números, a soma dos pacotes com os manuais não
chegam nem sequer a 1Gb.</p>
<p>O que além de facilitar no processo de
restauração do meu sistema, também me possibilita ter uma cópia em um pendrive
de até mesmo 4Gb.</p>
<p>Além destes pontos, eu também removo de tabela a
nescessidade de possuir internet para reinstalar o meu sistema do zero, já que
tudo o que eu normalmente precisaria baixar já está pronto em um diretório
local.</p>
<h1>Acidentalmente o pus a prova</h1>
<p>Ontem, antes de desligar o
computador, eu estava testando o comando apk fetch, e então instalei todos os
pacotes que estavam no repositório local. O resultado foi catastrófico.</p>
<p>Eu estava usando diversos pacotes do Alpine Edge, uma versão do Alpine que
se assemelha ao Arch, porém é ainda mais bleeding edge.</p>
<p>No processo de
instalação dos pacotes do repositório local, houveram diversos pacotes que
simplesmente foram removidos (cerca de 400) e os demais sofreram um dowgrade de
versões.</p>
<p>Tudo bem até aí, porém um dos pacotes que foram modificados
(até agora não sei se ele sofreu um downgrade ou se foi removido) foi o kernel
do sistema.</p>
<p>Senhores, o meu sistema operacional eliminou o próprio
kernel que ele estava utilizando.</p>
<p>O que aconteceu no fim, foi um reboot
feito por mim mesmo para poder ter uma nocão do estrago, e fui recebido com um
erro do bootloader dizendo que o kernel não estava sendo encontrado.</p>
<h1>Hora de reinstalar</h1>
<p>Tudo bem, isso foi erro meu, então reinstalei o
sistema. Sorte a minha que eu tinha não só acabado de finalizar o meu script de
backups, como também tinha feito um antes de todo esse desastre acontecer.</p>
<p>O resultado final não poderia ser mais gratificante. Não só o script de
backup funcionou perfeitamente, sendo possível restaurar o meu diretório home,
junto de minhas dotfiles e arquivos sensíveis como minhas chaves, mas também
todos os pacotes foram instalados sem o uso de internet com sucesso.</p>
<p>Em
torno de 15 minutos eu consegui restaurar todo o meu sistema como se nada
tivesse acontecido.</p>
<p>Tudo desde as bibliotecas que uso, como a interface
gráfica que uso (Sway) e todos os meus programas foram restaurados e
configurados da exata forma em que estavam antes da reinstalação (eis a
utilidade de dotfiles e a importância de manter um backup delas).</p>
<h1>Agora estou focado em deixar tudo offline</h1>
<p>O que quero dizer com isso é bem
simples, eu estou fazendo com que todo o meu sistema operacional, junto dos
meus programas/bibliotecas, configurações e arquivos sejam restauráveis com
facilidade e sem a nescessidade de internet ou de ferramentas complicadas.</p>
<p>O que eu usei para fazer backup dos meus arquivos e dotfiles foi um
shell-script posix feito por mim. Ele simplesmente lê 4 arquivos localizados em
$XDG_CONFIG_HOME/backup, esses arquivos são: config, share, bin e home. Esses
arquivos contém caminhos para diretórios e arquivos para os diretórios
~/.config, ~/.local/share, ~/.local/bin, ~/, respectivamente.</p>
<p>Todos os
arquivos/diretórios contidos nas listas são copiados para um diretório criado
na executação do script, ele se chama backup e fica localizado em
~/.local/backup.</p>
<p>Após todos os arquivos/diretórios serem copiados, o
diretório backup é transformado em uma tarball comprimida com gzip, sendo essa
tarball posta no diretório home (~/backup.tar.gz).</p>
<p>Ao finalizar a
criação da tarball, o diretório backup é excluído.</p>
<p>E é basicamente assim
que eu faço backups do meu sistema atualmente. É um processo simples e
prático.</p>
<h1><em>Fin</em></h1>
<p>Enfim, isso é tudo o que eu tenho para
falar por hoje.</p>
<p>Até o próximo post!</p>
</div>
</article>
</div>
</main>
</body>
</html>

85
posts/até mais pico.css.html Normal file
View file

@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="pt-br" />
<meta name="description" content="Você foi extremamente útil, mas não preciso mais de você." />
<meta name="author" content="Tukain" />
<meta name="generator" content="Lume" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/assets/fav.webp" type="image/webp" />
<link href="/assets/css/styles.css" rel="stylesheet">
<title>Tukain's Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="/">início</a>
<li>
</ul>
<ul>
<li>
<a href="/blog.html">blog</a>
</li>
<li>
<a href="/conversor.html">conversor</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="post">
<article>
<hgroup>
<a href="/posts/até mais pico.css.html">
<h1>Até mais, Pico.css!</h1>
</a>
<p>Você foi extremamente útil, mas não preciso mais de você.</p>
</hgroup>
<hr>
<div class="post-content">
<p>Com a excessão de pouquíssimas coisas, o site deve estar idêntico, porém,
por debaixo dos panos, eu mudei muita coisa.</p>
<h1>Eu removi a Pico.css do meu site.</h1>
<p>O porquê que eu fiz isso? Bom, eu andei refletindo sobre como
eu poderia melhorar esse site, e cheguei a conclusão que qualquer coisa que eu
quiser fazer irá ser feita com um CSS próprio, e eu também já tinha feito
muitas modificações na Pico.css.</p>
<p>E bem, já que eu estava fazendo tantas
modificações (porque o que vinha na Pico não me servia, ou nem sequer tinha o
que eu precisava) que decidi descartar ela e fazer o meu próprio CSS.</p>
<h1>Também removi os emojis.</h1>
<p>Por mais que os emojis foram algo que dava
certa personalidade ao website, eu tive que encarar a realidade: eles deixavam
esse site muito pesado.</p>
<p>Me refiro a peso na banda larga, para carregar o
site antigamente você precisaria de algo em torno de 3MiB à 20MiB. Sem contar
com o desempenho afetado por conta de múltiplas animações simultâneas.</p>
<h1>Como foi o processo?</h1>
<p>Foi algo gratificante e satisfatório, eu
consegui manter o layout do site quase que idêntico a quando eu usava a Pico,
até mesmo na versão mobile do site.</p>
<p>O nível de liberdade que eu tenho
agora é simplesmente incrível, se antes eu teria de conferir a documentação
para ter uma noção de como algo funcionava, agora eu só preciso conferir o
código que eu mesmo escrevi.</p>
<h1>O que vem a seguir?</h1>
<p>Por enquanto
tudo o que eu quis fazer era em relação ao CSS do site, mas acho que não vai
demorar muito até que me surja uma nova ideia sobre o que fazer com ele.</p>
<h1><em>Fin</em></h1>
<p>Bom, isso é tudo o que eu tenho para falar hoje.</p>
<p>Até o próximo post!</p>
</div>
</article>
</div>
</main>
</body>
</html>

148
posts/automatizei o sistema de blogs do site.html Normal file
View file

@ -0,0 +1,148 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="pt-br" />
<meta name="description" content="Agora a criação de posts é semelhante ao Hugo." />
<meta name="author" content="Tukain" />
<meta name="generator" content="Lume" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/assets/fav.webp" type="image/webp" />
<link href="/assets/css/styles.css" rel="stylesheet">
<title>Tukain's Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="/">início</a>
<li>
</ul>
<ul>
<li>
<a href="/blog.html">blog</a>
</li>
<li>
<a href="/conversor.html">conversor</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="post">
<article>
<hgroup>
<a href="/posts/automatizei o sistema de blogs do site.html">
<h1>Automatizei o sistema de blogs do site</h1>
</a>
<p>Agora a criação de posts é semelhante ao Hugo.</p>
</hgroup>
<hr>
<div class="post-content">
<p>Bom, isso é uma coisa um pouco difícil de explicar (nem tanto na verdade),
mas ainda assim, é algo bacana de ser comentado.</p>
<h1>Como assim “Automatizei”?</h1>
<p>Se você já usou o Hugo framework, então você sabe como
que funciona o sistema de geração de posts para blogs. E pra quem nunca usou,
aqui vai uma explicação simples de como que funciona o processo (supondo que
você já tenha uma pasta do site gerada e um tema configurado)</p>
<ol>
<li>Você digita <code class="language-plaintext highlighter-rouge">hugo new [pasta dos posts]/[nome do arquivo].md</code></li>
<li>Você abre o arquivo criado</li>
<li>Você escreve o post usando Mardown</li>
<li>Você digita <code class="language-plaintext highlighter-rouge">hugo</code></li>
<li>Pronto. O post foi gerado.</li>
</ol>
<p>A forma como o meu sistema de criação de posts funciona se assemelha um
pouco com esse processo. A diferença fica nas ferramentas usadas e em como é a
estrutura das coisas.</p>
<h1>As ferramentas e estrutura</h1>
<p>O que eu estou usando para a geração de
posts (e futuramente o rss deles), é um programa chamado <a href="https://git.codemadness.org/saait">saait</a>.
A forma como ele funciona lembra um pouco como o Hugo opera, mas a estrutura de pastas é bem mais simples
e o próprio programa não faz muito além de criar uma página com uma indexação
de outras páginas.</p>
<p>Basicamente, o saait serve apenas para criar uma
página que lista outras páginas. Porém, ele possui um sistema de templates, e
isso é o que muda tudo.</p>
<p>Todo e qualquer arquivo que você deseja criar
utilizando as templates, tem que ser previamente montado na pasta de templates.
A pasta de templates contém pastas com o nome dos arquivos que você quer gerar
(por exemplo: atom.xml), dentro delas, você cria 3 arquivos com a mesma
extensão do arquivo (seguindo o exemplo acima: header.xml, footer.xml e
item.xml).</p>
<p>Existem nomes de pastas que são reservadas, como por exemplo
a pasta page, que contém as informações de como que um post deve ser
estruturado.</p>
<p>Outra pasta que faz parte da estruturação da geração feita
pelo saait é a pages. Nela, você coloca seus posts, não tendo a necessidade de
escrever um arquivo html por completo, já que essa parte fica a cargo da
template page.</p>
<p>Ainda dentro dessa pasta é necessária atenção com uma
coisa: cada post precisa de um arquivo de configuração ([nome do arquivo].cfg),
o nome do arquivo de configuração precisa ter o mesmo nome que o arquivo html.
Dentro desse arquivo de configuração você coloca coisas como o nome do arquivo
que será gerado, o título da página, descrição, data de criação e de
modificação.</p>
<p>Uma prática que eu recomendo é a de dar um prefixo numérico
aos dois arquivos (por exemplo: 000-), isso fará com que você consiga ordenar
os posts por ordem numérica.</p>
<p>Outro programa que uso é o <a href="https://git.codemadness.org/smu">smu</a>, esse é bem mais simples de
explicar.</p>
<p>Basicamente, o smu é um programa que gera html a partir de um
arquivo de markup similar ao markdown, sendo assim, é possível usa-lo como
parte da geração dos posts, eliminando a necessidade de escrever html
diretamente.</p>
<p>Por fim, o último programa que uso é o <a href="https://git.codemadness.org/stagit">stagit</a>.
Neste caso, eu o modifiquei para que a página gerada por ele se integrasse ao meu site, mas a
funcionalidade dele é a mesma.</p>
<p>O stagit é dividido em duas partes:
stagit e stagit-index. O stagit-index é o responsável por gerar a página
inicial com a lista dos repositórios (essa sendo a parte que eu modifiquei para
meu uso) e o stagit sendo o responsável de gerar as páginas de um repositório
específico.</p>
<p>A forma como você usa os dois é bem similar, mas existe uma
diferença. No caso do stagit-index, você digita <code class="language-plaintext highlighter-rouge">stagit-index [repositórios]</code>,
fazendo isso, ele criará um site que irá indexar os
repositórios que você especificou com o comando na pasta atual.</p>
<p>Agora para que os repositórios listados tenham algum conteúdo, é necessário que você
crie pastas com os mesmos nomes dos repositórios que você indexou.</p>
<p>E é aí que o stagit entra em ação. A cada uma das pastas, você deve digitar o
comando <code class="language-plaintext highlighter-rouge">stagit [nome do repositório respectivo]</code>.</p>
<p>Tendo feito essas duas etapas, você terá um site que te deixa visualizar
repositórios.</p>
<h1>Certo, mas onde está a automação nisso?</h1>
<p>Agora é que vem a parte boa.</p>
<p>Todo esse processo gera apenas arquivos html, você
deve providenciar um arquivo CSS. Tendo isso feito, você pode scriptar todo o
resto.</p>
<p>A forma que eu faço todo esse processo é a partir de Makefiles e
1 script. As Makefiles ficam em cada pasta onde uma etapa do processo é feita
(a index dos posts, a index do stagit e cada repositório), e o script que eu
fiz serve para criar novos posts e em seguida atualizar o site.</p>
<p>Na criação de um novo post, você deve providenciar um nome para o post e uma
descrição, depois disso o seu editor de texto definido pela variável $EDITOR
será aberto em um arquivo temporário, onde será escrito o post usando o markup
do smu. Ao salvar e sair do arquivo, o post é convertivo para html e posto na
pasta pages, depois disso as Makefiles entram em ação.</p>
<p>Os posts são criados, ordenados e por fim, postos na pasta output, junto com o site git
gerado pelo stagit-index+stagit.</p>
<p>Quando todo esse processo é realizado, os arquivos dentro da pasta output são
movidos para o repositório do meu site e em seguida são postos no repositório
remoto do site, atualizando assim o site com um post novo.</p>
<h1><em>Fin</em></h1>
<p>Enfim, isso é tudo o que eu tenho para falar hoje, agora eu vou preparar a
geração do rss do site.</p>
<p>Até o próximo post!</p>
</div>
</article>
</div>
</main>
</body>
</html>

110
posts/deixando a hare de lado por enquanto.html Normal file
View file

@ -0,0 +1,110 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="pt-br" />
<meta name="description" content="Devo me concentrar em apenas uma linguagem por enquanto." />
<meta name="author" content="Tukain" />
<meta name="generator" content="Lume" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/assets/fav.webp" type="image/webp" />
<link href="/assets/css/styles.css" rel="stylesheet">
<title>Tukain's Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="/">início</a>
<li>
</ul>
<ul>
<li>
<a href="/blog.html">blog</a>
</li>
<li>
<a href="/conversor.html">conversor</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="post">
<article>
<hgroup>
<a href="/posts/deixando a hare de lado por enquanto.html">
<h1>Deixando a Hare de lado... Por enquanto.</h1>
</a>
<p>Devo me concentrar em apenas uma linguagem por enquanto.</p>
</hgroup>
<hr>
<div class="post-content">
<p>Irei começar me explicando o porquê de eu ter decidido isso de forma tão
repentina. Bom, se você leu o meu último artigo, então sabe que eu ando
estudando 2 linguagens de programação: C e Hare. Apesar de ter gostado e muito
de estudar as duas línguas em conjunto, eu tenho que encarar um fato: eu não
sei programar.</p>
<h1>Quer dizer então que vou desistir?</h1>
<p>Nada disso.
Irei continuar meus estudos, porém, apenas usando uma língua, a C. O motivo
disso é uma consequência de não saber programação no geral, há coisas que eu
preciso de uma documentação detalhada ou até mesmo uma explicação em si, mas a
Hare não está pronta, muito menos a sua documentação, sem se falar que ela é
qualquer coisa, menos popular. A consequência disso é que se eu estou em dúvida
sobre algo que eu quero fazer, eu não vou achar no Google, e tem uma boa chance
de não achar na documentação também.</p>
<p>Por isso irei continuar apenas com
a C, ela é uma linguagem que é extremamente popular e utilizada até hoje, não
falta nenhuma documentação/explicação sobre algo, e é uma linguagem que já está
terminada.</p>
<h1>Ainda assim irei sentir saudades da Hare.</h1>
<p>Apesar de
ter essa “deficiência” em relação a documentação, a Hare é uma linguagem muito
boa, mesmo em seus estágios iniciais. O único erro foi eu querer aprender a
programar com uma linguagem que não está pronta ainda.</p>
<p>O maior problema
de tentar fazer o que eu fiz é que você não tem a quem, ou o que recorrer. Você
está por conta própria. Sendo assim, a Hare é uma linguagem que eu recomendaria
apenas para as pessoas que já são programadores, principalmente as que tem
certa familiaridade com C.</p>
<h1>C também não é muito amigável, mas estou acostumado.</h1>
<p>Você poderia até mesmo achar que eu querer aprender a
programar com C seria outra ideia ruim, mas eu acho que (para o meu caso) essa
é uma ideia boa.</p>
<p>C é famosa por ser uma linguagem “difícil”, “insegura”,
“limitada” e até mesmo “defasada”. A verdade é que certas coisas realmente
estão corretas em relação a C, já que ela foi criada a quase 60 anos atrás, mas
isso não quer dizer que ela é uma linguagem que não se deve aprender.</p>
<p>E
até mesmo por ela ser “limitada” acaba tornando-a uma boa língua para aprender
a programar. Ela é uma linguagem simples, com pouca coisa, mas com o suficiente
para você conseguir fazer programas sem nenhuma dificuldade. E também, funciona
em qualquer coisa que tenha um processador.</p>
<h1>Eu penso um pouco com a lógica de C.</h1>
<p>Posso estar me expressando mal ao dizer isso, mas eu tenho
uma linha de raciocício que segue +/- a forma em que você faz algo em C. Por
isso até que eu tive certa facilidade com a Hare e Go.</p>
<p>Um dos prováveis
motivos de eu ter essa linha de raciocício pode ter sido o período em que eu
utilizava softwares da suckless. Todos eles são feitos em C puro, e eu
costumava aplicar muitos patches, por consequência, tive o hábito de consertar
inconsistências e de corrigir erros na aplicação de patches.</p>
<p>Por conta
disso, memorizei muitas das palavras-chave de C e também um pouco de como um
programa feito em C é estruturado.</p>
<h1><em>Fin</em></h1>
<p>Hoje isso é
tudo o que eu tenho a dizer.</p>
<p>Até o próximo post!</p>
</div>
</article>
</div>
</main>
</body>
</html>

90
posts/emacs!.html Normal file
View file

@ -0,0 +1,90 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="pt-br" />
<meta name="description" content="Não sei se vou voltar totalmente, mas já tô configurando ele." />
<meta name="author" content="Tukain" />
<meta name="generator" content="Lume" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/assets/fav.webp" type="image/webp" />
<link href="/assets/css/styles.css" rel="stylesheet">
<title>Tukain's Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="/">início</a>
<li>
</ul>
<ul>
<li>
<a href="/blog.html">blog</a>
</li>
<li>
<a href="/conversor.html">conversor</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="post">
<article>
<hgroup>
<a href="/posts/emacs!.html">
<h1>Emacs!</h1>
</a>
<p>Não sei se vou voltar totalmente, mas já tô configurando ele.</p>
</hgroup>
<hr>
<div class="post-content">
<p>A mais ou menos 3 dias, me surgiu uma vontade de voltar a usar o
Emacs. Não sei muito bem o porquê, mas o que posso dizer é que desde
então comecei a configurar ele.</p>
<p>Diferente da última vez que eu configurei o Emacs, eu quis fazer
com que essa configuração seja basicamente um substituto a
<a href="https://github.com/tukainpng/nvim">minha configuração do Neovim</a>,
o que significa que eu vou precisar instalar alguns pacotes.</p>
<h1>Preciso de alguns, não de muitos</h1>
<p>Uma característica do Emacs é que ele tem praticamente tudo o que você
precisa pré-instalado, então muitas das coisas que eu tenho na minha
configuração do Neovim pode ser replicada com uma simples linha de Elisp.</p>
<p>Na verdade, muitas das coisas que a minha configuração do Neovim tem
foram adicionadas para imitar a minha antiga configuração do Emacs, como por
exemplo o Which-key.</p>
<h1>Além de substituto do Neovim, um substituto do meu sistema inteiro...</h1>
<p>A minha segunda intenção com o Emacs é deixar ele num ponto onde eu não
precise sair dele, a menos que seja absolutamente necessário.</p>
<p>O que não é muito difícil, visto que já fiz isso no passado, então
é só uma questão de tempo até eu conseguir replicar o meu antigo setup.</p>
<p>Por enquanto, o que eu tenho em mente para adicionar agora é o org-present
(pacote para fazer slides em arquivos .org) e o bongo (um pacote que
é um player de música).</p>
<h1>Um ambiente de trabalho integrado e confortável</h1>
<p>Uma das coisas que mais me deixou com saudades do Emacs foi o quão integrado
tudo pode ser.</p>
<p>Tudo o que você precisa, dentro de 1 programa, com apenas 1 key-choord de
distância.</p>
<p>Uma das coisas que eu fazia na época em que o meu site era feito usando org-mode
(sim, isso aconteceu) era editar um post, e apertar uma tecla de atalho que eu tinha
para exportar e abrir o navegador na página que eu estava editando.</p>
<p>A sentimento que isso dava era o de estar em um ecossistema de desenvolvimento, era
simplesmente incrível.</p>
<p>E é óbvio que eu quero restaurar aquele &quot;ecossistema&quot; que eu tinha, e na verdade já
estou relativamente perto de conseguir. Só mais alguns ajustes e pronto!</p>
<h1><em>Fin</em></h1>
<p>Bem, hoje eu quis fazer um post bem rapidinho, então não vou me extender demais aqui.
Até o próximo post!</p>
</div>
</article>
</div>
</main>
</body>
</html>

106
posts/eu usei eu usei javascript.html Normal file
View file

@ -0,0 +1,106 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="pt-br" />
<meta name="description" content="Pelo menos não é React." />
<meta name="author" content="Tukain" />
<meta name="generator" content="Lume" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/assets/fav.webp" type="image/webp" />
<link href="/assets/css/styles.css" rel="stylesheet">
<title>Tukain's Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="/">início</a>
<li>
</ul>
<ul>
<li>
<a href="/blog.html">blog</a>
</li>
<li>
<a href="/conversor.html">conversor</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="post">
<article>
<hgroup>
<a href="/posts/eu usei eu usei javascript.html">
<h1>Eu usei... Eu usei Javascript.</h1>
</a>
<p>Pelo menos não é React.</p>
</hgroup>
<hr>
<div class="post-content">
<p>É, é isso mesmo que você leu. Esse blog oficialmente fez uso de Javascript.</p>
<p>Vamos dar 1 minuto de silêncio a este site que acabou de falecer…</p>
<p>Quer saber? Tanto faz.</p>
<h1>Não, eu não tô brincando</h1>
<p>Eu realmente começei a usar Javascript nesse blog, o motivo é bem simples na
verdade: Tava foda fazer uma versão desktop e mobile só com html e css.</p>
<p>O que sinceramente não é novidade pra quem tem mais experiência no mundo web.
Existe um “ditado” que eu já ouvi antes mesmo de aprender html:</p>
<ul>
<li>HTML é o esqueleto;</li>
<li>CSS é o corpo;</li>
<li>Javascript é a vida;</li>
</ul>
<p>Não acho que isso seja a coisa mais precisa que já ouvi, mas já dá para ter uma
ideia do que ela significa.</p>
<h1>O que estou fazendo com ele?</h1>
<p>Coisas extremamente simples na verdade. Eu tenho dois arquivos, um é para a
página principal e o outro é para as páginas dos posts.</p>
<p>O que fica na página principal é o responsável pela responsividade da sidebar
do blog. Antes, eu tinha a sidebar e uma página separada com o mesmo conteúdo,
e com isso, eu escondia a sidebar na versão mobile do site e mostrava um link
para a página separada com o mesmo conteúdo, usando uma classe e css.</p>
<p>Não preciso explicar muito para entender que isso gerava um retrabalho bem
chato sempre que eu fazia alguma modificação na sidebar.</p>
<p>Então o Javascript responsável pela sidebar me livra desse retrabalho. A forma
que ele funciona é bem simples na realidade. Para começar, ele verifica a
resolução da tela de quem tá visitando o site, se a largura dela for menor do
que 600 pixels, então ele irá mostrar a navbar (que agora só é visível na
versão mobile), e nela irá existir um “link” que quando clicado executa uma
função que esconde todos os posts e mostra a sidebar, o mesmo vale para o link
da página inicial, que agora é só um botão para uma outra função que faz o
inverso.</p>
<p>Se a tela tiver uma resolução horizontal maior ou igual a 600 pixels, a versão
de desktop é que será mostrada, com o Javascript escondendo a navbar e
mostrando a sidebar ao lado dos posts.</p>
<p>O segundo arquivo é um que tem como função gerar uma tabela de conteúdos com
links para cada título do post. Isso é uma coisa que eu queria fazer a um tempo
na realidade, mas só fiz isso agora.</p>
<h1>Pera aí, o link do site tá diferente também…</h1>
<p>Se você presta atenção na sua barra de navegação, você deve ter percebido que o
endereço do site mudou também. O site agora é hosteado no
<a href="https://neocities.org">Neocities</a>. Não tem muito o que eu falar aqui, o motivo
da mudança é bem básico. Fiz isso por que ele atualiza o site mais rápido do
que o Github.</p>
<p>Tudo o que eu preciso fazer e arrastar os assets do site para a minha dashboard
e pronto, os arquivos do site são atualizados, e em questão de segundos as
mudanças já estão no ar.</p>
<p>O Codeberg também é assim, mas o problema do Codeberg, pelo menos comigo, é que
ele é insuportavelmente lento de acessar na minha rede wi-fi. Eu não faço a
mínima ideia do que seja o problema, eu só sei que é inutilizável.</p>
<h1><em>Fin</em></h1>
<p>Bom, eu não tenho muito o que falar hoje, então vou parar por aqui.</p>
<p>Até o próximo post!</p>
</div>
</article>
</div>
</main>
</body>
</html>

93
posts/hare.html Normal file
View file

@ -0,0 +1,93 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="pt-br" />
<meta name="description" content="A linguagem que escolhi para aprender a programar" />
<meta name="author" content="Tukain" />
<meta name="generator" content="Lume" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/assets/fav.webp" type="image/webp" />
<link href="/assets/css/styles.css" rel="stylesheet">
<title>Tukain's Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="/">início</a>
<li>
</ul>
<ul>
<li>
<a href="/blog.html">blog</a>
</li>
<li>
<a href="/conversor.html">conversor</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="post">
<article>
<hgroup>
<a href="/posts/hare.html">
<h1>Hare</h1>
</a>
<p>A linguagem que escolhi para aprender a programar</p>
</hgroup>
<hr>
<div class="post-content">
<p>Eu sei que isso soa contraditório depois de ter feito um post sobre a Go,
mas a realidade é que eu não quero aprender a programar com a Go, eu quero
aprender a programar com uma linguagem low-level, tipo a C (que eu também estou
estudando), e é aí que a Hare entra.</p>
<h1>Praticamente C, mas com diversas melhorias</h1>
<p>A Hare é uma linguagem da família das linguagens C-like, e
a sua sintaxe deixa isso bem explícito, porém, ela tem algumas das inovações
das últimas décadas consigo e também se inspira na sintaxe de outras
linguagens, como a Rust. Porém, diferente de Rust, você não vai ter que esperar
por minutos ou horas para o compilador terminar o serviço, nem quebrar a cabeça
com o seu código para que ele seja &quot;memory safe&quot;, ela não tem garbage
collectors nem nada desse tipo, é como eu disse, ela é praticamente C.
Contudo, ela não é uma linguagem com as mesmas limitações ou problemas que C
possue, e além disso ela tem uma sintaxe que, para mim, não só é mais clara,
como mais fácil de entender o que está acontecendo. Claramente isso é apenas
algo que depende da minha experiência, mas até mesmo a minha namorada conseguiu
entender como um Struct estava sendo usado em um dos exemplos que eu escrevi em
Hare, enquanto isso, o mesmo exemplo em C foi... Confuso para dizer no
mínimo.</p>
<h1>QBE como backend</h1>
<p>O compilador da Hare usa o QBE
Backend, o que torna o compilador dela extremamente rápido e leve, e também
facilita o processo de criar ports do compilador para outras arquiteturas. Eu
não irei entrar muito em detalhes sobre o que é um Compiler Backend, mas devo
parafrasear algo vindo do próprio site do QBE:</p>
<blockquote>
<p>QBE é um backend para compiladores, com o foco de providenciar 70% da
performance de compiladores otimizados da indústria com 10% do código.</p>
</blockquote>
<p>De certa forma, o QBE se encaixa até mesmo na filosofia suckless, o que para
mim pelo menos, é um grande ponto possitivo.</p>
<h1>O que eu planejo fazer aprendendo a programar?</h1>
<p>Atualmente, eu vejo a programação como um hobbie para mim, um hobbie que eu
gosto e muito, mas isso não me impede de colocar essa habilidade no meu
currículo, um dia isso pode vir a ser extremamente útil. Por enquanto eu estou
aprendendo o básico, recém fiz o meu primeiro Struct, ainda falta muito para eu
dizer que eu sei fazer alguma coisa, quanto mais dizer que eu sei programar.
Mas isso só depende do meu esforço, então irei correr atrás.</p>
<h1><em>Fin</em></h1>
<p>Enfim, é isso, até o próximo post!</p>
</div>
</article>
</div>
</main>
</body>
</html>

125
posts/harebuild.html Normal file
View file

@ -0,0 +1,125 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="pt-br" />
<meta name="description" content="Um build system no estilo do Zig Build System" />
<meta name="author" content="Tukain" />
<meta name="generator" content="Lume" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/assets/fav.webp" type="image/webp" />
<link href="/assets/css/styles.css" rel="stylesheet">
<title>Tukain's Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="/">início</a>
<li>
</ul>
<ul>
<li>
<a href="/blog.html">blog</a>
</li>
<li>
<a href="/conversor.html">conversor</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="post">
<article>
<hgroup>
<a href="/posts/harebuild.html">
<h1>Harebuild</h1>
</a>
<p>Um build system no estilo do Zig Build System</p>
</hgroup>
<hr>
<div class="post-content">
<p>Quanto tempo meu caro leitor, espero que você esteja bem.</p>
<p>Hoje eu trago algo que comecei a fazer a pouco tempo, e que, pelo menos para
mim, é algo que acho que será útil assim que estiver concluído. Estou me
referindo a um build-system que comecei a fazer para a Hare, ele está em seus
estágios iniciais, eu nem sequer li sobre como fazer um build-system ainda.</p>
<h1>Então como que ele funciona por enquanto?</h1>
<p>No momento ele é basicamente um shell-script glorificado, não que isso seja um
problema, mas ainda assim continua sendo algo que um shell-script (ou Makefile)
conseguiria fazer de forma até mesmo mais simples.</p>
<p>Porém, a ideia é ter uma forma de compilar um programa feito em Hare, usando um
outro programa feito em Hare, quiçá até mesmo integrar o build-system no
próprio código-fonte do programa.</p>
<h1>Como está a implementação atual?</h1>
<p>Por enquanto, como eu já disse, ela é basicamente um shell-script glorificado,
mas para fins de tranparência (já que eu não criei um repositório para esse
projeto no momento) aqui está o código-fonte dela:</p>
<pre><code class="language-rust">use fmt;
use os;
use os::exec;
type Build = struct {
flag: str,
target: str,
link: str,
output: str,
src: str,
};
fn build(b: Build) void = {
let cmd = exec::cmd(
&quot;hare&quot;,
&quot;build&quot;,
&quot;-a&quot;,
b.target,
b.flag,
b.link,
&quot;-o&quot;,
b.output,
b.src,
)!;
let proc = exec::start(&amp;cmd)!;
let status = exec::wait(&amp;proc)!;
assert(exec::check(&amp;status) is void);
};
def src_file = &quot;hello.ha&quot;;
export fn main() void = {
let prog = Build {
target = os::machine(),
flag = &quot;-R&quot;,
link = &quot;-L.&quot;,
src = src_file,
output = &quot;hello&quot;,
};
build(prog);
};
@init fn init() void = {
fmt::printfln(&quot;Compilando: {}&quot;, src_file)!;
};
@fini fn init() void = {
fmt::println(&quot;Programa compilado!&quot;)!;
};
</code></pre>
<p>Como eu disse, extremamente simples, um shell-script glorificado, mas apesar
disso, ainda é um começo de algo que pode vir a ser útil.</p>
<h1><em>Fin</em></h1>
<p>Bem, isso é tudo o que eu tenho a dizer por hoje.</p>
<p>Te vejo no próximo post!</p>
</div>
</article>
</div>
</main>
</body>
</html>

91
posts/jekyll.html Normal file
View file

@ -0,0 +1,91 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="pt-br" />
<meta name="description" content="O gerador de sites estáticos que estou usando agora" />
<meta name="author" content="Tukain" />
<meta name="generator" content="Lume" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/assets/fav.webp" type="image/webp" />
<link href="/assets/css/styles.css" rel="stylesheet">
<title>Tukain's Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="/">início</a>
<li>
</ul>
<ul>
<li>
<a href="/blog.html">blog</a>
</li>
<li>
<a href="/conversor.html">conversor</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="post">
<article>
<hgroup>
<a href="/posts/jekyll.html">
<h1>Jekyll</h1>
</a>
<p>O gerador de sites estáticos que estou usando agora</p>
</hgroup>
<hr>
<div class="post-content">
<h1>Foi legal ter feito a minha própria versão com o saait e smu…</h1>
<p>Mas o Jekyll faz tudo o que eu estava fazendo antes, e faz melhor.
Afinal, ele tem anos de desenvolvimento e também é usado por milhões de
pessoas, sendo assim, possuindo um leque de funcionalidades a disposição e
também tendo um ecossistema de plugins (não estou usando nenhum até o momento).</p>
<h1>O Hugo não é a mesma coisa?</h1>
<p>Vai por mim, não é. O processo de converter o meu site para o Jekyll foi tão
fácil e direto ao ponto que ele poderia ter sido feito usando o Jekyll desde o
início.</p>
<p>Eu não precisei baixar nenhum tema, nem passar muito tempo na documentação, foi
uma experiência muito agradável. Não consigo dizer isso com nenhuma das vezes
em que usei o Hugo.</p>
<p>Não estou dizendo que o Hugo é ruim ou pior que o Jekyll, nada disso, ao meu
ver ambos tem seus pontos fortes, mas o Jekyll basicamente foi uma
substituição tão sem obstáculos que pra quem visitar o meu site, não tem
diferença entre a versão com o saait+smu e a versão com o Jekyll.</p>
<p>Só de poder usar o exato mesmo layout do meu site já faz (para mim) do Jekyll
uma opção superior ao Hugo.</p>
<p>E assim como o Hugo, o Jekyll também tem uma opção que me permite ver as
alterações do site em tempo real, o que facilita e muito na hora de modificar
algo do site ou então até mesmo na hora de escrever um post novo.</p>
<h1>Tem coisa nova também</h1>
<p>Uma coisa que eu queria fazer a um tempo era um sistema de tags no meu site, e
bem, o Jekyll (assim como o Hugo) tem um pronto para ser usado. Tudo o que
precisei fazer foi criar a template da página de tags e pronto, todos os posts
agora possuem tags e são mostrados na página de tags em suas sessões
respectivas.</p>
<p>O que me alegra é que eu não precisei de nenhuma linha de Javascript, e falando
nisso…</p>
<h1>O site não tem mais nenhuma linha sequer de Javascript</h1>
<p>Agora que eu estou usando o Jekyll, eu não vejo mais um motivo para usar
Javascript no site (pelo menos por agora), a única coisa que o site perdeu em
questão de funcionalidade foi a tabela de conteúdos nos posts, tirando isso,
nada mudou de forma significante com a abstência do Javascript.</p>
<h1><em>Fin</em></h1>
<p>Bem, eu não tenho muito o que falar além disso, então vou fazer a template do
rss.</p>
<p>Até o próximo post!</p>
</div>
</article>
</div>
</main>
</body>
</html>

77
posts/lume ssg.html Normal file
View file

@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="pt-br" />
<meta name="description" content="O Jekyll deu uma experiência ótima, mas o Lume está dando uma incrível." />
<meta name="author" content="Tukain" />
<meta name="generator" content="Lume" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/assets/fav.webp" type="image/webp" />
<link href="/assets/css/styles.css" rel="stylesheet">
<title>Tukain's Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="/">início</a>
<li>
</ul>
<ul>
<li>
<a href="/blog.html">blog</a>
</li>
<li>
<a href="/conversor.html">conversor</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="post">
<article>
<hgroup>
<a href="/posts/lume ssg.html">
<h1>Lume - O novo SSG que estou utilizando</h1>
</a>
<p>O Jekyll deu uma experiência ótima, mas o Lume está dando uma incrível.</p>
</hgroup>
<hr>
<div class="post-content">
<p>Pois é, depois de algum tempo batendo a cabeça na parede para tentar ter alguma ideia do que fazer de novo no site, me veio a ideia de migrar para o <a href="https://lume.land/">Lume</a>.</p>
<p>Claro que eu fui primeiro verificar se essa migração seria viável, visto que o Hugo, por exemplo, foi uma ideia que rapidamente se provou como sendo uma idéia não só péssima, como estressante.</p>
<p>Então, eu fui pesquisar a respeito do Lume antes de tentar fazer alguma coisa, e percebi que não só o processo de migração seria extremamente fácil, como também eu teria vantagens que eu não tinha com o Jekyll (além do build step ser bem mais rápido).</p>
<h1>Javascript</h1>
<p>Não é segredo para ninguém que eu não sou o maior fã do Javascript, e sempre procuro utilizar o mínimo possível, porém, hoje em dia eu o enxergo como uma ferramenta qualquer que, se usada de forma correta, pode facilitar e muito a minha vida.</p>
<p>Um exemplo disso é o próprio Lume, que é um <a href="https://en.wikipedia.org/wiki/Static_site_generator"><code>Static Site Generator</code></a> para o <a href="https://deno.land">Deno</a>, um runtime de Javascript.</p>
<p>O uso de Javascript no Lume, junto de sua arquitetura, permitem que ele seja um SSG extremamente customizável e versátil, e ainda assim, por utilizar o Deno, ser rápido.</p>
<h1>LumeCMS</h1>
<p>Isso é algo que eu nunca pensei que seria tão simples de configurar. Mas o LumeCMS é.</p>
<p>Para quem não sabe, um <a href="https://pt.wikipedia.org/wiki/Sistema_de_gerenciamento_de_conte%C3%BAdo">CMS</a> é</p>
<blockquote>
<p>um programa de computador utilizado para criar, editar, publicar e gerenciar conteúdos em plataformas digitais e páginas online pré-estruturadas</p>
</blockquote>
<p>O que significa tudo isso? Basicamente que eu tenho uma interface que facilita a criação de posts ou tutoriais nesse site, dentre outras coisas que eu posso configurar também.</p>
<p>A customização desse CMS também me impressionou e muito, mas não tanto quanto o processo de utilizar ele. Se fosse para definir em uma palavra, eu o definiria como &quot;eficiênte&quot;.</p>
<p>Não tem um processo longo de instalação nem configuração, o CMS vai fazer parte da codebase do site usando o Lume e a documentação do CMS é tão simples que mesmo eu, que não sou um fanático por Javascript e Webdev, conseguiu configurar o CMS a um ponto agradável em questão de 1 hora.</p>
<h1>Coisas que mudaram no site</h1>
<p>Como já mencionei, a transição foi algo simples e direto ao ponto, mas não significa que eu consegui transportar tudo do Jekyll para cá.</p>
<p>Um exemplo de algo que não consegui trazer para aqui foi o Rogue, que era o responsável por geral blocos de código com syntax-highlighting utilizando somente HTML e CSS. O mesmo vale para o gerador de <code>TOC</code> (Tabela de Conteúdos).</p>
<p>Como resultado, eu voltei a utilizar o Prism.js, e até o momento, ainda não implementei um <code>TOC</code>.</p>
<p>O site no geral teve uma polida por debaixo dos panos, mas nada que fosse extremo a ponto de fazer alguma diferença notável.</p>
<h1><em>Fin</em></h1>
<p>Bem, é isso. Espero que você tenha gostado deste post.</p>
<p>Te vejo no próximo post!</p>
</div>
</article>
</div>
</main>
</body>
</html>

81
posts/meu progresso com a raylib.html Normal file
View file

@ -0,0 +1,81 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="pt-br" />
<meta name="description" content="Como anda o meu progresso com o raylib.ha" />
<meta name="author" content="Tukain" />
<meta name="generator" content="Lume" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/assets/fav.webp" type="image/webp" />
<link href="/assets/css/styles.css" rel="stylesheet">
<title>Tukain's Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="/">início</a>
<li>
</ul>
<ul>
<li>
<a href="/blog.html">blog</a>
</li>
<li>
<a href="/conversor.html">conversor</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="post">
<article>
<hgroup>
<a href="/posts/meu progresso com a raylib.html">
<h1>Meu progresso</h1>
</a>
<p>Como anda o meu progresso com o raylib.ha</p>
</hgroup>
<hr>
<div class="post-content">
<p>Nos últimos dias eu tive um foco maior nos exemplos que eu deixo no
repositório do raylib.ha. Afinal, eles são formas de demonstrar que as bindings
não só estão funcionando, como sua curva de aprendizado é ridiculamente
pequena. A única forma de provar isso, é tendo exemplos usando as bindings.</p>
<h1>E então, o que eu consegui?</h1>
<p>No momento, eu tenho 2 exemplos
prontos, e um deles também tem uma versão re-escrita em C, como forma de
demonstrar a similaridade entre eles. O primeiro exemplo é uma sequência
Fibonacci, e o segundo é… bem…</p>
<p><img src="/assets/media/posts/901d15628e3491670f85c866621023eb.webp" alt="Image"></p>
<p>Não, isso não é um screenshot do Undertale, isso é o segundo exemplo do raylib.ha.
No momento, com as bindings atuais, é possível fazer um jogo semelhante ao
Undertale. Sendo assim, eu quis demonstrar isso de forma mais explícita.</p>
<p>Esse exemplo não é uma recriação completa desta sala do undertale, na
verdade você não consegue interagir com nada. Só existem paredes invisíveis
para que o player não saia da sala, uma música que toca de fundo e um menu de
informações que o usuário pode abrir.</p>
<h1>E agora?</h1>
<p>Por enquanto, eu
voltarei a me focar na criação de bindings. Já estou completando as bindings do
módulo raudio e já finalizei as do rshapes. As próximas serão as bindings
relacionadas a janelas e texto.</p>
<p>Isso tudo está sendo uma ótima
experiência de aprendizado.</p>
<h1><em>Fin</em></h1>
<p>Enfim, isso é tudo o
que eu tenho a dizer por hoje.</p>
<p>Até o próximo post!</p>
</div>
</article>
</div>
</main>
</body>
</html>

108
posts/neatvi.html Normal file
View file

@ -0,0 +1,108 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="pt-br" />
<meta name="description" content="Um editor de texto extremamente simples, mas extensível." />
<meta name="author" content="Tukain" />
<meta name="generator" content="Lume" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/assets/fav.webp" type="image/webp" />
<link href="/assets/css/styles.css" rel="stylesheet">
<title>Tukain's Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="/">início</a>
<li>
</ul>
<ul>
<li>
<a href="/blog.html">blog</a>
</li>
<li>
<a href="/conversor.html">conversor</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="post">
<article>
<hgroup>
<a href="/posts/neatvi.html">
<h1>Neatvi</h1>
</a>
<p>Um editor de texto extremamente simples, mas extensível.</p>
</hgroup>
<hr>
<div class="post-content">
<p>Bom, aqui vem mais um post falando sobre um editor de texto. Mas desta vez o
editor em questão não é um clone do Vim, nem do Kakoune, é um clone do Vi,
aquele editor de texto que quase ninguém usa por livre e espontânea vontade.</p>
<h1>Então ele é um Vim piorado?</h1>
<p>Eu não diria que ele é um Vim piorado, na verdade ele é um Vi melhorado, porém,
ao contrário do Vim, o Neatvi continua sendo um Vi, as únicas diferenças
marcantes entre o Neatvi e o Vi original são:</p>
<ol>
<li>Syntax highlighting</li>
<li>Um script externo</li>
</ol>
<p>Com a excessão dessas duas diferenças claras, não tem muita coisa que distingue
o Neatvi do Vi.</p>
<h1>Como é usar o Neatvi?</h1>
<p>O Neatvi tem um workflow praticamente idêntico ao Vi, ou seja, em comparação
com o Vim, seria como você usar o bloco de notas de um lado e o VSCode do
outro. Porém, isso não quer dizer que o Neatvi não tem suas qualidades também.</p>
<p>Assim como as ferramentas suckless, como por exemplo o
<a href="http://st.suckless.org">st</a> (o terminal que eu uso), quaisquer modificações do
comportamento do próprio editor devem ser feitas editando o código fonte do
terminal. E isso inclui adicionar uma syntax highlighting para alguma linguagem
que o Neatvi já não suporte.</p>
<p>De primeira, isso pode soar um pouco intimidador, mas quando você tira um pouco
do seu tempo para fazer as modificações que você precisa, percebe que não é tão
complicado assim. Claro que a minha opinião é enviesada, e também estou
assumindo que você tenha experiência em modificar configurações de programas a
partir de arquivos de texto.</p>
<p>Apesar desta forma de adicionar um a syntax highlighting não ser tão fácil
quanto adicionar uma no Helix ou Neovim, ela é feita de uma forma que te
permite colorir qualquer linguagem que você queira. Lógico que exige mais
trabalho, e também tem suas limitações, mas isso também se aplica a ferramentas
suckless no geral. Você não usa o dwm porquê ele é mais fácil de usar do que o
i3, você usa ele porque em questões de customizações e formas de trabalhar, o
limite é apenas o seu conhecimento em C e em LibX11.</p>
<p>Mas o Neatvi tem mais uma coisa que faz com que ele não seja totalmente
dependente de modificações no código fonte.</p>
<h1>O neatvi.sh</h1>
<p>Esse carinha é um shell script que o Neatvi executa quanto você aperta <code>q</code>, a
mesma tecla usada para criação de macros no Vim/Neovim. A diferença é que após
você apertar essa tecla, qualquer outra tecla que for apertada será passada
como um argumento para o neatvi.sh, e esse shell script deve ser criado pelo
próprio usuário.</p>
<p>Sendo assim, você pode fazer por exemplo, uma mini integração entre o Neatvi e
o Git, uma forma de visualizar os arquivos do diretório atual, enfim, assim
como modificações no próprio código-fonte, você tem uma liberdade absurda com o
que você pode fazer.</p>
<p>Eu por exemplo, fiz uma integração com o git, podendo inicializar um
repositório, adicionar arquivos a esse repositório, realizar commits,
visualizar os commits feitos em um arquivo, adicionar/modificar o remote do
repositório e até as diferenças entre o repositório local e o remoto.</p>
<h1><em>Fin</em></h1>
<p>Enfim, é isso o que eu tenho para falar por agora.</p>
<p>Se eu continuar assim, esse site vai deixar de ser um blog e vai se tornar um
site de review de editores de texto.</p>
<p>Até o próximo post!</p>
</div>
</article>
</div>
</main>
</body>
</html>

83
posts/neovim, o rei dos editores.html Normal file
View file

@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="pt-br" />
<meta name="description" content="Por que eu não usei isso antes?" />
<meta name="author" content="Tukain" />
<meta name="generator" content="Lume" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/assets/fav.webp" type="image/webp" />
<link href="/assets/css/styles.css" rel="stylesheet">
<title>Tukain's Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="/">início</a>
<li>
</ul>
<ul>
<li>
<a href="/blog.html">blog</a>
</li>
<li>
<a href="/conversor.html">conversor</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="post">
<article>
<hgroup>
<a href="/posts/neovim, o rei dos editores.html">
<h1>Neovim</h1>
</a>
<p>Por que eu não usei isso antes?</p>
</hgroup>
<hr>
<div class="post-content">
<p>E lá vamos nós de novo com mais um post em que eu falo que eu comecei a usar
uma outra ferramenta no lugar da última que eu mencionei.</p>
<p>Vou te contar uma coisa viu, esse padrão deixa até mesmo eu mesmo irritado.</p>
<p>Enfim, vamos logo para o assunto de hoje, que no caso é o Neovim.</p>
<h1>Qual o motivo dessa vez?</h1>
<p>Para ser sincero, eu nem sei na verdade, só bateu uma curiosidade e eu decidi
dar uma olhada em como que o Neovim funciona. Acabou que eu fiz uma
configuração que superou a minha configuração do Vim em menos de 3 horas de
trabalho, mesmo que eu estivesse configurando em uma linguagem de script
completamente diferente.</p>
<p>Em 3 horas eu cheguei em uma configuração que é extremamente rápida, confortável,
modular, e claro, agradável aos olhos, enquanto no Vim eu até hoje não sei
porque CACETARALHOS ele fica exponencialmente mais lento conforme o tempo passa
e eu deixo ele aberto.</p>
<p>Muito provavelmente o problema todo deve ser relacionado a forma
que eu configurei ele, mas ainda assim é algo que incomoda, e foi um dos
motivos pelo qual eu comecei a usar o Emacs.</p>
<h1>Qual a diferença?</h1>
<p>Olha, eu não sou a melhor pessoa para explicar o quão melhor o Neovim é em
comparação com o Vim, mas se tem algo que eu posso dizer, é que esse treco é
rápido. Pra. Caralho. Eu não tô de brincadeira, o tempo que leva entre eu
instalar todos os meus plugins e arquivos no Neovim é o tempo que leva para o
Vim navegar pelo CSS desse site (que nem é tão grande assim).</p>
<h1>Só isso?</h1>
<p>Bem, o ecossistema de plugins do Neovim é também algo que só
posso definir como incrível. Além disso, não sei muito o que falar.</p>
<h1><em>Fin</em></h1>
<p>Como sempre, muito obrigado por ter tirado um pouco do seu tempo para ler um
pouco das coisas que escrevo.</p>
<p>Até o próximo post!</p>
</div>
</article>
</div>
</main>
</body>
</html>

69
posts/o editor de código lite-xl.html Normal file
View file

@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="pt-br" />
<meta name="description" content="Um editor de texto no estilo do VSCode" />
<meta name="author" content="Tukain" />
<meta name="generator" content="Lume" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/assets/fav.webp" type="image/webp" />
<link href="/assets/css/styles.css" rel="stylesheet">
<title>Tukain's Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="/">início</a>
<li>
</ul>
<ul>
<li>
<a href="/blog.html">blog</a>
</li>
<li>
<a href="/conversor.html">conversor</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="post">
<article>
<hgroup>
<a href="/posts/o editor de código lite-xl.html">
<h1>Lite-XL</h1>
</a>
<p>Um editor de texto no estilo do VSCode</p>
</hgroup>
<hr>
<div class="post-content">
<p>Quem diria? Eu tô fazendo mais um post sobre editor de texto. Porém, dessa
vez o editor é um que é familiar ao VSCode e ainda assim é uma opção 1000 vezes
melhor e que também consegue ser algo melhor que o Neovim (na minha humilde
opinião).</p>
<h1>O editor em questão é o Lite XL</h1>
<p>Esse editor é um programa bem simplista e muito bonito, feito usando a
linguagem de programação Lua, e também é configurado com ela.</p>
<p>Muito parecido com o VSCode, porém, simples A aparência do Lite XL lembra muito
a aparência do VSCode, porém ele é muito mais simples. Ele não tem todas
aquelas parafernálias que o VSCode tem por padrão, e também é extremamente
rápido, quase tão rápido quanto o Neovim, o que pra um programa de interface
gráfica é impressionante, levando em conta que eu uso um laptop com 4Gb de RAM
e um Intel Celeron N4020 de 1.10Ghz.</p>
<h1><em>Fin</em></h1>
<p>Enfim, vou encerrar por aqui, não estou com muita criatividade hoje.</p>
<p>Até o próximo post!</p>
</div>
</article>
</div>
</main>
</body>
</html>

76
posts/o protocolo gemini.html Normal file
View file

@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="pt-br" />
<meta name="description" content="Um protocolo muito interessante" />
<meta name="author" content="Tukain" />
<meta name="generator" content="Lume" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/assets/fav.webp" type="image/webp" />
<link href="/assets/css/styles.css" rel="stylesheet">
<title>Tukain's Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="/">início</a>
<li>
</ul>
<ul>
<li>
<a href="/blog.html">blog</a>
</li>
<li>
<a href="/conversor.html">conversor</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="post">
<article>
<hgroup>
<a href="/posts/o protocolo gemini.html">
<h1>Gemini</h1>
</a>
<p>Um protocolo muito interessante</p>
</hgroup>
<hr>
<div class="post-content">
<p>Nos últimos dias eu andei navegando no mundo do Gemini, um protocolo web com
um foco em privacidade e simplicidade (e bota simplicidade nisso). Andei
procurando por “cápsulas” interessantes e me deparei com várias pérolas, como
por exemplo o bbs.geminispace.org, que é um Bulletin Board, só que no
Gemini.</p>
<h1>O foco desse protocolo</h1>
<p>O foco do Gemini é ser um
protocolo simples, privado e rápido, mas vamos dar um ênfase no simples. O
protocolo é um protocolo somente de texto, com uma request e uma resposta, nada
a mais, nada a menos. Ou seja, toda a parte de estilização da página fica por
conta do seu cliente, que existe uma boa parcela por aí, sendo o meu preferido
o Lagrange.</p>
<h1>Navegadores</h1>
<p>Existem vários navegadores para o Gemini, alguns mais avançados como o Lagrange
(um navegador de interface gráfica feito com SDL), outros mais simples como o
astro (um navegador feito em shell-script), mas o que todos têm em comum é a
navegação geral pelas páginas. Todas as páginas do Gemini são arquivos de texto
simples que seguem uma sintaxe também simples (o nome dela é Gemtext) e tudo o
que o navegador precisa fazer é renderizar esse arquivo corretamente.</p>
<h1><em>Fin</em></h1>
<p>Bem, não sei mais o que dizer, eu estou escrevendo isso tarde e depois de um
dia cansativo.</p>
<p>Enfim, te vejo no próximo post!</p>
</div>
</article>
</div>
</main>
</body>
</html>

130
posts/o que ando fazendo.html Normal file
View file

@ -0,0 +1,130 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="pt-br" />
<meta name="description" content="Algumas das coisas que fiz e estou fazendo no momento" />
<meta name="author" content="Tukain" />
<meta name="generator" content="Lume" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/assets/fav.webp" type="image/webp" />
<link href="/assets/css/styles.css" rel="stylesheet">
<title>Tukain's Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="/">início</a>
<li>
</ul>
<ul>
<li>
<a href="/blog.html">blog</a>
</li>
<li>
<a href="/conversor.html">conversor</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="post">
<article>
<hgroup>
<a href="/posts/o que ando fazendo.html">
<h1>O que ando fazendo</h1>
</a>
<p>Algumas das coisas que fiz e estou fazendo no momento</p>
</hgroup>
<hr>
<div class="post-content">
<p>Nada melhor do que fazer um post antes de ir almoçar, né?</p>
<p>Às vezes eu me sinto um esquizofrénico quando vou postar algo por aqui, apesar
desse blog ser algo que deixo sempre em destaque nas minhas redes sociais, não
há nenhuma forma para eu saber a taxa de visitas nele.</p>
<p>O engraçado disso é que às poucas pessoas que eu sei que conhecem ou daram uma
olhada nesse blog, com a excessão de 3, nem sequer falam português, então tudo
o que eles podem julgar é a aparência do site.</p>
<p>Isso não me desmotiva de nenhuma forma em continuar melhorando o blog, muito
pelo contrário. Inclusive, fiz diversas mudanças nas últimas semanas.</p>
<h1>As mudanças no blog</h1>
<p>Uma das coisas que eu melhorei significamente foi a listagem de posts, antes a
lista era uma tabela quadrada contendo um <code>&lt;article&gt;</code> por linha, e o título era
um link para o post em si. Funcionou por um tempo, mas além de não ser algo
agradável aos olhos, também era uma experiência ruim para quem fosse visitar o
blog em um celular.</p>
<p>Tendo isso em mente, eu fiz com que a listagem não seja mais uma tabela, ela
simplesmente contém vários <code>&lt;article&gt;</code> em ordem de postagem, e eles por si só
são links para seus posts respectivos. Além disso, o tamanho do texto é maior e
a descrição do post é mostrada logo abaixo do título do post.</p>
<p>Essa não foi a única mudança visível no blog, agora quando você está visitando
o site usando um computador, você verá uma seção ao lado da listagem de posts
contendo informações sobre mim, essa mesma seção também tem uma página própria,
cujo o link só aparece na navbar em um aparelho com tela na vertical, vulgo, um
celular.</p>
<h1>Meu Neovim está quase se tornando uma mini IDE</h1>
<p>Outra coisa em que ando trabalho é a configuração do meu Neovim, fiz diversas
mudanças na forma em que eu estruturo ela e também consertei alguns problemas
que ela tinha.</p>
<p>Fiz mudanças na aparência também, com a mais perceptível sendo a mudança do
plugin de dashboard que eu usava (do dashboard.nvim para o alpha.nvim), na
aparência da barra de abas e também na lateral que contém o número de linhas.</p>
<p>Configurei melhor o gitsigns.nvim, não foram muitas mudanças, mas o pouco que
fiz já melhor integrou-no ao meu Neovim.</p>
<p>Resolvi também um pequeno problema que havia com as paletas de cores, com isso,
a troca de paleta de cores e também o uso melhoraram.</p>
<h1>Sobre a Hare</h1>
<p>Apesar de não comentar muito sobre ela últimamente, eu ando experimentando
bastante essa linguagem maravilhosa.</p>
<p>Uma das coisas que ando fazendo é melhorando o meu build-system e também fiquei
experimentando um utilitário que vem junto da Hare: o haredoc.</p>
<p>O haredoc é uma ferramenta muito boa, porém ele é tão simples que se eu fosse
fazer um post dedicado eu não teria muito o que falar.</p>
<p>Basicamente, o haredoc é um programa que te possibilita ler a documentação de
um módulo. O interessante é que ele não consegue ler somente os módulos da
biblioteca padrão, ele também consegue ler a documentação de um módulo que você
providencia.</p>
<p>Isso também implica dizer que ele gera documentação, e isso é verdade, ele gera
a documentação em tempo real e visualiza ela em seu terminal.</p>
<p>O interessante é que ele também consegue gerar html, e esse html tem um
template que é basicamente idêntico ao site de documentação da Hare. Porém,
você também pode dizer que não quer o template, e ele só irá gerar o html do
conteúdo, deixando o resto por sua conta.</p>
<p>A forma como a documentação é gerada é similar à zig ou rust, usando
comentários dentro do código-fonte do programa, a diferença fica no fato em
que, ao contrário da zig por exemplo, você não precisa usar um tipo de
comentário diferente, todo e qualquer comentário que o seu programa possua será
parte da documentação. Claro que há regras sobre quais comentários irão
aparecer em certos lugares, mas mesmo assim, a experiência de fazer uma
documentação de um módulo é extremamente fácil.</p>
<h1>Github CLI</h1>
<p>Há pouco tempo eu voltei a utilizar o Github, mas uma coisa que eu nunca
utilizei foi o github-cli. Somente esse ano eu comecei a usar chaves ssh, então
não é uma surpresa que eu também não usava o github-cli.</p>
<p>E olha… eu tava perdendo uma conveniência que sinceramente me faz me sentir
burro por não ter usado no passado.</p>
<p>Eu tenho uma mentalidade de que quanto menos eu precisar usar um navegador ou
uma interface gráfica, melhor. Sim isso é irônico vindo de alguém que tem um
blog. Mas é também por isso que eu tenho um feed RSS integrado a esse blog.</p>
<p>Tendo essa mentalidade, fica claro o quanto eu gostei de poder gerenciar o meu
perfil do Github sem precisar abrir o navegador. Ele também é fácil de se
utilizar, o que me surpreendeu um pouco, já que estamos falando de uma
ferramenta que não só interage com repositórios git, mas também com o
ecossistema do Github.</p>
<h1><em>Fin</em></h1>
<p>Bom, isso é tudo o que eu tenho a falar por agora, mas acho que consegui fazer
um post bacana.</p>
<p>Até o próximo post!</p>
</div>
</article>
</div>
</main>
</body>
</html>

120
posts/prism.html Normal file
View file

@ -0,0 +1,120 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="pt-br" />
<meta name="description" content="Teste de syntax highlighting" />
<meta name="author" content="Tukain" />
<meta name="generator" content="Lume" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/assets/fav.webp" type="image/webp" />
<link href="/assets/css/styles.css" rel="stylesheet">
<title>Tukain's Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="/">início</a>
<li>
</ul>
<ul>
<li>
<a href="/blog.html">blog</a>
</li>
<li>
<a href="/conversor.html">conversor</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="post">
<article>
<hgroup>
<a href="/posts/prism.html">
<h1>Testando o Prism.js</h1>
</a>
<p>Teste de syntax highlighting</p>
</hgroup>
<hr>
<div class="post-content">
<h1>Brainfuck</h1>
<pre><code class="language-brainfuck">&gt;++++++++[&lt;+++++++++&gt;-]&lt;.&gt;++++[&lt;+++++++&gt;-]&lt;+.+++++++..+++.&gt;&gt;++++++[&lt;+++++++&gt;-]&lt;+
+.------------.&gt;++++++[&lt;+++++++++&gt;-]&lt;+.&lt;.+++.------.--------.&gt;&gt;&gt;++++[&lt;++++++++&gt;-
]&lt;+.
</code></pre>
<h1>Nasm</h1>
<pre><code class="language-nasm">SECTION .DATA
hello: db 'Hello world!',10
helloLen: equ $-hello
SECTION .TEXT
GLOBAL _start
_start:
mov eax,4
mov ebx,1
mov ecx,hello
mov edx,helloLen
int 80h
mov eax,1
mov ebx,0
int 80h
</code></pre>
<h1>Zig</h1>
<pre><code class="language-zig">const std = @import(&quot;std&quot;);
pub fn main() !void {
const stdout = std.io.getStdOut().writer();
try stdout.print(&quot;Hello, {s}!\n&quot;, .{&quot;world&quot;});
}
</code></pre>
<h1>C</h1>
<pre><code class="language-c">#include &lt;stdio.h&gt;
int main() {
printf(&quot;Hello World!\n&quot;);
return 0;
}
</code></pre>
<h1>Hare (Rust highlight)</h1>
<pre><code class="language-rust">use fmt;
fn main() void = {
fmt::println(&quot;Hello, World!\n&quot;)!;
};
</code></pre>
<h1>C++</h1>
<pre><code class="language-cpp">int main() {
std::cout &lt;&lt; &quot;Hello World!&quot;;
return 0;
}
</code></pre>
<h1>Rust</h1>
<pre><code class="language-rust">fn main() {
println!(&quot;Hello World!&quot;);
}
</code></pre>
<h1>Go</h1>
<pre><code class="language-go">package main
import &quot;fmt&quot;
func main() {
fmt.Println(&quot;Hello, World!&quot;)
}
</code></pre>
</div>
</article>
</div>
</main>
</body>
</html>

71
posts/proton.html Normal file
View file

@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="pt-br" />
<meta name="description" content="O serviço gratuito agora é até que bem bacana" />
<meta name="author" content="Tukain" />
<meta name="generator" content="Lume" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/assets/fav.webp" type="image/webp" />
<link href="/assets/css/styles.css" rel="stylesheet">
<title>Tukain's Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="/">início</a>
<li>
</ul>
<ul>
<li>
<a href="/blog.html">blog</a>
</li>
<li>
<a href="/conversor.html">conversor</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="post">
<article>
<hgroup>
<a href="/posts/proton.html">
<h1>Tô usando o Proton</h1>
</a>
<p>O serviço gratuito agora é até que bem bacana</p>
</hgroup>
<hr>
<div class="post-content">
<p>Depois de aproximadamente 1 ano, eu criei uma nova conta no <a href="https://proton.me">Proton</a>. Um serviço de e-mail/calendário online/VPN/cloud storage/gerenciador de senhas/carteira de bitcoin, enfim, um serviço que foca em prover basicamente as ferramentas que comumemte utilizamos com mais frequência do Google (GMail, Google Calendar, Google Drive, Google Passwords) com aquela pitada de privacidade que só a mão do Shaquille O'Neal consegue fazer.</p>
<h1>Por que?</h1>
<p>Nas últimas semanas eu comecei a voltar ao meu antigo estilo de vida sem o Google, o fato de eu ter conseguido um emprego foi um facilitador nesse aspecto. No dia do aniversário do meu irmão, eu troquei de celular com ele, dando o meu Poco M4 Pro para ele e ficando com o Moto G52 dele.</p>
<p>Essa não foi a primeira vez que a gente fez isso, na verdade na primeira vez que fiz isso com ele foi porque o Moto G52 possui uma ROM oficial da LineageOS disponível, e digamos que quando eu descobri isso eu tive uma <a href="https://i.pinimg.com/736x/87/07/97/8707972a759975b07d188308c948cc27.jpg">ativação neural</a> e no mesmo dia a gente fez essa troca. E claro, eu coloquei a Lineage no G52.</p>
<p>Enfim, vou cortar um pouco da história e pular para o presente.</p>
<p>Depois que eu fiquei com o G52 com a Lineage instalada novamente, eu comecei a fazer uma especie de &quot;detox digital&quot;, mas eu não estava deletando contas, eu estava desvinculando o Google delas. Porém, uma coisa que estava sendo uma pedra no meu caminho era o GMail, e bem, eu tenho e-mails alternativos, mas os servidores deles são lentos o suficiente para que eu basicamente só leia um e-mail 1 hora depois que eu &quot;recebi&quot; ele.</p>
<p>Tendo isso em mente, eu criei uma nova conta no Proton, que dentre várias coisas, também me dá acesso a 10 e-mail aliases. O que me permite remover o GMail da jogada, e mesmo as coisas que não estão (ainda) usando aliases não ficam presas no limbo, já que o Proton me permite receber os e-mails do GMail, no Proton, ou seja, eu não preciso nem mesmo abrir o GMail para ler os e-mails que chegam por lá.</p>
<h1>Mudanças no armazenamento</h1>
<p>Ano passado, quando eu tinha uma conta no Proton, o armazenamento era bem limitado, somente 1Gb (depois de fazer uma configuração na conta, o padrão era 512Mb) era disponível. Esses 1Gb eram compartilhado entre o serviço de e-mail/calendário e o de cloud storage. Não sei se já ficou claro, mas 1Gb não é lá muita coisa para um serviço de cloud storage, muito menos quando isso é compartilhado com outros serviços.</p>
<p>Mas, com a nova conta que criei ainda hoje, eu reparei que no serviço de e-mail o armazenamento continua sendo de 1Gb, porém o serviço de cloud storage se inicia com 3Gb! Podendo ser aumentado para 5Gb depois de seguir um passo a passo de configuração!</p>
<p>Isso é algo que eu simplesmente não tava esperando, mas é uma mudança mais que bem vinda, porque eu posso mover os arquivos que eu tinha no Google Drive para cá com muito mais folga.</p>
<h1>Uma senha praticamente impossível de digitar para a minha conta do Google</h1>
<p>Eu também estou dificultando ao máximo o meu login do Google, praticamente tornando impossível que eu faça login sem utilizar o KeePass, o que por sua vez, faz com que eu deixe de utilizar um sistema que não seja uma distro linux, no caso do meu pc, ou a LinageOS, no meu celular.</p>
<p>O KeePassXC havia lançado a +/- 2 meses atrás uma função que te permite criar passkeys utilizando o próprio KeePassXC, o que elimina a necessidade de um celular com a Google impregnada ou um iPhone. Óbviamente eu já passei a limpa em todas as contas que eu usava uma passkey da Google e gerei novas usando o KeePassXC.</p>
<p>Tudo isso me deixa cada vez menos dependente do Google, o que é algo que sinceramente qualquer pessoa deveria tentar fazer. Não só com o Google, mas com basicamente qualquer uma dessas empresas que até um idoso de 90 anos reconhece de tão popular.</p>
<h1><em>Fin</em></h1>
<p>Enfim, acho que já tagarelei demais.
Até o próximo post!</p>
</div>
</article>
</div>
</main>
</body>
</html>

91
posts/qutebrowser.html Normal file
View file

@ -0,0 +1,91 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="pt-br" />
<meta name="description" content="Meu navegador web favorito" />
<meta name="author" content="Tukain" />
<meta name="generator" content="Lume" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/assets/fav.webp" type="image/webp" />
<link href="/assets/css/styles.css" rel="stylesheet">
<title>Tukain's Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="/">início</a>
<li>
</ul>
<ul>
<li>
<a href="/blog.html">blog</a>
</li>
<li>
<a href="/conversor.html">conversor</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="post">
<article>
<hgroup>
<a href="/posts/qutebrowser.html">
<h1>Qutebrowser</h1>
</a>
<p>Meu navegador web favorito</p>
</hgroup>
<hr>
<div class="post-content">
<h1>O que é isso?</h1>
<p>O Qutebrowser é um navegador (quem diria) que usa o
motor qtwebengine, que em si é baseado no motor do Chromium, ou seja, o
Qutebrowser é um chrome da vida, que nem o Brave, Edge, Opera, Vivaldi e assim
por diante.</p>
<h1>O que ele tem de especial</h1>
<p>O que torna o
Qutebrowser diferente dos outros é uma coisa: o foco no uso do teclado.
Como que ele faz isso? Usando a movimentação do Vim e teclas de atalho
semelhantes. Você quase que não precisa de um mouse para navegar pela internet,
praticamente tudo você consegue fazer usando o teclado.</p>
<p>Como que você
interage com o site? Simples. É só apertar f e todos os elementos clicáveis da
página vão aparecer com uma sequência de letras, quando você digitar a
sequência que você deseja, o Qutebrowser vai agir como se você tivesse usado o
mouse para clicar naquele elemento.
Bom ele tem várias outras
particuliaridades, mas por enquanto só vou ficar por aqui mesmo.</p>
<h1>Porquê estou usando ele</h1>
<p>Duas coisas:</p>
<ul>
<li>Porque eu gosto do Vim</li>
<li>Porque ele é minimalista</li>
</ul>
<p>O Qutebrowser tem uma
interface extremamente minimalista, e depois de algumas configurações ele fica
ainda mais minimalista. No meu caso, quando só tem uma aba aberta, ele esconde
a barra com as abas, então a única barra visível é a barra inferior, que mostra
alguns status no lado direito e em qual modo eu estou no lado esquerdo.
Outra coisa é que o Qutebrowser é surpreendentimente leve e rápido, algo
que é difícil de se achar hoje em dia. Meu notebook mal sente o impacto do
Qutebrowser, e olha que o meu notebook é só um Celeron com 4Gb de ram (sim, ele
é um guerreiro).</p>
<h1><em>Fin</em></h1>
<p>Tendo dito toda essa ladainha, se
você é alguém que usa Linux, ou que gosta do Vim, dê o Qutebrowser uma chance,
confie em mim, é algo sem igual.</p>
<p>Te vejo no próximo post!</p>
</div>
</article>
</div>
</main>
</body>
</html>

98
posts/raylib.ha.html Normal file
View file

@ -0,0 +1,98 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="pt-br" />
<meta name="description" content="Meu primeiro projeto com a Hare" />
<meta name="author" content="Tukain" />
<meta name="generator" content="Lume" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/assets/fav.webp" type="image/webp" />
<link href="/assets/css/styles.css" rel="stylesheet">
<title>Tukain's Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="/">início</a>
<li>
</ul>
<ul>
<li>
<a href="/blog.html">blog</a>
</li>
<li>
<a href="/conversor.html">conversor</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="post">
<article>
<hgroup>
<a href="/posts/raylib.ha.html">
<h1>raylib.ha</h1>
</a>
<p>Meu primeiro projeto com a Hare</p>
</hgroup>
<hr>
<div class="post-content">
<p>Nos últimos dias eu ando trabalhando em um pequeno projeto, esse sendo algo
que estou fazendo como uma forma de aprendizado. O nome que dei a esse projeto
é raylib.ha.</p>
<p>A minha inspiração foi uma live de um streamer que eu
acompanho, o Tsoding. A live em questão é uma em que ele explora a Harelang
pela primeira vez, ao decorrer da live, ele se questiona se ele poderia usar a
raylib com a Hare. Depois de alguns minutos explorando, ele descobre como ele
pode fazer isso, e parte em direção para criar uma janela com um quadrado
vermelho que pode se movimentar na janela com as teclas W/A/S/D.</p>
<h1>Do que se trata</h1>
<p>Bem, antes de falar sobre o meu projeto, acho melhor
esclarecer a aqueles que não conhece a raylib o que ela é. A raylib, como o
nome já pode soar, é uma biblioteca que serve para a criação de jogos em C sem
muita dor de cabeça.</p>
<p>E o meu projeto se trata de algo cujo o objetivo é
criar bindings que permitam o uso da raylib por meio da Harelang.</p>
<h1>Meus objetivos</h1>
<p>Quero que, ao finalizar o projeto, seja possível criar
jogos usando a raylib com a mesma facilidade, se não até mais, do que quando
sendo feito usando C. Por enquanto estou focando nas partes necessárias para
fazer um jogo 2D, seja esse jogo um plataformer, seja ele arena-shooter
top-down.</p>
<p>Claro que isso implica também a necessidade de fazer bindings
para a raymath, já que um jogo, por mais simples que seja, também precisa ter
física. E eu vou sim fazer isso, só não agora. Ainda assim, não vai demorar
muito para eu começar a fazer as bindings da raymath.</p>
<h1>Meu progresso até agora</h1>
<p>Ainda me considero um iniciante, e falta muito para conseguir
fazer todas as bindings para jogos 2D, quem dirá para todo o resto. Porém, já
consegui finalizar coisas como o input via gamepads, teclado e mouse,
praticamente todas as formas geométricas com a excessão de apenas 3, funções de
timing, enfim, tive um avanço significativo.</p>
<p>Além da tradução direta das
funções feitas em C, eu também fiz algumas adaptações para que não ouvesse
atrito/diferença na forma em que você usa algumas funções. Também adicionei um
método alternativo para a criação de triângulos.</p>
<p>A última coisa que
realizei até o momento foi o suporte a músicas, e irei adicionar as demais
funções relacionadas a áudio ainda nessa semana. Essa última função foi também
fruto de uma intuição sobre como poder utilizar structs definidos fora da
raylib.ha, e pode ter certeza de que foi gratificante saber que deu certo.</p>
<h1><em>Fin</em></h1>
<p>Bem, isso é tudo o que eu tenho a comentar por
agora.</p>
<p>Até o próximo post!</p>
</div>
</article>
</div>
</main>
</body>
</html>

116
posts/reconstruindo meu site.html Normal file
View file

@ -0,0 +1,116 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="pt-br" />
<meta name="description" content="Como foi refazer o meu site usando o pico.css 2.0" />
<meta name="author" content="Tukain" />
<meta name="generator" content="Lume" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/assets/fav.webp" type="image/webp" />
<link href="/assets/css/styles.css" rel="stylesheet">
<title>Tukain's Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="/">início</a>
<li>
</ul>
<ul>
<li>
<a href="/blog.html">blog</a>
</li>
<li>
<a href="/conversor.html">conversor</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="post">
<article>
<hgroup>
<a href="/posts/reconstruindo meu site.html">
<h1>Reconstruindo meu site</h1>
</a>
<p>Como foi refazer o meu site usando o pico.css 2.0</p>
</hgroup>
<hr>
<div class="post-content">
<p>Bom, eu fiz de novo, eu refiz o meu website. Isso pode soar extranho caso
você esteja visitando esse lugar pela primeira vez, mas eu já fiz e refiz esse
website diversas vezes. Eu criei esse site a +/- 2 anos atrás, ele já passou
por diversas mundanças e alterações, já foi hosteado por contas do Github e
Codeberg que eu nem tenho mais, já foi até mesmo um Google Site com um domínio
do Google Domains. Já foi feito usando o Hugo, Pico.css, Emacs Org-mode,
Gendoc… Enfim, ele teve uma vida cheia de mundanças.</p>
<h1>Por que voltar ao Pico.css?</h1>
<p>Vamo lá, como já disse, eu usei o Pico.css no passado, é um ótimo framework css,
ele é uma base excelente para construir um site sem ter
que se preocupar com a estilização logo de cara. Em poucos minutos você já tem
um site agradável aos olhos, porém, ele é apenas uma base. Todo o resto fica
por sua conta, isto é, as animações, interactividade, funções, organização,
estruturação e assim por diante.</p>
<h1>O que mudou?</h1>
<p>Bom, o Pico.css teve várias mudanças relacionadas a cores, lembrando bastante o
sistema de cores do Tailwind. Isso não foi algo que me fez voltar a usar o Pico,
na verdade isso me pegou de surpresa, mas foi algo muito agradável de
descobrir.</p>
<p>Você percebe a utilidade em um framework css vir com um
sistema de cores pré feito quando você começa a fazer qualquer coisa que vá
além de um site teste. Mesmo que você não pense sobre esse assunto na criação
do site, eventualmente chegará uma hora em que você vai querer, digamos, um
banner com uma borda de cor diferente, para poder destaca-lo dos outros, como
que você vai fazer isso usando cores que combinam com as outras e não
atrapalhem com o contraste do site?</p>
<p>Essa é uma situação que já me ocorreu algumas vezes com esse site mesmo, mas
geralmente eu não dava muita atenção a esse “detalhe”, eu só fazia algo que me
fosse agradável no momento e seguia com a minha vida. Mas hoje em dia, eu sei
pelo menos que isso tem sim a sua importância, e com o Pico.css tendo cores
prontas para serem usadas…
Digamos que isso facilitou e muito a minha vida.</p>
<p>Uma coisa que decidi fazer também foi usar os emojis animados da Microsoft,
acho que foi uma adição trivial, mas ela dá mais personalidade ao site.</p>
<h1>O que eu fiz de diferente no Pico.css?</h1>
<p>Até agora eu não fiz muita coisa, apenas criei
algumas classes utilitárias que servem para animações ou destacar alguns
elementos do meu site, como as bordas nos botões na lista de posts por exemplo.
Também ando fazendo pequenas alterações na aparência das coisas, me inspirando
um pouco na interface do PS5.</p>
<p>Tendo isso em vista, eu ainda tenho a
vontade de tornar esse site algo mais interativo e funcional. Não acho que será
algo tão difícil assim, já que esse site é bem simples por natureza, mas nunca
se sabe quando você pode morder a própria língua.</p>
<h1>Descartei a maioria dos meus posts antigos</h1>
<p>Isso é algo que ao mesmo tempo em que é triste
para mim, também é algo que me livra de trabalho extra. Como já falei, esse
site tem 2 anos de história, e eu fiz alguns posts ao longo desses 2 anos.
Alguns falando sobre meu workflow da época, outros falando sobre distros linux,
outros sobre serviços online.</p>
<p>Apesar disso, algo que eu não tinha nessa
época era uma padronização nos posts e nem um planejamento em relação a
estrutura do site em si. Em outras palavras: Era uma bagunça. E ter que
reformular esses posts antigos no formato que eu adotei no início desse ano
(2024) seria trabalho extra por algo que, na minha visão, não vale tanto a pena
assim.</p>
<p>Nem tudo foi perdido, já que esse site é um repositório git,
ainda é possível acessar a última versão que possuia alguns desses posts
antigos dos quais me refiro, mas eu não irei trazer-los de volta para este
site.</p>
<h1><em>Fin</em></h1>
<p>Bem, é isso que eu tenho a falar por agora, espero que você tenha gostado da leitura.</p>
<p>Até o próximo post!</p>
</div>
</article>
</div>
</main>
</body>
</html>

157
posts/simplifiquei o site.html Normal file
View file

@ -0,0 +1,157 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="pt-br" />
<meta name="description" content="Não estou mais usando nem o Bootstrap, nem o Jekyll." />
<meta name="author" content="Tukain" />
<meta name="generator" content="Lume" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/assets/fav.webp" type="image/webp" />
<link href="/assets/css/styles.css" rel="stylesheet">
<title>Tukain's Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="/">início</a>
<li>
</ul>
<ul>
<li>
<a href="/blog.html">blog</a>
</li>
<li>
<a href="/conversor.html">conversor</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="post">
<article>
<hgroup>
<a href="/posts/simplifiquei o site.html">
<h1>Simplifiquei o site</h1>
</a>
<p>Não estou mais usando nem o Bootstrap, nem o Jekyll.</p>
</hgroup>
<hr>
<div class="post-content">
<p>Pois é, essa é mais uma prova do quão indeciso eu consigo ser com
esse site. Eu quase que fiz um refactor completo de como o site
funciona, o motivo? Eu queria deixar esse site mais fácil de ser
editado (ou até mesmo atualizado) pelo Neocities.</p>
<h1>Como ele funciona agora?</h1>
<p>Agora esse site basicamente voltou a sua origem de quando eu tinha
que escrever o HTML de cada post na mão. Claro que eu sempre tinha uma
template para poder agilizar esse trabalho, mas ainda assim era bem
ineficiênte.</p>
<p>A diferença é que agora eu fiz um shell-script que cuida de fazer
todo o processo repetitivo e me deixa por conta de simplesmente
escrever o conteúdo.</p>
<p>O script é tão simples que eu posso tornar ele em um script posix
sem muitas dificuldades.</p>
<h1>Tive que sacrificar algumas coisas</h1>
<p>Como toda mudança, são necessários alguns sacrifícios, e no caso
desse site, foram as tags.</p>
<p>Isso não é lá um grande problema, mas ainda assim é uma feature a
menos aqui.</p>
<p>Como eu vou estudar Javascript, eu acho que eu posso implementar um
sistema de tags simples, no mesmo estilo que o meu antigo sistema de
tabela de conteúdos.</p>
<h1>As dependências do script</h1>
<p>Em termos simples: uma distro Linux ou sistema unix-like.</p>
<p>Tudo o que esse script faz é uma manipulação de arquivos e nada além
disso, e para poder provar isso, aqui está todo o código do script:</p>
<pre><code class="language-bash">#!/usr/bin/env bash
echo &quot;Nome do post: &quot;
read TMPNAME
echo &quot;Descrição do post: &quot;
read DESCR
echo &quot;Thumbnail: &quot;
read THUMB
POSTNAME=&quot;$(echo &quot;$TMPNAME&quot; | tr ' ' '-')&quot;
touch posts/$POSTNAME.html
cat posts/_template.html &gt; posts/$POSTNAME.html
mkdir -p tmp
head --lines=33 blog.html &gt; tmp/top
tail --lines=+34 blog.html &gt; tmp/bottom
cat &lt;&lt; EOF &gt; tmp/middle
&lt;article class=&quot;card&quot;&gt;
&lt;a class=&quot;post-link&quot; href=&quot;/posts/$POSTNAME.html&quot;&gt;
&lt;div class=&quot;thumbnail&quot;&gt;
&lt;p class=&quot;center&quot;&gt;
$THUMB
&lt;/div&gt;
&lt;hgroup&gt;
&lt;h3&gt;$TMPNAME&lt;/h3&gt;
$DESCR
&lt;/hgroup&gt;
&lt;/a&gt;
&lt;/article&gt;
EOF
head --lines=27 posts/$POSTNAME.html &gt; tmp/post-top
tail --lines=+28 posts/$POSTNAME.html &gt; tmp/post-bottom
cat &lt;&lt; EOF &gt; tmp/post-middle
&lt;div class=&quot;post-thumbnail&quot;&gt;
&lt;p class=&quot;center&quot;&gt;
$THUMB
&lt;/div&gt;
&lt;hgroup&gt;
# $TMPNAME
$DESCR
&lt;/hgroup&gt;
&lt;hr&gt;
&lt;div class=&quot;post-content&quot;&gt;
CONTEÚDO
&lt;/div&gt;
EOF
cp blog.html blog.html.bk
cp posts/$POSTNAME.html $POSTNAME.html.bk
cat tmp/top &gt; blog.html
printf &quot;\n&quot; &gt;&gt; blog.html
cat tmp/middle &gt;&gt; blog.html
printf &quot;\n&quot; &gt;&gt; blog.html
cat tmp/bottom &gt;&gt; blog.html
cat tmp/post-top &gt; posts/$POSTNAME.html
printf &quot;\n&quot; &gt;&gt; posts/$POSTNAME.html
cat tmp/post-middle &gt;&gt; posts/$POSTNAME.html
printf &quot;\n&quot; &gt;&gt; posts/$POSTNAME.html
cat tmp/post-bottom &gt;&gt; posts/$POSTNAME.html
$EDITOR posts/$POSTNAME.html
</code></pre>
<p>Eu sei que esse código não é o mais eficiênte, mas o importante é
que ele funciona.</p>
<h1><em>Fin</em></h1>
<p>Bem, isso é tudo o que eu tenho a dizer por agora.
Até o próximo post!</p>
</div>
</article>
</div>
</main>
</body>
</html>

62
posts/teste do lumecms.html Normal file
View file

@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="pt-br" />
<meta name="description" content="Isso é só um teste." />
<meta name="author" content="Tukain" />
<meta name="generator" content="Lume" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/assets/fav.webp" type="image/webp" />
<link href="/assets/css/styles.css" rel="stylesheet">
<title>Tukain's Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="/">início</a>
<li>
</ul>
<ul>
<li>
<a href="/blog.html">blog</a>
</li>
<li>
<a href="/conversor.html">conversor</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="post">
<article>
<hgroup>
<a href="/posts/teste do lumecms.html">
<h1>Teste do LumeCMS</h1>
</a>
<p>Isso é só um teste.</p>
</hgroup>
<hr>
<div class="post-content">
<h1>Isso é só um teste</h1>
<p>Meu<br>
Caralho<br>
Alado</p>
<p>Esse bagulho tá funcionando mesmo 😱</p>
<p><img src="/assets/media/posts/46a54cc30ea925f976fc9b3f046da947.png" alt="Image"></p>
<p>Mano, até em celular isso funciona</p>
<p><img src="/assets/media/posts/6ebb3e1fd862ed25261a0aa0e51a5564.png" alt="Image"></p>
<p>Agora eu poderia usar o ChromeOS Flex sem nenhum problema... Isso é, se o Lume funcionar no Debian.</p>
</div>
</article>
</div>
</main>
</body>
</html>

155
posts/tô usando o jekyll de novo.html Normal file
View file

@ -0,0 +1,155 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="pt-br" />
<meta name="description" content="Acho melhor eu ir logo a um psicólogo, isso não deve ser normal" />
<meta name="author" content="Tukain" />
<meta name="generator" content="Lume" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/assets/fav.webp" type="image/webp" />
<link href="/assets/css/styles.css" rel="stylesheet">
<title>Tukain's Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="/">início</a>
<li>
</ul>
<ul>
<li>
<a href="/blog.html">blog</a>
</li>
<li>
<a href="/conversor.html">conversor</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="post">
<article>
<hgroup>
<a href="/posts/tô usando o jekyll de novo.html">
<h1>Tô usando o Jekyll de novo</h1>
</a>
<p>Acho melhor eu ir logo a um psicólogo, isso não deve ser normal</p>
</hgroup>
<hr>
<div class="post-content">
<p>É isso mesmo que você acabou de ler. Eu tô usando o Jekyll de novo. Cara, eu
devo estar inconscientemente treinando para conseguir o recorde mundial de
pessoa mais indecisa, eu simplesmente não consigo entender o porquê de eu fazer
isso, é algo praticamente impulsivo.</p>
<h1>Jekyll... de novo.</h1>
<p>Ok, vamos direto ao o que importa: o Jekyll.</p>
<p>Sim, eu tinha re-estruturado o site inteiro para que eu só precisasse de um
script que eu mesmo tinha criado, como eu mencionei <a href="/2024/06/25/Simplifiquei-o-site.html">aqui</a>.</p>
<p>Para jogar mais sal na ferida, eu tinha dito o seguinte:</p>
<blockquote>
<p>Eu queria deixar esse site mais fácil de ser editado (ou até mesmo atualizado) pelo Neocities.</p>
</blockquote>
<p>Pois é. Agora eu tô usando o Jekyll de novo.</p>
<p>Enfim, o resumo da ópera é que eu percebi um pequeno problema com a forma que
eu estava estruturando o site, e meio que... Não daria para manter ele do jeito
que ele estava por muito tempo. A não ser que eu quisesse que este site fosse
apenas um blog (sem feed rss, eu conseguiria fazer isso modificando o script,
mas seria mais trabalhoso do que re-implementar o Jekyll, e bom, aqui estamos),
nesse caso ele estava funcionando perfeitamente bem.</p>
<h1>0 Javascript, de novo.</h1>
<p>Uma consequência de voltar a usar o Jekyll é a falta de necessidade de utilizar
o Javascript em diversas partes do site. O meu único uso era para blocos de
código, e eu utilizava o Prism.js para renderizar esses blocos.</p>
<p>Mas o Jekyll já vem com algo que faz a mesma coisa que o Prism, e o que for
gerado vai fazer parte do HTML do site, sem a necessidade do usuário ser quem
processa a sintáxe do bloco de código.</p>
<p>Eis aqui um exemplo:</p>
<pre><code class="language-rust">use fmt;
export fn main() void = {
fmt::println(&quot;Olá, mundo!&quot;)!;
};
</code></pre>
<h1>Mas espere aí! Tem uma coisa diferente</h1>
<p>O que eu fiz de diferente desta vez foi em relação com o shell-script que era
utilizado para criar novos posts, mesmo antes de eu ter removido o Jekyll do
site, era utilizado um shell-script para poder agilizar o processo de criar
novos posts.</p>
<p>O que é que tá diferente nele?</p>
<p>Simples.</p>
<p>Ele não é mais um shell-script, ele é um script Ruby!</p>
<p>A mesma linguagem em que o Jekyll é escrito. Ou seja, eu removi uma dependência
externa do processo de construção do site. Não era algo crítico, mas ainda
assim é algo que eu acho bom de fazer.</p>
<p>No caso, diminuir a quantidade de peças diferentes envolvidas no projeto.</p>
<p>O script não é tão diferente do <a href="/2024/06/25/Simplifiquei-o-site.html">anterior</a>,
mas já dá para ver suas particularidades:</p>
<pre><code class="language-ruby">#!/usr/bin/ruby
require 'date'
puts &quot;Escolha o que você quer fazer:&quot;
puts &quot;1: Fazer um post&quot;
puts &quot;2: Fazer um tutorial&quot;
puts &quot;&quot;
choice = gets.chomp
if choice == &quot;1&quot;
path = &quot;_posts&quot;
elsif choice == &quot;2&quot;
path = &quot;_tutorial&quot;
else
abort(&quot;Opção inválida.&quot;)
end
puts &quot;Título:&quot;
title = gets.chomp
puts &quot;&quot;
puts &quot;Descrição:&quot;
description = gets.chomp
puts &quot;&quot;
puts &quot;Thumbnail:&quot;
thumbnail = gets.chomp
date = DateTime.now.strftime(&quot;%Y-%m-%d-&quot;)
filename = date + title + &quot;.md&quot;
file = File.new(filename, &quot;w&quot;)
File.open(file, &quot;w&quot;) do |f|
f.write(&quot;---
layout: post
draft: true
thumbnail: #{thumbnail}
title: #{title}
description: #{description}
---
* TOC
{:toc}
&quot;)
end
spawn(&quot;mkdir -p #{path}&quot;)
spawn(&quot;mv #{filename} #{path}&quot;)
exec(&quot;nvim&quot;, &quot;#{path}/#{filename}&quot;)
</code></pre>
<p>Tudo o que vou comentar sobre este bloco é isso aqui:</p>
<blockquote>
<p>Eu sei que esse código não é o mais eficiênte, mas o importante é que ele funciona.</p>
</blockquote>
<h1><em>Fin</em></h1>
<p>Bom, isso é basicamente tudo o que eu tenho para dizer por hoje, amanhã tenho
que ir trabalhar (vida de CLT é complicada, mas vale a pena).</p>
<p>Até o próximo post!</p>
</div>
</article>
</div>
</main>
</body>
</html>

100
posts/um setup (quase) completamente novo.html Normal file
View file

@ -0,0 +1,100 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="pt-br" />
<meta name="description" content="Os pensamentos intrusivos me dominaram" />
<meta name="author" content="Tukain" />
<meta name="generator" content="Lume" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/assets/fav.webp" type="image/webp" />
<link href="/assets/css/styles.css" rel="stylesheet">
<title>Tukain's Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="/">início</a>
<li>
</ul>
<ul>
<li>
<a href="/blog.html">blog</a>
</li>
<li>
<a href="/conversor.html">conversor</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="post">
<article>
<hgroup>
<a href="/posts/um setup (quase) completamente novo.html">
<h1>Um setup (quase) completamente novo</h1>
</a>
<p>Os pensamentos intrusivos me dominaram</p>
</hgroup>
<hr>
<div class="post-content">
<p>Você já deve ter percebido que as cores do site mudaram (de novo), e
bem, é porque agora eu uso uma paleta de cores diferente no meu setup,
e como sempre, o meu site também fica com a mesma paleta.</p>
<p>A paleta em questão é a &quot;Brogrammer&quot;, uma paleta que conheci com os
vídeos do <a href="https://youtube.com/@mentaloutlaw">Mental Outlaw</a>,
para ser mais específico, com os vídeos sobre <a href="https://youtu.be/wRh8HQ4ICwE?si=dHnk_qpx4lf4aQG4">Suckless
Software</a>.</p>
<p>E sim, eu tô usando Linux pra valer de novo, dessa o vez Arch Linux, mas
eu não acho que seja tão importante eu tomar muito do seu tempo
falando o porquê que eu voltei pra cá, até porque eu mesmo não sei.</p>
<h1>Modifiquei até mesmo o CSS do Prism.js</h1>
<p>Apesar da forma como isso possa soar, o CSS do Prism.js é até que bem
pequeno. É sério, eu achava que precisaria de pelo menos 1 hora para
concluir, mas só precisei de 10 minutos.</p>
<p>O resultado final é esse aqui:</p>
<pre><code class="language-c">#include &lt;stdio.h&gt;
int main()
{
printf(&quot;Olá, mundo!\n&quot;);
return 0;
}
</code></pre>
<h1>E como que ficou o setup?</h1>
<p>Olha, apesar de ser uma modificação &quot;simples&quot;, o setup parece com
algo muito diferente do anterior (que usava a Onedark), apesar de ter
sido baseado nele.</p>
<p><img src="/assets/media/posts/87bfdf33161881e40a88ddcf123be791.webp" alt="Image"></p>
<p>Eu também fiz algumas simpleficações com o setup, como por exemplo,
removendo o mpd e programas/scripts relacionados e fazendo/adaptando
scripts para que o <a href="https://mpv.io/">MPV</a> não só seja o
player de vídeos, mas também o de música, reduzindo assim a
quantidade de programas que o meu setup utiliza.</p>
<h1>Minha mania minimalista está retornando</h1>
<p>Acho que tudo isso só pode significar que a minha antiga mania de
minimaliso está retornando, ou já tinha retornado e eu só não tinha
reparado.</p>
<p>O que faria sentido, já que a algumas semanas eu removi os geradores
de site que eu utilizava do processo de criação de posts, e fiz eu
mesmo um script para cuidar disso.</p>
<p>Quem sabe um dia eu não me torne um <a href="https://youtube.com/@lukesmith">Luke Smith</a>
da vida? Só que ao invés de usar o <a href="https://dwm.suckless.org/">DWM</a>
eu usaria o <a href="https://swaywm.org">Sway</a>. E eu também não iria
para o México, já sabemos que não é muito fácil se dar notícias por lá.</p>
<h1><em>Fin</em></h1>
<p>Bem, isso é tudo o que eu tenho para comentar por hoje, tá na hora de
ir almoçar 😋.</p>
</div>
</article>
</div>
</main>
</body>
</html>

92
posts/voltei ao chromeos flex.html Normal file
View file

@ -0,0 +1,92 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="pt-br" />
<meta name="description" content="E a usar o VSCode também." />
<meta name="author" content="Tukain" />
<meta name="generator" content="Lume" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/assets/fav.webp" type="image/webp" />
<link href="/assets/css/styles.css" rel="stylesheet">
<title>Tukain's Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="/">início</a>
<li>
</ul>
<ul>
<li>
<a href="/blog.html">blog</a>
</li>
<li>
<a href="/conversor.html">conversor</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="post">
<article>
<hgroup>
<a href="/posts/voltei ao chromeos flex.html">
<h1>Voltei ao ChromeOS Flex</h1>
</a>
<p>E a usar o VSCode também.</p>
</hgroup>
<hr>
<div class="post-content">
<p>Olha, eu não sei se eu tô passando por alguma fase ou algo do tipo, mas em
questão de uma semana eu:</p>
<ul>
<li>Começei a ter interesse por Javascript</li>
<li>Começei a usar o Bootstrap</li>
<li>E agora, voltei a usar o VSCode e o ChromeOS Flex.</li>
</ul>
<h1>Por que?</h1>
<p>Eu tinha feito um pequeno sistema de backups no meu setup do Alpine, mas uma
coisa aconteceu que simplesmente me deixou inseguro de usar um sistema, que por
mais estável que seja, tivesse a possibilidade de quebrar, então, decidi que
voltaria a usar o ChromeOS Flex.</p>
<p>Ele é um sistema que sou muito familiarizado e é extremamente estável, a ponto
de que você tem que querer tentar quebrar ele para talvez conseguir. E ele
também vem recebendo algumas atualizações muito interessantes, como por exemplo
o redesign que ele teve recentemente.</p>
<h1>Agora por que o VSCode?</h1>
<p>Bom, uma limitação do ChromeOS Flex é que o sistema de containers Linux dele só
permite a utilização do Debian, que por mais que eu consiga utilizar, é bem
mais limitado que o Alpine em questão de versão de pacotes e também por faltar
alguns outros que eu usava com muita frequência (lazygit, por exemplo).</p>
<p>E em questões de desenvolvimento web, o VSCode junto do ChromeOS Flex é uma
combinação extremamente confortável. Já que… O sistema operacional em si é
basicamente um navegador com esteróides.</p>
<p>Outras conveniências como a integração com o Git por exemplo também são muito
úteis (não que a minha configuração do Neovim não tivesse isso, mas nesse caso
é uma coisa que faz parte do programa e não um plugin).</p>
<h1>O que eu perdi nesse processo</h1>
<p>Na prática, somente minhas chaves pgp, por uma falha no meu sistema de backups,
tirando isso, nada de importante, já que eu tenho um banco de dados do Keepass
com minhas credenciais e códigos de autenticação, e também deixo algumas senhas
e códigos de autenticação salvos no gerenciador de senhas do Google e no Google
Authenticator.</p>
<p>Ou seja, em termos de dados perdidos, foram virtualmente 0.</p>
<p>Em questão de programas, ouve uma substituição no lugar de perda, como por
exemplo, o VSCode está substituindo a combinação do Neovim com o Lazygit.</p>
<h1><em>Fin</em></h1>
<p>Bem, é isso, não é muito, mas já é um post.</p>
<p>Até o próximo post!</p>
</div>
</article>
</div>
</main>
</body>
</html>

129
posts/ziglang.html Normal file
View file

@ -0,0 +1,129 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="pt-br" />
<meta name="description" content="A linguagem com o melhor build system que já usei até hoje" />
<meta name="author" content="Tukain" />
<meta name="generator" content="Lume" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/assets/fav.webp" type="image/webp" />
<link href="/assets/css/styles.css" rel="stylesheet">
<title>Tukain's Website</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="/">início</a>
<li>
</ul>
<ul>
<li>
<a href="/blog.html">blog</a>
</li>
<li>
<a href="/conversor.html">conversor</a>
</li>
</ul>
</nav>
</header>
<main>
<div class="post">
<article>
<hgroup>
<a href="/posts/ziglang.html">
<h1>Zig</h1>
</a>
<p>A linguagem com o melhor build system que já usei até hoje</p>
</hgroup>
<hr>
<div class="post-content">
<p>E lá vamos nós, mais um post falando sobre uma linguagem de programação…
Dessa vez eu irei falar sobre a <a href="https://ziglang.org">Zig</a>, para ser mais
preciso, eu quero comentar sobre o build system da Zig.</p>
<h1>Antes, o que é a Zig?</h1>
<p>A Zig é uma linguagem de programação com o foco em criação de softwares
robustos, ideais e reutilizáveis. Também é uma linguagem simples (no
sentido literal, ela não é fácil), que não quer ser um obstáculo para o
programador, deixando assim que você foque em debugar o seu programa, não a
linguagem.</p>
<p>Ela é uma linguagem em que o código deve ser explícito. Não existem
pre-processadores, não existem alocações de memória escondidas, não exite um
fluxo de trabalho escondido.</p>
<p>tudo é exposto ao programador, de forma que até mesmo um simples “olá mundo”
passe de um simples</p>
<pre><code class="language-c">printf(&quot;Olá, mundo!\n&quot;);
</code></pre>
<p>para</p>
<pre><code class="language-zig">std.io.getStdOut().writer().print(&quot;Olá, {s}!\n&quot;, .{&quot;mundo&quot;});
</code></pre>
<p>Isso é algo que pode ser útil ou atrapalhar um pouco, acho que só depende de
experiência mesmo.</p>
<h1>O build system da Zig</h1>
<p>Comecei a estudar a Zig ontem, e uma coisa que me chamou a atenção foram 2
tipos de comentários, um de documentação <code class="language-plaintext highlighter-rouge">///</code> e um de topo
de documentação <code class="language-plaintext highlighter-rouge">//!</code>.</p>
<p>O que chama a atenção, é que esses comentários não podem ser utilizados em
qualquer lugar, eles devem ser usados, respectivamente, antes de uma definição
e no topo do código-fonte.</p>
<p>Esses comentários são usados na criação de um site estático, esse sendo gerado
com o comando <code class="language-plaintext highlighter-rouge">zig build-exe -femit-docs</code>.</p>
<p>Sim. O compilador da Zig é capaz de gerar um website de documentação, onde a
documentação utilizada pelo site é definida no código-fonte do seu programa.</p>
<p>Só isso já facilita todo o processo de aprendizado para mim, já que eu posso
gerar uma documentação para eu mesmo, contendo as referências que eu utilizei
para fazer algo, instruções e até mesmo o próprio código-fonte para ser
checado.</p>
<h1>Compilando um programa feito em zig usando outro arquivo Zig</h1>
<p>Esta é outra coisa que me chamou a atenção, o arquivo <code class="language-plaintext highlighter-rouge">build.zig</code>.</p>
<p>Esse arquivo é o responsável por dizer onde está o código-fonte, onde será
posto os binários, quais as opções de compilação seram utilizadas, quais os
testes que serão executados, e na realidade qualquer coisa que você queira.</p>
<p>O <code class="language-plaintext highlighter-rouge">build.zig</code> é praticamente um Makefile bufado, tendo todo o poder da
linguagem disponível para uso.</p>
<h1>Zls</h1>
<p>Que saudades de um LSP 😭</p>
<p>Diferente da <a href="https://harelang.org">Hare</a>, a Zig possui um lsp, o que é
(principalmente na Zig) extremamente útil.</p>
<p>Como eu já mencionei</p>
<blockquote>
<p>Ela é uma linguagem em que o código deve ser explícito. [...]</p>
</blockquote>
<p>E exemplifiquei com o <code class="language-plaintext highlighter-rouge">olá, mundo!</code>, a Zig tem uma sintaxe que exige que
todas as funções utilizadas sejam expostas, e digamos que a biblioteca padrão é
bem completa…</p>
<p>tendo isso dito, já dá para pressupor que não dá para você simplesmente dar um
chute as cegas sobre como uma função é chamada e acertar de primeira, não
facilmente pelo menos (não mesmo).</p>
<p>O Zls também tem um formatador e suporte a sintax highlighting, o que sempre é
bem-vindo para mim.</p>
<h1>Compilação lenta no começo, rápida no resto</h1>
<p>O compilador da Zig possuí um sistema de cache, ele serve para que você não
tenha que compiladar todo o programa do zero, basicamente apenas as mudaças são
compiladas pelo o que eu entendi (eu posso estar errado, eu ainda não li muito
sobre o compilador).</p>
<h1>Documentação sempre pronta para leitura</h1>
<p>A Zig também tem toda a documentação da biblioteca padrão disponível para uso a
qualquer momento, você só precisa executar o comando <code class="language-plaintext highlighter-rouge">zig std</code> e a
documentação será aberta em seu navegador de escolha em um servidor web
hosteado em sua máquina.</p>
<p>Acho que eu não preciso mencionar o quão útil isso é. Não é?</p>
<p>Junto com a pasta de instalação da Zig, vem também o manual de referência da
versão da Zig que você fez download.</p>
<h1><em>Fin</em></h1>
<p>Bem, isso é tudo o que eu tenho a dizer por hoje. Eu tenho um longo caminho
pela frente em relação a estudos.</p>
<p>Até o próximo post!</p>
</div>
</article>
</div>
</main>
</body>
</html>