diff options
Diffstat (limited to 'posts')
| -rw-r--r-- | posts/let-there-be-light-theme/blog.webp | bin | 0 -> 67994 bytes | |||
| -rw-r--r-- | posts/let-there-be-light-theme/content.md | 22 | ||||
| -rw-r--r-- | posts/let-there-be-light-theme/deeper.html | 46 | ||||
| -rw-r--r-- | posts/let-there-be-light-theme/meta.json | 7 | ||||
| -rw-r--r-- | posts/making-this-blog/book.md | 13 | ||||
| -rw-r--r-- | posts/making-this-blog/content.md | 74 | ||||
| -rw-r--r-- | posts/making-this-blog/meta.json | 7 | ||||
| -rw-r--r-- | posts/making-this-blog/yggdrasil.webp | bin | 0 -> 24140 bytes |
8 files changed, 169 insertions, 0 deletions
diff --git a/posts/let-there-be-light-theme/blog.webp b/posts/let-there-be-light-theme/blog.webp Binary files differnew file mode 100644 index 0000000..625a835 --- /dev/null +++ b/posts/let-there-be-light-theme/blog.webp diff --git a/posts/let-there-be-light-theme/content.md b/posts/let-there-be-light-theme/content.md new file mode 100644 index 0000000..0439ffb --- /dev/null +++ b/posts/let-there-be-light-theme/content.md @@ -0,0 +1,22 @@ +...and there was light theme. + +## print("Hello world.") + +Whenever I read techy blogs, whether one of my friends' or some random dude's who haven't updated the format of his website since the '90s, I get the urge to write one myself. Ever since I first picked up coding as a hobby (and later as a job) I was always on the lookout for opportunities to use my newfound skillset for something fun or useful. About 3 years ago I switched from Windows to Arch Linux as my main OS. I never really used Linux before, so it was quite a challenge at first, but thanks to my good friend [oliva](https://teml.in) I was able to learn more about computers in a year than ever before. Eventually this website was born, hosting my silly little projects and my first ever serious attempt to create something on the internet. + +## What's with the blog? + +I plan to use this blog as a ~~wall of shame for all my abandoned projects~~ collection/documentation/chronicle for all my running projects. Most of them will probably be software related, hopefully some of them hardware related (because I want to get into it more), but I also plan to work on some other geeky stuff (like building a lightsaber!) or learning 3D modeling and animation. + +The skybox is the limit! + +## What's next? + +If you are one of the few unfortunate people to lay your gaze upon this blog too early, you are probably looking at something like this: + +![very ugly blog post with no css at all](blog.webp "WE NEED TO GO DEEPER" deeper.html INCEPTION) + +This is the current state of the blog as I'm writing these lines. I knew that if I _ever_ want this blog to happen, I have to start writing before setting up the blog itself, otherwise I would never be able to convince myself to work on it. I'm not a huge fan of frontend. <span class=nobr>\<sarcasm\></span> I know, shocking. <span class=nobr>\</sarcasm\></span> + +So the first official project: making a somewhat more aesthetically pleasing layout and theme. Probably with dark mode. +I may keep the ugly original theme as an easter egg. Try and find it! diff --git a/posts/let-there-be-light-theme/deeper.html b/posts/let-there-be-light-theme/deeper.html new file mode 100644 index 0000000..90966cc --- /dev/null +++ b/posts/let-there-be-light-theme/deeper.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Let there be light theme</title> +</head> +<body> + <p>…and there was light theme.</p> + <h2 id="printhello-world.">print(“Hello world.”)</h2> + <p>Whenever I read techy blogs, whether one of my friends’ or some + random dude’s who haven’t updated the format of his website since the + ’90s, I get the urge to write one myself. Ever since I first picked up + coding as a hobby (and later as a job) I was always on the lookout for + opportunities to use my newfound skillset for something fun or useful. + About 3 years ago I switched from Windows to Arch Linux as my main OS. I + never really used Linux before, so it was quite a challenge at first, + but thanks to my good friend <a href="https://teml.in">oliva</a> I was + able to learn more about computers in a year than ever before. + Eventually this website was born, hosting my silly little projects and + my first ever serious attempt to create something on the internet.</p> + <h2 id="whats-with-the-blog">What’s with the blog?</h2> + <p>I plan to use this blog as a <del>wall of shame for all my abandoned + projects</del> collection/documentation/chronicle for all my running + projects. Most of them will probably be software related, hopefully some + of them hardware related (because I want to get into it more), but I + also plan to work on some other geeky stuff (like building a + lightsaber!) or learning 3D modeling and animation.</p> + <p>The skybox is the limit!</p> + <h2 id="whats-next">What’s next?</h2> + <p>If you are one of the few unfortunate people to lay your gaze upon + this blog too early, you are probably looking at something like this:</p> + <figure> + <img src="blog.webp" title="INCEPTION" + alt="very ugly blog post with no css at all" style="border: 2px solid #555;width:80%;height:80%" /> + <figcaption aria-hidden="true">INCEPTION</figcaption> + </figure> + <p>This is the current state of the blog as I’m writing these lines. I + knew that if I <em>ever</em> want this blog to happen, I have to start + writing before setting up the blog itself, otherwise I would never be + able to convince myself to work on it. I’m not a huge fan of frontend. + <sarcasm> I know, shocking. </sarcasm></p> + <p>So the first official project: making a somewhat more asteticaly + pleasing layout and theme. Probably with dark mode. I may keep the ugly + original theme as an easter egg. Try and find it!</p> +</body> +</html> diff --git a/posts/let-there-be-light-theme/meta.json b/posts/let-there-be-light-theme/meta.json new file mode 100644 index 0000000..4b0daaa --- /dev/null +++ b/posts/let-there-be-light-theme/meta.json @@ -0,0 +1,7 @@ +{ + "title" : "Let there be light theme...", + "publish_date" : "2024-06-23", + "tags" : [ + "website" + ] +} diff --git a/posts/making-this-blog/book.md b/posts/making-this-blog/book.md new file mode 100644 index 0000000..4f38185 --- /dev/null +++ b/posts/making-this-blog/book.md @@ -0,0 +1,13 @@ +[Enter the Library of Babel...](https://libraryofbabel.info/browse.cgi) + +In the Library of Babel, every little room (a.k.a. hex) has a name. Most of them are pretty long, because they are unique and there is a lot of them. You should start by visiting **this hex**: + +<div class="code-block-wrap"><p class="force-wrap">36j9mt1q6uz4yhglzs9gcclw6x0mhe08g9uo3sfsb2yikskdjq0hllrje5xrod8g51ohi1z9074tkb19zqq3o06x5rml5w6z5lv2w7vc8obmp1m9sczo8vwkhgnk3b7v0f15vvhlappmoveaaq8scehsafitgp2msy7b1tk853ykfyfk3f5i1vizh30r993n2asssj2lyi46ee0xh91fltajjkediytmuenmi7zbtqeqtwyqpw7jjrcehf1kazkws5oujuxabdbb4dovcz1l9zild0lzjzpk9qpye1ms7uzxxvs2w08fl1fwi3brr6izrjo9rvxll0kpee3dv9mux5gjjaqz3vxmvjmz1187nl8rf0lsnkitj7mhcpxox8djbhzs6qq6b3dkdgsleplwtcixjhckjrbcmfa7ynik9hp906lg60zh2rbd6ar8q7pjg9cso1agthxjapbb4gi3mqqxu5jvhbnwdrwop4nj6btnius2j2biy7e75cd8hwo1qdmz9fexysbbxbiwfefj1mas88z4rdu1lfcfuqr6xhi21gliehnr9qi1l37k9cmkyztge3u8ke66e1lz4ftrwgu6radi1nvf5qkpp144tlmdlcl4kj91h7q54rqsi5ewrkxhgasjfjzwyfdqqu6enw2hl5knlthd0pgttlr2095raj8877g35u4v95z26bp9kz61tang689fb9p2e1udcotb9hh5ik76g5ilroazrfr3d2tpoblwr2017zcx2tszmh629toog6ptfk2hbbw7gonfkbx4u2vtvvspktx06td77k901wyby0jlnzrmb9t47rse3xbjpmwipb1oxxo1zjrml4mu4y0fmhfvbc9nrqvn56w6tmzrx10pjcvat5lyd4nqnmx3hl2zvnityu5z76swmalkjcjr1uuowx2redeuwpfuhl76xmgiloh8j0xyxp3amhp41kduxf8h9d6htui3wmqgtrndec35ucnx0jyyntcuyriw26utz3m3lsjtub53taugyly96yf9on3ffop1vxqnpy3s5ko7yp99zdnwgcgsafto64ll5g0c1ovouhc8e44it62yb0u01o4jrg7z1ur712mcrzb3pwiydmi1d7k9aakruak3rxbp420g47s7j7gl4wnsatauiuetl9i3t6mk7ig0zcierq961rqhie21hfh50jv28gqpdr12sd50nkjhmxyj70n12vw9dc0gwhb38q0ym6euba6zl0a3jq7ngnesyg9alvit34f9eloykd8q3hjj1na223uq04gkpjlhfbq7x6muhb7mhpiqctazsewsgg1j8hjr41yeyluxdfychbpgv6jwp79kbymcm6ekoqwi8nvq1fa3rfyy373hph4cacylo4fy0sgsrtpridvxdl80l9mdqe69y88tjfx1fi0bjknlgxsz1bjilg8ojfesrigof73kzr6lszrks89zhwb0azxe2vj1654hk1dkox9zcrfubakfcgzw83kuxmjbj666lvzjabd7hoyakrk1kewdfqctdlxonq7t4qvst5n1h0kgn4dqqtepwfkfwl1elu63x0qentorg04g775caehdoqervlb258tr2r7thrq6d34600j8zp41tfmkdsif7x5g3sv8i2oqtnmb581xblxrzbx8i4bolee489yuh2yqb9aw9hdcxjvgwytgwqqfgcu1x1uf4wetp2w5dkk5hh7ve4m4a03dequypgoe7mff9i7s6ul40qq966fyva37hl5jgzwnck4lej13d2ja95eqdyx3sh6c7ks9u7rp007e44ytqp1x0r9iqlh8ekmsm2rdjj6c80j3zy5f0sr1d7nm6yc3ptazentl88jxbo045lc3rvwb4ybqyq0v9ofsdu12fr9ync29u05ovk3vrj14jmsfhiy6mnnwxnsxbez8i003e3sju4xgaaho36qjm4ijeufrf1c1y92j0qe0zzxsut5p7sv1a13c7ezfstr7g9lfd9qrdk9dkddfh9d0edmy01ei6997ap6mhqt2tlmm6tuehqokruwt4ng314z6xcqtfug9w4744dvwyzst2agssk2th5jqir3waalu3eihtibyjkoy2in184nyxd3yp8pnwxztdpfmoy615z8iero719yz3ft4sx6pv3fgxhz8i8uot1taebqicat2xc809wgr27wgonrdxfrkhzmkg22hwjca2nymfti284dyn6a90tvsy7itzwz8mmfr9zvnp0io0wkfpq7ihkh6fnuq7ieg84pjaeba3srff2gs5f2i14sg014ghmjfd0itafnm3d6ly8wg3c8mxe95x11c6gl668ydjlfusffssaee4qt0yshlypw8e0z2nb6c95102pcq3dvhl3rd6ma59eju2zo1of3ovxsdcogzvbjsau23rmwlrlzyvfdxsojk822gm3c5jdf30hux28vguz2w3oz3j8wxh03vq0gewb12tcbg5zfm3zspap7bhzb85b35e3v5oxigfepbqv0i43jh4nyvmelgv7g679f96sbya4p8aemyuf2wgvaakhazk6zrt3s1tc6m8cgi5mqzxmri21jz24r9jyhymnj3vfns51qyx59p2ipf8jf4j07w18rlbdj5vh57nm5kmfh7aigeww92k8ypdilnl1ekld2nrx9w7g1nkx0im2zq4zxhkobeyth02y0g93f0eq5wi7r28wfaruzdm24ipeo562zjm1jerpyqrwym2ygspbmed1jjec6x1jssjreckdwosvxdobfaqr80j3c0xuhwfyie2ivhwlxay3dwkismpqthy32tnu13dajh563acuvtbpivl7deo7f3s0rc17xtra6d0ewz6jcbrl95x6126yuq7geme9tr3jxvryezrgthxhh8evif5yub8rlyo9fmuglwiolz9qj7lc7dfsu28qxonjqg2gt652zdynfm9o9gzwg301vh97e0s5suz1ke2n69ulbq3dcc06eppuqj9ujm681l9auh5z20ban4oab1k20rvs6vfxr4oj759v2vkvqk80lb8kzhvm6bsjnfdwwelfjjp46c3ppg1i5qcaksf53ash92c0zzvsyzjz44j9o6makhp6asljgivsfrw3b2czeh79zuntnftv9xegi9vs4jjsnu653zdinai2x21kgf656z8k4t6v6e3izdz8fl6ec1ufyx3047fr2cnla6jq6rug</p></div> + +When you have arrived to the room, walk up to the **2nd wall**. + +Look for a book on the **3rd shelf**. + +It should be the **22nd volume** on this shelf. You can't miss it. It's called **qbhejxylqtqfuo**. + +Now turn to **page 201** and be amazed... diff --git a/posts/making-this-blog/content.md b/posts/making-this-blog/content.md new file mode 100644 index 0000000..a8f28ef --- /dev/null +++ b/posts/making-this-blog/content.md @@ -0,0 +1,74 @@ +This is the story of how I was finally able to create my first normal looking webpage, this blog. + +## The most crucial part of every project +If you have a fondness for your projects like me, you know that finding a good name for your stuff is the most important thing. You want to choose a clever, fitting name, because it makes it _yours_. Almost like a pet dog, cat, raptor or whatever. Sometimes... okay, almost always I use some sort of **pun or acronym**. I had projects where I've decided on the acronym way before trying to figure out a name which it could be an abbreviation for. This is the reason I was able to have multiple serious discussions with colleagues about what my "Maid" (Manageable Asset Information Database) could do, and what additional features should be considered (but this is a story for another time). + +The other approach I have for selecting a name, is finding something with **sentimental value or a grandiose/cool sounding vibe**. For example in a relatively difficult period in my life, I had a PC with the hostname of "Hyouka". It's a Japanese word that translates to "ice cream". If you want to understand the deeper meaning behind the hostname, I recommend checking out the brilliant Kyoto Animation [anime](https://myanimelist.net/anime/12189/Hyouka) with the same name. + +When trying to find a name for my blog I considered things like the [Library of Babel](https://en.wikipedia.org/wiki/The_Library_of_Babel). I love the idea that the place contains all the knowledge that had been or _will_ be known, perfect for a blog striving to be the chronicle of my learnings. In the end I dropped the idea because it was too long and there is a [website](https://libraryofbabel.info) by that name already. If you are interested, I've found a pretty interesting [book](book.html) there. + +In the end, my choice of name fell on... well I don't know, actually. I'm still looking at the placeholder text "@myblogname" as I'm writing these lines. Scroll up to the title at the top of the page, and you will know what I ended up with. + +![the image of the webpage title, @yggdrasil, with an ascii art of a tree](yggdrasil.webp "Yggdrasil is the giant World Tree of the Norse mythology. More about this in the future!" "https://en.wikipedia.org/wiki/Yggdrasil" "A note from my future self: Never mind, here it is.") + +## The core concept +From the very beginning I wanted to create something nerdy and relatively original. Then I remembered, that a computer science teacher (unfortunately I forgot who) back in my university days had a webpage where all the menu items and chapters looked like **shell commands**. I decided I wanted to do something similar. + +I started (with the help of a few friends) brainstorming on ideas I could use for the blog, like a fake "head" command for post summaries, or "ls" for listing the related tags for a post. For a while it was really bugging me, that I couldn't make the whole system **"realistic"**. For example "head" obviously can't display images, even though I wanted the previews to contain one. In the end I decided I will just let it go, and have the commands mean **"something similar"** to their real shell counterparts. + +Unfortunately I don't really have any graphics designer experience, so I had to look up some terminal colors on the internet. Luckily I've found a website called [terminal.sexy](http://terminal.sexy/) where I really liked the default color template, so I could use it almost without any modification. +The current color scheme is this: + +<div class="code-block"> + <p class="fg">fg: #b5aba8</p> + <p class="bg" style="background-color:var(--term-fg)">bg: #2b2b2b</p> + <p class="black">black: #515151</p> + <p class="red">red: #cc6666</p> + <p class="green">green: #b5bd68</p> + <p class="yellow">yellow: #f0c674</p> + <p class="blue">blue: #81a2be</p> + <p class="magenta">magenta: #b294bb</p> + <p class="cyan">cyan: #8abeb7</p> + <p class="white">white: #b5aba8</p> +</div> + +For the font I used my all-time favorite font, [JetBrains Mono](https://www.jetbrains.com/lp/mono), regular size, no ligatures. They had **.woff** format on their GitHub page, + +<span class="red">- but unfortunately only the ligatures version, which I don't like that much, so in the end I had to use **.ttf**.</span> + +<span class="green">+ Update (2024-08-05): as a kind reader, [György](https://kuruczgy.com/) has pointed it out, I can use the **.woff** font, if I specify that I want no ligatures in the css:</span> + +<div class="code-block"> +<p><span class="yellow">html</span> <span class="cyan">{</span> + <span class="green">font-family</span>: <span class="red">"jetbrains-mono"</span>, <span class="red">serif</span>; + <span class="green">font-variant-ligatures</span>: <span class="red">none</span>; +<span class="cyan">}</span></p> +</div> + +<span class="green">+ Also, as a result, I had to implement the css for this **codeblock**, and I got the idea to add updates to a post in a **git diff** +/- style, so it was a good exercise.</span> + +## Putting together the whole thing +For most of the other subdomains under **wazul.moe** I already had a few thrown together Python scripts to generate the content. Luckily my friend [Marcsello](https://blog.marcsello.com) opensourced his whole blog, so it was easy for me to _get inspired_ by it, and the templating engine he used. You could say he "led me into the Jinja". (If you are Hungarian this is your cue to laugh. Otherwise, disregard this pun.) + +So I started learning [Jinja](https://jinja.palletsprojects.com/), the **templating engine**. This was the first time I used it, but probably not the last one. I can see it being used for other than HTML as well. + +Since I'm not really a fan of **frontend**, this was really my first "professional" looking webpage. I was always afraid of creating display size responsive layouts. Fortunately [Bootstrap](https://github.com/twbs/bootstrap) ended up being far easier to use than I anticipated. Truth to be told, I used a [stripped down version](https://github.com/dmhendricks/bootstrap-grid-css) with only the grid system included, nothing else. + +I've written the actual content of the posts in **Markdown**, so I also used [Marko](https://marko-py.readthedocs.io/), which is a neat little Markdown converter with great extensibility. I ended up creating a few extensions for it, they can be found [here](https://git.wazul.moe/warko) on my git (and it's called warko, because W is an upside down M, and also W like Wazul, get it?). + +<span class="red">- When I got to implementing the **RSS feed** I was a bit tired already so I almost straight up ripped it from Marcsello's code (not like I didn't steal all the other libraries from his project). It's using [feedgen](https://feedgen.kiesow.be) to do the job.</span> + +<span class="green">+ Update (2024-08-07): I was not satisfied with the original **RSS feed** generator, as it was leaving out some of the tags, so in the end I made the whole thing in a Jinja template. I guess _that's_ a use other than HTML technically.</span> + +I'm planning to **opensource my blog** as soon as I've got it in order, it will be available on my [git](https://git.wazul.moe) soon™. + +## TODO +There is still a lot of small things to do on the blog. I ended up implementing mostly those features I needed for writing this second blogpost. I also want to use my Jinja knowledge and **rebuild the rest of my webpage**. Maybe add a normal menu to the main domain instead of the current content, which is just the game over message from the Legend of Zelda: Mayora's Mask. + +I also want to do other projects, like **designing an icon for myself**. I have some ideas already, now I only need to learn Inkscape and do it. <span class=nobr>\<sarcasm\></span> Piece of cake! <span class=nobr>\</sarcasm\></span> + +And of course, I have a **ton to write about**, both my past and future projects, so I think I'm going to be busy. I ended up working a bit more on this post than I first anticipated but I enjoyed it regardless. Hell, I even took my laptop to a holiday drinking party and coded some of the last features for the blog! No sarcasm this time. + +<br> + +Alright then... see you in the next one I guess!
\ No newline at end of file diff --git a/posts/making-this-blog/meta.json b/posts/making-this-blog/meta.json new file mode 100644 index 0000000..e034f3d --- /dev/null +++ b/posts/making-this-blog/meta.json @@ -0,0 +1,7 @@ +{ + "title" : "Making this blog", + "publish_date" : "2024-07-03", + "tags" : [ + "website", "coding", "python" + ] +} diff --git a/posts/making-this-blog/yggdrasil.webp b/posts/making-this-blog/yggdrasil.webp Binary files differnew file mode 100644 index 0000000..ebd7a4d --- /dev/null +++ b/posts/making-this-blog/yggdrasil.webp |
