-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
1160 lines (1040 loc) · 57.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="alternate"
type="application/rss+xml"
href="https://chenyo.me/rss.xml"
title="RSS feed for https://chenyo.me">
<title>Chenyo's Blog</title>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'],['\\(','\\)']]}});
</script>
<meta name="author" content="chenyo">
<meta name="referrer" content="no-referrer">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/style.css" type="text/css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
<link rel="favicon" type="image/x-icon" href="favicon.ico">
<script src="assets/search.js"></script></head>
<body>
<div id="preamble" class="status">
<header>
<h1><a href="https://chenyo.me">Chenyo's org-static-blog</a></h1>
<nav>
<a href="https://chenyo.me">Home</a>
<a href="archive.html">Archive</a>
<a href="tags.html">Tags</a>
<div id="search-container">
<input type="text" id="search-input" placeholder="Search anywhere...">
<i class="fas fa-search search-icon"></i>
</div>
</nav>
</header></div>
<div id="content">
<h2>Welcome!</h2>
<p>Take a look if you are bored.</p>
<div class="post-date">25 Sep 2024</div><h1 class="post-title"><a href="https://chenyo.me/2024-09-25-build-a-free-telegram-mensa-bot.html">Build a free Telegram Mensa bot</a></h1>
<nav id="table-of-contents" role="doc-toc">
<h2>Table of Contents</h2>
<div id="text-table-of-contents" role="doc-toc">
<ul>
<li><a href="#org2ff20ef">1. Previously on my Telegram bot</a></li>
<li><a href="#orgad23e30">2. Why do I need a Mensa bot</a></li>
<li><a href="#orgca97636">3. How to get the data</a>
<ul>
<li><a href="#org161a012">3.1. Scrape menus locally</a></li>
<li><a href="#orgbafd268">3.2. Scrape menus on Render</a></li>
</ul>
</li>
<li><a href="#org26ab351">4. Performance</a></li>
<li><a href="#org49a031a">5. Conclusion</a></li>
</ul>
</div>
</nav>
<div id="outline-container-org2ff20ef" class="outline-2">
<h2 id="org2ff20ef"><span class="section-number-2">1.</span> Previously on my Telegram bot</h2>
<div class="outline-text-2" id="text-1">
<p>
In the post <a href="https://chenyo.me/2024-09-08-build-a-free-telegram-sticker-bot.html">Build a free Telegram sticker tag bot</a>, I detailed the process of integrating various online services to create a sticker tag bot.
After using it for a month, I encountered an intriguing production issue: on one occasion, the inline query result was incomplete.
Interestingly, restarting the Render deployment resolved the problem, though I never fully understood the root cause.
</p>
<p>
Despite this minor hiccup, the sticker tag bot has proven to be reliable most of the time.
However, I found myself not utilizing it as frequently as anticipated.
This was primarily because sending a recent sticker directly is often more convenient than invoking the bot by name.
</p>
<p>
At the conclusion of that post, I hinted at a second functionality I had in mind for the bot: a Mensa bot designed to inform me about the daily offerings at each Mensa (university cafeteria).
</p>
</div>
</div>
<div id="outline-container-orgad23e30" class="outline-2">
<h2 id="orgad23e30"><span class="section-number-2">2.</span> Why do I need a Mensa bot</h2>
<div class="outline-text-2" id="text-2">
<p>
One mobile app I frequently use on weekdays is <a href="https://github.com/famoser/Mensa">Mensa</a>, which lists daily menus for each Zürich Mensa to help people make their most important decision of the day.
However, it was merely an inconvenience for myself that the app lacked images of the meals.
I found it difficult to imagine the dishes based solely on the menu descriptions.
To fix this, I decide to add the meal images myself.
</p>
</div>
</div>
<div id="outline-container-orgca97636" class="outline-2">
<h2 id="orgca97636"><span class="section-number-2">3.</span> How to get the data</h2>
<div class="outline-text-2" id="text-3">
<p>
I couldn’t find an official API for this, so I decided to scrape the webpage myself.
Here’s where things got tricky: the Mensa web pages use JavaScript to render content.
This meant I couldn’t just grab the page - I needed a browser to run the JavaScript first.
</p>
</div>
<div id="outline-container-org161a012" class="outline-3">
<h3 id="org161a012"><span class="section-number-3">3.1.</span> Scrape menus locally</h3>
<div class="outline-text-3" id="text-3-1">
<p>
On a local machine, it’s pretty straightforward.
You just grab a scraper library like <a href="https://github.com/go-rod/rod">go-rod</a> and figure out the right API calls.
After you’ve snagged the page, you can use an HTML parser like <a href="https://github.com/PuerkitoBio/goquery">goquery</a> to pull out all the menus.
</p>
</div>
</div>
<div id="outline-container-orgbafd268" class="outline-3">
<h3 id="orgbafd268"><span class="section-number-3">3.2.</span> Scrape menus on Render</h3>
<div class="outline-text-3" id="text-3-2">
<p>
The only snag with <code>go-rod</code> is it’s too bulky for a Render free account.
It needs to install Chromium first, but Render’s <a href="https://render.com/pricing">512M RAM</a> can’t handle that.
I didn’t want to hunt for another free host, so <code>go-rod</code> had to go.
</p>
<p>
Claude then pitched the idea of online scraping services.
Most I found were expensive, aimed at heavy-duty scraping.
But I lucked out with <a href="https://app.abstractapi.com/api/scrape/pricing">AbstractAPI</a>, offering 1000 total requests for free.
If I’m smart, that could last me about half a year.
<a href="https://docs.scraperapi.com/v/faq/plans-and-billing/free-plan-and-7-day-free-trial">ScraperAPI</a> seemed promising with 1000 monthly free requests.
But it choked on Javascript rendering for my targeted pages even with <code>render=true</code>.
</p>
<p>
AbstractAPI has its quirks too.
The scraped result comes out messy, full of <code>\n</code> and <code>\&#34</code>.
So I had to clean it up before <code>goquery</code> can make sense of it.
</p>
</div>
</div>
</div>
<div id="outline-container-org26ab351" class="outline-2">
<h2 id="org26ab351"><span class="section-number-2">4.</span> Performance</h2>
<div class="outline-text-2" id="text-4">
<p>
AbstractAPI’s free plan only lets you make one request per second.
That’s kinda slow when you factor in page rendering and parsing time.
The full HTML page is a whopping 3M, so I’ve gotta wait a bit for each bot request.
</p>
<p>
I thought about caching results to cut down on requests.
But here’s the thing: menu images usually update right before meal times.
If I didn’t catch the image last time, I need the latest scoop.
So, I end up scraping fresh data for each Mensa every single time.
</p>
</div>
</div>
<div id="outline-container-org49a031a" class="outline-2">
<h2 id="org49a031a"><span class="section-number-2">5.</span> Conclusion</h2>
<div class="outline-text-2" id="text-5">
<p>
Here’s a quick look at what the bot can do now: it tags stickers and scrapes Mensa menus.
Keep in mind the GIF is sped up to twice the normal speed.
</p>
<figure id="orgb59eaa3">
<img src="./static/telegram.gif" alt="telegram.gif" align="center" width="700px" style="border: 1px solid black;">
<figcaption><span class="figure-number">Figure 1: </span>The current Telegram bot</figcaption>
</figure>
<p>
As in the previous post, I aim to demonstrate that while Internet services can be costly, there often remain free solutions for building hobby projects.
This may require more extensive research and additional processing, but it’s still feasible.
I hope this continues to be the case in the years to come.
</p>
<p>
The <a href="https://github.com/chenyo-17/pbaobot">repository</a> is also public now.
</p>
</div>
</div>
<div class="taglist"><a href="https://chenyo.me/tags.html">Tags</a>: <a href="https://chenyo.me/tag-tool.html">tool</a> <a href="https://chenyo.me/tag-telegram.html">telegram</a> </div>
<div class="post-date">24 Sep 2024</div><h1 class="post-title"><a href="https://chenyo.me/2024-09-24-cpp-feature-introduction.html">C++ feature introduction</a></h1>
<nav id="table-of-contents" role="doc-toc">
<h2>Table of Contents</h2>
<div id="text-table-of-contents" role="doc-toc">
<ul>
<li><a href="#org124e45c">1. Namespace</a></li>
<li><a href="#org3dc8623">2. Wrapper class</a></li>
<li><a href="#org3af0cb6">3. Iterator</a>
<ul>
<li><a href="#org42ddb40">3.1. A doubly linked list (DLL) iterator</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<p>
This is a personal not for the <a href="https://github.com/cmu-db/15445-bootcamp">CMU 15-445 C++ bootcamp</a> along with some explanation from Claude.ai.
</p>
<div id="outline-container-org124e45c" class="outline-2">
<h2 id="org124e45c"><span class="section-number-2">1.</span> Namespace</h2>
<div class="outline-text-2" id="text-1">
<ul class="org-ul">
<li>Provides scopes to identifiers with <code>::</code>.</li>
<li><p>
Namespaces can be nested.
</p>
<div class="org-src-container">
<pre class="src src-cpp"><span style="color: #51afef; font-weight: bold;">#include</span> <span style="color: #98be65;"><iostream></span>
<span style="color: #51afef;">namespace</span> <span style="color: #a9a1e1;">ABC</span> {
<span style="color: #ECBE7B;">void</span> <span style="color: #c678dd;">spam</span>(<span style="color: #ECBE7B;">int</span> <span style="color: #dcaeea;">a</span>) { <span style="color: #a9a1e1;">std</span>::cout << <span style="color: #98be65;">"Hello from ABC::spam"</span> << <span style="color: #a9a1e1;">std</span>::endl; }
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">declare a nested namespace</span>
<span style="color: #51afef;">namespace</span> <span style="color: #a9a1e1;">DEF</span> {
<span style="color: #ECBE7B;">void</span> <span style="color: #c678dd;">bar</span>(<span style="color: #ECBE7B;">float</span> <span style="color: #dcaeea;">a</span>) { <span style="color: #a9a1e1;">std</span>::cout << <span style="color: #98be65;">"Hello from ABC::DEF::bar"</span> << <span style="color: #a9a1e1;">std</span>::endl; }
<span style="color: #ECBE7B;">void</span> <span style="color: #c678dd;">use_spam</span>(<span style="color: #ECBE7B;">int</span> <span style="color: #dcaeea;">a</span>) {
<span style="color: #a9a1e1;">ABC</span>::spam(a);
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">no difference with ABC::spam(a) if DEF</span>
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">does not have a spam function</span>
spam(a);
}
} <span style="color: #5B6268;">// </span><span style="color: #5B6268;">namespace DEF</span>
<span style="color: #ECBE7B;">void</span> <span style="color: #c678dd;">use_DEF_bar</span>(<span style="color: #ECBE7B;">float</span> <span style="color: #dcaeea;">a</span>) {
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">if a namespace outside of DEF wants to use DEF::bar</span>
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">it must use the full namespace path ABC::DEF::bar</span>
<span style="color: #a9a1e1;">DEF</span>::bar(a);
}
} <span style="color: #5B6268;">// </span><span style="color: #5B6268;">namespace ABC fs</span>
</pre>
</div></li>
<li>Two namespaces can define functions with the same name and signatures.</li>
<li>Name resolution rules: first check in the current scope, then enclosing scopes, finally going outward until it reaches the global scope.</li>
<li>Can use <code>using namespace B</code> to use identifiers in <code>B</code> in the current scope without specifying <code>B::</code>, this is not a good practice.</li>
<li>Can also only bring certain members of a namespace into the current scope, e.g., <code>using C::eggs</code>.</li>
</ul>
</div>
</div>
<div id="outline-container-org3dc8623" class="outline-2">
<h2 id="org3dc8623"><span class="section-number-2">2.</span> Wrapper class</h2>
<div class="outline-text-2" id="text-2">
<ul class="org-ul">
<li><p>
Used to manage a resource, e.g., memory, file sockets, network connections.
</p>
<div class="org-src-container">
<pre class="src src-cpp"><span style="color: #51afef;">class</span> <span style="color: #ECBE7B;">IntPtrManager</span> {
<span style="color: #51afef;">private</span>:
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">manages an int* to access the dynamic memory</span>
<span style="color: #ECBE7B;">int</span> *<span style="color: #dcaeea;">ptr_</span>;
};
</pre>
</div></li>
<li>Use the RAII (Resource Acquisition is Initialization) idea: tie the lifetime of a resource to the lifetime of an object.
<ul class="org-ul">
<li>Goal: ensure resources are released even if an exception occurs.</li>
<li><p>
Acquisition: resources are acquired in the constructor.
</p>
<div class="org-src-container">
<pre class="src src-cpp"><span style="color: #51afef;">class</span> <span style="color: #ECBE7B;">IntPtrManager</span> {
<span style="color: #51afef;">public</span>:
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">the constructor initializes a resource</span>
<span style="color: #c678dd;">IntPtrManager</span>() {
ptr_ = <span style="color: #51afef;">new</span> <span style="color: #ECBE7B;">int</span>; <span style="color: #5B6268;">// </span><span style="color: #5B6268;">allocate the memory</span>
*ptr_ = <span style="color: #da8548; font-weight: bold;">0</span>; <span style="color: #5B6268;">// </span><span style="color: #5B6268;">set the default value</span>
}
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">the second constructor takes an initial value</span>
<span style="color: #c678dd;">IntPtrManager</span>(<span style="color: #ECBE7B;">int</span> <span style="color: #dcaeea;">val</span>) {
ptr_ = <span style="color: #51afef;">new</span> <span style="color: #ECBE7B;">int</span>;
*ptr_ = val;
}
};
</pre>
</div></li>
<li><p>
Release: resources are released in the destructor.
</p>
<div class="org-src-container">
<pre class="src src-cpp"><span style="color: #51afef;">class</span> <span style="color: #ECBE7B;">IntPtrManager</span> {
<span style="color: #51afef;">public</span>:
~<span style="color: #c678dd;">IntPtrManager</span>() {
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">ptr_ may be null after the move</span>
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">don't delete a null pointer</span>
<span style="color: #51afef;">if</span> (ptr_) {
<span style="color: #51afef;">delete</span> ptr_;
}
}
};
</pre>
</div></li>
</ul></li>
<li><p>
A wrapper class should not be copyable to avoid double deletion of the same resource in two destructors.
</p>
<div class="org-src-container">
<pre class="src src-cpp"><span style="color: #51afef;">class</span> <span style="color: #ECBE7B;">IntPtrManager</span> {
<span style="color: #51afef;">public</span>:
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">delete copy constructor</span>
<span style="color: #c678dd;">IntPtrManager</span>(<span style="color: #51afef;">const</span> <span style="color: #ECBE7B;">IntPtrManager</span> &) = <span style="color: #51afef;">delete</span>;
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">delete copy assignment operator</span>
<span style="color: #ECBE7B;">IntPtrManager</span> &<span style="color: #51afef;">operator</span><span style="color: #c678dd;">=</span>(<span style="color: #51afef;">const</span> <span style="color: #ECBE7B;">IntPtrManager</span> &) = <span style="color: #51afef;">delete</span>;
};
</pre>
</div></li>
<li><p>
A wrapper class is still moveable from different lvalues/owners.
</p>
<div class="org-src-container">
<pre class="src src-cpp"><span style="color: #51afef;">class</span> <span style="color: #ECBE7B;">IntPtrManager</span> {
<span style="color: #51afef;">public</span>:
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">a move constructor</span>
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">called by `IntPtrManager b(std::move(a))`</span>
<span style="color: #c678dd;">IntPtrManager</span>(<span style="color: #ECBE7B;">IntPtrManager</span> &&<span style="color: #dcaeea;">other</span>) {
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">while other is a rvalue reference, other.ptr_ is a lvalue</span>
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">therefroe a copy happens here, not a move</span>
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">in the constructor this.ptr_ has not pointed to anything</span>
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">so no need to delete ptr_</span>
ptr = other.ptr_;
other.ptr_ = <span style="color: #a9a1e1;">nullptr</span>; <span style="color: #5B6268;">// </span><span style="color: #5B6268;">other.ptr_ becomes invalud</span>
}
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">move assignment operator</span>
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">this function is used by c = std::move(b) operation</span>
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">note that calling std::move() does not require implementing this operator</span>
<span style="color: #ECBE7B;">IntPtrManager</span> &<span style="color: #51afef;">operator</span><span style="color: #c678dd;">=</span>(<span style="color: #ECBE7B;">IntPtrManager</span> &&<span style="color: #dcaeea;">other</span>) {
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">a self assignment should not delete its ptr_</span>
<span style="color: #51afef;">if</span> (ptr_ == other.ptr_) {
<span style="color: #51afef;">return</span> *<span style="color: #51afef;">this</span>;
}
<span style="color: #51afef;">if</span> (ptr_) {
<span style="color: #51afef;">delete</span> ptr_; <span style="color: #5B6268;">// </span><span style="color: #5B6268;">release old resource to avoid leak</span>
}
ptr_ = other.ptr_;
other.ptr_ = <span style="color: #a9a1e1;">nullptr</span>; <span style="color: #5B6268;">// </span><span style="color: #5B6268;">invalidate other.ptr_</span>
<span style="color: #51afef;">return</span> *<span style="color: #51afef;">this</span>;
}
};
</pre>
</div></li>
</ul>
</div>
</div>
<div id="outline-container-org3af0cb6" class="outline-2">
<h2 id="org3af0cb6"><span class="section-number-2">3.</span> Iterator</h2>
<div class="outline-text-2" id="text-3">
<ul class="org-ul">
<li><p>
Iterators, e.g., pointers, are objects that point to an element inside a container.
</p>
<div class="org-src-container">
<pre class="src src-cpp"><span style="color: #ECBE7B;">int</span> *<span style="color: #dcaeea;">array</span> = malloc(<span style="color: #51afef;">sizeof</span>(<span style="color: #ECBE7B;">int</span>) * <span style="color: #da8548; font-weight: bold;">10</span>);
<span style="color: #ECBE7B;">int</span> *<span style="color: #dcaeea;">iter</span> = array;
<span style="color: #ECBE7B;">int</span> <span style="color: #dcaeea;">zero_elem</span> = *iter;
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">use ++ to iterate through the C style array</span>
iter++;
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">deference the operator to return the value at the iterator</span>
<span style="color: #ECBE7B;">int</span> <span style="color: #dcaeea;">first_elem</span> = *iter;
</pre>
</div></li>
<li>Two main components of an iterator:
<ul class="org-ul">
<li>Dereference operator <code>*</code>: return the value of the element of the current iterator position.</li>
<li>Increment <code>++</code>: increment the iterator’s position by 1
<ul class="org-ul">
<li>Postfix <code>iter++</code>: return the iterator <b><b>before</b></b> the increment (<code>Iterator</code>).</li>
<li>Prefix <code>++iter</code>: return the result of the increment (<code>Iterator&</code>).</li>
<li><code>++iter</code> is more efficient.</li>
</ul></li>
</ul></li>
<li>Often used to access and modify elements in C++ STL containers.</li>
</ul>
</div>
<div id="outline-container-org42ddb40" class="outline-3">
<h3 id="org42ddb40"><span class="section-number-3">3.1.</span> A doubly linked list (DLL) iterator</h3>
<div class="outline-text-3" id="text-3-1">
<ul class="org-ul">
<li><p>
Define a link node:
</p>
<div class="org-src-container">
<pre class="src src-cpp"><span style="color: #51afef;">struct</span> <span style="color: #ECBE7B;">Node</span> {
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">member initializer list, e.g., next_(nullptr) equals to next_ = nullptr</span>
<span style="color: #c678dd;">Node</span>(<span style="color: #ECBE7B;">int</span> <span style="color: #dcaeea;">val</span>) : next_(<span style="color: #a9a1e1;">nullptr</span>), prev_(<span style="color: #a9a1e1;">nullptr</span>), value_(val) {}
<span style="color: #ECBE7B;">Node</span> *<span style="color: #dcaeea;">next_</span>;
<span style="color: #ECBE7B;">Node</span> *<span style="color: #dcaeea;">prev_</span>;
<span style="color: #ECBE7B;">int</span> <span style="color: #dcaeea;">value_</span>;
};
</pre>
</div></li>
<li><p>
Define the iterator for the DLL:
</p>
<div class="org-src-container">
<pre class="src src-cpp"><span style="color: #51afef;">class</span> <span style="color: #ECBE7B;">DLLIterator</span> {
<span style="color: #51afef;">public</span>:
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">takes in a node to mark the start of the iteration</span>
<span style="color: #c678dd;">DLLIterator</span>(<span style="color: #ECBE7B;">Node</span> *<span style="color: #dcaeea;">head</span>) : curr_(head) {}
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">prefix increment operator (++iter)</span>
<span style="color: #ECBE7B;">DLLIterator</span> &<span style="color: #51afef;">operator</span><span style="color: #c678dd;">++</span>() {
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">must use -> to access the member of a pointer!</span>
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">use . if accessing the object itself</span>
curr_ = curr_->next_;
<span style="color: #51afef;">return</span> *<span style="color: #51afef;">this</span>;
}
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">postfix increment operator (iter++)</span>
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">the (int) is a dummy parameter to differentiate</span>
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">the prefix and postfix increment</span>
<span style="color: #ECBE7B;">DLLIterator</span> <span style="color: #51afef;">operator</span><span style="color: #c678dd;">++</span>(<span style="color: #ECBE7B;">int</span>) {
<span style="color: #ECBE7B;">DLLIterator</span> <span style="color: #dcaeea;">temp</span> = *<span style="color: #51afef;">this</span>;
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">this is a pointer to the current object</span>
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">*this returns the iterator object</span>
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">++*this calls the prefix increment operator,</span>
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">which equals to `this->operator++()`</span>
++*<span style="color: #51afef;">this</span>;
<span style="color: #51afef;">return</span> temp;
}
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">implement the equality operator</span>
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">an lvalue reference argument avoids the copy</span>
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">the const in the parameter means this function</span>
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">cannot modify the argument</span>
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">the `const` outside the parameter list means</span>
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">the function cannot modify `this`</span>
<span style="color: #ECBE7B;">bool</span> <span style="color: #51afef;">operator</span><span style="color: #c678dd;">==</span>(<span style="color: #51afef;">const</span> <span style="color: #ECBE7B;">DLLIterator</span> &<span style="color: #dcaeea;">str</span>) <span style="color: #51afef;">const</span> {
<span style="color: #51afef;">return</span> itr.curr_ == <span style="color: #51afef;">this</span>->curr_;
}
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">implement the dereference operator to return the value</span>
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">at the current iterator position</span>
<span style="color: #ECBE7B;">int</span> <span style="color: #51afef;">operator</span><span style="color: #c678dd;">*</span>() { <span style="color: #51afef;">return</span> curr_->value_; }
<span style="color: #51afef;">private</span>:
<span style="color: #ECBE7B;">Node</span> *<span style="color: #dcaeea;">curr_</span>;
};
</pre>
</div></li>
<li><p>
Define DLL:
</p>
<div class="org-src-container">
<pre class="src src-cpp"><span style="color: #51afef;">class</span> <span style="color: #ECBE7B;">DLL</span> {
<span style="color: #51afef;">public</span>:
<span style="color: #c678dd;">DLL</span>() : head_(<span style="color: #a9a1e1;">nullptr</span>), size_(<span style="color: #da8548; font-weight: bold;">0</span>) {}
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">the destructor deletes nodes one by one</span>
~<span style="color: #c678dd;">DLL</span>() {
<span style="color: #ECBE7B;">Node</span> *<span style="color: #dcaeea;">current</span> = head_;
<span style="color: #51afef;">while</span> (current != <span style="color: #a9a1e1;">nullptr</span>) {
<span style="color: #ECBE7B;">Node</span> *<span style="color: #dcaeea;">next</span> = current->next_;
<span style="color: #51afef;">delete</span> current;
current = next;
}
head_ = <span style="color: #a9a1e1;">nullptr</span>;
}
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">after the insertion `new_node` becomes the new head</span>
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">`head` is just a pointer to the node</span>
<span style="color: #ECBE7B;">void</span> <span style="color: #c678dd;">InsertAtHead</span>(<span style="color: #ECBE7B;">int</span> <span style="color: #dcaeea;">val</span>) {
<span style="color: #ECBE7B;">Node</span> *<span style="color: #dcaeea;">new_node</span> = <span style="color: #51afef;">new</span> <span style="color: #ECBE7B;">Node</span>(val);
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">new_node->next points to the object pointed by head_</span>
new_node->next_ = head_;
<span style="color: #51afef;">if</span> (head_ != <span style="color: #a9a1e1;">nullptr</span>) {
head_->prev_ = new_node;
}
head_ = new_node;
size_ += <span style="color: #da8548; font-weight: bold;">1</span>;
}
<span style="color: #ECBE7B;">DLLIterator</span> <span style="color: #c678dd;">Begin</span>() { <span style="color: #51afef;">return</span> DLLIterator(head_); }
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">returns the pointer pointing one after the last element</span>
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">used in the loop to determine whether the iteration ends</span>
<span style="color: #5B6268;">// </span><span style="color: #5B6268;">e.g., `for (DLLIterator iter = dll.Begin(); iter != dll.End(); ++iter)`</span>
<span style="color: #ECBE7B;">DLLIterator</span> <span style="color: #c678dd;">End</span>() { <span style="color: #51afef;">return</span> DLLIterator(<span style="color: #a9a1e1;">nullptr</span>); }
<span style="color: #ECBE7B;">Node</span> *<span style="color: #dcaeea;">head_</span>{<span style="color: #a9a1e1;">nullptr</span>};
<span style="color: #ECBE7B;">size_t</span> <span style="color: #dcaeea;">size_</span>;
};
</pre>
</div></li>
</ul>
</div>
</div>
</div>
<div class="taglist"><a href="https://chenyo.me/tags.html">Tags</a>: <a href="https://chenyo.me/tag-c++.html">c++</a> <a href="https://chenyo.me/tag-study.html">study</a> <a href="https://chenyo.me/tag-cmu.html">cmu</a> </div>
<div class="post-date">08 Sep 2024</div><h1 class="post-title"><a href="https://chenyo.me/2024-09-08-build-a-free-telegram-sticker-bot.html">Build a free Telegram sticker tag bot</a></h1>
<nav id="table-of-contents" role="doc-toc">
<h2>Table of Contents</h2>
<div id="text-table-of-contents" role="doc-toc">
<ul>
<li><a href="#org21a4a9f">1. What happened</a></li>
<li><a href="#orgf2c0943">2. What do I need</a></li>
<li><a href="#orgdfcc447">3. How to build a bot</a>
<ul>
<li><a href="#org0d87cda">3.1. How to build a sticker tag bot</a></li>
<li><a href="#org18850ae">3.2. How to make the bot private</a></li>
</ul>
</li>
<li><a href="#org6f1df19">4. How to deploy the bot on Render</a></li>
<li><a href="#org403b255">5. How to connect to the Firebase</a></li>
<li><a href="#org827aa22">6. How to configure UptimeRobot</a></li>
<li><a href="#org31171a0">7. Conclusion</a></li>
</ul>
</div>
</nav>
<div id="outline-container-org21a4a9f" class="outline-2">
<h2 id="org21a4a9f"><span class="section-number-2">1.</span> What happened</h2>
<div class="outline-text-2" id="text-1">
<p>
When I started to use Telegram, I really missed being able to search stickers by text, like I can in WeChat.
Sadly, Telegram only lets you search emojis by text, or find stickers using emojis.
</p>
<p>
After digging around, I discovered the easiest way to add this cool feature was through Telegram bots.
The idea? Store a tag-to-sticker map in the bot, then fetch all matching stickers when given a tag in the bot’s <a href="https://core.telegram.org/bots/inline">inline mode</a>.
There are a few sticker tag bots on Telegram already, but they’re either dead or <a href="https://github.com/vitaly-rudenko/tag-sticker-bot">can’t handle</a> Unicode input like Chinese characters.
Plus, I’m not super keen on trusting my data to someone else’s database.
Moreover, I might want to use a bot for other personal stuff later.
</p>
<p>
So, I decided to build my own Telegram bot.
</p>
</div>
</div>
<div id="outline-container-orgf2c0943" class="outline-2">
<h2 id="orgf2c0943"><span class="section-number-2">2.</span> What do I need</h2>
<div class="outline-text-2" id="text-2">
<p>
My goal was to create a bot using only free services, including cloud storage for key-value pairs and a hosting platform to keep the bot running.
</p>
<p>
I stumbled upon <a href="https://render.com">Render</a> from an X recommendation which offers <a href="https://docs.render.com/free#monthly-usage-limits">750 hours per month</a> for free deployment (which equals 31 days), so I deployed my bot there once I got the bot running locally.
But then I found out Render’s free tier doesn’t offer permanent storage and shuts down services after <a href="https://docs.render.com/free#spinning-down-on-idle">15 minutes of inactivity</a>.
</p>
<p>
A sticker tag bot without memory isn’t much use to anyone, so I went hunting for free cloud storage.
With some help from Claude and Perplexity, I discovered <a href="https://firebase.google.com/products/realtime-database/">Firebase Realtime database</a>, which offers 1GB storage and 10GB throughput per month on its <a href="https://firebase.google.com/pricing">free tier</a>.
</p>
<p>
Even with cloud storage, a bot that konks out every 15 minutes just won’t cut it - I need my stickers now!
So my next quest was finding a way to keep the bot awake, which led me to <a href="https://uptimerobot.com">UptimeRobot</a>.
It’s actually a web monitoring tool, but I can use it to ping the bot regularly, tricking it into staying “active” instead of dozing off.
</p>
<p>
So, to sum it up, building this sticker tag bot required:
</p>
<ul class="org-ul">
<li>a Telegram bot from <a href="https://t.me/botfather">BotFather</a>,</li>
<li>a free Render deployment,</li>
<li>a Firebase’s free key-value storage, and</li>
<li>an UptimeRobot’s free monitoring service.</li>
</ul>
<p>
However, these services do not work together automatically. Gluing them together required additional effort.
</p>
</div>
</div>
<div id="outline-container-orgdfcc447" class="outline-2">
<h2 id="orgdfcc447"><span class="section-number-2">3.</span> How to build a bot</h2>
<div class="outline-text-2" id="text-3">
<p>
The first step in building any bot is asking BotFather for a new bot and keeping the bot token secure.
Telegram offers a helpful <a href="https://core.telegram.org/bots/tutorial#executing-commands">tutorial</a> that explains the process using Java.
Examples in other languages can be found in their <a href="https://gitlab.com/Athamaxy/telegram-bot-tutorial/-/blob/main/TutorialBot.go">Gitlab repo</a>.
In my opinion, the most challenging part here is creating a unique bot username that is still available.
</p>
<p>
The next step involves working with the <a href="https://core.telegram.org/bots/api">Telegram bot API</a> in the chosen programming language.
This includes learning how to handle messages effectively.
For example, I used <a href="https://github.com/go-telegram-bot-api/telegram-bot-api">tgbotapi(Golang)</a>.
</p>
</div>
<div id="outline-container-org0d87cda" class="outline-3">
<h3 id="org0d87cda"><span class="section-number-3">3.1.</span> How to build a sticker tag bot</h3>
<div class="outline-text-3" id="text-3-1">
<p>
A sticker tag bot needs two main functionalities:
</p>
<ul class="org-ul">
<li>Handle direct messages to add new sticker tags.</li>
<li>Handle inline queries to search for stickers using a given tag.</li>
</ul>
<p>
To implement the first functionality, I created a simple state machine with two states:
</p>
<ol class="org-ol">
<li>The initial state waits for a sticker input and then moves to the tag state.</li>
<li>The tag state waits for any text input to use as the tag for the previous sticker.</li>
</ol>
<p>
To implement the second functionality, one needs to use the <a href="https://core.telegram.org/bots/api#inlinequeryresultcachedsticker">InlineQueryResultCachedSticker</a> method.
</p>
<p>
For local testing, one can use a lightweight local key-value storage to store and search sticker tags.
I used <a href="https://github.com/dgraph-io/badger">BadgerDB(Golang)</a> for example.
</p>
<p>
I noticed that the generated file ID for the same sticker is different each time, making it hard to check for duplicates when adding new tags.
To address this, I added a <code>/delete</code> method to remove tags when needed.
</p>
</div>
</div>
<div id="outline-container-org18850ae" class="outline-3">
<h3 id="org18850ae"><span class="section-number-3">3.2.</span> How to make the bot private</h3>
<div class="outline-text-3" id="text-3-2">
<p>
I couldn’t find an official way to make a bot visible only to me.
Suggested by Claude, I predefined a list of authorized users.
Then I performed a sanity check before handling any messages.
</p>
</div>
</div>
</div>
<div id="outline-container-org6f1df19" class="outline-2">
<h2 id="org6f1df19"><span class="section-number-2">4.</span> How to deploy the bot on Render</h2>
<div class="outline-text-2" id="text-4">
<p>
Deploying a service on Render with a free account is challenging due to the lack of shell access, disk access, and non-so-live logs.
The process of making everything work at this stage was time-consuming and I even contacted Render’s technical support although they only responded “Ok I will close the ticket” after the issue was self-resolved.
</p>
<p>
Three main steps are required here:
</p>
<ol class="org-ol">
<li>start an HTTP server with several endpoints at the bot, and</li>
<li>configure the web service and environment variables on Render’s dashboard,</li>
<li>configure the <a href="https://blog.domotz.com/product-bytes/telegram-webhook-and-bot-api/">Telegram webhook</a> at the bot.</li>
</ol>
<p>
In step 1, starting an HTTP server at <code>0.0.0.0:<some-port></code> is necessary.
One should also enable GET methods for the root and a health check endpoint to allow Render to scan the service regularly.
</p>
<p>
In step 2, one needs to fill in the service configuration and environment variables in different boxes.
This includes settings such as port, build command, and health check endpoint.
The issue I encountered was Render could not scan any port even if I have triple-checked that everything worked fine locally.
In the end, I solved this issue by adding the Golang build tag <code>-tags netgo</code> in the build command.
Actually this flag was configured by default, but I initially replaced it with a simpler build command.
</p>
<p>
In step 3, one needs to configure the webhook with the Bot API and to enable the POST method for the webhook at the HTTP server (this can also be handled by the Bot API).
The webhook can be <code>https: //<your project>.onrender.com/<your-token></code> (or another unique URL).
This URL informs Telegram where to send and receive all messages for the bot.
</p>
</div>
</div>
<div id="outline-container-org403b255" class="outline-2">
<h2 id="org403b255"><span class="section-number-2">5.</span> How to connect to the Firebase</h2>
<div class="outline-text-2" id="text-5">
<p>
The Firebase Realtime database stores key-value pairs in the JSON format.
Connecting the bot with the database requires the following steps:
</p>
<ol class="org-ol">
<li>Create the app and the database on Firebase’s dashboard.
Specifically, one needs to store the following 3 values for interaction:
<ul class="org-ul">
<li>The database URL, which looks like <code>https: //<your-app>-default-rtdb.*.firebasedatabase.app</code>.</li>
<li>The credential file, which can be downloaded at <code>Project settings->Service accounts->Firebase Admin SDK</code> (and should also be added to Render).</li>
</ul></li>
<li>Import the language-specific Firebase API to configure the database in the bot.
For example, I use <a href="https://pkg.go.dev/firebase.google.com/go/v4">firebase(Golang)</a>.</li>
<li>Update the database rules in Firebase dashboard to only allow authorized writes for specific tags, e.g., one name/path to refer to those key-value pairs.</li>
</ol>
<p>
It’s worth noting that connecting to the database on Render may take some time after a fresh start.
During this initialization period, the log may display a <code>502 Bad Gateway</code> error to the database.
</p>
</div>
</div>
<div id="outline-container-org827aa22" class="outline-2">
<h2 id="org827aa22"><span class="section-number-2">6.</span> How to configure UptimeRobot</h2>
<div class="outline-text-2" id="text-6">
<p>
Before configuring UptimeRobot, an attempt was made to ping the bot from within itself, but this approach did not function for Render.
</p>
<p>
Using UptimeRobot to maintain the bot’s active status involves two primary steps:
</p>
<ol class="org-ol">
<li>Enable the HEAD method (the sole method available for a free account) for any endpoint on the HTTP server.</li>
<li>Configure an HTTP(S) monitor for that endpoint, which appears as <code><you-project>.onrender.com/<endpoint></code>, and establish the monitoring interval to less than 15 minutes.</li>
</ol>
</div>
</div>
<div id="outline-container-org31171a0" class="outline-2">
<h2 id="org31171a0"><span class="section-number-2">7.</span> Conclusion</h2>
<div class="outline-text-2" id="text-7">
<p>
This post isn’t meant to be a step-by-step guide for building a Telegram bot.
It skips some steps and doesn’t include screenshots.
But don’t worry, most of the missing bits can be figured out using AI language models these days.
The rest really depends on each specific situation.
The main point here is to show how to set up a free small web service, even when there’s no single platform that does it all.
</p>
<p>
When I first wrote this, my bot had been up and running for 10 days.
It only had 30 minutes of downtime, which I think happened because UptimeRobot couldn’t reach Render’s IP address during that time.
</p>
<p>
Right now, the repository is private since I plan to add a second functionality to the bot soon.
</p>
</div>
</div>
<div class="taglist"><a href="https://chenyo.me/tags.html">Tags</a>: <a href="https://chenyo.me/tag-tool.html">tool</a> <a href="https://chenyo.me/tag-telegram.html">telegram</a> </div>
<div class="post-date">07 Sep 2024</div><h1 class="post-title"><a href="https://chenyo.me/2024-09-07-install-doom-emacs-with-lisp-native-compiler-in-wsl2.html">Install Doom Emacs with Lisp native compilation in WSL2</a></h1>
<nav id="table-of-contents" role="doc-toc">
<h2>Table of Contents</h2>
<div id="text-table-of-contents" role="doc-toc">
<ul>
<li><a href="#org20a6d81">1. Assumptions</a></li>
<li><a href="#orgcf6e55a">2. Install prerequisite packages</a></li>
<li><a href="#org5075acb">3. Install Emacs 29.4</a>
<ul>
<li><a href="#org17f16c3">3.1. Before building</a></li>
<li><a href="#orgd1dff12">3.2. Build Emacs 29.4 with native-comp</a></li>
</ul>
</li>
<li><a href="#org569af17">4. Install <code>ripgrep</code></a></li>
<li><a href="#org78e09db">5. Install Doom Emacs</a></li>
<li><a href="#orgc56000a">6. Some issues with running Emacs in WSL2</a></li>
</ul>
</div>
</nav>
<p>
Today I installed Doom Emacs for my husband on his WSL2.
Although the entire process was guided by Claude, there were some back-and-forth during the interaction.
Therefore I would like to record the full commands I have used here in sequence for any potential reference.
</p>
<div id="outline-container-org20a6d81" class="outline-2">
<h2 id="org20a6d81"><span class="section-number-2">1.</span> Assumptions</h2>
<div class="outline-text-2" id="text-1">
<p>
This installation guide assumes a fresh installation of WSL2 Ubuntu 22.04 on Windows 11 in 2024 September.
</p>
</div>
</div>
<div id="outline-container-orgcf6e55a" class="outline-2">
<h2 id="orgcf6e55a"><span class="section-number-2">2.</span> Install prerequisite packages</h2>
<div class="outline-text-2" id="text-2">
<p>
According to the Doom Emacs <a href="https://github.com/doomemacs/doomemacs#prerequisites">documentation</a>, the following packages are recommended:
</p>
<ul class="org-ul">
<li>Git 2.23+: this is already installed by default.</li>
<li>Emacs 29.4 with <a href="https://www.emacswiki.org/emacs/GccEmacs">Lisp native compilation</a>: this is finicky and will be elaborated later.</li>
<li>ripgrep 14.0+: the documentation says 11.0+ suffices, but <code>doom doctor</code> still complains the latest version (13.0) installed from <code>apt</code> is not advanced, so we need to install it from its Github released package later.</li>
<li>GNU find: also installed already.</li>
<li>fd: <code>sudo apt install fd-find</code> suffices.</li>
</ul>
</div>
</div>
<div id="outline-container-org5075acb" class="outline-2">
<h2 id="org5075acb"><span class="section-number-2">3.</span> Install Emacs 29.4</h2>
<div class="outline-text-2" id="text-3">
</div>
<div id="outline-container-org17f16c3" class="outline-3">
<h3 id="org17f16c3"><span class="section-number-3">3.1.</span> Before building</h3>
<div class="outline-text-3" id="text-3-1">
<p>
First, let’s install some build dependencies:
</p>
<div class="org-src-container">
<pre class="src src-bash"><span style="color: #ECBE7B;">sudo</span> apt update
<span style="color: #ECBE7B;">sudo</span> apt upgrade <span style="color: #5B6268;"># </span><span style="color: #5B6268;">update packages</span>
<span style="color: #ECBE7B;">sudo</span> apt install build-essential libjansson4 libjansson-dev <span style="color: #98be65;">\</span>
libgnutls28-dev libtree-sitter-dev libsqlite3-dev
<span style="color: #ECBE7B;">sudo</span> apt install texinfo <span style="color: #5B6268;"># </span><span style="color: #5B6268;">to generate documentation</span>
</pre>
</div>
<p>
<code>build-essnetial</code> should install necessary tools to build C/C++ programs such as gcc, g++, make, gdb and dpkg.
The rest packages install pre-compiled libraries.
</p>
<p>
Besides these packages, there are two important packages to support List native compilation:
</p>
<div class="org-src-container">
<pre class="src src-bash"><span style="color: #ECBE7B;">sudo</span> apt install ibgccjit0 libgccjit-11-dev <span style="color: #5B6268;"># </span><span style="color: #5B6268;">11 is my gcc version</span>
</pre>
</div>
<p>
After installing them, make sure to export the path in the current session, otherwise the compiler will not realize it.
</p>
<div class="org-src-container">
<pre class="src src-bash"><span style="color: #c678dd;">export</span> <span style="color: #dcaeea;">LD_LIBRARY_PATH</span>=/usr/lib/gcc/x86_64-linux-gnu/11:$<span style="color: #dcaeea;">LD_LIBRARY_PATH</span>
</pre>
</div>
<p>
The last thing to do is install a bunch of X and GTK-3 development libraries for Emacs GUI, and another bunch of image processing libraries.
</p>
<div class="org-src-container">
<pre class="src src-bash"><span style="color: #ECBE7B;">sudo</span> apt install libx11-dev libtiff-dev libgtk-3-dev libncurses-dev
<span style="color: #ECBE7B;">sudo</span> apt install libtiff5-dev libgif-dev libjpeg-dev libpng-dev libxpm-dev
</pre>
</div>
<p>
Without the above packages, one may encounter the following error when configuring the Emacs build:
</p>
<blockquote>
<p>
You seem to be running X, but no X development libraries
were found. You should install the relevant development files for X
and for the toolkit you want, such as Gtk+ or Motif. Also make
sure you have development files for image handling, i.e.
tiff, gif, jpeg, png and xpm.
</p>
</blockquote>
</div>
</div>
<div id="outline-container-orgd1dff12" class="outline-3">
<h3 id="orgd1dff12"><span class="section-number-3">3.2.</span> Build Emacs 29.4 with native-comp</h3>
<div class="outline-text-3" id="text-3-2">
<p>
At this moment, we can start to download Emacs source code:
</p>
<div class="org-src-container">
<pre class="src src-bash">wget https://ftp.gnu.org/gnu/emacs/emacs-29.4.tar.xz
tar xvf emacs-29.4.tar.xz
<span style="color: #ECBE7B;">cd</span> emacs-29.4
</pre>
</div>
<p>
Then we can configure the build (i.e., generate Makefile) with the following command.
</p>
<div class="org-src-container">
<pre class="src src-bash">./configure --with-native-compilation --with-x-toolkit=gtk3 --without-pop
</pre>
</div>
<ul class="org-ul">
<li><code>--with-native-compilation</code>: with this flag the Emacs source code is compiled to native machine code to achieve better performance.
<ul class="org-ul">
<li>Otherwise it is compiled to bytecode and then interpreted by Emacs virtual machine during runtime.</li>
</ul></li>
<li><code>--with-x-toolkit=gtk3</code>: this is recommended by Claude.</li>
<li><code>--without-pop</code>: if we are not using Emacs as the email client, we don’t need to bother configure the protocol.</li>
</ul>
<p>
If everything goes well, one should see the following line in the output.
If not, make sure <code>libgccjit</code> has been installed and exported.
</p>
<blockquote>
<p>
Does Emacs have native lisp compiler? yes
</p>
</blockquote>
<p>
Now we can finally start compiling the Emacs:
</p>
<div class="org-src-container">
<pre class="src src-bash"><span style="color: #ECBE7B;">make</span> -j$<span style="color: #51afef;">(</span>nproc<span style="color: #51afef;">)</span>
</pre>
</div>
<p>
If some error occurs, we may want to start again, to do this:
</p>
<div class="org-src-container">
<pre class="src src-bash"><span style="color: #ECBE7B;">sudo</span> apt install autoconf automake
<span style="color: #ECBE7B;">rm</span> -f Makefile
./autogen.sh <span style="color: #5B6268;"># </span><span style="color: #5B6268;">regenerate the configuration file</span>
<span style="color: #5B6268;"># </span><span style="color: #5B6268;">then rebuild</span>
<span style="color: #ECBE7B;">make</span> -j$<span style="color: #51afef;">(</span>nproc<span style="color: #51afef;">)</span>
</pre>
</div>
<p>
Finally, install Emacs globally:
</p>
<div class="org-src-container">
<pre class="src src-bash"><span style="color: #ECBE7B;">sudo</span> <span style="color: #ECBE7B;">make</span> install
</pre>
</div>
<p>
To confirm the Emacs indeed used the native Lisp compiler, one can evaluate inside the vanilla Emacs with <code>M-:</code> (<code>M</code> is <code>Alt</code> in WSL2):
</p>
<div class="org-src-container">
<pre class="src src-lisp">(native-comp-available-p) <span style="color: #5B6268;">;; </span><span style="color: #5B6268;">should return t</span>
</pre>
</div>
<p>
Congratulations! You have now installed the latest and fastest Emacs on WSL2.
</p>
</div>
</div>
</div>
<div id="outline-container-org569af17" class="outline-2">
<h2 id="org569af17"><span class="section-number-2">4.</span> Install <code>ripgrep</code></h2>
<div class="outline-text-2" id="text-4">
<p>
As mentioned in ripgrep <a href="https://github.com/BurntSushi/ripgrep?tab=readme-ov-file#installation">documentation</a>, for Debian/Ubuntu users, one should
install the latest ripgrep 14.0+ with the following commands.
</p>
<div class="org-src-container">
<pre class="src src-bash"><span style="color: #ECBE7B;">curl</span> -LO https://github.com/BurntSushi/ripgrep/releases/download/14.1.0/ripgrep_14.1.0-1_amd64.deb <span style="color: #5B6268;"># </span><span style="color: #5B6268;">check the latest version on its documentation</span>
<span style="color: #ECBE7B;">sudo</span> dpkg -i ripgrep_14.1.0-1_amd64.deb <span style="color: #5B6268;"># </span><span style="color: #5B6268;">dpkg has been installed before</span>
</pre>
</div>
<p>
Instead, if one installs it with <code>apt</code>, a 13.0+ version is installed and running <code>doom doctor</code> later returns the warning:
</p>
<blockquote>
<p>
The installed ripgrep binary was not built with support for PCRE lookaheads.
</p>
</blockquote>
</div>
</div>
<div id="outline-container-org78e09db" class="outline-2">
<h2 id="org78e09db"><span class="section-number-2">5.</span> Install Doom Emacs</h2>
<div class="outline-text-2" id="text-5">
<p>
Installing Doom Emacs is straightforward, but before that, one should first remove the default Emacs configuration folder:
</p>
<div class="org-src-container">
<pre class="src src-bash"><span style="color: #ECBE7B;">rm</span> -rf ~/.emacs.d
</pre>
</div>
<p>
Then, clone and install Doom Emacs, it could take a while.
</p>
<div class="org-src-container">
<pre class="src src-bash"><span style="color: #ECBE7B;">git</span> clone --depth <span style="color: #da8548; font-weight: bold;">1</span> https://github.com/doomemacs/doomemacs ~/.config/emacs
~/.config/emacs/bin/doom install
</pre>
</div>
<p>
Don’t forget to export <code>~/.config/emacs/bin</code> to <code>PATH</code>:
</p>
<div class="org-src-container">
<pre class="src src-bash"><span style="color: #ECBE7B;">echo</span> <span style="color: #98be65;">'export PATH="$HOME/.config/emacs/bin:$PATH"'</span> >> ~/.bashrc
<span style="color: #c678dd;">source</span> ~/.bashrc
</pre>
</div>
<p>
Now one can run <code>doom doctor</code> to check any missing dependencies, e.g., <code>shellcheck</code>.
One common issue is the Nerd font is not installed by default so that some icons are not properly displayed.
To fix that, run <code>M-x nerd-icons-install-font</code> inside the Emacs, then update the font cache with:
</p>