Continued thread
Here's a gradient background version on @codepen too https://codepen.io/thebabydino/pen/KwKrJGp
Shape depends on how the text content naturally wraps.
GIF
Recent searches
Search options
#web
29 posts21 participants8 posts today
Continued thread
To fix this, we give the assembly a tiny blur.
We don't want blurry edges
either, so we push some of the semitransparent edge pixels to either 0 or 1, whichever is closer. To do so, we use another `feComponentTransfer` and map the [0, 1] alpha interval to [-2, 3]. Basically we're stretching the alpha interval to be 5 times bigger, keeping same midpoint (.5), then it's clamped to [0, 1].
GIF
Continued thread
`feComponentTransfer` allows us to manipulate individual RGBA channels. In this case just the alpha (via `feFuncA`) by making all assembly pixels whose alpha is below `.5` fully transparent (alpha = 0). And all other pixels fully opaque (alpha = 1).
This makes edges jagged. 
Maybe not so noticeable in some cases, but it often won't cut it.
GIF
Continued thread
How the assembly alpha is computed is something I've detailed in 
https://css-tricks.com/adventures-in-css-semi-transparency-land/
Keep in mind that where we have overlap, two corresponding pixels from the two layers may both have an alpha below .5, but their overlap can still give the assembly an alpha above .5!
For example:
.4 + .3 - .4*.3 = .7 - .12 = .58
Both .4 and .3 are smaller than .5, but the overlap alpha .58 is bigger than .5!
CSS-Tricks · Adventures in CSS Semi-Transparency Land | CSS-TricksRecently, I was asked to make some tweaks to a landing page and, among the things I found in the code, there were two semitransparent overlays — both with the
Continued thread
As you can see in the recording 
blurring makes the pixels around the edges semitransparent. The bigger the blur radius, the more pixels become transparent.
When the particles get closer, their semitransparent areas overlap. This increases the assembly alpha there.
GIF
Continued thread
GIF
A little spinner I made years ago on @codepen but never shared publicly https://codepen.io/thebabydino/pen/OJQKbKW
GIF
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>
</>
`
}
}")
“Building Better Webs"
In a world where over half of all internet traffic goes to Big Tech sites, the weird and wonderful web seems to be shrinking. Join @oluOnline at Front End North 2025 to examine how we can take back our webs.
Olu's talk → https://frontendnorth.com/speakers/olu-niyi-awosusi
Front End NorthOlu Niyi-Awosusi | Front End North ConferenceBuilding Better Webs: "There is one web" is the first of W3C's Ethical Web Principles. The one web we have all come to know and...
I'd like to set up SSO so that I can self-host resources like nodebb, freshrss, and znc, and share them with friends, without those friends having to manage a separate password for every service. Keycloak seems like a decent place to start but it requires a database, and I've always found those a little abstract, I don't know what I need to type to actually install and use one. Can you recommend me a good "just show me the code" tutorial for e.g. postgres on debian 12?
edit: actually, has anyone else here set up SSO for self-hosting, with or without keycloak?
Here's a neat little effect with no text duplication. Uses `background-clip: text` to create the split text face effect + scroll-driven animations to tie the gradient split line position to the 1st section's bottom edge.
Live on @codepen https://codepen.io/thebabydino/pen/XJWxLWV
cc @bramus
GIF
Numista is one of the best resources for #numismatic information. Awhile ago they added an #exonumia section, then added #banknotes and now they have a new #literature section.
Read about it in E-Sylum: https://www.coinbooks.org/v28/esylum_v28n13.html#article4
Browse it on Numista here: https://en.numista.com/literature/index.php
Looking for CMS advice
Hey Web devs!
Do you have any suggestions, tips, opinions, dos, don’ts about headless CMSes?
I have a growing list of small/mid non-profits and collectives asking for my help to (re)make their website. I totally want to help, but I don’t have much time, especially considering that they generally have little or no funding—I would most definitely point them to @VillageOneCoop, otherwise.
Therefore, I want a super simple and replicable solution where I can copy-paste most of the code, while providing them with a stable, fast, and modern solution. I had a look at the Headless CMS section in the Jamstack website, but I need opinions from people who actually used some of that software already.
Needs
- I want to code and configure everything using @eleventy
- Admin interface (#WebApp) for the client to add pages and write posts
- Static website in the front-end
- Simple and reliable CI/CD
- No/minimal maintenance after the first setup
- Self-hostable (I was taking this for granted so much that I forgot to write it)
- #OpenSource
Nice to have
- Possibly using #Deno, not #NodeJS
- Allowing the client to customize a bit their website through the admin interface, with a GUI
- CMS app packaged on @yunohost
- No CMS vendor lock-in
- I’d love to write as little JavaScript as possible
- #FreeSoftware
Absolutely not
- Front-end #JavaScript frameworks
Please, boost this and ask around! Links to videos, tutorials, and resources are welcome.
People whose perspective I would really value: @zachleat @harryfk @deno_land @jaredwhite @vanillaweb @stefan @mxbck @WeirdWriter @deadsuperhero (Sorry if I am spamming you!)
Jamstack.orgHeadless CMS - Top Content Management Systems | JamstackCheck out this showcase of some of the best, open source headless CMSes. This is community-drive so be sure to submit your favorite CMS today!
Isn't a curious co-incidence, how so many people with disabilities have a working knowledge of web accessibility?
Could it be that this is needed to work around inaccessible web content on a daily basis?
Want to give a responsive irregular shape depending on text content/ viewport rounded corners? Here's a super simple pure #CSS + #SVG #filter demo on @codepen doing it https://codepen.io/thebabydino/pen/KwKGrjR
Heavily commented. See also https://mastodon.social/@anatudor/114185324674119212 for details about some of the filter primitives.
GIF
Continued thread
Continued thread
…oh look, once again (see toot above) Twitter / X was leaked again. Well, this is not surprising.
»Twitter (X) Hit by Data Leak of 2.8 Billion Users; Allegedly an Insider Job
Massive Twitter (X) data breach exposes details of 2.8 billion users; alleged insider leak surfaces with no official response from the company.«
https://hackread.com/twitter-x-of-2-8-billion-data-leak-an-insider-job/
Hackread - Latest Cybersecurity, Tech, AI, Crypto & Hacking News · Twitter (X) Hit by Data Leak of 2.8 Billion Users; Allegedly an Insider JobFollow us on Bluesky, Twitter (X), Mastodon and Facebook at @Hackread
Continued thread
Here's a simple image stack with an `--ang` rotation around an `--xy` point (both pseudo-random, generated & set inline via Pug) + a 3D entry animation (click Run to run it again).
Live on @codepen https://codepen.io/thebabydino/pen/qEBJpRb?editors=0100
Because I keep seeing `position: absolute` + lots of of offset + size + transform + sometimes even margin properties to stack + middle align the stacked items... you can easily do it with 3 #CSS properties!
According to a person who tested it, screen readers do not, in fact, stop reading alt text at 125 characters in length. This appears to be a myth caudified through a recommendation that they be about that long.
https://yatil.net/blog/there-is-no-character-limit-for-alt-text
Any other #a11y folks who can confirm or deny?
Eric EggertThere is no character limit for “alt text”: Myth Debunked! · Eric Eggert
More from 
Eric Eggert