Many people don’t know this, but you can add any website to your home screen. Any website works, but Progressive Web Apps (PWAs) specifically, will behave like real mobile apps, allowing for a seamless user experience. I wasn’t sure if I should make this post, but many developers and users still don’t know how to take advantage of PWAs. I figured I will make this post as reference for future projects of mine that take advantage of these extended capabilities that PWAs provide. Benefits of Using PWAs No app store or downloads needed Faster loading and offline support Cross-platform,

In this quick guide, I will show you how to build your own Python app with a GUI using Tkinter or PyQt, and distribute it as an executable file. Currently, this approach has only been tested on Windows, but similar steps can be applied to macOS or Linux with some adjustments. I’ll update this post once I confirm those details Create Your Python Project in a Dedicated Environment You can create your Python project however you prefer. I tend to use PyCharm because it makes it easy to manage environments. I will also be using command prompt, PowerShell acts

Update: March 4th, 2025 TailwindCSS v4 is out now and much easier to setup than v3. You can check the official guide to setup TailwindCSS for Vite here. Once setup, you can skip the Tailwind setup below. Dark mode used to be a pain to implement, requiring complex CSS and state management. With Tailwind CSS, you can add a fully functional dark mode system to your React app in minutes. I’ll show you how to set it up with just a few configuration steps and components. First start by creating a Vite React project with npm create vite@latest or

Building on my previous guide about Ollama chatbots, let’s explore how to leverage AI vision capabilities offline. Using models like LLaVA (Large Language-and-Vision Assistant), you can analyze images locally without relying on cloud services or API costs. Setting Up AI Vision Models If you’ve already installed Ollama, you’re just one command away from using AI vision. If not check out my last post for a quick setup of Ollama. Here’s how to get started: Download LLaVA models: ollama run llava:7b Analyze Images: # Navigate to desired image directory and runollama run llava "describe this image: ./art.jpg"# Or if already

Generative AI tools like ChatGPT, Gemini, or Claude have been a game-changer for many use cases, but they don’t come without drawbacks. Privacy concerns, costs, and reliance on internet connectivity can be significant hurdles for some users. Ollama solves these issues by giving users more control, allowing them to self host open-source LLMs on their own machines. In just a few steps, you’ll have your own free, local LLM at your fingertips. Plus, with Ollama’s API and libraries, you can integrate this powerful AI into your own applications. Getting Started with Ollama 1. Download and Install: Head over to

Alias paths are custom paths you can set up in your React projects to simplify your imports. I made the mistake of using relative paths like ../../../components/Button for too long when I could’ve simplified my code by using @/components/Button instead. Not only will it make your code more readable, but also more maintainable, consistent, and efficient, saving many headaches. Vite makes it simple to add this functionality and can be added with a few lines of code. First, in your vite.config.ts file you need to import path then just add a resolve object with the aliases needed for your

Update: March 4th, 2025 TailwindCSS v4 is out now and much easier to setup than v3, so this guide is not recommended going forward. You can check the official guide to setup TailwindCSS for Vite here. However, if you need version 3, the following guide will work with v3.4.17. TailwindCSS will speed up your web development by allowing you to implement the most common CSS styles directly in your HTML, JSX, etc. When creating reusable components like in React for example you will quickly see its benefits and save you a lot of time. You can use it to

React Native and React are actually two different frameworks which confused me when I first started learning. React is primarily for web development, whereas React Native is meant for building mobile applications. By using the same JSX syntax, developers can easily create cross-platform mobile apps for iOS and Android. The essential concepts of React are the same, however there are differences like how React Native uses built-in components like <View>, <Text>, <Image>, and how StyleSheet is used instead of CSS. I won’t be going into detail on the differences here, but just show you a quick guide how to

My main reason for choosing to develop with Vite over create-react-app is how fast it is to install and start building your app. Installing with CRA feels like the GTA 5 loading screen. Vite is essentially a lightweight development environment that lets you quickly develop in React and I’ll go over the basics here to get your project started. Assuming you already have Node.js installed, if not install here, you’ll first need to install Vite: npm install -g vite Next you can create a new React project with Vite with: npm create vite@latest You will be asked to enter

When building apps with React, sometimes it makes more sense to create an interface to be used on desktop, especially if it doesn’t need to be connected to the web. I came across this when I wanted to build an app to manage local files. I used Tkinter with Python, but I felt I could build faster, better looking interfaces with React, which is when I learned about Electron. Electron was created by GitHub to build their Atom text editor, and is now used in popular apps like VSCode and Discord. By using React and Electron together, it’s possible