JavaScript

๐“๐ก๐ž ๐Ÿ๐ข๐ซ๐ฌ๐ญ ๐ ๐š๐ฆ๐ž ๐ฆ๐ฒ ๐ค๐ข๐๐ฌ ๐š๐ฉ๐ฉ๐ซ๐จ๐ฏ๐ž๐

Written by  on July 23, 2026

I like good turn-based offline games. Recently, the kids brought home one that I won’t name here because my GitHub Pagesโ€“backed browser game is a shameless copy.

If you want to play it (free and safe): https://marcelpetrick.github.io/recognizer/

๐—ง๐—ต๐—ฒ ๐—ฟ๐˜‚๐—น๐—ฒ๐˜€ ๐˜๐—ฎ๐—ธ๐—ฒ ๐˜๐—ฒ๐—ป ๐˜€๐—ฒ๐—ฐ๐—ผ๐—ป๐—ฑ๐˜€ ๐˜๐—ผ ๐—ฒ๐˜…๐—ฝ๐—น๐—ฎ๐—ถ๐—ป: ๐˜›๐˜ธ๐˜ฐ ๐˜ค๐˜ข๐˜ณ๐˜ฅ๐˜ด. ๐˜Œ๐˜ช๐˜จ๐˜ฉ๐˜ต ๐˜ด๐˜บ๐˜ฎ๐˜ฃ๐˜ฐ๐˜ญ๐˜ด ๐˜ฆ๐˜ข๐˜ค๐˜ฉ. ๐˜Œ๐˜น๐˜ข๐˜ค๐˜ต๐˜ญ๐˜บ ๐˜ฐ๐˜ฏ๐˜ฆ ๐˜ฎ๐˜ข๐˜ต๐˜ค๐˜ฉ. ๐—™๐—ถ๐—ป๐—ฑ ๐˜๐—ต๐—ฒ ๐—บ๐—ฎ๐˜๐—ฐ๐—ต ๐—ณ๐—ฎ๐˜€๐˜๐—ฒ๐—ฟ ๐˜๐—ต๐—ฎ๐—ป ๐˜†๐—ผ๐˜‚๐—ฟ ๐—บ๐—ฎ๐˜๐—ฒ๐˜€.

It is super simple, but pattern matching requires concentration, and you have to be quick. ๐—œ๐˜’๐˜€ ๐—ด๐—ฟ๐—ฒ๐—ฎ๐˜ ๐—ณ๐˜‚๐—ป ๐—ฒ๐˜ƒ๐—ฒ๐—ป ๐—ฎ๐˜€ ๐—ฎ ๐˜€๐—ถ๐—ป๐—ด๐—น๐—ฒ ๐—ฝ๐—น๐—ฎ๐˜†๐—ฒ๐—ฟ with a local high-score list.

Building it raised three useful questions:
* ๐—›๐—ผ๐˜„ ๐—ฑ๐—ผ ๐˜†๐—ผ๐˜‚ ๐—ด๐˜‚๐—ฎ๐—ฟ๐—ฎ๐—ป๐˜๐—ฒ๐—ฒ that rule across all ๐Ÿ,๐Ÿ“๐Ÿ—๐Ÿ” possible card pairs?
* ๐—›๐—ผ๐˜„ ๐—ฑ๐—ผ ๐˜†๐—ผ๐˜‚ ๐˜๐˜‚๐—ฟ๐—ป a shared game into a good single-player challenge?
* ๐—›๐—ผ๐˜„ ๐—บ๐˜‚๐—ฐ๐—ต ๐—ถ๐—ป๐—ณ๐—ฟ๐—ฎ๐˜€๐˜๐—ฟ๐˜‚๐—ฐ๐˜๐˜‚๐—ฟ๐—ฒ does a small browser game actually need?

The mathematical part uses a finite projective plane. ๐—ง๐—ต๐—ฒ ๐˜๐—ฒ๐˜€๐˜ ๐˜€๐˜‚๐—ถ๐˜๐—ฒ ๐˜ƒ๐—ฒ๐—ฟ๐—ถ๐—ณ๐—ถ๐—ฒ๐˜€ ๐—ฒ๐˜ƒ๐—ฒ๐—ฟ๐˜† ๐—ฝ๐—ผ๐˜€๐˜€๐—ถ๐—ฏ๐—น๐—ฒ ๐—ฐ๐—ฎ๐—ฟ๐—ฑ ๐—ฝ๐—ฎ๐—ถ๐—ฟ.

The product stays deliberately small: 10, 20, or 50 cards, a timer, and local high scores. ๐˜•๐˜ฐ ๐˜ข๐˜ค๐˜ค๐˜ฐ๐˜ถ๐˜ฏ๐˜ต๐˜ด. ๐˜•๐˜ฐ ๐˜จ๐˜ญ๐˜ฐ๐˜ฃ๐˜ข๐˜ญ ๐˜ณ๐˜ข๐˜ฏ๐˜ฌ๐˜ช๐˜ฏ๐˜จ๐˜ด. ๐˜•๐˜ฐ ๐˜ฃ๐˜ข๐˜ค๐˜ฌ๐˜ฆ๐˜ฏ๐˜ฅ.

๐—” ๐˜€๐—ถ๐—ฑ๐—ฒ ๐—ป๐—ผ๐˜๐—ฒ ๐—ณ๐—ผ๐—ฟ ๐˜๐—ต๐—ผ๐˜€๐—ฒ ๐—ถ๐—ป๐˜๐—ฒ๐—ฟ๐—ฒ๐˜€๐˜๐—ฒ๐—ฑ ๐—ถ๐—ป ๐˜€๐—ผ๐—ณ๐˜๐˜„๐—ฎ๐—ฟ๐—ฒ ๐—ฑ๐—ฒ๐—น๐—ถ๐˜ƒ๐—ฒ๐—ฟ๐˜†
I also used the project as a compact, end-to-end SDLC example: written requirements, scope, and acceptance criteria; separated and testable domain logic; versioned storage with migration handling; unit, component, browser, mobile, and accessibility tests; formatting, linting, type checking, and build gates; locked dependencies with automated updates; and repeatable PWA deployment through GitHub Actions and GitHub Pages.

๐ˆ๐Ÿ ๐ฒ๐จ๐ฎ ๐ญ๐ก๐ข๐ง๐ค ๐ฒ๐จ๐ฎ ๐š๐ซ๐ž ๐ช๐ฎ๐ข๐œ๐ค๐ž๐ซ: ๐ฉ๐ฅ๐š๐ฒ ๐š๐ง๐ ๐ฉ๐จ๐ฌ๐ญ ๐ฒ๐จ๐ฎ๐ซ ๐ฌ๐œ๐จ๐ซ๐ž ๐Ÿค—

Got myself a micro:bit :)

Written by  on March 12, 2018

After gaining some experience with the Calliope mini I was eager to have look over the edge of the plate and found the Sino:bit with an even bigger matrix of 144 LED. BUT: there is still the humble predecessor, the BBC micro:bit. A very original and clever project to get ALL children at school started. At a price of around 17โ‚ฌ what can go wrong? Give ten children one for free and even if just one turns into a programmer/software-developer (or just gains a bit insight how their favorite electronic gadgets work), then it was worth but. But what do I say as german citizen. Hello Flugtaxi :’|
I plan to get my feet into the cold and muddy waters of robotics. Of course, assembling the :move mini with the bulldozer add-on will be nothing great, but I’ve craved to find out how to control a servo and how to put some life into the boring aspects of programming. Just kidding. But blinking LED and measuring values is nice, but … I want to build my own cat-feeder. Or at least something which moves and blinks to keep them a bit attracted.
And: the micro:bit and Calliope mini feature both Bluetooth-radios, so connecting them shouldn’t be a problem.
Another advantage: somehow the given libraries for the micro:bit are more advanced and diverse than the Calliope’s, could be due to the release in 2015 versus 2017. Also: micro:bit features microPython. C not ..

My first idea was to create a stress-test. Play a bit around with the buttons and the “run in background”-feature. Still not heating properly and fast enough.
Code is visible on my micro:bit-repository on github. Just like the one for the Calliope. Suggestions how to make the processing unit glow are heartily accepted ๐Ÿ™‚

Let us get coding. Somehow I like the enviroment with blocks and the possibility to switch to Javascript. Not my favorite dialect, but … sometimes you have to embrace what is given to you <3

20 min-project of today: creepy squirrel

Written by  on December 1, 2017

Had in mind to play around with the “make LED shine directly via PIN”-feature of the Calliope Mini. Worked, nice ๐Ÿ™‚
Actually for both โ€œeyesโ€ it is randomnly picked if they shall light up (and down) separately, but the GIF can can last just 3 seconds.

applied science ;3

Written by  on October 28, 2017

The surface-temperature of an average ~furry lazybutt~ housecat is 24ยฐC ๐Ÿ˜€

For this important experiment you need: a Calliope Mini, a computer science-degree and too much free time ;โ€™)
Just kidding, the code is quite simple:

Jubilate deo!

Written by  on July 4, 2017

Ok, today arrived the Calliope mini and after doing all my chores I spent one hour tinkering with the tiny star ๐Ÿ™‚
An improved version of one of the suggested projects: the first part of “Ode to joy” from Beethoven together with a blasting animation. Start by pressing “A”.

360ยฐ panorama: quick and easy

Written by  on December 14, 2015

The ‘magic’ behind 360ยฐ panoramas is nothing new. I remember stitching together manually the pictures from the Canon Ixus 800, later switching to AutoStitch and other solutions. But after I used Google Kamera as replacement for the pre-installed camera-app on the smartphone and also acquired a cheap 10โ‚ฌ-cardboard I had a jaw-dropping moment of enlightment: wow! This is amazing. And to whomever I showed this (techies, friends, parents, ..) they were also impressed. A freely explorable panorama with head-mounted gear is soo much much descriptive of the scene than the regular 2D-photos. Yes, I still stick to analogue photography, but If you want to show somehow how the sights looked and how the surrrounding environment looked like, then stick to a panorama. Creating them is quite is, but this is a different story.

Too cut it short: I was always looking for a way to present those views also to people far away. Which don’t have a smartphone. Jeremy Heleine created with his Photo Sphere Viewer a truly amazing in browser-javascript-library. I just added some of my own examples (in a pretty bad boilerplate-way *cough*). But this is still great! I love it.

Want to visit Brรผssel, Leipzig, Kiel, Wismar or Gรถteborg?