🛠️ TECH STACK & ARCHITECTURE

Το CSS ARENA // ULTIMATE FIX είναι ένα browser-native application με μηδενικές εξωτερικές εξαρτήσεις (Zero-Dependency Architecture). Όλη η επεξεργασία γίνεται client-side στη μνήμη του browser, διασφαλίζοντας 100% data privacy και ακαριαία εκτέλεση (sub-millisecond performance).

UI Layer: Semantic HTML5 & Modern CSS3 με εκτενή χρήση CSS Custom Variables (:root) για το Cyberpunk/Dark Terminal theme.
Core Engine (ACE Engine): Pure Vanilla JavaScript (ES6+) βασισμένη σε ένα custom pipeline από highly-optimized Regular Expressions (Regex).
State Management: Reactive UI updates μέσω native DOM manipulation (Debounced input listeners στα 500ms για αποφυγή main-thread throttling).

⚙️ DEEP DIVE: ΠΩΣ ΛΕΙΤΟΥΡΓΟΥΝ ΤΑ MODULES

1. Functional Chaining (Ο αγωγός επεξεργασίας)

Η μηχανή δεν εκτελεί τυχαία clean-up. Δέχεται ένα string εντολών χωρισμένο με το σύμβολο + (π.χ. sorter + pxToRem + cleaner), σπάει τις εντολές σε πίνακα μέσω .split('+') και περνάει το CSS διαδοχικά από κάθε module. Το output του προηγούμενου γίνεται input του επόμενου (Pipe Architecture).

2. Safe CSS Sorter & Media Query Isolation

Οι κλασικοί regex parsers σπάνε στα Media Queries (@media) γιατί μπερδεύουν τις εσωτερικές αγκύλες {} με τις εξωτερικές.

Η λύση της ACE Engine: Χρησιμοποιεί έναν επαναληπτικό regex βρόχο (while με safety counter):
JavaScript
/([^{}]+)\{([^{}]+)\}/g
Απομονώνει μόνο τα βαθύτερα, "καθαρά" blocks ιδιοτήτων, ταξινομεί τις γραμμές αλφαβητικά μέσω Array.prototype.sort() και ανασυνθέτει το string χωρίς να αγγίξει τη δομή των Media Queries ή των Keyframes.

3. Smart pxToRem Conversion με Boundaries

Η μετατροπή των pixels σε rem βασίζεται σε δυναμικό lookbehind και boundary detection:

JavaScript

/(?<![\w-])(\d+(?:\.\d+)?)px\b/gi

Γιατί είναι Smart: Προστατεύει αυτόματα τις τιμές 0, 1px και 2px. Σε αντίθεση με άλλα εργαλεία, η ACE Engine αναγνωρίζει ότι οι πολύ μικρές τιμές χρησιμοποιούνται συνήθως για borders και αν μετατραπούν σε rem, θα "εξαφανιστούν" ή θα παραμορφωθούν ανάλογα με το zoom του browser.

4. Token-Based Syntax Highlighting (Anti-HTML Injection)

Για να αποφευχθεί το σπάσιμο του DOM κατά την προβολή του κώδικα, η συνάρτηση syntaxHighlight ακολουθεί αυστηρή σειρά προτεραιότητας (Lexical Analysis):

HTML Escape: Μετατρέπει τα < και > σε < και > για προστασία από XSS/Script injection.
Token Matching: Εφαρμόζει regex με συγκεκριμένη σειρά ιεραρχίας: Comments ➡️ Selectors ➡️ Properties ➡️ Values. Αυτό εξασφαλίζει ότι τα style attributes των ίδιων των <span> του highlighter δεν θα επηρεαστούν από τα επόμενα replacement rules.

5. Native Color Extraction & Palette Generation

Το εργαλείο σκανάρει όλο το input text με ένα multi-format regex που εντοπίζει:

Standard Hex (#fff ή #ffffff)
Alpha Hex (#ffffffaa)
Functional notations (rgb(), rgba(), hsl(), hsla())

Τα αποτελέσματα φιλτράρονται μέσα από ένα new Set() για την άμεση αφαίρεση των διπλότυπων, και μετατρέπονται σε clickable visual swatches στο UI.

📈 PERFORMANCE BENCHMARKS

Bundle Size: < 15KB (Single HTML File - JS/CSS included).
Execution Time: $\approx 1.2\text{ms}$ για αρχεία CSS έως 500 γραμμές.
Memory Footprint: Σχεδόν μηδενικό, καθώς δεν δημιουργείται Virtual DOM και όλες οι αντικαταστάσεις γίνονται απευθείας στα primitive strings της V8 engine.

Tip για το άρθρο:

🛡️ CSS BATTLE ARENA // TECHNICAL SPECIFICATIONS

Version: 2.0 (Ultimate Fixed) Architecture: Single-File SPA (Single Page Application) Dependencies: Zero (0) - Vanilla JS, Native CSS License: Open / Custom

1. System Architecture

Η εφαρμογή βασίζεται σε μια Modular Functional Pipeline. Δεν χρησιμοποιείται Object-Oriented State, αλλά καθαρή ροή δεδομένων (Input -> Pipeline -> Output).

State Engine: Η συνάρτηση execute(command, css, opts) λειτουργεί ως dispatcher. Δέχεται string commands (π.χ. cleaner + beautifier) και τα εκτελεί σε σειρά πάνω στο string του CSS.
DOM Strategy:
- Editor: Χρησιμοποιεί την τεχνική "Glass Overlay". Ένα textarea (για input) βρίσκεται ακριβώς πάνω από ένα pre tag (για χρωματισμό). Και τα δύο έχουν ίδια font metrics, line-height και padding.
- Preview: Χρησιμοποιεί iframe sandboxed για ασφαλές rendering του CSS χωρίς να επηρεάζει το parent UI.

2. Core Algorithms (The "Armored" Engine)

Α. Safe Sorter (Nested-Proof)

Πρόβλημα: Τα απλά regex replace σπάνε τα @media queries γιατί σταματούν στο πρώτο }.
Λύση: Ο αλγόριθμος χρησιμοποιεί Depth-Tracking.
1. Tokenizes το CSS με βάση το { και }.
2. Κρατάει buffer για τρέχον selector.
3. Αν βρίσκεται μέσα σε @media (depth > 1), δεσμεύει τους κανόνες σε array.
4. Όταν βγει από το @media, ταξινομεί τον array και επανασυνθέτει το block.
Αποτέλεσμα: Media queries και nested rules παραμένουν άθικτα, ενώ τα properties ταξινομούνται alphabetically.

Β. pxToRem Converter (Pixel-Perfect)

Constraint: Οι τιμές 1px ή 2px σε borders συχνά εξαφανίζονται ή γίνονται θολές όταν μετατρέπονται σε rem (π.χ. 0.0625rem).
Logic:
javascript
if (pxVal <= 2 || pxVal === 0) return match;
Safety: Το regex (?<![\w-]) αποφεύγει να κάνει match σε ονόματα classes (π.χ. .icon-24px) ή στο τέλος μεταβλητών.

Γ. Syntax Highlighter (Anti-XSS)

Risk: Αν το CSS περιέχει χαρακτήρες < ή >, το innerHTML του DOM μπορεί να ερμηνευτεί ως HTML tag (XSS attack ή UI corruption).
Pipeline:
1. Sanitize: css.replace(/</g, "<") (Escaping πρώτο).
2. Tokenize: Regex αντικατάσταση για Comments, Selectors, Properties, Values.
3. Render: Εμφάνιση στο pre tag.

3. Performance Optimizations

Debouncing (500ms): Οι χρονοβόρες λειτουργίες (Syntax Highlight, Color Extraction) δεν τρέχουν σε κάθε keystroke, αλλά όταν ο χρήστης σταματάει να γράφει για 500ms. Αυτό εξασφαλίζει 60fps ακόμα και σε large files.
Regex Optimization: Όλα τα regex είναι "Non-Capturing" ή χρησιμοποιούν bounded quantifiers ({1,2}, {3,4}) για να αποφευχθεί catastrophic backtracking.
Lazy Loading: Το iframe του preview και οι Sidebars (Palette/Outline) δεν κάνουν render αν δεν ζητηθούν, εξοικονομώντας memory.

4. UI/UX Technical Stack

Layout: CSS Grid (1fr 1fr) για το Split View. Πλέον ώριμο και responsive.
Styling: CSS Custom Properties (Variables) για theme consistency.
Visuals:
- Glassmorphism: backdrop-filter: blur(10px) στα floating docks.
- Cyberpunk Palette: Neon Blue (#00d4ff) & Purple (#7000ff).
- Scrollbars: Custom webkit scrollbars για native feel σε dark mode.

5. Security Checklist

Input Sanitization: Όλα τα inputs περνούν από innerText ή escaping πριν γίνουν render.
Sandboxing: Το Live Preview τρέχει σε ξεχωριστό iframe context, αποτρέποντας το CSS του editor να επηρεάσει το interface του editor.
No eval(): Δεν χρησιμοποιείται eval() ή new Function() για την εκτέλεση των commands. Όλα είναι pure string manipulation.

🛠️🔥

https://grmagazin.blogspot.com/p/css-editor.html

Ο καλυτερος CSS στον κόσμο ( Johh & Alex & Oddy )