Labs · سطح الويب
الموقع الذي يبقى بعد إعادة تصميمه.
لمن لا يُسمَح له بالإخفاق — بوابة حكومية، أو شركة دولية، أو عمليةٌ جادّة. مكتوبٌ باليد، مُقدَّمٌ من الحافة بلسان الزائر نفسه، مع الـSEO والأتمتة اللذَين يبقيانه حيًّا منسوجَين في صلبه، لا مُلصَقَين عليه.
ليس قالبًا مُلئ بشعارك. بل وثيقة كُتِبت للموقع الوحيد الذي تخدمه.
دلاليٌّ، ميسَّر الوصول، خفيفٌ بما يكفي لقراءته قبل أن يُحمَّل أول بايت من JavaScript. موقعٌ واحد، وغرضٌ واحد — لا يُطلَق شيءٌ لا يحتاجه.
الـSEO ليس مورّدًا ثانيًا. البيانات المهيكلة والترميز النظيف يُكتبان مع بناء الصفحة، كي يجده الناس المناسبون — في سبعة ألسنة، كلٌّ منها صفحةٌ حقيقية.
نماذج تصل إلى شخص، ومحتوى يحدّث نفسه، والأتمتة الهادئة خلف الصفحة — جزءٌ من البناء، كي يظلّ الموقع يعمل حين لا تكون تراقب.
أربعة أرقام من موقعٍ مبنيٍّ باليد.
حرفة الموقع الجادّ ضبطٌ للنفس: الوسم الصحيح، والبيانات التي يُصيَّر منها،
والسكربت يُضاف فقط حيث يستحقّ وزنه — باستخدام أحدث واجهات المتصفّح الأصيلة،
بلا إطار عمل — مع الـSEO مكتوبًا في الصفحة ذاتها.
يبقى الكود بالإنجليزية — اللغة العالمية للتقنية.
<!-- a page you can read before one byte of JavaScript arrives --> <main id="content"> <h1>Office of the Registry</h1> <nav aria-label="Services"> <a href="/apply">Apply</a> <a href="/status" aria-current="page">Check status</a> </nav> <article> <h2>Your case</h2> <p class="status status--open">Open — in review</p> <time datetime="2026-11-02T09:14:00Z">Updated today</time> </article> </main> <!-- no div soup, no bundle to boot. a landmark, a heading, a link. -->
// the data the page renders from — one shape, every language. the app reads the same. { "case": { "id": "c_7f3a91c4", "status": "open", "locale": "fr", "updated": "2026-11-02T09:14:00Z", "actions": [ { "label": "apply", "href": "/fr/apply" }, { "label": "status", "href": "/fr/status" } ] } }
// JavaScript · added only where it earns its weight — the browser's newest native APIs, no framework customElements.define("case-status", class extends HTMLElement { #case = JSON.parse(this.dataset.case ?? "{}"); // the same JSON the page already shipped with connectedCallback() { // View Transitions API — native to the browser, zero bundle to boot document.startViewTransition?.(() => this.#render()) ?? this.#render(); } #render() { this.textContent = this.#case.status; // enhances markup that already works without it } });
<!-- SEO is not a plugin here — it is written as the page is built --> <link rel="alternate" hreflang="fr" href="https://…/fr/status"> <link rel="alternate" hreflang="ar" href="https://…/ar/status"> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "GovernmentService", "name": "Registry — case status", "availableLanguage": ["en","fr","de","ar","es","ja","zh"], "provider": { "@type": "GovernmentOrganization", "name": "Office of the Registry" } } </script> <!-- found and chosen is the same job as built. -->
لماذا يتفوّق الموقع المكتوب باليد على القالب، في كل مرةٍ يهمّ فيها الأمر.
القالب لا يمكن أن يُصنع على المقاس — لقد صُنع للجميع. والصفحة التي تحتاج ميغابايت لإظهار جملة لا يمكن أن تكون سريعة — فالثقل هو جوهرها. ولهذا لا قالبَ على هذه الصفحة، ولا قائمةَ أسعار: نقيس ما يجب أن يفعله الموقع، ونعرض ما قِسناه.
قبل أن تُكتَب سطرٌ واحد، كيف يُصان عملك. هذا الجزء غير قابل للتفاوض.
اتفاقية عدم الإفشاء هي الأصل هنا، لا بندٌ إضافي. ما تشاركه يقرؤه مهندسٌ واحد لا غير — ولا شيء يُباع أو يُشارَك أو يُمرَّر.
الاعتمادات والسجلّات تبقى في بيتك، بأدنى صلاحية. لا نحتفظ بأيّ نسخة لا نحتاجها، ولا شيء يغادر متناولك دون كلمتك.
ما يعمل في بيتك هو لك لتقرأه وتدقّقه — لا صندوق أسود عليك أن تثق به دون أن تراه. غرفة المحرّك تبقى لنا؛ وما تشغّله أنت هو لك.
سطران يكفيان — ما الغرض منه، ومن يجب أن يجده. نقرؤهما بأنفسنا ونجيب بأنفسنا.
هي الآن على شاشةٍ في Zürich — لا في طابور، ولا في تذكرة. المهندس الذي سيبني هذا يقرؤها، ويكتب الردّ بنفسه.
·