|
| 1 | +#+BLOG: iocanel.com |
| 2 | +#+POSTID: 757 |
| 3 | +#+BLOG: iocanel.com |
| 4 | +#+DATE: [2021-08-30 Mon 21:48] |
| 5 | +#+BLOG: iocanel.com |
| 6 | +#+BLOG: iocanel.com |
| 7 | +#+ORG2BLOG: |
| 8 | +#+OPTIONS: toc:nil num:nil todo:nil pri:nil tags:nil ^:nil |
| 9 | +#+TITLE: Hackers guide to Jiu Jitsu: Markdown Wiki |
| 10 | +#+DESCRIPTION: Using mplayer hacks to capture notes from bjj instructionals |
| 11 | +#+CATEGORY: Jiu Jitsu |
| 12 | +#+TAGS: Jiu Jitsu |
| 13 | + |
| 14 | +[[./hackers-guide-to-jiu-jitsu.png]] |
| 15 | +* Intro |
| 16 | + |
| 17 | +I am a 40+ software engineer and recreational Jiu Jitsu practitioner, struggling with vast amount of information related to the sport. |
| 18 | +I decided to make use of my `computer` skills to aid me in the process of taming this new skill. |
| 19 | + |
| 20 | +In this section I am going to discuss why and how [[https://en.wikipedia.org/wiki/Markdown][markdown]] is the ideal format for using for your notes. I am also going to conver how |
| 21 | +to use [[https://en.wikipedia.org/wiki/Markdown][markdown]] in order to maintain wiki/second brain for your Jiu Jitsu notes. |
| 22 | + |
| 23 | +* What is markdown ? |
| 24 | + |
| 25 | + Markdown is a lightweight markup language for creating formatted text using a plain-text editor. |
| 26 | + Formatting includes things like: |
| 27 | + |
| 28 | + - Headers |
| 29 | + - Bold, italic, underlined text |
| 30 | + - Images |
| 31 | + - Hyperlinks |
| 32 | + - Tables |
| 33 | + |
| 34 | + If you know what html is, you can think of [[https://en.wikipedia.org/wiki/Markdown][markdown]] as an alternative to html that instead of weird tags, just makes clever use of symbols. |
| 35 | + |
| 36 | + Here is an example: |
| 37 | + |
| 38 | + #+begin_src markdown |
| 39 | + |
| 40 | + # Heading |
| 41 | + ## Sub-heading |
| 42 | + |
| 43 | + Unordered list: |
| 44 | + |
| 45 | + - item 1 |
| 46 | + - item 2 |
| 47 | + - item 3 |
| 48 | + |
| 49 | + | Syntax | Description | |
| 50 | + | ----------- | ----------- | |
| 51 | + | Header | Title | |
| 52 | + | Paragraph | Text | |
| 53 | + |
| 54 | + #+end_src |
| 55 | + |
| 56 | + |
| 57 | +* Why markdown ? |
| 58 | + |
| 59 | + It is 100% pure text. No propriatory file formats, no coupling to a particular editor or tool. |
| 60 | + You can easily edit it from all your devices without the need of any specialized software. |
| 61 | + |
| 62 | + This also means that you can easily generate or manipulate it using scripts (cough cough). |
| 63 | + This is really important because we can easily export information from instructionals directly into [[https://en.wikipedia.org/wiki/Markdown][markdown]]. |
| 64 | + |
| 65 | + For example, we can generate an animated gif, as demonstrated in previous posts and embed the image into markdown (for example: [] my double under notes). |
| 66 | + |
| 67 | + Most importantly, [[https://en.wikipedia.org/wiki/Markdown][markdown]] supports links, which is what makes using [[https://en.wikipedia.org/wiki/Markdown][markdown]] for building ourselves a second brain (interconnected notes). |
| 68 | + |
| 69 | + |
| 70 | +* What is a wiki ? |
| 71 | + |
| 72 | + After searched for a proper definition in multiple wiki pages, I came up with: |
| 73 | + |
| 74 | + `Wiki is a knowledge base presented as collection of well connected web pages and colaboratively edited.` |
| 75 | + |
| 76 | + A richer definition can be found in [[https://en.wikipedia.org/wiki/Wiki][wikipedia: wiki]]. |
| 77 | + |
| 78 | + In this serires of posts we don't really care about the collaborative part, but more about the edited that implies that a wiki is something living/evolving, that is expected to be edited / updated. |
| 79 | + |
| 80 | +* Why wiki ? |
| 81 | + |
| 82 | + When I first started taking notes on Jiu Jitsu, I used a single text file, were I kept things. As the file grew larger, it was becoming harder and harder to easily jump to a particular note in the file. |
| 83 | + Also, there were cases were I needed to link notes together ... |
| 84 | + |
| 85 | + Think for a moment Juji gatame (armbar). How does one organize notes on juji gatame? |
| 86 | + |
| 87 | + [[./Boromir-Juji-Gatame.jpg]] |
| 88 | + |
| 89 | + - Do they go in the attacks from mount section? |
| 90 | + - Do they go in the attacks from closed guard section? |
| 91 | + - Do they go in the flying attacks? |
| 92 | + - Do they go in the escapes from popular attacks? |
| 93 | + |
| 94 | + I think that it should go everywhere. And the only pragmatic way for this to happen is by linking `juji gatame` to all of the sections listed above. |
| 95 | + |
| 96 | + When it comes to note taking, anything that can't be represented by a single tree-like structure and contains links for one topic to another is better split per topic and use linking to bring pieces together. |
| 97 | + |
| 98 | + This alone is enough for one to pickup wiki. |
| 99 | + Additional points for familiarity. |
| 100 | + And most importantly it is something that can be easily combined with [[https://en.wikipedia.org/wiki/Markdown][markdown]] that is already mentioned above. |
| 101 | + |
| 102 | + Have a look at my demo [[https://github.com/iocanel/blog/tree/master/hackers-guide-to-jiu-jitsu-04-markdown-wiki/wiki/index.md][wiki]], to get some idea: |
| 103 | + |
| 104 | + This is not my complete wiki but something that I put together for the shake of this post (with hopefully enough teasers inside). It includes: |
| 105 | + |
| 106 | + - Chunks of my personal notes |
| 107 | + - Flow chart diagrams (for techniques) that I created myself (and yes, I will blog about how you can create them too). |
| 108 | + - An animated gif or two that summarize techniques |
| 109 | + |
| 110 | + This might also be a nice starting point for your own wiki, if you are sold on the idea. |
| 111 | + |
| 112 | +* Creating a markdwon based wiki for Jiu jitsu |
| 113 | + |
| 114 | + Next step is to pick ourselves up the right tool for the job. Below there are the top three candidates: |
| 115 | + |
| 116 | + - [[https://github.com/][Github]] |
| 117 | + - [[http://dynalon.github.io/mdwiki/#!index.md][mdwiki]] |
| 118 | + - [[https://tiddlywiki.com/][tiddlywiki]] |
| 119 | + |
| 120 | +** Github |
| 121 | + |
| 122 | + Github is a [[https://git-scm.com/][git]] hosting service. |
| 123 | + |
| 124 | + _*Oversimplification alert*_ |
| 125 | + |
| 126 | + Think of it as service that allows you to create public or private shared folders, that contain textual (mostly) and binary files. The service also keeps history of changes and provides a platform for collaboration with others. |
| 127 | + I wouldn't suggest it to people not already familiar with git. |
| 128 | + |
| 129 | + My demo [[https://github.com/iocanel/blog/tree/master/hackers-guide-to-jiu-jitsu-04-markdown-wiki/wiki/index.md][wiki]] is hosted on [[https://github.com/][Github]], so you get the idea. |
| 130 | + |
| 131 | +** Tiddlywiki |
| 132 | + |
| 133 | + A wiki solution, that allows users to host their wiki either locally or publicly. It's pretty extensible and one of the extensions provides [[https://en.wikipedia.org/wiki/Markdown][markdown]] support. |
| 134 | + Even thought it seems pretty powerful, the installation of extensions proved to be a little bit tricky for me, so I wouldn't recommend it either. |
| 135 | + |
| 136 | + |
| 137 | +** mdwiki. |
| 138 | + |
| 139 | + [[http://dynalon.github.io/mdwiki/#!index.md][mdwiki]] (as the namely implies) is a [[https://www.markdownguide.org/][markdown]] based wiki. I found it pretty simple to install and use and it's what I recommend to use in this post. |
| 140 | + *Note*: This solution is not standalone and does require the use of an http server (see below). |
| 141 | + |
| 142 | +* Installing mdwiki |
| 143 | + |
| 144 | + Go to [[https://github.com/Dynalon/mdwiki/releases][mdwiki releases page]] and grab the latest release zip file. At the time of writing this was [[https://github.com/Dynalon/mdwiki/releases/download/0.6.2/mdwiki-0.6.2.zip][mdwiki-0.6.2.zip]] |
| 145 | + Extract the contents of the zip in the folder you wish to save your notes. |
| 146 | + |
| 147 | + |
| 148 | + On most systems, something like this would work. |
| 149 | + |
| 150 | + #+begin_src sh |
| 151 | + unzip mdwiki-0.6.2.zip |
| 152 | + #+end_src |
| 153 | + |
| 154 | + Or use whatever you already use for extracting zip archives. |
| 155 | + |
| 156 | + |
| 157 | +* Installing an http server |
| 158 | + |
| 159 | + We will need an http server to serve our wiki. |
| 160 | + |
| 161 | +** Machines with nodejs installed (Windows, OSX & Linux) |
| 162 | + |
| 163 | + On machines with [[https://nodejs.org/en/][nodejs]] already installed the easiest solution is to install [[https://www.npmjs.com/package/http-server][http-sever]] via npm. |
| 164 | + |
| 165 | + #+begin_src sh |
| 166 | + npm install -g http-server |
| 167 | + #+end_src |
| 168 | + |
| 169 | + If you don't have [[https://nodejs.org/en/][nodejs]] installed, then follow the operating system specific options. |
| 170 | + |
| 171 | +** Windows |
| 172 | + |
| 173 | + On windows you can just use the [[https://www.microsoft.com/en-us/p/simple-http-server/9nt5t97khpqg?activetab=pivot:overviewtab][simple http server]] or any other server of your choice. |
| 174 | + Just install the application and select the [[http://dynalon.github.io/mdwiki/#!index.md][mdwiki]] folder as the server root. |
| 175 | + |
| 176 | + |
| 177 | +* Using the http server with your wiki |
| 178 | + |
| 179 | + Assuming that you have your wiki files under `wiki` in your home directory, you could try: |
| 180 | + |
| 181 | + #+begin_src sh |
| 182 | + http-server wiki |
| 183 | + #+end_src |
| 184 | + |
| 185 | + or in general |
| 186 | + |
| 187 | + #+begin_src sh |
| 188 | + http-sevrver /path/to/wiki |
| 189 | + #+end_src |
| 190 | + |
| 191 | + |
| 192 | +* Using mdwiki via docker |
| 193 | + |
| 194 | + Maybe this whole series should have started with post on [[https://www.docker.com/][docker]] but it didn't. So, I'll just through here a few words on [[https://www.docker.com/][docker]] and how to use it to run your wiki. |
| 195 | + |
| 196 | +** A few words on docker |
| 197 | + |
| 198 | + I'll try to explain docker with as little technical details possible. |
| 199 | + |
| 200 | + Imagine the following use cases: |
| 201 | + |
| 202 | + - You want to run an application without installing it locally. |
| 203 | + Why ? |
| 204 | + - To quickly try out the application |
| 205 | + - To use a different version of the application you have currently installed. |
| 206 | + - To avoid having to deal with installing required software |
| 207 | + - Security related reasons |
| 208 | + - You want to run application that is not installable on your Operating System. |
| 209 | + - You want to package multiple binaries / apps and configuration in a single bundle. |
| 210 | + - You want something like a virtual machine, but: |
| 211 | + - Easier to create |
| 212 | + - Smaller |
| 213 | + - With faster startup |
| 214 | + |
| 215 | + So, [[https://www.docker.com/][docker]] is a possible solution for the use cases described above. |
| 216 | + |
| 217 | + |
| 218 | +** Running mdwiki via docker |
| 219 | + |
| 220 | + If you already have [[https://www.docker.com/][docker]] installed on your machine and don't fancy dealing with how to install a webserver to run your wiki, look no futher. |
| 221 | + |
| 222 | + #+begin_src sh |
| 223 | + docker run -d -p 80:8080 -v ~/wiki:/wiki iocanel/http-server:09.2021 /wiki |
| 224 | + #+end_src |
| 225 | + |
| 226 | + #+RESULTS: |
| 227 | + : 4e54c6f2aec97b81c624fc22d339f5e175c0da08aca939a25234bc6acdae6b80 |
| 228 | + |
| 229 | + Just open your browser at `http://localhost` and you should be good to go. |
| 230 | + |
| 231 | +* Using your wiki |
| 232 | + |
| 233 | +From this point on you can start using your wiki and fill it with notes. |
| 234 | + |
| 235 | +I won't spent time explaining the sytax. I've already provided a links to guides [[https://en.wikipedia.org/wiki/Markdown][markdown]] docs. (every occurance [[https://en.wikipedia.org/wiki/Markdown][markdown]] is a link to https://www.markdownguide.org/). |
| 236 | +I also use from time to time this [[https://guides.github.com/pdfs/markdown-cheatsheet-online.pdf][cheatsheet]]. In any case, the syntax is pretty trivial and this is why its recommended. |
| 237 | + |
| 238 | +You will be able to catch up with syntax pretty fast, but it might take you a while before you find how to best organize your notes. |
| 239 | + |
| 240 | +I found that what works best for me is to keep each note as small and focused as possible. This allows me to better link pieces together in meanigful way. |
| 241 | +Have a look at my demo [[https://github.com/iocanel/blog/tree/master/hackers-guide-to-jiu-jitsu-04-markdown-wiki/wiki/index.md][wiki]] to get ideas, or even use it as a starting template for your wiki. |
| 242 | + |
| 243 | +Also, I am really interested in knowing if how you organize your notes, so feel free to reach out to me and share your experiences, either by commenting, email etc. |
| 244 | + |
| 245 | +# ./hackers-guide-to-jiu-jitsu.png https://iocanel.com/wp-content/uploads/2021/10/hackers-guide-to-jiu-jitsu.png |
| 246 | +# ./Boromir-Juji-Gatame.jpg https://iocanel.com/wp-content/uploads/2021/10/Boromir-Juji-Gatame.jpg |
0 commit comments