DEV Community: Ido Schacham

Wörtilizer

Ido Schacham — Mon, 22 Sep 2025 20:08:12 +0000

When I was in-between jobs, I wanted to do a fun project and improve my German, so I built a little web app called Wörtilizer 🇩🇪⚡

Wörtilizer lets you build up your own private German vocabulary, automatically get the correct der-die-das noun articles, and memorize them via visual cues and a fun quiz.

The web app was built via React, Next.js, and Tailwind CSS. It uses the german-words and german-words-dict npm packages to discover whether the word is in German, it is indeed a noun, and what is its article. The data is saved in your browser's localStorage, no signup/login needed.

I made it responsive, so it should look nice on any device. There are some limitations, like the dictionary recognizes most words but not all of them. Also, the words that it does recognize need to be accurately spelled, but that's not a bug, it's a German learning feature 😉

Try out Wörtilizer on your next U-Bahn ride instead of doom scrollen. Wörtilizer is open sourced on GitHub, so feel free to steal it or contribute.

The Bubble Figure: Integrating Tensorflow.js With Three.js and Cannon-es to Create Interactive Art

Ido Schacham — Thu, 04 May 2023 14:21:24 +0000

Recently I had the pleasure to work on one of the funnest projects ever: The Bubble Figure.

The Bubble Figure was created by a team of volunteers at Wunderdog for Grand One 2023, annual design awards that take place in Helsinki. Our designers created the visuals for the event and wanted to do something extra.

After exploring various ideas, tech, and taking the time and resource constraints into mind, we decided to go for The Bubble Figure.

What in the world is The Bubble Figure?

The Bubble Figure is an interactive experience that runs in the browser. When a person is recognized via the webcam it makes them appear as a colorful bubble figure. They can then interact with various shapes that fall from above, for example, by hitting them. Simple and fun, and all in the visual language of Grand One 2023.

How does it work?

The Bubble Figure uses TensorFlow.js pose detection to recognize a person. Pose keypoints (e.g. left shoulder, right wrist) are then mapped onto a Three.js scene.

The figure is randomized every time a new person is detected. The shapes falling from above are also randomized, while using certain geometries and textures.

To simulate physics, cannon-es is used, a maintained fork of cannon.js (we found out the hard way cannon.js wasn't maintained anymore). Shape coordinates are mapped from the physical world to the Three.js scene, while the figure is mapped from the scene to the physical world.

How did we do it?

Funnily, none of us had any experience with these libraries. We learned everything the best way: on the job, with lots of trial and error.

ChatGPT was very useful to understand some concepts from the tech stack and generate basic code. But of course, this required some fixing and modifying to get it to work.

We did quite a lot of tinkering from the design perspective, to make sure The Bubble Figure looks alright. This required adjusting the number of bubbles, their sizes, offsetting their positions, and adding randomness to create various interesting results.

Can I try it?

Absolutely! You can check out the latest demo on GitHub pages.

Please use Google Chrome, other browsers are not supported. Allow the browser to use the camera. Then take a few steps back to make sure that your pose is detected, and knock some shapes around.

You can also hit Command + K on Mac or Ctrl + K on Windows to adjust various parameters. Clicking Apply will save the parameters in the browser's local storage.

Are there any limitations?

Of course, it wouldn't be a software project without limitations.

For instance, cylinders and cones don't always collide with the figure in a smooth manner. We improved it a bit by randomizing the figure's bubble z coordinates. Still, some weird collisions may happen. Isn't it part of the fun though?

We also found it rather difficult to render the bubble figure always in the same size, regardless of the person's distance from the camera. Maybe given more time we would have succeeded, but we had to release the project.

The frame rate also changes once the pose is detected. Nothing really bad, even though ideally it should be consistent.

Also, for some reason using TensorFlow pose detection as NPM packages caused various JavaScript errors. That's why we had to resort to loading it via script tags.

Where is the code?

The Bubble Figure has been released as open source in the Wunderdog GitHub account.

Since we were short on time, we did rapid prototyping and the code got very messy. So, following the event, we spent about a week cleaning it up and also adding TypeScript.

One thing I might have done differently, is to create a the figure with a skeleton. Then it should be easier to move the skeleton's joints and possibly to keep the figure the same size regardless of camera distance. Oh well, next time.

I hope that you like this little project. May you find it useful if you would also like to create an interactive browser experience with pose detection, 3D graphics, and physics.

Introducing Klepto: Sharing and Stealing Great Ideas

Ido Schacham — Fri, 25 Nov 2022 15:16:59 +0000

What I built

Klepto - a platform for sharing and stealing great ideas

App Link

https://klepto.vercel.app

Screenshots

Description

Ever had an amazing idea, but no clue what to do with it? Do you maybe want to build a new project, but are out of ideas?

Well, I have just the solution for you: Klepto!

Klepto is a platform for freely sharing and stealing great ideas, a place where dreamers and doers can have a constructive exchange, an initiative to help bring more innovation to the world.

If you're a dreamer, let go of your ideas by releasing them to the public on Klepto and have someone else work out the kinks and make them come alive.

If you're a doer, go ahead and check out the latest, the most popular, or random ideas out there. Love them, steal them, and get to work.

Even if you're just a watcher, you can vote for ideas, link to them, and just enjoy the creativity of the human mind.

Link to Source Code

https://github.com/wunderdogsw/klepto

Permissive License

MIT

Background

I was in between projects for my employer Wunderdog and wanted to learn some Svelte and MongoDB.

So, I asked my colleagues to come up with ideas, and this meta idea of having a web app for ideas was my top pick.

Since my time on the bench was limited, and I like a lean approach, I built an MVP with the core functionality of the website that provides the most value to the user. There is a lot more that could be implemented, contributions are welcome!

How I built it

Klepto is built with Svelte, SvelteKit, Svelte Material UI, and MongoDB.

I used MongoDB Atlas since it made it easy to get going with a MongoDB setup for free and very quickly.

Since this was my first attempt at coding with this stack, I learned it all on the job.

With SvelteKit I especially learned how to retrieve and pass data in pages, as well as how to create API endpoints.

On the MongoDB side, I learned how to use update documents and aggregation pipelines so that data is updated correctly and in the most efficient way.

Additional Resources/Info

Klepto is inspired by String (no typo) who said: if you love some idea, set it free!

Svelte Script Code Execution Order

Ido Schacham — Fri, 25 Nov 2022 09:34:48 +0000

While working on my first Svelte project for a Wunderdog customer, I was caught by surprise—not by Svelte being very effective and fun to work with, that part I already knew.

What surprised me was the order in which Svelte was executing JavaScript code, especially when mixing up asynchronous functions, reactive statements, and onMount.

For example, take a look at this Svelte component, or head to the Svelte REPL. In which order will these console logs appear? Go ahead and write it down before you continue reading.

<script>
  import { onMount } from 'svelte'

  const fetchData = async () => {
    console.log('1. fetchData')
  }

  console.log('2. started')

  fetchData().then(() => console.log('3. fetched'))

  $: console.log('4. reactive')

  console.log('5. continued')

  onMount(() => {
    console.log('6. onMount')
  })

  console.log('7. after mount')
</script>

The Answer

2. started
1. fetchData
5. continued
7. after mount
4. reactive
6. onMount
3. fetched

Why is that? Let’s investigate

2. started

The fetchData constant is assigned to an asynchronous function. The function isn’t called yet, so it doesn’t log anything at the moment. Hence, the first log that appears in the console is 2. started.

1. fetchData

Next, the fetchData function is called, thus 1. fetchData is logged to the console. The callback .then(() => console.log('3. fetched')) isn’t called just yet—it’s added to the browser’s message queue, and will be called once the event loop reaches it, a bit later.

5. continued

Shouldn’t 4. reactive be logged now? That’s what I thought, but turns out I was wrong. According to the Svelte docs:

Reactive statements run after other script code and before the component markup is rendered, whenever the values that they depend on have changed.

Indeed, other script code hasn’t finished running yet. Therefore, this reactive statement isn’t executed at this time, and the next console log is 5. continued.

7. after mount

7. after mount is logged to the console. That’s because the callback in onMount will only be called once the component is first rendered, and that hasn’t happened yet.

4. reactive

Now we hit that sweet spot after other script code has been executed, and before the component markup is rendered. This means it’s time to execute that reactive statement, thus logging 4. reactive to the console.

6. onMount

At this point there is no more script code to execute and the component is rendered. Thus, the onMount callback is called and 6. onMount is logged to the console.

3. fetched

What about the callback to our asynchronous function, remember that? Oh yeah, says the event loop, as it handles the message queue. The callback is executed, and finally, 3. fetched is logged to the console.

Done

While I find Svelte to be very intuitive and developer friendly, the script execution order can be a bit puzzling when using asynchronous functions and reactive statements. I hope that this post has helped you to understand this issue and to squash your bugs.

Photo by Cookie the Pom on Unsplash

How I Used Scrum to Save My Marriage

Ido Schacham — Tue, 08 Nov 2022 11:28:52 +0000

My marriage was in trouble. I’ve heard that having your first child can really put stress on the relationship, but I had no idea just how much.

At one point, after having a really bad fight with my wife, I realized that I couldn’t take it any more. There had to be a better way.

Then it came to me: what if I used Scrum in our marriage? After all, what is Scrum if not a framework to solve complex problems, in a transparent, inspective, and adaptive way?

The Family Scrum Master

The first order of the day: big kickoff meeting. We set our intentions to get back to the team mindset, or “the fun & love path” as we like to call it.

We then took turns speaking and listening to surface major pain points. We discussed it together, keeping a constructive mindset to focus on the issue rather than blaming the other person, and came up with effective solutions.

This was an excellent start. We were both fighting less, felt like we were being seen, and that the workload was finally fairly distributed. Nonetheless, how would we make sure to stay on the fun & love path instead of regressing to the fighting & bickering path?

Enter Scrum:

Since there was so much going on, we initiated one week Sprints
To get a grip on todos, we created a ticket backlog
We scheduled regular Retros on Sundays to inspect and adapt
We set up Sprint Planning following the retros to plan the upcoming week

Scrum or ScrumBut?

What about Dailies and Sprint Reviews? Wasn’t this yet another good old case of the ScrumButs?

From a dry perspective, yes, it was. However, while Scrum was very helpful, it didn’t fully translate to my marriage. We were having dailies over breakfast anyway, even talking too much as my wife once humorously said. Sprint reviews were irrelevant since we are both the Scrum Team and stakeholders.

The goal is not to be a stickler to the Scrum Guide, but to use it as a starting point. I made adjustments depending on the situation, and did so consciously while inspecting and iterating over the results. To me, at least, that’s the spirit of Scrum.

The Product Goal

Of course, Scrum alone can't save an entire marriage—we also started going to couple’s therapy, improving our communication, and working on our personal issues, amongst many other things. Yet Scrum has really helped us reach closer to our Product Goal: to save our marriage and get back to the fun & love path.

(Photo by Alysa Bajenaru on Unsplash)