Here are the things you will read in this article:

• Why Native Packaging Matters for Cross-Platform Apps

• Generating a Multi-Resolution App Icon (.icns) for macOS

• Bundling Assets with GResource: Icons, Backgrounds & Metadata

• Building the .app Bundle: Automating It with Makefile

• Key Takeaways & What’s Next

Why Native Packaging Matters for Cross-Platform Apps

If you’ve ever sent a Linux binary to a Mac friend and watched them squint at a terminal wondering what to do with it, you already know the problem. A cross-platform app that runs “everywhere” isn’t the same as an app that runs like any other native app. On macOS specifically, that means a proper icon, a real .app bundle, and resources that don’t break just because the file structure changed. That’s what we’re fixing in this part of the series.

Generating a Multi-Resolution App Icon (.icns) for macOS

Select one image as your application icon, I am calling it here app-icon.png. It could be something like the image below. Notice that I already built it curved to be even more similar to Mac native apps.

Then, once you have your app-icon image, you need to convert it to multiple resolutions as it is encouraged in the Apple application development documentation as a good practice. Basically, what it does is that by having these multiple resolutions, they could guarantee your app will be shown on different MacOS versions and form factors(old Macs and Macs with very different screen sizes). These are the commands you can execute to get multiple versions of your app-icon in multiple resolutions:

sips -z 16 16 assets/app-icon.png --out packaging/macos/AppIcon.iconset/icon_16x16.png 
sips -z 32 32 assets/app-icon.png --out packaging/macos/AppIcon.iconset/icon_16x16@2x.png
sips -z 32 32 assets/app-icon.png --out packaging/macos/AppIcon.iconset/icon_32x32.png
sips -z 64 64 assets/app-icon.png --out packaging/macos/AppIcon.iconset/icon_32x32@2x.png

After generating files with multiple resolution sizes to multiple architectures, you need to compact them in a format expected by MacOS(.iconset), where all application images in all expected sizes/resolutions for the app will be. You can do that with the following command:

iconutil -c icns packaging/macos/AppIcon.iconset 

Bundling Assets with GResource: Icons, Backgrounds & Metadata

With .app or with native apps, you do not get to use the images or resources as you were using before, like loading them from a local relative path from disk, they need to get bundled together with everything within the same .app folder. So for the wrapper to be able to package your assets and images the way you want, you need to write a description file. In this project, I am calling resources.xml, and here it is:

<?xml version=”1.0” encoding=”UTF-8”?>
<gresources>
<gresource prefix=”app-background”>
<file>assets/creation-time-bg.png</file>
</gresource>
</gresources>

This resources.xml file, after compiling it, produces an application data bundle file called GResource. Making it creation-time-bg.png file available to be accessed by the running application. You can compile the GResource file with the commands below:

glib-compile-resources --generate --generate-source resources.xml
glib-compile-resources --generate --generate-header resources.xml

# Also add resources.c generated to your compilation line-up
$(CC) main.c resources.c -o $(TARGET) $(CFLAGS) $(LIBS)

Building the .app Bundle: Automating It with Makefile

After doing all of the above, now you can rest and enjoy, right? 😅 Now it is simple you just need to convert everything to one folder .app, in our case CreationTimer.app, and if you placed everything where it should be and followed this article by the book, you will have a native-like macOS application. In any case, I added to the Makefile of our application to make it easy for me and you 😉 to test multiple icons pretty fast, here is the Makefile target I created for this:

bundle: my_gtk_app

	./generate_icons.sh
	mkdir -p $(APP)
	mkdir -p $(APP)/Contents/MacOS
	mkdir -p $(APP)/Contents/Resources

	cp my_gtk_app $(APP)/Contents/MacOS/CreationTimer
	cp packaging/macos/Info.plist $(APP)/Contents/
	cp packaging/macos/AppIcon.icns $(APP)/Contents/Resources/

Key Takeaways & What’s Next

Packaging for macOS taught me that creating a MacOS “native-app” is mostly about respecting a platform’s conventions(and documentation) — icons in the right resolutions, resources bundled the way the OS expects, and a folder structure it recognizes as an app rather than a pile of files. None of it is hard on its own, but it’s easy to get wrong in small, silent ways (ask me about the images that didn’t load 😅).

Next up in this series: I’ll be cross-compiling this same app for Linux and Windows, and sharing what breaks, what surprises me, and how the packaging story differs on each platform. If macOS was about fitting in, I have a feeling Windows and Linux will each come with their own flavor of “fun”.

As always, feedback is welcome — I’m still finding my voice here, so tell me what’s working and what isn’t.

As always github link for our projects is here: https://github.com/solodevelingdev/creation-timer-app

Okay on the first post I told you I would like to create more stuff, instead of keep on trend of content consuming we live, inspired by Millionaire Fastlane from MJ De Marco, past episode I created the MVP of a timer(if you will). This time I made it look more pleasant 😅, to make this timer data useful sending to the ☁️ and learned a bunch stuff on how to make GTK4 obey your orders(for the most part).

Here are the things you will read on this article: - How to perform HTTP Requests in C

HTTP Requests in C

To be able to make our app useful(yes it is our app we are building it together right ? 😅) we need to gather this information of how much time we spent creating, there are several ways of doing it via git commit, via Google Forms/Sheets integration, via Obsidian files but I choose the Google Sheets path because it is quick and easy.

On this part I will explain you the backend part of the solution, the part that runs locally. A common Linux/Mac command for performing HTTP Requests is Curl and for our luck there is a library called libcurl that enables us to do everything we do on the command line with curl also with code in C. Did I told you we can send parameters for a POST request via json as we do in Postman and other applications, cool right ? Below you can see everything you need to integrate this to your solution:

include <curl/curl.h>
# ...
CURL *curl = curl_easy_init();
struct curl_slist *headers = NULL;
headers = curl_slist_append(headers, “Content-Type: application/json”);
curl_easy_setopt(curl, CURLOPT_HTTPHEADER, headers);
const char *url = “<add-your-googlesheets-url-here>”; 
char post_data[256]; = “<add-your-data>”;
curl_easy_setopt(curl, CURLOPT_URL, url);
curl_easy_setopt(curl, CURLOPT_POSTFIELDS, post_data);
// Performs http POST using curl
CURLcode res = curl_easy_perform(curl);
// Cleaning up after curl is performed freeing up all resources
curl_easy_cleanup(curl);
// Removes all traces of a previously built curl_slist linked list
curl_slist_free_all(headers);

Then if response=CURLE_OK data was transmitter successfully!

Get your info to the Cloud ☁️

The part of the solution being executed on the Cloud is really quick and simple. Create a Google Sheet, then go to the Extensions Tab and click on App Scripts extension(showed on the images below).

If you want you can copy and paste the code below but this time change it to the inner workings of your application here my script is looking for POST data and extracting minutes and seconds form this http request, you should then modify to whatever your application is sending.

function doPost(e) {
  try {
    const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(”Sheet1”);

    const data = JSON.parse(e.postData.contents);

    sheet.appendRow([
      new Date(),
      data.minutes,
      data.seconds
    ]);

    return ContentService
      .createTextOutput(JSON.stringify({
        success: true
      }))
      .setMimeType(ContentService.MimeType.JSON);

  } catch (err) {
    return ContentService
      .createTextOutput(JSON.stringify({
        success: false,
        error: err.toString()
      }))
      .setMimeType(ContentService.MimeType.JSON);
  }
}

Then you deploy this script with Google and your Google Sheet will be listening to POST requests and if you did a good job of not publishing your Sheets link everywhere or on git for example 😅 you will be fine. One thing you can do is to have sensitive links outside of your main application on files that are not being uploaded to git for example. Going back to GoogleSheets talk hit Deploy and you are done. Congratulations now you have your first C application sending data to the Cloud completely for free.

Now you can do anything you want with the data from the Cloud side, like plot beautiful graphs or take it one step further and integrate it to some dashboard of yours, where you could make this data more visible to you.

How to Set and Customize Application Backgrounds

Since our application is already “functional”, lets make it beautiful...well well well, there are couple of ways you can do this inside GTK framework, the first one is to use the css provider we were using before to set the background color to RED to now change background-image, and then job done, right ? Right ? 😅 Not exactly...

So with the CSS solution you should be able to change no problem(Example images below) but if you want to control things like will this background picture be repeating, will it tightly fit the size of the window application ? You can still solve this things with CSS but documentation start to get scarce in my opinion.

Here is the code on how you would do it with CSS, finding the correct path is a bit finicky but using the code below you should be able to do it for your own application.

const char *css =
“.background {”
“  background-image: url(\”file:///<absolute-path-for-background-img>\”);”
“}”;

I ended it up going back to gtk_picture and I feel like it gives me much more control over the image shown on the application and also if I want this tile repeating effect to happen or not. Here it is how you can use it.

background = gtk_picture_new_for_resource(”app-background/assets/creation-time-bg.png”);
gtk_picture_set_can_shrink(GTK_PICTURE(background), TRUE);
gtk_picture_set_content_fit(GTK_PICTURE(background),GTK_CONTENT_FIT_COVER); 

The End for now ...

I hope you liked and learned something with this post I did not want to make it 100% tutorial again, this time I added more code to it because I also found a lack of examples for things like using json parameters with libcurl in C, I hope you liked the lessons I shared and the problems I spent the most amount of neurons on it past weekend. Please any feedback is welcomed it is my second post on this platform and I am still want to find my voice, and maybe one day I can do funnier and more informative posts like other creators but I know that even them started somewhere.

The code for the whole application you can checkout here : creation-timer-app

This weekend I was in the car listening to the interview of James Clear at Diary of a CEO with Steven Barlett and man I really miss the vibe and knowledge of James Clear orbiting my neurons, my synapses feel like this podcast was a reward and the difficulties I am having on my learning and study practices are the cue. The question is what did I learn or re-learned on this podcast that could enable me to come up with a response ?

Lately, I have been falling out of my routine of refreshing my knowledge and my muscular memory in C. It is not like I was ever really good at this language at any part of my life but there were moments where I was decent at it a long time ago and all this AI Hype is making me more and more motivated to learn C again(contraintuitive I know). I even went back to a cheesy book I read years ago and I developed some skills with it, yep you can hate me all you want but it was the HeadFirst C from O’Reilly. There is something on that 90’s humor/nostalgia that makes me engage more with the material.

But going back to the point I started reading the book and solving the code exercises, couple of pages here and there. After 2-4 weeks motivation evaporated and work-life got really busy suddenly I stopped following my goal on becoming good again on this language and becoming again a Performance oriented Programmer. Listening to the Podcast James Clear says that there were things he would like to have highlighted more on the book, something that he learned to be very important with his experience over the years after the book was out.

If you want to become good at coding in any language or particular area of computer Science you know that sometimes motivation fades away and we abandon projects to only try them again in a couple of months/years then the same happens. LETS STOP THIS TREND, so these were the things he would like to highlight more:

How would this look if it was fun ? I just said that I was having a lot of fun with the book because of the nostalgia and 90’s humor but I can think of countless subjects that are boring to me by default like [ANY] Certification, Statistics, Algebra. So first lesson is that some way somehow you need to find a way of making these subjects FUN! to increase the chances of becoming a person that knows statistics, certified professional and so on. Easier said than done but one idea is to find a project you really like about even if it is pointless to spice things up like, I don’t know do an AI bot that plays a game you used to play when you were a child(very specific hun ;) ), Create something original(like a TODOlist app x) ), find a way of engaging with the thing you want to learn whether is professional or not, here focus on FUN.

How would I do this on busy days ? Here James said something, that I hope it sticks with me for more than 6 days( my mental cache so you know 😅 ). Reduce the Scope but stick to the Schedule. So for example I am working through some exercism problems these days to spicy things up on my C refreshment Developer journey, but what if the day is a very busy day how can I score one vote towards my habit instead of zero ( not doing it today ), I would read one problem and would imagine how I would solve it in C, that does not take that long I could do even standing and only with my phone. Find ways on the habits you have to do that Reduce the Scope but stick to the Schedule

Even better at the beginning of your goal establishment next time, already ask yourself how would I make this tasks parts of the process in order to reach my goal’s destination, How can I make them fun ? And How will I do them even when life gets in my way ? How can I Reduce the Scope and Stick to the Schedule ?

The End for now ...

Please any feedback is welcomed it is my second post on this platform and I am still trying to find my voice on Substack and how to express myself to my Audience in a way it is fun for me and also for you all.

Here are the things you will read on this article:

• The Spark: Why I built This App

• Why C ?

• Design is my passion /s

• GTK Hello World app

• Spice things up

• Handling Time-sensitive Tasks on GTK

The Spark: Why I built This App

It is not the first time I try to jump from the Content Consumer Wagon and go to the Content Creator Wagon. I thought it could be motivating to add a specific timer for the platforms around me where it would be just a simple timer to be added to a keyboard shortcut and maybe if it was created by me(very meta I know) it would motivate me even more.

The idea of this post is to share the challenges and learned concepts through the developing of a tiny Timer app in C using GTK Library for MacOS.

Why C ?

I choose C because this language is pursuing me(like the plague) for the past decade or more, I dodge it learning during bachelor degree because everyone near me that was good in C was arrogant when sharing their knowledge, so unfortunately I did the bare minimum to learn this language and pass exams(T.T). I endedup becoming experienced in Java where people where helpful and the community was also good at the time. During the past decade I setup myself to learning C couple of times, 9 years ago I got a bit good, but life circunstancies played out and meanwhile I’ve being working as developer with Java, Python, Javascript and so on. I still have this willingness and curiosity to Learn C and I believe that on the age of AI, to know the inner workings of everything running on your computer is becoming more and more vital to survive on the market.

Design is my passion /s

I always like to make some sketch of How I visualize the application to be in my head and as you can see I am very advanced in App design with Excalidraw. Jokes a side it is something quick to set a direction and for me how to visualize my applications, you should also try, don’t let your ideas only inhabit your mind.

How to create a GTK Hello World app

Lets start learning shall we ? To code a C app with GTK library included on your MacOS follow these steps.

Install GTK4 on MAC

Not that complicated, if you have homebrew installed it is super easy just execute these commands. THe first one install gtk and the second install the required libraries to gtk work.

brew install gtk4
brew install pkg-config

Enable GTK library documentation on Vscode(optional)

Add this to your c_cpp_properties.json. This file can be acessed by Ctrl+Shift+P and searching for Edit Configuration.

“includePath”: [
“${workspaceFolder}/**”,
“/opt/homebrew/include/gtk-4.0”,
“/opt/homebrew/include/glib-2.0”,
“/opt/homebrew/lib/glib-2.0/include”,
“/opt/homebrew/include/pango-1.0”,
“/opt/homebrew/include/cairo”,
“/opt/homebrew/include/gdk-pixbuf-2.0”,
“/opt/homebrew/include/graphene-1.0”,
“/opt/homebrew/lib/graphene-1.0/include”,
“/opt/homebrew/include/harfbuzz”
],

Hello world app

Once everything was installed first thing I went to was to compile a hello world app using GTK.

Me: How hard could it be right ? Me: right ? GTK C Library leaves the room

Here is the most basic app you can copy and paste just to have a new shiny application window on your Screen:

#include <gtk/gtk.h>
#include <stdint.h>
#include <stdio.h>

static void activate(GtkApplication *app) {

GtkWidget *window;
  
window = gtk_application_window_new(app);

gtk_window_set_title(GTK_WINDOW(window), “GTK4 on macOS”);
gtk_window_set_default_size(GTK_WINDOW(window), 400, 300);

// Defines the CSS targeting the ‘window’ node
const char *css = “window { background-color: red; }”;

// Creates the CSS Provider and load the string (found in GtkCssProvider docs)
GtkCssProvider *provider = gtk_css_provider_new ();
gtk_css_provider_load_from_string (provider, css);

// Gets the display and add the provider
GdkDisplay *display = gdk_display_get_default ();

gtk_style_context_add_provider_for_display (display,GTK_STYLE_PROVIDER(provider),GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);

gtk_window_present(GTK_WINDOW(window));
}

int main(int argc, char **argv) {

GtkApplication *app;
int status;

  
app = gtk_application_new(”com.example.GtkApp”, G_APPLICATION_DEFAULT_FLAGS);
g_signal_connect(app, “activate”, G_CALLBACK(activate), NULL);
status = g_application_run(G_APPLICATION(app), argc, argv);
g_object_unref(app);

return status;
}

You can compile it using the following minimal Makefile

CC = gcc
CFLAGS = $(shell pkg-config --cflags gtk4)
LIBS = $(shell pkg-config --libs gtk4)
TARGET = my_gtk_app

all: $(TARGET)
	
$(TARGET): main.c
	$(CC) $(CFLAGS) main.c -o $(TARGET) $(LIBS)

clean:
	rm -f $(TARGET)

Compile it with make command and you should see something like the application below:

Spice things up

Ok now that we have our first version compiled lets add buttons and the timer label. For these 2 to work the main lines of code you should be concerned are:

// inside activate function ...

timer_label = gtk_label_new (timer_text);
gtk_box_append (GTK_BOX (box), timer_label);

g_signal_connect (start_button, “clicked”, G_CALLBACK (on_start_button_clicked), timer_app_data);

g_signal_connect (stop_button, “clicked”, G_CALLBACK (on_stop_button_clicked), timer_app_data);

Handling Time-sensitive Tasks on GTK

One I did not showed yet and important lesson here is that we are running this application still in a single threaded manner, so if you want a task to be constantly running, searching, fetching or code parts where you need it to run functions tied to time, then instead of using something like a while true or a big for you should schedule your function. How do we schedule a function using GTK library ? I am glad you asked below I am showing how I implemented this scheduling inside start_button clicked action:

static void
on_start_button_clicked (GtkButton *button, gpointer user_data)
{

TimerAppData *data = (TimerAppData *)user_data;
data->stop_button_pressed = 0;

printf(”Button clicked\n”);
printf(”Tick-tack\n”);

// Here it is how you can schedule Time-sensitive tasks on GTK
// even in a single threaded setup
g_timeout_add(1000, on_timer_tick , data);
}

The End for now ...

I hope you liked and learned something with this post I did not want to make it 100% tutorial but I want it also to share the lessons learned and the problems I spent the most amount of neurons on it. Please any feedback is welcomed it is my first post on this platform, if you liked the post please leave a like, comment something and lets chat!

I am still want to find my voice, maybe one day I can do funnier and more informative posts like other creators but I need to start somewhere.

The code for the whole application you can checkout here : creation-timer-app

Subscribe now