The holiday is over and the camera full of photos and with this there comes the question of where to store the images?

Existing Solutions

You’d say, in iCloud or Photos app and that’s indeed a good place. I personally do not like to place my private photos on servers out of my full control, and I was afraid of using Photos app due to the closed box library iPhotos used to create. The later seems to become less of a problem since it stores the original files in the Masters folder ordered by import date inside of its library.

So I’m using Photos app now for my memories again stored on local devices. But before that I used Image Capture.

Command Line Tool

Image Capture is a solid tool for syncing pictures to a local folder that comes with macOS. But files will keep their original file names. That’s why I created a little command line tool I’d like to share with you now:

The tool is rather simple. By passing a source and a destination folder it will copy or move images. It then has options to put the files in folder e.g. by year and add some additional information like picture dimensions. By creating hash values it will ignore already handled files. This is great to make sure you did not miss any picture in case you saved your images over multiple places over the years ;)

Backup from Photos Library

To get back to our Photos library, this would be an example call to copy all originals from your library to a separate folder on the desktop:

photofolder --smart-copy -p -o ~/Desktop/MyPhotosBackupByYear ~/Pictures/Photos\ Library.photoslibrary/Masters/

Just a short note, that I started a separate blog for news related to my product Receipts. I hope you’ll subscribe there as well and learn more about the future of this product.

I had fun making the new website by using my Open Source project SeaSite about which I already wrote earlier in this blog: “Static websites the jQuery way”. Even though the whole project is made of static pages, it was easy to do with those helper.

For SeaSite I added a localization plugin, to be able to reuse templates for English and German. In order to better respect the GDPR, I added features for load stuff lazy “on click” into the pages like YouTube videos or Disqus UI.

Another very useful feature of SeaSite is the outline generated when parsing Markdown. This way the help pages got a nice table of contents as a side info. The help document itself was edited in Typora, I wrote about the approach earlier in this blog.

Finally the search is also a nice feature that does not require any dynamic code on the server. SeaSite extracts all headers and contents from the created static pages a final step and puts the data into a JSON file. That is loaded lazily only if the user starts typing. The Fuse.js library adds the search logic and fuzzy string support.

A super simple approach

In the web world, especially in React projects, the state of the app is an essential ingredient. The idea is that all visual representation originates from the current state i.e. if the state is changed the UI is likely to do as well.

In the Cocoa world this pattern is usually does not matter if you start a new project. There is some API like UIStateRestoring, but it will require some extra work.

I sat down and tried to build something that is super simple and maintainable. It should provide the following features:

1. UI should update if state changes
2. It should work well with bindings
3. There should be a way to back and forward navigation by using states
4. It should be possible to store and restore states e.g. for app relaunch
5. It should work per NSDocument

Ok, so first of all we need the state itself, I used my SeaObject implementation I wrote about before. Therefore it already covers the requirement “store and restore states” out of the box. Here an example:

@interface State : SeaObject
@property NSString *searchString;
@property NSString *currentViewID;
@end

In this simple example we would store a search string and a pointer to the currently visible view controller.

Now we need to put that state somewhere. NSDocument seems to be ideal for that. To access it from any view controller we create a sub class of NSViewController we will use throughout the project and add a property called document to it. The following code will set it for us:

- (void)viewWillAppear {
    [super viewWillAppear];
    self.document = self.view.window.windowController.document;
}

- (void)viewDidDisappear {
    self.document = nil;
    [super viewDidDisappear];
}

We can now access the state via self.document.state or even bind values to it. In the demo code we added a little helper for observing state changes, which can be used like this (for the keyPath trick see this blog article) :

[self observeKeyPath:keyPath(self.document.state.searchString) action:^(id newValue) {
    [self performCustomSearchWithString:document.state.searchString];
}];

That’s basically it, just the navigation is missing and this is super easy if we start to store the states into a custom NSUndoManager. These are the two methods needed:

- (void)restoreState:(State *)state {
    [self storeState];
    self.state = state;
}

- (void)storeState {
    if (![self.state isEqual:self.lastStoredState]) {
        self.lastStoredState = self.state.copy;
        [self.stateStack registerUndoWithTarget:self
         selector:@selector(restoreState:)
         object:self.lastStoredState];
    }
}

Now calling [self.stateStack undo] will restore the state to what it was when you called storeState the last time. This way you can have your marks for when it makes sense to store a state.

I would love to get your feedback on that approach. Of course I’m not the first to reason about states, see e.g. obj.c App Architecture for other approaches.

Since macOS 10.14 Mojave different visual modes like dark and light are available for the desktop. Native app developers can use named system colors to get the best fit for both semantic colors (like “window background”, “secondary label”) or plain colors (like “red”, “green”).

To adopt these colors for web development it is useful to get access to their color values for use in CSS. That’s what my new project DesertColor at GitHub is providing.

dessertcolor.css contains these extracted colors. With <html data-mode="dark"> the dark variant is used, otherwise the light one. The colors can be accessed by their name:

body {
    color: var(--label-color);
    background: var(--control-background-color);
}

But be aware, that Dark Mode in Mojave is not only about plain colors and that there is more like “Desktop Tinting” or “Translucency”.

Certainly any macOS or iOS developers have used a framework in their project and Cocoapods makes it even easier to use 3rd party ones.

But did you create one yourself?

You really should, because it has some great advantages:

1. Structure
2. Reusability
3. Stability

Structure

The benefit I like the most is that creating frameworks of certain areas of your code base forces you to precisely separate it from the rest of the code. Often the code - especially old and long grown one - has references to different parts of your project. Creating a framework is giving the opportunity to clean that up and ask yourself: “Does this still make sense this way?”

The outcome of creating a framework should also be to get a clean and minimal API. Minimal in the sense of: “What is it that is really required to execute that functionality?” You’ll be surprised how simple things may become.

Reusability

The main purpose of a framework is to reuse it over again in other projects. This indeed makes a lot of sense and can pay out for the upfront investment of creating a framework in the first place.

For example I have some code that provides logging and debugging features I like to use as my basic toolbox. It also contains categories for objects I need all day, like string manipulation or date parsing and formatting. That is my first import on a new project. And also other frameworks I wrote use this base framework as well.

Stability

A project should always be free of warnings and errors, otherwise you’ll not notice if some little problem that already showed up as a warning - which you ignored because it was hidden under dozens of others - causes you headaches a while after. But sometimes it is hard to get rid of warnings, because they would require a lot of workarounds or live in third party code you don’t want to touch. In your own frameworks just turn these warnings off, once your code ist stable and will not get changed any more.

Writing test suits for frameworks make sure you cover their functionality completely. You can focus on the single thing it is supposed to do and tests will not float around in a list of others in one big main project.

Real Life Example

As a real life example I would like to talk about my projects PDFify and Receipts. PDFify was actually made to have a test environment for my OCR and PDF features I offer in Receipts. I separated OCR, PDF extraction and creation, Mail Parsing and the Scanner Interface and made a framework for each of them. I was able to write test cases specific to the different topics thus having a minimal functionality I can focus on. I can even reuse most stuff for iOS as well or for future projects to come. Sharing the code with other developers is also much easier this way.

macOS

I found it easier to add all frameworks to the main project, even if a framework used sub-frameworks. The problems I ran into were related to signing.

iOS

Frameworks finally got better support on iOS as in the early days, but there are still some pitfalls to care about:

• If you use categories you should set OTHER_LDFLAGS = -all_load -ObjC
• Dynamic frameworks don’t work well, set MACH_O_TYPE = staticlib

Debugging

Frameworks also work great with HockeyApp (I know, this service is going to get replaced, but it is still first choice for me right now). Get more info here: https://web.archive.org/web/20190606064807/https://support.hockeyapp.net/kb/client-integration-ios-mac-os-x-tvos/how-to-solve-symbolication-problems

After putting some energy into optimizing my websites receipts-app.com, pdfify.app and holtwick.de I’d like to share my experiences/.

Defer Scripts

Putting defer into script loading tags will load the scripts when the DOM is ready and in the order they appeared in your HTML. Put them in the head so the browser gets to know about them early and can already start loading while the rest of the page is still to be loaded and prepared.

But be aware that JS object might not be available for inline scripts. For example if loading jQuery using defer the $ will only be available after DOM loaded! So best approach is to wrap inline script like this:

window.addEventListener('load', () => {
  // Your code
})

Inline CSS

The page should start rendering only when the CSS is loaded to avaiod flickering effects. It is hard to tell which CSS styles are really used by a page. Usually the custom CSS is not super large, so consider inlining it to avoid an additional request and have it ready eraly.

CDN

Even though you are not using a CDN (Content Delivery Network) for your website itself it can speed up if you use it for common CSS and JS like jQuery or Bootstrap. But if the rendering does not depend on JS code, it is also absolutely ok to serve from the same server as the page.

Remember the defer tip from the beginning, it will also work for those

Minification

Of course reducing the size of files is always a good idea for production sites. UglifyJS does a good job for JS and

If the resulting CSS isn’t to big it absolutely makes sense to integrate it into the HTML header, which will improve the “first meaningful paint” benchmark and thus giving the user the impression the page loaded much faster.

Image Optimization

Dropping image resource on ImageOptim will usually have good results on reducing their file sizes which also helps speeding up page load.

Using more modern image types like WEBP is also possible but requires more changes in the HTML like using <picture> element etc. and will not be supported by all browsers yet. The work might not we worth the benefit right now.

Lazy Loading

Not everything needs to be available on the first step. With some Javascript magic image loading might be a good thing to defer. But also 3rd party integrations like embedded YouTube videos or Disqus discussion groups don’t need to be loaded immediately. On receipts-app.com for example I provide an offline search, which also only loads if the user types some words. The user experience is usually still the same.

Google Analytics

Tracking etc. should not slow down you page loading. Put it just in front of the closing </body> tag.

Reduce Waiting on Server Side

While optimizing all the details of the page you might forget about the server side. If you see a big “Waiting Time (TTFB)” in your Network Inspector this might be due to things going on on the server.

For example this could be a PHP script connecting to a database. I recommend profiling the PHP calls, which is simple using XDebug and and IDE like IntelliJ. In my case I opened the database without needing to. Another quick fix was to open MySQL via 127.0.0.1 instead of localhost.

Don’t forget configure a caching policy for your site that makes sense. Also compress the outgoing traffic, especially the HTML.

Check the Results

To see if the optimizations had an effect you could e.g. use the following tools for measuring, just to name a few:

• Google Lighthouse
• Pingdom Tools

Static Website Builder

For my own projects I use my own static web site builder: SeaSite. It does all the repeating tasks for me and is easy to maintain. Read more about it in this blog post.

Recently I see some discussion about Electron on macOS (John Gruber, Dave Verwer). I have some experience in the field and will share my view on the topic and a practical introduction here.

Why web technologies?

In general web technologies are a de facto standard, not only in classic web browsers. There are some valid reasons for that:

• It is cross platform
• It is simple to learn and the majority of developers had contact with HTML, CSS and Javascript
• It is a mature, stable, powerful and feature complete** environment
• It is “the internet”
• It is cheap

So it takes no wonder to understand that developers, but also product managers, have some sympathy for the platform.

About Electron

As soon as server driven service wants to create a desktop application it seems natural to start an Electron project and point to the service’s URL. This of course has no additional value for the user besides having the app in the Dock.

But Electron can do more, as Visual Studio Code and others demonstrate. As soon as the app makes use of the file system, native menus and other features, it comes closer to a real desktop app.

The look and feel these days isn’t that important anymore since the skeuomorphic design world transformed into a flat one.

But there are some disadvantages as well:

• Size: The distributed app package comes with the whole browser engine included
• Security: You need to trust Electron which builds on Chromium which is maintained by Google
• Performance: Even though web technologies became ridiculous fast they are still slow in some area. You can add native modules for such tasks to Electron, but then you already left the comfort zone.
• Desktop: It only works on macOS, Windows and Linux. For iOS and Android you need to look out for other solutions, which of course exist.

How to use WKWebView

I recently started a new project and also had to make a decision of which technologies I’d like to use. I had written many pure native apps like my latest ones Receipts and PDFify, but I have to admit I like the latest Javascript Syntax very very much.

Since I have a lot of code I would like to reuse (OCR, Scanner Dialog, Share Extensions, PDF Logic) I really just need it for the UI. So Instead of taking Electron and trying to put my stuff in there, I have chosen to use WKWebView and here is my story:

Bridging

First of all I need to set up a connection between the native (Objective-C) and web view (Javascript) sides, which I named: Bridge.

Sending to Javascript is easy as calling evaluateJavaScript:completionHandler: For the other way I use WKScriptMessageHandler.

As you can see there is some asynchronous code involved and this is, where my bridge code comes into play. It defines some loose protocol of how the data that is send needs so be structured, for example:

{
  "action": "fetchData",
  "responseAction": "tmp-123",
  "payload": { "skip": 0, "limit": 100 }
}

This would basically work in both directions and mean, that fetchData should be called and the response be send to responseAction. These actions will registered with the bridge code. Their return value will be the payload for the response call. The response actions will temporarily be registered and deleted after successfully having received a response or having reached a timeout.

Native UI

Using this technique it is quite easy to trigger native things like menus or popovers. I can also easily access my existing components. Also, all the database handling is done on the native side.

Custom schemas

This works well for data that does not exceed some Kilobytes, but for providing images it would slow down the process. Therefore, I also implemented WKURLSchemeHandler, not only for images but also for the HTML pages that make the basis for the web app part.

Another nice benefit from it is that it can be used to trigger heavy computation resulting in large data. In the case of OnePile I use it to render PDF on the fly to PNG.

JSContext

But Apple does not only offer WKWebView for hosting Javascript, it also provides the slick JSContext for headless code. I also make use of that for example to extract data from the notes to build the full text index on the native side.

With some fine-tuning you can nicely catch exceptions and pass logging to the native log for better debugging experience. I was also able to add support for require to dynamically load modules into the JSContext.

macOS & iOS

And the best: all this applies to iOS as well as to macOS. You can actually reuse the whole glue code. With Electron it is also all or nothing where with this approach you may decide view by view if you want to use it or not.

Vue.js

For the discussion about Electron and WKWebView it does not matter, which frameworks to use on the web side, but I just want to express my love for Vue.js here 😍 For a macOS developer used to bindings this is a nice and powerful tool to feel right in the shiny web world.

Try yourself

Would you like to see it in action? No problem, you can, by subscribing to the early preview of my new app Collect:

Subscribe for preview of OnePile App

Update 2018-12-27:

This article has received great feedback on Hacker News with very interesting and often profound discussions.

In the previous version of this article I said, Electron is based on Chrome which is owned by Google, which was not correct. It is based on Chromium which itself is the basis of Chrome, but the influence of Google on the code is still strong. Even though I don’t think Google is intentionally putting bad code into the project my intention by mentioning this point was, that the code basis is so large that usually nobody using it for a web project would ever do a code review before using it. The same of course applies to WKWebView, but since it is part of the operating system Apple ships, I think if you trust the OS at this point you can trust this component as well.

One argument I often heard has been: Your approach is not cross platform. And indeed this particular native implementation only works in the Apple ecosystem. Similar approaches in other environments can be achieved with reasonable effort. Projects like Cordova or Capacitor are built this way and there are more examples available to start with. But this is just a thin layer and the web code is the one that will grow and this is truly cross platform. In case of OnePile I might even build Windows and Linux clients on Electron first, but the web code will still stay the same for all destinations apart from some glue code for UI like menus.

Since the beginning I have been using and loving HockeyApp, because it was made by very skilled developers who exactly knew what makes the live of a developer easier. It started with symbolicated crash reports, which previously were difficult to get and improved the overall quality of software products that integrated and still integrate with it.

Success attracts buyers and so HockeyApp was acquired by Microsoft and is now transitioning to their own platform called AppCenter, which will certainly do a good job in the future but isn’t yet where HockeyApp is right now.

Sentry

I took that as an opportunity to look out for alternatives and found Sentry. First of all it is OpenSource and can be installed on premise. But usually you will go with their service which comes with a reasonable pricing.

It has a nice and clear web interface and supports everything I need, especially Objective-C and Javascript, which is a great fit for my Electron alternative.

Integration with macOS / iOS

The integration is easy e.g. by using their CocoaPod. With a few lines of code and providing the DSN of your project you can send Events. In my case I also wanted to let the user decide if he is ready to share the data and therefore added an NSAlert in the setShouldSendEvent block, which looks similar to this:

[SentryClient.sharedClient setShouldSendEvent:^BOOL(SentryEvent * _Nonnull event) {
    __block NSInteger ret = 0;
    dispatch_sync(dispatch_get_main_queue(), ^(void) {
       NSAlert *alert;
       // ...
       ret = [alert runModal];
    });
    return ret == NSAlertFirstButtonReturn;
}];

With some more code the user sees this:

Support

What I liked a lot at HockeyApp was their feedback dialog which allowed the user to give information about what situation lead to the problem and that I could begin a dialog with them and involve them into beta testing the fix. Mainly I did this using the great support tool from my friends at replies.io. I wrote about Replies earlier in this blog.

So my goal was to integrate replies.io again with my new Sentry setup and this is what the Send and Support button is doing. It opens the support for of replies.io and the user has the chance to get in contact and provide more info. The link between the ticket on Sentry and the one on replies.io is the userId set for both services, which is a unique ID per client.

Errors

Another aspect I changed while integrating the new service, was the tracking of errors. I’m referring to those errors you would usually write to the log file and only see if the user sends the log. This is very valuable information that you should use to improve your software.

I’m using a logging framework, which I described earlier here in this blog. So the most natural thing to do to hook into the logError part and create an event for Sentry:

- (void)logLevel:(SeaLogFlag)level file:(const char *)file function:(const char *)function line:(NSUInteger)line context:(NSString *)context message:(NSString *)message {
    int slevel = 0;
    if (level == SeaLogFlagInfo) slevel = kSentrySeverityInfo;
    if (level == SeaLogFlagWarning) slevel = kSentrySeverityWarning;
    if (level == SeaLogFlagError) slevel = kSentrySeverityError;
    if (slevel) {
        SentryBreadcrumb *bc = [[SentryBreadcrumb alloc] initWithLevel:slevel category:@"log"];
        bc.data = @{ @"message": message ?: @"",
                     @"file": [NSString stringWithFormat:@"<%@:%@>", @(file ?: ""), @(line)]
                     };
        [[SentryClient.sharedClient breadcrumbs] addBreadcrumb:bc];
    }
    if (level == SeaLogFlagError) {
        [SentryClient.sharedClient snapshotStacktrace:^{
            SentryEvent *event = [[SentryEvent alloc] initWithLevel:kSentrySeverityError];
            event.message = message;
            [SentryClient.sharedClient appendStacktraceToEvent:event];
            [SentryClient.sharedClient sendEvent:event withCompletionHandler:^(NSError * _Nullable error) {
                ;
            }];
        }];
    }

You might notice the breadcrumb object. This is the way to pass logging info to Sentry, which I do by creating breadcrumb objects for log on the info and warning level.

Symbolication

In order to get the most out of the stack trace the service should symbolicate the crash report and show the line numbers, where the problem originated. HockeyApp had its own awesome macOS app doing the job. But Sentry also provides a command line tool that integrates well with the archive step in Xcode and confirms the upload with a notification:

Integration with Javascript

The same applies to Javascript. The integration again is straight forward, but I encountered one problem, because I was using it in WKWebView. But setting the transport option fixed the issue for me:

Sentry.init({
  // ...
  transport: Sentry.Transports.FetchTransport,
})

It is also important to get the release right. With some wepback and process.env tricks it worked quite well to get the version info from package.json as release information in the distributed code.

Of course you should upload your SourceMaps to Sentry to get the most out of the errors. Also the breadcrumbs will automatically be generated from the console.xyz calls.

What I learned

I enjoyed modernizing my crash and error handling code and infrastructure and finally get more valuable info out of the logging data. I am also happy to have found a good way to respect my users privacy and leave the decision to them if they would like to share their data or not, since my products may contain sensitive data and therefore it is important to win the users trust.

Sentry seems to be a good alternative to HockeyApp. I would have stayed with HockeyApp, but since they are migrating to a new platform, I felt like some effort to put into migration for my projects would have come anyway, so why not doing it right now. That Sentry is OpenSource is another plus on the list.

If you would like to see it in action - although I hope you’ll never need to see the dialog 😉 - please try my products:

• Receipts
• PDFify

Universally unique IDs are great. Used in a database in place of the primary key you don’t need to care for conflicts anymore, if more than one application instance is involved. But also inside an app they are comfortable object identifiers.

In general the version 4 described in RFC 4122 is used, which is composed by time related data and random bytes. For macOS and iOS NSUUID provides a simple-to-use interface. For Javascript projects node-uuid is widely used.

A drawback is that it is usually is used in form of a string. An incrementing integer instead is very likely managed more efficient and faster by databases and systems.

UUIDs are mostly presented in a hexadecimal notation like f81d4fae-7dec-11d0-a765-00a0c91e6bf6 which is a 36 characters long string. In binary representation it is 16 bytes or 128 bits long. For most environments this does not fit into a regular integer type anymore.

Since each byte counts if you have lot of data it makes sense to put some effort into reducing the size. Stripping the - already saves 4 bytes. But to safe most, without getting into difficulties about string encoding and the like, Base64 looks like a good choice.

But characters like + and / and = become painful when used in URLs or as file names. So let’s replace + by - and / by _ as Python does for ages already. Then strip the trailing == and we get a 22 characters long string, which is 1.375 times the size of the most compact representation in binary form and significantly smaller than the original hex representation.

Here is the implementation in Objective-C:

+ (NSString *)uuid {
    uuid_t uuid;
    [NSUUID.UUID getUUIDBytes:uuid];
    return [[[[[NSData dataWithBytes:uuid length:16]
               base64EncodedStringWithOptions:0]
              stringByReplacingOccurrencesOfString:@"=" withString:@""]
             stringByReplacingOccurrencesOfString:@"+" withString:@"-"]
            stringByReplacingOccurrencesOfString:@"/" withString:@"_"];
}

And this one if for Javascript:

import uuid from 'uuid'

const rxUUIDReplace = /[+=\/]/g
const mapUUIDReplace = {
  '+': '-',
  '/': '_',
  '=': ''
}

export function UUID() {
  const array = []
  uuid.v4(null, array)
  return toBase64(array).replace(rxUUIDReplace, m => mapUUIDReplace[m])
}

Happy uniqueness ;)

Everybody is talking about Marzipan and the amalgamation of UIKit and AppKit. This step is a logical consequence for Apple. But this is still just beneficial for the Apple universe and cross platform is much more than iOS, macOS, tvOS and watchOS.

I write macOS and iOS apps for over a decade now, but for my latest project I decided to choose a different approach. I decided to use web technologies in the front end, as I described in this previous article. You might say: Oh, you are using Electron and Cordova. Well, almost.

Instead of using existing web app wrappers I wrote my own. This might sound stupid, but it has some benefits. First of all the footprint on disc of these apps is much smaller. Then I have full control over native features, even the newest ones. And I can reuse a lot of existing native code as well.

For the front end I use HTML, CSS and JS. If you did not use it for a long time you will be surprised how much it has matured over time. Javascript in its current form of ECMAScript7 (ES7) and later has evolved to a super powerful yet sexy language. All the packaging is greatly performed by webpack, which you might refer to as the compiler of web apps.

But what indeed is a big difference is the fresh wind blowing in user interface concepts. ReactJS and VueJS are certainly the most production ready frameworks. You need to change your mindset in order to not try to reach out to a certain view and manipulate its properties. Instead you have a state and derive rendering of everything from it. The framework is doing updates in a smart and efficient way in a 60fps manner. This allows to split large project into smaller easier to handle pieces. And these little pieces can be reused on all platforms, even if the visual appearance has to be different.

For mobile devices I found a great UI framework called Framework7, which does a fantastic job. It comes really close to how the native UI looks and feels. But you benefit from the full flexibility of a web app. And you just need to set up the UI once and it looks great on both iOS and Android out of the box.

So for now I’m super happy with this approach.

Most CSS Frameworks offer a layout system based on columns for creating text and content based websites. But for a single page web app the requirements are different. App development frameworks offer various techniques to structure the contents of a window, a simple yet powerful one is stack based view layout.

Let’s start with a common example that you might find in a mail or notes app. You have multiple columns like a sidebar, a document list, a content area. The list might also have a search field. An additional column to the right gives detailed information.

<div class="app">
    <div class="sidebar">
        <div>Sidebar</div>
    </div>
    <div class="middle">
        <div>Search</div>
        <div class="list">
            <div>Item1</div>
            <div>Item2</div>
            <div>Item3</div>
        </div>
    </div>
    <div class="content">
        <div class="menu">
            Content related menu
        </div>
        <div class="text">
            Text
        </div>
    </div>
    <div class="info">
        <div>Info</div>
    </div>
</div>

Each group has a different orientation for its children. All children of app are placed horizontally. Those of middle and content are vertically. We will introduce hstack and vstack CSS classes that will define the appropriate layout by using flex box. This is the code in SCSS:

.app, .hstack, .vstack {
  display: flex;

  &, > * {
    flex: none;
    overflow: hidden;
  }
}

.app, .hstack {
  flex-direction: row;
}

.vstack {
  flex-direction: column;
}

The default for flex is auto which means, everything grows and shrinks as required. But we instead want to give some columns a fixed width or height and flex: none will do that. For those elements that we want to grow or even be scrollable, we will add the following options:

.-grow {
  flex: auto;
}

.-scroll {
  overflow: auto;
}

Now we can add these options to list and content like this:

<div class="content -grow -scroll"></div>

That’s basically it. You will find a demo at JSFiddle here. It also shows how to add separators and how to prepare html and body correctly.

I’d like to share some interesting findings I made while implementing a cross platform crypto format.

Basics

Usually you will need these features from a crypto implementation:

1. Random data generation
2. Checksum and HMAC calculations, like using SHA2
3. Key derivation from a password, like using PBKDF2
4. Encryption and decryption, like using AES

This is a pretty basic set of requirements and most crypto implementations support these. But as always the devil is in the details, because if you make a small mistake you will just get a wrong result and this result will not help you find the cause of the bug. It is wrong or it is right. Basta.

Binary Data

So cryptography is applied on raw binary data. This may already be the source of troubles:

• Did you use the correct encoding, like UTF-8?
• Is the implementation of your Base64 and Hex helpers correctly working?
• Is there a good way to concatenate data or slice it?

On iOS and macOS you will usually use NSData which is fine. In the Javascript world you will soon be in trouble. If your target is node.js you can use Buffer which is quite nice, but on Web you will find yourself using Uint8Array pretty soon, which has no nice native toolset for converting between UTF-8 strings, hex and base64 presentations.

IV and Salt

Random data makes it harder for an attacker to crack encrypted data and passwords, so using initialization vectors (IV) for encryption and a salt for password generation is a good practice.

But IV support on node.js is totally broken and ends in an exception for certain circumstances. I was pretty surprised about that, but I was not able to find a workaround, which made me switch to WebCryptography.

Another trap you can fall into eventually while testing is exactly this randomness of IV and salt if you forget to preset those in your test cases, because the result obviously will always differ if different random elements are created. Sounds obvious, but will happen ;)

Choosing Algorithms

You will read a lot about which algorithms are the best, but in real life you’ll end up with taking what is there and implemented on all platforms you are targeting.

For checksums SHA256 and SHA512 are standard. For keyword derivation you will usually only find support for PBKDF2 everywhere. For symmetric encryption the standard is AES. But it comes with different flavors. I found CBC was a good compromise that is available almost everywhere. CTR is also pretty widely supported.

Package the Secret

Ok, you now have what you need and start happy encryption. It would be great, if all you need were self-contained, but usually it is not. You will need to store the salt somewhere to rebuild your key and you will also need the IV to decrypt your data.

So let’s store the IV with the encrypted data, like: IV + cipherText = package.

But we should also make sure the data cannot be manipulated, therefore we add an HMAC over the data of the previous package and add it as well: IV + cipherText + HMAC = package.

That’s nice. Now you can use the handy tools I mentioned in Binary Data to deconstruct it for decryption ;)

Warning

I’m not a crypto expert and I’ll be very happy to hear your feedback about it e.g. on Twitter @holtwick.

I love Vue.js from Evan You and I like static websites. Of course there are already solutions to combine these two passions like VuePress or Nuxt. But would I be a programmer if I would choose this simple way?

Of course I wanted to get to the bleeding edge and was quickly inspired by Evans newest coup: vite. It throws the ballast of the webpack overboard and does everything right. First I tried my luck with it and vitepress, but unfortunately that was not quite what I was looking for.

So I took a step back and looked at the classics of static website generation: Gatsby, Hugo, Jekyll and 11ty. They did everything right too, but everything didn’t come off the shelf as I would like it to. Especially since I had already built my own solution for SeaSite, with which all my websites were generated.

What do I want?

But what was it that I wanted? I have found out the following points for me:

1. Speed: I want to make changes in the code like I did with Vue.js and see the result immediately in the browser.
2. Flexibility: I would like to be able to influence every aspect of the code myself and be able to program. Preferably in Javascript.
3. Post processing: I would like to be able to easily adjust content after it has already been calculated. This was the core principle of SeaSite, which allowed me to optimize images and videos afterwards, but also to run translations of text passages for different language versions.

How do I do it?

Well, at point 1 I had already discovered esbuild in vite. It is so incredibly fast that I could not believe it. The result is also reliable and exactly as it should be. esbuild was set as a tool that I wanted to use.

So I first built a small Node.js script that transpiled a Javascript file. I also built a small library to register routes. The generation of the content should be done on-demand when the website is requested by a simple Express.js webserver. To generate the static pages I would simply generate and save the content for all registered routes. This worked great and took only milliseconds.

Quickly I wanted to have the comfort of vite, i.e. when files change, the browser reloads immediately. With Chokidar I could watch the folder with the JS files and recompile everything via esbuild. With a little trick, the import cache of Node.js could be bypassed and the new JS could be loaded and executed. With socket.io a reload mechanism for the browser was quickly assembled.

Now everything should become more beautiful!

I had now finally caught fire and there was no turning back. Then it could also become more beautiful :) Unfortunately I didn’t succeed in integrating Vue.js at the first go, but I also doubted if this would make sense at all. In SeaSite I had already used JSX and JSDOM. For another project I had already written a DOM abstraction, which is very lean. I now extended it in a way that HTML and XML could be generated easily with JSX.

This made it possible to manipulate the content with simple DOM actions. But how much nicer it would be, if the corresponding nodes could be found by CSS selectors. So I also implemented the css-parse and it worked fine.

Also a markdown parser was already available from SeaSite and was only extended to provide meta data for the registration of routes while maintaining the pleasant speed.

Open Source!

So now everything was on board that was needed and it was time to create a simple unified structure to publish the project. A first goal was to describe the routes with simple data structures to get maximum flexibility. For common formats like HTML, XML, JSON, text and assets convenient methods were created.

Since everything had the appearance of a web server anyway, which can also spit out static pages, it was obvious to adopt the smart middleware pattern of Koa.js. This way, templates and plugins are easy to realize. A copy of the data structure mentioned serves then as context and the result is expected in the property ctx.body.

Here it is now, the final project. I would be very happy about help and ideas. Maybe it is not the greatest tool to create static websites, but maybe it is the basis for an even smarter solution that builds on it.

github.com/holtwick/hostic

https://www.npmjs.com/package/hostic

In the coming posts I will further explore some of the issues that arise when creating a website and how they can be solved with Hostic. The list of current ideas on topics:

• Building a simple static website with Hostic
• Building a blog with Markdown
• Building a multilingual website and localization
• Optimizations for search engines and accessibility
• Hosting: Beaker Browser, see…

These websites are already driven by Hostic:

• https://pdfify.app
• https://holtwick.de

Last year I started video chat projects. First peer.school with which I wanted to contribute to the education of younger children. Then from that Brie.fi/ng, which focuses on secure communication.

Briefing in particular has found many friends on Github and is now available in several languages, including Chinese and very recently Russian.

The project has a very simple design and uses the Javascript framework Vue. All the necessary functions are available, plus even such exciting features as hiding or swapping a person’s background.

Some native apps are also available, but among them the iOS App with support for AppClips (enter rooms via QR code or NFC transmitter) is especially worth mentioning.

Embedding

Besides sharing a URL to enter a shared room, there is also the possibility to embed Briefing directly into your own website. A simple IFrame makes it possible, like this one:

<iframe
  src="https://brie.fi/ng/cool-call-62?audio=1&video=1&fs=0&invite=0&prefs=0&share=0"
  allow="camera; microphone; fullscreen; speaker; display-capture"
></iframe>

For easy configuration, there is now an IFrame Tool where anyone can quickly configure their code themselves with a few clicks:

If you want to have full control, you can also install all the components that are necessary for operation yourself. Instructions can be found in the README on Github.

Commercial license

Briefing is open source, but under the EUPL v1.2 license, which is a European answer to the GPL. This means that changes have to be published under the same license.

However, if it is desired not to publish changes, it is certainly fair to acquire a commercial license that offers these freedoms. Everything about this can also be found in the README.

Future

Currently I’m working on a third product that should follow in the footsteps of Briefing. The focus is on better scalability, privacy and encryption, and relatime collaboration. The development is already well advanced. More about that soon here…

Three weeks ago, I published a sandbox to keep the AI somewhat in check. The built-in safeguards that Claude Code offers, for example, seemed untrustworthy to me, since they could usually be overridden by my instructions to the app. On top of that, I had a very uneasy feeling because sensitive information like SSH keys or project-specific confidential data in .env.local wasn’t inherently protected from the tools’ access.

When I looked around at the available options, most of them seemed quite complex or restricted my workflow — for example, working inside a Docker environment. I had something in mind that would be as simple as using .gitignore. So I got straight to work — ironically with the AI — building a cage for it.

We decided to use Apple’s macOS sandbox functionality. In principle, the restrictions I had specified in .bxignore simply needed to be translated into sandbox instructions. One feature that was important to me was the ability to also protect my development environment, since sensitive operations usually happen within the IDE — in my case, Visual Studio Code.

It quickly became clear that the ignore file alone wasn’t enough. I added a configuration that could accommodate the specifics of each application being used. This also allowed me to grant access to multiple directories, so I could work on several projects simultaneously. For this reason, I introduced a ~/.bxconfig.toml.

I can now type bx projects to launch my development environment. Visual Studio Code opens with access to my projects. Within those projects, all sensitive data is protected by .bxignore. On top of that, a global baseline configuration protects areas like .ssh and other sensitive locations. Neither the IDE nor the tools invoked within it — such as Claude Code — can access this data.

After a while, I decided to use Visual Studio Code exclusively for AI work and installed the more open VSCodium alongside it for everything I didn’t want to do with AI, because it’s really hard to fully “clean up” VSCode.

Of course, none of this provides 100% security, but it doesn’t have to. It offers enough protection to not feel completely exposed, and it barely restricts the usual workflows. For me personally, it’s a great fit, and I’d be happy if others found it useful too.

Give it a try:

brew install holtwick/tap/bx 

If you work with AI-powered coding tools today — be it Claude Code, Copilot, or Cursor — you quickly get used to the productivity boost. What’s easy to overlook: these tools have full access to your entire file system. Every command the AI executes runs with the same permissions as you.

That might be fine for a hobby project. But if you’re handling client data, have license keys on disk, SSH keys for production servers, or simply private photos in your home directory — at some point, you start feeling uneasy.

The Existing Options

Of course, there are ways to protect yourself:

Docker containers offer good isolation, but they’re cumbersome for typical macOS development workflows. You need to mount volumes, configure IDE integration, and the workflow never feels quite native.

Claude’s built-in restrictions — the tool politely asks before modifying files. But “asking” isn’t protection. A hallucinated file path, a misinterpreted command, and suddenly the AI reads something it shouldn’t have seen. The trust is based on the model’s behavior, not on a technical barrier.

VSCode Workspace Trust protects against automatic code execution, but not against file system access from a terminal or an extension.

None of these solutions really convinced me.

The Idea: Use the macOS Sandbox

macOS ships with sandbox-exec, a kernel-level sandbox that Apple itself uses for App Store apps. The idea: a tool that launches any application so it can only see the current project directory — and nothing else.

The result is bx. A CLI tool you put in front of your actual command:

bx claude ~/work/my-project

That’s it. Claude Code starts with full access to ~/work/my-project — but ~/Documents, ~/Desktop, ~/.ssh, other projects, and everything else in the home directory is invisible.

Built in Two Days — with Claude Code Itself

The ironic part: bx was built entirely with the tool it’s designed to protect against. In two intensive days, Claude Code wrote the bulk of the code — from sandbox profile generation to CLI argument parsing to app discovery via macOS Spotlight.

It worked surprisingly well. Claude knew the (undocumented!) Apple Sandbox Profile Language and correctly handled its quirks — for instance, the fact that deny rules in SBPL always take precedence over allow rules, regardless of order. This means you can’t simply lock down the entire home directory and then add exceptions. bx solves this by scanning the home directory and selectively blocking only sibling directories.

More Than Just Claude Code

bx isn’t limited to one tool. It supports VSCode, Xcode, Terminal, and arbitrary commands out of the box. Any app can be added via a TOML configuration file:

[apps.cursor]
bundle = "com.todesktop.230313mzl4w4u92"
binary = "Contents/MacOS/Cursor"

The tool finds apps automatically via their macOS bundle ID — no hardcoded paths needed. And if you regularly work with the same projects, you can configure default directories per app:

[apps.code]
workdirs = ["~/work/project-a", "~/work/shared-lib"]

A simple bx code then opens VSCode with exactly those directories — sandboxed.

Fine-Grained Control

What makes bx especially practical: you can hide files even within an allowed project directory. A .bxignore file in the project works like .gitignore:

.env
.env.*
*.pem
secrets/

This keeps environment variables and certificates invisible, even when the project directory itself is fully accessible.

With bx --dry you can preview exactly what will be protected — without launching anything. It gives you a clear picture of the actual isolation.

The Growing Attack Surface

What many people underestimate: modern AI coding tools are far more than chat interfaces. Claude Code, for example, can execute shell commands, create and delete files, and access external services via MCP servers (Model Context Protocol) — databases, APIs, cloud infrastructure. On top of that, there are skills and hooks that can trigger actions automatically.

All of this happens in the user’s context, with their full permissions. bx’s sandbox operates at the kernel level: whether it’s an rm command, an MCP tool, or an automated hook trying to access ~/Documents — the operating system blocks the access before it even happens. This is fundamentally different from a software-level restriction that could be bypassed.

Important to note: within the allowed project directory, everything is permitted — that’s intentional, otherwise you couldn’t work. If you have sensitive files there, you can selectively exclude them via .bxignore.

Being Honest

bx is not a high-security vault. sandbox-exec is an undocumented Apple API that could change with any macOS update. There’s no network protection — API calls, git push, and npm install all work normally. And sandbox rules are generated once at launch; directories created afterwards are not automatically protected.

But as a pragmatic security layer for everyday development, it works remarkably well. It’s the difference between “the AI can theoretically read everything” and “the AI can only see this one project.”

That said, to be clear: bx was built with the best of intentions and to the best of my knowledge, but it comes with no guarantees. It’s not a replacement for a professional security solution, and it doesn’t absolve anyone from thinking for themselves. If you’re working with truly critical data, don’t rely blindly on any single tool — no matter how well it works. bx is an additional layer of protection, not a substitute for common sense.

Try It Out

bx can be installed via Homebrew or npm:

brew install holtwick/tap/bx
# or
npm install -g bx-mac

The code is open source: Codeberg holtwick/bx-mac GitHub holtwick/bx-mac

I’d love to hear your feedback, feature requests, and of course stars. And if you have interesting use cases — let me know!

This blog post was written by Claude (Anthropic’s AI) and reviewed and approved by me. Fitting, given the topic, I’d say.

…with our new Swiss army knife for e-invoices. Following the latest update, e-invoices can now be easily created online. Even with your own stationery and fonts. The result is a PDF that is compatible with all required standards, including EN 16931, XRechnung, ZUGFeRD and PDF/A.

The highlight: invoices that were previously created using Word or similar programs can be converted into an e-invoice in no time at all. Simply upload the PDF of the existing invoice, the values are read out as if by magic and the result is a standard-compliant e-invoice in ZUGFeRD format. This means that the electronic data has been embedded in the PDF as XML and the other technical requirements have also been met.

The result can be quickly saved and sent. But also in our Mac tool Receipts.

But that’s not all. Received e-invoices, whether XML or PDF, can simply be dragged into the XML2Invoice window and everything is readable and ready for payment or further processing.

As I said, the Swiss army knife of e-invoicing 😎

Write your first e-invoice now!

Update 2025-01-29: XML2Invoice is now called E-Invoice Space

After the successful launch of XML2Invoice, many new features and improvements have been added, so the renaming to E-Invoice Space is now taking place.

New layout

The space is now used more sensibly, with only two areas: the PDF preview and the input area. It is also possible to adjust the size ratio between the two areas. There is now a general division between reading and writing to better highlight the strengths of E-Invoice Space and simplify access to the functions.

Create your own invoices

In the Write area, in addition to enriching an existing simple PDF with e-invoice data, a completely new invoice can now be created. All the necessary data can be conveniently entered and a preview is generated immediately. In the PRO version, it is also possible to select an individual background design (stationery) and upload your own fonts in TTF format.

EN 16931 compatibility

E-Invoice Space now also meets the requirements of the EN 16931 standard, not just BASIC and MINIMAL as before.

Overall, the application has become more comprehensive and user-friendly, enabling quick results. As usual, everything takes place locally, so that the web application behaves like a locally installed application. No data is stored or transferred to a cloud service.

For every developer there comes the moment where speed matters. It saves you a relevant amount of time and keeps the flow going.

esbuild is definitely fast and reduces the built time significantly. And it is nice and simple too, when it comes to set up.

Build

It can be started from command line or nicely being integrated in a node.js script like this:

const esbuild = require('esbuild')

const options = {
  target: 'node12',
  platform: 'node',
  jsxFactory: 'h',
  jsxFragment: 'hh',
  bundle: true,
  outfile: 'out.js',
  sourcemap: 'inline',
  loader: {
    '.js': 'jsx',
    '.css': 'text',
  },
  entryPoints: [`${sitePath}/index.js`],
}

await service.build(options)

This will build a single JS file containing everything that is needed to run. It also translates JSX and uses the function h to create elements. It also loads files ending on .css as plain text. A source map will be written as well. All this is done in a fragment of a second! This is because esbuild is written in Go instead of Javascript, because speed matters sometimes.

Sitemaps

Speaking of source maps the same author of esbuild also wrote a module to support them on node: node-source-map-support.

Testing

Now the setup is almost complete, but how about testing? I usually use jest for testing and therefore I wanted to get it working here as well. The solutions available did not fit my case, therefore I wrote my own transform:

First make sure to tell Jest what to do in a package.json section:

{
  "jest": {
    "transform": {
      "^.+\\.jsx?$": "./src/jest-transform.js"
    },
    "testEnvironment": "node",
    "testPathIgnorePatterns": [
      "node_modules/",
      "dist/"
    ]
  }
}

The transformer looks like this:

// Inspired by https://github.com/aelbore/esbuild-jest#readme

const fs = require('node:fs')
const esbuild = require('esbuild')
const pkg = require('../package.json')

const external = [
  ...Object.keys(pkg.dependencies ?? {}),
  ...Object.keys(pkg.devDependencies ?? {}),
  ...Object.keys(pkg.peerDependencies ?? {}),
]

module.exports = {

  getCacheKey() { // Forces to ignore Jest cache
    return Math.random().toString()
  },

  process(content, filename) {
    esbuild.buildSync({
      target: 'node14',
      platform: 'node',
      jsxFactory: 'h',
      jsxFragment: 'h',
      bundle: true,
      outfile: 'out-jest.js',
      sourcemap: 'inline',
      loader: {
        '.js': 'jsx',
        '.css': 'text',
      },
      entryPoints: [filename],
      external,
    })
    const js = fs.readFileSync(file, 'utf-8')
    fs.unlinkSync(file)
    return js
  },
}

Competition

Why would you want to you use esbuild and not webpack, babel, rollup, etc.? Well, because it is fast and easy to use. The other solutions are blown up and become pretty complex after a while. They have many 3rd party dependencies, which can cause troubles as well.

If you want to experience the blatant acceleration, then try esbuild.

Photo by Traf on Unsplash

Initial situation

As a software developer, I face a fundamental dilemma: developing high-quality open-source software—such as my end-to-end encrypted video conferencing solution Briefing—requires a considerable investment of time and capital. Without sustainable funding, my only option is commercial exploitation, even though I would prefer to make the software completely free and continue to develop it intensively. This problem affects numerous developers in Europe.

Core idea

The EU should establish a permanent funding system that promotes open source development through performance-based remuneration. Specifically, I propose an EU-operated platform (comparable to GitHub or Codeberg.org) that distributes funding based on measurable success criteria.

How it works

The platform would evaluate the usefulness and quality of projects using objective metrics:

• Community engagement (ratings, stars)
• Technical reach (integration into other projects, downloads)
• Maintenance quality (responding to issues, fixing bugs)
• Documentation and support

Funding would be distributed proportionally, with upper limits per project/person to prevent abuse.

Benefits for all involved

• For developers: Direct link between performance and remuneration; opportunity to focus entirely on open source development
• For the EU: Building digital sovereignty; control over quality standards (e.g., EUPL licensing, developer verification); promotion of European innovation; reduction of dependence on non-European platforms
• For society: Access to secure, transparent software; strengthening of the European tech ecosystem

Conclusion

This initiative would create systematic incentives for the development of high-quality open source software while promoting European values such as transparency, data protection, and digital sovereignty.

I recently read about a “massive fake news machine” that the German Foreign Ministry claims to have uncovered (see below). It can hardly be distinguished from legitimate news.

It occurred to me spontaneously that if you are not able to stop manipulated news, you should at least be able to identify legitimate news.

The idea is simple: let’s create a digital network of trust using cryptographic means.

From here it gets technical…

The simplest form of signing is the calculation of a hash values. So let’s assume I want to tweet as @holtwick: “I don’t like fake news!” and my secret would be “Gurkensalat” (usually called “salt”). In the terminal it would go like this:

echo -n "@holtwick I don't like fake news! Gurkensalat" | shasum -a 256

Alternatively with OpenSSL:

echo -n "@holtwick I don't like fake news! Gurkensalat" | openssl dgst -sha256

The result is:

55bc8fe5493377787bfc0be29417fd692070dc8446b855d62a9fedca5b536d53

This can also be calculated before I tweet it. Then I take part of the result, e.g. the first 8 characters, and send it with the message, perhaps with a distinguishing feature such as a preceding ~ character:

Now it’s time to verify something like this. A small service on your own website would be conceivable. Here is a small example in PHP of what an online check could look like:

<?php 

// This one is top secret :)
$salt = "Gurkensalat";

// Normalize whitespace to avoid copy paste issues
$sample = trim(preg_replace('/[\t\n\r\s]+/', ' ', $_GET["text"])) . " " . $salt;

// Calculate SHA256 and only use the first 8 chars
$hash = substr(hash('sha256',  $sample), 0, 8);

// Compare hashes and return result
echo strcmp($_GET["hash"], $hash) == 0 ? "ok" : "invalid";
?>

The resulting URL would then be: https://holtwick.de/experiments/id.php?text=@holtwick%20I%20don%27t%20like%20fake%20news!&hash=55bc8fe5

Try it out:

Ok, that was a relatively primitive implementation to illustrate the idea. For a serious application, other techniques would certainly be used, such as a public key procedure or blockchains. Of course, there are already services that do something similar, as this overview from the Federal Network Agency shows.

Source

• DW (engl.)
• The Guardian (engl.)
• Spiegel (dt.)
• Tagesschau (dt.)

Starting point

The most valuable and most successful companies are IT companies: Apple, Google, Amazon and Microsoft. All based in the USA. China, another huge market, is the production site of most hardware, but also the seat of companies that successfully take the place of US companies: Alibaba, Tencent and more. Emerging markets also have their own market, where online business takes place. KaiOS is an example of an innovative model that is hardly known in the first world.

Where does Europe rank? There are no significant online platforms. Businesses and administrations make themselves dependent on software from the USA and hardware from China. Creative entrepreneurs and talented developers are migrating to the USA. In the long run, Europe will become less relevant as an innovator and remain an importer of technology. This is disastrous.

Europe needs a strategy and the political will to change this trend. But the potential and the resources are there to make Europe more independent in a changing global world. In the following I would like to present my personal thoughts on such a strategy.

Data

Europe should under no circumstances try to copy the USA or China. The existing successful solutions are basically centralized solutions. This means that services are offered, where the data of the customers are in the access of the operating companies. No matter how well the privacy promises on the websites can be read, de facto there is no protection of the data from the companies or the authorities of the country where the company is located - usually the USA or China.

Data is the commodity of the information age. The first difference that Europe should make in its strategy is the absolute protection of this data. Users should have full access and control over their data so as not to become dependent on individual companies. This can be achieved through decentralized solutions and strong encryption.

Platform

It must be possible to display and edit data. Computers, tablets, smartphones and, over time, other devices will be used for this purpose. It is important which operating system is used, because this is the foundation on which all solutions are built. Microsoft, Google and Apple have a [monopoly] (https://de.statista.com/themen/783/betriebssysteme/), all of them based in the USA. Europe should focus on its own free platform, with Linux and Android as a first starting point.

But besides the operating system, another secret operating system has emerged: the web browser. Originally a European invention, it has revolutionized the access to information on the Internet. In recent years, complexity has increased and most computer services can now be accessed using web technologies. The programming is easy to learn and the knowledge of it is widely spread. Now with WebAssembly there are no real performance problems anymore.

Europe should take advantage of the fact that there is the proven web platform. However, after the weakening of Firefox only one browser engine is relevant and this is controlled by Google and Apple. Europe should develop its own open engine in the short term, for which Servo is the obvious choice. In the long term the operating system as a whole could be replaced by a web engine, following the example of Google Chrome OS.

Hardware

It is also important to be able to trust the devices themselves. In many chips there are own small operating systems, which take over important functions and normal developers do not have access to the internals. It is important to become more independent in development and production, preferably with an open approach. Why shouldn’t several hardware manufacturers produce the same type of chips? ARM is a successful model in this area. Unfortunately I don’t know enough about this topic to be able to go into more detail. But I think it is important to create a basis that can be trusted and that is not monopolized.

Software

The public sector, i.e. administrations and authorities, should be obliged to use and develop open source software. Any solution developed with government funds must be freely and openly accessible and must be able to be operated without limits and free of license costs. The money currently spent on licenses for Windows in Europe alone should be enough to promote software development. Contracts for development and maintenance should in turn be awarded in Europe in order to stimulate and build up expertise and markets here.

Education

Both education in dealing with IT and the transfer of knowledge through IT should be strengthened. Especially in times of Corona, the deficits have clearly become apparent. The needs for an educational infrastructure are certainly comparable throughout Europe, but there is no common effort to find a solution as far as I know.

In the area of learning materials there are now various solutions, for example in Germany Anton App, Musste Wissen or SimpleClub. But also internationally like Khan Academy. Nevertheless, each teacher prepares his lessons individually and experiences are not effectively shared. A better promotion of such content could improve both traditional and virtual teaching and thus position Europe better, as the level of education increases and becomes more comparable.

Innovation

European citizens have repeatedly shown that they are innovative and recognize future issues. Renewable Energy is a good example of this, but at the same time it is also a bad example of the short breath in political support. In the field of mobility, Europe was at the forefront with fossil fuels by optimizing cars, but then missed out on developments, even though many innovations for the engines of the future also [took place] in Europe [https://de.wikipedia.org/wiki/Transrapid].

The great challenges of our time are also opportunities that must be taken advantage of. The potential is there, now we need the courage and passion to go our own way and to do so as quickly as possible.

Links to similar topics:

• Kommentar: Digitale Souveränität zum Schnäppchenpreis – von Europa und Mozilla by Felix von Leitner, Heise.
• A clean start for the web by Tom MacWright

JSX became a defacto standard for mixing in XML markup in JS or TypeScript source files. With a little trick it can be used for quickly creating DOM elements or for templating.

The following snippet can be dropped into a JSX file and will then make a HTMLElement of the XML markup:

var React = {
    createElement: function (tag, attrs, children) {
        var e = document.createElement(tag);

        // Add attributes
        for (var name in attrs) {
            if (name && attrs.hasOwnProperty(name)) {
                var v = attrs[name];
                if (v === true) {
                    e.setAttribute(name, name);
                } else if (v !== false && v != null) {
                    e.setAttribute(name, v.toString());
                }
            }
        }

        // Append children
        for (var i = 2; i < arguments.length; i++) {
            var child = arguments[i];
            e.appendChild(
                child.nodeType == null ?
                doc.createTextNode(child.toString()) :
                child);
        }

        return e;
    }
}

The same approach could be used to directly generate a HTML string for templating.

It is then easy to do something like:

document.querySelector('#menu').appendChild(
    <li class={active ? 'active' : false}>
        {title}
    </li>
);

I’m still on Objective-C but I like the idea of swift having the #keyPath(property name) String-Expression. Less can go wrong and autocompletion and refactoring also works.

In good old Objective-C we only have @selector doing similar things, but nothing that works with key paths. So here is a little trick that I use to fix this problem in my code. First I define this macro:

#define keyPath(k) YES ? @#k : (k ? @"": nil)

Actually the @#k part is already doing the job, but refactoring and autocompletion does not work, if the argument isn’t also treated as an expression, therefore I added the little ?: dance.

Now you can use it like this:

[self valueForKeyPath:keyPath(self.sample.greeting)];

It is important also to add the self in front. If self is not appropriate in your situation because you are using the key path from another origin, then use this slightly extended version:

#define keyPathFromObject(o, k) YES ? @#k : ((o ?: o.k) ? @"" : nil)

Once in place it will not be missed on refactoring any more:

Update 2018-06-20:

The macro was always evaluating the expression. I modified it to never reach the expression part of the code.

Update 2018-06-21:

The previous implementation did only work for NSString properties, fixed that by adding another ?: round.

Update 2018-06-26:

Haha, I have been blind and reinvented the wheel: This implementation is really nice. They even figured out how to prepend the @ to get @keypath(). I’m happy to see that the implementation is similar although it is full of extra super magic macro power. That said maybe my implementation is still good to take a look at due to it’s compactness ;)

LanguageTool is the secret weapon for producing error-free texts in different languages. Personally, I’m at war with many a grammar rule and am glad when the machine warns me before it gets embarrassing 😅

However, I believe not everything I wrote needs to be sent to a service that is great, but not under my control.

So here are some tips to set up and use an appropriate server yourself.

Setting up your own server

The easiest way to set up your own server is via Docker. This package offers itself: erikvl87/languagetool. And this is how it is loaded and started:

docker pull erikvl87/languagetool
docker run -d --restart unless-stopped -p 8010:8010 erikvl87/languagetool

Great, now the server can be reached at http://example.com:8010. There is more background information at https://dev.languagetool.org/http-server

Use in Visual Studio Code

The extension LanguageTool Linter provides all necessary functions to work with LanguageTool. Here the server URL can be entered now. The editing of texts and Markdown becomes much more comfortable.

The following adjustments to the settings have proven useful:

{
  "languageToolLinter.external.url": "http://example.com:8010",
  "languageToolLinter.hideDiagnosticsOnChange": true,
  "languageToolLinter.hideRuleIds": true,
  "languageToolLinter.lintOnChange": true,
  "languageToolLinter.lintOnOpen": true
}

Use in Firefox

There are numerous plugins available for browsers and other apps, see https://languagetool.org/#plugins. In the Firefox extension, you can enter your own server under “Experimental settings (only for advanced users)”. The URL must be added to the version path, in our example: http://example.com:8010/v2/.

When I started programming in the 80s, the situation was simple: data was written to a file on a local disk. If files needed to be exchanged, a floppy disk was simply inserted into another computer and edited.

Later, floppy disks and CD drives disappeared and files were either exchanged by e-mail or the data was stored directly on a server. Even Microsoft Word moved to the cloud at some point.

However, moving data from the local computer to the cloud created new problems. What if the provider closed its service? However, it was not only data loss, but also being trapped by the provider because the data could no longer be retrieved from the service that increasingly became a problem for some and a business model for others.

Local-First

The local-first movement wants to bring the data back to the user while retaining the advantages of the internet. A robust and widely accepted solution has been found for the simultaneous processing of data with CRDT, but not yet for the exchange of data. This is because it is not (yet) possible to do completely without services on a server. Even with peer-to-peer, where the devices mainly communicate directly with each other, the connection must be mediated by servers at the beginning.

In an ideal local-first world, the following criteria should be met with regard to the exchange of data:

1. data is processed and stored locally (offline).
2. the sync can be interrupted for a longer period of time, but data can be processed locally during this time and still be identical everywhere after a new sync (CRDT).
3. data should not be visible on the move (E2EE).

And I would also like to add:

4. the whole thing should also work with the technology of the 80s.

Why? For reasons of resilience, because there are many reasons why things could go offline.

Resilient Sync

For this reason, I propose a data exchange format that works both in the file system and on the Internet. It should be so simple that the implementation can work on any underlying data carrier or service.

Log of changes

To start with, each client writes a kind of simple, continuous log with the changes. We call the position of the changes index and it starts at 0 and continues in whole numbers: 0, 1, 2, 3, .... Usually these changes are CRDT compliant, but this is not significant for the protocol. This data can also be stored in encrypted form. Let’s call this data.

Each client is given a unique identifier, usually a unique ID (UUID), we call it clientId. The change logs are stored linked to the clientId. We will call a collection of such logs workspace.

We can enrich further data, such as a timestamp, which can be useful if we want to process the data changes historically or implement a kind of endless “undo”.

It is also conceivable that each new entry contains a hash of the previous entry in order to ensure data consistency in the style of a blockchain. Further refinements in the direction of the Merkle tree are also conceivable. However, a hash on the content of the current entry can also contribute to data security.

Assets, blobs, the big binary chunks

The reality is that there is also larger data that rarely changes: Images, videos, audios, i.e. files. These are not part of the content changes and would quickly bring data synchronization to a standstill. In addition, they are not always needed immediately and could also be loaded “on demand”. I therefore suggest treating these files separately from the changes. Let’s call them asset.

But here, too, the data should be stored according to clientId and in ascending order with index. The data sets can thus refer to an asset, e.g. with a data entry in the form of a URL that contains all the necessary information:
asset:///<clientId>/<index>/<filename>?size=<sizeInBytes>&type=<mimeType>&hash=<checksumOfContents>. An example could look like this asset:///abc/1/test.txt?size=100&type=text%2Fplain&hash=1a2b3c.

Benefits

The key advantage of this method is that we always know where the next data will appear. Because if a client has just written the index ‘123’, the next one will be ‘124’.

Why is this important? For the following reasons:

1. we are not dependent on being notified of new data (“push”), but can also ask for it ourselves (“pull”).
2. we can load the individual entries even without knowing anything about their content. A sync can even take place without an intermediary having to “understand” the data.
3. we notice immediately if data is missing and can request it again.
4. the data can be replicated as often as required, there does not have to be just one sync source. It therefore makes sense to use it as a backup.
5. clients that do not have a direct connection to each other can use “stupid copying processes”.
6. data exchange can be easily and comprehensibly documented, which can be important when recognizing legally compliant stored data for tax and compliance purposes.
7. there are no conflicts when storing the data because it is only updated but never deleted (“append only”).

Databases

Let’s start with the implementation as a database. As described, a table with the following fields would be sufficient:

• index: Integer
• clientId: String or integer
• data: String or binary
• timestamp: Integer (optional)
• prevHash: String or integer (optional)

This would look similar for the assets.

Database can refer to both the local storage of the client, e.g. in the IndexedDB, and the storage on a synchronization server.

Filesystems

The data is stored in a directory in a file system. Metadata, such as the clientId of the creator and details such as the encryption used, are stored in a JSON file called index.json.
Furthermore, there is a directory for each client that is named after the clientId.

These in turn each contain two directories:

1. changes
2. assets

The changes are recorded in changes and numbered consecutively. The same is done in assets with the binary data described.

Modern file systems have no significant restrictions on the number of files per directory, but it can’t hurt to limit the number anyway. The following algorithm in TypeScript ensures an even distribution:

/**
 * Distribute file, named by natural numbers, in a way that each folder only
 * contains `maxEntriesPerFolder` subfolders or files. Returns a list of
 * names, where the last one is the file name, all others are folder names.
 * 
 * Example: `distributedFilePath(1003)` results in `['2', '1', '3']` which 
 * could be translated to the file path `2/1/3.json`.
 */
export function distributedFilePath(index: number, maxEntriesPerFolder: number = 1000): string[] {
  if (index < 0)
    throw new Error('Only numbers >= 0 supported')
  const names: string[] = []
  do {
    names.unshift((index % maxEntriesPerFolder).toString())
    index = Math.floor(index / maxEntriesPerFolder)
  } while (index > 0)
  names.unshift(names.length.toString())
  return names
}

Source: zeed Framework

Online Services and Peer-To-Peer

A suitable mix of the database or file system approach can be selected for online services, depending on which is better suited to the selected service. For Dropbox or WebDAV, for example, this would be the file system approach. For Apple CloudKit, the database approach.

But a simple service of your own is also conceivable, with a REST, WebSocket or other useful interfaces.

There is also no reason not to synchronize the data via peer-to-peer (P2P) or another local communication channel. After all, the data is identical and can therefore be synchronized with other clients via the fastest route. Redundancy is therefore an advantage and does not make things any more complicated. Theoretically, the sequence and multiple application of changes is also unproblematic with CRDT.

Refinements

There is still potential for improvement in some areas:

• Control of data size per log entry. Collecting several changes for larger packages or splitting a change into several packages if the scope becomes too large.
• Compression or summarization of data.
• Announcement of new clients, e.g. through special log entries. Evaluation using cryptographic methods.
• By adding a logical clock, such as the Lamport clock, entries can be sorted logically, thereby improving the chronology of an entry.
• Writing the data in a single file per client for reasons of resource optimization.
• Through the clever use of cryptographic means, it may even be possible to implement rights management (Cryptree).

Outlook

I have been using this technique in my apps for several years, for example in the now completed project Onepile. New projects using this approach will be published soon.

Simplicity and flexibility seem to me to be the biggest advantages of this approach. As a result, it should also be future-proof and be able to adapt quickly to new technical conditions.

The following diagram is an example of an ecosystem for a web app:

Related

• Discussion of the article on HackerNews
• Martin Kleppmann’s Talk on the Local-First Conference 2024 in Berlin
• Mastodon comment of Martin Kleppmann
• List of similar approaches:
  • git-bug
  • remotestorage.io
  • Local, first, forever
  • Understanding Delta Lake’s consistency model
  • Data Laced with History: Causal Trees & Operational CRDTs

In complex projects, the time usually comes when it becomes indispensable for quality assurance to take further measures. I would like to discuss some of these aspects in a loose series:

• Logging
• Crash Reporting
• Support and Feedback

In this article I’ll take a look at Logging.

Level

The simplest form of a log entry is a message. But it soon becomes clear that this alone will not be enough and a little more context is needed. Usually, the Timestamp and Level are added quickly. This can be implemented in this way, for example:

log.error()
log.warn()
log.info()
log.debug()

In environments like the browser these can be easily filtered, but in a log file it may look different. That is why I like to resort to a trick that I learned from my colleagues when working on a major project, namely to highlight these levels:

E|***
W|**
I|*
D|

Okay, that looks nice and clear, but what’s better?

It is the possibility to filter, because filtering to |* will show all messages including and above I|*, thus also warnings and errors. |** and |*** filter accordingly on higher levels. This works very well on macOS e. g. in Xcode or the Console App.

Time

A log entry usually starts with a time stamp. This makes sense for a program that runs in full productivity at the customer or on the server. During development, however, this information is rather superfluous and also shortens the visible area of the message. If time is of any interest at all, then it’s more like how much time has passed until this or that happens. Therefore, it may make sense to specify the time since the start of the program:

I|*       0ms App launch
D|      123ms Open file abc.xyz
E|***   412ms Could not open file abc.xyz because: Does not exist

Colors and Symbols

Another aspect that is helpful in the quick perception of information is the color of the entry. The browser does this for us by displaying the errors in red. But in some environments, such as Xcode, the use of colors is not possible or difficult to achieve, emojis can be used as an alternative:

🔷 I|*       0ms App launch
◽️ D|      123ms Open file abc.xyz
❌ E|***   412ms Could not open file abc.xyz because: Does not exist

The red symbol spotlights immediately and the error message is located so quickly.

Message Origin

Okay, we noticed there was an error, but where did it occur? The most amazing log entry is useless if we can’t locate the cause. For this reason, the file name and the line number should be logged as well. Many IDEs allow you to jump directly to a location through a specific formatting. In Xcode e. g. by CMD + SHIFT + O and then specify the file and the line number separated by a colon. This could look like this in the log:

🔷 I|*       0ms <main.c:33> App launch
◽️ D|      123ms <AppDelegate.m:54> Open file abc.xyz
❌ E|***   412ms <AppDelegate.m:62> Could not open file abc.xyz because: Does not exist

But! This is no information that should be used in a productive environment.

Concurrency

And yet another feature is important in modern programs, namely whether the message comes from an asynchronous code block or the main thread. A visualization with Emojis can be helpful here as well, like here with a rocket:

◽️ 🔷 I|*       0ms <main.c:33> App launch
🚀 ❌ E|***   412ms <MyCache.m:12> Expected files were missing

Conclusion

Even such an everyday topic as logging can still offer room for optimizations and thus save time in some places, because relevant information can be collected quickly and it is easier to locate the origin of the problem.

PDFify can now be updated to the latest version 4.0. Many PDFify users are looking forward to this major version update with improvements and new functions.

PDF/A Support

Many PDFify users keep electronic documents that they need to archive for the long term.

PDF/A - Portable Document Format Archivable - enables standardized long-term archiving of documents. As of macOS 11, PDFify now offers to save the document as PDF/A-2u by default in the settings.

The “classic” PDF, which supports the embedding of links, graphics, audio and video files as well as optional encryption, is of course retained in PDFify.

Finder Extensions / Quick Actions

To quickly convert several existing PDFs “in batch” to PDF/A, the quick actions in the Finder Extension can be supplemented with “Convert to PDF/A”.

There is also a new Finder extension for converting documents into a PDF with PDF/A format. However, the existing extensions also generate PDF/A if the option has been set in the settings.

Faster display of PDFs on the web

Furthermore, you can now also select the linearized PDF, which is optimized for fast display on the Internet. The first page is then already displayed during the download, while the following pages are still being loaded.

Standardized maximum page size

PDFify now allows you to limit the maximum page size so that you do not end up with unsightly huge pages. By default, the page size is set to DIN A4 with the update. In the settings, you can adjust the value to the original size or US letter.

Sequence during import

Sometimes the individual pages of a document are available as separate image files. In the new version of PDFify, these are now reliably imported in the sort order familiar from the Apple Finder. This allows individual scans of pages to be quickly merged into one PDF document.

Try now for free

Receipts Space 3.0 is here – a major update with lots of new features. Here’s a quick overview.

Audit Compliance (GoBD)

For anyone who needs to store receipts in compliance with regulations, there’s now a dedicated mode. Confirmed entries become read-only, and all changes are logged. A history timeline shows at a glance who changed what and when.

End-to-End Encryption

If you store your library in the cloud or on a USB stick, you can now encrypt it with a password. Synchronization between multiple Macs still works – as long as all devices know the key.

New Dashboard

The dashboard has been completely redesigned. In addition to income and expenses, it now shows open amounts and trends compared to the previous year. A click on contacts, categories or tags filters the view.

Folder Instead of Package

The file format has been extended with a new option: The library can now also be saved as a regular folder. This solves synchronization issues with iCloud and other services.

Of course, there are many more changes. All details are available at receipts-app.com.

Along with selling a product there comes support. Customers have questions and demands about the software and those are often repeating. This is where replies.io comes in, a service provided by my friends Stefan Fürst and Lars Steiger, originally initiated by Ruben Bakker.

Support eats up your time

Support can be time-consuming and easily eat up some hours of your work day. But at the same time it is usually not that much work, that it is worth outsourcing it, especially when you take into account that most of the answers still need your attention, since the support person might not be able to overview the specific technical details.

Replies.io, the smart time saver

Therefore, it makes sense to cut down the time spent on support by automating and simplifying the tasks. This is what replies does:

Channels and FAQ

First of all the users need to be able to get in contact with you. The most obvious way is through email. But what if you could also offer a support form that is already trying to cover the most frequently asked questions by analyzing what the user is typing? Replies.io has those for in form of web forms and a macOS framework. The later one is magic and provides even more benefit, since you get details about the OS, the installed version. The user can also send log files and screenshots and -recordings with a few clicks.

Suggestions

But even if the user did not find the right answer to his question in the FAQ or the suggestions, you still might already have answered a similar question. While typing your answer you usually get a proposal for an answer that fits well. This gets even better over time, with a growing set of answers.

Text Formatting

If you are somewhat like me, you will fiddle with the look of the text a bit, but at least you’ll try to get the quoted text separated from your answers nicely, which can be a pain in Apple Mail. With replies.io you click at the last word of the sentence you like to answer and the text box show up waiting for you to type. The best is, it will generate a perfect looking email for you. It also has the personalized salutation and the footer ready for you.

Defer your answers

One essential trick to save time is to slow down the conversation. In a regular email app, the mail is out when you hit “send”. Replies.io instead has some smart presets for deferring the sending. This is useful, because if you answer very quickly, the user is very likely starting a conversation, since he feels like being in a “chat mode”.

Also consider weekends. You might have time to answer a question, but you shouldn’t send it out directly to avoid an unprofessional impression. You also don’t want to get more mails on your weekend from the user. The user will still be super happy to get the answer early Monday morning and you saved your weekend.

React to crashes

And last but not the least replies.io integrates with Hockey App. It is super useful for the user to get a feedback and understand that you are working on a fix. It is also super useful for the developer to start a conversation of what did lead to the crash and finally have the user test the fix of that crash.

Understand where you’ve spent time

You can also learn to save time when you understand where you did spend it. Replies.io has reports and counters that help you understand the problems users have. The consequence could be, that you modify your app and avoid questions in the first place. You also learn about the features the users desire the most and invite them to become qualified beta testers for these new features before they go public.

Conclusion: Replies.io helped me to get support under control and save a lot of time making use of the described features. I will not miss it anymore.

Often I’m finding myself in a situation, where a lot of nonsense repeating code needs to be written, like for example when implementing NSCoder for an object or when the syntax does not appeal me like keyed subscription for a dictionary like object.

Since I’m still coding in Objective-C, I tried to find an easy solution for these requirements:

• An object with simple properties like NSString and NSNumber
• Allowing deeper levels by adding NSArray or NSDictionary properties
• Should serialize and deserialize to JSON or MessagePack easily
• Should have type check and autocompletion in the editor i.e. instead of obj[@"name"] I would like to write obj.name
• It shouldn’t be to strict about everything :)

I know there is a lot of prior work doing similar magic and also CoreData comes with similar features, but hey, sometimes it is fun to just do it yourself.

So I started with a base class SeaObject derived from NSObject. This is what the header looks like:

@interface SeaObject : NSObject <NSCopying>

@property (nonatomic, assign) BOOL needsSave;
@property (nonatomic, readonly) NSUInteger count;
@property (nonatomic, readonly) NSEnumerator *keyEnumerator;
@property (nonatomic, readonly) NSArray<NSString *> *allKeys;
@property (nonatomic, copy) NSDictionary *jsonDictionary;

- (instancetype)initWithDictionary:(NSDictionary *)dict;
- (void)configure;

- (id)objectForKey:(id)aKey;
- (void)setObject:(id)anObject forKey:(id<NSCopying>)aKey;
- (void)removeObjectForKey:(id)key;
- (void)setObject:(id)obj forKeyedSubscript:(NSString *)key;
- (id)objectForKeyedSubscript:(NSString *)key;

- (BOOL)writeAsJSON:(id)path;
- (BOOL)readAsJSON:(id)path;

@end

If e.g. I want to build a todo list I can do like this

@interface TodoItem : SeaObject
@property NSString *title;
@property NSNumber *done;
@end

The implementations requires some @dynamic declarations in order to get through to my fallback algorithms I’ll describe later:

@implementation SeaObject
@dynamic title, done;
@end

Now I can nicely set properties like this:

item.title = @"Clean kitchen";
item.done = @NO;

On the implementation side of SeaObject all data is stored in NSMutableDictionary *_properties. The glue code for the keyed subscription part is trivial.

The magic is in the code that handle the access to the properties. Since we used @dynamic before, there is no counterpart on the implementation side for those properties. This is why we can override some fallbacks and voila everything ends up in setObject:forKey and objectForKey:

- (NSMethodSignature *)methodSignatureForSelector:(SEL)selector {
    NSString *sel = NSStringFromSelector(selector);
    if ([sel rangeOfString:@"set"].location == 0) {
        return [NSMethodSignature signatureWithObjCTypes:"v@:@"];
    } else {
        return [NSMethodSignature signatureWithObjCTypes:"@@:"];
    }
}

- (void)forwardInvocation:(NSInvocation *)invocation {
    NSString *sel = NSStringFromSelector(invocation.selector);
    if ([sel rangeOfString:@"set"].location == 0) {
        sel = [NSString stringWithFormat:@"%@%@",
               [sel substringWithRange:NSMakeRange(3, 1)].lowercaseString,
               [sel substringWithRange:NSMakeRange(4, sel.length-5)]];
        id __unsafe_unretained obj;
        [invocation getArgument:&obj atIndex:2];
        [self setObject:obj forKey:sel];
    } else {
        id obj = [_properties objectForKey:sel];
        [invocation setReturnValue:&obj];
    }
}

Some more magic reading and writing dictionaries and this nice little helper is doing its job. Also adding categories works nicely.

Please leave your comments below. I’m looking forward to your feedback.

I am currently working on a new storage for my Objective-C apps and I wondered if there is significant difference in speed and size of various serialization methods popular on macOS and iOS.

The Contestants

On board with Foundation we already got some great ones:

• NSJSONSerialization
• NSKeyedArchiver
• NSPropertyListSerialization in the two flavors XML and Binary

As the newcomer I chose:

• MPMessagePackWriter implementing MessagePack

I know, there are others like BSON, Thrift or Avro, but I want to keep it flexible on my side and not define any schema beforehand. I also have in mind, to use the format cross platform, which should not be a problem with JSON and MessagePack. I left the other ones in the test anyway out of curiosity, but they are not the winners anyway as we’ll see later ;)

The Setting

I wrote a little Unit Test to perform my non representative tests. I then implemented performance testing parts and a size comparison one. You can take a look at this gist to see what I did.

I also chose a very small test object and a very large one. As I said, this is really not very representative, but it might give an idea.

Finally, I also added GZIP into the mix, just to see if I was over optimizing for my problem.

The Size Results

For the small test MessagePack is the winner. JSON is also doing very well. GZIP is not playing a big role for small size, it is making things even worse, but that was to be expected. Even though XML was expected to be large, I wondered that KeyedArchiver is too.

For the large sizes GZIP really makes a difference. Of course there are a lot of repetitions for the property names which should make a nice target for compression.

But then again MessagePack is the winner and needs almost half as much space as the looser in this race does. But the distance to JSON again is not that big.

A very strange observation is, that the Binary variant of Plist is even worse than XML.

The Speed Results

Green stands for tests on the small data and blue for large one:

For smaller data JSON seems to be the fastest one, followed by Message pack. For larger ones Plist is faster. Keyed Archiver is the slowest one in the field.

The Final

Overall for my personal purposes JSON and MessagePack seem to be the most appropriate ones. I was very positively surprised of the JSON results. MessagePack as the clear winner in the size comparison is probably the best choice for the projects I’m working on.

I was very disappointed of KeyedArchiver, which I previously expected to be in the top field. If not required for Apple OS specific purposes it really does not make sense to use any of those proprietary formats anymore.

For my current project zutun.io I’m implementing the reordering of entries as described in the Apple Documentation.

Algorithm Idea

The goal is to perform as few operations on the database as possible, therefore I use a floating point number as the sort property. The basic idea is simple:

To put an entry between ordering numbers A and B choose a number that is greater than A and smaller than B.

The trick is to choose a random number to avoid conflicts when synching the data later on.

Implementation

First of all lets create a little helper that will create random floating numbers in a range:

#import <math.h>

static inline double hxRandomDouble(double min, double max) {
    double _min = MIN(min, max);
    double _max = MAX(min, max);
    double _rnd = ((double)arc4random() / (double)(UINT32_MAX-1));
    return _min + ((_max - _min) * _rnd);
}

Lets say our entries are defined like this:

@interface TodoRecord : NSObject
@property NSString *title;
@property NSNumber *order;
@end

In our view controller we’ll store the entries in the property objects. Adding a new entry is then as easy as:

TodoRecord *rec = [[TodoRecord alloc] init];
rec.title = title;

NSNumber *max = [self.objects valueForKeyPath:@"@max.order"] ?: @1;
rec.order = @(max.doubleValue + hxRandomDouble(1., 2.));

This will create a new entry with a distance of at least 1 to the previous one.

Now comes the tricky part. We will first allow reordering in general, which only makes sense if we have at least 2 entries. I consider the rest of the editing code as trivial, like calling setEditing: etc.:

- (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath {
    return self.objects.count > 1;
}

The following code is the heart of the code that applies the movement. It is basically the implementation of the described idea. It will just do one database operation and sync nicely.

- (void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath {
    NSInteger src = sourceIndexPath.row;
    NSInteger dst = destinationIndexPath.row;

    // Nothing to do
    if (src == dst) return;

    // Move the entry in the representing NSMutableArray, see Apple Docs
    TodoRecord *rec = (id)[self.objects objectAtIndex:src];
    [self.objects removeObjectAtIndex:src];
    [self.objects insertObject:rec atIndex:dst];

    // Find the new neighbours of our entry
    NSInteger len = self.objects.count;
    TodoRecord *beforeRec = dst - 1 >= 0 ? (id)self.objects[dst - 1] : nil;
    TodoRecord *afterRec = dst + 1 < len ? (id)self.objects[dst + 1] : nil;

    // Find the range for the new ordering number
    double before = beforeRec.order.doubleValue;
    double after = afterRec.order.doubleValue;
    double current = rec.order.doubleValue;

    // At the ends add some margin
    if (!beforeRec) before = after + 2.5;
    if (!afterRec)  after = before - 2.5;

    // If not alread inside of the range...
    if (before < current || after > current) {
        // ... put somewhere middleish
        double dist = (before - after) / 3.;
        rec.order = @(hxRandomDouble(after + dist,
                                     before - dist));
    }
}

Conclusion

There may be theoretical limits for this implementation, but the complications are minimal compared to the benefit of the algorithm.

You would like to comment on it? Send me a message on @holtwick

Update 2018-02-27

I made some tests to see when the first collisions will occur. For the example above this will usually be around 50 steps. That means you can move items 50 times between a specific pair of entries before the order number will converge to identical values.

I then tried the same with int32_t and it turned out it reached about 30 steps without collision, which makes sense for a 32bit number divided by 2 in each step ;)

So sadly infinity in reality isn’t to far away. But I still think that the edge cases will not often be reached and then it is still enough time to do apply the classic approaches again and have room for another 30-50 rounds.

This blog and website consists of static pages created using a practical technique that I would like to introduce in this article.

The special thing about this is that a large part of this website generator consists of programming patterns, which are also used in dynamic websites via jQuery. A simple example says more than a thousand words:

const site = SeaSite(
  'public', // Source folder
  'dist'
) // Destination folder

site.handle('index.html', ($) => {
  $('title').text('New Title')
})

This example creates the site object with the source directory public and the target directory dist. In the first step, the content of the source directory is cloned into the target directory. The next step is to edit the file index.html. The help function gets the variable $ known from jQuery and sets the content of the title element to New Title. The modified content is saved automatically by the framework.

File patterns and templating

From here it is easy to build more complex websites with a few lines of code:

site.handle(/.*\.md/, (content, path) => {
  const $ = site.readDOM('template.html')
  const htmlPath = path.replace(/\.md$/, '.html')
  const md = parseMarkdown(content)
  const title = md.props.title
  $('title').text(`${title} - My Website`)
  $('#title').text(title)
  $('#content').html(md.html)
  site.write(htmlPath, $.html())
})

template.html:

<!DOCTYPE html>
<head>
  <title>Template</title>
</head>
<body>
  <h1 id="title">Title</h1>
  <div id="content">Content</div>
</body>

hello-world.md:

---
title: Hello World
---

Lorem **ipsum**

This example uses a file pattern to find all Markdown files in the site’s source folder. As you may notice, this time we get a plain string instead of the DOM object from the previous example. This is because DOM objects are only generated from html and xml files, otherwise a string is returned.

We then directly create a new DOM object from the template.html file. There we set the content of the title element as well as for the DOM element with the ID #title. The title is extracted from the Markdown file, where we could put even more properties like e.g. language, description, keywords.

The Markdown parser “marked” we use, converts the contents to an HTML string we can pass to the #content element in out template.

The last step is to write the file with a .html suffix. We don’t need the Markdown files anymore and could clean up by calling site.remove(/.*\.md/).

This little script will be applied to all Markdown files in the site’s source folder, so you can quickly build up a site with easy to create content. The CSS selectors are super powerful and changing other aspects of the page is super simple and intuitive.

Static JSX

But it doesn’t stop here, let’s push it a bit further! Lets use JSX to generate portions of HTML that need to be even more flexible. Let’s imagine we want to create an index of all Markdown files we converted in the previous example:

const pages = []

site.handle(/.*\.md/, (content, path) => {
  // ...
  pages.push({ htmlPath, title })
})

site.handle('index.html', ($) => {
  $('#content').html(
    <ul>
      {pages.map(page => <li><a href={page.htmlPath}>{title}</a></li>)}
    </ul>
  )
})

We enhanced the previous example by collecting page info in the pages variable. After all Markdown pages are processed the links should be added to the index.html file. We use JSX to create a simple list with links. This is the same code you would use in a React JS project, but of course this is a custom JSX generator, which creates an HTML string form the JSX code.

This way you don’t need any complex templating language in the HTML file itself to get things done.

The technology

All this is made possible by the awesome cheerio project, which is driving the DOM and jQuery like part. The API is covering everything you’ll need to manipulate the HTML and XML files.

I love Typora for editing Markdown. It really unites everything I ever expected from an editor of that type. Of course, I’m writing this article with Typora as well and process it with my static website builder SeaSite.

Adding a Custom Theme

Although it already comes with great themes for different editor requirements, I’d still love to get a preview of the content that is as close as possible to what the later published text will look like.

And as to be expected Typora lets you customize the look and some feel by simply dropping in a CSS file. That is what I did, I got to the theme folder via the apps preferences and added a symbolic link to my custom CSS:

ln -s <path_to_my_css> holtwick.css

After a restart it will appear in the menu like this:

Perfect! Now to reload the style after any update to the CSS I just select the theme again from the menu and it will reload.

Reuse existing CSS

Of course, I wanted to reuse as much of the CSS I already have. To achieve that I’ve split up the CSS into some LESS files. In text.less I put the basic text styles like h1 , blockquote etc.

I then use two more LESS files, one for the website and the other to be linked with Typora:

// Website
.blog {
    @import "text";
}

// Typora
#write {
    @import "text";
}

As you might notice, the Typora stuff needs to be wrapped into #write to not unintentionally affect other areas of the window like the navigation.

You can the add some fine tuning to it, like adding styles for .md-meta-block which would be the YAML property area.

And here is the final design, attention, it might be a deja vu ;)

I hope you enjoy Typora as much as I do and I send a big compliment to its author from my side.

What crazy times we live in, and now everything is becoming even more absurd with President Trump. Regardless of the big-picture political situation, the goal should now be to become independent of the US and strengthen the EU. There is also a lot that can be done in the private sphere, and I would like to gradually present alternatives for US services and products in a small series.

Early 2020, I had tried to sketch out in my article “An IT Strategy for Europe” what I thought such a step towards digital sovereignty might look like in broad strokes. Not much is happening in this regard.

I would like to offer the following criteria for achieving independence and reliability:

• Self-hosting → If you operate your services yourself, no one can shut them down and the data belongs to you.
• Decentralized → A distributed system is less susceptible to outages and censorship.
• Open source → The software cannot disappear and can be verified.

Image by mistral.ai

Selfhosting

It is so nice and convenient to use the services of large providers like Google, Microsoft or Apple, but more often than not you pay with your personal data. Even services like Apple can quickly change their privacy-friendly stance; there are already signs of this and the history of comparable services makes trust shrink.

Home network

Unfortunately, operating your own server is not for everyone, but it is less complicated than you might think. You can start at home with a NAS. I own a Synology (Taiwan). It comes with many services of good quality that cover the essentials. But actually it can be any computer, the main thing is that Docker can be operated on it.

Docker is the key to really easy and secure operation of “self-hosted services”. There is an almost infinite number of solutions for every problem.

For example, I run Home Assistant (open source) on my Synology, which is the dashboard for all devices and sensors in my own home that are somehow connected to the network. For photos, I use Immich (open source), which also has features that can keep up. A VPN connection - in my case WireGuard via a fritz.box - allows me to use all services while on the road.

Internet

But even running a Docker service on the internet is not rocket science. At Hetzner (promo link), for example, you can set up a virtual server for less than 5 EUR and get it ready to go with Docker. After a few preparations (https://github.com/holtwick/selfhosted?tab=readme-ov-file#selfhosted) to connect your own domain to the IP, you’re ready to go.

I run many services there, but for private use I mainly use nextCloud. The look is a bit outdated in some places, but it serves its purpose for file sharing and other things you know from iCloud, for example.

Decentralized

Everyone uses the internet’s most famous decentralized service: email. Actually, the whole magic of the internet is its decentralized structure. If something fails somewhere, the information finds another way, just like an ant trail.

Large providers are usually centralized. Of course, they try to distribute the load in the background, but these services are still technically vulnerable to disruptions, data loss and security breaches.

All the better that there are now more “federated” services again. Lately, Mastodon has become particularly well known as a Twitter /X alternative. But in this so-called Fediverse, other solutions are also emerging that can then also connect with each other. A good example of this is the YouTube replacement PeerTube.

But there are other forms of decentralized data processing. One movement that I particularly like is called Local First, which again emphasizes the importance of data being available locally. Storing the same data in different physical locations is also a form of decentralized structure. The prime example of this is versioning systems like git.

Open Source

Free and open software is the cornerstone of deeper trust. First, open software is not so quickly “out of the world”; it exists a thousand times over in copies. Secondly, with a little expertise, you can see exactly what the software does. And thirdly, it can be adapted, which in turn contributes to the project. It’s a digital form of volunteer work, without having to join an association ;)

Further links

• Kuketz blog on the same topic with interesting links and tips (German):
  https://www.kuketz-blog.de/unplugtrump-mach-dich-digital-unabhaengig-von-trump-und-big-tech/
• Directory of European alternatives:
  https://european-alternatives.eu
• General search for alternatives:
  https://alternativeto.net
• Lots of pre-installed self-hosted projects, good for testing:
  https://adminforge.de

After a few years, it was time to update the website. For the last version, I had even developed my own static website generator called Hostic and everything went wonderfully. But even though I love reinventing the wheel, I only did it halfway for this new attempt.

Basically, this website consists of Vue and Markdown. A static version of this is created so that the corresponding page with content is available for each URL. This allows the website to be easily indexed by search engines and the loading time is very short. The process is called SSG (Server-Side Rendering).

The highlight, however, is that this approach allows dynamic elements to be integrated into the website and even individual posts. A first example is the interactive registration for my e-mail newsletter, because I simply insert <AppNewsletter/> at this point:

Another thing that makes things easier is the use of Obsidian as a Markdown editor for the content. I use this practical tool every day anyway and can thus easily maintain the content.

I derived my own approach from the great project Vitesse. The technique used is almost identical, but I had to make a few adjustments for my purposes.

Worried about e-invoices? With XML2invoice you can start the new year relaxed…

XML2Invoice is a web-based app that converts your “normal” PDF invoice into XML format: Either into a pure XML file or into a ZUGFeRD PDF file that looks exactly like your invoice and in which the prescribed XML data is embedded.

And it also works the other way around: XML2Invoice generates an electronically readable invoice in ZUGFeRD format from XML files that can no longer be read by humans, which looks like a standard PDF invoice on the outside, but also contains the XML data. Readable for humans and machines. If desired, you can import the PDF with the embedded XML data into Receipts with a click of the mouse.

Start now for free on xml2invoice.com !

Update 2025-01-29: XML2Invoice is now called E-Invoice Space