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.

I had an idea to create an image-to-text automation tool for writing descriptions for my images. As a hobby landscape photographer, I have a lot of images, and this tool would speed up my workflow when posting on Instagram. I thought, "Well, I am a software developer. I can develop something like that very quickly, right?" I only need to add my credit card details to OpenAI, and then I can start using their API. This sounds simple enough. Well, let's discuss how it all went. Imagine attaching an image and then starting a conversation with an AI assistant about the description you need help writing for that image. It would look something like this.

If you're a JavaScript developer, you may have heard about the buzz around signals lately. Several popular JavaScript frameworks, such as Vue, Preact, Solid, Angular, and Quick, have recently implemented and supported the use of signals. But what exactly are signals? As web applications become more complex, managing the state of JavaScript applications becomes a challenge. This is where signals can be a valuable tool, allowing the application to respond to changes in the state, such as a variable change. In this article, we will explore the concept of signals and how they can be used in Vanilla JavaScript applications. We will use the Vue and Preact reactivity libraries and see how easy and similar these two approaches are to implement. For the demo project, we will use Vite. So let's get started by creating a Vite app.

Components in Vue are reusable custom elements that can be reused in Vue templates throughout the app. In a large scale application, we will come across a situation where we have nested components such as parents and children. In recent work, I faced the challenge of having to reload the child component only. This article will explain the intricacies to the challenge. Looking back, it took me unbelievably long to figure out a solution. Nevertheless, my blog post will provide quick and easy, short, sharp steps to any developer who might be faced with the same challenge. Let's get started. We can easily scaffold our Vue 3 project using Vite with the following command

GreenSock Animation Platform (GSAP) is the most robust JavaScript animation library to date that allows developers to animate literally any DOM element with a breeze. GSAP provides an API that can be used for complex animation to be created. Hence, is still supported by all major browsers. In comparison to CSS animation, sequencing in GSAP is very easy. So let's have a look at GSAP. We are going to use GSAP in a Vue 3 project. We will use Vite as a build tool. In this blog article, we are going to animate DOM elements. GSAP is also capable of animating SVG, Canvas, WebGL, JS object etc. The full documentation of GSAP can be found at this.

<Suspense> is a special component in Vue 3 that lets us wait for some data to be loaded, before our component can be rendered. In other words, Suspense allows us to render some fallback content. A good example will be a loading spinner while waiting for an asynchronous API call to fetch some data from the server. Once the data has been loaded, the main content will show up. This feature allows us to create a smooth user experience. The <script setup> has top-level await, this means that the reactive variable msg won't be shown in the template until the fetch is completed. To improve the user experience, it would be nice if we displayed a loading message before the data has been loaded. This is where Suspense comes handy.