Mario Breskic

Kommunikationsdesigner

Autor: Mario Breskic

  • Hack für Microblogformate erweitert: Datum und Uhrzeit sind jetzt auch Teil der Breadcrumbs, und nicht nur Pseudo-Titel für die über IFTTT reinkommenden Microposts.

  • Ich habe die ersten 80% meines Designs für meine Website bereits. Jetzt dränge ich auf die letzten 20%. Ich bin zufrieden und fertig mit meiner Website als Interface. Die Reduktion war der Schlüssel.

  • 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 😉

  • Meine Website navigationslos und ohne „Header“ gemacht, und einen System Font Stack gebaut.

  • Neue Taxonomie für Kreative auf GitHub veröffentlicht: https://github.com/mariobreskic/Minimal-Viable-Creative-File-Taxonomy-MVCFT

  • JSON-LD und schema.org

  • Darkest Dungeon von Red Hook Studios

  • 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