Wiki

content/wiki/computers/vscodepico8/vscodepico8.md

@@ -0,0 +1,139 @@
+---
+  title: "Using VS Code with PICO-8"
+  tagline: "Because indentation is always worth it"
+  date: 2021-02-11
+  navigation:
+    label: "PICO-8 + VS Code"
+    category: computers
+---
+
+{% usingCSSComponent "code" %}
+
+I like [PICO-8, the fantasy console by Lexaloffle](https://www.lexaloffle.com/pico-8.php). It's really useful and cute whenever I feel like making small games. It's pretty good
+
+{% image src="./wiki/computers/vscodepico8/pico8.png", alt="Swedish keyboard Layout", caption="The PICO-8 window. It's small" %}
+
+However, I despise programming in its window, it's **really** small, promote bad code design due to its restrictions and well, overall isn't that comfortable. Over the years, I got really used to having my code on one screen and the result on the other but this unfortunately isn't possible with PICO-8. I think promoting faster iterations would be really beneficial since it's often used for fast prototyping or jams but hey, I'm not the devs 🤷‍♀️
+
+So, in order to achieve this unofficially, I wrote myself a quick and dirty post-save script to automatically build a .p8 file out of a folder of lua files that can be edited outside PICO-8. Additionally, it reloads PICO-8 so the changes appear instantly! (You can also run it instantly on save in VS Code, see [Auto-reload on save](#auto-reload-on-save))
+
+## Script
+
+```bash
+#!/bin/bash
+
+result=`
+i=0
+for f in $1/*.lua; do
+    ((i++)) && ((i!=1)) && echo "-->8";
+    cat $f;
+    echo;
+done`
+project_name=`basename "$1"`.p8
+
+sd -f gsm "(?:__lua__)(.*)(?:__gfx__)" "__lua__\nREPLACE\n__gfx__" "$HOME/.lexaloffle/pico-8/carts/$project_name"
+sd -s "REPLACE" "${result}" "$HOME/.lexaloffle/pico-8/carts/$project_name"
+
+sleep 0.2
+
+swaymsg '[class="pico8"] focus' && sleep 0.1 && ydotool key ctrl+r
+```
+
+### Usage
+
+The script takes for sole parameter the folder name to operate in and use it to determine the name of the cart, therefore your folder **must** have the same name as your cart. The script won't create the cart for you, you'll have to create it yourself through PICO-8 or other tools first
+
+The .lua files are added by alphabetic order, a good way to use this is by prefixing your files with numbers, ex: `00-main.lua, 01-visuals.lua etc`. Also the script automatically adds `-->8` between the pages as to make a tab per file in PICO-8, this is harmless and doesn't change behavior in any way, it's purely cosmetical
+
+### Dependencies
+
+For the cart building part
+
+- [sd](https://github.com/chmln/sd)
+
+And for the auto-reload
+
+- Sway
+- [ydotool](https://github.com/ReimuNotMoe/ydotool)
+
+## Syntax coloration and snippets
+
+The script is great, it allows us to work in VS Code but the experience isn't that integrated yet. We don't have coloring, snippets and other goodies
+
+In order to get those in .p8 files there's [this extension](https://marketplace.visualstudio.com/items?itemName=Grumpydev.pico8vscodeeditor) that's available and works perfectly but it won't work out of the box in our case because not only we're not working in .p8 files, we're also missing the markers the extension check for before enabling itself
+
+Let's do a little bit of hacking to fix that:
+
+- Go to the extension folder in your VS Code installation (On Linux that's `~/.vscode/extensions/grumpydev.pico8vscodeeditor-version`)
+- In `syntaxes/lua.tmLanguage.json` remove the `begin` and `end` property in `patterns`
+
+Voilà! The extension now enable itself without needing the markers normally used in .p8 files. Don't forget to set the languages of your .lua files properly in VS Code (see [Auto-assign correct language to .lua files](#auto-assign-correct-language-to-.lua-files) for a way to do this automatically) and you should be up and ready!
+
+## Bonus tips and tricks
+
+### Auto-reload on save
+
+Out of the box VS Code doesn't allow to run actions on save outside of making an extension for it. Luckily, [an extension called Run On Save exist for that](https://marketplace.visualstudio.com/items?itemName=emeraldwalk.RunOnSave)
+
+With the following config added to your workspace settings, the script will automatically run whenever you save, pretty cool huh
+
+```json
+"emeraldwalk.runonsave": {
+    "commands": [
+        {
+            "match": ".lua",
+            "cmd": "bash ${workspaceFolder}/build.sh ${fileDirname}"
+        }
+    ]
+},
+```
+
+Change `build.sh` for the name you used for the script file. I would recommend avoiding using auto-save with this (or at least, use a bit delay if using it) as it's very easy for PICO-8 to bug out a bit with it
+
+### Auto-assign correct language to .lua files
+
+Thanks to the `files.associations` setting, you can make it so the proper language is used by default for .lua files
+
+```json
+"files.associations": {
+  "**/*.lua": "pico8p8"
+},
+```
+
+## Windows version
+
+I also built a Windows version using Powershell and AutoHotKey, it doesn't work as well as the Linux version does for some reasons but still, it (mostly) does its job
+
+```powershell
+$projectName = ([io.fileinfo]$args[0]).BaseName
+$fileDir = $args[0] + "/*.lua"
+
+$result = Get-Content $fileDir | Out-String
+
+$p8Path = $env:APPDATA + "/pico-8/carts/inktober/" + $projectName + ".p8"
+
+(Get-Content -path $p8Path -Raw) -replace '(?ms)(?:__lua__)(.*)(?:__gfx__)', "__lua__`n$result`n__gfx__" | Set-Content -Path $p8Path
+
+Start-Sleep -Milliseconds 300
+
+Start-Process .\reload-pico8.exe
+```
+
+And to reload PICO-8, this AHK script was used:
+
+```autohotkey
+if WinExist("ahk_exe pico8.exe")
+    WinActivate ; use the window found above
+    SendInput, ^{r}
+    WinActivate, ahk_exe Code.exe
+return
+```
+
+The Powershell script assume the AHK script is compiled and saved in the same folder under the name `reload-pico8.exe`
+
+The usage is the same as the Linux version (see [Usage](#usage)) however unlike the Linux version, it doesn't separate the files in multiple PICO-8 tabs
+
+## Possible improvements
+
+- Use only one call to sd, the reason why it uses two is that I couldn't figure out a way to do it in one call that didn't break whenever escape codes were used in the Lua code
+- Remove the two calls to sleep. I don't think they are needed, perhaps a bit of delay is needed but probably not that much on Linux

content/wiki/computers/vscodesetup/vscodesetup.md

@@ -0,0 +1,111 @@
+---
+  title: "My VS Code setup"
+  tagline: "Because feeling at home is important"
+  date: 2021-04-05
+  navigation:
+    label: 'VS Code setup'
+    category: computers
+---
+
+{% usingCSSComponent "code" %}
+
+These days, my editor of choice is, like many people, [VS Code](https://code.visualstudio.com/)
+
+Previously it was [Sublime Text](https://www.sublimetext.com/) but a Python-based editor in a world where the most used language is Javascript and everyone and theirs mothers does web stuff - it doesn't work anymore. I'm glad you paved the way for the future Sublime. I'll always love you for all you did.
+
+Ok! Now that the goodbyes are done, let's talk about my VS Code setup
+
+{% image src="./wiki/computers/vscodesetup/screenshot.png", alt="Screenshot of my VS Code setup, the color scheme is dark, the sidebar is on the right", caption="My setup is pretty classic so don't expect anything too crazy. Some newly added settings might be missing from this particular screenshot" %}
+
+## Settings
+
+Those are intentionally not complete, some of the settings I have in my full config files are for things I don't really use (such as Zen Mode or the Git support inside the editor), default settings that I redefine just to be exhaustive or things that are personal choices outside of the scope of this article (such as if I accept telemetry or not)
+
+```json
+  // Visuals
+  "workbench.colorTheme": "lucy-evening",
+  "editor.fontFamily": "'Iosevka', 'Fira Code', 'Font Awesome 5 Free Regular', 'Font Awesome 5 Free Solid', 'Font Awesome 5 Brands Regular'",
+  "editor.fontSize": 15,
+  "editor.fontWeight": "500",
+  "editor.fontLigatures": true,
+  "editor.minimap.enabled": false,
+  "workbench.sideBar.location": "right",
+  "window.menuBarVisibility": "toggle",
+  "editor.wordWrap": "on",
+  "editor.rulers": [
+    80,
+    120
+  ],
+  "workbench.colorCustomizations": {
+    "terminal.background": "#17161b",
+    "panel.background": "#131317",
+    "statusBar.background": "#17161b",
+    "tab.activeBackground": "#25242b",
+    "sideBarSectionHeader.background": "#131317",
+    "activityBar.foreground": "#b8aba5",
+    "sideBar.foreground": "#a39793"
+  },
+
+  // Usability
+  "files.autoSave": "afterDelay",
+  "files.trimTrailingWhitespace": true,
+  "files.trimFinalNewlines": true,
+  "files.insertFinalNewline": true,
+  "editor.formatOnSave": false,
+  "editor.formatOnPaste": true,
+  "editor.linkedEditing": true,
+  "files.exclude": {
+    "**/node_modules/**": true
+  },
+  "workbench.startupEditor": "newUntitledFile",
+  "workbench.editor.highlightModifiedTabs": true,
+  "editor.suggest.preview": true,
+  "editor.bracketPairColorization.enabled": true,
+
+  // Language specifics
+  "html.format.indentInnerHtml": true,
+  "[markdown]": {
+    "editor.wordWrap": "on",
+    "editor.quickSuggestions": false,
+    "files.trimTrailingWhitespace": false,
+    "editor.rulers": [] // Disable rulers in Markdown
+  },
+```
+
+### Visuals
+
+My favorite font for coding these days is by far [Iosevka](https://typeof.net/Iosevka/). I find the default font weight a bit hard to read on my screen so I put it at 500. I use [Fira Code](https://github.com/tonsky/FiraCode) (my previous font) as a fallback for computers where Iosevka is not installed. For both, ligatures are enabled - love those
+
+I disable the minimap. I don't find it to be useful in any way as I probably don't work on files big enough anyway. I put the sidebar on the right side, that way toggling it doesn't change the position of the code. Probably one of the best changes I've made over the year to my config funnily enough, it's really good. I also hide the menu bar because it clash a lot with the rest of the color scheme
+
+## Extensions
+
+I try to avoid using extensions as much as possible to avoid unnecessary bloating and performance issues however there's so many good stuff available on VS Code that it's really hard not to overcommit on extensions and sometimes well, a few ms more to start your editor you're gonna sit in all day doesn't hurt too much 😅
+
+### **Auto Close Tag** and **Auto Rename Tag** by Jun Han
+
+So both of those features are actually available by default in VS Code (`html.autoClosingTags` for Auto Close Tag and `editor.linkedEditing` for Auto Rename Tag) and it works really well!
+
+Unfortunately for both of those the support is limited and so they only work in a limited list of format. Those extensions work in every format so that's good
+
+### Highlight Matching Tag
+
+TODO: screenshot of the extension
+
+This extension highlights matching opening and closing tags. It makes it much easier to see where you are in a file, simple enough.
+
+I pair it with VS Code's native bracket pair colorization (`editor.bracketPairColorization.enabled`). It's not necessarily pretty, the colors get pretty funky at times but it's very useful. One day, I'll customize the colors so it look nicer
+
+### Linters and EditorConfig
+
+I use the following linters with mostly their default settings: ESLint, stylelint and markdownlint. Most of the projects I work on are in Javascript (ESLint), have CSS (stylelint) and use Markdown for content (markdownlint) so, it just makes sense. They all three have very good integrations into VS Code, it's really pleasant to work with
+
+Additionally, I use EditorConfig for VS Code to add support for .editorconfig files. I really wonder why VS Code doesn't have support for these natively yet as they are used in a lot of big profile projects, including VS Code itself but oh well
+
+### Todo Tree
+
+This one I use a lot! It highlights and list every TODOs (and other tags) in your project. It's really satisfying to see the list of TODOs get smaller and smaller!
+
+It's heavily configurable, notably you can add as many custom tags as you want. Personally, in addition to the default ones, I added a tag "NOTE" to list every parts that need explanation.
+
+Often, parts that need explanations are parts that should be simplified so much like TODOs I try to reduce the list of NOTEs as much as possible ha!

content/wiki/floristry/flowerreadings/flowerreadings.md

@@ -0,0 +1,27 @@
+---
+  title: "Recommended readings for aspiring florists"
+  tagline: "And just everybody interested in flowers really"
+  navigation: 
+    category: floristry
+    label: "Readings about flowers"
+---
+
+Floristry doesn't really have the best presence online, sure you can find plenty of pictures of bouquets and various other arrangements but it's surprisingly hard to find lessons, guides etc about it (special mention however to the MANY Youtube channels such as [FlowerSchool](https://www.youtube.com/user/FlowerSchool/videos) or [Flower Joos](https://www.youtube.com/c/FlowerJoos/videos), those are great!)
+
+You see, there's no "[MDN](https://developer.mozilla.org/en-US/) of the flowers". Outside of the many videos on Youtube, typing "how to do {thing}" on your favorite search engine will most likely lead you towards sketchy websites or at least, really non-informative content
+
+Thankfully, there's an alternative yet still true and tried way to learn anything that exist: **Books**
+
+## References
+
+These books are not designed to be read from cover to cover, instead they should be used as references you consult when needed
+
+{% image src="./wiki/flowerreadings/flower-color-guide.png", alt="Cover of Flower Color Guide", class="image-left", caption="Flower Color Guide" %}
+
+### Flower Color Guide
+
+This book by [Darroch and Michael Putnam](https://putnamflowers.com/) is sometimes being referred to as being the "bible for florists". Case in point: When searching books about flowers, it will often come first or at least be heavily recommended!
+
+The book advocate the idea of primarily identifying flowers by their colors and thus put a lot of emphasis on the theory of colors in floristry. It's a very elegant book, putting much attention on the flowers through full screen pages of them at their peak state
+
+A followup book by the same authors focusing even more on the color theory also exist under the name "Flower Color Theory" (which I also recommend!)

content/wiki/floristry/introtoflowers.md

@@ -0,0 +1,18 @@
+---
+title: Why floristry?
+tagline: 'Flowers are cute'
+navigation:
+    category: floristry
+
+---
+You might be wondering what a floristry section is doing on this website, after all the others categories are all about more-or-less nerdy stuff such as computers or video games!
+
+Well, I unexpectedly got an interest in floristry back in 2018, it came to me.. through a dream? It definitely does sounds a bit weird to say haha but I saw myself as the cute lesbian florist on the corner, it was so cute. Funnily enough, it was a nightmare because eventually in the dream a bunch of teenagers burned down my shop while calling me homophobic slurs but still, most of the dream was good
+
+This really inspired to start learning about it and so I started visiting florists around town to ask questions about the job etc. It was a really pleasant experience, most florists welcomed me happily and answered all my questions. One even gave me a free floral composition to bring back home, that was cute!
+
+I wanted to go to school for it but unfortunately, the school where the class took place was too far and the class was cancelled every year anyway due to low participation, so much like I did with programming, I started learning by myself thanks to the internet and [books](/wiki/flowerreadings)
+
+In April 2021, I ordered more than 500$ worth of fake flowers in order to practice making bouquets and started selling those around July in order to buy more flowers. It's good practice regarding structure, colors etc but of course it doesn't replace real flowers
+
+And.. This is kinda where it stops for now, due to COVID-19, I couldn't really pursue a job in it just yet. But, I'm sure I'll eventually get there. I hope so at least

content/wiki/games/melee.md

@@ -0,0 +1,7 @@
+---
+  title: "Melee"
+  navigation:
+    category: "games"
+---
+
+TODO

content/wiki/index.md

@@ -0,0 +1,12 @@
+---
+  title: "Welcome to my wiki!"
+  navigation:
+    category: 'misc'
+    hidden: true
+---
+
+Here you'll find random pages about random stuff. Nothing worth to put in an article yet still interesting enough for me to note
+
+To be completely honest, I use the term "wiki" because I can't find a better term, but really this is nothing like a wiki, it's really just a list of random pages. My reasoning for not making articles out of those is because I want to keep my [blog](/articles/) cleaner and some of the pages here are really not polished enough to be full articles
+
+To navigate, simply use the menu on the left, I hope you find some interesting stuff in there!