Dev Log

Today, I have been working on adding a setting to (de)activate sound. Besides that, I changed the styling of the headings in the settings view.

Today, I worked on simplifying the settings of Math Experts. Until now, Math Experts had 2 settings for numbers: The max number allowed in equations and the max result allowed. I don't know what I had in mind when programming this but I thought, I could reduce this to one setting being the max number allowed. So today I removed the max result allowed setting, adapted the code accordingly and removed unnecessary tests. I think this improves the app's usability a lot 😊

Today, I extracted some duplicate stylings into an own file and changed some minor stylings like spacing. Not much to say today 😬

Today, I continued working on the new game menu. I styled the game menu buttons and placed them at the bottom because this is best reachable on a phone. The upper half of the screen looked somewhat empty. Therefore, I decided to add some numbers which are moving from top to bottom. This is the resulting new game menu screen:

Until now, the game menu was displayed along with the single player game view. While making Math Experts more responsive, I figured that when I leave the game menu below the single player game view, the single player game menu increases in height when the game menu is closed. To avoid this, I decided to extract the game menu into an own view. That's what I did today.

In general, Math Experts works pretty well. My daughter loves using it after school, too. That makes me very happy 😊

I noticed that for the iPhone 7/8 my daughter uses, the UI is not as it should be. There are components overlapping. I tested my app on multiple simulators and I don't know exactly, how I messed it up. Anyways, when I started creating my app, I did not make it really responsive. I used fixed widths and heights, for example. Over time, I reduced them and I think now it's time to make the app really responsive 💪

Today, I started this process by using flexbox wherever needed to make the buttons and their containers grow/shrink depending on the device size and the available space.

From this	To this

Today, I learned that there is a command to upgrade React Native easily: npx react-native upgrade so I upgraded to the latest React Native version.

Since the last upgrade I have issues that logs are not shown and fast refresh is also not working anymore. I could not figure out the change that caused this issue but today I was able to figure out what I need to do to have logs and fast refresh being enabled again: In project.pbxproj I need to set buildConfigurationto "Debug". Then I can start Metro using npx react-native start and start the app in iOS using: npm run ios. Unfortunately, the version which is deployed to my iPhone is not working in this case. For this, I need to set the buildConfiguration back to "Release". In the iOS simulator it is not working in the beginning as well but after a refresh of the app. It's still not perfect but better und usable.

Since my app works like this:

• equation is generated
• result is typed in
• check each 250ms whether the inserted result is correct

and not like this:

• equation is generated
• result is typed in
• user confirms he is done with the calculation by pressing a button

I needed to find a way to show the user that the result is correct. If the user had to confirm the result by pressing a button, I could let the numbers shake if the result is wrong. I decided to display a checkmark after the result if the result is correct.

Currently, I am thinking about adding a button the user has to press to confirm the result. I think in this case, the checkmark could stay but as mentioned earlier, I could let the numbers shake when the result is wrong.

My daughter is in 3rd grade now. They are calculating until 1000 at the moment. She told me that she wants to calculate until 1000 using Math Experts but it takes so long to increase the numbers. She had to hit the button for each increase. There is room for improvement, obviously.

I used the onPressIn and onPressOut events. When the user presses a button, I start an interval increasing/decreasing the corresponding number.

const setMaxNumberHold = (val: number) => {
  let tempMaxNumber = settings.maxNumber
  timerMaxNumber = setInterval(() => {
    maxNumberLongPress = true
    let newMaxNumber = tempMaxNumber + val

    if (newMaxNumber < 3) {
      newMaxNumber = 3
    }

    if (newMaxNumber > 1000) {
      newMaxNumber = 1000
    }

    tempMaxNumber = newMaxNumber
    setSettings({ ...settings, maxNumber: tempMaxNumber })
  }, 200)
}

When the button is released, the onPressOut event is triggered. In this case, I clear the interval and store the new value in the settings such that this change is preserved for future use of the app.

const stopTimerMaxNumber = () => {
  clearInterval(timerMaxNumber)
  updateSettings(settings)
}

Of course, there is still the possibility to increase/decrease numbers by 1 by pressing the button once.

function setMaxNumber(val: number) {
  if (maxNumberLongPress) {
    maxNumberLongPress = false
    return // don't increase if button was pressed long
  }

  let newMaxNumber = settings.maxNumber + val

  if (newMaxNumber < 3) {
    newMaxNumber = 3
  }

  if (newMaxNumber > 1000) {
    newMaxNumber = 1000
  }

  const updatedSettings = { ...settings, maxNumber: newMaxNumber }
  updateSettings(updatedSettings)
}

Here is an example usage of this functionality:

<TouchableOpacity 
  onPressIn={() => setMaxNumberHold(-10)} 
  onPressOut={stopTimerMaxNumber} 
  onPress={() => setMaxNumber(-1)}
>
  <Text>-</Text>
</TouchableOpacity>

Today, I told my daughter to practice some subtraction problems using Math Experts because she really needs some practice here.

So she sat down and started practicing but at some point, some early point to be honest, she had equations like "23 - 23" and she typed "0" which is correct, obviously, but Math Experts did not accept this as the correct answer. We sat down and gave it some more tries and really often we got equations which should lead to zero as the result but zero was not accepted. Obviously, there was a bug in the subtraction equation generation.

Of course, I sat down because I really wanted her to practice some subtraction problems. I had the following code:

expectedResult = Math.max(num1, num2) - Math.min(num1, num2);
num1 = Math.max(num1, num2)
num2 = Math.min(num1, num2)
...
equation = `${num1Formatted} ${subtractionSign} ${num2Formatted} = `

After some close looks, it was clear to me that this cannot work as expected. The expected result is calculated correctly by subtracting the minimum from the maximum of the two numbers (line 1). But after that, I assign num1 to be the maximum of num1 and num2 (line 2) and in line 3, I want to assign the minimum of num1 and num2 to num2. This might work in some cases but not in every case. Let's say num1 = 3 and num2 = 5. By executing num1 = Math.max(num1, num2), num1 will get assigned 5. In line 3, I want to assign the minimum of num1 and num2 to num2 BUT now num1 is 5 and num2 is 5 as well. So the maximum and the minimum are the same now leading to the generated equation being 5 - 5 and the expected result being 2 in this case because it was calculated before this mess.

The corrected version looks like this:

[num1, num2] = [num2, num1] // swap numbers using array destructuring
expectedResult = num1 - num2;
...
equation = `${num1Formatted} ${subtractionSign} ${num2Formatted} = `

Of course, I implemented proper tests to ensure that for all operations everything works as expected now and in the future. You can do a mistake once but shouldn't do it twice ☝️

Fun fact: For addition, I did everything correctly 😬

I really need to keep in mind to have an iPhone and an Android emulator running at the same time. Yesterday, I just did the react native upgrade changes for iOS. I remember thinking "let's do it for iOS first and see if it works and then do the changes for Android" but I totally forgot about the Android changes after everything was working. Shame on me 😅

Now, everything is working for Android and iOS 🙌

Today, XCode was updated automatically. And of course, nothing was working anymore. I got an error message like "The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 11.0, but the range of supported deployment target versions is 12.0 to 17.0.9". At some point I had the idea to try to upgrade react native. I didn't do this for a while because I think this is annoying and I try to avoid such updates as long as I can. Now I couldn't avoid it any longer and needed to face my fear 😅

Updating react native using the React Native Upgrade Helper did the trick and now everything is working again 🙌

Today, I continued with searching for a library which can play a sound for me. I tried out react-native-track-player and react-native-audio-toolkit.

The react-native-track-player library is a bit too much for my use case of playing a sound. I think I figured out that this library uses the audio player of the phone. In my case, the song I listened to on Spotify before trying out my app with sound was kind of "removed" aka I could not continue listening to it.

With react-native-audio-toolkit I was not able to play a sound at all. The callback of the play function said that it was playing but I could not hear something.

I decided that I could give react-native-sound another try. And I am so happy I did 😁

Regarding the issues I had last time:

1. Sounds are still played at different volumes. I don't know why but I don't care.
2. No sound is played from time to time because the current playback might be paused when calling play() while the playback is in progress: Yes, this is the issue. The playback is paused in this case. I added a check whether the sound is still playing and if so, I stop it and play the sound again.
3. The sounds are also played when the phone is in silence mode: This is only true when using headphones (which I almost always do when developing). Without headphones everything is working fine!

I think it would be great if the user got some sort of feedback when a result is entered. It happened multiple times to me that I entered a result and was wondering why no new equation is generated. Until I realized that my result was wrong 😅

The app does not require the user to confirm the result by pressing a button but instead is checking the result time-based, currently. This robs me of the possibility to add a shake animation when the result is wrong because sometimes you have to insert multiple numbers. Obviously, I wouldn't want to let the result shake when the user is still typing. This would be similar to these forms which are marked red when you start typing. As you can see: I love them 😂

When thinking about a possible feedback for the user, I came up with the idea of playing a sound when the result is correct. So I checked out the available React Native libraries to play sounds. Today, I started trying out react-native-sound. The setup was well described in the README. But: I figured out that

• sounds are played at different volumes for some reason (even when setting the volume explicitly)
• when the player is too fast with the next equation no sound is played (I assume that the current playback is paused instead of a new one being triggered)
• the sounds are also played when the phone is in silence mode which is really annoying in my opinion

My conclusion is that I will try another sound library next time. If I cannot find a sound library which fits my needs, I need to find another way to give feedback that the result is correct.

My daughter came up with a feature request 😎

She said that she feels under pressure when she is playing against the time. So she asked for an endless mode without time. I thought that this was a great idea and I wouldn't be super mom if I wouldn't implement this feature right away 🦸‍♀️

So I sat down this evening and implemented the practice mode. Most of the functionality was already there (generating equations, checking for the correct result, ...) so the devil was in the detail here. I needed to disable the timer, introduce a button to stop practice mode, re-arrange the menu because it got longer, and needed to find a way to display the "record" of practice mode in the records view. But I got it working within 2 to 3 hours. And the result is really nice 🙌

Today, I was fixing bugs in switching to dark mode. The app headers did not change for the "Records" and "Settings" sections when switching from light to dark mode. Additionally, I added my icons in a dark color scheme to fit the overall appearance when the app is in dark mode.

Header beforehand	Header afterwards

Much better 😌

Ok, enough with procrastinating what needs to be done! Today, I continued working on my app Math Experts. I introduced a dark mode color scheme. Finally! :)

As I figured out last time, working on my website is fake work for me. So, what did I do? Of course, I continued working on my website! 😅

Today, I implemented the un-collapsing of the latest month as a default when opening the page. The other months are collapsed by default. I made the transition between collapsing and un-collapsing smooth.

Today, I read Ali Abdaal's newsletter where he wrote about "Real Work vs. Fake Work". He wrote that real work is the work that takes you towards the things that actually matter to you whereas fake work is everything else you spend your time “working” on. I have been thinking about what real work and what fake work is for me. My goal is to earn money with my mobile apps so working on apps and ideas for apps is real work for me. Fake work is working on my website, thinking about YouTube videos I (could) create. I don't plan to earn money with my blog and my YouTube channel. As a result, I think I should really focus more on my apps and don't invest that much time in my website or YouTube channel.

Today, I added a buymeacoffee button to the end of each of my posts. I mean, you know how it works: Coffee is essential for a software developer to function properly. Without coffee, we cannot produce code, blog articles, or YouTube videos. If you like my content and would like to show your support, then feel free to buy me a coffee or two. Your support is greatly appreciated!

When working on my website during the last days, I had a lot of fun and decided to further improve my website. Today, I added a 'published' attribute to my posts to make it easier to filter for published posts. All posts which have the 'published' attribute set to 'true' are published and can be displayed on my website. This is just an internal feature but it makes it easier for me to set an article to 'published' state. While updating my posts, I discovered that for some posts I forgot to set the 'alt' attribute of images and updated this as well.

Today, I converted this page to use markdown files for the content. The first two posts have been written in HTML but I figured that it would be better to have them separated into their own markdown files to have the possibility to add tags and later on the possibility to filter for a specific tag to have only the posts displayed which belong to a certain topic.

Today, I read about SEO and as a result worked on the SEO of my website:

• I found some copy-paste mistakes in my schema.org properties and fixed them.
• I enhanced the description of my website to reflect the actual content more accurately.
• I added title and descriptions for Open Graph and Twitter Cards.

My husband and my daughter played Math Experts on my mobile phone. It was obvious that their hands were interfering, making it hard for them to hit the intended buttons.

To address this, I decided to introduce some spacing between the player areas. The resulting layout looked nice on iOS but when running the app on Android it looked awful. Additionally, some elements were not visible.

I need to dig deeper into how to create layouts which are really responsive. My assumption is that I should not use fixed widths and heights. Although I tried to make these values dynamic by converting them depending on the screen size, it still seems not to be working.

During my research I read that just using flexbox and no width and height values (fixed or dynamic) at all might be sufficient. I want to give this a try but can imagine that on tablets, icons might get really big. I am not really convinced by this approach. Let's see how it turns out.