My new video on resistors is out! This is part of my basic components series and I look a bit into applications and the color markings. Have fun!
Youtube: https://www.youtube.com/watch?v=zkgXzNzwDt8
Peertube: https://makertube.net/w/bXG8uYevFi7CFJWvBKU9K3
#synthdiy #components #electronics #synth
Recent searches
Search options
#components
2 posts2 participants0 posts today
Continued thread
Sorry, life got in the way; just deployed this but I haven’t had a chance to document it properly yet. I’ll make a proper announcement when I do.
Also, you can now use the `delete` attribute on a DOM node/Kitten component you’re streaming back from the server to have it removed from the DOM on the client. It’s syntactic sugar for hx-swap-oob='delete' in htmx.
New Kitten update
• 
Kitten HTML templates and kitten.Component render functions can now be async.
This is quite a big one and it took me finally biting the bullet and getting my head around generators in JavaScript to implement properly.
So now you can mix synchronous and asynchronous components as you like and if there are any asynchronous components in your templates they will automatically be awaited (even if you forget to use await) ;)
I’ll write a proper post/tutorial/documentation for it soon but for the time being enjoy the screenshots where a layout template gets the latest three posts from my mock fediverse public timeline service and displays them on the page.
The kitten.Component version also has a refresh button that streams a different three to the page.
For those of you unfamiliar with Kitten, this is all the code in either example. No scaffolding, nothing. Pop either into a file called index.page.js and run kitten in that folder and visit https://localhost to see the example run.
Enjoy!
![const BasicLayoutTemplate = async ({ title, SLOT }) => {
const posts = (await (await fetch('https://streamiverse.small-web.org/public/')).json()).splice(0, 3)
return kitten.html`
<main>
<page css>
<h1>${title}</h1>
${SLOT}
<h2>Fediverse posts</h2>
<ul>
${posts.map(post => kitten.html`
<li><img src='${post.account.avatar}'> ${[post.content]}</li>
`)}
</ul>
<style>
li { display: flex; gap: 1em; margin-bottom: 1em; }
img { width: 5em; height: auto; }
</style>
</main>
`
}
export default async () => await kitten.html`
<${BasicLayoutTemplate} title='Async components are fun!'>
<markdown>
Oh, isn’t this __nice?__
</markdown>
</>
`](https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/114/258/812/670/834/838/original/228733ad125b57f4.png "const BasicLayoutTemplate = async ({ title, SLOT }) => {
const posts = (await (await fetch('https://streamiverse.small-web.org/public/')).json()).splice(0, 3)
return kitten.html`
<main>
<page css>
<h1>${title}</h1>
${SLOT}
<h2>Fediverse posts</h2>
<ul>
${posts.map(post => kitten.html`
<li><img src='${post.account.avatar}'> ${[post.content]}</li>
`)}
</ul>
<style>
li { display: flex; gap: 1em; margin-bottom: 1em; }
img { width: 5em; height: auto; }
</style>
</main>
`
}
export default async () => await kitten.html`
<${BasicLayoutTemplate} title='Async components are fun!'>
<markdown>
Oh, isn’t this __nice?__
</markdown>
</>
`")
![class BasicLayoutTemplate extends kitten.Component {
async html ({title, SLOT}) {
return kitten.html`
<main id='page' morph>
<page css>
<h1>${title}</h1>
${SLOT}
<${FediversePosts.connectedTo(this)} />
</main>
`
}
}
class FediversePosts extends kitten.Component {
async html () {
const posts = (await (await fetch('https://streamiverse.small-web.org/public/')).json()).splice(Math.floor(Math.random()*6), 3)
return kitten.html`
<div id='posts' morph>
<h2>Fediverse posts</h2>
<ul>
${posts.map(post => kitten.html`
<li><img src='${post.account.avatar}'> ${[post.content]}</li>
`)}
</ul>
<button name='refresh' connect>Refresh</button>
<style>
li { display: flex; gap: 1em; margin-bottom: 1em; }
img { width: 5em; height: auto; }
</style>
</div>
`
}
onRefresh () { this.update() }
}
export default class MyPage extends kitten.Page {
async html () {
return kitten.html`
<${BasicLayoutTemplate.connectedTo(this)} title='Async components are fun!'>
<markdown>
Oh, isn’t this __nice?__
</markdown>
</>
`
}
}](https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/114/258/813/076/463/648/original/22f714259e01b4f8.png "class BasicLayoutTemplate extends kitten.Component {
async html ({title, SLOT}) {
return kitten.html`
<main id='page' morph>
<page css>
<h1>${title}</h1>
${SLOT}
<${FediversePosts.connectedTo(this)} />
</main>
`
}
}
class FediversePosts extends kitten.Component {
async html () {
const posts = (await (await fetch('https://streamiverse.small-web.org/public/')).json()).splice(Math.floor(Math.random()*6), 3)
return kitten.html`
<div id='posts' morph>
<h2>Fediverse posts</h2>
<ul>
${posts.map(post => kitten.html`
<li><img src='${post.account.avatar}'> ${[post.content]}</li>
`)}
</ul>
<button name='refresh' connect>Refresh</button>
<style>
li { display: flex; gap: 1em; margin-bottom: 1em; }
img { width: 5em; height: auto; }
</style>
</div>
`
}
onRefresh () { this.update() }
}
export default class MyPage extends kitten.Page {
async html () {
return kitten.html`
<${BasicLayoutTemplate.connectedTo(this)} title='Async components are fun!'>
<markdown>
Oh, isn’t this __nice?__
</markdown>
</>
`
}
}")
"#Tariffs won't affect consumers"
Suuuuure they won't, #OranutanDon.
My latest order of #components would disagree.
From last week's Linux Update newsletter: @BruceByfield looks at the Dygma Raise 2 ergonomic keyboard designed for gaming
https://www.linux-magazine.com/Online/Features/A-Starter-Ergonomic-Keyboard-The-Dygma-Raise-2/
#keyboard #ergonomic #gaming #hardware #components #customize #Dygma
> if every time they tried to explain that this sucks as a compile target they were told “no you just don’t get it”, heck I’d feel gaslit too! #WebComponents are still far from being a good compile target for all framework components, but that is not a prerequisite for them being useful. They simply solve different problems.
lea.verou.meWeb Components are not Framework Components — and That’s Okay • Lea Verou
#India 
provided #russia 
with #components from the #west for #oil
Time to boycott India and sanctions it.
The Kyiv Independent · Leaked documents reveal India and Russia developed secret trade links, FT reports
> code shouldn’t depend on values and methods it doesn’t use. If you don’t need something don’t ask for it. It’s as simple as that.
https://alexkondov.com/interface-segregation-principle-in-react/
alexkondov.comInterface Segregation Principle in ReactThe SOLID principles were the first software design concepts I ever studied and to this day they remain the most influential piece of knowledge in my career. If…
Continued thread
(Nope, because, of course, the actual reference doesn’t exist at the loader stage.)
Oh, well, I’m going to try and make it so that you’ll at least be able to connect child components in the markup itself so you don’t have to remember to do it in some other place. That should, at least, be doable.
> #React #Compiler is the result of a problem: the introduction of #hooks has led to far too much logic in #components.
It's clear to me that #Knockout had it right back in 2012; #MVVM is the correct pattern for #WebApps
https://www.mikejohnson.dev/posts/2024/06/mobx-react-compiler
Another MikeMobx Memoizes Components (You don't need React Compiler)
You can now use components and fragments in your Markdown pages in Kitten.
Following on from yesterday’s Markdown pages feature, you can now import components and fragments and use them in your Markdown pages to add dynamic functionality (similar to how it works in mdx but without using JSX).
(The “SCARY” text in the screencast is being randomly animated by a component.)
Enjoy!
GIF
> Especially with #ServerComponents, the honeymoon was so bright, with its smaller bundles and fashionable new data loading. Then, we sloshed through the trough of disillusionment as we realized that the developer experience of Server Components is challenging.
> Now, though? We’re learning how to think about and how to teach these new concepts. And we’re seeing their true potential.
https://www.mux.com/blog/react-19-server-components-and-actions
www.mux.com · React 19 lets you write impossible components | MuxWhat can you do with Server Components and Actions in React 19? Let’s talk about how React 19’s features are a big deal, even for a simple marketing site.
New Video – Kitten features introduced this week:
• Interactive Shell (REPL)
• Multi-page Settings
• Backup and restore (data portability)
With examples that cover components and Kitten’s built-in JavaScript database (JSDB).
Aral Balkan · New Kitten features: Interactive Shell (REPL), Multi-page Settings, and backup and restore (data portability)Sorry, your browser doesn't support embedded videos. But that doesn’t mean you can’t watch it! You can download the video and watch it with your favourite video player.
Yours truly demonstrating the new Interactive Shell (REPL), Multi-page Settings, and backup and restore (data portability) features.
Links Kitten interactive shell (REPL) tutorial Streaming HTML tutorial Domain Like this? Fund us! Small Technology Foundation is a tiny, independent not-for-profit.
You can now create HTML and CSS fragments in Kitten.
This introduces two new file extensions (.fragment.html and .fragment.css) and you can import these fragments into your pages and into other components and fragments as if they were JavaScript modules*.
HTML fragments also support slots.
Example:
https://codeberg.org/kitten/app/src/branch/main/examples/html-and-css-fragments
*Thanks to Kitten’s behind-the-scenes use of a custom ES Module Loader.
Unicopedia Sinica is a developer-oriented set of #Unicode utilities related to ideographs, wrapped into one single app, built with #Electron.
Repository: 
https://codeberg.org/tonton-pixel/unicopedia-sinica
New #ThingUmbrella releases & example: This week's releases included updates to https://thi.ng/system, a minimal and declarative way to compose an app from multiple components, build their dependency graph and manage their lifecycle (async start/stop) in the correct (topological) order. The computed graph (DAG) can then also be serialized to GraphViz format for visualization/debugging/documentation purposes with a single line of code (see readme)...
Even though I've been using this system in dozens of projects, it occurred to me there wasn't any example project yet demonstrating this approach, so I finally fixed that:
https://github.com/thi-ng/umbrella/tree/develop/examples/rstream-system-bus
The demo is purposefully minimal and the source code is (hopefully) much more interesting than the result. In addition to showing how the app components are defined, this example also shows another powerful pattern I've been using in my own tools:
Using https://thi.ng/atom as central app state and https://thi.ng/rstream pubsub as central event bus, to both of which various system components can attach topic based subscriptions (aka event and/or change handlers). Since each of these reactive subscriptions are normal rstream subs, they can all be forming graphs of child subs and be filtered/transformed and synchronized via hundreds of composable operators in the https://thi.ng/rstream and https://thi.ng/transducers packages — and — these rstream values can also be directly embedded in https://thi.ng/rdom created reactive UI components/elements/attributes. Some of these techniques are shown in this new example as well... Hope it's helpful to some of you!
MOSFETs — the Big Lie - How many terminals does a MOSFET have? Trick question since most have three leads,... - https://hackaday.com/2023/12/08/mosfets-the-big-lie/ #semiconductor #components #mosfet #parts
Hackaday · MOSFETs — The Big LieHow many terminals does a MOSFET have? Trick question since most have three leads, even though there are really four connections to the underlying device. It isn’t a conspiracy, though and [A…
Meeple Mountain deluxifies a few games thanks to BoardGameSet - find out if these upgrade sets are deluxe or dross in our review of BoardGameSet’s upgrade sets.
https://www.meeplemountain.com/reviews/boardgameset-upgrade-sets/
Meeple Mountain · BoardGameSet Upgrade Sets Review – Meeple MountainMeeple Mountain deluxifies a few games thanks to BoardGameSet - find out if these upgrade sets are deluxe or dross in our review of BoardGameSet’s upgrade sets.
Continued thread
next question:
if there are parameter values that don't fit any standard format when parsed (e.g. unusual multi-element formatting, typos, other outliers) where should they appear when sorted in ascending order?
"Lexicographically" here means that a weird value like "7AD4P" or "7.38?102" would appear after all the numbers starting with 7, but before the numbers starting with 8.
consider that this may affect range searches if they are implemented.