Personal developer laboratory

Hi, I'm Khaled Al Ali.

I explore computer science, artificial intelligence and web technology by experimenting with useful browser-based tools.

01 / About

Curious about how software works

I'm interested in computer systems, software development, AI and practical problem-solving. This portfolio is a space for learning, experimenting and documenting small tools. The projects are learning demonstrations built with coding assistance, not claims of professional experience.

Build

Explore browser interfaces, interactive tools and accessible design.

Understand

Learn how parsing, algorithms, data transformation and text processing work.

Improve

Test edge cases, explain limitations and iterate on what I learn.

02 / Projects

Interactive developer tools

Eleven interactive experiments: six developer tools and five original browser games. Everything runs locally in your browser, without accounts, uploads or external APIs. Each tool includes a short technical explanation and limitations.

01. JSON Studio

Parsing · Validation · Data trees

Validate structured JSON, pretty-print or minify it, and inspect its structure.

Run validation to inspect the JSON.

How it works: JSON.parse validates the input; recursive traversal counts nested keys and values. Invalid JSON produces a parse error.

02. Markdown Editor

Text processing · Safe rendering

Write a small Markdown document and see its live HTML preview. The renderer escapes raw HTML before applying supported Markdown formatting.

Supports headings, paragraphs, lists, bold, italic and inline code. This is an educational subset, not a full CommonMark implementation.

03. CSV Data Explorer

Data parsing · Search · Sorting

Explore small CSV datasets. Search records, sort columns, and calculate statistics for numeric columns.

CSV parser handles quoted fields, commas and newlines. Intended for small datasets; all data stays in the browser.

04. Regular Expression Lab

Pattern matching · Text search

Test JavaScript regular expressions, highlight matches and inspect match positions.

Patterns run against text you provide. Very complex patterns may be slow; use short inputs and avoid untrusted expressions.

05. Sorting Algorithm Visualizer

Algorithms · Comparisons · Animation

Watch insertion sort or selection sort reorder a shuffled array, one operation at a time.

Insertion sort builds a sorted prefix; selection sort repeatedly selects the minimum remaining value. Both are O(n²) in the worst case.

06. Accessibility Color Studio

Color math · WCAG contrast

Test foreground and background color combinations for readable interfaces.

Accessible text matters

Contrast is calculated from relative luminance. WCAG AA thresholds: 4.5:1 for normal text, 3:1 for large text. Contrast alone does not guarantee full accessibility.

03 / Arcade

Five playable browser games

Original mini-games with keyboard and touch controls. Play without accounts, downloads or tracking.

11. Dino Sprint

Endless jump-and-dodge platformer

Play now →
04 / Process

How I approach learning

I start with a small practical problem, experiment with an implementation, test different inputs and document what works. These tools are educational prototypes. The code is in this page's source, and visitors can inspect it using their browser's developer tools.

Test cases

Try malformed JSON, quoted CSV cells, empty text and different color combinations.

Trade-offs

Some features are intentionally simplified. For example, the Markdown renderer supports only a subset of syntax.

Next steps

Explore automated tests, modular JavaScript and better keyboard accessibility.