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

🎉 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!

:kitten:💕

#Kitten #SmallWeb #Markdown #components #fragments #mdx

Screencast: On the right, a browser with the Kitten Persistence tutorial page demonstrating the word Scary being animated by a component called Scary that is imported from the front matter of a Markdown page, an excerpt of which is shown in an editor on the left: --- layout: ../Tutorials.layout.js imports: - import Scary from './Scary.component.js' title: Persistence description: Learn how to persist information using Kitten’s build-in JavaScript Database (JSDB) topics: - Persistence. - JavaScript Database (JSDB). - The Kitten CLI’s

michabbb, to UI German
@michabbb@vivaldi.net avatar

for Engineers
20+ free and animated built with , , , and Motion. 100% open-source, and customizable.

https://magicui.design

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

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).

https://ar.al/2024/05/23/new-kitten-features-interactive-shell-repl-multi-page-settings-and-backup-and-restore-data-portability/

:kitten:💕

#Kitten #SmallWeb #SmallTech #web #dev #JavaScript #HTML #database #JSDB #components #settings #dataPortability #REPL

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

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.

[Screenshot of terminal window showing hx (Helix Editor) with two panes. Left pane, selected, shows source of Markup.fragment.html: I’m some HTML from Markup.fragment.html.

${SLOT} I’m some other HTML Markup.fragment.html.

${SLOT.other} I’m yet more HTML Markup.fragment.html.

Right pane shows source of Styles.fragment.css: /* I’m some CSS / :root { --accent-colour: red; --border-width: 2px; } div { border: var(--border-width) solid var(--accent-colour); margin: 1em; padding: 1em; } / Show slotted divs with a different colour. */ div > div { border-color: lightpink; } ](https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/112/032/044/950/950/448/original/5b1d6e886eccdcd6.png)

EvanMarie, to poop

💜 Remix / Tailwind Infinite Scroll Masonry Grid 💜 So excited to have gotten this so smooth and beautiful. It might be my favorite component thus far. It is flawless from mobile to ultraHD, from 300px to 4000px!

video/mp4

stephaniewalter, (edited ) to random
@stephaniewalter@front-end.social avatar

If you are new to accessibility, it might be sometimes hard to guess how a component is supposed to work with a keyboard.
Here are 3 design system places to look for accessible components inspiration:

  1. React Aria Components:
    Resource: https://react-spectrum.adobe.com/react-aria/components.html
    Adobe’s new React framework promises components with built-in top-tier accessibility, and internationalization out of the box. Examples are nice for designers to see what’s expected in terms of keyboard navigation.
stephaniewalter,
@stephaniewalter@front-end.social avatar

For more resources to find inspiration articles on the topic of accessible components, don't forget to check this part of my article on "Accessibility for Designers, where do I start?"

https://stephaniewalter.design/blog/accessibility-resources-tools-articles-books-for-designer/#components

itnewsbot, to random

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

cazabon, to Canada

Is there something #wrong with #Digikey's ordering/delivery? Fast #shipping is their thing; it's practically their #USP.

"Most #packages arrive (in #Canada) in 24 hours".

I've placed half a dozen orders in the last month and a bit, and it seems that every single one hasn't even #shipped for 2 or 3 days after I place the order. Everything I've ordered was in #stock (and not marginally; "27,563 in stock" type of thing).

Anyone else seeing this?

#slow #WheresMyStuff #components #electronics

amadeus, (edited ) to cargobike
@amadeus@mstdn.social avatar

2/2 I want to build a #custom #cargobike suitable for these conditions, probably based on a #bullitt, #ginkgo or #bogbi #framekit and I'd like to ask you #bicycle people for advice regarding the choice of the least maintenance intensive #components for my circumstances. What would you choose?

cazabon, (edited ) to Electronics

Random things heard in my household, part 38:

"How the hell did I end up with five bags of 1N60P germanium diodes?"

#components #electronics #hobby #packrat

edit: typo

cazabon, to Electronics

Organizing resistors. Make sure you keep them separated.

#supplier #reputable #ebay #aliexpress #resistors #components #organize #label #electronics #hobby

gsuberland, (edited ) to Electronics
@gsuberland@chaos.social avatar

if you were sorting a parameter by ascending numeric value (in some sort of parameteric search engine) and the values included positive, negative, and ± values all together, where would you want the ± ones to be placed?

context is electronics stuff, where you're searching for a part that fits your required specs.

#electronics #components (boosts welcome for more input!)

gsuberland, (edited )
@gsuberland@chaos.social avatar

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.

#electronics #components

chrisonline, to javascript
@chrisonline@androiddev.social avatar

New components for #Vue & #NeXT

Lunar UI — Fabulous Tailwind CSS components for Vue & Nuxt to create stunning land pages

https://lunarui.dev

#development #dev #css #tailwind #components #lunarui

rauschma, to javascript
@rauschma@fosstodon.org avatar

“package.json contains a local aliasing mechanism for import paths called ‘imports’. It satisfies many use cases without tooling-specific solutions like tsconfig.json.”
https://socket.dev/blog/we-don-t-need-more-path-aliases #JavaScript

package.json
{
"imports": {
"#components": {
"browser": "./src/components/client/",
"default": "./src/components/server/
"
}
}
}

my-module.js
import '#components/customer-table.js';

📕 Details (in my free online book on Node.js): https://exploringjs.com/nodejs-shell-scripting/ch_packages.html#package-imports

defis_eu, to random

#DYK about #EDF
Under the 2023 EDF Work Programme €5️⃣0️⃣million have been allocated to materials & #components R&D projects for 🇪🇺defence applications
➡️The research on high-performance materials is one of the topics of the open calls
Read more at👇
https://defence-industry-space.ec.europa.eu/eu-defence-industry/european-defence-fund-edf_en

🐦🔗: https://n.respublicae.eu/defis_eu/status/1687406225581899779

image/jpeg

amadeus, to Battlemaps
@amadeus@mstdn.social avatar
itnewsbot, to random

Watch Those 1% Resistors - Decades ago, electronic components were not as easy to acquire as they are today. ... - https://hackaday.com/2023/07/07/watch-those-1-resistors/ #components #mischacks #resistors #tolerance

ronanmcd, to cycling

Eye-watering figures. And then you realise amateur riders think these are product levels to aim for. #cycling #components #racing https://www.cyclingnews.com/features/how-much-does-a-tour-de-france-bike-cost/

phonner, to science
@phonner@mathstodon.xyz avatar
mkwadee,
@mkwadee@mastodon.org.uk avatar

@phonner Interesting. This is the version I produced to show the variation of #components of a first-order #tensor when the axes are rotated.

#FirstOrderTensor #CCBYSA

Component of a vector for a rotating set of axes.

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