index.html 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364
  1. <!DOCTYPE html>
  2. <html lang="en-us">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="generator" content="Hugo 0.88.0" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <link rel="stylesheet" href="/assets/css/theme.css">
  8. <link rel="alternate" href="/rss.xml" type="application/rss+xml" title="Pleasant Programmer">
  9. <script type="text/javascript" src="//use.typekit.net/iwm5axp.js"></script>
  10. <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
  11. <title>Pleasant Programmer</title>
  12. </head>
  13. <body>
  14. <header id="header" role="banner">
  15. <div id="thomas">
  16. <img src="/assets/img/thomas.gif" alt="DJ THOMAS IN DA HAUS">
  17. <img src="/assets/img/thomas.png" alt="Pleasant Programmer">
  18. </div>
  19. <h1 class="site-title"><a href="/">Pleasant Programmer</a></h1>
  20. <nav id="menu" role="navigation">
  21. <ul>
  22. <li class="twitter">
  23. <a href="http://twitter.com/pleasantprog">@pleasantprog</a>
  24. </li>
  25. <li><a href="/pages/projects.html">projects</a></li>
  26. <li><a href="/posts.html">archives</a></li>
  27. <li><a href="/tags.html">tags</a></li>
  28. <li><a href="/rss.xml">rss</a></li>
  29. </ul>
  30. </nav>
  31. </header>
  32. <div id="container">
  33. <main id="content" role="main">
  34. <div class="postindex">
  35. <article class="h-entry post-text" itemscope itemtype="http://schema.org/Blog">
  36. <header>
  37. <h1 class="p-name entry-title" itemprop="headline">
  38. <a href="/posts/isp-issues.html" class="u-url">ISP Issues</a>
  39. </h1>
  40. </header>
  41. <div class="e-content entry-content">
  42. <p>At the first office I worked at, we had 2 different ISPs. This was supposed to be for reliability, as one was fast but spotty, and the other was slow but reliable. Since they weren&rsquo;t <em>too</em> expensive, we just went and got both.</p>
  43. <p>We have monitoring setup to watch our office IPs from the outside so we could see how often the connection goes down. The interesting thing we found was that the fast and spotty connection had perfect uptime. Even when there was clearly no internet from the office, it was still &ldquo;up&rdquo; according to our monitoring.</p>
  44. <p>So we tried pinging our office IP using the other connection and to our surprise it was indeed up. There was even a webserver running on it (we only have VPN exposed). Apparently, it was someone elses CCTV admin page. We could actually see a hallway with people walking by sometimes!</p>
  45. <p>Apparently someone else had our IP address and nothing good comes from an IP conflict. This was completely baffling as our internet line was supposed to be a &ldquo;business line&rdquo; and that came with a static IP address. So the only scenarios where this could happen is, the ISP mistakenly gave the same IP to 2 different lines or the ISP allows some clients to freely set their own IP.</p>
  46. <p>We complained to the ISP and eventually got it resolved. They just gave us an entirely new IP address, but they never explained what went wrong. We already had quite a negative opinion of that particular ISP though, and they somehow managed to outdo themselves.</p>
  47. </div>
  48. <small class="dateline">Posted: <time class="published dt-published" itemprop="datePublished" datetime="2018-08-16">2018-08-16</time></small>
  49. | <small class="commentline"><a href="/posts/isp-issues.html#isso-thread">Comments</a></small>
  50. </article>
  51. </article>
  52. <article class="h-entry post-text" itemscope itemtype="http://schema.org/Blog">
  53. <header>
  54. <h1 class="p-name entry-title" itemprop="headline">
  55. <a href="/posts/audventure.html" class="u-url">Audventure</a>
  56. </h1>
  57. </header>
  58. <div class="e-content entry-content">
  59. <p>Sometime around 2013 I wrote a clone of the GBA game <a href="https://www.nintendo.co.jp/n08/bit_g/">bit Generations
  60. SoundVoyager</a> called
  61. <a href="https://audventure.pleasantprogrammer.com">audventure</a>. SoundVoyager is
  62. actually a collection of mini-games where sound is the main focus. You can
  63. actually play the game blind, and at some point, that&rsquo;s pretty much what
  64. happens.</p>
  65. <h2 id="sound-catcher">sound catcher</h2>
  66. <p>The signature mini-game in SoundVoyager is sound catcher. In the mini-game, you
  67. can only move left and right at the bottom of the stage, while a &ldquo;sound&rdquo; falls
  68. from the top. Your goal is to catch the sound which is signified by a green dot.
  69. When you catch it, the sound or beat becomes part of the BGM and a new dot
  70. appears with a different sound.</p>
  71. <p>You can of course use your eyes and move accordingly, but if you put on
  72. earphones, you can actually hear where the dot is, either on your left or right,
  73. with it getting louder as it gets close to you. As you collect more sounds, the
  74. dot gets more and more transparent. Eventually (and this is where it gets fun),
  75. you won&rsquo;t be able to see the sounds anymore and will have to rely mostly on your
  76. ears.</p>
  77. <p>You can see what the original game looks like in <a href="https://www.youtube.com/watch?v=C12WRgfIOC8">this
  78. video</a> or you can play it under
  79. <em>sound safari</em> in <a href="https://audventure.pleasantprogrammer.com">audventure</a>.</p>
  80. <h2 id="webaudio-vs-flash">WebAudio vs Flash</h2>
  81. <p>At the time I wrote audventure, only Chrome supported WebAudio. Also, the API
  82. looked (and still looks) quite complicated. Flash on the other hand, was
  83. starting to die, but still well-supported so I went with that. For the most
  84. part, it worked okay though Chrome actually had timing issues when playing
  85. sounds. Now, it doesn&rsquo;t work in any browser. I tried to debug the issues but
  86. ultimately ended up just rewriting it to use WebAudio instead.</p>
  87. <p>For the game, I needed to simulate the source of the sound in 2D/3D space. Flash
  88. only really gives you stereo panning and volume control. With some maths, we can
  89. actually get an acceptable solution. Less importantly, I needed to be able to
  90. get frequency data of the currently playing &ldquo;sound&rdquo; to pulse the background. For
  91. this, I actually had to implement the feature in the Flash library I was using.</p>
  92. <p>With WebAudio, spatial audio is already built-in and you can simply give it the
  93. coordinates of the sounds and the listener. There are some other options to
  94. tweak, but for the most part, no complex math is needed. Getting frequency data
  95. for a sound is also actually built-in and didn&rsquo;t take too long to integrate.</p>
  96. <p>Overall, I was impressed by how much you can do with WebAudio out-of-the-box. I
  97. kind of understand why it&rsquo;s complicated, but there&rsquo;s some simple functionality
  98. that I wish was included. For example, there is no API to pause and then resume
  99. playing an audio buffer. You have to manually save the elapsed time and play
  100. from there.</p>
  101. <h2 id="other-mini-games">Other mini-games</h2>
  102. <p>So far I&rsquo;ve only actually implemented the sound catcher mini-game. There are
  103. around 4 different categories with slight variations in between.</p>
  104. <h3 id="sound-catcher--sound-slalom">sound catcher / sound slalom</h3>
  105. <p>I&rsquo;ve explained sound catcher a while ago; sound slalom is a minor variation on
  106. that. Instead of waiting for the &ldquo;sound&rdquo; to reach you, you now have to guide
  107. yourself in between 2 &ldquo;poles&rdquo; of sound, as in <a href="https://en.wikipedia.org/wiki/Slalom_skiing">slalom
  108. skiing</a>. But this time, you can
  109. also accelerate forward. The goal is to finish the course before the time runs
  110. out.</p>
  111. <h3 id="sound-drive--sound-chase">sound drive / sound chase</h3>
  112. <p>In sound drive, you&rsquo;re driving against the flow on a 5 lane road. You have to
  113. avoid oncoming cars, trucks and animals until you reach the end. You&rsquo;re allowed
  114. to change lanes and accelerate, and the game tracks your best time. Sound chase
  115. is pretty much the same, except you&rsquo;re trying to catch up to a &ldquo;sound&rdquo;.</p>
  116. <h3 id="sound-cannon">sound cannon</h3>
  117. <p>In sound cannon, you&rsquo;re immobile but can rotate within a 180 degree angle. Your
  118. goal is too shoot down &ldquo;sounds&rdquo; which are heading your way. If a sound reaches
  119. you, it&rsquo;s game over. You win when you kill all the sounds.</p>
  120. <h3 id="sound-picker--sound-cock">sound picker / sound cock</h3>
  121. <p>In sound picker, you can move in a giant square field where various sounds are
  122. scattered around. Your goal is to pick up all the sounds within the time limit.
  123. Sound cock is similar, except the sounds are chickens and you have to chase them
  124. around.</p>
  125. <h2 id="source-code">Source Code</h2>
  126. <p>If you want to see the source code, you can check it out
  127. <a href="https://git.pleasantprogrammer.com/games/audventure">here</a>. The sound files
  128. aren&rsquo;t in the repo though, since I&rsquo;m not quite sure about the licensing. If you
  129. want to contribute music or sound effects, I&rsquo;d gladly appreciate it.</p>
  130. </div>
  131. <small class="dateline">Posted: <time class="published dt-published" itemprop="datePublished" datetime="2017-11-19">2017-11-19</time></small>
  132. | <small class="commentline"><a href="/posts/audventure.html#isso-thread">Comments</a></small>
  133. </article>
  134. </article>
  135. <article class="h-entry post-text" itemscope itemtype="http://schema.org/Blog">
  136. <header>
  137. <h1 class="p-name entry-title" itemprop="headline">
  138. <a href="/posts/openpreppad.html" class="u-url">OpenPrepPad</a>
  139. </h1>
  140. </header>
  141. <div class="e-content entry-content">
  142. <p>Smart electronics and IoT (Internet of Things) are all the rage these days. You
  143. have a lot of companies sprout up trying to make the next big thing, which also
  144. leads to a lot of failures big and small. Pebble, the maker of my smartwatch,
  145. got bought out by Fitbit recently. This left watch owners without any official
  146. support, but thankfully, community members <a href="http://rebble.io/">stepped up</a> to continue
  147. maintaining it.</p>
  148. <p>Another casualty of the IoT boom was the <a href="http://theorangechef.com/">Orange Chef</a> <a href="https://www.amazon.com/Orange-Chef-Smart-Scale-Silver/dp/B00KFW8L90">Prep Pad</a>. It&rsquo;s a
  149. bluetooth connected weighing scale to make it easy to track your calories and
  150. carb/fat/protein intake. My dad bought it last year only to find out that the
  151. app was incredibly buggy. The search function doesn&rsquo;t work which makes the whole
  152. thing practically useless. I also found out later that you can&rsquo;t even download
  153. the app to use the scale anymore.</p>
  154. <p><strong>Note</strong> I just found out as I was writing this post that it <em>may</em> get supported
  155. by <a href="http://www.prnewswire.com/news-releases/perfect-company-acquires-orange-chefs-prep-pad-related-ip-continues-momentum-in-the-connected-kitchen-300383178.html">another company</a>.</p>
  156. <p>So the app is useless, but at least you can use it as a scale, right?</p>
  157. <p><img src="/galleries/openpreppad/preppad.jpg" alt="Prep Pad"></p>
  158. <p>Nope. The device has no display whatsoever. The only controls on it are the
  159. on/off button and a green LED that isn&rsquo;t even that useful at telling you whether
  160. it&rsquo;s on or not. At this point, it&rsquo;s just a giant paperweight.</p>
  161. <h2 id="reverse-engineering">Reverse Engineering</h2>
  162. <p>Since I essentially had nothing to lose, I tried poking at the thing to figure
  163. out how it works. I didn&rsquo;t really have experience with bluetooth besides trying
  164. to get my bluetooth mouse connected on Linux. The main thing I used then was
  165. <code>bluetoothctl</code> which is essentially a CLI for managing bluetooth devices so I
  166. started there.</p>
  167. <p>I started up <code>bluetoothctl</code> and turned on the Prep Pad. And it showed up!</p>
  168. <div class="highlight"><pre tabindex="0" style="color:#e5e5e5;background-color:#000;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-text" data-lang="text">[bluetooth]# power on
  169. [CHG] Controller ... Class: 0x00010c
  170. Changing power on succeeded
  171. [CHG] Controller ... Powered: yes
  172. [bluetooth]# scan on
  173. Discovery started
  174. [CHG] Device 1C:BA:8C:21:7C:BB RSSI: -51
  175. [CHG] Device 1C:BA:8C:21:7C:BB Name: CHSLEEV_00
  176. [CHG] Device 1C:BA:8C:21:7C:BB Alias: CHSLEEV_00
  177. </code></pre></div><p>I then connected to it, which was surprisingly easy.</p>
  178. <div class="highlight"><pre tabindex="0" style="color:#e5e5e5;background-color:#000;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-text" data-lang="text">[bluetooth]# connect 1C:BA:8C:21:7C:BB
  179. Attempting to connect to 1C:BA:8C:21:7C:BB
  180. [CHG] Device 1C:BA:8C:21:7C:BB Connected: yes
  181. [CHG] Device 1C:BA:8C:21:7C:BB Name: CH BTScale_00
  182. [CHG] Device 1C:BA:8C:21:7C:BB Alias: CH BTScale_00
  183. </code></pre></div><p>Now normally, when you turn the device on, the green light flashes occasionally.
  184. Once I connected to it, the green light stayed on permanently. Clearly, I was
  185. making progress. A lot of services were also discovered but I had no idea what
  186. those things were at that point.</p>
  187. <p>After a lot of poking around, I could check the general device information. You
  188. could get the hardware, software and firmware version. There&rsquo;s also the device
  189. serial number which was nowhere on the actual physical device.</p>
  190. <div class="highlight"><pre tabindex="0" style="color:#e5e5e5;background-color:#000;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-text" data-lang="text">[CHSLEEV_00]# select-attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0010/char0017
  191. [CH BTScale_00:/service0010/char0017]# attribute-info
  192. Characteristic - Firmware Revision String
  193. UUID: 00002a26-0000-1000-8000-00805f9b34fb
  194. Service: /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0010
  195. Value: 0x31
  196. Value: 0x2e
  197. Value: 0x31
  198. Value: 0x33
  199. Value: 0x41
  200. Value: 0x00
  201. Flags: read
  202. [CH BTScale_00:/service0010/char0017]# read
  203. Attempting to read /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0010/char0017
  204. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0010/char0017 Value: 0x31
  205. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0010/char0017 Value: 0x2e
  206. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0010/char0017 Value: 0x31
  207. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0010/char0017 Value: 0x33
  208. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0010/char0017 Value: 0x41
  209. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0010/char0017 Value: 0x00
  210. 31 2e 31 33 41 00 1.13A.
  211. [CH BTScale_00:/service0010/char0017]#
  212. </code></pre></div><p>There was also a service which contained Accel Enable, Accel Range, Accel
  213. X-Coordinate, Accel Y-Coordinate, and Accel Z-Coordinate. I guess it stands for
  214. accelerometer, which is probably what it uses to weigh things.</p>
  215. <div class="highlight"><pre tabindex="0" style="color:#e5e5e5;background-color:#000;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-text" data-lang="text">[CHSLEEV_00]# select-attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026
  216. [CH BTScale_00:/service0023/char0024/desc0026]# read
  217. Attempting to read /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026
  218. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026 Value: 0x41
  219. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026 Value: 0x63
  220. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026 Value: 0x63
  221. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026 Value: 0x65
  222. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026 Value: 0x6c
  223. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026 Value: 0x20
  224. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026 Value: 0x45
  225. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026 Value: 0x6e
  226. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026 Value: 0x61
  227. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026 Value: 0x62
  228. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026 Value: 0x6c
  229. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024/desc0026 Value: 0x65
  230. 41 63 63 65 6c 20 45 6e 61 62 6c 65 Accel Enable
  231. </code></pre></div><p>I couldn&rsquo;t read from any of the Accel Coordinates. It kept saying permission
  232. denied. I could however, notify on them. But that didn&rsquo;t yield anything as well.
  233. What I <em>could</em> read was Accel Enable, which was set to 00. I guess that means it
  234. was off. After writing 01 to Accel Enable, I found I could get values out of
  235. Accel X-Coordinate! Also, the green LED which was permanently on turned off.</p>
  236. <div class="highlight"><pre tabindex="0" style="color:#e5e5e5;background-color:#000;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-text" data-lang="text">[CHSLEEV_00]# select-attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024
  237. [CH BTScale_00:/service0023/char0024]# write 01
  238. Attempting to write /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char0024
  239. [CH BTScale_00:/service0023/char0024]# select-attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a
  240. [CH BTScale_00:/service0023/char002a]# notify on
  241. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a Notifying: yes
  242. Notify started
  243. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a Value: 0x5b
  244. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a Value: 0xa3
  245. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a Value: 0x02
  246. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a Value: 0x00
  247. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a Value: 0x55
  248. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a Value: 0xa3
  249. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a Value: 0x02
  250. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a Value: 0x00
  251. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a Value: 0x59
  252. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a Value: 0xa3
  253. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a Value: 0x02
  254. [CHG] Attribute /org/bluez/hci0/dev_1C_BA_8C_21_7C_BB/service0023/char002a Value: 0x00
  255. </code></pre></div><p>I tried pressing the scale down a few times, and the values changed accordingly.
  256. Now, I just had to figure out how to convert the values into grams. It looked
  257. like the values were 32-bit integers sent as 4 bytes. In the above example it
  258. would be <code>0x0002a35b</code>, <code>0x0002a355</code>, <code>0x0002a359</code> or 172891, 172855, 172899. The
  259. values also decrease as you exert more effort on the scale. So assuming you take
  260. the initial value as <em>tare</em>, you simply subtract any succeeding value from that
  261. <em>tare</em> and you get the &ldquo;weight&rdquo;.</p>
  262. <p>The values I got didn&rsquo;t seem to be in grams though. After weighing some things
  263. on an actual scale and comparing the values I got, I found I can just divide the
  264. values by 14 and get something in grams. That 14 is entirely a magic number
  265. though and I have no idea whether other Prep Pad&rsquo;s would have the same constant.</p>
  266. <h2 id="openpreppad">OpenPrepPad</h2>
  267. <p>With all that figured out, I went ahead and made a <a href="https://github.com/thatsmydoing/openpreppad">simple CLI application</a>
  268. to interface with the Prep Pad. Ironically, node was the simplest thing I found
  269. that had <a href="https://github.com/sandeepmistry/noble">nice bluetooth library support</a> so that&rsquo;s what I wrote it in. I
  270. also added most of the technical details in the README for that as well.</p>
  271. <p>While this is all well and cool, I doubt the intersection of Linux users and
  272. people who <!-- raw HTML omitted -->got ripped off<!-- raw HTML omitted --> bought the Prep Pad is anyone besides me. In
  273. light of that, I&rsquo;m in the process of making a React Native version of the app,
  274. but that&rsquo;s still a work in progress. Who knows, if the new owners of Prep Pad
  275. are good, I might not even need to finish it.</p>
  276. </div>
  277. <small class="dateline">Posted: <time class="published dt-published" itemprop="datePublished" datetime="2017-01-15">2017-01-15</time></small>
  278. | <small class="commentline"><a href="/posts/openpreppad.html#isso-thread">Comments</a></small>
  279. </article>
  280. </article>
  281. <article class="h-entry post-text" itemscope itemtype="http://schema.org/Blog">
  282. <header>
  283. <h1 class="p-name entry-title" itemprop="headline">
  284. <a href="/posts/haproxy-charset.html" class="u-url">Haproxy Charset</a>
  285. </h1>
  286. </header>
  287. <div class="e-content entry-content">
  288. <p>A common problem we encounter is for things like <em>ñ</em> not showing up correctly. This actually caused <a href="http://www.rappler.com/nation/politics/elections/2016/132894-human-error-hash-election-results-code-mismatch">some issues</a> in the recent Philippine elections, but this isn&rsquo;t about hash codes or anything like that.</p>
  289. <p>By default, we use UTF-8 for text storage and rendering. A problem is that browsers don&rsquo;t assume UTF-8 as the default and you need to have either a <code>&lt;meta charset=&quot;utf-8&quot; /&gt;</code> in the HTML or <code>Content-Type: text/html; charset=utf-8</code> in the headers. A few of our services don&rsquo;t set the <code>Content-Type</code> with the <code>charset=utf-8</code> part so you&rsquo;d get piñata instead of piñata.</p>
  290. <p>Being lazy, we usually just correct this at the reverse proxy side. It&rsquo;s trivial to do in nginx. You just need to add <code>charset utf-8;</code> to your configuration and you&rsquo;re good. For haproxy though, I couldn&rsquo;t readily find a solution for it and had to go through the docs to see what I could do.</p>
  291. <p>After a bit of experimenting, I had success with this:</p>
  292. <div class="highlight"><pre tabindex="0" style="color:#e5e5e5;background-color:#000;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-text" data-lang="text"># set content-type to utf-8 if not already
  293. acl has_charset hdr_sub(content-type) -i charset=
  294. rspirep (Content-Type.*) \1;\ charset=utf-8 unless has_charset
  295. </code></pre></div><p>This is probably not the best way to do it. Arguably, we should just fix our services to have the correct <code>Content-Type</code> in the first place, but I can do that some other time.</p>
  296. </div>
  297. <small class="dateline">Posted: <time class="published dt-published" itemprop="datePublished" datetime="2016-06-24">2016-06-24</time></small>
  298. | <small class="commentline"><a href="/posts/haproxy-charset.html#isso-thread">Comments</a></small>
  299. </article>
  300. </article>
  301. </div>
  302. <nav class="postindexpager">
  303. <ul class="pager clearfix">
  304. <li class="next">
  305. <a href="/page/2.html">Older posts &rarr;</a>
  306. </li>
  307. </ul>
  308. </nav>
  309. </main>
  310. <footer id="footer" role="contentinfo">
  311. <p>
  312. <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/deed.en_US">
  313. <img alt="CC-BY-SA" style="border-width:0" src="https://licensebuttons.net/l/by-sa/3.0/80x15.png">
  314. </a> &copy; 2020 Thomas Dy - Powered by <a href="http://gohugo.io">Hugo</a></p>
  315. </footer>
  316. </div>
  317. <script src="/assets/js/konami.js"></script>
  318. <script>
  319. var easter_egg = new Konami();
  320. easter_egg.code = function() {
  321. var el = document.getElementById('thomas');
  322. if(el.className == "whoa") {
  323. el.className = "";
  324. }
  325. else {
  326. el.className = "whoa";
  327. }
  328. document.body.scrollTop = document.documentElement.scrollTop = 0;
  329. }
  330. easter_egg.load();
  331. </script>
  332. <script
  333. data-isso="https://isso.pleasantprogrammer.com/"
  334. src="https://isso.pleasantprogrammer.com/js/count.min.js">
  335. </script>
  336. </body>
  337. </html>