Programming on yozy//NET

Tricking Programmers Into Being Helpful

Fri, 08 May 2020 16:30:00 +0200

People[1] accuse Stack Overflow of being unwelcoming to newbies. Older programmers complain that the site quality has decreased because of the influx of low quality questions.

I am part of the latter crowd. I expect that if I give out my time to help somebody, they will reciprocate and invest time into understanding the problem and redact a concise question. Unfortunately when one goes through review queues on Stack Overflow, a good portion of the asked question is copy pasted textbook exercises.

Here is a thought:

Even though answering computer puzzles is annoying on a Q/A website, there is a whole bunch of websites specializing in just that—interview preparation courses.

What if we mixed the two? Imagine a service that gives you short programming challenges. Except these would be generated from low effort Stack Overflow questions¹. Posted solutions would get sent to Stack Overflow until an answer is accepted. After that the question would stay up, but answers would no longer propagate as we don’t want to spam the Stack Overflow questions.

Maybe only in part. Ideally the service would have more structured problems too. ↩︎

How I discovered how iOS calendar app chooses colors by digging into the icloud.com JavaScript code

Sat, 13 Jan 2018 19:50:00 +0100

While making an iOS calendar app, I needed to find out how Apple calculates background and text colors when displaying events in the Calendar app. I wanted to use the same algorithm for my display, in order to integrate well with the OS.

I was hoping for some displayBacgkroundColor property on EKCalendar object or something similar, but it does not seem to exist. I almost decided to start approximating their algorithm while I realized one thing—the icloud.com site has a calendar “application”. The event colors there seem to follow the same logic as those in the Calendar app. They are not strictly the same but it could provide some insight into how the color switching works.

iCloud.com being a modern web application, it runs a bunch of client side JavaScript. Since it is possible to add events, change calendar colors and so on, I assumed that the code which calculates the text and background colors for events must be somewhere in the publicly available JavaScript. There was a small possibility that they pre-computed the colors on the server but this seemed unlikely.

Homing in on the function

I decided to use Safari for this. It seems kind of appropriate and I am quite familiar with its web developer tools. I open the iCloud website, open the calendar page and look into what kind of JavaScript files are loaded.

Among others, this page loads mainly two big JavaScript files, both called javascript-packed.js. The other files are all called javascript-strings so I assume these load the localization files or something like that.

My first hypothesis was that the function is called when a color of an already present event is changed. This might happen when, for example, the calendar to which the event belongs is changed.

Luckily Safari can display minified JavaScript files in indented mode. However searching for functions for strings like “update” gave me too many results.

Looking at the HTML code of an event, I can observe that its color is inside an inline style attribute and that it changes when I change the calendar. This is good news, as the inspector lets me to put a breakpoint on that.

In the inspector I find the event element, right click on the div in the tree structure and set a breakpoint on Attribute Modified

Now I click on the event in the app, change the calendar… and voilà.

Walking up the call stack

At the very end of the call stack I can see that a property is assigned a value of #a66110. This is actually the text color for this calendar (I checked this in the inspector). My hope is that it will be calculated somewhere up the stack.

1 style: Assign #a66110 as as the color property of a CSS declaration

2 anonymous: Function that that applies the CSS style when called

3 access: This function is a sort of trampoline

4 css: This function generates the anonymous function in step 2, it does get the #a66110 as a parameter 'n'

5 updateProperty: calls the css function, and also gets the #a66110 as a parameter 'r'

When I get to the 6th level I finally hit something interesting. This is where the value #a66110 is created (inside a function called _update:

6 _update: This function seems to update the whole event, its title, state and most importantly, colors

p = t.get("textColor")

The get method seems to be doing something akin to the following (I did not really dig into this):

object.prototype.get = function(propName) {
	return call(this, this.properties[propName]);
}

I any case, the color value is derived from object t and its property textColor.

Finding the ‘Event’ object

I look into the t object’s properties and see this:

A cursory glance at the properties confirms to me that this is an ‘Event’ object. It has the usual ones such as owner, isAccepted and so on.

Intuitively this line then, in the _update function, does what we were searching for: Get the text color for an event and change the elements css representation to reflect that.

p = t.get("textColor"), this.updateProperty(n, o, ".text", p, "color")

I dig into this textColor property. I search the JavaScript file for it and look over the few results I get.

Within a piece of code which starts with Cal.Collection = CoreCal.Collection.extend({ I find this (among the other event properties):

textColor: function() {
    if (this.get("isBirthdayCalendar")) return "#4d5765";
    var e = this.get("_hexColor");
    return Cal.colorController.computeTextColor(e)
}.property("_hexColor").cacheable(),
backgroundColor: function() {
    if (this.get("isBirthdayCalendar")) return "#cfd3d9";
    var e = this.get("_hexColor");
    return Cal.colorController.computeBackgroundColor(e)
}.property("_hexColor").cacheable(),

Cal.colorController.computeTextColor(e) and Cal.colorController.computeBackgroundColor(e) and in both cases e is a color… finally I have struck gold!

Compute text and background color

The function iCloud uses to compute the text color is this:

computeTextColor: function(r) {
    r || CW.fatalError("Cannot provide a text color without a starting color"), r = r.toLowerCase();
    var i = this.get("specialColors"),
        s = SC.convertHexToHsv(r),
        o = s[0],
        u = s[1],
        a = s[2],
        f;
    if (i.isLight(o, u, a)) f = i.light.text;
    else if (i.isDark(o, u, a)) f = i.dark.text;
    else {
        var l = a - n,
            c = i.isGray(o, u, a),
            h = c ? 0 : Math.max(u, e);
        f = SC.convertHsvToHex(o, h, Math.max(l, t))
    }
    return f
},

By putting a breakpoint on the f = ... line I can deduce the constants n = 0.35, e = 0.5 and t = 0.3.

As for the background color:

computeBackgroundColor: function(e) {
    if (!e) {
        SC.error("Cannot provide a background color without a starting color");
        return
    }
    e = e.toLowerCase();
    var t = this.get("specialColors"),
        n = t.backgrounds[e];
    if (n) return n;
    var r = SC.convertHexToHsv(e),
        i = r[0],
        o = r[1],
        u = r[2];
    if (t.isLight(i, o, u)) n = t.light.background;
    else if (t.isDark(i, o, u)) n = t.dark.background;
    else {
        var a = t.isGray(i, o, u) ? 0 : s;
        n = SC.convertHsvToHex(i, a, t.bgBrightness(i, o, u))
    }
    return n
},

And the contents of the specialColors are here (comments are from my investigation of constants):

specialColors: {
    light: {
        main: "#dddddd",
        text: "#a8a8a8",
        background: "#f8f8f8"
    },
    dark: {
        main: "#1a1a1a",
        text: "#000000",
        background: "#bababa"
    },
    titles: {
        "#cc73e1": "#b14bc9",
        "#65db39": "#49bf1f",
        "#ffcc00": "#e0ac00",
        "#ff9500": "#ff7f00"
    },
    backgrounds: {
        "#a2845e": "#e0d3c1"
    },
    isLight: function(e, t, n) {
        var s = Cal.colorController;
        return n > r && t < i // r = 0.6, i = 0.1
    },
    isDark: function(e, n, r) {
        return r < t // t = 0.3
    },
    isGray: function(e, t, n) {
        return t < i // i = 0.1
    },
    bgBrightness: function(e, t, n) {
        return Math.min(n * 1.5, o)
    }
},

Then there is a bunch of color conversion functions that work in a pretty standard way.

convertHsvToHex takes a R, G, B triplet and returns a [H, S, V]
convertHexToHsv takes an array of three elements [H, S, V] and returns an array [R, G, B]
two regexes to check if a colors is in the HTML rgb(r, g, b) or #RRGGBB format
parseColor which converts either of the two formats and returns a #RRGGBB representation
expandColor which takes the #RRGGBB color and returns an array of [R, G, B]
toColorPart which takes a number in 0-255 range and transforms it to hex representation

I am not going to detail these functions here, but I have uploaded them here if you would like to look:

Original Apple Conversion Functions

Rewriting the functions into more human readable format

These functions were of course at least partly generated and minified. So I have rewritten them into a digestible format.

First, I have written a colorTools object which has the properties from the specialColors object on iCloud.

const colorTools = {
  light: {
    text: "#a8a8a8",
    background: "#f8f8f8"
  },
  dark: {
    text: "#000000",
    background: "#bababa"
  },
  backgrounds: {
    "#a2845e": "#e0d3c1"
  },
  isLight: function(h, s, v) {
    return v > 0.6 && s < 0.1
  },
  isDark: function(h, s, v) {
    return v < 0.3
  },
  isGray: function(h, s, v) {
    return s < 0.1
  },
  bgBrightness: function(h, s, v) {
    return Math.min(v * 1.5, 1)
  },
  /* color space conversion removed for brevity */

This object is then used as a helper for the two functions I was actually searching for in the beginning.

Text Color

If the color is too light or too dark then use a pre-computed text color. Otherwise cap the saturation to 0.5 (for grayish colors just set it at 0) and reduce the value by 0.35.

function computeTextColor(rgb) {
  const [h, s, v] = colorTools.convertHexToHsv(rgb);  
  if (colorTools.isLight(h, s, v)) {
    return colorTools.light.text;
  } else if (colorTools.isDark(h, s, v)) {
    return colorTools.dark.text;
  } else {
    const rs = colorTools.isGray(h, s, v) ? 0 : Math.max(s, 0.5);
    const rv = v - 0.35;
    return colorTools.convertHsvToHex(h, rs, Math.max(rv, 0.3))
  }
}

Background color

In a similar fashion, use a pre-computed colors if the background is too light or dark. Set the saturation to 0 for grayish colors.

function computeBackgroundColor(rgb) {
  if (colorTools.backgrounds[rgb]) {
    return colorTools.backgrounds[rgb];
  }
  const [h, s, v] = colorTools.convertHexToHsv(rgb);
  if (colorTools.isLight(h, s, v)) {
    return colorTools.light.background;
  } else if (colorTools.isDark(h, s, v)) {
    return colorTools.dark.background;
  } else {
    let rs = colorTools.isGray(h, s, v) ? 0 : s;
    return colorTools.convertHsvToHex(h, rs, colorTools.bgBrightness(h, s, v));
  } 
}

This was fun. Now, the colors on iCloud website are not strictly the same than in the iOS app, but that requires just a bit of tweaking with the constants.

You can download the complete JavaScript file I have extracted here:

Apple Calendar Colors

Some final words

There you have it. In the end I was actually surprised that it was pretty easy to extract these functions from the code. I expected the minified/obfuscated code to be quite hard to read. Interestingly, most function names did not get mangled. I suppose this is due to the fact that they are called through strings in some part of the framework Apple uses.

Of course, later I have converted these functions into Swift UIColor extensions so I can use them in my application.

I might publish them here sometime later, but if you are interested ask me on Twitter.

Pure CSS solution to retina images with a single file

Wed, 03 Jan 2018 10:20:50 +0100

Problem: You have an image and want it to display well in browsers on a high DPI display. There are many ways to do this, some of them more complicated than others.

My requirements were pretty simple:

I want to be able to publish “retina” images with default markdown syntax
I prefer images to be blurry on non-high DPI screens, they are blurry anyway so what’s the harm.
I do not care about wasted bandwidth by sending retina assets to clients with standard definition screens. Not having ads or huge javascript on this site makes up for this.
I do not want to use any javascript or server side hacks

So what’s the solution?

Name @2x assets with @2x in their filename, for example image@2x.png
Add this small snippet into my CSS file (thanks, Internet Explorer!)

img[src*='@2x'] {
  zoom:50%;
}

For an example usage look at my article about Qt Creator

Setting File Permissions on Windows With C

Thu, 30 Nov 2017 11:07:22 +0100

Edit 2018-01-19

In my original article I have naively supposed that the group names are not localized. This is false. Always use the Well Known Security IDs when manipulating permissions on Windows.

I’ve spent good part of my morning trying to find a way how to set permissions to a particular group.

Finally while digging though Stack Overflow I have found this question which lead to another because of deprecation errors.

My final version of the code to add file read and write permissions to the group Users is this:

#include <Windows.h>
#include <AccCtrl.h>
#include <Aclapi.h>

const char* fileName = "C:/path/to/your_file.txt";

DWORD result = 0;

PACL pDACL = NULL;
PACL pOldDACL = NULL;
PSECURITY_DESCRIPTOR pSD = NULL;
EXPLICIT_ACCESS ea;
PSID pUsersSID = NULL;

const auto cleanup = [pDACL, pOldDACL, pSD, pUsersSID](){
  if (pOldDACL) LocalFree(pOldDACL);
  if (pDACL) LocalFree(pDACL);
  if (pSD) LocalFree(pSD);
  if (pUsersSID) FreeSid(pUsersSID);
};

result = GetNamedSecurityInfo(static_cast<LPTSTR>(fileName), SE_FILE_OBJECT, DACL_SECURITY_INFORMATION, NULL, NULL, &pOldDACL, NULL, &pSD);
if (result != ERROR_SUCCESS) {
  std::cerr << "Failed to get the security info [" << result << "]" << std::endl;
  cleanup();
  return EReturnCode_Error;
}

ZeroMemory(&ea, sizeof(EXPLICIT_ACCESS));

SID_IDENTIFIER_AUTHORITY SIDAuthNT = {SECURITY_NT_AUTHORITY};
if (!AllocateAndInitializeSid(&SIDAuthNT, 2, SECURITY_BUILTIN_DOMAIN_RID, DOMAIN_ALIAS_RID_USERS, 0, 0, 0, 0, 0, 0, &pUsersSID)) {
  std::cerr << "Failed to allocate SID" << std::endl;
  cleanup();
  return EReturnCode_Error;
}

ea.grfAccessPermissions = FILE_GENERIC_WRITE | FILE_GENERIC_READ;
ea.grfAccessMode = SET_ACCESS;
ea.grfInheritance = CONTAINER_INHERIT_ACE | OBJECT_INHERIT_ACE;
ea.Trustee.TrusteeForm = TRUSTEE_IS_SID;
ea.Trustee.TrusteeType = TRUSTEE_IS_WELL_KNOWN_GROUP;
ea.Trustee.ptstrName = reinterpret_cast<LPTSTR>(pUsersSID);

result = SetEntriesInAcl(1, &ea, pOldDACL, &pDACL);
if (result != ERROR_SUCCESS) {
  std::cerr << "Failed to set entries in the access control list [" << result << "]" << std::endl;
  cleanup();
  return EReturnCode_Error;
}

result = SetNamedSecurityInfo(static_cast<LPTSTR>(fileName), SE_FILE_OBJECT, DACL_SECURITY_INFORMATION, NULL, NULL, pDACL, NULL);
if (result != ERROR_SUCCESS) {
  std::cerr << "Failed to set the security info [" << result << "]" << std::endl;
  cleanup();
  return EReturnCode_Error;
}

cleanup();

Note: You will also need to link your program with Advapi32.lib.

My original code follows, do not use this:

const char* fileName = "C:/path/to/your_file.txt";
PACL pDACL = NULL;    
PACL pOldDACL = NULL;
PSECURITY_DESCRIPTOR pSD = NULL;
EXPLICIT_ACCESS ea;

GetNamedSecurityInfo(static_cast<LPTSTR>(fileName), SE_FILE_OBJECT, 
                     DACL_SECURITY_INFORMATION, NULL, NULL, 
                     &pOldDACL, NULL, &pSD);

ZeroMemory(&ea, sizeof(EXPLICIT_ACCESS));

char groupUsersName[6] = {"USERS"};
ea.grfAccessPermissions = FILE_GENERIC_WRITE | FILE_GENERIC_READ;
ea.grfAccessMode = SET_ACCESS;
ea.grfInheritance = CONTAINER_INHERIT_ACE | OBJECT_INHERIT_ACE;
ea.Trustee.TrusteeForm = TRUSTEE_IS_NAME;
ea.Trustee.TrusteeType = TRUSTEE_IS_GROUP;
ea.Trustee.ptstrName = groupUsersName;

SetEntriesInAcl(1, &ea, pOldDACL, &pDACL);

SetNamedSecurityInfo(static_cast<LPTSTR>(fileName), SE_FILE_OBJECT, 
                     DACL_SECURITY_INFORMATION, NULL, NULL, pDACL, NULL);

Gulf color theme for Xcode

Thu, 30 May 2013 14:37:42 +0000

I have started teaching myself some Objective-C which also means that I have to use something else than my beloved Qt Creator.

As to feel a bit at home I have ported my Gulf theme over to Xcode. The choice I have made in creating this theme is to conserve all of the colours from the original (e.g. Types and Classes are greenish, while attributes are blueish).

Sadly Xcode does not provide different colours for global and local variables. However, all externally imported classes, types and functions are marked in italics, so you can easily know what belongs to you.

Here is a quick look at the theme:

And here is the download link, enjoy:

Gulf theme for Xcode

Gtk, Glade and signal handlers in C++

Thu, 05 May 2011 08:00:49 +0000

Much was written about connecting signal handlers to interfaces made with Glade and imported with GtkBuilder. The problem is that everybody uses a different system and/or language. So here is a guide which explains all the magic:

Glade Interface

First of all create your widget in Glade and assign it a signal handler. We are going to create a very simple application which has a single button which exits it. The Glade interface should look something like this. It is basically a Main Window (main_window) widget with a Button (exit_button) inside. We define a handler for the signal “clicked” for the button and call it exit_button_handler.

C++ code

Now let’s create the source file, it looks like this. As you can see our signal handler is just a basic void returning function.

#include <gtk/gtk.h>

extern "C" G_MODULE_EXPORT void exit_button_handler(GtkObject* caller, gpointer data)
{
    gtk_main_quit();
}

int main(int argc, char ** argv)
{
    gtk_init(&amp;argc, &amp;argv);
    GtkBuilder* l_BuilderInterface = gtk_builder_new();
    gtk_builder_add_from_file(l_BuilderInterface, "ui.glade", NULL);
    gtk_builder_connect_signals(l_BuilderInterface, NULL);
    gtk_widget_show(GTK_WIDGET(gtk_builder_get_object(l_BuilderInterface, "main_window")));
    gtk_main();
    return 0;
}

The important thing to notice is that the declaration of the callback function is preceded by extern "C" G_MODULE_EXPORT. These two bits of code ensure that the produced object will have a C-compatible table-entry for this function even though we are using a C++ compiler and that it will be accessible under Windows as well. Indeed, the G_MODULE_EXPORT macro expands to nothing under Linux.

Compilation

Now, we need to compile the whole thing. Let’s say we have called the file above main.cpp. The line to call on Linux would be :

g++ `pkg-config --cflags --libs gtk+-2.0 gmodule-2.0` main.cpp -o test

Let’s look at the output of the pkg-config file for a while :

-pthread -I/usr/include/atk-1.0 -I/usr/include/pango-1.0 -I/usr/include/gio-unix-2.0/ -I/usr/include/glib-2.0 -I/usr/lib/x86_64-linux-gnu/glib-2.0/include -I/usr/include/freetype2 -I/usr/include/libpng12 -I/usr/include/gtk-2.0 -I/usr/lib/gtk-2.0/include -I/usr/include/cairo -I/usr/include/gdk-pixbuf-2.0 -I/usr/include/pixman-1  -pthread -Wl,--export-dynamic -L/usr/lib/x86_64-linux-gnu -lgtk-x11-2.0 -lgdk-x11-2.0 -latk-1.0 -lgio-2.0 -lpangoft2-1.0 -lpangocairo-1.0 -lgdk_pixbuf-2.0 -lm -lcairo -lpango-1.0 -lfreetype -lfontconfig -lgobject-2.0 -lgthread-2.0 -lgmodule-2.0 -lrt -lglib-2.0

That’s a lot of stuff! Depending on the system your mileage can vary, but the important bit is : -Wl,--export-dynamic. This piece of code ensures that you will be actually able to find the symbol once it is needed. On Windows, there is no need for the –export-dynamic flag, just be sure to load the gtk library as well as the gmodule. And that’s it, done and done!