Pens from Jonathan Neal https://codepen.io/jonneal/ en nospam@codepen.io Copyright 2024 2024-02-12T13:26:18-07:00 Unified Form Data Representation https://codepen.io/jonneal/pen/VwRBEGE https://codepen.io/jonneal/pen/VwRBEGE Jonathan Neal

See the Code - See it Full Page - See Details

]]>
Unified Form Data Representation 2024-02-12T13:26:18-07:00
Image Upload with File Conversion https://codepen.io/jonneal/pen/rNRJJvP https://codepen.io/jonneal/pen/rNRJJvP Jonathan Neal

See the Code - See it Full Page - See Details

]]>
Image Upload with File Conversion 2024-01-31T03:41:29-07:00
Observing a given selector on an Element https://codepen.io/jonneal/pen/MWZvgyp https://codepen.io/jonneal/pen/MWZvgyp Jonathan Neal

See the Code - See it Full Page - See Details

Simulates a method that would allow a web author to observe a given selector on an element. This particular method is 684 B, 443 B gzipped.

]]>
Observing a given selector on an Element 2023-09-14T15:31:10-07:00
Observing a given selector on an Element https://codepen.io/jonneal/pen/QWzgXax https://codepen.io/jonneal/pen/QWzgXax Jonathan Neal

See the Code - See it Full Page - See Details

Simulates a method that would allow a web author to observe a given selector on an element. This particular method is 684 B, 443 B gzipped.

]]>
Observing a given selector on an Element 2023-09-14T14:21:20-07:00
Observing a given selector on an Element https://codepen.io/jonneal/pen/qBLjyjd https://codepen.io/jonneal/pen/qBLjyjd Jonathan Neal

See the Code - See it Full Page - See Details

Simulates a method that would allow a web author to observe a given selector on an element. This particular method is 431 B, 274 B gzipped.

]]>
Observing a given selector on an Element 2023-09-14T12:40:52-07:00
ShadowDOM with CSS Nesting https://codepen.io/jonneal/pen/poxdwYG https://codepen.io/jonneal/pen/poxdwYG Jonathan Neal

See the Code - See it Full Page - See Details

This demonstrates a ShadowDOM that uses CSS Nesting on `:host`. See this demo using [transpiled nesting](https://codepen.io/jonneal/details/xxyPddz).

]]>
ShadowDOM with CSS Nesting 2023-05-03T16:27:55-07:00
ShadowDOM without CSS Nesting https://codepen.io/jonneal/pen/xxyPddz https://codepen.io/jonneal/pen/xxyPddz Jonathan Neal

See the Code - See it Full Page - See Details

This demonstrates a ShadowDOM that uses CSS Nesting that has been transpiled to regular CSS on `:host`. See this demo using [untranspiled nesting](https://codepen.io/jonneal/details/qBJVmRM).

]]>
ShadowDOM without CSS Nesting 2023-05-03T15:50:07-07:00
ShadowDOM with CSS Nesting https://codepen.io/jonneal/pen/qBJVmRM https://codepen.io/jonneal/pen/qBJVmRM Jonathan Neal

See the Code - See it Full Page - See Details

This demonstrates a ShadowDOM that uses CSS Nesting on `:host`. See this demo using [transpiled nesting](https://codepen.io/jonneal/details/xxyPddz).

]]>
ShadowDOM with CSS Nesting 2023-05-03T15:51:09-07:00
Cross-Browser ShadowRoot https://codepen.io/jonneal/pen/dyqEpRm https://codepen.io/jonneal/pen/dyqEpRm Jonathan Neal

See the Code - See it Full Page - See Details

At the time of writing, Safari and Chrome support `<template shadowrootmode="open>` to create a declarative Shadow Root. Meanwhile, Microsoft Edge only supports this when I use `<template shadowroot="open>`.

]]>
Cross-Browser ShadowRoot 2023-03-30T12:44:56-07:00
contain - containment_and_counters - code sample https://codepen.io/jonneal/pen/gOjgoKj https://codepen.io/jonneal/pen/gOjgoKj Jonathan Neal

See the Code - See it Full Page - See Details

A slight variation on the MDN example for the CSS contain property at https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/CSS/contain/_sample_.containment_and_counters.html

]]>
contain - containment_and_counters - code sample 2023-01-08T22:03:59-07:00