Folks, please go and use this gentleman's home grown search engine. He literally runs it out of his basement. Mikkel is on Matrix as well, and you can message him.

These are the projects we need to support.

#tech #search #web #foss #fosstodon #stract #mastodon #akkoma #miskey #fediverse

https://stract.com

Stract

^stract.com

(If you’re wondering why the repository was 176MB to begin with, it’s because I was initially deploying from the /dist folder in the repository. But since then I created a special deployment site for Kitten and now Kittens come from, well, where else but https://kittens.small-web.org.)

💕

PS. It takes me ~3.5 seconds to build and deploy a new version of Kitten so its common for there to be multiple new versions in a day. Run `kitten update` to get the latest.

#SmallWeb #Kitten #web #dev

I’ve been looking for an ngrok alternative for a while now that’s (a) affordable (b) easy to use and (c) works with Kitten¹. Today, after testing a bunch of them again and getting fed up, I found LocalXpose that checks all the boxes.

I signed Small Technology Foundation up as an affiliate so if you use this link to check it out, we’ll get 40% of your $6/mo pro account fee should you subscribe:

https://localxpose.io/?via=kitten

¹ https://codeberg.org/kitten/app

#ngrok #LocalXpose #Kitten #SmallWeb #web #dev

app

A web development kit that’s small, purrs, and loves you.

^Codeberg.org

freeCodeCamp
freeCodeCamp's open-source mobile app

freeCodeCamp.org is an online learning platform offering a comprehensive curriculum in #web development and machine learning. The curriculum is self-paced and available free of charge. The App includes challenges, tutorials, Code Radio, and podcasts.
Contribute to freeCodeCamp: https://contribute.freecodecamp.org/

Download: https://play.google.com/store/apps/details?id=org.freecodecamp

#FOSS #Android #OpenSource #Coding #Education #freeCodeCamp #OSS #Podcasts #python #Flutter #JavaScript #iOS

We're live!

#web #tech #hosting #selfhosting #education #opensource #edtech #lamp #cloud #containers

https://reclaim.tv

🔖 New bookmark: Marginalia: A New Lens for the Internet

🔗 https://perephoneia.art/marginalia-a-new-lens-for-the-internet/

An interview with Viktor from Marginalia

🔥 https://flamedfury.com/bookmarks/marginalia-a-new-lens-for-the-internet/

#web #smallweb #internetculture

Marginalia: A New Lens for the Internet

What's going on Internet? This is my homepage. I write about the web and stuff.

^fLaMEd

Interesting story: did you know the Web wasn’t initially understood or embraced at CERN? It was seen as a distraction.

Here’s Robert’s video of Ben Segal – lovely human being and Tim’s mentor – showing us around CERN ~15 years ago and telling the story (see if you can spot a much younger me in shot):

https://www.youtube.com/watch?v=nK3nF6Jw6uU

“The crucial thing was the development in the USA.”

Here’s hoping Europe will do better with the Small Web.

Doesn’t look like it, though.

#SmallWeb #EU #funding #web

Ben Segal - The Mentor of Tim Berners-Lee at CERN

You know Tim Berners-Lee as the inventor of the World Wide Web. CERN is the birthplace. So, how did Tim look up to at CERN? Ben Segal. Here Ben gives us some...

^YouTube

And this was last year, Kitten has come a long way since then…

Check out the new Streaming HTML workflow:

https://ar.al/2024/03/08/streaming-html/

And how it made it possible to build Draw Together in less than 60 lines of code:

https://ar.al/2024/03/26/draw-together/

Wishing you a lovely conference this year :)

#SmallWeb #Kitten #web #dev #SmallTech #StreamingHTML

Streaming HTML

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. Building the Streaming HTML counter example.

^{Aral Balkan}

Just improved the display of error messages in Kitten¹.

They should be far more robust now.

Run `kitten update` to get the latest.

💕

¹ https://codeberg.org/kitten/app

#Kitten #errorMessages #stackTrace #web #dev #JavaScript #nodeJS

Can’t believe it’s been 16 years since I organised the world’s first virtual web conference (it was called <head>, it took place over 3 days, had 4 simultaneous tracks, over 70 speakers, and local in-world conference hubs in London, Manchester, Brigthon, Fribourg, and San Francisco, as well as as pre-conference party and a separate virtual hub in Second Life).

https://web.archive.org/web/20120420021405/http://www.headconference.com/

#headConference #virtualConference #webConference #web #conference #history

Let’s build Draw Together… umm, together.

Video: https://vimeo.com/927628184

Blog post: https://ar.al/2024/03/26/draw-together/

Play with it: https://draw-together.small-web.org

💕

#DrawTogether #Kitten #SmallWeb #web #dev #HTML #CSS #JavaScript #htmx #hypermedia #WebSocket #idiomorph #tutorial #howTo

Draw Together

Join me as I take you through building Draw Together – a little collaborative drawing toy I made and released over the weekend – from scratch.

^{Aral Balkan}

Thanks to a prod from @scott, I finally fixed the issue with full-screen videos looking inverted on my personal site in dark mode.

Also, just updated my blog post on how to implement quick and dirty dark mode support in a few lines of code using CSS filters with the additional code:

https://ar.al/2021/08/24/implementing-dark-mode-in-a-handful-of-lines-of-css-with-css-filters/

#css #darkMode #prefersColorScheme #filters #web #dev

I’ve also updated the readme with instructions on how to run Draw Together yourself (you could have it up and running locally in under a minute by installing Kitten, cloning the repository, and running the kitten command) and links to where you can learn more about the Streaming HTML magic in Kitten that means that the whole app is ~60 lines of code :)

https://codeberg.org/aral/draw-together#draw-together

#DrawTogether #Kitten #SmallWeb #web #dev #StreamingHTML #html #css #JavaScript #htmx #WebSocket

draw-together

A very simple Kitten toy in ~60 lines of code for drawing together on a 20×20 grid.

^Codeberg.org

@DrVeronikaCH Thank you so much, Veronika :) Love the face!

💕

PS. Have you had a chance to look at the code? That whole thing is in 60 lines of Kitten. Would love to see Kitten start to get used to teach web dev in the future and would love your thoughts on that too :)

Source: https://codeberg.org/aral/draw-together

A video/write-up on Kitten’s Streaming HTML workflow that peels away the magic layer by layer: https://ar.al/2024/03/08/streaming-html/

Kitten tutorials: https://codeberg.org/kitten/app

#SmallWeb #web #dev

Streaming HTML

Building the Streaming HTML counter example. Estimated reading time: 25 minutes. Kitten has a new experimental workflow for creating web apps called Streaming HTML that I want to introduce you to today.

^{Aral Balkan}

Nope. It’s its own server + framework. The runtime is Node.js (which it downloads its own copy of during installation) and, while it will happily serve your static site from 1993 (ok, maybe not cgi-bin), the stuff you’re seeing in this example uses its Streaming HTML workflow based on htmx, WebSockets, and a little Kitten magic (https://ar.al/2024/03/08/streaming-html/) :)

#Kitten #StreamingHTML #SmallWeb #web #dev

Streaming HTML

Building the Streaming HTML counter example. Estimated reading time: 25 minutes. Kitten has a new experimental workflow for creating web apps called Streaming HTML that I want to introduce you to today.

^{Aral Balkan}

It’s so lovely to see you folks playing with it.

If you want to share screenshots, please feel free to in this thread.

As much as I’d love to stay up all night watching and playing, I have to feed the pup and hit the sack.

Enjoy!

(And yes, peace.)

💕

#Kitten #SmallWeb #DrawTogether #toy #game #web #dev

Hey! and Hi! back to you, whoever you may be :)

https://draw-together.small-web.org

#Kitten #SmallWeb #DrawTogether #toy #game #web #dev

Hah, is this a request?

(If you want to play with it locally and add more colours, just add them to the colours array and you can click through as many colours as you like. I wanted to keep it simple and hence it’s black and white.)

#Kitten #SmallWeb #DrawTogether #toy #game #web #dev

Woah, someone managed to invert the canvas. Who did that? And how? :)

(Are you scripting button presses from the console?) ;)

#Kitten #SmallWeb #DrawTogether #toy #game #web #dev

Aww, this is so much fun to watch :)

https://vimeo.com/926697759

#Kitten #SmallWeb #DrawTogether #toy #game #web #dev

Kitten’s Draw Together being used

Play: https://draw-together.small-web.org Source: https://codeberg.org/aral/draw-together

^Vimeo

Haha, nice, already seeing you all adding and removing pixels :)

Feel free to use this thread to coordinate if you want to :)

#Kitten #SmallWeb #DrawTogether #toy #game #web #dev

So given it’s Saturday night, I thought I’d have a little fun with Kitten and make a tiny collaborative drawing toy.

You have a 20×20 grid and only black and white to draw with and everyone shares the same canvas.

https://draw-together.small-web.org

Have fun + looking forward to seeing what we all, umm, draw together.

💕

PS. It took about 60 lines of code.

View source: https://codeberg.org/aral/draw-together

#Kitten #SmallWeb #DrawTogether #toy #game #web #dev

Minor Kitten¹ update: Even if your page routes now return nothing (e.g., null, undefined, empty string), a proper page will be rendered that includes the development-time WebSocket that powers hot reloads.

So the shortest valid page route is now:

```js
export default () => ''
```

And, more importantly, e.g.,

```js
export default () => kitten.html`
<page css>
`

Will also render.

💕

¹ https://codeberg.org/kitten/app

#Kitten #SmallWeb #HTML #CSS #JavaScript #htmx #hypermedia #web #dev

app

A web development kit that’s small, purrs, and loves you.

<sup>Codeberg.org</sup>

Want to really learn JavaScript? (Not whatever is the bloated framework of the week?) Attend Modern JavaScript for Beginners—a project-based workshop for beginners and aspiring developers by the wonderful @cferdinandi

Early bird discount (40% off) ends Sunday.

“I struggled with JavaScript for a decade so I really would recommend it for anyone who needs a big friendly confidence-booster.” – @laura

https://gomakethings.com/courses/modern-js-for-beginners/

#JavaScript #training #web #dev

Modern JavaScript for Beginners

Modern JavaScript for Beginners A project-based JavaScript workshop for beginners and aspiring developers. Get the skills and confidence to really understand JavaScript and build your own projects from scratch.

<sup>gomakethings.com</sup>

Been building a couple of projects with Kitten in the last month and it’s been so easy to pick up and run with.

Like I’ve even got the author on call 24/7 but I’ve barely had to ask for his help. (And when I have, it’s usually a me problem.) (Though it is very nice when he adds new features that I wanted!)

https://codeberg.org/kitten/app

#kitten #SmallWeb #web #dev

app

A web development kit that’s small, purrs, and loves you.

<sup>Codeberg.org</sup>

OK, web performance people, my website has always scored a perfect 100 in Lighthouse, so I was surprised to see a measly 96 for performance in the Eleventy leaderboards speedlify listing. The problem seems to be a low speed index. This is all just for fun and out of curiosity, but what can I do to increase it? The site is a very basic static one hosted on Netlify: https://www.11ty.dev/speedlify/martingunnarsson-com/

#eleventy #11ty #speedlify #web #webdev #webdevelopment #webperf #webperformance #webperformanceoptimization

Update: I forgot to make the toast message `div` into an `aria-live` region so toast messages are read out when they arrive for people who use screen readers.

Now fixed.

Source code: https://codeberg.org/kitten/app/src/branch/main/examples/streaming-html/toast/index.page.js

Thanks to @hi_mayank for catching that one. Appreciate it!

💕

#Kitten #SmallWeb #StreamingHTML #web #dev #htmx #hypermedia #WebSocket #html #css #JavaScript #toast #accessibility #a11y

PS. Those 42 lines are all the source code.

That’s it.

No scaffolding. No npm create this-or-that.

1. Create a folder called toast.
2. Add those 42 lines of code to a file called index.page.js in that folder.
3. Run kitten¹.

Now hit https://localhost in your browser and you will see the example running just like in the video in the first post.

💕

¹ https://codeberg.org/kitten/app

# Kitten #SmallWeb #StreamingHTML #web #dev #htmx #hypermedia #WebSocket #html #css #JavaScript #toast

app

A web development kit that’s small, purrs, and loves you.

<sup>Codeberg.org</sup>

🍞 Kitten toast, anyone?

A fifteen-second demo of how you can create a toast message in 42 lines of code¹ without writing any client-side JavaScript using Streaming HTML² in Kitten³.

Video:

https://vimeo.com/925828491

Source code:

https://codeberg.org/kitten/app/src/branch/main/examples/streaming-html/toast/index.page.js

Enjoy!

💕

¹ Almost half of which is CSS.
² https://ar.al/2024/03/08/streaming-html/
³ https://codeberg.org/kitten/app

#Kitten #SmallWeb #StreamingHTML #web #dev #htmx #hypermedia #WebSocket #html #css #JavaScript #toast

Streaming HTML

Building the Streaming HTML counter example. Estimated reading time: 25 minutes. Kitten has a new experimental workflow for creating web apps called Streaming HTML that I want to introduce you to today.

<sup>Aral Balkan</sup>

Kitten ❤️ morphs

You can now add `settle`, `swap`, etc., attributes to Kitten morphs using Kitten’s `morph` syntactic sugar¹

e.g.,

```html
<div morph='settle:2s'>
```

Is syntactic sugar for:

```html
<div hx-swap-oob='morph settle:2s'>
```

Morphs are an important part of Kitten’s Streaming HTML workflow which you can learn more about in the attached video (https://vimeo.com/920601063) and this blog post:

https://ar.al/2024/03/08/streaming-html/

#Kitten #SmallWeb #web #dev #htmx

¹ https://codeberg.org/kitten/app#to-whet-your-appetite

Streaming HTML

Building the Streaming HTML counter example. Estimated reading time: 25 minutes. Kitten has a new experimental workflow for creating web apps called Streaming HTML that I want to introduce you to today.

^{Aral Balkan}