diff --git a/data/videos/github1/logistic.md b/data/videos/github1/logistic.md index 3472b27..a8133c3 100644 --- a/data/videos/github1/logistic.md +++ b/data/videos/github1/logistic.md @@ -4,4 +4,5 @@ speaker: Phumrapee Limpianchop; Thai Pangsakulyanont youtube: i58lEAFqDlw managed: true published: '2023-11-17' +subtitles: [en] --- diff --git a/data/videos/github1/logistic_en.vtt b/data/videos/github1/logistic_en.vtt new file mode 100644 index 0000000..6b089d4 --- /dev/null +++ b/data/videos/github1/logistic_en.vtt @@ -0,0 +1,2152 @@ +WEBVTT + +1 +00:00:02.900 --> 00:00:06.000 +RIFFY: Hello everyone. + +2 +00:00:10.786 --> 00:00:15.000 +I'm Riffy from Creatorsgarten. + +3 +00:00:15.000 --> 00:00:20.856 +This session is co-hosted + with p' Thai Pang. + +4 +00:00:20.857 --> 00:00:23.000 +From Creatorsgarten. + +5 +00:00:23.000 --> 00:00:39.000 +Today, we will look at the software tools +behind Creatorsgarten’s logistics. + +6 +00:00:39.000 --> 00:00:43.000 +We will divide the session into two parts. + +7 +00:00:43.000 --> 00:00:50.000 +The first part will be about how we +manage our YouTube channel. + +8 +00:00:50.000 --> 00:00:53.000 +How we simplify the process. + +9 +00:00:53.000 --> 00:00:57.000 +The second part will be +presented by Thai Pang. + +10 +00:00:57.000 --> 00:00:59.000 +He will show you Contentsgarten. + +11 +00:00:59.000 --> 00:01:03.000 +It is our custom wiki engine. + +12 +00:01:03.000 --> 00:01:07.000 +We utilize many GitHub features. + +13 +00:01:07.000 --> 00:01:10.000 +Let's get started. + +14 +00:01:10.000 --> 00:01:17.000 +We have officially formed Creatorsgarten +for 1 year and 2 months. + +15 +00:01:17.001 --> 00:01:25.999 +We have organized many events. + +16 +00:01:26.000 --> 00:01:31.000 +Every talk we livestreamed, +we also archive it. + +17 +00:01:31.000 --> 00:01:39.000 +One purpose is to publish it to +our YouTube channel. + +18 +00:01:39.000 --> 00:01:45.000 +For those interested in the topics +of our past events. + +19 +00:01:45.001 --> 00:01:50.999 +In the past, we didn’t have many +centralized entities that organizes events + +20 +00:01:51.000 --> 00:01:54.286 +so the videos are spread over +many YouTube channels + +21 +00:01:54.287 --> 00:02:03.000 +In Creatorsgarten, we trim each video, +post-process them and upload to YouTube. + +22 +00:02:03.000 --> 00:02:08.000 +Before starting streaming, we need +to set up our devices for livestreaming. + +23 +00:02:08.001 --> 00:02:09.999 +Like 1 hour ago. + +24 +00:02:10.000 --> 00:02:12.999 +Lots of wires over there. + +25 +00:02:13.000 --> 00:02:17.000 +Archiving an event is hard. + +26 +00:02:17.000 --> 00:02:22.885 +A lot of things can +go wrong unpredictably. + +27 +00:02:22.886 --> 00:02:28.000 +Some speakers have just slides. + +28 +00:02:28.000 --> 00:02:32.000 +Some speakers wants to +play a video with sound. + +29 +00:02:32.000 --> 00:02:37.000 +Sometimes we don't know in advance +what each speaker needs. + +30 +00:02:37.000 --> 00:02:43.000 +Microphone is also an issue. + +31 +00:02:43.000 --> 00:02:47.000 +When we run an event at Cleverse (venue), + +32 +00:02:47.000 --> 00:02:53.000 +we know how the setup looks like. + +33 +00:02:53.000 --> 00:02:57.000 +But when we move to another venue, + +34 +00:02:57.000 --> 00:03:03.000 +it's called uncharted space. + +35 +00:03:03.000 --> 00:03:06.000 +We don't know what they provide for us. + +36 +00:03:06.000 --> 00:03:08.000 +It's our risk. + +37 +00:03:08.000 --> 00:03:12.000 +If they don't have a microphone, +where can we find it? + +38 +00:03:12.000 --> 00:03:15.000 +Another thing is, +can we have full control? + +39 +00:03:15.000 --> 00:03:17.000 +If I speak too loudly, + +40 +00:03:17.000 --> 00:03:19.000 +I can't control the sound. + +41 +00:03:19.000 --> 00:03:22.000 +I can't control the output sound. + +42 +00:03:22.000 --> 00:03:25.000 +How do we solve this? + +43 +00:03:25.000 --> 00:03:28.670 +The answer to this problem +is to spend money. + +44 +00:03:28.671 --> 00:03:30.000 +(AUDIENCE: Rich!) + +45 +00:03:30.000 --> 00:03:32.000 +We use... + +46 +00:03:32.000 --> 00:03:36.000 +In each Creatorsgarten event, + +47 +00:03:36.000 --> 00:03:39.000 +we receive sponsorship money +from many sponsors. + +48 +00:03:39.000 --> 00:03:41.000 +Which we use for maximum benefit. + +49 +00:03:41.000 --> 00:03:45.000 +But when there is some leftover money, + +50 +00:03:45.000 --> 00:03:50.000 +we keep it into a cash pool, + +51 +00:03:50.000 --> 00:03:55.000 +we use this money to improve +our workflow, and share it. + +52 +00:03:55.000 --> 00:03:57.000 +We simplify everything. + +53 +00:03:57.000 --> 00:04:04.314 +Video signal is fed into an ATEM Mini. + +54 +00:04:04.315 --> 00:04:10.000 +It receives the video that is +projected on the screen like this, + +55 +00:04:10.000 --> 00:04:15.357 +as well as the sound that flows into +the software running on Mac Mini. + +56 +00:04:15.358 --> 00:04:21.000 +But sometimes this solution +isn't good enough. + +57 +00:04:21.001 --> 00:04:29.999 +Sometimes the venue doesn't provide a way +to feed the sound from the mixer + +58 +00:04:30.000 --> 00:04:39.000 +In a desperate situation, +sometimes we had to do a hotfix + +59 +00:04:39.000 --> 00:04:42.000 +sticking a mic to the amplifier. + +60 +00:04:42.000 --> 00:04:47.000 +It kinda works but not as great, +but well, ain’t broke, don’t fix. + +61 +00:04:49.000 --> 00:04:58.000 +When we go to each venue, we took notes +about what equipment they have for us. + +62 +00:04:58.000 --> 00:05:01.563 +So when we stream at the same place, +we don't have to ask them + +63 +00:05:01.564 --> 00:05:03.000 +what equipment they have. + +64 +00:05:03.000 --> 00:05:11.000 +When we finished recording, +it may be 3-5 hours long. + +65 +00:05:11.000 --> 00:05:15.000 +The file that came out of OBS +is very large, like 32GB. + +66 +00:05:15.000 --> 00:05:19.000 +Too big for Final Cut to handle. + +67 +00:05:19.000 --> 00:05:22.000 +If we put it in Final Cut, it hangs. + +68 +00:05:22.000 --> 00:05:26.000 +We have to optimize it first. + +69 +00:05:26.000 --> 00:05:34.000 +For this, we have a FFmpeg script. + +70 +00:05:34.000 --> 00:05:39.000 +We re-encode from H.264 to H.265. + +71 +00:05:39.000 --> 00:05:44.000 +The size is reduced from 32GB to 5GB. + +72 +00:05:44.000 --> 00:05:49.000 +Good for using with Final Cut. + +73 +00:05:49.000 --> 00:05:52.000 +And it's also archived in a physical NAS. + +74 +00:05:52.000 --> 00:05:57.589 +In case of an unfortunate event where +our channel is hacked + +75 +00:05:57.590 --> 00:06:01.000 +and becomes an Elon Musk livestream. + +76 +00:06:01.000 --> 00:06:04.000 +We have a backup. + +77 +00:06:04.000 --> 00:06:09.000 +Ok, so we've already recorded the video. + +78 +00:06:09.000 --> 00:06:11.000 +Now we upload it to YouTube. + +79 +00:06:11.000 --> 00:06:16.000 +But after uploading, +we have to manage the content. + +80 +00:06:16.000 --> 00:06:23.000 +Managing this is even harder. + +81 +00:06:23.000 --> 00:06:29.000 +Because we want consistency +in our YouTube channel. + +82 +00:06:29.001 --> 00:06:33.999 +Consistent video title format. + +83 +00:06:34.000 --> 00:06:36.000 +We start with the session. + +84 +00:06:36.000 --> 00:06:38.000 +Followed by the speaker. + +85 +00:06:38.000 --> 00:06:42.000 +Or if it's a stream archive, +it's in another format. + +86 +00:06:42.000 --> 00:06:49.000 +If it's a session with many speakers, +we can't fit all names in the title. + +87 +00:06:49.000 --> 00:06:52.000 +We have to put it in yet another format. + +88 +00:06:52.000 --> 00:06:59.000 +Actually, we can manage it manually. + +89 +00:06:59.000 --> 00:07:01.000 +But it may be too inefficient. + +90 +00:07:01.000 --> 00:07:06.000 +And if we want to add subtitle, +how will we manage it? + +91 +00:07:06.000 --> 00:07:07.000 +Okay. + +92 +00:07:07.000 --> 00:07:14.000 +So, P' Thai created this repo in GitHub. +creatorsgarten/videos + +93 +00:07:14.000 --> 00:07:27.000 +We can manage each video's metadata +through this repository. + +94 +00:07:27.000 --> 00:07:30.000 +And a GitHub Actions bot will +make changes accordingly. + +95 +00:07:30.000 --> 00:07:35.000 +When we manage each session, + +96 +00:07:35.000 --> 00:07:41.690 +We can create a markdown file +with metadata, such as + +97 +00:07:41.691 --> 00:07:51.000 +title, speaker, youtube id, +and session description. + +98 +00:07:51.000 --> 00:07:59.013 +For other video types, +such as hackathon pitch, + +99 +00:07:59.014 --> 00:08:08.000 +we just specify the type, and our code +will format the title accordingly. + +100 +00:08:08.000 --> 00:08:20.000 +For subtitles, we don't have to manage the +files locally or on YouTube. + +101 +00:08:20.000 --> 00:08:30.000 +In this repo, we can upload subtitle file +in VTT format, which is a global standard. + +102 +00:08:30.000 --> 00:08:35.000 +It will be uploaded to YouTube. + +103 +00:08:36.000 --> 00:08:44.638 +Consistency is not only about +video title and description, + +104 +00:08:44.639 --> 00:08:50.000 +but also about the video thumbnail. + +105 +00:08:50.001 --> 00:09:00.999 +At first, we intended to make +each event look different. + +106 +00:09:01.000 --> 00:09:07.494 +P' Thai suggested using +a consistent thumbnail format + +107 +00:09:07.495 --> 00:09:12.000 +similar to Sakurai's channel +on creating games. + +108 +00:09:12.000 --> 00:09:16.000 +The solution we got is not an automation. + +109 +00:09:16.000 --> 00:09:20.000 +But it’s Figma's component system. + +110 +00:09:20.000 --> 00:09:25.000 +When we make video thumbnails, +we have a preset template. + +111 +00:09:25.000 --> 00:09:31.000 +We have the header on the top and +we put the video image at the back. + +112 +00:09:31.000 --> 00:09:40.000 +And we put two lines of text +as a catchphrase. + +113 +00:09:40.000 --> 00:09:47.000 +Figma’s system is very versatile. + +114 +00:09:47.000 --> 00:09:51.500 +We can create the header as a component + +115 +00:09:51.500 --> 00:09:56.200 +And when we change it + +116 +00:09:56.200 --> 00:09:58.900 +It will take effect with every video + +117 +00:09:58.900 --> 00:10:03.700 +We don't need to update +the header one by one + +118 +00:10:03.700 --> 00:10:10.300 +And when all files are finished, +we put them in the GitHub repo + +119 +00:10:10.300 --> 00:10:17.100 +It will trigger an event in GitHub Actions + +120 +00:10:17.100 --> 00:10:21.100 +and it will update the videos on YouTube + +121 +00:10:21.100 --> 00:10:29.099 +Why did we do all of this? + +122 +00:10:29.100 --> 00:10:34.600 +We did it because of the ownership + +123 +00:10:34.600 --> 00:10:40.200 +Creatorsgarten is an open source group + +124 +00:10:40.200 --> 00:10:47.500 +Even our financials information +is in the open on the website + +125 +00:10:47.500 --> 00:10:59.799 +But we can't grant our YouTube channel’s +ownership to just everyone + +126 +00:10:59.800 --> 00:11:03.800 +But we can open source the videos metadata + +127 +00:11:03.800 --> 00:11:08.800 +And when someone wants to +make changes to their video + +128 +00:11:08.800 --> 00:11:15.100 +they can send a pull request. + +129 +00:11:15.100 --> 00:11:19.100 +This is the main concept. + +130 +00:11:19.100 --> 00:11:24.100 +But we also utilize GitHub +with another feature + +131 +00:11:24.100 --> 00:11:27.100 +Our YouTube channel banner + +132 +00:11:27.100 --> 00:11:33.100 +We want our YouTube channel’s banner +to adapt to each event + +133 +00:11:33.100 --> 00:11:36.824 +When there is an event, +we will adapt it to another style. + +134 +00:11:36.825 --> 00:11:39.799 +This is our work in progress. + +135 +00:11:39.800 --> 00:11:50.100 +Manually creating new graphics +every time is a waste of time + +136 +00:11:50.100 --> 00:11:52.100 +because we are lazy + +137 +00:11:52.100 --> 00:11:59.100 +So we have another repository +called "banner" + +138 +00:11:59.100 --> 00:12:03.100 +The concept is simple. A SvelteKit app. + +139 +00:12:03.100 --> 00:12:16.800 +A puppeteer script will take a screenshot +of that webpage into a picture + +140 +00:12:16.800 --> 00:12:22.343 +Then it will use the YouTube API +to update the channel banner. + +141 +00:12:22.344 --> 00:12:29.500 +This action runs periodically. And that’s +how we utilize GitHub Actions. + +142 +00:12:29.500 --> 00:12:32.500 +Now I will show you. + +143 +00:12:34.300 --> 00:12:35.000 +OK + +144 +00:12:35.300 --> 00:12:36.800 +So, this one + +145 +00:12:36.800 --> 00:12:38.800 +These are some videos + +146 +00:12:38.800 --> 00:12:45.800 +I will create a new thumbnail. + +147 +00:12:45.800 --> 00:12:50.800 +I duplicate the frame +and align it to the grid. + +148 +00:12:50.800 --> 00:12:55.800 +I want to create a header. + +149 +00:12:55.800 --> 00:13:01.800 +I detach this one. + +150 +00:13:05.700 --> 00:13:08.799 +This is a full demo. + +151 +00:13:08.800 --> 00:13:16.899 +Did they move the detach command? + +152 +00:13:16.900 --> 00:13:18.800 +Never mind. + +153 +00:13:18.800 --> 00:13:22.800 +I will not create a new one. + +154 +00:13:22.800 --> 00:13:25.800 +But I will show you how to +edit the thumbnail. + +155 +00:13:25.800 --> 00:13:28.800 +For example, the Side Project Showdown. + +156 +00:13:28.800 --> 00:13:33.800 +I will change it to Code Golf Party. + +157 +00:13:33.800 --> 00:13:35.800 +If we have a lot of videos, + +158 +00:13:35.800 --> 00:13:40.800 +we can see that when we change +the header component + +159 +00:13:40.800 --> 00:13:42.800 +it will take effect on all videos. + +160 +00:13:42.800 --> 00:13:50.800 +Now I just export these frames. + +161 +00:13:50.800 --> 00:13:55.800 +Then, I will get the thumbnail +that is ready to be published. + +162 +00:13:55.800 --> 00:13:57.800 +When I get a file like this, + +163 +00:13:57.800 --> 00:14:07.800 +we go the video repo, + +164 +00:14:07.800 --> 00:14:16.800 +when I want to update the thumbnail +for a certain session, + +165 +00:14:16.800 --> 00:14:20.800 +I just drag and drop the jpeg file +into the folder. + +166 +00:14:20.800 --> 00:14:22.800 +Then, I will push it to GitHub. + +167 +00:14:22.800 --> 00:14:28.800 +And wait 1 minute for GitHub Actions +to update it on YouTube. + +168 +00:14:28.800 --> 00:14:31.800 +That's about it. + +169 +00:14:35.800 --> 00:14:39.800 +This is the process of +managing our videos. + +170 +00:14:39.800 --> 00:14:42.800 +Next, the second part + +171 +00:14:42.800 --> 00:14:48.800 +about how we manage contents +with our custom wiki engine. + +172 +00:14:48.800 --> 00:14:53.800 +I will invite P'Thai to explain it. + +173 +00:14:53.800 --> 00:14:55.800 +Please. + +174 +00:14:55.800 --> 00:14:57.800 +THAI: Thank you, Riffy. + +175 +00:14:57.800 --> 00:15:02.800 +Before I start, I would like to give +a big hand to Riffy. + +176 +00:15:02.800 --> 00:15:06.800 +The content in our YouTube channel +in the past 2-3 months, + +177 +00:15:06.800 --> 00:15:10.800 +Riffy helped managed them +all by himself. + +178 +00:15:10.800 --> 00:15:14.800 +I have set up the automation, +made the Figma template, + +179 +00:15:14.800 --> 00:15:18.800 +but Riffy is the one +who did all the gruntwork. + +180 +00:15:18.800 --> 00:15:25.800 +He trims the clips, fixes audio issues, +uploads them to YouTube, + +181 +00:15:25.800 --> 00:15:27.319 +makes thumbnails, etc. + +182 +00:15:27.320 --> 00:15:31.800 +We have some automation, but admittedly +some of these works are very tough. + +183 +00:15:31.800 --> 00:15:34.800 +Our channel will not grow +this much without Riffy. + +184 +00:15:34.801 --> 00:15:36.799 +Thank you, Riffy. + +185 +00:15:36.800 --> 00:15:40.800 +AnD iF YoU HaVen'T SuBsCrIbEd +tO tHe Creatorsgarten cHaNnEL, + +186 +00:15:40.800 --> 00:15:48.800 +Please consider subscribing. +We want our content to reach more viewers. + +187 +00:15:48.800 --> 00:15:54.489 +Now, we have like, how many subscribers? + +188 +00:15:54.490 --> 00:15:58.799 +400, right? Cool. + +189 +00:15:58.800 --> 00:16:04.800 +In addition to orgazing and +livestreaming our own events + +190 +00:16:04.800 --> 00:16:09.800 +we also partner with other organizers + +191 +00:16:09.800 --> 00:16:13.799 +such as Microsoft Thailand, +the Spark Tech Thailand community + +192 +00:16:13.800 --> 00:16:22.799 +We help them livestream and +grow our channel at the same time. + +193 +00:16:22.800 --> 00:16:33.240 +Now, this part is about our website. + +194 +00:16:33.240 --> 00:16:36.980 +This is creatorsgarten.org. + +195 +00:16:36.980 --> 00:16:39.080 +Let's take a look at the features first. + +196 +00:16:39.080 --> 00:16:43.100 +Here's a page that lists all events. + +197 +00:16:43.100 --> 00:16:46.300 +This is our wiki. + +198 +00:16:46.300 --> 00:16:49.200 +Wiki is like a source of knowledge for us. + +199 +00:16:49.200 --> 00:16:56.700 +Anything that can be public knowledge +we will try to put it here. + +200 +00:16:56.701 --> 00:17:02.186 +For example, the body of knowledge about +our live streaming set up is here. + +201 +00:17:02.187 --> 00:17:06.186 +Previously, the live streaming team +is just me and Riffy. But now, + +202 +00:17:06.187 --> 00:17:12.040 +we put the know-how on the wiki, +and more people helped us livestream. + +203 +00:17:12.040 --> 00:17:17.800 +Riffy wrote in the wiki +how to set up OBS. + +204 +00:17:17.801 --> 00:17:19.200 +These are in the Wiki. + +205 +00:17:19.200 --> 00:17:23.760 +The Wiki system is the topic of this talk. + +206 +00:17:23.760 --> 00:17:29.400 +We built our own custom wiki engine. + +207 +00:17:29.400 --> 00:17:36.100 +But why? Why do we have to +make it ourselves? + +208 +00:17:36.100 --> 00:17:43.900 +Before we get to this point, +we have tried many solutions. + +209 +00:17:43.900 --> 00:17:49.199 +We will go from the mature solutions +to the most modern solution. + +210 +00:17:49.200 --> 00:17:58.200 +First is the classic wiki software +such as, MediaWiki, DokuWiki, PMWiki. + +211 +00:17:58.200 --> 00:18:02.700 +They are easy to edit. + +212 +00:18:02.700 --> 00:18:04.700 +This is the point that I really like. + +213 +00:18:04.700 --> 00:18:09.700 +If we want to change a page, +just hit the edit button, type and save. + +214 +00:18:09.700 --> 00:18:13.760 +There is something called the Wiki way. + +215 +00:18:13.760 --> 00:18:20.360 +The philosophy of the wiki way + +216 +00:18:20.361 --> 00:18:30.009 +is to make bad edits easy to correct +rather than hard to make. + +217 +00:18:30.010 --> 00:18:35.300 +So that we make changes regularly. + +218 +00:18:35.300 --> 00:18:39.300 +MediaWiki follows the principle. + +219 +00:18:39.300 --> 00:18:44.300 +The second thing I like is that +they use a plaintext format. + +220 +00:18:44.300 --> 00:18:46.300 +Why? + +221 +00:18:46.300 --> 00:18:51.871 +So that when I want to edit, I can +copy everything to VSCode + +222 +00:18:51.872 --> 00:18:55.300 +make an edit, then, copy and paste +it back in, and press save. + +223 +00:18:55.300 --> 00:18:58.300 +That’s what I like about plaintext. + +224 +00:18:58.300 --> 00:19:02.300 +These systems are quite flexible. + +225 +00:19:02.300 --> 00:19:06.300 +For example, this wiki is called TVTropes. + +226 +00:19:06.300 --> 00:19:10.300 +It uses a modded PMWiki. + +227 +00:19:10.300 --> 00:19:12.300 +A lot of cool features. + +228 +00:19:12.300 --> 00:19:16.300 +It's a wiki that I really like. + +229 +00:19:16.301 --> 00:19:20.714 +There are hundreds of extensions +for MediaWiki that we can install + +230 +00:19:20.715 --> 00:19:23.300 +to customize our wiki. + +231 +00:19:23.300 --> 00:19:27.300 +These are what I like about them. + +232 +00:19:27.300 --> 00:19:30.300 +But there are some a pain points. + +233 +00:19:30.300 --> 00:19:34.300 +First, most of these programs +are written in PHP, + +234 +00:19:34.300 --> 00:19:40.300 +and when we deploy, we have to +rent a server and set up a database. + +235 +00:19:40.300 --> 00:19:47.300 +Their tech stack is not really +cloud-native. Not serverless-ready. + +236 +00:19:47.300 --> 00:19:51.300 +Also, I don't really like its syntax. + +237 +00:19:51.300 --> 00:19:53.300 +It's not Markdown. + +238 +00:19:53.300 --> 00:19:59.300 +In MediaWiki, to create bold text, +we have to write three single quotes. + +239 +00:19:59.300 --> 00:20:02.300 +If you’re used to Markdown, +you might be confused. + +240 +00:20:02.300 --> 00:20:05.300 +You have to get used +to a different syntax. + +241 +00:20:05.300 --> 00:20:07.300 +You might not like it. + +242 +00:20:07.300 --> 00:20:11.300 +Also, they are not headless. + +243 +00:20:11.300 --> 00:20:14.300 +They come with a bespoke theming system, + +244 +00:20:14.300 --> 00:20:18.300 +usually written as a PHP template. + +245 +00:20:18.300 --> 00:20:21.300 +And then use jQuery, CSS, etc. + +246 +00:20:21.300 --> 00:20:26.300 +It's quite difficult to +integrate Tailwind or React. + +247 +00:20:26.300 --> 00:20:33.300 +So we didn't choose to use +these off-the-shelf wiki software. + +248 +00:20:33.300 --> 00:20:37.300 +The second option using +a static site generator. + +249 +00:20:37.300 --> 00:20:47.300 +They’ve been around for about 10 years. +Jekyll, Eleventy, Hugo, VitePress, etc. + +250 +00:20:47.300 --> 00:20:50.300 +I like that it's plain text, Markdown. + +251 +00:20:50.300 --> 00:20:54.300 +And the content is in Git. +Easy to manage. + +252 +00:20:54.300 --> 00:20:58.300 +And when it's a static site, +we can upload it to any static site host. + +253 +00:20:58.300 --> 00:21:01.300 +No need to take care of the server. + +254 +00:21:01.300 --> 00:21:05.300 +GitHub Pages can host these static sites. + +255 +00:21:05.300 --> 00:21:09.300 +Including others such as Netlify, +Vercel, Cloudflare Pages, etc. + +256 +00:21:09.300 --> 00:21:16.300 +but the downside I found when +using with static site generator is + +257 +00:21:16.300 --> 00:21:19.300 +It's quite difficult to contribute. + +258 +00:21:19.300 --> 00:21:24.300 +In a traditional wiki, we hit edit, +make changes, save. All done. + +259 +00:21:24.300 --> 00:21:26.300 +See the result immediately. + +260 +00:21:26.300 --> 00:21:28.300 +But when it comes to static sites, + +261 +00:21:28.300 --> 00:21:34.300 +I have to fork the repo, make changes, +run the dev server, check it, commit. + +262 +00:21:34.300 --> 00:21:39.300 +Push it, open a PR. Wait for a review. +Only then, the change is published. + +263 +00:21:39.300 --> 00:21:44.300 +Like this one, I try to contribute to +the documentation of Next.js. + +264 +00:21:44.300 --> 00:21:48.300 +I changed just two lines. + +265 +00:21:48.300 --> 00:21:54.300 +But I have to explain what I fixed. +Almost 10 lines. + +266 +00:21:54.300 --> 00:21:58.300 +There’s more barrier to contribution. + +267 +00:21:58.300 --> 00:22:04.300 +It's far from the wiki way that says it +should be easy to change and revert. + +268 +00:22:04.300 --> 00:22:11.300 +I have to fork the repo and run the +dev server to see a preview. + +269 +00:22:11.300 --> 00:22:13.300 +It's not very convenient. + +270 +00:22:13.300 --> 00:22:18.147 +And when all is done, it’s not reflected +immediately. I have to wait for a rebuild, + +271 +00:22:18.148 --> 00:22:22.485 +as well as a redeploy, +before I see my changes go live + +272 +00:22:22.486 --> 00:22:27.300 +so I decided not to use +a static site generator. + +273 +00:22:27.300 --> 00:22:37.300 +Nowadays there’s a tool that has been +booming in the past 4-5 years: Notion. + +274 +00:22:37.300 --> 00:22:41.300 +Actually, we've been using +Notion a lot since 2019. + +275 +00:22:41.300 --> 00:22:45.300 +We use Notion to store all kinds +of knowledge for our events. + +276 +00:22:45.300 --> 00:22:52.300 +I really like Notion. Many people can +collaborate in real time. UX is very good. + +277 +00:22:52.300 --> 00:22:56.300 +Many friends are already +familiar with it as well. + +278 +00:22:56.300 --> 00:22:59.300 +But here's what annoys me. + +279 +00:22:59.300 --> 00:23:03.685 +First, sometimes I want to put in +charts, speech bubbles, + +280 +00:23:03.686 --> 00:23:06.300 +or widgets that are not in Notion. + +281 +00:23:06.300 --> 00:23:12.300 +We can't fully control its appearance. +Expressivity is limited. + +282 +00:23:12.300 --> 00:23:15.300 +Second, I hate Notion's sidebar. + +283 +00:23:15.300 --> 00:23:23.300 +I try to organize the content in Notion. + +284 +00:23:23.300 --> 00:23:27.300 +No matter how much I try to organize, +the sidebar is still a mess. + +285 +00:23:27.300 --> 00:23:29.300 +So I don't like the sidebar. + +286 +00:23:29.300 --> 00:23:33.300 +I prefer to have a big pile of pages +that link together. + +287 +00:23:33.300 --> 00:23:36.300 +Another thing is that the content +is in its own format. + +288 +00:23:36.300 --> 00:23:38.300 +It's not plain text. + +289 +00:23:38.300 --> 00:23:41.300 +I can't just copy it, fix it in VS Code, +and paste it back. + +290 +00:23:41.300 --> 00:23:46.300 +And if many people use it a lot, +it may be expensive. + +291 +00:23:46.300 --> 00:23:51.300 +So we ended up creating +our own a wiki engine. + +292 +00:23:51.300 --> 00:23:53.300 +It's called Contentsgarten. + +293 +00:23:53.300 --> 00:23:55.300 +I'll show you the features. + +294 +00:23:55.300 --> 00:24:01.300 +It's an open source, headless, +modern, and cloud-native wiki engine. + +295 +00:24:01.300 --> 00:24:07.300 +It uses Markdown syntax. To make text +bold, use the usual ** syntax. + +296 +00:24:07.300 --> 00:24:09.300 +No need to remember the new syntax. + +297 +00:24:09.300 --> 00:24:12.300 +And the content is stored in Git. + +298 +00:24:12.300 --> 00:24:17.300 +All contents are stored in the +"creatorsgarten/wiki" repo + +299 +00:24:17.300 --> 00:24:19.300 +as Markdown files. + +300 +00:24:19.300 --> 00:24:26.300 +We can make changes it on the web. +There is a UI for it. + +301 +00:24:26.300 --> 00:24:30.300 +We can also clone the repo +and make changes in our own editor. + +302 +00:24:30.300 --> 00:24:37.300 +Or use "github.dev", which is VS Code +in the browser, integrated with GitHub. + +303 +00:24:37.300 --> 00:24:47.300 +We can make changes in VS Code anywhere. +We've integrated this already. + +304 +00:24:47.300 --> 00:24:53.300 +If we go to any wiki page, +and press the "." key, + +305 +00:24:53.300 --> 00:24:56.300 +it'll take us to github.dev. + +306 +00:24:56.300 --> 00:25:06.299 +If we use VS Code, we have GitHub Copilot, +so we won't be writing alone. + +307 +00:25:06.300 --> 00:25:11.300 +And if we want to make a large-scale +change, for example, + +308 +00:25:11.300 --> 00:25:14.300 +If I want to change many pages at once, + +309 +00:25:14.300 --> 00:25:20.300 +I don't have to learn or create +a script using any proprietary API; + +310 +00:25:20.300 --> 00:25:24.630 +I just clone the repo, write a script +that makes changes to the files, + +311 +00:25:24.631 --> 00:25:28.299 +and push them back to the wiki. + +312 +00:25:28.300 --> 00:25:33.300 +It's also tightly integrated with GitHub. + +313 +00:25:33.300 --> 00:25:40.004 +When we change a page on the web, +it actually calls the GitHub API + +314 +00:25:40.005 --> 00:25:44.300 +to update the Markdown file +directly on GitHub. + +315 +00:25:44.300 --> 00:25:47.300 +We use GitHub as a source of truth. + +316 +00:25:47.300 --> 00:25:50.300 +And when the information is on GitHub, + +317 +00:25:50.300 --> 00:25:55.300 +we can use many GitHub’s +built-in features, such as webhooks. + +318 +00:25:55.300 --> 00:26:00.629 +When someone changes a page, +it fires a webhook to Discord. + +319 +00:26:00.630 --> 00:26:04.180 +So I get notified on Discord whenever +someone makes a change. + +320 +00:26:04.181 --> 00:26:09.300 +No need to write custom code. This is +built in to GitHub and Discord. + +321 +00:26:09.300 --> 00:26:14.610 +As Git maintains a history +of all the changes, + +322 +00:26:14.611 --> 00:26:19.659 +we don't have to implement +history features ourselves. + +323 +00:26:19.660 --> 00:26:23.300 +The "History" link just +takes you to GitHub. + +324 +00:26:24.300 --> 00:26:31.300 +As we built the system ourselves, +we can add custom components. + +325 +00:26:31.300 --> 00:26:38.300 +For example, we want to discuss +some parts of the content, + +326 +00:26:38.300 --> 00:26:43.300 +We want to mark it as such. +So we have a speech bubble component. + +327 +00:26:43.300 --> 00:26:48.300 +So editors can talk to each other +inside a wiki page. + +328 +00:26:48.300 --> 00:26:53.300 +Or sometimes we want to visualize +the event feedback. + +329 +00:26:53.300 --> 00:26:56.300 +We have a Bar Chart component. + +330 +00:26:56.300 --> 00:27:05.300 +This page lists all our events, +along with related links and pages. + +331 +00:27:05.300 --> 00:27:07.300 +It's a fairly advanced table. + +332 +00:27:07.300 --> 00:27:10.300 +But it's just one line of code here. + +333 +00:27:10.300 --> 00:27:13.300 +The engine can render templates. + +334 +00:27:13.300 --> 00:27:20.300 +And the template can, in turn, query other +pages to generate a table. + +335 +00:27:20.300 --> 00:27:23.300 +This is using the Liquid +templating language. + +336 +00:27:23.300 --> 00:27:28.300 +We don't have to maintain +this table ourselves. + +337 +00:27:28.300 --> 00:27:33.300 +When we create a new page, +this table will update accordingly. + +338 +00:27:35.300 --> 00:27:47.300 +Each page can have structured data +in the YAML Front Matter. + +339 +00:27:47.300 --> 00:27:51.300 +Those information will be +indexed into the database, + +340 +00:27:51.300 --> 00:27:55.299 +which can be queried +via an API or from a template. + +341 +00:27:55.300 --> 00:27:57.300 +We don't have to maintain index pages. + +342 +00:27:57.300 --> 00:28:00.300 +We let the page query from the database. + +343 +00:28:00.300 --> 00:28:04.300 +So this feature allows us to implement +more advanced features. + +344 +00:28:04.300 --> 00:28:09.300 +For example, website settings +are also stored in the wiki, + +345 +00:28:09.300 --> 00:28:14.300 +as well as feature flags. + +346 +00:28:14.300 --> 00:28:24.300 +Even the inventory of our equipments, +we track them in this wiki page. + +347 +00:28:24.300 --> 00:28:30.300 +We don't need to deal with +complex markdown tables; + +348 +00:28:30.300 --> 00:28:41.300 +we keep it as structured data, and use +Liquid template to generate a nice table. + +349 +00:28:41.300 --> 00:28:45.300 +Therefore, the advantage of keeping +information as YAML is that + +350 +00:28:45.300 --> 00:28:53.300 +it is machine readable. We can +write scripts to maintain it. + +351 +00:28:53.301 --> 00:28:56.300 +I like that it is open data. + +352 +00:28:56.300 --> 00:28:59.300 +Finally, it is headless. + +353 +00:28:59.300 --> 00:29:03.300 +The web page that you see +is not part of Contentsgarten. + +354 +00:29:03.300 --> 00:29:07.300 +Contentsgarten only provides APIs. + +355 +00:29:07.300 --> 00:29:10.300 +It lets us view, search, and edit pages. + +356 +00:29:10.300 --> 00:29:13.300 +Here, we want to find events +that took place at Cleverse. + +357 +00:29:13.300 --> 00:29:17.300 +When we send the request, +it will search the entire wiki + +358 +00:29:17.300 --> 00:29:22.300 +for a page whose "event.location" +is equal to "Cleverse." + +359 +00:29:22.300 --> 00:29:29.300 +That is, we can put information into +the wiki, then we can ask it questions. + +360 +00:29:29.300 --> 00:29:30.300 +Okay. + +361 +00:29:30.300 --> 00:29:34.300 +These are the basic features. + +362 +00:29:34.300 --> 00:29:36.300 +Let's look at the tech stack. + +363 +00:29:36.300 --> 00:29:42.300 +First, our website is built with Astro. + +364 +00:29:42.300 --> 00:29:49.300 +Riffy recommended it in the +previous BKK.JS meetup. + +365 +00:29:49.300 --> 00:29:55.300 +if you want to know about Astro, you can +watch the talk on YouTube channel. + +366 +00:29:55.300 --> 00:30:01.300 +And the backend is Contentgarten. +The code is in another repo. + +367 +00:30:01.300 --> 00:30:03.266 +It will talk to GitHub API + +368 +00:30:03.267 --> 00:30:08.300 +to extract data from the repository +that we consider to be a source of truth. + +369 +00:30:08.300 --> 00:30:16.300 +But, recall the example where we query +for events that happen at Cleverse. + +370 +00:30:16.300 --> 00:30:20.300 +GitHub API does not have +an API for this kind of query. + +371 +00:30:20.300 --> 00:30:25.300 +We have to use a database +as a cache, or an index. + +372 +00:30:25.300 --> 00:30:30.300 +So, the source of truth is on GitHub, +but the data is indexed in MongoDB. + +373 +00:30:30.300 --> 00:30:36.300 +And denormalize them so we can +query the data in each file easily. + +374 +00:30:36.300 --> 00:30:40.300 +So this is about Contentgarten. + +375 +00:30:40.300 --> 00:30:42.300 +Let's come to the conclusion. + +376 +00:30:42.300 --> 00:30:50.199 +The takeaway for this talk is that +I feel that GitHub ecosystem allows us + +377 +00:30:50.200 --> 00:30:55.300 +to build a custom wiki system +with very little effort. + +378 +00:30:55.300 --> 00:31:11.300 +Without GitHub's various features like +webhooks, APIs, github.dev, or Copilot, + +379 +00:31:11.300 --> 00:31:15.300 +building such system would +have taken much longer + +380 +00:31:15.301 --> 00:31:18.900 +That said, Contentsgarten +is very bare bones. + +381 +00:31:18.901 --> 00:31:21.700 +It doesn't even have +a "Delete page" feature. + +382 +00:31:21.701 --> 00:31:24.942 +But it's not necessary, +because we don't do that often. + +383 +00:31:24.943 --> 00:31:30.299 +When I want to delete the page, I just +delete it directly from GitHub UI. + +384 +00:31:30.300 --> 00:31:36.300 +that is, we stand on top +of the shoulder of giants. + +385 +00:31:36.300 --> 00:31:46.300 +As the data is plain text in Git, we can +build integrations more easily + +386 +00:31:46.300 --> 00:31:50.300 +without using any proprietary API. + +387 +00:31:50.300 --> 00:31:55.300 +One idea it to visualize +how pages interconnect. + +388 +00:31:55.300 --> 00:31:57.300 +I did this with my own website. + +389 +00:31:57.300 --> 00:32:05.300 +It might be cool if we can see +how each page are connected, + +390 +00:32:05.300 --> 00:32:08.300 +so we can see the knowledge graph. + +391 +00:32:08.300 --> 00:32:18.557 +We also have "grtn.org" link shortener. + +392 +00:32:18.558 --> 00:32:26.300 +We can avoid using costly +link shortener services + +393 +00:32:26.300 --> 00:32:32.300 +by leveraging the wiki as +a short links database. + +394 +00:32:32.300 --> 00:32:38.300 +Then make it so that grtn.org pulls data +from the front matter here + +395 +00:32:38.300 --> 00:32:40.300 +and redirect accordingly. + +396 +00:32:40.300 --> 00:32:47.300 +When the data is easily accessible, +it's convenient to do stuff. + +397 +00:32:47.300 --> 00:32:54.300 +Our YouTube channel banner, +that Riffy showed earlier, + +398 +00:32:54.300 --> 00:32:59.300 +It draws information +from the wiki as well. + +399 +00:32:59.300 --> 00:33:04.300 +But I have to say that +this tool is not a silver bullet. + +400 +00:33:04.300 --> 00:33:08.300 +There are many complaints. +Some don't like it to be plain text. + +401 +00:33:08.300 --> 00:33:14.300 +Some wants Notion-like +editing experience. + +402 +00:33:14.300 --> 00:33:24.300 +Or sometimes, we have some info +that we cannot practically make public. + +403 +00:33:24.300 --> 00:33:30.300 +I suggest to use the right tool +for the right job. + +404 +00:33:30.300 --> 00:33:34.986 +If you want to take meeting minutes, +just use Notion or use Google Docs. + +405 +00:33:34.987 --> 00:33:38.300 +For collaborative tables, Google Sheets. +For designs, Figma. + +406 +00:33:38.300 --> 00:33:41.300 +Use the right tool for the right job. + +407 +00:33:41.300 --> 00:33:48.300 +But I would encourage making +everything "reachable" from the wiki. + +408 +00:33:48.300 --> 00:33:57.300 +By "reachable" I mean, there should be a +chain of links from the homepage to it. + +409 +00:33:57.300 --> 00:34:03.985 +For example, I want to find the sponsor +proposal document for + +410 +00:34:03.986 --> 00:34:10.299 +The Stupid Hackathon Thailand 2, +that happened in 2018 (7 years ago) + +411 +00:34:10.300 --> 00:34:14.300 +We go to the homepage, then wiki, +then go to the list of events, + +412 +00:34:14.300 --> 00:34:16.993 +then The Stupid Hackathon Thailand, + +413 +00:34:16.994 --> 00:34:20.300 +then Coverage. + +414 +00:34:20.300 --> 00:34:24.300 +There are many documents in there. +including "Information for sponsors". + +415 +00:34:24.300 --> 00:34:29.300 +We didn't use Notion at that time. +We used Dropbox Paper. + +416 +00:34:29.300 --> 00:34:35.300 +Have you ever used it? +It came before Notion. + +417 +00:34:35.300 --> 00:34:38.300 +In conclusion, no matter +where the information is. + +418 +00:34:38.300 --> 00:34:43.300 +At least, it is reachable +from the home page. + +419 +00:34:43.300 --> 00:34:53.300 +This makes our knowledge +more easily discoverable. + +420 +00:34:53.300 --> 00:34:57.871 +That's the conclusion for this talk. + +421 +00:34:57.872 --> 00:35:02.171 +Here are the repo links, but +you don't have to remember it. + +422 +00:35:02.172 --> 00:35:06.629 +Go to our wiki, and then, +scroll down to Tech Stack. + +423 +00:35:06.630 --> 00:35:12.486 +That would be it for my session. +Thank you everyone. + +424 +00:35:14.043 --> 00:35:20.300 +Any questions about either part? + +425 +00:35:29.300 --> 00:35:35.300 +AUDIENCE: From what I see, +you plan your projects in here, right? + +426 +00:35:35.300 --> 00:35:38.174 +How about evaluation? + +427 +00:35:38.175 --> 00:35:43.114 +How do you incorporate the feedback +from to improve future projects? + +428 +00:35:43.115 --> 00:35:46.857 +Do you have a database +to keep track of these? + +429 +00:35:54.300 --> 00:35:59.803 +I mean, after you organize an event, +there was a feedback form + +430 +00:35:59.804 --> 00:36:03.786 +where people can make +suggestions for improvements. + +431 +00:36:03.787 --> 00:36:09.314 +How do you summarize +or otherwise process this data + +432 +00:36:09.315 --> 00:36:16.299 +so the team can learn from it +and improve future events? + +433 +00:36:18.300 --> 00:36:20.300 +THAI: Oh, thanks for that Riffy. + +434 +00:36:20.300 --> 00:36:22.300 +Okay, thank you for the question. + +435 +00:36:22.300 --> 00:36:25.386 +This is the feedback we receive in +our 7th Stupid Hackathon, + +436 +00:36:25.387 --> 00:36:26.900 +our latest event. + +437 +00:36:26.901 --> 00:36:30.729 +After the event is finished, we sent a +Google Form to ask for feedback. + +438 +00:36:30.730 --> 00:36:33.770 +Usually, we will ask 5 questions: +1. What do you like? + +439 +00:36:33.771 --> 00:36:37.870 +2. What should be improved? +3. What do you want us to try? + +440 +00:36:37.871 --> 00:36:44.300 +4. Give us a score of 1-10. +5. Anything to say to the organizers? + +441 +00:36:44.300 --> 00:36:49.300 +All the data is then archived in the wiki. + +442 +00:36:49.300 --> 00:36:56.300 +Next generations of staffs will be able to +find the feedback of previous events. + +443 +00:36:56.300 --> 00:37:01.300 +It will not be lost to time. + +444 +00:37:01.300 --> 00:37:04.300 +For the 7th Stupid Hackathon, +we also asked: + +445 +00:37:04.300 --> 00:37:06.300 +What is your favorite activity? + +446 +00:37:06.300 --> 00:37:08.300 +Each response will be listed here. + +447 +00:37:08.300 --> 00:37:15.300 +We also summarize this feedback +with the help of ChatGPT. + +448 +00:37:15.300 --> 00:37:28.299 +So, you can read the raw message, +or you can read ChatGPT's summary. + +449 +00:37:28.300 --> 00:37:34.300 +We also record quantitative data here, +such as the event's rating score. + +450 +00:37:34.300 --> 00:37:40.300 +The chart and basic statistics such as +averages are generated automatically. + +451 +00:37:40.300 --> 00:37:46.586 +Next year's organizer can take a look. + +452 +00:37:46.587 --> 00:37:49.915 +We also put in the ideas for next year. + +453 +00:37:49.916 --> 00:38:01.299 +So next year's organizers can learn about +potential ideas from previous year's. + +454 +00:38:02.886 --> 00:38:04.785 +There's also… + +455 +00:38:04.786 --> 00:38:08.885 +Let me take some time to find it. + +456 +00:38:08.886 --> 00:38:12.671 +Here it is. + +457 +00:38:12.672 --> 00:38:16.300 +We collected various metrics +from each Stupid Hackathon. + +458 +00:38:16.300 --> 00:38:18.410 +We ran 7 hackathons so far. + +459 +00:38:18.411 --> 00:38:21.691 +And keep track of this in each year: +How many teams there are, + +460 +00:38:21.692 --> 00:38:27.300 +How many tickets, how many presenters, +event ratings, etc, something like this. + +461 +00:38:27.300 --> 00:38:31.300 +When you click on the event rating, +you can read the full feedback. + +462 +00:38:31.300 --> 00:38:38.300 +This is how we collect feedback in various +events and not let it be lost to time. + +463 +00:38:38.300 --> 00:38:40.956 +Does this answer your question? + +464 +00:38:40.957 --> 00:38:42.300 +Ok. + +465 +00:38:45.300 --> 00:38:47.300 +RIFFY: Any additional questions? + +466 +00:38:50.300 --> 00:38:53.671 +POOM: Ok, that's about it. +Thank you, P'Thai and Riffy! + +467 +00:38:57.300 --> 00:39:00.200 +Isn't that cool, Chang? + +468 +00:39:00.201 --> 00:39:05.299 +While we set this up... Pub, what +do you think about what you see today? + +469 +00:39:05.300 --> 00:39:08.300 +PUB: Cool, I just know that Bitbucket +can do a lot of things. + +470 +00:39:08.300 --> 00:39:14.300 +POOM: Wh... Do you still want +the GitHub stickers? + +471 +00:39:14.300 --> 00:39:19.300 +PUB: Oh sorry, I meant... I just know +that GitLab can do a lot of things. + +472 +00:39:19.300 --> 00:39:22.686 +POOM: If they don't let us organize +the next event, this is why.