Tutorials
These tutorials teach you how to build Small Web apps using Kitten.
They start from the basics of traditional web development, using HTML, CSS, and JavaScript and proceed to cover the unique features available only in Kitten like the Streaming HTML workflow and building peer-to-peer web apps (also known as Small Web apps).
1. Static HTML
Make your first static āHello, world!ā Kitten page using plain old HTML.
Topics covered
- How to run Kitten.
- The basics of how to use the Kitten server in development.
- How to create a static HTML page.
2. Dynamic Pages
This tutorial kicks off the Kitten Count series of tutorials (tutorials 2-9) that take you through the basics of Kitten by building and evolving an interactive page to count kittens.
Topics covered
- Dynamic pages (.page.js files).
- File system-based routing.
- The
kitten.htmltagged template string. - Security and string sanitisation.
- The
<page>tag.
3. Type Safety
Learn how to implement type safety in your Kitten apps.
Topics covered
- JSDoc.
- TypeScript Language Server.
- The type-safe Kitten namespace package (@small-web/kitten).
4. Markdown
Recreate the Kitten count example in Markdown.
Topics covered
- Kittenās Markdown support.
5. Persistence
Learn how to persist information using Kittenās built-in JavaScript Database (JSDB)
Topics covered
- Persistence.
- JavaScript Database (JSDB).
- The Kitten CLIās
dbcommand. - Your projectās entrypoint (the main.script.js file).
- Database app modules.
6. Kittenās Interactive Shell (REPL) š¢
Explore Kittenās interactive shell (REPL) to inspect your database and get introduced to the concept of Kitten components.
Topics covered
- How to launch and use Kittenās interactive shell (REPL).
- Exploring the global
kittenobject. - Kitten components and component properties (props).
- Inspecting your appās database.
- Listening for events on database tables.
- More insight into Kittenās router and how to manipulate it with the shell at runtime.
7. Conditionals
Learn how to implement conditional statements in Kitten templates.
Topics covered
- The different ways to implement conditional logic in Kitten templates.
- Kittenās
<if ${condition}><then>ā¦</then><else>ā¦</else></if>tags.
8. Sessions
Explore Kittenās build-in session support and how to store data scoped to individual sessions.
Topics covered
- Kittenās
request.sessionobject. - Difference between first-party (good) and third-party (bad) cookies.
- Introduction to Kittenās own internal JSDB database (
_db). - How to persist data scoped to the current session.
9. Database App Modules
See how to implement type safety for your databases by creating and using database app modules.
Topics covered
- Kittenās design philosophy of beautiful defaults and layered complexity.
- Persisting custom objects (instances of your custom classes).
- App Modules.
- Database App Modules.
- How Kitten handles Node module dependencies (automatic updates using
npm ci, etc.) - Database compaction.
10. Fetching and working with data
This tutorial is the first of the two Fetchiverse tutorials where you work with data from the fediverse (specifically, from Aralās fediverse instance).
Topics covered
- Kittenās Node.js runtime.
- Node modules.
- Nodeās Fetch API.
- The fediverse.
- Working with APIs.
- Kittenās default HTML sanitisation and using the explicit [code]safelyAddHtml[code] function.
- How to specify boolean HTML attributes in Kitten templates.
11. Components and fragments
Learn how to break up your pages and apps into smaller, well-encapsulated, and easily maintainable components and fragments.
Topics covered
- Refactoring pages to use components and fragments.
- Components (.component.js files).
- Fragments (.fragment.js files).
- Importing components and fragments.
- How to scope styles.
- Component and fragment properties (props).
- Passing HTML attributes to components and fragments.
12. Slots
Explore how slots provide a convenient means of passing larger pieces of content to be rendered in your components and fragments.
Topics covered
- Introduction to slots
13. Layout components
Learn how to create layouts that are used by multiple pages in your app, either by using slots directly or by using the higher-level abstraction of layout components.
Topics covered
- Using slots for layout.
- Layout components.
- Passing CSS class lists to components and fragments.
- Named slots.
14. Special page slots
Learn about the special HTML, HEAD, START_OF_BODY, BEFORE_LIBRARIES, AFTER_LIBRARIES, and END_OF_BODY slots that you can use to inject content into different parts of your page.
Topics covered
- Special page slots.
- Non-JavaScript components and fragments (HTML, CSS, and Markdown).
15. Authentication š
Learn about how you can implement authenticated routes in Kitten by simply appending a lock emoji (š) to the file names of routes as you build a simple guestbook example that uses the POST/redirect/GET pattern and JSDB to store guestbook messages in a database.
Topics covered
- Your project-specific secret.
- Authenticated routes.
- HTTP Routes.
- Implementing the POST/redirect/GET in Kitten.
16. Multipart forms and file uploads
Explore Kittenās built-in support for multi-part forms and file uploads as you build a simple image upload example.
Topics covered
- Working with the
request.uploadslist. - The structure of Upload objects.
17. htmx, the htmx WebSocket extension, and socket routes
Get introduced to Kittenās first-class support for htmx and the htmx WebSocket extension and how to use them to extend the Fetchiverse example to create the Streamiverse example: a streaming interface of curated public fediverse posts.
Topics covered
- Kittenās first-class support for certain libraries and how to include them in your pages.
- htmx.
- htmx WebSocket extension.
- Hypermedia-Driven Applications.
- Kittenās WebSocket routes (.socket.js files).
- How to broadcast messages to all connected pages.
18. Two-way WebSocket communication
Learn how to take the one-way WebSocket communication you saw in the Streamiverse example further to develop two-way WebSocket communication by building a simple echo server. It also introduces you to Kittenās first-class support for Alpine.js.
Topics covered
- Sending WebSocket messages from the client to the server.
- Echoing WebSocket messages back from the server to the client.
- Progressively enhancing your client using Alpine.js.
19. Streaming HTML
Kitten gives you a simple-to-use event-based HTML over WebSocket implementation called Streaming HTML (because youāre streaming HTML updates to the client) that you can use to build web apps.
Topics covered
- Using Kittenās Streaming HTML flow.
- Review of Kitten fundamentals (the page tag, fragments and components, etc.).
- Streaming HTML in pure htmx.
- Streaming HTML with pure client-side JavaScript.
- Streaming HTML in plain old Node.js.
20. End-to-end encrypted peer-to-peer Small Web apps
Start by creating a basic initial ephemeral, unauthenticated chat application and then build upon it to create an authenticated, peer-to-peer, end-to-end encrypted Small Web chat application using Kittenās unique first-class support for route authentication, ed25519 identities, and higher-level cryptogaphic primitives.
Topics covered
- Public-key cryptography, how to carry out Diffie-Hellman key exchange, and encrypt and decrypt data in Kitten using the Kitten Cryptography API.
- Testing peer-to-peer web applications (Small Web apps) locally during development using Kittenās localhost aliases.
- Detecting and presenting online/offline status.
- Debugging htmx using the htmx logger.
- Using authenticated routes.