Créer un compteSe connecter

Recherches récentes

Aucune recherche récente

Options de recherche

Disponible uniquement lorsque vous êtes connecté.
mastouille.fr est l'un des nombreux serveurs Mastodon indépendants que vous pouvez utiliser pour participer au fédiverse.
Mastouille est une instance Mastodon durable, ouverte, et hébergée en France.

Administré par :

Statistiques du serveur :

582
comptes actifs

mastouille.fr: À proposAnnuaire des profilsPolitique de confidentialité

Mastodon: À proposTélécharger l’applicationRaccourcis clavierVoir le code sourcev4.3.4

#javascript

23 messages18 participants1 message aujourd’hui
Suite du fil
Public *
Aral Balkan

OK, so here’s likely the simplest possible example demonstrating:

• The same route, implemented as both a Kitten JavaScript Page (.page.js) and as a Kitten Markdown Page (.page.md)

• How to persist to the default Kitten JSDB¹ database.

(That first line with the nullish coalescing operator creates a “table” on the database with a default value for the count if it doesn’t already exist.)

kitten.small-web.org

¹ kitten.small-web.org/tutorials

Three windows: top-left, source of page.js version of Kitten count example, bottom-left, source of page.md version, and on the right, the output in a browser. Top-left: kitten.db.kittens ??= { count: 0 } export default () => kitten.html` <h1>Kitten count</h1> <p>${'🐱️'.repeat(++kitten.db.kittens.count)}</p> ` Bottom-left: --- script: | kitten.db.kittens ??= { count: 0 } --- # Kitten count ${'🐱️'.repeat(++kitten.db.kittens.count)} Right: Kitten count (heading) and 15 🐱️ emojis.
#Kitten#SmallWeb#web
Public
Aral Balkan

Coming soon (likely this afternoon, I’m writing tests and docs and updating examples as we speak)…

This is the sort of thing you’ll be able to do with Markdown pages. Just pop any arbitrary JavaScript you want in the new script block in the front matter and then import and use components as well as plain old JavaScript tagged template variable interpolation (not shown in this example) inside your Markdown.

The screen has all the code (sans the end of the last line of CSS and the closing tags for the <style> and <div> in the Reactions component, which I couldn’t make fit without reducing the font size) for the example you see in the browser with functional buttons that persist their state to Kitten’s built-in default database.

When I say all the code, I mean all the code. There is no scaffolding. Those two files are the only two files in the project.

kitten.small-web.org

Screenshot: three windows: left side: Source of index.page.md, top-right browser showing running web app, bottom-right, source of Button and Reactions components. Contents of windows: index.page.md: --- title: An interactive markdown page script: | import Reaction from './Reaction.fragment.js' // Initialise database if necessary. kitten.db.reactions ??= {} kitten.db.reactions.Heart ??= 0 kitten.db.reactions.Confetti ??= 0 kitten.db.reactions.Smiley ??= 0 let page export function onConnect (data) { page = data.page } export function onReaction (data) { kitten.db.reactions[data.type]++ page.send(kitten.html`<${Reaction} />`) } --- <page css> # Hello! While this is a __markdown__ page, I can easily layer interactivity by adding a simple component in a script block. ## Reactions{id=your-reactions} <${Reaction} /> Browser (output): Hello! While this is a markdown page, I can easily layer interactivity by adding a simple component in a script block. Reactions Heart button: 5 Confetti button: 4 Smiley button: 3
#Kitten#SmallWeb#SmallTech
Public
Andrii Kuznietsov

👨‍💻 Структурований курс для практичного вивчення #JavaScript із 126 готовими проєктами та дорожньою картою:
• 30 базових + 96 просунутих проєктів різної складності
• Онлайн-демонстрації та повний вихідний код кожного проєкту
• Ігри, утиліти, анімації та візуалізації алгоритмів
github.com/swapnilsparsh/30Day

Projects made during the 30 days of the JavaScript challenge - swapnilsparsh/30DaysOfJavaScript
GitHubGitHub - swapnilsparsh/30DaysOfJavaScript: Projects made during the 30 days of the JavaScript challengeProjects made during the 30 days of the JavaScript challenge - swapnilsparsh/30DaysOfJavaScript
Suite du fil
Public
Oblomov

This could be achieved with something like this

#filteredtable tr { display: none }
#filteredtable tr[data-name*=dynamic-value-of(#filterInput)] { display: table-row }

where dynamic-value-of() is a (non-existent) #CSS function that returns the (string) value of #filterInput as it changes dynamically

Since there is not such function, I have to register a #JavaScript function with the keyup event to update the CSS rule whenever the input value changes.

So, can we get rid of JS here?

3/3

Public
Oblomov

Speaking of #webDev, what the #HTML and #CSS standards need is some way to style nodes based on DOM values of other modes. Unless I'm missing something, we still need #JavaScript to achieve the following, but I'm open to recommendations or suggestions about things I might have missed, so let's make this an #askFedi

The intent here is to develop a JS-free “quick filter” over a list or table.

Here's what I've done:

1/n

ExplorerFlux en direct
À propos