just small circles 🕊
@smallcircles@social.coop  ·  activity timestamp 3 days ago
Aral Balkan
@aral@mastodon.ar.al  ·  activity timestamp 2 weeks ago
Aral Balkan
@aral@mastodon.ar.al  ·  activity timestamp 2 weeks ago
Aral Balkan
@aral@mastodon.ar.al  ·  activity timestamp 2 weeks ago
Dane Henson and 2 others boosted
Elena Rossini on GoToSocial ⁂
@elena@aseachange.com  ·  activity timestamp 3 weeks ago
calvin 🛋️
calvin 🛋️ liked this activity
Elena Rossini on GoToSocial ⁂
@elena@aseachange.com  ·  activity timestamp 3 weeks ago
Elena Rossini on GoToSocial ⁂
@elena@aseachange.com  ·  activity timestamp 3 weeks ago
Framasoft boosted
Aral Balkan
@aral@mastodon.ar.al  ·  activity timestamp 4 weeks ago
Aral Balkan
@aral@mastodon.ar.al  ·  activity timestamp 4 weeks ago
Aral Balkan
@aral@mastodon.ar.al  ·  activity timestamp last month
Aral Balkan
@aral@mastodon.ar.al  ·  activity timestamp last month
Aral Balkan
@aral@mastodon.ar.al  ·  activity timestamp 3 months ago
Screenshot of code for app_modules/database/Model.js. The following code is highlighted with a pink border: /** Optional hook: override this to perform initialisation at constructor time. (Do not override the constructor or the automatic property assignment will fail.) */ initialise () {} Full code listing: /** Base model class. (To use, extend this with your own model classes.) When adding properties in subclasses, make sure you only set values after checking if the value already exists: e.g., class MyModelObject extends Model { mySpecialProperty = this.mySpecialProperty || '' } (This way, you will get type safety while authoring without accidentally overwriting any values populated by the superclass when model objects are recreated when a JSDB table is read into memory.) */ export default class Model { id = crypto.randomUUID() constructor (parameters = {}) { Object.assign(this, parameters) this.initialise() } /** Optional hook: override this to perform initialisation at constructor time. (Do not override the constructor or the automatic property assignment will fail.) */ initialise () {} }
Screenshot of code for app_modules/database/Model.js. The following code is highlighted with a pink border: /** Optional hook: override this to perform initialisation at constructor time. (Do not override the constructor or the automatic property assignment will fail.) */ initialise () {} Full code listing: /** Base model class. (To use, extend this with your own model classes.) When adding properties in subclasses, make sure you only set values after checking if the value already exists: e.g., class MyModelObject extends Model { mySpecialProperty = this.mySpecialProperty || '' } (This way, you will get type safety while authoring without accidentally overwriting any values populated by the superclass when model objects are recreated when a JSDB table is read into memory.) */ export default class Model { id = crypto.randomUUID() constructor (parameters = {}) { Object.assign(this, parameters) this.initialise() } /** Optional hook: override this to perform initialisation at constructor time. (Do not override the constructor or the automatic property assignment will fail.) */ initialise () {} }
Screenshot of code for app_modules/database/Model.js. The following code is highlighted with a pink border: /** Optional hook: override this to perform initialisation at constructor time. (Do not override the constructor or the automatic property assignment will fail.) */ initialise () {} Full code listing: /** Base model class. (To use, extend this with your own model classes.) When adding properties in subclasses, make sure you only set values after checking if the value already exists: e.g., class MyModelObject extends Model { mySpecialProperty = this.mySpecialProperty || '' } (This way, you will get type safety while authoring without accidentally overwriting any values populated by the superclass when model objects are recreated when a JSDB table is read into memory.) */ export default class Model { id = crypto.randomUUID() constructor (parameters = {}) { Object.assign(this, parameters) this.initialise() } /** Optional hook: override this to perform initialisation at constructor time. (Do not override the constructor or the automatic property assignment will fail.) */ initialise () {} }
Screenshot of code (detail) in Helix Editor on macOS, showing the source for app_modules/database/database.js. The following code is highlighted with a pink border: initialise () { // Migration. if (this.account !== undefined) { this.data = this.account delete this.account } } Full listing texport class VerifiedAccount extends Model { url = this.url || '' /** This is the object returned from the accounts/lookup method of the Mastodon API. See: https://docs.joinmastodon.org/methods/accounts/#lookup @type {{ id: string, username: string, acct: string, display_name: string, locked: boolean, bot: boolean, discoverable: boolean, indexable:boolean, group:boolean, created_at: string, note:string, url: string, uri: string avatar:string avatar_static: string, header: string, header_static: string, followers_count: number, following_count: number, statuses_count: number, last_status_at: string, hide_collections: boolean, noindex: boolean, emojis: Array, roles: Array, fields: Array }} */ data = this.data || '' initialise () { // Migration. if (this.account !== undefined) { this.data = this.account delete this.account } } /** The account is the bit of the URL from the @ onwards. */
Screenshot of code (detail) in Helix Editor on macOS, showing the source for app_modules/database/database.js. The following code is highlighted with a pink border: initialise () { // Migration. if (this.account !== undefined) { this.data = this.account delete this.account } } Full listing texport class VerifiedAccount extends Model { url = this.url || '' /** This is the object returned from the accounts/lookup method of the Mastodon API. See: https://docs.joinmastodon.org/methods/accounts/#lookup @type {{ id: string, username: string, acct: string, display_name: string, locked: boolean, bot: boolean, discoverable: boolean, indexable:boolean, group:boolean, created_at: string, note:string, url: string, uri: string avatar:string avatar_static: string, header: string, header_static: string, followers_count: number, following_count: number, statuses_count: number, last_status_at: string, hide_collections: boolean, noindex: boolean, emojis: Array, roles: Array, fields: Array }} */ data = this.data || '' initialise () { // Migration. if (this.account !== undefined) { this.data = this.account delete this.account } } /** The account is the bit of the URL from the @ onwards. */
Screenshot of code (detail) in Helix Editor on macOS, showing the source for app_modules/database/database.js. The following code is highlighted with a pink border: initialise () { // Migration. if (this.account !== undefined) { this.data = this.account delete this.account } } Full listing texport class VerifiedAccount extends Model { url = this.url || '' /** This is the object returned from the accounts/lookup method of the Mastodon API. See: https://docs.joinmastodon.org/methods/accounts/#lookup @type {{ id: string, username: string, acct: string, display_name: string, locked: boolean, bot: boolean, discoverable: boolean, indexable:boolean, group:boolean, created_at: string, note:string, url: string, uri: string avatar:string avatar_static: string, header: string, header_static: string, followers_count: number, following_count: number, statuses_count: number, last_status_at: string, hide_collections: boolean, noindex: boolean, emojis: Array, roles: Array, fields: Array }} */ data = this.data || '' initialise () { // Migration. if (this.account !== undefined) { this.data = this.account delete this.account } } /** The account is the bit of the URL from the @ onwards. */
Aral Balkan
@aral@mastodon.ar.al  ·  activity timestamp 3 months ago
Aral Balkan
@aral@mastodon.ar.al  ·  activity timestamp 3 months ago
Aral Balkan
@aral@mastodon.ar.al  ·  activity timestamp 3 months ago
Aral Balkan
@aral@mastodon.ar.al  ·  activity timestamp 3 months ago
Aral Balkan
@aral@mastodon.ar.al  ·  activity timestamp 3 months ago
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
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
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
Home Login