lea, to programming

When writing about HTML/CSS/JS, how would you embed interactive demos into articles?

I consider to do something like using figure and figcaption elements, use an iframe inside the figure with the demo, add description and also provide the link to the code inside figcaption.

With #js enabled, it could maybe progressively enhance to a widget with html/css/js/result panels.

#html

MartinSmaxwil,
@MartinSmaxwil@digitalcourage.social avatar

@lea

I often put the code directly into the #HTML of the article. In most CMS (if you use one?) there are plugins to add individual #CSS and #JS to each article.

In #WordPress I use the "scripts and styles" plugin. If I want to display the code as well, I use additional <pre> elements.

Example article with interactive HTML/CSS/JS snippets: https://medienmarmela.de/colorpicker/

The WP plugin: https://de.wordpress.org/plugins/scripts-n-styles/

mattwilcox, to random
@mattwilcox@mstdn.social avatar

The amount of trouble I have with JS's dataset because in my mind it reads more as "data set" as in "set the data value" than "a set of data values".

I always try element.data.whatever when I need element.dataset.whatever because I'm trying to READ a data attribute on an element but dataset cognitively doesn't seem like a read operation, but a write one.

This is the trouble with language design. "set" the math term is not as common as "set" the english action term.

mattwilcox,
@mattwilcox@mstdn.social avatar

While I'm talking of English language in programming language design:

#JS should be setAttribute and unsetAttribute. Or addAttribute and removeAttribute. Because those are proper English language pairings.

But no, we have removeAttribute and setAttribute in JS, so you have to remember both instead of remembering one and logic the other out.

mjgardner, (edited ) to programming
@mjgardner@social.sdf.org avatar

This is hilarious. A engineer invented to make command line scripting easier with , because at a certain point scripts get too complicated and you need a Real Language.

https://github.com/google/zx/

This is exactly ’s use case from thirty-six years ago. But the kids want everywhere and would rather it take more work to convert their ascended scripts to a vastly different syntax.

https://github.com/google/zx/issues/581#issuecomment-1516573139

mjgardner,
@mjgardner@social.sdf.org avatar

https://fuckgov.org/@h Oh, I don’t deny it’s useful. And you’ll never catch me saying it’s bad to stick with what you know if it gets the job done—that’s one reason I continue to use #Perl.

My main point was that it’s less work converting #Bash to Perl than to #JavaScript.

The “kids want JavaScript everywhere” was admittedly a little snark directed at the “continuous amnesia” of prior art (not unique to #JS developers but their sheer number means it’s really prevalent) as described here: https://www.ufried.com/blog/continuous_amnesia_issue/

mcc, to random
@mcc@mastodon.social avatar

I continue to feel that this feature cluster is worse than being tracked by cookies from tracking pixels. Tracking pixels I at least have a reasonable understanding of when and why I get tracked: A website I visit can track me, and I can control this by what I do and don't block. If this is "topics" the browser seems to be gathering information independently and just volunteering it. That's creepier than creepy
https://mastodon.social/@rmondello@hachyderm.io/110379170600324295

dmarti,
@dmarti@federate.social avatar

@mcc If your site has any 3rd party #JS on it, then a 3rd party script can insert a Topics API iframe and JS in the iframe can call Topics API to track your users. In order to prevent this you can set a Permissions-Policy header:

https://github.com/h5bp/server-configs-nginx/pull/323

aral, to programming
@aral@mastodon.ar.al avatar

There are times I think JavaScript (and Node.js) do deserve their reputation…

(Ok, ok, I don’t, but what is this, really?)

“Date.prototype.toISOString called on incompatible receiver [object Date]”

smh

#nodeJS #javaScript #js #web #dev

aral, (edited )
@aral@mastodon.ar.al avatar

Right, implemented workaround for JavaScript’s Proxy / Date object incompatibility in JavaScript Database (JSDB)¹ and released in version 3.0.2².

Calling methods on persisted Date objects read back into memory now works as it should.

Workaround (diff): https://codeberg.org/small-tech/jsdb/commit/9e039e76f7a149df2fa7ecbbf626f813e44c0ab2
3.0.2 update (diff): https://codeberg.org/small-tech/jsdb/commit/f212566f8da4327d0b91d81e8cc6f5058ce63c47

Kudos to Pravin Divraniya for https://stackoverflow.com/a/57958494

¹ https://codeberg.org/small-tech/jsdb
² https://www.npmjs.com/package/@small-tech/jsdb

#JSDB #JavaScript #JS #database #SmallTech #Date #Proxy #web #dev

aral,
@aral@mastodon.ar.al avatar

So in case anyone was following this: it appears that built-in objects like Date in JavaScript have some internal magic (read: inconsistencies)* that means you can’t proxy them as you would normally.

More info: https://codeberg.org/small-tech/jsdb/issues/5

Not sure if this is fixable in #JSDB. The “solution” might be to discourage use of Date objects and instead persist timestamps. Which is, quite frankly, a pain in the ass.

I’ll keep looking for a workaround…

  • internal slots

#nodeJS #javaScript #js #web #dev

brianleroux, to programming

so I built a little prototype while playing around with Node 20

this would allow any language to server side render web components by shelling out

(python, ruby, php, rust, c#, go, java, etc)

is that interesting to anyone here?

#webdev #js #webcomponents #webstandards

aral, to programming
@aral@mastodon.ar.al avatar

The Stripe API doesn’t include a way to validate publishable and secret API keys.

Here’s a simple function you can use to do that:
https://codeberg.org/aral/gists/src/branch/main/validateStripeKey.md

#Stripe #API #stripeAPI #JS #NodeJS #web #dev #gist

janriemer, to programming
notwoods, to webdev
@notwoods@hachyderm.io avatar

Quick TIL post: I learned you can natively display math formulas with just #HTML, no #CSS or #JS required!
https://tigeroakes.com/posts/til-math-latex-without-css/

aral, to programming
@aral@mastodon.ar.al avatar

If you’re using HTML Validate (you should; it’s ace), update to 7.15.2. It no longer flags multiple buttons with the same name used in forms as a validation error (this is a valid pattern that lets you interpret a form differently on the server based on which button it was submitted with).

https://gitlab.com/html-validate/html-validate/-/issues/212

aral,
@aral@mastodon.ar.al avatar

PS. Kitten uses HTML Validate to show you validation issues with your pages as you develop.

:kitten:💕

https://codeberg.org/kitten/app

#SmallWeb #Kitten #web #dev #html #validation #js #NodeJS #htmlValidate #validator

bigcalm, to javascript

I need to get a basic understanding of #React ( the #JS framework ).

Is w3schools a wise choice to start with? https://www.w3schools.com/react/react_intro.asp

Or should I look elsewhere for my first taste?

I would like to avoid bad habits due to opinionated 3rd party documentation / tutorials.

anatudor, to programming

So... stupid #JS question: how can I copy a string to clipboard in Safari?

Tried:

navigator.clipboard.writeText(myString)

This works in Chrome & Firefox, but navigator.clipboard is undefined in Safari.

window.clipboardData is also undefined in Safari.

So... how can I do it?

Thanks!

chris_hayes, to javascript
@chris_hayes@fosstodon.org avatar

I'm trying out https://runjs.app for prototyping js/node.js snippets locally.
Creating a new node project every time I just want to run a quick node.js snippet is just too time consuming.

Interested in any suggestions of similar tools js devs recommend. I know repl.it is another option, but running locally is a requirement for me.
#js #webdev #node #tools

strypey, to web
@strypey@mastodon.nzoss.nz avatar

@alcinnz
I'm constantly raising an eyebrow at websites that don't even display basic text and images with JS turned off, or whose layout code is so JS-dependent the page turns into a hot mess without JS running. It's like a road you can't cycle or take public transport on, because the people who designed and built it expect you to be in a private motor vehicle. In both cases, it's hell for accessibility.

#MakeJavaScriptOptional

@ocdtrekkie @jalefkowit

#web #JavaScript #JS #accessibility

brianleroux, to programming
  • All
  • Subscribed
  • Moderated
  • Favorites
  • provamag3
  • mdbf
  • ngwrru68w68
  • modclub
  • magazineikmin
  • thenastyranch
  • rosin
  • khanakhh
  • InstantRegret
  • Youngstown
  • slotface
  • Durango
  • kavyap
  • DreamBathrooms
  • JUstTest
  • GTA5RPClips
  • ethstaker
  • normalnudes
  • tester
  • osvaldo12
  • everett
  • cubers
  • tacticalgear
  • anitta
  • megavids
  • Leos
  • cisconetworking
  • lostlight
  • All magazines