RosenavRosenav

Rosenav Development Journal — Building a Zero-Upload Text Processing Platform

A chronological record of engineering decisions, algorithm implementations, and release milestones behind the Rosenav browser-based text tools — from project inception through LCS diff, cosine similarity, and line operation optimization to public launch.

Published by 345tool Engineering Collective • Last updated: June 13, 2026

Rosenav Text Tools — Tabbed interface with Text Diff, Cosine Similarity Checker, and Line Dedup/Sort/Numbering utilities

June 13, 2026

Public Launch, GA4 Release & Production Deployment

Google Analytics 4 Activation — Measurement ID G-XKLCTXFJPB

GA4 tracking was released from the placeholder state and activated with measurement ID G-XKLCTXFJPB. The gtag.js snippet was embedded in header.php with standard configuration for page views, session tracking, and user engagement metrics. This enables the 345tool team to monitor organic traffic growth, analyze user interaction patterns with the three text tool tabs (diff, similarity, dedup/sort), and measure EEAT content engagement — all while maintaining the zero-server-text architecture: GA4 collects only anonymized page-level analytics, never textarea input data.

Tab UI Polish — Seamless Three-Tool Switching Interface

The three-tool tabbed interface received final UX refinements. The active tab indicator uses a bottom-border accent with CSS transition for smooth visual feedback during tab switches. Each tab button includes a Material Symbols icon for instant visual recognition (difference, percent, list_alt). The tab panels use CSS class-based visibility toggling (.text-tab-panel.active) with zero DOM removal, preserving textarea content when users switch between tabs. Empty-state messages provide clear guidance in each panel: "Enter text in both panels and click Compare" for diff, "Enter text in both panels to compare similarity" for the checker, and placeholder-rich textareas for the dedup panel.

Mobile UX Polish — Responsive Textarea & Button Layouts

The diff tool's side-by-side textarea layout was made fully responsive: on viewports below 768px, the dual-panel diff collapses to a stacked vertical layout ensuring comfortable editing on mobile screens. The dedup action buttons (6 buttons: Dedup, Sort A→Z, Sort Z→A, Randomize, Line Numbers, Clear) use flex-wrap to flow naturally into multiple rows on narrow viewports. All textarea elements use spellcheck="false" to prevent browser spell-check from interfering with code snippets and structured data. The similarity checker's progress bar animates smoothly with CSS transitions on width, and color tiers (red→orange→yellow→green→dark green) provide immediate visual feedback.

Production Deployment — Nginx, Sitemap & Final Configuration

The rosenav.com.nginx.conf server block was finalized with production-grade settings: proper server_name rosenav.com www.rosenav.com, TLS/SSL well-known paths, gzip compression for CSS/JS assets, and PHP-FPM upstream integration. The XML sitemap was regenerated with all canonical URLs locked to rosenav.com. The robots.txt was updated with production sitemap reference and crawl rules. All structured data JSON-LD blocks across index, about, privacy, and team pages were verified for consistency against the 345tool satellite site schema standard. The CSS delivery was optimized by merging tailwind.min.css and style.css into a single combined.css file, reducing HTTP requests from two to one.

June 10, 2026

EEAT Content Optimization & Mobile Responsiveness

Homepage EEAT Compliance — Full Content Rewrite with Technical Depth

The homepage was rewritten end-to-end to satisfy Google's E-E-A-T quality guidelines for developer tooling. The Title tag was structured as "Free Online Text Tools — Diff Checker, Similarity Detector & Deduplication | Rosenav" targeting high-intent text processing queries. The Meta Description (155 characters) packs diff, cosine similarity, dedup, and zero-upload keywords into a single compelling snippet. The H1 was expanded to "Free Online Text Tools — Diff Checker, Similarity Detector & Line Deduplication" with three clearly labeled tool tabs. The FAQ section was expanded to 8 question-answer pairs covering LCS algorithm internals, cosine similarity mathematics, dedup vs sort|uniq differences, CSPRNG-based shuffling, zero-server privacy verification, use case coverage, and the 345tool business model. All educational content was anchored with algorithmic rigor: full LCS DP table construction explanation, TF vectorization step-by-step with concrete examples, Fisher-Yates correctness proof, and hash-set dedup complexity analysis.

JSON-LD Structured Data — 8-Entry FAQPage, WebApplication & BreadcrumbList

The JSON-LD FAQPage block was built with 8 question-answer pairs matching the visible HTML FAQ content, maintaining Google's structured-data-to-visible-content parity requirement. The WebApplication type was set to DeveloperApplication with operatingSystem "Web Browser" and browserRequirements listing all major engines. The Organization (345tool Team) and BreadcrumbList blocks were preserved per satellite site matrix policy. All alternateName entries reflect the three tool categories: Text Diff Checker, Text Similarity Checker, Line Deduplication Tool, and Online Text Tools.

Mobile Hamburger Menu Bugfix & Responsive Layout

A duplicate event listener conflict was identified and resolved: both an inline script in header.php and the centralized js/script.js were binding click handlers to the hamburger button, causing the mobile menu to open and immediately collapse on toggle. The inline handler was removed, consolidating all UI behavior into script.js. CSS media queries ensure all three tool panels render correctly on viewports from 320px mobile to 4K desktop. The diff dual-panel layout stacks vertically below 768px. The six dedup action buttons wrap gracefully into multiple rows on narrow screens.

June 5, 2026

Cosine Similarity Engine & Line Operation Utilities

Cosine Similarity — TF Vectorization with Color-Coded Scoring Tiers

The cosine similarity engine was implemented using Term Frequency (TF) vectorization. The pipeline: (1) tokenize() lowercases text, strips punctuation via regex /[^a-z0-9\u4e00-\u9fff\s]/g, and splits on whitespace to extract word tokens — with explicit CJK Unicode range support for Chinese text comparison. (2) termFrequency() builds sparse frequency maps for each text. (3) cosineSimilarity() constructs a shared vocabulary space, builds aligned vectors, and computes dot product ÷ (magnitude_A × magnitude_B). The result is displayed as a percentage (0–100%) with a color-coded progress bar: ≥90% dark green (nearly identical), ≥70% green (high), ≥40% yellow (moderate), below 40% red (low). A qualitative interpretation label and token counts for both texts are displayed for transparency. This cosine-based approach was chosen over Euclidean distance specifically because it normalizes for document length — a 500-word and 5,000-word text on the same topic can score high.

Dedup/Sort/Lines — Six Operations in One Panel

The third tab bundles six line-level text operations. Deduplicate uses a hash-set approach (Object property lookup, O(n) expected time) with first-occurrence-wins ordering preservation. Sort A→Z and Sort Z→A use localeCompare with base sensitivity for locale-aware, accent-correct sorting. Randomize implements Fisher-Yates shuffle powered by crypto.getRandomValues() — the Web Crypto API's CSPRNG — ensuring unbiased shuffling with equal probability for every permutation. Line Numbers prepends zero-padded sequential numbers with auto-calculated width based on total line count. Clear resets the output textarea and stats. Each operation displays a stats summary: original line count → processed line count, with removal delta where applicable.

Textarea UX — Dedicated Input/Output Panels with Placeholder Guidance

The dedup panel was designed with separate input and output textareas rather than a single in-place editing field. This design choice enables: (1) users to compare before/after states side-by-side, (2) the output to be read-only (readonly attribute) preventing accidental edits, (3) users to chain operations (dedup → sort → number lines) by copying output back to input, and (4) clear visual separation between the raw data and processed result. Placeholder text guides users: "Paste or type your text here — one item per line..." for input, "Processed result will appear here..." for output. The spellcheck="false" attribute prevents browser spell-check from underlining code, URLs, and structured data.

June 3, 2026

Core Engine Implementation: LCS Diff, Tokenizer & Dedup

LCS Diff Algorithm — Dynamic Programming Line-by-Line Comparison

The text diff engine was built on the Longest Common Subsequence (LCS) dynamic programming algorithm. The lcsMatrix(a, b) function constructs a 2D DP table where dp[i][j] stores the LCS length between prefixes of length i and j. Each line is treated as an atomic element — the algorithm compares whole lines rather than individual characters, producing clean, readable diffs suitable for code review and document comparison. The backtrack(dp, a, b, i, j) function reconstructs the edit sequence from the DP table, classifying each line as same, added, or removed. The computeDiff() function renders the result with color-coded prefixes: green + for added lines, red - for removed, and space for unchanged. A stats bar summarizes total unchanged, added, and removed line counts. Time and space complexity is O(m×n) — efficient for documents up to several thousand lines in the browser.

CSS Component Design — Text Tools Visual Language

A complete CSS component system was designed for the three-tool interface. Key components include: .text-tabs-nav (horizontal tab button bar with active state indication), .text-tab-panel (visibility-toggled content areas preserving textarea state across tab switches), .diff-panels (responsive side-by-side layout collapsing to stacked on mobile), .diff-result (scrollable diff output with monospace font and color-coded line prefixes), .sim-bar-track and .sim-bar-fill (animated progress bar with five color tiers), .dedup-panels (input/output textarea pair with action button grid), and .tool-action-btn (primary/secondary/ghost button variants with Material Symbols icon integration). All components use the 345tool design token system for visual consistency across the satellite site network.

Brand Transition — Rosenav from Password Checker to Text Tools Platform

The site was rebranded from a single-purpose password strength checker to a multi-tool text processing platform while maintaining the Rosenav brand name and rosenav.com domain. The header icon, Open Graph meta tags, Twitter Card tags, and all structured data blocks were updated to reflect the new tool set. The old password-checker.js (427 lines, entropy scoring, crack-time estimation, pattern detection, CSPRNG generator) was archived and replaced with text-tools.js (341 lines, LCS diff, cosine similarity, dedup/sort/lines). The CSS delivery was optimized by merging tailwind.min.css and style.css into a single combined.css file. Google Analytics 4 was prepared with a placeholder measurement ID (G-XXXXXXXXXX) pending production deployment. The 345tool Team JSON-LD Organization block remained locked across all pages per satellite site matrix policy.

June 1, 2026

Algorithm Design, Architecture Planning & Platform Inception

Algorithm Selection — LCS, Cosine Similarity & Fisher-Yates with CSPRNG

Three core algorithms were selected through rigorous evaluation of alternatives. Text Diff: LCS dynamic programming was chosen over Myers' diff algorithm (which optimizes for edit distance minimality) and patience diff (which excels for code but is more complex). LCS provides the optimal balance of correctness, readability, and implementation clarity for a browser-based tool. The O(m×n) DP approach produces the same results as git diff's default mode while being straightforward to audit. Similarity: Cosine similarity with TF vectorization was selected over Jaccard similarity, Levenshtein distance, and n-gram overlap. Cosine similarity normalizes for document length and provides a continuous 0–1 score that is intuitive to interpret and widely understood in the NLP community. TF was preferred over TF-IDF to avoid the complexity of maintaining an IDF corpus in a client-side-only tool. Shuffling: Fisher-Yates with crypto.getRandomValues() was chosen over Math.random()-based shuffles to eliminate statistical biases inherent in LCG/Xorshift128+ generators — every permutation is equally probable with CSPRNG sourcing.

Tokenizer Design — Unicode-Aware with CJK Support

The tokenizer for the similarity engine was designed with explicit Unicode support. The regex pattern /[^a-z0-9\u4e00-\u9fff\s]/g preserves CJK (Chinese/Japanese/Korean) characters in the U+4E00–U+9FFF range alongside Latin alphanumerics, enabling meaningful similarity comparison of Chinese-language texts. The tokenizer lowercases all input (case-insensitive comparison), strips punctuation and special characters, splits on whitespace boundaries, and filters empty tokens. This design handles mixed-language texts gracefully — an English paragraph with Chinese terms, or a bilingual document, will produce a combined token set reflecting both language contributions to the similarity score.

Zero-Server Architecture — Privacy by Design

The platform was architected from inception with a strict zero-server-footprint mandate. Every computational operation — LCS matrix construction and backtracking, tokenization and TF vectorization, cosine similarity computation, hash-set deduplication, locale-aware sorting, Fisher-Yates CSPRNG shuffling, and line number generation — executes exclusively within the user's browser as vanilla JavaScript with zero external dependencies. No text content, no diff results, no similarity scores, no dedup statistics, and no behavioral telemetry ever leave the device. This architecture is not merely a privacy preference; for a text processing tool that handles potentially sensitive content (proprietary source code, legal documents, unpublished manuscripts, business data), any server-side processing would constitute an unacceptable data exposure risk. The tool is fully functional offline after the initial page load, requiring no network connectivity for any core operation.

Contact

The 345tool Team

— E-mail: [email protected]

— Date of creation: June 1, 2026 • Last updated: June 13, 2026

345tool Team

We are the 345tool Team

345tool is an independent developer collective engineering elite, pure client-side, and privacy-first web utilities to replace bloated internet tools.