Avegardyia a game by myself in the endess-runner genre!

Game Features Random sized obstacles and is very challenging!

A Free to play browser game with option to support it!
https://coa-100.itch.io/avegardyia

#videogames #gaming #browsergames #programming #javascript #mastodon #music #art #space #tech

A simple "copy this code" button in JavaScript

Next to all the code samples on this blog is a little "copy" button. That makes it easier to grab any of the code I've shared.

The HTML and JS is delightfully simple:

Copied HTML to 📋 HTML<button
    onclick="navigator.clipboard.writeText(
        this.parentNode.getElementsByTagName('code')[0].textContent
    );" 
    title="Copy code"
>⧉</button>

The navigator.clipboard.writeText needs a user interaction to work - so it is tied to a click on the button.

It takes some plaintext content. But how to get that content? My code samples look like this:

Copied HTML to 📋 HTML<pre itemscope itemtype=https://schema.org/SoftwareSourceCode translate=no>
    <button onclick="navigator.clipboard.writeText( this.parentNode.getElementsByTagName('code')[0].textContent );">⧉</button>
    <span>
        <img alt height=32 src=html.svg width=32>
        <span itemprop=programmingLanguage> HTML</span>
    </span>
    <code itemprop=text>[…]</code>
</pre>

There are various ways I could get that <code> element:

• Give it a unique ID (but that might clutter the code, or conflict with something else).
• Use this.nextSibling.nextSibling (but that might not work if the layout changes).
• Use this.lastChild.textContent (but, again, depends on the layout staying the same).
• Select based on itemprop (could make the code a bit longer).
• Complex filtering on a NodeList (urgh).

None of those are particularly bad per se, so I've chosen the method which makes most sense to me.

You can read more about my Classless Design, and how I use metadata to identify programming languages, including whether HTML's code blocks be translated.

To let people know that it has worked, I've added a little popover.

Every piece of code has it's own dialog element with a unique id:

Copied HTML to 📋 HTML<dialog
    id=pop
    popover=hint>Copied JS to 📋</dialog>

No JavaScript is required to show the popover when the copy button is pressed:

Copied HTML to 📋 HTML<button popovertarget=pop popovertargetaction=show>

Closing the the popover hint doesn't require JS; clicking outside it will dismiss it. But a little scrap of JS on the button's onclick will make it disappear after a few seconds:

Copied JavaScript to 📋 JavaScriptsetTimeout(
    function() {
        document.getElementById("pop").hidePopover();
    }, 
3000);

Positioning the popup so it is in proximity to the button also requires CSS - no JS.

Copied CSS to 📋 CSSdialog[popover] {
    inset: unset;
    position: absolute;
    padding: .5em;
}

If CSS isn't loaded, the default is to place it in the middle of the screen.

OK, that started out simple but got a bit more complex. Sorry!

Alt...

The HTML5 Logo.

RE: https://hachyderm.io/@davidculley/117158732139982874

It's only become worse:

> 1,834 changed files with 91,910 additions and 77,026 deletions.

https://github.com/oven-sh/bun/compare/bun-v1.4.0..main

For a patch release from 1.4.0 to 1.4.1.

#GenAI #Bun #JavaScript

i got few quality #browsergames at my itch.io site ;)
i say that because i see so much stuff that are just not good enaugh or simple not fun.

anyway feedback and support always welcome!

#games #art #music #tech #coding #javascript #html5 #ai

Well, once I became the person to guess that and I'm simply translating some textures with #Cpp everything is butter smooth again.

- switching between #Zig versions, I liked it more than the dedicated anyzig
- #Python venv activation – it's silly but feels so good, and collaborates with uv
- ensuring I have the right language server and formatter for a project, be it #Lua, #TypeScript, and trying out various options for Python
- setting LANG="C.UTF-8" only in the specific project folder because #Ansible refused to work with Polish...

The final boss was getting a really comfortable Tree-sitter setup: get the #Rust CLI, write grammar in #JavaScript, re-generate and run tests on source change as a mise Task. And then I only cloned the repo on another machine and was ready to go!

This post was written as a more cultured outlet for my excitement instead of aggresively committing mise.toml into every repository I touch

Live location is very sensitive data, but #selfhosting the server with TLS and basic authentication gives me more privacy than the big tech cloud. And it only needed reading a bit of MDN and making a basic #Docker image based on #NodeJS