Tìngäzìk: a Retrospective – ep. 2 “Barcode” Continue reading Tìngäzìk: a Retrospective – ep. 2 “Barcode”
Tìngäzìk: a Retrospective – ep. 1 “Roman” From this episode, I’ll try to go through each level of the game, starting from the first one. Most of these posts would be relatively short, in a fixed format, and I might run out of introduction text to write from the next episode. Please bear with me for the next 30+ articles, and I hope you enjoy it. Continue reading Tìngäzìk: a Retrospective – ep. 1 “Roman”
Tìngäzìk: a Retrospective – ep. 0 Game Structure Tìngäzìk is a puzzle game I designed in 2020, heavily inspired by Project NANO after I solved it with my teammates. When the first team solved the puzzle, and sent me their write-up on the journey tackling it, I felt like I should also write a retrospective series of blogs reflecting on the game design, and sharing some details behind scene. The game is now in answer mode and open sourced, but you can also choose to give it a try if you want, without visiting the hint pages. Otherwise, this will be the first (or 0th) article of the series. Enjoy! Continue reading Tìngäzìk: a Retrospective – ep. 0 Game Structure
RYDL: Our Attempt RYDL is a rather “classic” file-based set of puzzles composed by COL, who was from the team first solved Tìngäzìk. COL sent this puzzle to us as a response to Tìngäzìk. (Thank you, COL!) The puzzle is a zip archive containing 6 PNG image files with the first one being an instruction page for the puzzle. The puzzle set consists of 6 main puzzles and a meta puzzle. Puzzles are not related to each other except the metapuzzle depends on the answer to all the others ones. Answers to all 7 puzzles are English words of 6 letters. In this blog, we’ll talk about how we – Eana, Ben Pig Chu, and an anonymous contributor – solved this puzzle, and some interesting details we learnt from COL after solving it. Continue reading RYDL: Our Attempt
Extract and Visualize Your Telegram Group Network This was one of the ideas I wanted to implement for a while: to visualize the members of all groups I joined on Telegram, and see how many circles I had on the single platform. Thanks to the openness of Telegram’s client API, this was rather easy to achieve. Continue reading Extract and Visualize Your Telegram Group Network
Use GraphQL subscription to show progress of time-consuming operations GraphQL is feature-rich query language designed to fit majority of needs of generic online applications. The 3 main types of operations in GraphQL are query, mutation and subscription. While queries and mutations are send in HTTP requests, subscriptions are running on WebSocket, which enables it to receive updates in real time. In this article, I would like to talk about using the subscription to report real-time results and/or progresses to time-consuming operations. Continue reading Use GraphQL subscription to show progress of time-consuming operations
Measure per-letter dimension of text in JavaScript TL;DR: Create a Range, set proper start and end points up to the text node with proper offset, then use Range.getBoundingClientRect() to get the dimensions. As a part of the Lyricova Jukebox, we wanted to support inline karaoke swipe animation. With the time tags in the data, it is easy to figure out the time when the animation must reach a certain character. Then we need to figure out a way measure per character dimension for the animation to work. Continue reading Measure per-letter dimension of text in JavaScript
How LyricsX keeps track of progress of media players LyricsX is an open source software for macOS to download and display lyrics of current playing track on Music (previously iTunes), Spotify, Audirvana, Vox, Swinsian, or the Now Playing indicator in the OS. It gets time-tagged lyrics files from local storage or internet, and then display the lyrics in sync with the player. As a crucial component of the development of Lyricova Jukebox, I have researched multiple implementations of real time lyrics display programs, and I found the mechanism behind LyricsX particularly interesting. Here in this article, I’d share with you how LyricsX tracking the player progress in a unique and resource-saving way. Continue reading How LyricsX keeps track of progress of media players
Tonguess: Solver and Traffic Analysis Similar to the last post I did on a mobile game, this time again is another online battle game from Baton and QuizKnock — Tonguess (Android, iOS). In short, Tonguess is a word version of Bulls and Cows, once played by members of QuizKnock in a video. Continue reading Tonguess: Solver and Traffic Analysis
中西文混合排版中标点符号的渲染 本文又是一篇从 Telegram 的投票评语里面引申出来博文。不知不觉发现这一话题写了很长，就索性再添上一些写进这里。我们不争论我们是否「应该」在中文里面用弯引号云云。如果没有硬性规定，按个人偏好就好。 首先，不同于大部分中文/全角标点，Unicode 里面有一些常用的中文标点是和西文中同样作用的标点共享相同的码位的： Continue reading 中西文混合排版中标点符号的渲染
