Jason Brain's Tech Blog

Radio Stream Player v1.2: The "Universal Streaming" Update is Here! ๐ŸŽต๐Ÿš€

by Jason Brain

Radio Stream Player v1.2: The "Universal Streaming" Update is Here! ๐ŸŽต๐Ÿš€

It feels like just yesterday we released version 1.1, introducing custom visuals, new themes, and the pop-out player. But today, I am incredibly excited to announce the release of Radio Stream Player v1.2! This is arguably our biggest and most important update yet.

If you've ever tried to build an audio player for the modern web, you know the struggle: most legacy internet radio stations still broadcast over insecure http:// streams. But because our application is hosted safely on https://, modern browsers simply block these streams with a dreaded "Mixed Content" error. It was incredibly frustrating... until now.

๐Ÿ›ก️ The Magic of the Cloudflare Worker Proxy

To finally solve the Mixed Content problem, we built a custom backend proxy using Cloudflare Workers (api.djay.ca). Instead of your browser trying (and failing) to connect to old HTTP stations directly, our player now silently routes those streams through our blazing-fast worker. The worker fetches the insecure radio stream on our behalf and securely pipes it back to you via HTTPS.

The result? You can now listen to any radio station in the world, securely, without any annoying browser errors!

✨ Live "Now Playing" Track Info

But we didn't stop there. Because our Cloudflare proxy is fetching the stream, we built a secondary /metadata endpoint that actively extracts the live ICY Metadata from the broadcast. What does this mean for you?

  • Scrolling Marquee: The player header now features a sleek "Now Playing" display that shows you the exact track and artist name currently playing. If the track name is super long (looking at you, progressive trance mixes!), it smoothly scrolls across the screen.
  • Lock Screen Integration: We wired this live data directly into the OS Media Session API. Now, when you play a station, the actual track name will appear on your smartphone's lock screen, your smartwatch, and your desktop media controls!

⚙️ Player & UI Refinements

We've also taken the time to polish the rest of the experience based on your feedback:

  • Edit Custom Stations: You no longer have to delete and re-add a custom station to fix a typo. You can now simply hit the new "Edit" button (✎) in the Settings menu to tweak the Name, URL, or Genre of any station you've added.
  • Pop-out Player Parity: The pop-out window has been upgraded! It now fully supports the new Custom Stations, the secure Cloudflare Proxy routing, and it even features the same scrolling metadata marquee as the main player window.
  • New Curated Content: We've expanded our default lineup with fantastic new stations including Hirsch Radio Psytrance, Hirsch Radio Progressive, and A State of Trance (ASOT).

๐Ÿ™Œ Open Source & Developer Friendly

We are proudly open-source! Check out our full codebase, star the repository, or contribute to the project over on our GitHub Repository.

Are you a developer looking to host your own version of the player? We've open-sourced our entire Cloudflare Worker script! You can find the worker.js template inside the repository, along with detailed instructions on how to quickly deploy it to your own free Cloudflare account.

๐ŸŒ Embed the Player Anywhere (iFrame Support)

Want to add the Radio Stream Player to your own website or blog? It's incredibly easy! Because our player is responsive and completely self-contained, you can seamlessly embed it anywhere using a simple HTML iframe. The player will automatically adapt to fit the space you give it, making it the perfect audio companion for your own site.

<iframe allow="autoplay; encrypted-media" allowfullscreen="" height="600" 
    src="https://radio.djay.ca/" style="border: none;" 
    title="Radio Stream Player" width="100%" >
</iframe>
    

Ready to hear the difference?

Check out the live player right now at radio.djay.ca!

As always, drop a comment below or open an issue on our GitHub if you have any feedback or stations you'd like to see added. Happy listening!



Gematria Calculator v1.1.0 — "The Researcher's Update"

by Jason Brain

 


Since the release of version 1.0.1, the Gematria Calculator has grown from a polished tool into a comprehensive research platform. I'm incredibly excited to announce the release of Gematria Calculator v1.1.0 — "The Researcher's Update"!

Building Your Own Systems: The Custom Cipher Engine

One of the most requested features was the ability for researchers to define their own numerical mappings. In v1.1.0, we've delivered a full-featured Custom Cipher Engine:

  • Create & Mapping: A dedicated builder interface where you can map every letter (A-Z) to your own specific numerical values.
  • Presets: Quickly initialize your mappings with Sequential, Reverse, or Pythagorean patterns.
  • Import/Export: Share your custom ciphers with the community or back up your research using JSON file exports.
  • Seamless Integration: Your custom ciphers appear right alongside the 28+ standard systems in the calculator and comparison views.

Side-by-Side Analysis: Phrase Comparison Matrix

Researching gematria often involves comparing multiple phrases to find hidden commonalities. The new Phrase Comparison View makes this effortless:

  • Unlimited Comparison: Enter multiple phrases and see their values across all your selected systems in a high-density matrix.
  • Pattern Discovery: The tool automatically highlights matching numerical values in green, allowing patterns to jump off the screen.
  • CSV Export: Need to do deeper statistical analysis? Export your entire comparison table to a CSV file for use in Excel or Google Sheets.

UX & Shareability Improvements

We’ve also added several features to make the tool feel more like a native application and easier to share:

  • Shareable Links: Found an interesting pattern? Use the new "Share" button to generate a unique URL that saves your input text and selected systems.
  • Results Sorting: You can now sort your results by Name, Value, or Default order, and your preference will persist across sessions.
  • PWA Support: The calculator is now a Progressive Web App. You can "Install" it on your phone or desktop for a standalone, distraction-free experience.

Join the Research

This update marks the completion of Phase 1 of our Roadmap, and the platform is now more powerful than ever. Whether you're a seasoned researcher or just starting your journey into the world of numbers, v1.1.0 has something for you.

Thank you for all the feedback and support as we continue to build the most advanced open-source gematria tool on the web!


Core CMS v0.3.0: Themes, Roles, and a Polished Admin Experience

by Jason Brain

I'm thrilled to announce the release of Core CMS v0.3.0. This update represents a major leap forward in usability, customization, and security. While v0.2.0 laid the foundation for content creation, v0.3.0 turns the system into a fully managed platform ready for diverse teams and designs.

Here is what's new in this release.

๐ŸŽจ The Theme System

One of the most requested features is now live. You are no longer stuck with a single hardcoded look.

  • Theme Manager: Switch between visual designs instantly from the Admin Dashboard.
  • Dark Mode: We've included a "Dark Mode" theme out of the box to demonstrate the system's flexibility.
  • Developer Friendly: Creating a new theme is as simple as adding a folder to /themes. Check out the new Theme Builder Guide in the docs.

๐Ÿ‘ฅ User Roles & Security

As teams grow, security becomes paramount. We have implemented a strict Role-Based Access Control (RBAC) system.

  • Administrators: Have full control (Settings, Plugins, Users).
  • Editors: Can manage content and media but cannot touch system configurations.
  • Subscribers: Read-only access (ready for future membership features).
  • User Management: Admins can now Add, Edit, and Delete users directly from the dashboard.

⚙️ Site Identity & Customization

You shouldn't need to write PHP just to change your logo.

  • Site Identity: Update your Site Title, Logo, and Footer Text directly in Site Settings.
  • Label Editor: Want to change "Read More" to "Discover"? You can now override UI text strings via the admin panel—perfect for branding or simple localization.
  • Scroll to Top: A configurable "Back to Top" button to improve navigation on long pages.

๐Ÿ–ผ️ Media & Editor Upgrades

Content creation gets smoother and more accessible.

  • Media Metadata: You can now add Alt Text, Titles, and Descriptions to your images for better SEO and accessibility.
  • Editor.js Image Tool: Drag and drop images directly into your posts using the block editor.
  • Menu Enhancements: Reorder menu links manually and link to internal pages by ID (so links don't break if you rename a slug).

๐Ÿ“Š A Modern Dashboard

We've refreshed the Admin Dashboard. The old text links are gone, replaced by a responsive Quick Actions Grid that makes navigating the backend faster and more touch-friendly.

๐Ÿš€ What's Next?

With the core experience now robust and customizable, we are officially moving to Phase 5. The next major update will introduce the Event Planner Plugin, transforming Core CMS into a specialized tool for managing events and bookings.

View the Changelog | Download v0.3.0

Introducing Core CMS: A Lightweight, Modular Foundation for the AI Era

by Jason Brain

I am excited to announce that I have officially made my latest project, Core CMS, public on GitHub.

For a long time, I've felt that modern Content Management Systems have become too heavy. They often come packed with features you never use, frameworks that require a steep learning curve, and bloat that slows down the "heartbeat" of your website.

I wanted to build something different. Something that returns to the roots of clean, procedural PHP, but architected for the future of AI integration.

๐ŸŒŸ The Philosophy: "The Star in the Core"

The concept behind Core CMS is simple: The Core should be the Brain.

If we treat a CMS like a human body:

  • The Core is the Central Nervous System. It handles the logic, routing, and security. It keeps the lights on.
  • The Database is the Memory (Hippocampus).
  • Plugins are Learned Skills. Just as learning to play the piano doesn't change your DNA, adding an Event Planner shouldn't hack your core files.

This separation of concerns ensures that the system remains fast, secure, and incredibly stable, no matter how many "skills" (plugins) you teach it.

๐Ÿ› ️ Under the Hood

Core CMS is built with a "No Framework" approach to ensure maximum performance and understanding:

  • PHP 8.3+: Utilizing the latest features for speed and type safety.
  • MySQL (MariaDB): Robust data storage using secure PDO Prepared Statements.
  • Block-Based Editing: Integrated Editor.js for a modern writing experience that saves clean JSON data (perfect for AI parsing) instead of messy HTML blobs.
  • Zero Bloat: No heavy frontend frameworks. Just clean HTML5 and CSS3.

๐Ÿš€ What's Built So Far?

We have just completed Phase 4 (Expansion), meaning the system is now a fully functional CMS:

  • Secure Authentication: Login, Logout, and Session management.
  • Content Management: Create, Edit, and Delete Posts and Pages.
  • Taxonomy: Organize content with hierarchical Categories and Tags.
  • Media Library: Upload and manage images securely.
  • User Profiles: Manage accounts and avatars.
  • Dynamic Menus: Control your site navigation directly from the Admin Dashboard.

๐Ÿ”ฎ What's Next?

The roadmap is ambitious. Now that the foundation is solid, we are moving into Phase 5, where we will build the Event Planner Plugin—a specialized module for managing bookings and vendors.

Beyond that, Core CMS is designed to be AI-Native. Future phases include:

  • Admin Copilot: An AI assistant to help draft content and summarize data.
  • Frontend Agents: Chatbots that can query the database to answer visitor questions.

๐Ÿ”— Check it Out

The repository is now open source. I invite you to explore the code, read the documentation, and see how a modern, lightweight CMS is built from scratch.

View Core CMS on GitHub

See the Live Demo

Tooling Up: Rapidly Building an Image Optimization Workflow with AI

by Jason Brain

As I moved down my Project Roadmap, the next major task was Image Optimization. The goal? Improve Core Web Vitals by implementing responsive images (srcset) across the portfolio.

I looked at the task: Create resized versions of key assets (480w, 800w, 1200w).

I could have opened Photoshop and manually exported dozens of files. I could have used a command-line tool. But as a Creative Technologist, I saw an opportunity to build a workflow that I (and others) could use forever.

From Script to Suite in Hours

I had an old, basic script (v1.0.0) lying around that could convert a single image. It was functional but clunky.

Using the Human-AI collaboration workflow I've established with Gemini, we didn't just update the script; we completely overhauled it. In a matter of hours, we took a simple utility and evolved it into v2.2.1 of the Image to WebP Converter.

The Velocity of AI Development

The speed of iteration was staggering. Here is what we accomplished in a single "sprint":

  • v2.0.0: Added responsive size generation (automatically creating 480px, 800px, and 1200px versions) and a real-time quality slider.
  • v2.1.0: Refactored for offline capability, ensuring the tool works without an internet connection—perfect for secure environments.
  • v2.2.0: Added "Force Aspect Ratio" tools (essential for uniform card layouts), custom width inputs, and a ZIP manifest generator.
  • v2.2.1: Rapidly diagnosed and fixed a critical download bug by replacing external dependencies with native browser APIs, ensuring stability across all platforms.

Why Build Your Own Tools?

Why spend time building a tool when others exist?

  1. Privacy: This tool runs 100% in the browser. No images are uploaded to a server.
  2. Workflow Specificity: It is tailored exactly to my project's needs (the specific breakpoints defined in my scratchpad.md).
  3. Learning: It serves as another case study in modern, AI-assisted web development.

Try It Out

The tool is open source and available for anyone to use.

Now that the tooling is ready, I'm equipped to tackle the site-wide image optimization task with efficiency and precision.

Check out the full changelog on GitHub.






Announcing v1.5.0: The "Creative Technologist" Update

by Jason Brain


Following up on this morning's post about strategic content pivots, I'm thrilled to announce the official release of v1.5.0, a milestone update that solidifies the project's architecture and professional branding.

This release is themed around the "Creative Technologist" persona, focusing on standardizing the application's backend and formalizing the Human-AI collaborative workflow that has been so instrumental in this project's rapid development.

๐Ÿ—️ Architectural Standardization: The Bootstrap Entrypoint

The most significant change in this release is the implementation of src/bootstrap.php. Previously, each page was responsible for loading its own configuration. Now, every page on the site starts with a single, unified entry point:

<?php
// Load application bootstrap
if (file_exists('src/bootstrap.php')) {
    require_once 'src/bootstrap.php';
}
?>

This architectural shift replaces scattered configuration checks with a clean, centralized initialization process. It paves the way for future enhancements like class autoloading and dependency management, making the entire application more robust and scalable.

๐Ÿค– AI & Development Workflow

This project is not just a portfolio; it's a living demonstration of a modern development process. Version 1.5.0 formalizes this:

  • DJ Brain Project: I've officially added the DJ Brain project to my portfolio. This self-hosted AI jukebox system is a perfect showcase of my full-stack skills, combining Docker, Python, and PHP.
  • AI Collaboration: The CONTRIBUTING.md and README.md files now explicitly document the use of Gemini and Google's "Antigravity" IDE as core components of my development stack. You can view my full background and credentials on my Resume.
  • Starter Prompts: To streamline future AI coding sessions, I've created a prompt.md file in the repository root. This contains pre-built prompts to quickly bring Gemini up to speed on the project's context and standards.

What's Next?

With the architecture now standardized around bootstrap.php, the next phase will focus on the "Image Optimization" task from the roadmap, where we'll implement responsive images using srcset to further improve performance.

As always, you can view the full details in the v1.5.0 release notes on GitHub.

Portfolio Update: Strategic Pivots, Case Studies, and Performance Tuning

by Jason Brain

It has been a busy week of development on jasonbrain.com. As I continue to refine my digital presence to reflect the "Creative Technologist" persona, I've rolled out a series of significant updates focused on content strategy, technical performance, and deeper storytelling.

Here is a look at what shipped in version 1.4.2.

๐ŸŒฒ Strategic Pivot: Corporate Events

One of the biggest content shifts this week was on the Corporate Events page. Previously, the copy was generic and targeted the broad Toronto market.

I realized that my unique value proposition isn't just "another corporate DJ in the city"—it's my location and expertise in Haliburton and the Kawarthas. I've rewritten the entire section to focus on Corporate Retreats, Off-Site Summits, and Northern Events. This aligns perfectly with the "Tech in Nature" aesthetic of the brand and targets a specific, high-value niche.

๐Ÿ“š Deep Dives: Project Case Studies

A portfolio shouldn't just be a list of links; it should demonstrate how you solve problems. To that end, I've built dedicated Case Study pages for my two flagship web projects:

  1. jasonbrain.com Monorepo: Detailing the custom PHP architecture, security hardening, and performance optimizations of this very site.
  2. LAB: Digital Workshop: A deep dive into my Vanilla JS Single-Page Application (SPA), explaining the hybrid iframe/injection architecture.

These pages allow me to geek out on the technical details—like the "Facade Pattern" for iframes or the server-side include structure—without cluttering the main marketing pages.

⚡ Performance: The Iframe Facade Pattern

Speaking of technical details, I spent time optimizing the Wedding DJ and Music Production pages. These pages are media-heavy, featuring multiple Spotify and HearThis.at embeds.

To prevent these third-party scripts from tanking the initial page load speed (Core Web Vitals), I implemented a Facade Pattern.

Instead of loading the heavy iframe immediately, I render a lightweight HTML/CSS placeholder that looks like the player. The actual iframe is only injected into the DOM when the user clicks "Load Player." This simple change drastically improved the site's Lighthouse performance scores.

๐ŸŽจ UI/UX Refinements

Finally, I polished the user experience across the board:

  • FAQ Accordions: Converted long lists of text into interactive, collapsible accordions for better readability.
  • Resume Expansion: Added my 6+ years of volunteer broadcast experience with Rogers TV (Oshawa Generals) to the Resume page.
  • Spotify Placeholders: Styled the new lazy-loading placeholders to match the dark aesthetic of Spotify embeds for a seamless look.

What's Next?

With the foundation solid and the content aligned, the next phase will focus on Image Optimization (implementing srcset for responsive images) and potentially exploring some WebGL experiments for the homepage header.

Check out the full changelog on GitHub.