SwiftUI on the Web

SwiftUI is the new cool kid on the block when it comes to iOS/iPadOS/macOS application development.

As Apple announced SwiftUI early 2019 it’s naturally only focussing on making all the declarative UI goodness available for the Apple operating systems. No non-apple platforms in focus. Naturally.

But there are ways. With the declarative way of creating user interfaces one apparently can simply start to re-implement the UI controls and have them render as HTML / Javascript…

The SwiftWebUI project is aiming to do so:

Unlike some other efforts this doesn’t just render SwiftUI Views as HTML. It also sets up a connection between the browser and the code hosted in the Swift server, allowing for interaction – buttons, pickers, steppers, lists, navigation, you get it all!

In other words: SwiftWebUI is an implementation of (many but not all parts of) the SwiftUI API for the browser.

To repeat the Disclaimer: This is a toy project! Do not use for production. Use it to learn more about SwiftUI and its inner workings.

SwiftWebUI

Making a RISC-V operating system using Rust

As RISC-V progressively challenges the existing ARM processor ecosystem it’s interesting to see more and more software projects popping up that aim that RISC-V architecture.

Here’s one project that aims to develop (and explain along the way) how to create an operating system from scratch. On top of the RISC-V specifics this tutorial also aims to teach how this all can be done in a programming language called Rust.

Keep in mind that all of this is done on a baremetal system. No other software is running.

RISC-V (“risk five”) and the Rust programming language both start with an R, so naturally they fit together. In this blog, we will write an operating system targeting the RISC-V architecture in Rust (mostly). If you have a sane development environment for RISC-V, you can skip the setup parts right to bootloading. Otherwise, it’ll be fairly difficult to get started.

This tutorial will progressively build an operating system from start to something that you can show your friends or parents — if they’re significantly young enough. Since I’m rather new at this I decided to make it a “feature” that each blog post will mature as time goes on. More details will be added and some will be clarified. I look forward to hearing from you!

The Adventures of OS

REST-API testing: Reqres

I am back again and developing some smaller APIs for my own use.

As I am learning a new programming language and framework (SwiftUI) and for my little learning project I need to also implement a server backend. Implementing a RESTful service is quite straight-forward but for testing and UI prototyping I actually want to do some testing before really setting up the server side.

To easily test RESTful calls without actually implementing anything I found that Reqres is a quite useful tool to have in the toolbelt:

Apart from some pre-set-up API endpoints with dummy data (like users, …) it also features a request mirror service.

With that you can simply throw a JSON document into the general direction of Reqres and it will put a timestamp on it and return it right away.

Like so:

Odometer for the HUD

Since I am back at developing the Head-Up-Display app I was writing about in February (yeah, mornings got darker again!) I want to leave this nice looking Odometer Javascript library here:

Odometer is a Javascript and CSS library for smoothly transitioning numbers. See the demo page for some examples.

Odometer’s animations are handled entirely in CSS using transforms making them extremely performant, with automatic fallback on older browsers.

odometer

Hack-The-Planet Podcast: Episode 009

replacing MyFitnessPal

Well, it’s about time to do something about MyFitnessPal. In our family we’re using their service by the daily. But just for logging. No reports, no further features used.

But still, we were using it for quite a time now:

almost 5 years logged every-single-day.

The service has started to roll out ads for some time now in their apps. There are only iOS / Android apps available. And a mediocre website.

Just recently they started to announce that their free service will restrict how many years back are going to be stored. From those 5 years we will loose 3.

In addition the whole integration has never gotten to a point where I would have decided to upgrade to the paid premium version. No functionality ever got added. No interfacing with scales, no optimizations for UI/UX, …

But they now reduce the functionalities and service and want me to cough up a bit of money:

I am not generally against subscriptions. But I am not getting 9,99 Euro of value out of the service. A shared google sheet would almost achieve parity. And the price itself is just not value based. For 2 Euro I probably would not feel the urge to move on. For 9,99 (times 2 for 2 accounts) make me move.

So I’ve sat down with my wife and we scribbled up some things we want to have in a replacement. The content and feature-set is agreed. Now I’ll throw up a prototype app.

It’ll be integrated with the MQTT scales. And with the flow we came up with we hopefully will reduce the interactions dramatically over MyFitnessPal. And it’ll never stop saving history. And I’ll learn something new.

using AI to generate human faces from emojis and thumbnails

Back in March 2019 we’d already seen artificial people. Yawn.

Back then a Generative adversarial network (GAN) was used to produce random human faces from scratch. It synthesized human faces out of randomness.

Now take it a step further and input actual small images. Like thumbnails or emojis or else.

And what do you get?

Quite impressive, eh? There’s more after the jump.

Oh and they wrote a paper about it: Progressive Face Super-Resolution via Attention to Facial Landmark

Magnificent app which corrects your previous console command

We all know this. You typed a loooong line of commands in your shell and you made one typo.

That’s the worst.

Now. There’s a command that aims to help:

It is rather simple. But extremely effective.

The Fuck attempts to match the previous command with a rule. If a match is found, a new command is created using the matched rule and executed.

Grab it on github. Install it right away. It went into my toolbelt in an instant.

Wave Function Collapse

I’ve written on this topic before here. And as developers venture more into these generative algorithms it’s all that more fun to see even the intermediate results.

Oskar Stålberg writes about his little experiments and bigger libraries on Twitter. The above short demonstration was created by him.

Especially worth a look is the library he made available on GitHub: mxgmn/WaveFunctionCollapse.

Some more context, of questionable helpfulness:

In quantum mechanicswave function collapse occurs when a wave function—initially in a superposition of several eigenstates—reduces to a single eigenstate due to interaction with the external world. This interaction is called an “observation”. It is the essence of a measurement in quantum mechanics which connects the wave function with classical observables like position and momentum. Collapse is one of two processes by which quantum systems evolve in time; the other is the continuous evolution via the Schrödinger equation. Collapse is a black box for a thermodynamically irreversible interaction with a classical environment. Calculations of quantum decoherence predict apparent wave function collapse when a superposition forms between the quantum system’s states and the environment’s states. Significantly, the combined wave function of the system and environment continue to obey the Schrödinger equation.

Wikipedia: WFC

Right. Well. Told you. Here are some nice graphics of this applied to calm you:

Multi-Sensor board progress

Still working on these

Still lots of errors and challenges to positioning and casing. It works electrically and in software. Does not yet fit into a case.

It’s supposed to get you these sensors accomodated:

  • barometric pressure
  • temperature
  • humidity
  • PIR motion
  • light intensity
  • bluetooth scan/BLE connectivity
  • Wifi scan / Wifi connectivity

And a RGB LED as output. All powered by USB and an ESP32.

Booting Faster (with Linux).

Booting a computer does not happen extremely often in most use-cases, yet it’s a field that has not seen as much optimization and development as others had.

Find a very interesting presentation on the topic: How to make Linux boot faster here. The presentation was held at the Linux Plumbers Conference 2019.

QuickCharge 3 (QC3) enable your Arduino project

You might have asked yourself how it is that some phones charge up faster than others. Maybe the same phone charges at different speed when you’re using a different cable or power supply. It even might not charge at all.

There is some very complicated trickery in place to make those cables and power supplies do things in combination with the active devices like phones. Many of this is implemented by standards like “Quick Charge”:

Quick Charge is a technology found in QualcommSoCs, used in devices such as mobile phones, for managing power delivered over USB. It offers more power and thus charges batteries in devices faster than standard USB rates allow. Quick Charge 2 onwards technology is primarily used for wall adaptors, but it is also implemented in car chargers and powerbanks (For both input and output power delivery).

Wikipedia: Quick Charge

So in a nutshell: If you are able to speak the quick charge protocol, and with the right cable and power supply, you are able to get anything between 3.6 and 20V out of such a combination by just telling the power supply to do so.

This is great for maker projects in need of more power. There’s lots of things to consider and be cautious about.

“Speaking” the protocol just got easier though. You can take this open source library and “power up your project”:

The above mentioned usage-code will give you 12V output from the power supply. Of course you can also do…:

Be aware that your project needs to be aware of the (higher) voltage. It’s really not something you should just try. But you knew that.

More on Quick Charge also here.

2001-era docomo flip phone emoji font

NTT DoCoMo might not have been the first ones to release feature phones with actual emoji characters to be used in text messaging. But their set of original emojis is just oh-so-beautiful to look at.

With the help of Monica Dinculescu we now can enjoy these emojis on our modern era computing machines.

Behold:

You can either get the font downloaded for free directly from Monicas page or you could use her SVG code to further make use of the great emojis.

the font download will get you this

If you go for the SVG link you will get some overview alike the one at the start of this post. If you wanted to further work with the raw vector data (SVG) in there you could use this simple trick:

Step 1: locate the emoji you want in the code of the page. Maybe by utilizing the developer tools of your browser.

Step 2: Copy that specific element that you want to your clipboard / into a new text document.

Step 3: add the proper header tag before the element you’ve copied.

<?xml version="1.0" encoding="utf-8"?>

Step 4: Save the contents now as a file with the .svg ending. You can now open it up in any SVG compatible editor, like Inkscape.

An Introduction to D3.js

Browsers can do many things. It’s probably your main window into the vast internet. Lots of things need visualization. And if you want to know how it’s done, maybe do one yourself, then…

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

D3.js

And to further learn what it’s all about, go to Amelia Wattenbergers blog and take a stroll:

So, you want to create amazing data visualizations on the web and you keep hearing about D3.js. But what is D3.js, and how can you learn it? Let’s start with the question: What is D3?

While it might seem like D3.js is an all-encompassing framework, it’s really just a collection of small modules. Here are all of the modules: each is visualized as a circle – larger circles are modules with larger file sizes.

An Introduction to D3.js

nodes – a new way to create with code

In Nodes you write programs by connecting “blocks” of code. Each node – as we refer to them – is a self contained piece of functionality like loading a file, rendering a 3D geometry or tracking the position of the mouse. The source code can be as big or as tiny as you like. We’ve seen some of ours ranging from 5 lines of code to the thousands. Conceptual/functional separation is usually more important.

Nodes.io

Nodes* is a JavaScript-based 2D canvas for computational thinking. It’s powered by the npm ecosystem and lives on the web. We take inspiration from popular node-based tools but strive to bring the visual interface and textual code closer together while also encouraging patterns that aid the programmer in the prototype and exploratory stage of their process.
*(not to be confused with node.js)

a throw-away remote VNC linux desktop in a docker container

I am running most of my in-house infrastructure based on Docker these days…

Docker is a set of platform-as-a-service (PaaS) products that use operating-system-level virtualization to deliver software in packages called containers. Containers are isolated from one another and bundle their own software, libraries and configuration files; they can communicate with each other through well-defined channels.

All containers are run by a single operating-system kernel and are thus more lightweight than virtual machines.

Wikipedia: Docker

And given the above definition it’s fairly easy to create and run containers of things like command-line tools and background servers/services. But due to the nature of Docker being “terminal only” by default it’s quite hard to do anything UI related.

But there is a way. By using the VNC protocol to get access to the graphical user interface we can set-up a container running a fully-fledge Linux Desktop and we can connect directly to this container.

I am using something I call “throw-away linux desktop containers” all day every day for various needs and uses. Everytime I start such a container this container is brand-new and ready to be used.

Actually when I start it the process looks like this:

As you can see when the container starts-up it asks for a password to be set. This is the password needed to be entered when the VNC client connects to the container.

And when you are connected, this is what you get:

this is what you see after connecting to the desktop container by VNC

I am sharing my scripts and Dockerfile with you so you can use it yourself. If you put a bit more time into it you can even customize it to your specific needs. At this point it’s based on Ubuntu 18.04 and starts-up a ubuntu-mate desktop environment in it’s default configuration.

When you log into the container it will log you in as root – but effectively you won’t be able to really screw around with the host machine as the container is still isolating you from the host. Nevertheless be aware that the container has some quirks and is run in extended privileges mode.

Chromium will be pre-installed as a browser but you will find that it won’t start up. That’s because Chromium won’t start up if you attempt a start as root user.

The workaround:

“–no-sandbox” parameter for Chromium

Now get the scripts and container here and build it yourself!

housekeeping with NodeJS

When you are using or developing NodeJS applications and the Node Package manager (npm) over time a lot of old crusty libraries will accrue.

A lot means, a lot:

To have a chance to get on top of things and save space, try this:

npm i -g npkill 

By then using npkill you will get an overview (after a looong scan) of how much disk space there is to be saved.

Great tip!

an OS in your browser

So I leave this right here:

OS.js is an open-source JavaScript Web Desktop implementation for your browser with a fully-fledged window manager, Application APIs, GUI toolkits and filesystem abstraction.

It really does implement a lot of what an operating system UI and portions of the backends are supposed to be. It looks quite funky and there are applications to this. Of course it’s open source

I want all electron Apps to start existing there so I can call all of them with just a browser from anywhere.

If you want to give it a spin, click here:

host GIT repositories painlessly

As people around me discuss what to go for in regards to manage their growing number of private GIT repositories I joined their discussion.

A couple of years ago I assessed how I would want to store my collection of almost 100 GIT private repositories and all those cloned mirrors I want to keep for archival and sentimental reasons.

An option was to pay for GitHub. Another option, which most seemed to prefer, was going for a local Gitlab set-up.

All seemed not desirable. Like chaining my workflows to GitHub as a provider or adopting a new hobby to operate and maintain a private GitLab server. And as it might have become easier to operate a GitLab server with the introduction of container management systems. But I’ve always seemed to have to update to a new version when I actually wanted to use it.

So this was when I had to make the call for my own set-up about 4 years ago. We were using a rather well working GitLab set-up for work back then. But it all seemed overkill to me also back then.

So I found: gogs.io

It runs with one command, the only dependency is two file system directories with (a) the settings of gogs and (b) your repositories.

It’ll deploy as literally a SINGLE BINARY without any other things to consider. With the provided dockerfile you are up and running in seconds.

It has never let me down. It’s running and providing it’s service. And that’s the end of it.

I am using it, as said, for 95 private repositories and a lot of additionally mirrored GIT repositories. Gogs will support you by keeping those mirrors in sync for you in the background. It’s even multi-user multi-organization.

code autocomplete with deep learning

When you are writing code the patterns seem to repeat every once in a while. Not only the patterns but also the occasion you are going to apply certain code styles and methods while developing.

To support a developer with this creative work the tedious and repetitious tasks of typing out what is thought can be supported by machine learning.

Chances are your favourite IDE already supports an somehow AI driven code autocomplete feature. And if it does not, read on as there are ways to integrate products like TabNine into any editor you can think of…

Visual Studio IntelliCode is a set of AI-assisted capabilities that improve developer productivity with features like contextual IntelliSense, argument completion, code formatting, and style rule inference.

IntelliCode augments existing developer workflows with machine-learning services that provide an understanding of code and its context. It’s applicable for C#, C++ (in preview), JavaScript/TypeScript (in preview), and XAML code today, and will be updated in the future to support more languages.

Visual Studio IntelliCode

Of course there are some new contenders to the scene, like TabNine:

TL;DR: TabNine is an autocompleter that helps you write code faster. We’re adding a deep learning model which significantly improves suggestion quality. You can see videos below and you can sign up for it here.

TabNine

Deep TabNine requires a lot of computing power: running the model on a laptop would not deliver the low latency that TabNine’s users have come to expect. So we are offering a service that will allow you to use TabNine’s servers for GPU-accelerated autocompletion. It’s called TabNine Cloud, …

TabNine

fiddle with .NET in your browser

There are a lot of different “fiddles”. There’s JSFiddle, SQLFiddle, HTMLFiddle, RegExFiddle, PythonFiddle, R-Fiddle, GoFiddle. There is even a page that curates a list of fiddles.

For .NET there’s one too. It supports C#, F# and VB.NET. For trying something quickly or sharing it online this is a nice way to do it:

Hello World C#
MVC even

easily draw text based flowcharts

As I am mainly producing text and markdown notes throughout the day I am always interested in ways to quickly create simple text-based flow-charts.

I did write about a couple of tools to accomplish this previously but I want to take note of the most recent addition to the toolbox: ASCIIFlow Infinity.

You open it in your browser and start drawing with the simple tools provided.

When you are done you export it to plain text and do what you feel like with it.

Here’s a feature overview:

TAICHI: opensource computer graphics library

I am following the proceedings of ACM SIGGRAPH conferences for more than 20 years now and with the recent years development in computational capacity it seems that many more algorithms and ideas make it to an application near you.

Take this one contribution by Yuanming Hu for example – the Taichi open source computer graphics library:

Taichi is an open-source computer graphics library that aims to provide easy-to-use infrastructures for computer graphics R&D. It’s written in C++14 and wrapped friendly with Python.

Yuanming Hu has been working on the development of Taichi since his third undergrad year (2016), mainly in his spare time. He would like to thank Prof. Toshiya Hachisuka and Prof. Seiichi Koshizukafor making possible his internship at UTokyo, where the initial parts of Taichi were developed.

Taichi: About

Also interesting, trivia about the name:

CCCamp 2019 – 21. – 25. August 2019

The Chaos Communication Camp is an international, five-day open-air event for hackers and associated life-forms. It provides a relaxed atmosphere for free exchange of technical, social, and political ideas. The Camp has everything you need: power, internet, food and fun. Bring your tent and participate!

CCCamp 2019 Wiki

It has been 2005 that I had the time and chance to attend an international open-air meeting of normal people. Of course I am talking about the 2005 What-the-hack I wrote about back then.

This year it’s time again for the Chaos Communication Camp in Germany. Sadly still I won’t be attending. Clearly that needs to change with one of the next iterations. With the CCC events becoming highly valuable also for families maybe it’s a chance in the future to meet up with old and valued friends (wink-wink Andreas Heil).

The Chaos Communication Camp (also known as CCCamp) is an international meeting of hackers that takes place every four years, organized by the Chaos Computer Club (CCC). So far all CCCamps have been held near Berlin, Germany.

The camp is an event for providing information about technical and societal issues, such as privacy, freedom of information and data security. Hosted speeches are held in big tents and conducted in English as well as German. Each participant may pitch a tent and connect to a fast internet connection and power.

CCCamp in Wikipedia

Enjoy the intro-movie that has just been made available to us, alongside the whole design material:

terminates the calling process if buffer is not a valid userspace pointer.

How to build security into your software? It’s always simple to find examples where things gone wrong. Where security was compromised and things did not work out as the software authors envisioned.

As always there are new concepts and operating systems being implemented.

A particularly interesting example of security software design can be observed here:

Fuchsia is an open source capability-based operating system currently being developed by Google.

In contrast to prior Google-developed operating systems such as Chrome OS and Android, which are based on the Linux kernel, Fuchsia is based on a new microkernel called Zircon. The name Zircon refers to the mineral of the same name.

Google Fuchsia

So you now know what Fuchsia is. Now on to the actual example. For this we have to take a look into the developer documentation of Zircon:

So this describes a method to get random numbers from the systems cryptocraphically-secure-random-number-generator (CPRNG). It takes a pointer to a memory location as a parameter.

Now. What’s secure about that? It’s the behaviour of the method when it is encountering an unsecure situation:

It’ll kill the calling process when the pointer is not valid.

IP-over-DNS

Picture yourself in this situation. You connect to a network and nothing works. Except for this:

It is quite common to have DNS working in networks while everything else is not. Sometimes the network requires a log-in to give you access to a small portion of the internet.

Now, with the help of a tool called iodine, you can get access to the full internet with only DNS working in your current network:

iodine lets you tunnel IPv4 data through a DNS server. This can be usable in different situations where internet access is firewalled, but DNS queries are allowed. 

It runs on Linux, Mac OS X, FreeBSD, NetBSD, OpenBSD and Windows and needs a TUN/TAP device. The bandwidth is asymmetrical with limited upstream and up to 1 Mbit/s downstream. 

iodine

Setting it up is a bit of work but given that you are anyway having access to a well connected server on the free portion of the internet it can be easily done.

Of course the source is on github.

Bitmap & tilemap generation with the help of ideas from quantum mechanics

You can get a grasp at the beautiful side of science with visualizations and algorithms that output visual results.

This is the example of producing lots and lots of complex data (houses!) from a small set of input data. It is widely used in game development but also can be helpful to generate parameterized test and simulation environments for machine learning.

So before sending you over to the more detailed explanation the visual example:

This is a lot of different house images. Those are generated using a program called WaveFunctionCollapse:

WFC initializes output bitmap in a completely unobserved state, where each pixel value is in superposition of colors of the input bitmap (so if the input was black & white then the unobserved states are shown in different shades of grey). The coefficients in these superpositions are real numbers, not complex numbers, so it doesn’t do the actual quantum mechanics, but it was inspired by QM. Then the program goes into the observation-propagation cycle:

On each observation step an NxN region is chosen among the unobserved which has the lowest Shannon entropy. This region’s state then collapses into a definite state according to its coefficients and the distribution of NxN patterns in the input.

On each propagation step new information gained from the collapse on the previous step propagates through the output.

On each step the overall entropy decreases and in the end we have a completely observed state, the wave function has collapsed.

It may happen that during propagation all the coefficients for a certain pixel become zero. That means that the algorithm has run into a contradiction and can not continue. The problem of determining whether a certain bitmap allows other nontrivial bitmaps satisfying condition (C1) is NP-hard, so it’s impossible to create a fast solution that always finishes. In practice, however, the algorithm runs into contradictions surprisingly rarely.

Wave Function Collapse algorithm has been implemented in C++PythonKotlinRustJuliaGoHaxeJavaScript and adapted to Unity. You can download official executables from itch.io or run it in the browser. WFC generates levels in Bad NorthCaves of Qudseveral smaller games and many prototypes. It led to new research. For more related workexplanationsinteractive demosguidestutorials and examples see the ports, forks and spinoffs section.

useful CSS Grid Generator

This project is a way for people to use CSS Grid features quickly to create dynamic layouts.

You can set the numbers, and units of your columns and rows, and I’ll generate a CSS grid for you! Drag within the boxes to create divs placed within the grid.

I noticed a lot of people weren’t using Grid because they felt it was too complicated and they couldn’t understand it. Grid is capable of so much, and this small generator only touches on a fraction of the features. The purpose of this is so people get up and running quickly, and create more interesting layouts.

Once you work with this a bit, I suggest checking out resources by Rachel AndrewJen Simmons, and Dave Geddes to dive deeper. There is also a CSS Grid Guide on CSS-Tricks, and a fun little game called Grid Garden to help you learn more!

Source

seen: properly scrolling through code

When working on source files with wide-ranging scopes, I wish source editors could pin the declaration lines to the top of the window like section headers, something like this…

Joe Groff on Twitter

This looks like something that would really make a difference when editing code. Let’s see how long until we get something like that in modern editors…