DEV Community: Jim Montgomery

Josef Müller-Brockmann poster

Jim Montgomery — Fri, 18 Feb 2022 12:38:08 +0000

tooling around with svg to share my appreciation for Swiss Style, modern design history and catch up with a little tech: https://www.jimmont.com/art/beethoven.html

the interaction and viewport dynamic made for a fun exploration into how the original was made and looks in a new context

more about the original designer Josef https://en.wikipedia.org/wiki/Josef_M%C3%BCller-Brockmann

the svg excerpt:

<svg viewBox="0 0 750 1076" version="1.1" style="width:100vw;height:100vh;">
<title>Josef Müller-Brockmann 1955 Beethoven poster</title>
<!-- remembering
Josef Müller-Brockmann
https://en.wikipedia.org/wiki/Josef_Muller-Brockmann
1955 Beethoven poster
-->
<style>
svg{background-color:#000;overflow:visible;}
:root{
    --circle: rgba(255,255,255,1);
    --pie: rgba(0,0,0,1);
    --stroke: #fff;
    --stroke-width: 3px;
}
text,tspan{font-family:arial,sans-serif;font-size: 11px; word-spacing: 0px;line-height:1.1;line-height: 1.1; white-space: pre; text-anchor:start;}
.align-right, .align-right *{text-anchor:end;}
#beethoven{font-size: 32px; font-weight: 700; line-height: 1;}

circle{fill:var(--circle, #fff);stroke:var(--stroke, #fff);stroke-width:var(--stroke-width);}
g.group{
    transform:rotate(0deg);
    transition:transform 3s;
}
g.group.on{
    /* transform:rotate(360deg); */
    animation: 3s rotations ease-in-out;
}
@keyframes rotations{
    0% {transform:rotate(0);}
    45% {transform:rotate(360deg);}
    90% {transform:rotate(0);}
    100% {}
}

path{fill:var(--pie, #000);stroke:var(--stroke, #fff);stroke-width:var(--stroke-width);}
#topdisc{fill:var(--pie, #fff);}
</style>

<g style="transform:translate(203px, 770px);" id="discs">

<rect width="60" height="60" bx:origin="0 0" fill="rgba(255,255,255,0.3)"/>
</g>

<g style="transform:translate(198px, 781px);" id="texts">
<g class="group">
<text class="align-right" id="beethoven" x="0" y="-78">beethoven</text>

<text class="align-right" id="left-labels" x="0" y="0">
<tspan x="0">tonhalle</tspan>
<tspan x="0" dy="6.6em">leitung</tspan>
<tspan x="0" dy="1.2em">solist</tspan>
<tspan x="0" dy="1.8em">beethoven</tspan>
<tspan x="0" dy="4.2em">vorverkauf</tspan>
</text>

<text x="4" y="0">
<tspan x="4">grosser saal</tspan>
<tspan x="4" dy="1.2em">dienstag, den 22, februar 1955,</tspan>
<tspan x="4" dy="1.2em">20.15 uhr</tspan>
<tspan x="4" dy="1.2em">4. extrakonzert</tspan>
<tspan x="4" dy="1.2em">der tonhalle-gesellschaft</tspan>
<tspan x="4" dy="1.8em">carl schuricht</tspan>
<tspan x="4" dy="1.2em">wolfgang schneiderhan</tspan>
<tspan x="4" dy="1.8em">ouverture zu -coriolan-,op. 62</tspan>
<tspan x="4" dy="1.2em">violinkonzert in d-dur,op. 61</tspan>
<tspan x="4" dy="1.2em">siebente sinfonie in a-dur,op. 92</tspan>
<tspan x="4" dy="1.8em">tonhalle-kasse, hug, jecklin,</tspan>
<tspan x="4" dy="1.2em">kuoni</tspan>
<tspan x="4" dy="1.2em">karten zu fr.3.50 bis 9.50</tspan>
<tspan x="4" dy="1.2em"/>
</text>
</g>
</g>
<script>
// <![CDATA[

// circle divided in 32 parts, 2π
const angleIncrement = 2*Math.PI/32;
// series x2, 1-32 => 1, 2, 4, 8, 16, 32
// dr = (end - start) / 32 = (900-260)/32 = 20;
// see from looking at the image and calculation output the added space for each circle's border
// visually approximated small and large circles
// step small number to find a reasonable value, step larger one to find value /32 where it yields at whole number
// account for the offset, notice 1px border
// radius is dr * step + sum of 1 unit borders, so index * 1px border;
// radius = step * dr + i;
const dr = 10;

let arc, arcs, arclist = [
    [], // text in first
    // [start-unit, size]
    [[-2,5], [12,5]],       // 5, -9, 5 @1
    [[-4, 6], [8, 6]],      // 6, -6, 6 @2
    [[-7, 8], [4,12]],      // 7, -4, 8+? @4
    [[-8,25]],          // 20+??, -? ? @8
    [[-4, 22]],             // ? @16
    [[-9, 20]]              // ? @32
];

let i = 0
, step = 1
, parent = document.querySelector('#discs')
, r0 = 250 //c0.getBBox().width / 2
, circle = parent.ownerDocument.createElementNS('http://www.w3.org/2000/svg', 'circle')
, path = parent.ownerDocument.createElementNS('http://www.w3.org/2000/svg', 'path')
, group = parent.ownerDocument.createElementNS('http://www.w3.org/2000/svg', 'g')
, copy, g, off
, radius
;
group.classList.add('group');
function onpath(event){
    let node = event.composedPath().find(node=>node.matches&&node.matches('g.group'));
    if(!node) return;
    if(node.matches('path')) node = node.parentNode;

    const is = 'on';

    switch(event.type){
    case 'animationend':
        node.classList.remove(is);
    break;
    case 'transitionend':
        node.classList.remove(is);
    break;
    default:
        node.classList.add(is);
    }
}
function rotatable(node){
    'touchmove, touchstart, mouseover, mousedown, transitionend, animationend'.split(/[,\s]+/).forEach(event=>node.addEventListener(event, onpath));
};
rotatable(parent);
rotatable(document.querySelector('#texts'));
while(i < 7){
    off = i * 2;
    radius = r0 + (dr * step) + off;
    console.log(i, step, radius, `${r0}+${step * dr} +${off}`);
    arcs = arclist[ i ];
    let j = 0;
    while(arc = arcs[j++]){
        g = group.cloneNode(true);
        copy = path.cloneNode();
        copy.style.setProperty('d', dpath({radius, angleIncrement, arc}));
        //copy.setAttributeNS('http://www.w3.org/2000/svg', 'd', dpath({radius, angleIncrement, arc}));
        copy.setAttributeNS(null, 'd', dpath({radius, angleIncrement, arc}));
        g.setAttribute('id', `arc${i}-${j}`);
        g.append(copy);
        parent.prepend(g);
    }

    copy = circle.cloneNode();
    copy.setAttribute('id', `c${i}`);
    copy.setAttribute('r', radius);
    parent.prepend(copy);

    step *= 2;
    i++;
}
// arc = [start-relative-to-zero, size-in-angleIncrements];
function dpath({radius, angleIncrement, arc}){

    let a0, x0, y0, a1, x1, y1;
    const [start, size] = arc;
    a0 = angleIncrement * start;
    a1 = a0 + (angleIncrement * size);
    x0 = (Math.cos(a0) * radius);
    y0 = (Math.sin(a0) * radius);
    x1 = (Math.cos(a1) * radius);
    y1 = (Math.sin(a1) * radius);

    const largeArc = Math.abs(a1 - a0) > Math.PI ? 1 : 0;

    return `M0,0 L${x0},${y0} A${radius} ${radius} 0 ${ largeArc } 1 ${x1} ${y1} Z`;

    // Safari doesn't work with CSS d:path(...)
//  return `path('M0,0 L${x0},${y0} A${radius} ${radius} 0 ${ largeArc } 1 ${x1} ${y1} Z')`;
}

// ]]>
</script>
</svg>

UI = f(state); native state management for the web

Jim Montgomery — Mon, 01 Feb 2021 04:28:14 +0000

The primary APIs/tools for Web UI message passing on the frontend are Event and postMessage(). Events have phases, security features and various useful traits, postMessage passes objects in memory around.

Events can bubble, can be encapsulated in shadow DOM, they can be dispatched on the global self for tight coupling, like for shared state across applications, they can be dispatched on specific elements and bubble up to any element along the way to consume and manipulate further as desired, separating concerns after the point of dispatching. This is how DOM elements work already. Whenever some user does something the various respective events notify of state changes, whatever they are, and the listeners can do their thing. Whether it’s global for storage events, ui-activity like scrolling, handled or unhandled promise rejections and on and on or for specific more specialized elements like forms, or custom elements extending the generic HTMLElement and using custom events mixed and matched in whatever way makes sense.

More related to this approach:

Knowledge: Events: Open Web Components
14 Events and application data flow · Web Components in Action
JavaScript.info ~ Shadow DOM and events
A playlist where the first 2 videos touch on state management: https://www.youtube.com/playlist?list=PLNM_ABHoF7B0qDu0GI09eCXimoL2AyMMq

A modern library that facilitates with lightweight API extensions for web UI’s is LitElement and the included lit-html handles state changes to views—making views a function of the state by applying a functional pattern to incoming state objects to templated views. Events are the native state communication system.

article: 2020+ web performance

Jim Montgomery — Thu, 24 Dec 2020 08:31:15 +0000

Interesting and at times hilarious article on web performance.

We rendered a million web pages to find out what makes the web slow

» Yes, good old jQuery is at the top. JQuery was first released in 2006, which is 14 years ago in human years, but much longer in JavaScript years. Measured in Angular versions, it is probably hundreds of versions ago. 2006 was a different time. The most used browser was called Internet Explorer 6, the largest social network was MySpace, and rounded corners in web pages were such a revolution that people called it web 2.0. JQuery’s primary use case was cross-browser compatibility, which is a different beast in 2020 than it was in 2006. Still, 14 years later, a full half of the web pages in our sample loaded jQuery.
Funnily enough, 2.2% of the websites threw an error because JQuery was not loaded.
Judging by this top 10, our browsers are mostly running analytics, ads, and code to be compatible with old browsers. Somehow 8% of web sites define a setImmediate/clearImmediate polyfill for a feature that isn’t on track to be implemented by any browser. «

read the rest at:
https://catchjs.com/Blog/PerformanceInTheWild

alternately at:
https://itnext.io/we-rendered-a-million-web-pages-to-find-out-what-makes-the-web-slow-72bbba9ade96

hardware fingerprinting with Canvas, WebGL, AudioContext

Jim Montgomery — Wed, 25 Nov 2020 03:59:37 +0000

EFF has a browser profiling tool which illuminates--hands on--known profiling techniques in fingerprinting browsers. Understanding how the few more effective aspects work is interesting and here are a few links to the various related resources, the video is especially useful.

excellent YouTube video surveying the techniques
EFF background and tool, also similarly useful AmIUnique.org and BrowserLeaks
Wikipedia disambiguation on Fingerprint--includes the various possibilities under science+technology
discussion in various Q&A: 1 suss sock puppets (false online identities), 2 circumvention of fingerprinting and loosely related expectations around privacy

React + LitElement Have Beers 🍺🍺

Jim Montgomery — Fri, 20 Nov 2020 10:14:36 +0000

Two simple beer listings show a React and LitElement implementation side by side. These show the nearly identical lifecycle API and feature set, including some benefits of the newer technology like encapsulation and how to use them together--which is especially useful when more performance is needed or better developer/designer experience wanted.

the web platform: lighten the JSX load in React apps

Jim Montgomery — Mon, 16 Nov 2020 08:04:39 +0000

We can simplify, modernize and accelerate UI work with React by translating templates at runtime as-is. Several years ago browsers implemented a new way of embedding expressions in strings called template literals (backticks with ${ expressions }), including tagging these expressions for specific handling. We can modernize our React apps by moving the template work in JSX build processes to the runtime using these template literals and the HTM helper library. This removes the associated transformation cost in development, simplifying build processes while also mostly removing the need to maintain knowledge related to the differences between standard HTML and this XML dialect. The HTM library itself offers a list of additional conveniences over JSX that I've come to expect in conventional work like supporting self-closing tags, better fragment handling, etc. Here's a simplified example and linked working gist and demo:

const jsx = htm.bind(React.createElement);

class App extends React.Component{
    constructor(props){
        super(props);
        const count = Number(props.count) || 0;
        this.state = { count };
        this.update = this.update.bind(this);
    }
    update(e){
        let {count} = this.state;
        count++;
        this.setState({count});
    }
    render(){
        return jsx`
<label>
click ${ this.state.count }  <button onClick=${ this.update }> from ${ this.props.count } </button>
</label>
        `;
    }
}

ReactDOM.render(
    jsx`<${ App } count=1 key=2> <//>`,
    document.querySelector('[react]')
);

Give it a try to simplify and accelerate your development experience. There's also a previous late 2018 mention here on DEV.

On The Web Platform: Following several several years of using frameworks and libraries I realized the high cost associated with this Catholic-wedding approach, especially when something naturally changes like updates, etc. As a result I began focusing on what patterns and trends were actively evolving in native browser support. This based on the premise that in browsers, the engineering and vetting of solutions is of a higher caliber than the in-the-wild constantly maturing community. As a result those native solutions will tend to be more stable and longer lived, and a better investment long-term.

the web platform: validate email addresses, internationalized

Jim Montgomery — Wed, 11 Nov 2020 04:20:54 +0000

The following snippet checks email addresses using the URL interface and if it looks ok does a DNS lookup for the related MX record. It fully supports internationalized and valid character sets. The DNS lookup should work in browsers and Cloudflare workers, and the commented segment in Deno.

async function validEmail(address, checkDomain=false){
    const emailPattern = /^[^@]{1,64}@[a-z0-9][a-z0-9\.-]{3,252}$/i;
    let email, valid = false, error, same = false, domain;
    try{
        // URL handles punycode, etc using browser implementation
        const url = new URL(`http://${ address }`);
        const { username, hostname } = url;
        email = `${username}@${hostname}`;
        same = address === email;
        valid = emailPattern.test( email );
        if(!valid) throw new Error(`invalid email ${ email }`);

        if(checkDomain){
            // function hasMX(dns){ return dns?.[0]?.exchange ? true: false; }
            // domain = await Deno.resolveDns(hostname, 'MX').then(hasMX).catch(hasMX);
            function hasMX(dns){ return dns?.Answer?.[0]?.data ? true: false; }
            domain = await fetch(`https://cloudflare-dns.com/dns-query?name=${ hostname }&type=MX`, {headers:{Accept: "application/dns-json"}}).then(res=>res.json()).then(hasMX).catch(hasMX);
        }
    }catch(fail){
        error = fail;
    };
    return {email, same, valid, error, domain};
}

[
 'user+this@はじめよう.みんな'
, 'stuff@things.eu'
, 'stuff@things'
, 'user+that@host.com'
, 'Jean+François@anydomain.museum','هيا@יאללה'
, '试@例子.测试.مثال.آزمایشی'
, 'not@@really'
, 'no'
].forEach(async address=>{
    let result = await validEmail(address);
    console.log(result, address);
});
[
  'someone@dev.to'
].forEach(async address=>{
    let result = await validEmail(address, true);
    console.log(result, address);
});