Mario Breskic

Kommunikationsdesigner

Schlagwort: build in public

  • Website ist fertig

    Nachdem ich mich am Wochenende davon überzeugen konnte, daß auch mein privater Mastodon-Server tadellos läuft, gab es nur noch eines zu tun, nämlich die Suchfunktion meiner Website nochmal zu überarbeiten, sowie die Darstellung von Links so aufzubauen, daß man sie als Links einwandfrei erkennen kann (’n bißchen old-school ist hier nicht verkehrt, schließlich stellt sich irgendwann die Frage danach, was einzigartig überhaupt bedeutet, wenn es um das Interface einer Website wie dieser geht).

    Und was bleibt jetzt noch anderes zu tun, als sich einfach kurz zurückzulehnen und sich selbst zu sagen: gut gemacht, Ziel erfüllt.

    Eine Schaffenspause ist hier durchaus angebracht, denn jede freie Minute wurde seit einigen Monaten von Arbeiten an Website und Server aufgefressen.

    In diesem Sinne: hallo, willkommen zurück, und bis demnächst!

    Rio

  • Update 7: Change Notes 30. März 2026

    Update 7: Change Notes 30. März 2026

    Layout

    Ich wage es, eine Website oben ohne Navigationsleiste zu haben. Stattdessen befindet sich die Navigation in der Sidebar. Das hat vor allem praktische Gründe: immer gnadenlos die Navigationsleiste überall und auf jeder Seite zu sehen, sogar auf jeder Website zu sehen, zeigt mir eine kreative Sackgasse. Warum also nicht den Content nach oben schieben? Ist ja meine Website.

    Typografie

    Aus ähnlichen Gründen wie beim Header habe ich mich mich gegen Webfonts, und für einen System Font Stack entschieden. Mit WordPress noch viel einfacher umzusetzen, als ich dachte.

    Bücherregal

    Neues Lesematerial aufbereitet. Besonderer Dank hier an Eva Czajkowski von Rémy & moi und Kyle T. Webster für die Hinweise auf diese Bücher.

    Socials

    Out of office und After hours 😉

  • BlackInk Brush: DEBUG Vertical RGB Stripes

    BlackInk Brush: DEBUG Vertical RGB Stripes

    Heute nochmal zurück zu einer alternativen Version eines meiner CRT-Pinsel gegangen und da lag bei mir glatt Armin Hofmanns „Methodik der Form- und Bildgestaltung“ auf dem Tisch, dessen Cover mich fasziniert. Was läge da näher, als eine kleine Studie zu machen, um einen Pinsel auszuprobieren?

    Der Code:

    cfg {
    	name = "DEBUG Vertical RGB Stripes";
    	renderingTime = 60;
    }

    float4 main(idatas i) {
    	// Normalize stroke space UVs
    	box2 b = box2FromCenterAxe(i.strokeStartPos, length(i.strokePos - i.strokeStartPos), normalizeSafe(i.strokePos - i.strokeStartPos));
    	float2 uv = 4 * b.toCenter(i.pos) / b.size;

    	// Scale up horizontal frequency
    	float stripe = floor(uv.x * 60); // visible stripes

    	// Simple stripe pattern: R, G, B
    	float3 col = float3(0.0, 0.0, 0.0);
    	if (mod(stripe, 3) == 0) {
    		col.r = 1.0;
    	} else if (mod(stripe, 3) == 1) {
    		col.g = 1.0;
    	} else {
    		col.b = 1.0;
    	}

    	return float4(col, 1.0);
    }
  • BlackInk Brush: CRT Melt (Procedural)

    BlackInk Brush: CRT Melt (Procedural)

    Zwischen den Seiten von Neuromancer, und Zen & The Art of the Macintosh, habe ich wieder ChatGPT ausgepackt, und mit Hilfe folgender Dokumente BSL Doc und BSL Samples, diesen Pinsel rekonstruiert:1

    cfg{
        name = "CRT Melt (Procedural)";
    }

    globals{

        uiTab "CRT";

        float rgbOffset = 0.03;
        {
            uiTab = "CRT";
            uiName = "RGB Separation";
            uiMin = 0;
            uiMax = 0.2;
        }

        float meltStrength = 0.5;
        {
            uiTab = "CRT";
            uiName = "Vertical Melt";
            uiMin = 0;
            uiMax = 2;
        }

        float wobbleStrength = 0.3;
        {
            uiTab = "CRT";
            uiName = "Horizontal Wobble";
            uiMin = 0;
            uiMax = 2;
        }
    }

    float4 main( idatas i )
    {
        // ----- stroke space -----
        box2 b = box2FromCenterAxe(
            i.strokeStartPos,
            length(i.strokePos - i.strokeStartPos),
            normalizeSafe(i.strokePos - i.strokeStartPos)
        );

        float2 uv = b.toCenter(i.pos) / b.size;

        // ----- CRT distortions -----
        float melt = uv.y + sin( uv.x * 10 + i.time * 2 ) * meltStrength;
        float wobble = sin( uv.y * 40 + i.time * 4 ) * wobbleStrength;

        // ----- RGB sampling positions -----
        float ur = uv.x + wobble + rgbOffset;
        float ug = uv.x + wobble;
        float ub = uv.x + wobble - rgbOffset;

        // ----- stripe signal -----
        float sr = step( 0, sin( ur * 60 ) );
        float sg = step( 0, sin( ug * 60 ) );
        float sb = step( 0, sin( ub * 60 ) );

        float3 col = float3( sr, sg, sb );

        return float4( col, 1.0 );
    }

    Das dabei entstandene ChatGPT‑Projekt kann man bis auf weiteres hier abrufen und selbst verwenden, um eigene Pinsel für BlackInk zu entwickeln.

    1. Die Dokumente habe ich auf https://steamcommunity.com/app/233680/discussions/0/4031351002388283519/ gefunden ↩︎

  • Fix für titellose Posts in WordPress, für SEO, GEO, und Social Media

    Weil ich mehrere Microblogging-Kategorien habe, die keine Titel brauchen, hier ein Fix für das Erstellen eines Pseudotitels für SEO, GEO, und Social-Media-Links:

    // Shared function for title-less posts in certain categories
    function mb_title_for_titleless_notes( $title ) {

        if ( ! is_singular( 'post' ) ) {
            return $title;
        }

        global $post;

        // Only act if the post has no title
        if ( trim( $post->post_title ) !== '' ) {
            return $title;
        }

        // Get categories
        $categories = get_the_category( $post->ID );
        if ( empty( $categories ) ) {
            return $title;
        }

        // Allowed categories
        $allowed = [ 'macht', 'notiert', 'liest', 'hoert', 'schaut', 'spielt' ];
        $matched_category = null;

        foreach ( $categories as $cat ) {
            if ( in_array( $cat->slug, $allowed, true ) ) {
                $matched_category = $cat;
                break;
            }
        }

        if ( ! $matched_category ) {
            return $title;
        }

        // Build replacement title
        $date = get_the_date( 'j. F Y, G:i', $post ); // German 
        $category_name = $matched_category->name;

        // Example: "Notiert: 9. Januar 2026, 9:46 Uhr - Mario Breskic"
        return sprintf(
            '%s: %s Uhr - Mario Breskic',
            $category_name,
            $date
        );
    }

    // HTML <title>
    add_filter( 'wpseo_title', 'mb_title_for_titleless_notes', 20 );

    // Open Graph <meta property="og:title">
    add_filter( 'wpseo_opengraph_title', 'mb_title_for_titleless_notes', 20 );

    // Twitter <meta name="twitter:title">
    add_filter( 'wpseo_twitter_title', 'mb_title_for_titleless_notes', 20 );
    // Built with ChatGPT
  • Update 6: Change Notes 18.10.2025

    Update 6: Change Notes 18.10.2025

    Layout verbessert

    • Sidebar und Paginierung eingeführt
    • Paginierung ist jetzt menschen­lesbar, und damit auch maschinen­lesbar
    • Paginierungs-Bug beseitigt
    • Vereinheitlichte Darstellung

    Links auf der Website

    • Sidebar verlinkt jetzt zu allen Seiten meiner Website
    • Sidebar beinhaltet jetzt eine Webroll (ersetzt damit die Blogroll)
    • Relationale Links nach XFN für Webroll und Social Links
    • Sidebar beinhaltet jetzt Links zu meinen Socials

    Artikel

    Shortform‑Artikel sind jetzt einfach ein normaler Bestand­teil des Feeds

  • Persisting Context: Kontext erhalten mit Index-Posts

    Ich beschäftige mich seit einigen Wochen mit einem der größten Probleme von Social Media: dass selbst Threads ihren Kontext über die Zeit verlieren.

    Wenn ich mehrere Posts verfasse, entstehen diese meist aus einer bestimmten Stimmung oder Absicht heraus. Wer in dem Moment live dabei ist, kann diesen Zusammenhang noch „hören“, fast wie den Tonfall meiner Stimme. Doch Social Media funktioniert überwiegend asynchron: ich schreibe jetzt, andere lesen irgendwann.

    Das Problem: Kontextverlust in Social Media

    Das Problem: Algorithmen zeigen Posts nicht in der ursprünglichen Reihenfolge, sondern nach vermuteter Aufmerksamkeit. So kann es passieren, dass jemand Monate später nur einen einzelnen Post von mir sieht – etwa über den Nutzen von Dokumentenscannern für Grafikdesigner mit einem Faible für Texturen – ohne zu wissen, warum ich ihn geschrieben habe oder ob das Thema für mich noch aktuell ist. Der Kontext ist verloren. Und auch ich gehe in den seltensten Fällen einfach mal irgendwessen Timeline durchsuchen, um zu rekonstruieren, um was es ging und ob es noch mehr gibt.

    Social Media wird dadurch zu einer Aneinanderreihung von Einzelpostings, die so chaotisch wirken können wie die Launen eines Glücksspielautomaten, sogar dann wenn sie von nur einem einzelnen Account stammen.

    “By treating a pinned post as a living index, Mario turns the most rigid feature of social media into its most flexible one — a single anchor that can grow, branch, and even hand off gracefully to the next index when it’s time to move on.”

    ChatGPT

    Die Lösung: Kontext erhalten mit Index-Posts

    Meine Lösung? Persisting Context – also Kontext erhalten. Dafür nutze ich einen gepinnten Beitrag als Index, an den ich thematische Threads anhänge. Jeder neue Thread verknüpft sich mit diesem Index, kann aber wiederum eigene Unterthemen entfalten. Auch experimentiere ich mich Randnotizen und Anmerkungen, im Moment mit den Hashtags #aside und #notes, falls ich zu einem bestimmten Post etwas anmerken möchte.

    Screenshot des gepinnten Posts, der als Index für weitere Threads dient.
    Screenshot einer Antwort auf den gepinnten Post, die zu einem Thread verlinkt, mitsamt kurzer Erklärung, worum es in dem Thread geht: hier im Beispiel geht um behind the scenes aus den beiden Arbeitsräumen Labor und Werkstatt
    Screenshot einer Antwort auf den gepinnten Post, die zu einem Thread verlinkt, mitsamt kurzer Erklärung, worum es in dem Thread geht: in diesem Beispiel ermöglicht der verlinkte Thread eine gewollte Aneinanderreihhung von Retweets bzw. Reposts, die sonst für sich alleine stehen würden.

    Es entsteht eine Art Fächer: alle Threads gehen von einem gemeinsamen Index-Post aus, stellen aber ihre jedoch ihre eigenen Inhalte dar. So bleiben Themen klar voneinander getrennt, aber gleichzeitig im größeren Zusammenhang erkennbar.

    Zwei willkommene Nebeneffekte hat diese Methode auch: erstens bleibt durch den Erhalt des Kontextes auch die Sichtbarkeit der Posts erhalten, nichts geht mehr irgendwo verloren (außer man will es), und zweitens steigt die Anzahl der Views der eigenen Posts im Thread.

    Besonderer Dank an arianekonzepte auf Bluesky: durch den Hinweis darauf, dass mein Buildinpublic-Thread auf Bluesky über eine Lösung in huginn nicht nur übersichtlich war, sondern auch von einem kleinen Themenbot geboostet wurde, kam ich erst wieder auf diese Möglichkeit der Ordnung auf Social Media.

  • Happy Birthday, ASCA! Mein Social-Wall-Projekt wird ein Jahr alt

    Heute vor einem Jahr habe ich das damals noch unter https://social.mariobreskic.de/ erreichbare Projekt namens ASCA, Automated Social Content Archiver, gestartet: um eine Idee von mir umzusetzen, die es ermöglicht, dass man meine Posts auf meinen zur Zeit aktiveren Social-Media-Accounts auch dann lesen (und per RSS abonnieren, crawlen, weiterverarbeiten, mit AIs durchsuchen, usw.) kann, wenn man weder einen Account auf diesen Seiten hat, noch einen Account haben will.

    Liberate the Post! sozusagen.

    Und jetzt, nach einem Jahr, finde ich zwischen Familientreffen, der fortlaufenden Bedrohung durch Hornissen und Wespen, kurz Zeit, um mir die ersten Beiträge anzuschauen, die auf meiner Social Wall veröffentlicht wurden. Ich erwarte einige Posts, die wenig mehr aussagen, als „Test“, „Noch ein Test“ und „Dieser Test muss jetzt auch noch sein“.

    Partyhüte aufgesetzt? Cool, aber so spannend wird das nicht.

    Die ersten drei Posts

    Tag 0, einen Tag vor dem offiziellen Launch:

    „This is a test without a title, but with a single tag.
    For a thing I am doing.    “

    Ursprünglich gepostet auf meinem Sideblog auf Tumblr, war dies schlicht der erste gelungene Test der Übertragung von Inhalten aus einer Social-Media-Plattform nach WordPress. Und welchen Tag hat es einfach nicht mitgenommen? Beim Blick auf die Quelle auf Tumblr, steht er da: #strength is performance.
    Was ich mit diesem Tag gemeint habe? Keine Ahnung mehr, der Kontext erschließt sich mir nicht mehr.1

    Und so folgt dann auch schon der erste richtige Beitrag, der auch mit Hashtags übertragen wurde, schon am nächsten Tag, mit dem Launch am 24. August 2024:

    I am currently working on a sort of a public facing backbone archive for my social media, using WordPress.
    The main idea is to collect all of my social media posts from now on in one single place, so that we can have a social wall of basically everything.
    I think that each social media website provides a certain tone, which can add to our work.
    It basically works like this:
    my own posts on Tumblr (and maybe soon Instagram and Twitter, too) are being copied as native WordPress posts.
    Stay tuned, I think I will bash this one out in the next few hours.
    If all works out properly, you can watch things pop up on https://social.­mariobreskic.­de/ over the next few months.
    I have a need to build and learn in public. Always have. So I will do just that.
    Next on the list: my own website, and making a tumblr theme which works for me (I need a sidebar to just add tags to).
    I expect a lot of tweaking, in general, since what I want and need is usually something I can build with what I have.

    https://codeandcanvas.tumblr.com/post/759711141568102401/i-am-currently-working-on-a-sort-of-a-public

    Interessant, zu diesem Zeitpunkt waren Twitter und Instagram noch gar nicht eingebunden, aber ich dachte schon daran, wie ich sie einbinden würde. Wusste ich gar nicht mehr! Cool, ich lese meine eigenen öffentlichen Aufzeichnungen von vor einem Jahr.

    Und am gleichen Tag folgte dann auch schon der erste Tweet, der in meiner Social Wall zugänglich gemacht wurde. Und damals war noch ein anderer Hashtag der Trigger für das selektive Speichern? ACAS und nicht, wie später, ASCA. Könnte aber auch ein Fehlerteufel gewesen sein.

    I am currently building a public archive of my social media posts using #automation.
    You can watch the progress here https://social.­mariobreskic.­de/ #acas #buildinpublic #LearnInPublic

    https://x.com/MarioBreskic/status/1827384913391129073

    Auch damals lag mir diese Art des öffentlich dokumentierten Arbeitens, die Tags #buildinpublic und #learninpublic sind mir so vertraut wie #gläsernewerkstatt und #gläserneslabor, aber #learninpublic hab ich in letzter Zeit eher selten verwendet (was ich übrigens auch einfach auf meiner Social Wall selber nachschlagen kann).

    Wie es weiterging

    So kamen dann auch mit der Zeit Instagram, Threads, Mastodon und auch Bluesky hinzu, und mir wurde klar, dass ich bei meinen eigenen Posts langsam in Richtung steigender Ansprüche ging, damit es wirklich wert ist, dass jemand seine Zeit hergibt, um von mir etwas zu sehen, zu lesen.

    Auch gab es dann noch ein paar Umstellungen und Veränderungen, und auch die Subdomain wanderte von social.mariobreskic.de zu socialwall.mariobreskic.de, aber das waren noch die kleineren Veränderungen. Und jetzt, ein Jahr nach Launch, bin ich froh darüber, dass dieses Projekt einfach existiert. Es ist da. Es selbst persistiert Social Media und darum ging es mir: wenn jemand einfach keinen Bock auf Social Media hat (und ich kann es so gut verstehen), aber trotzdem einfach und dass ohne sich irgendwo einzuloggen nötig ist, sehen will, was ich da so treibe, kann er das seit einem Jahr ganz einfach auf meiner Social Wall auch tun.

    Wohin es geht

    Das steht noch in den Sternen für ASCA. Und für mich auch. Danke fürs Mitfeiern und danke für so manch gutes Wort an passender Stell’.

    Jetzt auf „Veröffentlichen“ klicken und feiern gehen.

    1. Ab morgen, den 25. August 2025 um 7:59 Uhr kann man unter dieser URL https://www.mariobreskic.de/blog/persisting-context-kontext-erhalten-mit-index-posts/ zu dem Thema des Kontextes auf Social Media mehr lesen, oder aber auf ein paar meiner Social-Media-Accounts schon schauen, wozu ich die Möglichkeit eines gepinnten Beitrages verwende. ↩︎
  • Update 5: Change Notes 11.08.2025

    Update 5: Change Notes 11.08.2025

    Change Notes beziehen sich auf Arbeiten seit den letzten Change Notes. Ich war um Vollständigkeit bemüht, kann aber aus Gründen der Sicherheit nicht ins Detail gehen.

    AEO/SEO1

    Datenschutzerklärung überarbeitet

    Design

    Informationsergonomie, menschorientiertes Design und Signaletik

    • Linkwarden als Speicher für Links aus Artikeln aktiviert, doppelte Archivierung in Linkwarden (nicht öffentlich) und archive.org (öffentlich) beugt Link rot vor (siehe Snippet hier)
    • Redirects für alle Veränderungen implementiert
    • Maschinenlesbar bedeutet für Menschen lesbar (fortlaufende Arbeit, die Schnittstellen unter AEO/SEO erleichtern beide Lese-Arten)
    • Verschiedene Scripts hinzugefügt, die informationsdichten Inhalt von optionalem/ornamentalem Inhalt trennen (beispielsweise werden in der Sitemap nur die Inhalte berücksichtigt, die nicht durch Automatisierung und Integration entstehen)
    • Code-Snippets haben jetzt einen Button, mit dem man den ganzen Code mit nur einem Klick kopieren kann
    • Artikel und Seiten zeigen an, wann sie als letztes Mal nach der Veröffentlichung bearbeitet wurden

    Kategorien und Seiten, Navigation

    • Neue Kategorien: Macht (ehemals Baut), Baukasten (ehemals eine einzelne Seite namens Toolbox), Kategorie Status wurde zum Zweck der Übersichtlichkeit aufgelöst
    • Breadcrumb-Navigation hinzugefügt
    • Suche verbessert: Suchergebnisse werden hervorgehoben und ihre Anzahl angezeigt
    • Weniger Kurznachrichten-Kategorien auf der Landing Page (experimentell)

    Projekte

    Design-Informationsdienst (auch bekannt als Grafikdesignfeed 2.0)

    Momentaner Umfang des Netzwerks: auf Bluesky, Mastodon, Threads und Twitter werden dreimal täglich die interessantesten Artikel gepostet

    Mastodon

    • Anbindung an das Fediverse verbessert4
    • Suche mittels Elasticsearch optimiert

    Social Wall

    1. Zu AEO „Answer Engine Optimization“ siehe auch dieser Thread ↩︎
    2. Über humans.txt: About humans.txt ↩︎
    3. Siehe mehr dazu hier: Getting Started with llms.txt ↩︎
    4. Durch Anpassung der nginx-Direktiven wurden sowohl die Reichweite meiner Instanz daramtisch erhöht, als auch fehlerhafte Anfragen mittels .well-known beseitigt. Aktuelle Direktiven teile ich gerne auf Anfrage auf meiner Website hier ↩︎
  • Projekt: 9 Monate Social Media Wall

    Projekt: 9 Monate Social Media Wall

    Seit August letzten Jahres betreibe ich eine WordPress‑Instanz, deren einzige Funktion darin besteht, bestimmte Posts von mir auf diversen Social-Media-Webseiten zu archivieren.

    Ziel dieses Projekts ist es, meine eigenen Inhalte außerhalb der jeweiligen Plattformen verfügbar und vor allem durchsuchbar zu machen – meiner Er­fahrung nach ist die wichtigste Funktion sozialer Netzwerke die Suche, bzw. die Durch­suchbarkeit.

    Screenshot der Landingpage meines Social‑Media‑Archivs
    Mein Projekt „ASCA – Automated Social Content Archive“

    Leider wird diese Funktion häufig dadurch eingeschränkt, dass die Betreiber solcher Plattformen Inhalte nur registrierten Nutzern zugänglich machen. Mein Archiv wirkt diesem Umstand entgegen und stellt meine Beiträge in einer Weise bereit, die meiner Idee eines eigenen öffentlichen Archivs gerecht wird.

    Umgesetzt habe ich das Projekt einerseits mit WordPress, das sich erneut als Lösung für etwa 80 % aller Web­projekte anbietet, andererseits mit dem Automatisierungs­dienst ifttt (ich habe darüber – wenn auch nur kurz – bereits geschrieben, u. a. hier: https://www.mariobreskic.de/nach-dem-bachelor-vertiefung-der-grundlagen/).

    Screenshot meiner IFTTT-Applets mit dem Stichwort #asca
    Screenshot meiner IFTTT-Applets mit dem Stichwort #asca

    Mit ifttt habe ich sogenannte Applets erstellt, die ausgewählte Social-Media-Accounts nach dem Hashtag #asca durchsuchen. Entsprechende Beiträge werden anschließend als WordPress‑Posts in meinem Archiv gespeichert und veröffentlicht – automatisch.

    Ich plane, diese Automatik künftig noch zu verfeinern, da ich mich zunehmend in Richtung eines achtsameren Social-Media-Marketings bewege: Ich möchte auf meinen Kanälen nur noch Inhalte mit Substanz und Botschaft veröffentlichen – nicht mehr jede Moment­aufnahme. Doch das ist (noch) Zukunfts­musik.

    Der Clou an der Sache ist für mich, dass eine neue Betrachtungs­ebene meiner Beiträge entsteht – eine Art Vogel­perspektive: Hashtags werden aus den ursprünglichen Posts übernommen und verbinden Inhalte plattform­übergreifend – ob Instagram, Threads, Twitter oder Tumblr.

    Screenshot des Hashtags automation in meinem Social‑Media‑Archiv
    Screenshot des Hashtags „automation“ in meinem Social‑Media‑Archiv
    Einzelansicht eines archivierten Beitrags mit sogenannter Tag‑Wolke rechts

    Da ich das Projekt seit August 2024 als built in public führe, möchte ich es auch weiterhin trans­parent halten – weil mir die Idee gehört, die eigenen Beiträge zu besitzen und selbst zu speichern. Dass mein Content somit die Plattform überdauert, auf der er ursprünglich veröffentlicht wurde, hat für mich einen ganz eigenen Charme.

    Mein August ist zwar bereits voll verplant, aber vielleicht schaffe ich es trotzdem, ein oder zwei Sätze über dieses Projekt zu schreiben, wenn es dann ein Jahr alt ist. Bei Fragen zu den Applets oder Plugins darf man mich gern kontaktieren. Ich würde mich freuen, wenn sich weitere Gestalter für diese Form des öffentlichen Archivierens interessieren.

    Völlig automatisch läuft das Archiv allerdings nicht: Statt meine Bilder und Videos von den Servern Dritter einzubetten, lade ich eigene Versionen hoch – in deutlich höherer Qualität als auf Social-Media-Plattformen üblich und mit urheber­rechtlich relevanten Informationen versehen.

    Ansicht des Beitragsbildes im Content‑Credentials‑Inspector

    Permalink zu dem Projekt „ASCA ‑ Automated Social Content Archive“.