A dynamic leaderboard for a climbing gym challenge, pulling live data from a Google Sheet via GViz API. It aggregates feet climbed per participant, splits staff vs climbers, shows progress toward a mile, and includes filtering and highlighting features.
This Vue.js application generates a dynamic grid of hex color swatches, displaying a range of colors from dark to light across rows and columns. By stepping through RGB values programmatically, it creates a visual color chart useful for designers, developers, or anyone selecting colors. The app leverages Vue’s reactivity and templating to render the table efficiently, with each cell showing its hex code on a contrasting background. This example demonstrates how Vue can build simple, interactive widgets for tasks like color picking, data visualization, or utility tools without complex setups.
Lazy loading defers the loading of images until they are about to enter the viewport, improving page load times and reducing bandwidth usage. This demo uses the native loading="lazy" attribute on an <img> tag, which leverages the browser’s built-in Intersection Observer API for automatic lazy loading without custom JavaScript. Lazy loading is ubiquitous on the web, seen in image-heavy sites like e-commerce, galleries, and social media, where it enhances performance by loading content on demand. It’s essential for mobile users and slow connections, preventing unnecessary data transfer.
I built a Vue.js tool to post-process AWS Transcribe JSON output into editable captions. It displays transcripts with confidence-based highlighting, allows word edits, and exports VTT/SRT files. Useful for refining AI-generated captions for accuracy and accessibility in videos.
Toastr is a lightweight JavaScript library designed for creating non-blocking notification popups, commonly known as “toast” messages. These notifications appear temporarily on the screen to convey information, alerts, or feedback without disrupting the user’s current task. In this demo, we explore a basic setup of Toastr, configuring its options for a polished user experience and demonstrating how to trigger an informational toast message. This approach enhances web applications by providing subtle, animated feedback that improves usability and user engagement.
I developed a JavaScript utility to detect and log browser state changes using Page Visibility API and lifecycle events. It tracks states like active, passive, hidden, frozen, and terminated, logging transitions for analytics or debugging. Useful for optimizing performance, user engagement, and resource management in web apps.
A client-side web tool for generating Moodle-compatible CSV files to bulk-enroll users across multiple courses. Built with Vue.js, it processes lists of emails and names, applies formatting rules, and generates downloadable enrollment CSVs for LMS administrators.
I built this lightweight countdown timer as a clean, ad‑free “entry dashboard” for virtual meetings or conferences. When people join early, they immediately see a large timer over a subtle looping video background plus a short message about when we’ll start.
I built an interactive video table of contents that syncs playback with a clickable chapter list. As the video plays, the current section highlights automatically; click any chapter and it jumps straight there.
I built a client-side converter using Vue.js to transform WebVTT or SRT subtitle files into clean, readable transcripts. It removes timings, HTML tags, and formatting artifacts, preserving speaker names for accessibility. Useful for content creators needing plain text transcripts from caption files.
I built a browser‑only course blueprinting tool that lets instructional designers rapidly structure modules, topics, objectives, notes, and media requirements—and then export clean outlines (PPT, agenda table, CSV, objective reports) without a backend. It uses Vue + Bootstrap 4, a small in‑memory schema, and the Web File & Storage APIs for persistence and export. Autosave, validation (word counts, flagged terms, spacing), and lightweight reporting make iteration fast while keeping content consistent.
A zero-install browser tool that counts words in any selected text on any webpage. Drag it to your bookmarks bar once, use it everywhere—no extensions, no permissions, no server calls. Perfect for writers checking quotas, students verifying assignments, or anyone working with text limits.
This project assigns random background colors to all <div> elements on the page using JavaScript, triggered on page load. Refreshing the page generates new colors, creating a dynamic visual effect. The layout uses CSS Flexbox to arrange three main divs (header, middle, bottom) in a column, with responsive adjustments for larger screens. While this could be used for playful UI elements or color-themed designs, it was primarily built for fun and to experiment with how div placement and ordering behave under various Flexbox properties, offering insights into CSS layout mechanics.
An interactive multiplication table using Vue template bindings and minimal CSS. Adjust the bounds, and hover to trace products.
This JavaScript project implements base conversion to generate short URLs or passwords from numerical IDs. It converts a random base-10 number to a custom base-32 representation, using a character set that avoids ambiguous letters (e.g., no ‘0’ vs ‘O’, ‘1’ vs ’l’). I enjoyed building this, exploring number systems and imagining a URL shortener backend where database indices translate to compact, readable codes. Concepts like removing similar-looking characters or using distinguishable fonts enhance usability, making short links or passwords more user-friendly and error-resistant.
A lightweight “addition War” game in the browser. The UI uses Bootstrap 4 and jQuery for layout/interaction, while the game logic is plain JavaScript. Cards are rendered with Unicode playing-card glyphs, so no image sprites are required. Try it here: card game demo.
Accessible math content in HTML files using LaTeX or TeX code and converted during page load.
This live search filter uses jQuery to provide instant, client-side filtering of a list as users type in an input field. It attaches data attributes to list items for case-insensitive matching and shows/hides items based on the search term. Live search enhances user experience in applications with large datasets, allowing quick narrowing without page reloads. Alternatives in Vue or Angular implement reactive data and computed properties for declarative filtering. Live search is useful in e-commerce product lists, documentation search, or contact directories. For server-side searches, implement a time delay (debouncing) to throttle requests, reducing load and improving performance.
Handlebars.js is a templating engine that allows embedding expressions in HTML-like templates, compiling them into functions for rendering with data. This demo compiles a simple template, passes a context object, and inserts the rendered HTML into the page. Handlebars excels at generating static content from data, with features like helpers and partials for complex logic. While I’ve primarily used Vue.js for reactive components, Handlebars could be preferable for server-side rendering or static sites where reactivity isn’t needed, offering a lightweight alternative for templating without a full framework.
I built a web-based Syllabus Management Program to retire a mountain of PDFs and replace them with clean, accessible, versioned HTML. This was a solo build over multiple months; I partnered with the curriculum team for the canonical structure and content migration.
Highlight.js is a lightweight JavaScript library that automatically detects and highlights syntax in code blocks on web pages. This demo loads Highlight.js via CDN, initializes it on page load, and showcases highlighted code in multiple languages like HTML, CSS, JavaScript, Java, and SQL. It’s essential for blogs, documentation, and tutorials to make code readable and professional. Use cases include developer sites, educational platforms, and any content with code snippets. Alternatives like Prism.js offer similar features with different themes and plugins.
This custom video playlist manager was built for a professor needing to embed self-hosted videos in an LMS course without relying on external platforms like YouTube. It features an HTML5 video player with a scrollable list of video titles; clicking a title loads and autoplays the corresponding MP4 file. The setup ensures videos play directly from the institution’s server, avoiding potential blocks or ads. It supports start times for specific clips, enhancing navigation in educational content.
This Vue.js application serves as a binomial probability calculator, allowing users to input parameters like number of trials (n), probability (p), and successes (x) to compute and display probability distributions in a dynamic table. While the math behind binomial distributions is fascinating, the real focus here is Vue’s power in creating simple, single-purpose tools and widgets. Vue’s reactive data binding and declarative templates make it effortless to build interactive utilities without complex setups, enabling quick prototyping of calculators, converters, or data visualizers.
I created a personalized checklist widget for Brightspace D2L LMS, conditionally released to professors based on user role. It uses injected variables like {OrgUnitId} and {FirstName} to provide course-specific navigation links for semester start/end tasks. This helps professors quickly access tools for course setup, management, and closure.
Intro.js is a lightweight JavaScript library for creating interactive, step-by-step guided tours on web pages, helping users navigate and understand new interfaces. In this demo, it highlights elements like buttons or sections with tooltips, guiding users through a sequence of steps. This onboarding technique reduces confusion in complex apps, improving user adoption and satisfaction. The library supports customization for positioning, themes, and callbacks, making it versatile for tutorials, feature introductions, or walkthroughs.
This interactive tool combines Vue.js for user inputs and probability calculations with Desmos graphing to visualize the normal distribution bell curve. Users enter a Z-score, and the app computes the cumulative probability using a custom Gaussian distribution library. Clicking “Update Graph” dynamically shades the area under the curve in Desmos, illustrating concepts like one-sided probabilities. The implementation focuses on JavaScript integration for real-time updates and Desmos’ API for embedding interactive math visualizations.
Font Awesome is a popular icon library that provides scalable vector icons via CSS classes, enabling easy integration into web projects without images. It offers thousands of icons for common UI elements like arrows, social media, and symbols, loaded via CDN or locally. This dynamic cheat sheet displays Font Awesome icons in a grid, showing each icon with its class name for quick reference. Built with modern frameworks like Vue or Angular, it could loop through an icons array to generate the layout reactively. I created this tool for personal reference, consolidating icons in one place, and even printed it as a large poster on a plotter at work for easy desk access.
Doorbell.io is a lightweight feedback and support tool that allows users to send messages directly from a website, with options for customization like pre-filled user data and contextual properties. In this LMS integration, the widget is conditionally embedded based on the user’s role (e.g., instructors only), using Brightspace variables injected into the page. This captures details like name, email, course info, and quick links to LMS tools, enabling personalized support for professors. The setup provides an easy way for educators to ask questions during course support, streamlining communication without sharing sensitive student data.
Custom Markdown Editor with Mathjax for LaTeX support and code highlighting.
CSS counters provide a powerful way to automatically number headings in HTML documents without JavaScript or manual updates. This technique uses the counter-reset and counter-increment properties to create hierarchical numbering, such as 1., 1.1., 1.1.1., and so on. In this demo, we apply counters to h2 through h6 elements, resetting at each level for proper nesting. An optional “nocount” class allows skipping numbering for specific headings, maintaining continuity. This approach ensures consistent, dynamic numbering that updates automatically as content changes.
A lightweight proof-of-concept for conditionally revealing content based on typed passcodes—useful for instructor answer keys, staged release of learning materials, or tiered access without full authentication. Originally built with AngularJS, easily adaptable to modern Vue or Angular.
The Elo rating system is a method for calculating the relative skill levels of players in competitive games, particularly chess. It adjusts ratings based on game outcomes, rewarding wins against stronger opponents and penalizing losses to weaker ones. This calculator demonstrates Elo calculations, allowing users to input current ratings and game results to see rating changes. Elo is a form of pairwise comparison, evaluating players in head-to-head matchups. Beyond chess, it’s used in esports, online gaming platforms, and even non-gaming contexts like ranking algorithms. The widget’s simplicity highlights how binding frameworks like Angular or Vue enable quick development of interactive tools with minimal code.
Rendering chemistry notation online often meant choosing between fidelity and accessibility. Using MathJax 2.7 + the mhchem extension we get both: crisp typeset equations, semantic MathML for assistive tech, and concise authoring with \ce{} macros.
An interactive presentation tool combining Reveal.js for slide navigation and MathJax for rendering LaTeX mathematical equations. This project demonstrates how to create engaging, step-by-step math presentations with fragment animations and proper equation formatting.
Clipboard.js is a lightweight JavaScript library that enables copying text to the clipboard without relying on Flash or complex workarounds. In this demo, it powers a simple copy button that targets an input field, allowing users to copy pre-filled content with a single click. Copy buttons and icons have become ubiquitous on the web, appearing in code snippets, shareable links, and form fields to enhance user experience by reducing manual selection and copying. This implementation uses Clipboard.js for broad browser support, with event handling to provide visual feedback like a “Copied!” message.
A simple JavaScript utility demonstrating localStorage usage by tracking user visit counts across browser sessions. This project showcases browser-based persistence without server-side databases, highlighting the power of the Web Storage API for client-side data retention.
I built an interactive bell curve visualization using Google Charts API to display a normal distribution with customizable shaded regions. It leverages the jStat library for probability density calculations, allowing users to adjust mean, standard deviation, and shading bounds dynamically. The chart renders as an area chart with opacity styling for shading, providing a clear visual representation of statistical concepts like confidence intervals or hypothesis testing areas.
I developed a simple JavaScript toggle for showing/hiding answers in math notes, using EM tags for semantic markup. It allows professors to maintain a single HTML document with embedded answers that can be toggled on/off for students, printing, or PDF exports. This reduces maintenance overhead by eliminating the need for separate versions of content with and without answers.
Markdown is a lightweight markup language that uses plain text formatting syntax to create rich text documents. It employs simple symbols like # for headings, * for emphasis, and for links, making it easy to write and read. Originally designed by John Gruber, Markdown is widely used for documentation, blogs, and README files on platforms like GitHub. This demo uses the Marked library to parse Markdown content from a script tag, tokenize it, and render it as HTML in the browser. A Markdown parser on the web is useful for real-time previews in editors, content management systems, and forums, enabling users to write in Markdown and see formatted output instantly without server-side processing.
I created a client-side JavaScript utility to print specific sections of a webpage without printing the entire page. It uses an iframe to isolate the selected DOM element, injects custom CSS for print styling, and triggers the browser’s print dialog. This allows users to print targeted content like forms, tables, or articles, improving usability for long pages or content-heavy sites.
I built a random tip widget for LMS platforms like D2L, displaying tips from a JSON array with navigation and auto-refresh. It shows a title, content, and link, with next/previous buttons and timed updates. Useful for engaging students with daily tips or reminders in educational environments.
This Vue.js application demonstrates dynamic form validation using regex patterns, providing real-time feedback as users type. It validates name and email fields, displaying error messages instantly without waiting for form submission. The form integrates with Firebase for data persistence, adding/removing users reactively. Dynamic validation enhances user experience by catching errors early, guiding corrections, and preventing invalid submissions. Benefits include reduced frustration, improved data quality, and a more interactive interface compared to traditional submit-time validation.
Inline HTML editors like TinyMCE let users edit content directly on the page—no separate admin panel, no modal windows, just click and type. This pattern is great for quick updates, content-heavy workflows, and giving non-technical users a clean editing experience.