Embed Notice

HTML Code

<blockquote style="position: relative; padding-left: 55px;"><section><a href="https://mastodon.ar.al/users/aral/statuses/113323803874227547">Aral Balkan (aral@mastodon.ar.al)'s status on Friday, 18-Oct-2024 01:54:19 JST</a><a href="https://mastodon.ar.al/@aral" title="aral@mastodon.ar.al"><img src="https://gnusocial.jp/avatar/4627-48-20250615202325.webp" width="48" height="48" alt="Aral Balkan" style="position: absolute; left: 0; top: 0;">Aral Balkan</a></section><article><p>Just added a code breakdown for the Draw Together¹ Kitten² app to my blog post with the tutorial video:</p><p><a href="https://ar.al/2024/03/26/draw-together/" rel="nofollow noreferrer">https://ar.al/2024/03/26/draw-together/</a></p><p>Draw Together, in ~50 lines of code, is a real-time collaborative drawing tool on a 20×20 pixel grid where people can click to toggle the colour of each pixel.</p><p>(The full source and explanations fit the four screenshots on this post.)</p><p>¹ <a href="https://draw-together.small-web.org" rel="nofollow noreferrer">https://draw-together.small-web.org</a><br>² <a href="https://kitten.small-web.org" rel="nofollow noreferrer">https://kitten.small-web.org</a></p><p><a href="https://mastodon.ar.al/tags/Kitten" rel="tag">#Kitten</a> <a href="https://mastodon.ar.al/tags/DrawTogether" rel="tag">#DrawTogether</a> <a href="https://mastodon.ar.al/tags/web" rel="tag">#web</a> <a href="https://mastodon.ar.al/tags/design" rel="tag">#design</a> <a href="https://mastodon.ar.al/tags/dev" rel="tag">#dev</a> <a href="https://mastodon.ar.al/tags/SmallWeb" rel="tag">#SmallWeb</a> <a href="https://mastodon.ar.al/tags/WebSockets" rel="tag">#WebSockets</a> <a href="https://mastodon.ar.al/tags/StreamingHTML" rel="tag">#StreamingHTML</a></p></article><footer><a rel="bookmark" href="https://gnusocial.jp/conversation/3842487#notice-7512894">In conversation</a><time datetime="2024-10-18T01:54:19+09:00" title="Friday, 18-Oct-2024 01:54:19 JST">about 8 months ago</time> <span>from <span><a href="https://mastodon.ar.al/@aral/113323803874227547" rel="external" title="Sent from mastodon.ar.al via ActivityPub">mastodon.ar.al</a></span></span><a href="https://mastodon.ar.al/@aral/113323803874227547">permalink</a><h4>Attachments</h4><ol><li><label><a rel="external" href="https://gnusocial.jp/attachment/2422628">Untitled attachment</a></label><br></li><li><label><a rel="external" href="https://gnusocial.jp/attachment/2832937">Untitled attachment</a></label><br></li><li><label><a rel="external" href="https://gnusocial.jp/attachment/3319269">Screenshot of web page (detail, start of Source Code section) at URL https://ar.al/2024/03/26/draw-together/:Source code
The code sets up a real-time collaborative drawing tool on a 20×20 pixel grid where people can click to toggle the colour of each pixel.Here’s a breakdown of the entire source code, detailing what each section does:Create 20×20 pixel grid
const rows = new Array(20).fill().map(row =&gt; new Array(20).fill(0))
const colours = ['white', 'black']
Creates a 20x20 grid initialized with zeros. Each cell will store an index corresponding to the colours array.Validation function
const isValid = data =&gt; typeof data === 'object' &amp;&amp; typeof data.rowIndex === 'number' &amp;&amp; typeof data.columnIndex === 'number' &amp;&amp; data.rowIndex &gt;= 0 &amp;&amp; data.rowIndex &lt;= rows.length-1 &amp;&amp; data.columnIndex &gt;= 0 &amp;&amp; data.columnIndex &lt;= rows[0].length-1
Checks if the data object has valid rowIndex and columnIndex within grid bounds.Handle connections and pixel updates
export function onConnect ({ page }) {
  page.on('pixel', data =&gt; {
    if (!isValid(data)) return</a></label><br><a href="https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/113/323/781/892/923/594/original/2c7d94459b34096d.png" rel="external">https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/113/323/781/892/923/594/original/2c7d94459b34096d.png</a></li><li><label><a rel="external" href="https://gnusocial.jp/attachment/3319270">Screenshot of web page (detail, cont.):rows[data.rowIndex][data.columnIndex]++
    if (rows[data.rowIndex][data.columnIndex] === colours.length) {
      rows[data.rowIndex][data.columnIndex] = 0
    }
    page.everyone.send(kitten.html`
      &lt;${Pixel} rowIndex=${data.rowIndex} columnIndex=${data.columnIndex} pixelColourIndex=${rows[data.rowIndex][data.columnIndex]} /&gt;
    `)
  })
}
Listens for pixel updates, validates data, updates the grid, and sends the updated pixel state to everyone connected.Pixel component
const Pixel = ({ rowIndex, columnIndex, pixelColourIndex }) =&gt; kitten.html`
  &lt;button
    id='pixel-${rowIndex}-${columnIndex}'
    aria-label='pixel-${rowIndex}-${columnIndex}'
    name='pixel'
    style='
      background-color: ${colours[pixelColourIndex]};
      top: calc(5% * ${rowIndex});
      left: calc(5% * ${columnIndex});
    '
    connect
    data='{rowIndex: ${rowIndex}, columnIndex: ${columnIndex}}'
    morph
  &gt;&lt;/button&gt;
`
Defines a button element representing a pixel, styled according to</a></label><br><a href="https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/113/323/788/975/395/004/original/d998c1a58cf3c554.png" rel="external">https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/113/323/788/975/395/004/original/d998c1a58cf3c554.png</a></li><li><label><a rel="external" href="https://gnusocial.jp/attachment/3319271">Screenshot of web page (detail, cont.):its colour and position.Canvas component
const Canvas = () =&gt; kitten.html`${
  rows.map((row, rowIndex) =&gt; row.map((pixelColourIndex, columnIndex) =&gt; kitten.html`
    &lt;${Pixel} rowIndex=${rowIndex} columnIndex=${columnIndex} pixelColourIndex=${pixelColourIndex} /&gt;
  `))
}`
Renders the entire grid by mapping over each row and column, creating Pixel components.Styles component
const Styles = () =&gt; kitten.css`
  [name='pixel'] {
    position: fixed;
    width: 5%;
    height: 5%;
    border: 0;
  }
`
Applies CSS styles to the pixel buttons to size and position them correctly.Main export
export default () =&gt; kitten.html`
  &lt;page title='Draw Together'&gt;</a></label><br><a href="https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/113/323/790/831/119/935/original/b4d009e120774c56.png" rel="external">https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/113/323/790/831/119/935/original/b4d009e120774c56.png</a></li><li><label><a rel="external" href="https://gnusocial.jp/attachment/3319272">Screenshot of web page (detail, cont., last):Main export
export default () =&gt; kitten.html`
  &lt;page title='Draw Together'&gt;
  &lt;${Canvas} /&gt;
  &lt;${Styles} /&gt;
`
Constructs the main page with the canvas and styles.Like this? Fund us!
Small Technology Foundation is a tiny, independent not-for-profit.We exist in part thanks to patronage by people like you. If you share our vision and want to support our work, please become a patron or donate to us today and help us continue to exist.Aral Balkan
About the author
I’m an activist, designer, and developer. I’m one-half of Small Technology Foundation, a tiny and independent two-person not-for-profit based in Ireland. We advocate for and build small technology to protect personhood and democracy in the digital network age.To support my work, become a patron of our foundation.I’m available for public speaking and media inquiries.</a></label><br><a href="https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/113/323/791/947/950/660/original/c80095e5de40e92c.png" rel="external">https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/113/323/791/947/950/660/original/c80095e5de40e92c.png</a></li></ol></footer></blockquote>

Corresponding Notice

Embed this notice
Aral Balkan (aral@mastodon.ar.al)'s status on Friday, 18-Oct-2024 01:54:19 JST Aral Balkan
Just added a code breakdown for the Draw Together¹ Kitten² app to my blog post with the tutorial video:
https://ar.al/2024/03/26/draw-together/
Draw Together, in ~50 lines of code, is a real-time collaborative drawing tool on a 20×20 pixel grid where people can click to toggle the colour of each pixel.
(The full source and explanations fit the four screenshots on this post.)
¹ https://draw-together.small-web.org
² https://kitten.small-web.org
#Kitten #DrawTogether #web #design #dev #SmallWeb #WebSockets #StreamingHTML
In conversationabout 8 months ago from mastodon.ar.alpermalink
Attachments

Public

Embed Notice

HTML Code

Corresponding Notice