Building a Fruit Merge Game with My Kids (and AI)

There’s something magical about building things with your kids. Last week, we sat down together and created a game, not by teaching them to code, but by prompting together.

The Game

It’s a simple concept: drop fruits into a container and watch physics do its thing. When two fruits of the same type collide, they merge into a bigger fruit. becomes , becomes , and so on—all the way up to the mighty watermelon.

The goal? Score as many points as possible before the fruits stack too high.

Building It Together

What made this project special wasn’t the code—it was the collaboration. My kids had opinions. Strong opinions.

“The watermelon should be HUGE!”

“Can we add confetti when you get a high score?”

“What if the fruits explode with sparkles when they merge?”

Each idea became a prompt. Each prompt became a feature. They watched their ideas appear on screen in real-time, and their excitement was contagious.

What We Learned

For them: creativity has immediate results. Ideas matter. You don’t need to know how something works to build it.

For me: the best features came from their unfiltered imagination. Kids don’t self-censor. They just ask for what would be fun.

Try it yourself and see if you can beat your family high score.

Understanding growth rates is essential for anyone involved in finance, business development, or investment. Whether you’re evaluating the performance of a business, planning for future growth, or assessing the potential return on investment, calculating growth rates accurately is key. Growth rates help you make informed decisions by showing how quickly a metric, such as revenue or profits, is growing over time.

To simplify this process, I’ve created a handy tool for calculating three of the most common growth rate metrics: Simple Growth Rate, Compound Annual Growth Rate (CAGR), and Average Growth Rate. This tool is perfect for entrepreneurs, financial analysts, investors, and anyone else looking to quickly analyze growth data.

Growth Rate Calculator Tool

You can use the calculator below to compute the Simple Growth Rate, Compound Annual Growth Rate (CAGR), and Average Growth Rate. Just enter your data and let the tool do the work for you. The default value is Revenue, but you can also use numbers for profit or turnover to get their specific growth rates.

Understanding the Different Types of Growth Rates

Now that you’ve seen how the tool works, let’s dive deeper into what each growth rate means and when to use them.

1. Simple Growth Rate

What is Simple Growth Rate?

Simple Growth Rate is the most straightforward way to measure growth between two periods. It calculates the percentage increase or decrease from one period to the next. This type of growth rate is often used to measure short-term growth, such as month-over-month or year-over-year changes.

Use Cases:

• Monthly or Quarterly Performance Analysis: Quickly assess the performance of a business, project, or investment over a short period.
• Sales and Marketing Metrics: Evaluate the growth of sales, customer acquisition, or web traffic.
• Tracking Specific Metrics: Useful when you need to track the growth of specific metrics like revenue, expenses, or customer base.

Example: If a company’s revenue increased from $100,000 to $120,000 in one year, the Simple Growth Rate is 20%.

2. Compound Annual Growth Rate (CAGR)

What is CAGR?

The Compound Annual Growth Rate (CAGR) is a more sophisticated metric that measures the mean annual growth rate of an investment, business metric, or financial figure over a specified period. Unlike the Simple Growth Rate, CAGR assumes the growth rate is compounded annually, which makes it more accurate for analyzing longer periods.

Use Cases:

• Investment Analysis: CAGR is widely used to evaluate the performance of investments such as stocks, mutual funds, or portfolios over time.
• Business Valuation: When valuing a company or forecasting future growth, CAGR provides a realistic picture of how the company’s financials might evolve.
• Comparing Growth Across Sectors: Useful for comparing the growth rates of different companies or sectors over the same period.

Example: If an investment grows from $10,000 to $15,000 over three years, the CAGR is approximately 14.47%.

3. Average Growth Rate

What is Average Growth Rate?

The Average Growth Rate calculates the arithmetic average of multiple growth rates over a given period. Unlike CAGR, it does not account for compounding. This makes it a simpler, but sometimes less accurate, way to calculate growth over time when the growth rate varies significantly.

Use Cases:

• Quick Estimates: Ideal for quick, back-of-the-envelope calculations where you need a rough estimate of growth over multiple periods.
• Non-Financial Metrics: Useful for calculating growth rates in metrics like user growth, engagement rates, or production outputs that don’t necessarily compound over time.
• Analyzing Fluctuating Data: When data points vary significantly, the average growth rate can provide a broad view of growth trends.

Example: If a company’s growth rates over three years are 10%, 20%, and 15%, the Average Growth Rate would be 15%.

Simple Growht Rate, CAGR & Average Growth Rate summarized

Understanding and accurately calculating growth rates are crucial for making informed decisions in business and finance. Whether you’re looking at the short-term growth of a project, the long-term returns of an investment, or comparing different growth scenarios, knowing which type of growth rate to use is vital.

The Growth Rate Calculator tool provided here simplifies the process, allowing you to calculate Simple Growth Rate, CAGR, and Average Growth Rate quickly and easily. Use this tool to enhance your analyses, forecast more accurately, and make better strategic decisions.

Feel free to try the tool out and bookmark if for easy access in the future, and let me know if you have any questions or need further insights into growth rates!

The architectural difference between translation plugins

The first thing we need to do is to choose if we want to have a lot of differences between the content in the different languages, or if we are okay with having the same content on each language version, just translated. There are pros and cons to both alternatives.

Group A: Translation by having each “post” in each language

In this group, we have Polylang and WPML. A Spanish version of the content is a separate post/page/product in WordPress. We can customize the kind of content we have for each language version. But we will have several versions of each content in the backend (and posts database) which might slow down the backend, and provide several issues, especially on e-commerce when having Woocommerce activated and wanting to sync/handle the inventory separately or with inventory plugins. Import plugins like wp-all-import also have issues getting things correct if using Woocommerce. We must also create each post/page/product in each language, which is time-consuming.

Group B: The, let’s call it “frontend translations”

In group B we have TranslatePress and Weglot and some more. This group of plugins keeps only one version of the content in the backend and standard WordPress/Woocommerce interface. The translation is done in front-end and the translations are stored in separate tables in your WordPress database with TranslatePress and in third-party databases with Weglot and others. I only recommend TranslatePress from this group. With this group, WordPress itself “thinks” that only one language is activated, and any import plugin, warehouse plugin, or similar usually works well. The standard WordPress database stays small and clean. We can easily use integrations to DeepL or a translation AI to create base versions of translations on the fly.

Earlier I would not have gone for anything in this group, but now with the new and improved TranslatePress, I see myself going for that alternative almost in every case. It is fast, easy to use, visual, and extremely automated (with AI, DeepL, or Google Translate integration). I am using TranslatePress on the site you are now visiting.

The drawback with this group is that it is translations only, we cannot have separate content/pages/products in separate languages. But sometimes that tradeoff might pay back in getting things done faster as well.

So, what is the best translation plugin for WordPress / Woocommerce?

I do not recommend a group, but I will recommend a plugin for each group. Earlier I used WPML a lot but changed to Polylang because it was leaner and faster. Both are from group A. Nowadays I almost always use TranslatePress (Group B) if possible, because with this I can launch a new language version of a site in 1 hour with AI or deepL translations automatically appearing just by clicking through the site.

If there are a lot of customizations between languages needed, I use Polylang and things take A LOT longer. If not, I use TranslatePress, and things go FAST.

What about seo when using front-end translation plugins?

One huge reason I earlier ditched front-end translation plugins was because they did not create their clean language URLs, nor the right language in the source code. This was not tolerable as an SEO, but TranslatePress has fixed this. So with translatePress (the only frontend translation plugin I recommend) we get language URLs in subfolders (like jonathanbjorkskog.com/es/ for Spanish etc) AND the right language content in the source code. This is because the translations are stored in our own WordPress database and called from there based on the URL.

Comparison of WordPress translation plugins Polylang and TranslatePress

Plugin / Feature	Polylang	TranslatePress
Customize content for each language		✘
Auto-translate full sites instantly	✘
Allows “unlimited languages”
Integrate to DeepL & Translation AI
Search engine friendly
Translate strings (titles, description, URL)
Works well with import plugins and connections to third-party warehouse systems	✘
Very customizable		✘
Easy to use	✘

To summarize, I recommend TranslatePress whenever you can live with having the same, only translated, content in each language. The language versions will be up and running in a day. However, if you need a lot of custom content that differs from language to language, I recommend Polylang. But be aware of that it will take A LOT more time to get things done.

Step-by-Step Guide to Building Your Custom ChatGPT

1. Understanding GPTs

• What They Are: Custom GPTs are tailored versions of ChatGPT that you can create to meet specific needs or interests, such as a chatbot that shares fun facts about otters.

2. Getting Started

• Access Requirements: Ensure you have a ChatGPT Plus or Enterprise account, as the custom GPT builder feature is exclusive to these users.

3. Creating Your Custom GPT

• Navigating to the Builder: Log into your OpenAI account, go to the Explore section, and select “Create a GPT.”
• Setting Instructions: Enter your desired instructions for your custom GPT in the Create panel. Use plain English to describe what you want your GPT to do.
• Preview and Refine: Use the Preview panel to interact with your GPT as you build it, refining its behavior based on the responses you receive.

4. Customizing Your GPT

• Advanced Settings: Click on “Configure” to access advanced customization options, including changing the chatbot’s name, profile picture, and adding specific instructions.
• Uploading Knowledge: Enhance your GPT’s responses by uploading relevant files for it to reference, providing a richer knowledge base for more accurate and contextual responses.

5. Finalizing Your GPT

• Saving Your GPT: Once satisfied with your custom GPT, save it by selecting your preferred sharing settings, ensuring your GPT is accessible as you desire.
• Using Your GPT: Access your custom GPT from the ChatGPT home page sidebar and interact with it as needed.

6. Sharing and Editing Your GPT

• Sharing: If your GPT is public or shared, simply use the provided link to share it with others.
• Editing: To make changes to your custom GPT, find it under the Explore section, select “Edit,” make your adjustments, and update.

7. Ensuring Accuracy and Privacy

• Verification: Given that GPT models can sometimes produce inaccurate responses (“hallucinate”), it’s important to verify the information provided by your custom GPT.
• Privacy Controls: Be mindful of the information uploaded to your GPT, especially sensitive data, to prevent potential breaches.

By following these steps, you can create a custom ChatGPT that serves your unique needs, from business applications to personal interests. Whether it’s generating specific content, automating tasks, or providing specialized information, your custom GPT can become a valuable tool in your digital toolkit.

Examples of GPT’s I have made:

Ecommerce Growth Guide: Helping you with financial and growth-related functions in ecommerce.

Yhdistelylainaopas: An expert helping people with questions around refinancing of loans in Finnish.

Disc Golf Mate: Helping beginners and pros in Disc Golf to choose the right discs for different environments.

WideToes Paljasjalkakenkä-opas: A helper in explaining foot health and choosing the right shoe for your needs.

You can try these if you have a plus account, or create your own. It’s usually really fun!

Here’s an example of how you can create a wildcard redirect in PHP using regular expressions:

// Get the requested URL
$requestUri = $_SERVER['REQUEST_URI'];

// Define regular expression pattern for matching specific patterns
$pattern = '/^\/user\/(\d+)\/?$/'; // This pattern matches URLs like /user/{user_id}/

// Check if the requested URL matches the pattern
if (preg_match($pattern, $requestUri, $matches)) {
    // Extract the user ID from the URL
    $userId = $matches[1];
    
    // Redirect to a specific user profile page
    header("Location: /profile.php?user_id=$userId");
    exit();
} else {
    // Handle other cases or show an error page
    echo "Page not found";
}

In this example, the regular expression pattern '/^\/user\/(\d+)\/?$/' matches URLs like /user/{user_id}/. If the requested URL matches this pattern, it extracts the user ID and redirects to a specific user profile page. You can modify the regular expression pattern to match different URL patterns according to your requirements.

Redirect all subdomains (www and non-www for example)

To redirect all the specified versions of subdomains to the same destination, you can use the following code:

// Get the requested URL
$requestUri = $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];

// Define regular expression pattern for matching different subdomains and the root path
$pattern = '/^(www\.)?example\.com\/?$/i';

// Check if the requested URL matches the pattern
if (preg_match($pattern, $requestUri)) {
    // Redirect to the desired destination (in this case, the root of the website)
    header("Location: https://example.com/");
    exit();
} else {
    // Handle other cases or show an error page
    echo "Page not found";
}

In this code, the regular expression '/^(www\.)?example\.com\/?$/i' matches URLs like http://example.com/, https://example.com/, http://wwwexample.com/, and https://wwwexample.com/ case-insensitively. If the requested URL matches this pattern, it redirects to https://example.com/. If the URL doesn’t match this pattern, you can handle other cases or show an error message as needed.

Please note that you might need to adjust the regular expression pattern according to your specific requirements or domain variations. The i modifier in the regular expression pattern makes the matching case insensitive, allowing it to match variations in capitalization.

Please note that handling redirects in this way can be powerful, but it also requires careful consideration of the regular expressions used to avoid unintended matches and redirection loops.

Yes, you can set up URL redirections at the domain level before content is displayed by the CMS (Content Management System). This can be achieved through domain configuration settings provided by your domain registrar or web hosting provider. Here’s how you can do it:

Method 1: Using Domain Registrar’s Control Panel

1. Log in to Your Domain Registrar’s Control Panel: Access your domain registrar’s website and log in to your account.
2. Find Domain Management or DNS Settings: Look for options like “Domain Management,” “DNS Settings,” or “Domain Control Panel” in your account dashboard.
3. Set up URL Redirection: Within the DNS settings, find the option for URL redirection or URL forwarding. Different registrars might have different names for this feature.
4. Configure Redirection: Enter the specific URLs you want to redirect and provide the destination URL where you want the traffic to be redirected. Some registrars might also allow you to choose the type of redirection (e.g., 301 Permanent Redirect or 302 Temporary Redirect).
5. Save Your Settings: After entering the necessary information, save your settings. The changes might take some time to propagate across the internet, so be patient.

Method 2: Using Web Hosting Control Panel

If your website is hosted on a server and you have access to a control panel (such as cPanel or Plesk), you can set up URL redirections there:

1. Log in to Your Hosting Control Panel: Log in to your hosting provider’s control panel.
2. Find Redirects or URL Forwarding Option: Look for options like “Redirects,” “URL Forwarding,” or “Forwarding” within your control panel.
3. Configure Redirection: Enter the specific URLs you want to redirect and specify the destination URL.
4. Choose Redirection Type: Select the type of redirection you want (301 Permanent Redirect or 302 Temporary Redirect).
5. Save Your Settings: Save the configuration. Similar to domain registrar settings, changes might take some time to propagate.

By setting up URL redirections at the domain level using either of these methods, you can redirect traffic to specific URLs before your CMS handles the content. Remember that the exact steps and terminology might vary based on your domain registrar or hosting provider, so refer to their documentation or support resources if you encounter difficulties.

To set up Google Tag Manager and add Google Analytics 4 to track purchases in your WooCommerce store, follow these steps:

1. Set up a Google Tag Manager account:
   • Go to the Google Tag Manager website (https://tagmanager.google.com) and sign in with your Google account.
   • Click on “Create Account” and provide an account name.
   • Follow the prompts to create a new container.
2. Install Google Tag Manager on your WooCommerce site:
   • Install and activate the “DuracellTomi’s Google Tag Manager for WordPress” plugin on your WooCommerce site.
   • Go to “Settings” in your WordPress dashboard and click on “Google Tag Manager.”
   • Enter your Google Tag Manager container ID, which you can find in the Tag Manager interface (e.g., GTM-XXXXXX).
   • Save the changes.
3. Configure the Google Tag Manager container:
   • In the Google Tag Manager interface, open your container.
   • Click on “Tags” in the left sidebar and then “New” to create a new tag.
   • Give your tag a descriptive name, such as “Google Analytics 4 – Purchase Tracking.”
   • Click on the tag configuration area and select “Google Analytics: GA4 Configuration.”
   • Enter your Google Analytics Measurement ID, which you can obtain from your Google Analytics 4 property (e.g., G-XXXXXX).
   • Configure the triggers for your tag. For purchase tracking, you should create a trigger that fires on the “Thank You” or “Order Confirmation” page.
   • Save the tag.
4. Publish your changes:
   • Click on “Submit” in the upper-right corner of the Google Tag Manager interface.
   • Add a descriptive version name and description for your changes.
   • Click on “Publish” to publish the changes to your container.
5. Test the implementation:
   • Make a test purchase on your WooCommerce site and reach the “Thank You” or “Order Confirmation” page.
   • In the Google Analytics 4 interface, navigate to the “Realtime” section and check if the purchase events are being tracked.
   • Verify that the events are recorded correctly in your Google Analytics reports.

By following these steps, you should be able to set up a Google Tag Manager container and add Google Analytics 4 to track purchases in your WooCommerce store. Remember to adjust the triggers and other configurations based on your specific needs and tracking requirements.

Transaction and Transaction revenue tracking with GA4 & GTM

If I need to track transactions and transaction revenue, is there any more steps I need to take?

To track transactions and transaction revenue in Google Analytics 4 using Google Tag Manager, you’ll need to set up enhanced ecommerce tracking. Here are the additional steps:

1. Enable Enhanced Ecommerce in Google Analytics 4:
   • Go to your Google Analytics 4 property.
   • In the left sidebar, click on “Data Streams.”
   • Click on your data stream and then click on “Configure” next to “Enhanced measurement.”
   • Enable the “Ecommerce purchases” option.
   • Save the changes.
2. Configure Enhanced Ecommerce in Google Tag Manager:
   • In the Google Tag Manager interface, open your container.
   • Click on “Tags” in the left sidebar and find your existing Google Analytics 4 tag for purchase tracking.
   • Edit the tag and scroll down to the “Tag Configuration” section.
   • Click on the “Enable Enhanced Ecommerce Features” checkbox.
   • Save the tag.
3. Send Enhanced Ecommerce data to Google Analytics:
   • Still in the Google Tag Manager interface, go to “Variables” in the left sidebar.
   • Click on “Configure” under the “Built-In Variables” section.
   • Enable the following variables under the “Enhanced Ecommerce” category:
     • “Transaction ID”
     • “Affiliation”
     • “Total Revenue”
     • “Tax”
     • “Shipping”
     • “Coupon Code”
     • “Product ID”
     • “Product Name”
     • “Product Price”
     • “Quantity”
   • Save the changes.
4. Update the Google Analytics 4 tag with Enhanced Ecommerce data:
   • Go back to your Google Analytics 4 tag for purchase tracking.
   • Scroll down to the “Fields to Set” section.
   • Add the following fields and values:
     • Field Name: “send_to” Value: “G-XXXXXXXXXX” (your Google Analytics Measurement ID)
     • Field Name: “event_name” Value: “purchase”
   • In the “More Settings” section, expand the “Ecommerce” dropdown.
   • Configure the following fields:
     • “Transaction ID”: Choose the corresponding variable.
     • “Affiliation”: Choose the corresponding variable.
     • “Value”: Choose the corresponding variable for total revenue.
     • “Tax”: Choose the corresponding variable.
     • “Shipping”: Choose the corresponding variable.
     • “Coupon”: Choose the corresponding variable for coupon code.
     • “Items”: Configure the following sub-fields:
       • “Item ID”: Choose the corresponding variable for product ID.
       • “Item Name”: Choose the corresponding variable for product name.
       • “Price”: Choose the corresponding variable for product price.
       • “Quantity”: Choose the corresponding variable.
   • Save the tag.
5. Publish your changes:
   • Click on “Submit” in the upper-right corner of the Google Tag Manager interface.
   • Add a descriptive version name and description for your changes.
   • Click on “Publish” to publish the changes to your container.
6. Test the implementation:
   • Make a test purchase on your WooCommerce site and reach the “Thank You” or “Order Confirmation” page.
   • In the Google Analytics 4 interface, navigate to the “Conversions > Ecommerce > Purchases” section.
   • Verify that the transaction data, including revenue, tax, shipping, and coupon information, is recorded correctly.

By following these additional steps, you should be able to track transactions and transaction revenue using Google Analytics 4 with enhanced ecommerce tracking in your WooCommerce store. Remember to adjust the configuration based on your specific requirements and the data available in your WooCommerce setup.

301 redirects in a .NET enviroinment

In a .NET environment, you can achieve URL redirections using various methods, depending on your application’s architecture and requirements. Here are a few common ways to handle redirects in a .NET application:

1. Using Web.config:

You can configure URL redirects directly in the web.config file using the <httpRedirect> element. Here’s an example of how you can redirect from one URL to another:

<configuration>
  <location path="old-page">
    <system.webServer>
      <httpRedirect enabled="true" destination="new-page" httpResponseStatus="Permanent" />
    </system.webServer>
  </location>
</configuration>

In this example, requests to old-page will be permanently redirected to new-page.

2. Using Global.asax:

In your Global.asax file, you can handle redirects in the Application_BeginRequest event. Here’s an example:

void Application_BeginRequest(object sender, EventArgs e)
{
    if (Request.Path.ToLower() == "/old-page")
    {
        Response.RedirectPermanent("/new-page");
    }
}

In this code, if the requested path is /old-page, it will be permanently redirected to /new-page.

3. Using MVC Routing:

If you are using ASP.NET MVC, you can handle redirects in your RouteConfig.cs file. Here’s an example:

public class RouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapRoute(
            name: "OldPageRedirect",
            url: "old-page",
            defaults: new { controller = "Home", action = "NewPage" }
        );

        // ... other routes ...
    }
}

In this example, requests to /old-page will be redirected to the NewPage action in the HomeController.

4. Using IIS URL Rewrite Module:

If you are hosting your application on IIS, you can use the URL Rewrite module to set up redirects. This method provides a more powerful and flexible way to manage redirects.

You can create rewrite rules in the IIS Manager or by editing the web.config file directly. Here’s an example of a rewrite rule in the web.config file:

<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="OldPageRedirect" stopProcessing="true">
                    <match url="^old-page$" />
                    <action type="Redirect" url="/new-page" redirectType="Permanent" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

In this rule, requests to /old-page will be permanently redirected to /new-page.

Choose the method that best fits your application’s architecture and requirements. Each method has its advantages, so consider the specific use case and choose the one that suits you best.

Do you feel that you might be missing out on this new feature of the web? Are you unsure where to start and if you actually can create these yourself?

Well, you might be missing out, we do not know yet how big this thing will become, but it looks like stories-format is here to stay at least.

And can you start doing stories yourself even if not being a videographer or developer? Definitely yes! And in this post we are going to look at what these web stories are and how to create them!

What does a Web Story look like?

Web Stories are portrait-mode full-screen visuals that work like pages in a book, with every page being visible for a few seconds. The difference to Social Media stories is that web stories can live forever on your site and Google. Let’s look at some examples of stories.

Examples of Web Stories

I’ve created a few stories. Here is one that you can check:

seo-in-gif-totally-explained">

Here is another: Official Story about how to make Web Stories:

So, now you have an idea of what web stories look like. Both of these are made in the WordPress plugin for Web Stories (The Stories Plugin).

Some short nerdy information about Web Stories:

Creating your first Web Story

How to create your first Web Story

To get started, it’s easiest if you use the WordPress plugin. So before you start, make sure you have a WordPress site with the Stories Plugin installed. Have an idea in mind too of what you want to create, or grab an already existing blog post and think about how to recreate it into a story. The first story I made, SEO in GIF, took about 1 h 20 min to create, so I use that as a benchmark.

Total Time Needed :

1

Hour

20

Minutes

Total Cost:

0

USD

Required Tools:

– A Computer.

Things Needed?

– WordPress

– The Stories Plugin

– An idea of what to make

– A bunch of images that fit the topic

Steps to create and publish the first web story:

Step 1

Open the stories plugin in WordPress, click “create new story”

Step 2

Follow the step by step instruction for how to use the Web Stories plugin found here

Step 3

Publish (and submit to Search Console if you want to see it indexed really fast)