Curious about custom mechanical keyboards but not sure where to start? This beginner-friendly guide walks you through all the essential basics—from switch types to keycap profiles and materials. You’ll learn what a mechanical keyboard is made of, understand its core components, and get the knowledge you need before shopping for your first build.

Build your own AI search engine with Next.js, SQLite, and free open-source LLMs. This tutorial guides you through implementing Retrieval-Augmented Generation (RAG) for accurate, context-aware search, bypassing costly APIs. Discover how to leverage local models and vector databases for powerful, privacy-focused search results.

Learn how to build a free AI-powered recommendation engine using open-source embedding models from Hugging Face and Transformer.js. This step-by-step guide will show you how to generate text embeddings, compare article similarities, and create personalised content suggestions—without relying on paid APIs.

Master Vue props binding with this in-depth guide! Learn how to correctly pass strings, numbers, booleans, objects, arrays, and functions as props. Avoid common mistakes, understand prop types, and follow best practices to write clean, efficient, and error-free Vue components.

A comprehensive guide for React developers transitioning to Vue. Learn the differences in components, styling, state management, lifecycle hooks, and more. Master Vue concepts quickly with React comparisons. We will dive into Vue's unique features, like the ref and reactive functions, v-if directives, and computed properties, make it a powerful alternative to React. Whether you're a React developer exploring Vue or simply curious about its differences, this guide provides practical examples and insights to get you started.

This blog post dives into the Container/Presentational Pattern, demonstrating how to create cleaner, more modular, and reusable code with React Hooks and Vue 3 Composables. Explore how to modernise this classic frontend pattern by transitioning from traditional implementations to scalable, maintainable solutions. Perfect for developers looking to streamline logic, enhance maintainability, and build better React and Vue applications.

Learn how to create a reactive system in JavaScript using Proxy, step-by-step, from monitoring changes to implementing a Vue.js-inspired ref function. This guide covers everything from simple examples to advanced TypeScript integration, culminating in a practical demo of two-way HTML bindings. Perfect for developers exploring reactivity concepts and building modern web apps.

If you've used Vue or Nuxt, you're likely familiar with the "v-html" directive. This is used to dynamically insert HTML content into an element. It takes a string value containing HTML tags and text, replacing the inner HTML of the target element with this content. One limitation of "v-html" is that it does not allow you to render "<nuxt-link>". Instead, all "<a>" HTML tags do not use the native Vue router. However, we can address this limitation by writing our own directive. This will allow all "<a>" tags to be converted into "<nuxt-link>". Thanks to Nuxt and its plugin system, we can easily expand the functionality of Nuxt. Let's get started.

If you're familiar with Nuxt.js, you might know that the latest version, Nuxt version 3, runs on a new server engine called Nitro. Nitro isn't just used in Nuxt, it's also an independent open-source framework for developing web server applications. It provides several built-in features that make it a modern, user-friendly backend framework. Nitro is open-source and maintained by the same core team as Nuxt.js. In this blog post, we'll show you how to build a simple web server using Nitro and connect it to an SQLite database. We'll also explain the process of database migration with TypeORM, a popular typescript library, introduce the widely-used pattern for validating request data, the Data Transfer Object (DTO), and utilise some of Nitro's built-in features to cache results.

In this blog article, we have demonstrated how to define multiple components in a single .vue file in Nuxt using JSX. By using JSX, we can combine regular Vue components and JSX components in the same file, thus utilising the same reactivity system provided by Vue. While it is generally recommended to separate components into individual files, there are situations where declaring small components in the same file can be beneficial. We hope you found this blog article useful. Please subscribe for more articles like this in the future.