Dervic Blog v2.1

NEW

v2.1 [Stable] Migration update

Transitioning from static content to an automated, self-healing PHP ecosystem.

The V2 architecture transitions from a static site to a logic-driven Flat-File Engine. By leveraging native PHP and avoiding heavy SQL databases, the system achieves sub-400ms load times while remaining highly scalable.

Engine Directory Structure

                        
                                    📁 /admin
                                
-- save_click.php (Tracking Engine)
-- status.php (System Control)

                                    📁 /blog
                                
-- Raw content for RSS & Sitemap orchestration

                                    📁 /data
                                
status.json, likes.json (The Flat-File Database)

                                    📄 .htaccess
                                
-- Clean URL routing & GZIP compression

                                    📄 index.php
                                
-- Main System Orchestrator

                                    📄 rss.php
                                
-- Dynamic XML Feed Generator

Core Philosophy & Engine

Framework-less Backend: Pure PHP 8.x logic ensures zero dependency overhead and maximum execution speed.
JSON Orchestration: System states, such as maintenance modes and engagement stats, are handled via high-speed .json data structures.
Security Hardening: Implementation of .htaccess routing for clean URLs and administrative directory protection.

Core Backend & Logic Layer

Dynamic State Management: Centralized control via status.json. System in index.php automatically switches to Maintenance Mode without interfering with the code.
Hybrid Data Storage: Using JSON files (likes.json) instead of heavy SQL databases for lightning-fast interaction logging.
Custom Analytics Engine: Author's save_click.php system in /admin a folder that records metadata (device, URL, time) without violating privacy.

Automated SEO Ecosystem

Dynamic RSS & Sitemap: The rss.php engine recursively scans the /blog/ directory, extracting metadata via regex to build real-time XML feeds.
JSON-LD TechArticle: Automated injection of Schema.org structured data for enhanced Rich Snippets in Google Search.
XSL Transformation: Visual styling for raw XML data, ensuring human-readable Sitemaps and RSS feeds.
RSS Logic (v2.1): Script rss.php with advanced preg_replace filtering that generates a clean XML source for search engines.
Sitemap PHP Engine: Dynamic folder combing and generation sitemap.xml in real time, including XSL formatting for human-readable viewing.
Robots Control: Detailed instructions in robots.txt, which prevent PHP system files from being indexed while promoting clean URLs.

Server-Side Hardening (.htaccess)

URL Masking: Complete removal .html and .php extensions for a "clean-routing" experience.
Performance Layer: GZIP Deflate compression for all text types and 1-year Expires Caching for image resources.
Security: Forced HTTPS redirection and custom ErrorDocument 404 handling.

Frontend & Media Integration

Me Stream Live: Advanced use MediaSession API in about, which allows you to control the radio and display metadata on the lock screen.
UI Protection: Global implementation of disabling right-click (contextmenu) to protect the portfolio.
Modern Interaction: Usage Pace.js for visualization of loading and Time-Ago JS for dynamic timestamps.

Syntax Highlighting (Prism.js)

High Performance: Lightweight execution that ensures fast page loading without taxing the browser's CPU.
Language Support: Automatic detection and highlighting for HTML, CSS, JavaScript, and PHP.
Seamless Integration: Custom color schemes designed to perfectly match the blog's dark-blue and turquoise aesthetic.

Dynamic Loading: Prism.js handles code blocks inside <pre> and <code> tags automatically.
Zero Layout Shift: Pre-defined CSS variables ensure the code containers maintain their size during page load.
Maintenance-Free: The "Ghost Script" logic triggers Prism.highlightAll() even when content is loaded dynamically via AJAX or comments.

Privacy-First Analytics

Custom Cookie Log: save_click.php records interaction data (Device, URL, Timestamp) directly to admin/cookies/ upon user consent.
GDPR Compliance: Full transparency and data ownership without external data leaks to third-party analytics providers.
V2 eliminates: 3rd party trackers in favor of a proprietary internal logging system.

Conclusion of the dervic.blog v2

It's not just a website; it is an engineered environment where maintenance is automated, performance is native, and privacy is a core feature, automation that minimizes manual work while maximizing performance!

Color System (All colors)

Fore (Main)#233742

Primary#76a5af

Primary Shade#e06666

Secondary#00c3bf

Light#b4cddd

Shade#f1f5f7

Shade Crisp#edf2f5

Shadow#76a5af

Typographic Scales (Fluid System)

Ludicrous Scale

Ludicrous Headline

Massive Scale

Massive Section Title

Huge Scale

Huge Component Subtitle

Medium Reading Text

Standard reading text optimized for long-form articles, featuring a 1.625 line-height for maximum legibility and reduced eye strain.

Micro Monospace Data

                            Inconsolata Variable: 90% scale // System metadata & telemetry
                        

JSON Data Orchestration

Function	Implementation	Status Marker
Maintenance Switch	`status.json` → `index.php`	🟢 Live / 🔴 Maint
Interaction Logging	`likes.json` (Flat-file storage)	⚡ Sub-10ms Write
Privacy Analytics	`save_click.php` (Metadata logging)	🔒 GDPR Compliant

Note: The engine utilizes high-speed JSON I/O operations to bypass SQL overhead, ensuring maximum performance on shared hosting environments.

Performance Benchmarks

< 400ms

Average Load Time

0.0s

SQL Overhead

100/100

Lighthouse SEO Score

Core UI Elements

Standard Link .inline-code Secondary Accent Border

Brand Assets (Wave & Stripe)

Top Page Stripe: Uses a transition between Light and Primary color.

Standard Link: Click me

--shadow-link

Inverted Link: Light Link

--shadow-link-inverted

Interaction Logic: All links feature a transition based on var(--timing-hover). The box-shadow property is used instead of standard underlines to maintain a clean, modern aesthetic that aligns with the V2 Engine's design system.

Layout Grid Orchestration

.
Header (l-h)
.
.
Main Content (l-m)
.
L-Footer (l-l)
F-Center (l-f)
R-Footer (l-r)

Media Session & UI

Me Stream Live
Lock-screen metadata enabled

Active Link
Inactive Link
Inactive Link

The .page-nav-current indicator leverages the currentColor property, ensuring the dot automatically inherits the text color of the active menu item for seamless visual consistency.

Logo & Component Depth

The application of var(--shadow-insert) on circular elements creates a sophisticated "pressed" or "inset" effect, adding tactile depth to the UI.

Content Components (Blockquote)

This is how your quotes appear. They feature a 4px wide left border using the --color-light variable and an italic font style for distinct visual emphasis.

Syntax Labels & Code Blocks

The system utilizes <pre> elements combined with :before pseudo-classes to automatically generate floating language labels based on the specific CSS class.

&lt;?php
// Engine V2 Logic
echo "Hello Flat-File";
?&gt;

Developer Experience (DX)

Every code block within the V2 engine features an integrated .copy-button.

* Note: The interface provides an intuitive top-bar copy action on mobile devices to ensure the .copy-button never obstructs the code visibility on small viewports.

Syntax Highlighting Tokens

"Strings"

keyword

function()

// comment

Token Logic: Every element in the .post-content code blocks is styled with precise hex codes to match the V2 Turquoise & Dark Blue aesthetic while maintaining AAA accessibility contrast ratios.

Social icons utilize transition: background var(--timing-hover) to ensure a smooth visual state change upon user interaction.

Taxonomy (Tags)

Styling Logic: The tag system automatically injects a "# " prefix using the CSS :before pseudo-element on links. Each tag features a pill-shaped design (border-radius: 999px) and utilizes --color-fore for high-contrast visibility.

Media Security & Styling

UI Protection: Portfolio images feature a border-color transition that switches to --color-primary upon hover/focus for interactive feedback.
Iframe Responsiveness: Implementation of a relative wrapper with position: absolute for the child iframe, ensuring perfectly responsive 16:9 video embeds.
Shadow Hardening: Every media asset utilizes var(--shadow-insert) to create a consistent "inset" depth effect that matches the site's aesthetic.

Fluid Typography (Clamp System)

Scale Name	CSS Logic
Massive	`clamp(3rem, 5.3vw + 1.5rem, 5rem)`
Ludicrous	`clamp(3.5rem, 7.4vw + 1.5rem, 7rem)`

Responsive Engine: This system enables headlines to dynamically scale between 3vw and 7vw units based on the viewport size. By utilizing the clamp() function, the typography maintains perfect legibility across all devices without the need for excessive media queries.

SEO & Accessibility Helpers

The .common-screen-reader-only class is utilized to provide descriptive metadata and context specifically for screen readers and search engine crawlers (SEO). This ensures full digital accessibility and improved indexing without compromising the integrity of the visual design.

Font Loading Performance

By implementing font-display: swap within the @font-face rules, the system ensures that text remains visible immediately using a system fallback font. It then seamlessly transitions to Open Sans or Roboto Slab once the assets are fully loaded, preventing "Flash of Invisible Text" (FOIT).

Responsive Video Embeds

The implementation of the .post-iframe-wrapper with position: relative allows external iframes (such as YouTube or Vimeo) to automatically scale to the content width while maintaining a consistent aspect ratio across all devices.

Responsive Breakpoints

Breakpoint	Layout Transformation
600px	Navigation expands; Wave container height reduces to 60px.
800px	Footer transitions into a 2-column grid system.
1200px	Activation of the 3-column Article Grid and Sticky engagement elements.

Clean Focus Strategy

By utilizing appearance: none on interactive elements (such as the Heart button), the V2 engine maintains complete visual clarity. Simultaneously, it provides clear haptic-like feedback via :focus and scale(1.15) transitions, ensuring a responsive and accessible user experience.

Cross-Platform UI Neutrality

The V2 Engine completely overrides default browser styling (Safari, Chrome) by implementing appearance: none. This ensures that interactive components, such as the .post-heart-button, maintain a pixel-perfect, identical appearance across all operating systems and devices.

Layout Integrity System

To prevent horizontal scrolling on mobile devices, the V2 engine implements smart content containment. It utilizes overflow-x: auto within code blocks to handle long strings, while white-space: nowrap ensures the structural integrity of metadata within tables and data-driven components.

Vertical Rhythm (Line-Heights)

Small (1.25): For headlines and titles to maintain a compact and grounded appearance.
Medium (1.5): Ideal for lists, UI labels, and shorter text blocks to ensure clarity.
Large (1.625): Optimized for long-form articles to enhance readability and significantly reduce eye strain.

Design Logic: Establishing a consistent vertical rhythm guides the user's scanning behavior and creates a more professional, reliable interface. By tying line heights to a modular scale, the layout maintains visual harmony across different screen sizes.

Content Protection Tools

Anti-Copy Layer: Images within the .post-image-wrapper have pointer-events disabled and are protected with user-select: none. This prevents accidental highlighting and unauthorized drag-and-drop of your visual portfolio assets.

System Telemetry & Loading

Pace.js Integration: The engine utilizes a top-tier progress bar to visualize server response times. Combined with GZIP Deflate compression, it ensures that even over 3G/4G networks on mobile devices, the interface remains interactive under 1 second.

Global UI Neutralization

V2 Engine implements a strict appearance: none policy for all interactive components. This prevents iOS Safari from applying default system gradients and rounded corners to buttons, ensuring a 1:1 visual match with the desktop design system.

Vertical Rhythm & Legibility

Line-Height (1.625): Optimized for long-form reading on small screens.
Scroll-Margin (1.5rem): Ensures anchor links never touch the top edge of the iPhone notch.
Text-Indent Calibration: Icons in headings are optically aligned to the typography baseline.

Adaptive Engagement Logic

Sticky Interaction: On viewports wider than 1200px, the engagement heart becomes sticky, following the reader at bottom: 40px. For mobile devices, the system recalibrates to maintain accessibility without obstructing the content flow.

Digital Accessibility (A11y)

The V2 Engine prioritizes semantic integrity. By using the .common-screen-reader-only utility, the system provides hidden contextual labels for assistive technologies and search engine crawlers. This ensures a 100/100 Accessibility Score while maintaining a minimalist visual aesthetic on iPhone and desktop browsers.

Brand Geometry & Gradients

CSS Layering: Combines linear-gradient, drop-shadow, and border-radius to create a fluid, non-static header experience that flows perfectly on iPhone screens.

Dervic Blog / v2

V2_ENGINE // BUILT_WITH_LOVE

MediaSession & Radio Control

Integrated with the MediaSession API, the V2 engine allows users to control internal radio streams directly from their iPhone lock screen. It dynamically injects metadata (artist, title, album art), turning the portfolio into a native-like application experience.

Layout Grid Distribution

[a-b] Meta Sidebar (Desktop Left)

[a-c] Primary Content Area

[a-a] Contextual Sidebar (Desktop Right)

Responsive Logic: On viewports < 1200px, the grid-template-areas system automatically stacks the sidebars to maintain a single-column reading experience on mobile devices.

UI Feedback & Snap Logic

65% LOADED

Data Card Architecture

System Integrity Verified Flat-File Node

SECURE

Visual Logic: Combines --color-shade-crisp with a subtle radial overlay to simulate a "frosted glass" effect. On mobile, the --shadow-project variable adds necessary elevation to separate data from the background.

HOME / ENGINE / V2_SPEC

UX Strategy: Uses letter-spacing: -.025em on mobile to prevent text wrapping, while the border-bottom on the current state provides a high-contrast anchor for the user's eye.

Data Stream Telemetry

likes.json

ACTIVE

Visual Logic: The --color-secondary is used for high-activity indicators. The glow effect (box-shadow) ensures the status is visible even on low-brightness mobile screens.

Engine Request Pipeline

HTTP Request

.htaccess routes to index.php

JSON Boot

status.json state verification

DOM Render

Flat-file content injection

System Telemetry Badges

JSON

⚡ GZIP_ON

🛡️ HT_GUARD

Engine Health Monitor

SEO_ENGINE

OPTIMIZED

HT_ACCESS

HARDENED

Vertical Rhythm & List Logic

Dynamic RSS recursively scanning /blog/
JSON-LD TechArticle Schema injection

Design Logic: By overriding default browser paddings, the engine maintains a strict alignment grid. On iPhone, this prevents text from "hugging" the edge of the screen, significantly improving long-form readability.

Critical Alert Components

Security Protocol: Admin directory protection is enforced via .htaccess. Unauthorized access attempts to /admin/save_click.php trigger an immediate 403 Forbidden response.

Comments (0)

Locked

New comments are temporarily disabled

We use cookies

Transitioning from static content to an automated, self-healing PHP ecosystem.

Comments (0)