تُمثّل الصور أكثر من%60 من وحدات البايت التي يلزم تحميلها في المتوسط لتحميل صفحة ويب. باستخدام تنسيق AVIF، يمكنك تصغير حجم صورك وتسريع تحميل موقعك الإلكتروني. ‫AVIF هو تنسيق صور مشتق من بث الفيديو بتنسيق AV1. تم تصميم تنسيق AVIF لتوفير كفاءة في

لتنفيذ هذا الدليل التعليمي حول الرموز البرمجية، يجب استيفاء بعض المتطلبات الأساسية. يتم وضع علامة على كلّ متطلّب وفقًا لما إذا كان مطلوبًا لـ "الاختبار على الجهاز فقط" أو "خدمة التجميع". سيتطلب الاختبار على الجهاز تنزيل "أداة الاختبار على الجهاز".

الوقت المقدَّر لإنهاء الإجراء: من ساعة إلى ساعتَين هناك وضعان لتنفيذ هذا الدليل التعليمي حول الرموز البرمجية: الاختبار على الجهاز أو خدمة التجميع. يتطلب وضع "الاختبار على الجهاز فقط" جهاز كمبيوتر محلي ومتصفّح Chrome (بدون إنشاء/استخدام موارد Google

في هذا الدرس التطبيقي حول الترميز، ستضيف عمليات شراء داخل التطبيق إلى تطبيق Flutter الذي تم إثبات ملكيته وإدارته باستخدام إحدى خدمات الواجهة الخلفية Dart.

في هذا الدرس التطبيقي، ستتعلم كيفية إنشاء تطبيق ويب يستخدم Cloud Firestore.

في هذا الدرس التطبيقي حول الترميز، ستتعرّف على كيفية استخدام منصة Firebase على الويب من خلال إنشاء تطبيق دردشة.

في هذا الدرس التطبيقي حول الترميز، ستتعرّف على كيفية استخدام الصور المتحركة في Flutter. ستُنشئ تطبيقًا مصغّرًا يعرض الرسوم المتحركة للحجم واللون، ويضيف تأثيرًا ثلاثي الأبعاد لقلب البطاقة، ويستخدم تأثيرات من حزمة الرسوم المتحركة، ويضيف ميزة الإيماءة التوقّعية للرجوع في Android.

في هذا الدرس التطبيقي حول الترميز، ستتعلم كيفية إنشاء تطبيق Flutter لإنشاء أسماء عشوائية ورائعة.

سيرشد هذا الدليل التعليمي للترميز المستخدم خلال الخطوات التي ستؤدي إلى نشر مثيل من Jenkins على GKE، بما في ذلك وكلاء الإنشاء الذين يتضمّنون ميزة التوسّع التلقائي.

في هذا الدرس التطبيقي حول الترميز، ستتعلّم كيفية إضافة مصادقة Firebase إلى تطبيق Flutter باستخدام بضعة أسطر من الرموز.

تتألف خدمات عروض الأسعار والمزادات (B&A) من 4 خدمات للشراة والبائعين لتسهيل مزاد شريحة الجمهور المحمية: مجموعة المستخدِمين المحتملين: مجموعة البائع: يرشدك هذا الدليل التعليمي حول رموز البرامج إلى كيفية إعداد عملية الإعداد الشاملة واختبارها في

في هذا الدرس التطبيقي حول الترميز، ستتعرّف على كيفية إدارة عمليات النقل خلال المحادثة بين ممثلي موظّفي الدعم المباشر وممثلي برامج التتبُّع. في النهاية، ستتوفر لك واجهة ويب أساسية يمكنك من خلالها عرض جميع المحادثات الجارية مع وكيلك والانضمام إلى أي محادثة أو مغادرتها كوكيل مباشر.

في هذا الدليل التعليمي حول الرموز البرمجية، ستتعرّف على كيفية التحقّق من تطبيق ويب باستخدام ميزة "فحص التطبيقات من Firebase" واختبار reCAPTCHA قبل إرسال طلبات إلى Places API.

هذا الدرس التطبيقي حول الترميز هو تكملة لدرس Google Pay API for Web 101: Basics (الجزء الأول من أساسيات Google Pay API للويب) ويعتمد على الرمز البرمجي المكتوب في ذلك الدرس. لإكمال هذا الدليل التعليمي حول الرموز البرمجية، احرص على إكمال هذا الدليل

في هذا الدرس التطبيقي حول الترميز، ستتعرّف على كيفية استخدام بنية Firebase الأساسية لنشر نموذج تعلُّم الآلة ليكون بالإمكان استخدامه واستخدامه على موقعك الإلكتروني باستخدام TensorFlow.js.

في هذا الدرس التطبيقي حول الترميز، ستتعرّف على نموذج gecko@003 وحالة استخدام حقيقية لتطبيقه.

في هذا الدرس التطبيقي حول الترميز، ستتعرّف على الخطوط المتغيّرة وفوائدها وكيفية استخدامها في تصميمها وطريقة تنفيذها باستخدام Google Fonts API وفي CSS.

في هذا الدرس التطبيقي، ستعمل على إعداد ميزة "مراقبة أداء Firebase" في تطبيق ويب وستتعرف على كيفية استخدامها للتأكد من عمل التطبيق بشكل جيد للمستخدمين النهائيين.

تعرَّف على كيفية إنشاء تطبيق Flutter للأجهزة الجوّالة باستخدام Firebase.

يمكنك إنشاء تطبيق ويب من البداية تمامًا باستخدام Firebase ومحرِّر StackBlitz على الإنترنت. ستستخدم HTML وJavaScript الأساسيين للتحدّث إلى Firebase. هذه مقدّمة رائعة عن استخدام وحدة تحكُّم Firebase ودمج Firebase في أي تطبيق. ليست هناك حاجة إلى معرفة كبيرة سابقة أو تثبيت برامج.

في هذا الدرس التطبيقي حول الترميز، ستتعلّم كيفية استخدام دوال Cloud for Firebase لإرسال إشعارات إلى مستخدمي تطبيق دردشة.

ستتعرف على كيفية استخدام Procurement DocAI لتحليل الفاتورة بذكاء.

تعرَّف على كيفية تنفيذ المصادقة المتعدّدة العوامل وإنشاء متطلبات مصادقة مخصّصة باستخدام دوال الحظر

في هذا الدرس التطبيقي حول الترميز، عليك نقل تطبيق ويب حالي في Firebase إلى حزمة SDK جديدة لـ Firebase JS إلى رمز اهتزاز شجري لا تستخدمه، ما يتيح لك تحميل التطبيق بسرعة.

عند الانتهاء من هذا الدليل التعليمي حول رموز البرامج، سيكون لديك موقع إلكتروني صالح بحد أدنى من الوظائف مع تكامل Google Pay. يسترجع هذا المشروع رمز دفعة يمكن إرساله إلى مقدّم خدمة دفع لمعالجته. يتطلّب طلب الدفع في Google Pay عنصر طلب. يحتوي العنصر

تعرَّف على طريقة إضافة المؤثرات الصوتية وموسيقى الخلفية والصوت الديناميكي إلى الألعاب باستخدام Flutter.

درس تطبيقي حول الترميز يوضّح كيفية استخدام حزمة محاكي Firebase أثناء تطوير التطبيق باستخدام Flutter سيستخدم الدرس التطبيقي حول الترميز محاكيات Auth وFirestore لتوضيح استخدام المحاكي.

ستتعلّم في هذا الدرس التطبيقي السهل الاستخدام حول الترميز كيفية إنشاء نموذج تطبيق باستخدام مكونات Angular v14 المستقلة.

تعرَّف على كيفية استخدام ميزات الواقع المعزّز مع واجهة WebXR Device API، والاستفادة من ميزة فهم المشاهد لوضع كائن ثلاثي الأبعاد في مكانه على أرض الواقع.

تعرّف على طريقة اتّباع أفضل ممارسات تسهيل الاستخدام في تطبيقات Angular باستخدام مجموعة الأدوات المضمّنة في إطار العمل.

نقدّم لك ميزة "إشارات"، وهي نموذج تفاعل جديد في Angular. تزوّدك الإشارات بأدوات أكثر جودة للتفاعل بشكل دقيق.

تعرف على كيفية توسيع مكونات Material المنشأة مسبقًا إلى مكونات لأي إطار عمل على الويب.

في هذا الدرس التطبيقي حول الترميز، ستتعلّم كيفية ترجمة مفاهيم React إلى Lit.

وتعلَّم كيفية دمج مكوّنات Material فردية في قاعدة رموز ويب حالية دون البدء من جديد.

يمكنك إنشاء نظام حركة Material في تطبيق Reply باستخدام الانتقالات من حزمة الرسوم المتحركة.

يمكنك تحسين تصميم تطبيق Flutter وتنفيذ مكوّن متقدم لقائمة الصور الخلفية في Flutter.

تعرَّف على كيفية استخدام ميزة Material لإنشاء بنية وتخطيط لتطبيق Flutter.

تعرّف على كيفية تطوير تطبيق ويب باستخدام "حزمة محاكي Firebase".

تعرَّف على طريقة استخدام "المادة" في التصميم والتنسيق على الويب.

سوف تتعلم في هذا التمرين المعملي كيفية إنشاء مصنف Keras. وبدلاً من محاولة الوصول إلى التركيبة المثالية من طبقات الشبكة العصبونية للتعرّف على الأزهار، سنستخدم أولاً تقنية تُعرَف باسم "تعلُّم النقل" لتكييف نموذج قوي مدرّب مسبقًا على مجموعة البيانات. يشتمل هذا التمرين المعملي على التفسيرات النظرية اللازمة حول الشبكات العصبية، كما يعد نقطة انطلاق جيدة للمطورين الذين يتعلمون عن التعلم المتعمق.

تعرَّف على كيفية حماية بياناتك على Firestore باستخدام "قواعد الأمان"

في هذا الدرس التطبيقي حول الترميز، ستنشئ صفحة ويب تتفاعل مع لوحة وحدات بت دقيقة من BBC لعرض الصور على شاشة LED مقاس 5×5. وستتعرّف على Web Serial API وكيفية استخدام أحداث البث القابلة للقراءة والكتابة وتحويلها للتواصل مع الأجهزة التسلسلية من خلال المتصفّح.

سيعرّف هذا الدرس التطبيقي حول الترميز المستخدم على واجهة برمجة تطبيقات منع فقدان البيانات من خلال واجهة سطر أوامر. سيقوم المستخدم بتنزيل رمز المشروع ومراجعة بعض الأدوات الموجودة في دليل العينات ووظائفها الأساسية.

في هذا الدرس التطبيقي حول الترميز، يمكنك تجربة العديد من واجهات برمجة تطبيقات الويب الجديدة تمامًا أو المتوفّرة فقط في الخلفية.

تعرَّف على كيفية بث الوسائط والبيانات بين متصفّحَين. يمكنك التعامل مع واجهات برمجة التطبيقات والتقنيات الأساسية في WebRTC. التقط الصور وعالجها باستخدام getUserMedia وCSS وعنصر لوحة الرسم. يمكنك إعداد اتصال بين الشبكات وتبادل البيانات مباشرةً بين المتصفّحات باستخدام قنوات البيانات. وأخيرًا، عليك إعداد خادم إشارة باستخدام Node.js.

في هذا الدرس التطبيقي حول الترميز، عليك إنشاء تطبيق ويب وحصر إمكانية الوصول على مجموعات محدّدة من المستخدمين واستخدام هوية المستخدم الذي تمت مصادقته في البرنامج.

في هذا الدرس التطبيقي حول الترميز، ستنشئ صفحة ويب تتفاعل مع لوحة وحدات بت دقيقة من BBC لعرض الصور على شاشة LED مقاس 5×5. وستتعرّف على Web Serial API وكيفية استخدام أحداث البث القابلة للقراءة والكتابة وتحويلها للتواصل مع الأجهزة التسلسلية من خلال المتصفّح.

تعرف على كيفية إضافة التنقل الفوري وعمليات انتقال سلسة للصفحات إلى تطبيق ويب باستخدام أحدث واجهات برمجة التطبيقات المتوفرة في Google Chrome.

تعرَّف على كيفية إنشاء نموذج ويب تكيُّفي، يتلقّى فيه كل مستخدم واجهة مخصَّصة تعكس تفضيلاته في ذلك الوقت.

في هذا الدرس التطبيقي حول الترميز، ستتعرّف على كيفية إضافة إعلانات AdMob المضمّنة (بانر ومدمجة مع المحتوى) إلى تطبيق Flutter.

سيساعدك هذا الدرس التطبيقي في التعرّف على المفاهيم الرئيسية في Accelerated Mobile Pages ومدى اختلافها عن مستندات HTML التقليدية. وسيتم تحقيق ذلك من خلال إنشاء مستندات AMP والتحقق من صحتها.

في هذا الدرس التطبيقي حول الترميز، ستتعلّم كيفية إرسال الأحداث الخارجية إلى "إحصاءات Google 4" باستخدام Measurement Protocol.

سيساعدك هذا الدرس التطبيقي في التعرّف على المفاهيم الرئيسية في Accelerated Mobile Pages ومدى اختلافها عن مستندات HTML التقليدية. وسيتم تحقيق ذلك من خلال إنشاء مستندات AMP والتحقق من صحتها.

ستتعرّف في هذا الدرس التطبيقي على كيفية إضافة إعلانات بانر وإعلانات بينية وإعلانات تضم مكافأة إلى تطبيق Flutter.

في هذا الدرس التطبيقي، يمكنك إنشاء تطبيق مصغّر على الشاشة الرئيسية لتطبيق Flutter على نظام iOS أو Android. ستبدأ باستخدام تطبيق Flutter للأخبار الأساسي. وستستخدم بعد ذلك أطر عمل أصلية لإنشاء واجهة مستخدم للأدوات نفسها. وأخيرًا، ستتعلم كيفية مشاركة الموارد وإنشاء اتصال بين الأدوات والتطبيق الرئيسي.

في هذا الدرس التطبيقي، ستتعرّف على كيفية استخدام Dataproc على Google Compute Engine (GCE).

في هذا الدرس التطبيقي حول الترميز، عليك إرسال وظائف Spark ML إلى خدمة Dataproc من Google.

في هذا الدرس التطبيقي حول الترميز، ستتعرّف على كل شيء عن Dataproc Serverless، بما في ذلك كيفية بدء استخدامها والوصول إلى مجموعة ميزاتها الغنية.

استخدِم الأنماط والسجلات وغيرها من الميزات الجديدة في Dart 3 لإعادة تصميم نمط تصميم واجهة المستخدم الخاص بك في Flutter.

تتوفّر في Dialogflow، مجموعة واسعة من خدمات الدمج المتاحة للويب، و"مساعد Google"، ووسائل التواصل الاجتماعي، وبوابات الهاتف. ومع ذلك، عندما تريد استخدام روبوتات الدردشة على الأجهزة الجوّالة، سيتعين عليك إنشاء تكامل مخصص. يشرح لك هذا التمرين المعملي كيفية دمج Dialogflow Essentials في تطبيق Flutter.

في هذا الدرس التطبيقي حول الترميز، ستتعرّف على &amp وإنشاء مكون ويب من البداية ثم تحسينه تدريجيًا إلى عنصر Lit.

يوضِّح لك هذا الدرس التطبيقي كيفية استخدام دوال Google Cloud لتشغيل سير عمل Apache Airflow (DAG) في Google Cloud Composer. ينفذ DAG هنا أمر bash بسيطًا باستخدام BashOperator.

باستخدام JavaScript، يمكنك إنشاء تطبيق ويب يتحكّم في شمعة LED عديمة اللهب بفضل واجهة برمجة التطبيقات Web Bluetooth API الجديدة.

في هذا الدرس التطبيقي حول الترميز، ستكتب تعبيرات بلغة التعبير الشائعة التي يتم تنفيذها في تطبيق Go. ستقوم بإنشاء المتغيرات، واستخدام المنطقية و/أو العوامل، وإنشاء json، وإنشاء النماذج الأولية، وضبط التعبيرات.

في هذا الدرس التطبيقي حول الترميز، ستتعلم كيفية مراقبة عمليات كتابة/قراءة Bigtable أثناء تحميلها وقراءة كمية كبيرة من البيانات باستخدام Dataflow.

في هذا الدرس التطبيقي حول الترميز، ستتعرّف على كيفية استخدام "أداة إنشاء النماذج" لإعادة تدريب نموذج التعليقات غير المرغوب فيها لمراعاة الحالات الحادة التي تعذّر على النموذج المدرّب مسبقًا معالجتها، ثم إعادة نشر النموذج الجديد في تطبيق الويب.

في هذا الدرس التطبيقي حول الترميز، ستنشئ تجربة في "خرائط Google" باستخدام حزمة تطوير البرامج (SDK) لتطبيق Flutter على الأجهزة الجوّالة لإنشاء تجارب أصلية عالية الجودة على أنظمة التشغيل iOS وAndroid والويب.

في هذا الدرس التطبيقي حول الترميز، ستتعرّف على كيفية تحميل أحد النماذج المدرّبة مسبقًا على TensorFlow.js (COCO-SSD) واستخدامه والتعرُّف على العناصر الشائعة التي تم تدريبها عليها.

في هذا الدرس التطبيقي حول الترميز، ستكتسب خبرةً في إنشاء تطبيق بتصميم متكيف يتحرّك بسلاسة باستخدام المواد 3 على جميع الأنظمة الأساسية الست المتوافقة مع Flutter.

Flutter هو مجموعة أدوات واجهة المستخدم من Google لإنشاء تطبيقات رائعة ومُجمَّعة إلى رموز أصلية للأجهزة الجوّالة والويب وأجهزة الكمبيوتر المكتبي، وذلك من خلال قاعدة رموز برمجية واحدة. في هذا الدرس التطبيقي حول الترميز، تبدأ بتطبيق موسيقى عادي (باستخدام Material 3) وتجعله أكثر جمالاً وتجاوبًا مع جميع الأنظمة الأساسية.

في هذا الدرس التطبيقي حول الترميز، ستنشئ تطبيق Flutter يتكيّف مع جميع الأنظمة الأساسية الست المتوافقة معه، وهي Android وiOS والويب وWindows وmacOS وLinux.

في هذا الدرس التطبيقي حول الترميز، ستتمكّن من إنشاء تطبيق بسيط من Flutter واختباره.

في هذا الدرس التطبيقي حول الترميز، ستعمل على إنشاء مكوّن إضافي من Flutter لكل من الأنظمة الأساسية للأجهزة الجوّالة وأجهزة الكمبيوتر المكتبي باستخدام FFI للاستفادة من مكتبة C أصلية.

في هذا الدرس التطبيقي حول الترميز، ستتعرّف على كيفية إضافة المكوّن الإضافي webview_flutter إلى تطبيق Flutter.

تعلَّم كيفية صياغة آليات الألعاب في لعبتَي Flutter وFlutter من خلال Forge2D، وهو محرك فيزياء ثنائي الأبعاد.

ستتعرّف في هذا الدرس التطبيقي على كيفية استخدام محرّك الألعاب Flame المدمج في برنامج Flutter. ستتعرف على مكوّنات Flame وتأثيراتها، إلى جانب كيفية دمج Flame وإدارة حالاته في Flutter.

تعلَّم كيفية إنشاء واجهات مستخدم Flutter باستخدام الصور المتحركة وأدوات التظليل وتأثيرات الجسيمات التي تعمل على جميع منصات Flutter الست.

تعرَّف على طريقة إنشاء تطبيق Flutter مكثفًا للحوسبة مع الحفاظ على التفاعل السلس مع Flutter.

يمكنك التعرّف على أساسيات استخدام "المكوّنات المادية" من خلال إنشاء صفحة تسجيل دخول إلى تطبيق Flutter بسيط.

تعرَّف على أساسيات استخدام "المكوّنات المادية" للويب من خلال إنشاء تطبيق بسيط يتضمّن مكونات أساسية.

اكتشِف كيف تسهّل مكتبة Material Flutter تمييز منتجك والتعبير عن علامتك التجارية من خلال التصميم.

تعرّف على كيفية تسهيل استخدام "مواد المادة" على الويب لإبراز منتجك والتعبير عن علامتك التجارية من خلال التصميم.

في هذا الدرس التطبيقي حول الترميز، ستتعرّف على كيفية استخدام نموذج تعلُّم الآلة الحالي بلغة Python بتنسيق SaveModel ونحوّله إلى تنسيق TensorFlow.js كي يتسنى تشغيله في متصفّح ويب، وفي الوقت نفسه تتعلّم أيضًا كيفية معالجة المشاكل الشائعة التي قد تحدث في الإحالات الناجحة.

في هذا الدرس التطبيقي حول الترميز، ستتعلّم كيفية إضافة إشعارات فورية إلى تطبيق الويب.

This codelab is intended to help you understand how to create your first 3D Map using Photorealistic 3D Maps in Maps JavaScript. You will learn the basics about loading the right components of the Maps Javascript API, displaying your first 3D Map and

This tutorial explores how to add and style 3D markers in your application. You'll also learn how to animate your application by flying to and around specific locations. This tutorial builds on the concepts covered in the first codelab. If you

In this codelab, you learn everything that you need to get started with the vis.gl/react-google-map library for the Google Maps JavaScript API, which lets you add a Google map to a React app. You learn how to get set up, load the Maps JavaScript API,

In this codelab we’ll build together a real-time web application with Firebase and Angular.

Progressive Web Applications (PWAs) are a type of application software delivered through the web, built using common web technologies including HTML, CSS, and JavaScript. They are intended to work on any platform that uses a standards-compliant

Maps can be a very powerful tool when visualizing the patterns in a dataset that are related to location in some way. This relation could be the name of a place, a specific latitude and longitude value, or the name of an area that has a specific

Imagine you have many places to put on a map and you want users to be able to see where these places are and identify which place they want to visit. Common examples of this include: In this codelab, you will create a locator that draws from a live

Learn how to create a simple website that classifies images with TensorFlow Serving.

Learn how to build Perspective API.

Learn to build a location-based web app using the Maps JavaScript API and PLaces Library to perform a Nearby Search.

Learn how to train a comment-spam detection model with TensorFlow Lite Model Maker.

Learn how to retrain the spam-detection model to detect specific types of spam with TensorFlow Lite Model Maker.

In this codelab, you’ll build an image-slider,, which works independently of Angular framework, can be imported in any framework, and is very easy to integrate.

In this lab, you'll take an existing web application and make it work offline. This is the first in a series of companion codelabs for the Progressive Web App workshop. There are seven more codelabs in this series. Start by either cloning or

Whether you are embarking on a road trip, planning your daily commute, or navigating a bustling city, getting from point A to point B is more than just knowing where you want to go. A reliable route generation tool is essential. With Google Maps

In this codelab, you learn everything you need to get started using Google Maps Platform for the web. You learn all the basics, from getting set up to loading the Maps JavaScript API, displaying your first map, working with markers and marker

Learn how to build an app to get video and take snapshots with your webcam, and share them peer-to-peer with WebRTC.

In this codelab, you’ll add second-factor authentication to your site or web app with a security key.

In this lab, you'll take website with an existing service worker and convert it to using Workbox. This is the second in a series of companion codelabs for the Progressive Web App workshop. The previous codelab was Going Offline. There are six more

In this lab, you'll take an existing Progressive Web App that you have deployed and wrap it in an app for distribution in Google's Play store. Bubblewrap is a tool to make wrapping your Progressive Web App into an Android App Bundle as easy as

Learn how to build a Flutter app that classifies texts and displays the results in its UI.

In this codelab, you’ll learn how to build a simple web page that has commenting ability akin to a blog post article and integrate it with a pre trained machine learning model to detect comment spam posts, enabling you to filter these out before they even get stored in any backend database, reducing server processing time and cost.

This codelab teaches you how to use the WebGL-powered features of the Maps JavaScript API to control and render on the vector map in three dimensions. This codelab assumes you have intermediate knowledge of JavaScript and the Maps JavaScript API. To

One of the most common features of a website is displaying a Google map that highlights one or more locations for a business, establishment, or some other entity with a physical presence. How these maps are implemented can vary greatly depending on

This codelab teaches you how to create a high-volume geospatial data visualization using the Maps JavaScript API and deck.gl, an open-source, WebGL-accelerated, data-visualization framework. If you haven't used Google Maps Platform before, follow

Learn how to build a website with a simple reauthentication functionality that uses a fingerprint sensor.

In this codelab you’ll learn how to use Model Maker to retrain a comment spam model to account for edge cases the pre-trained model could not handle, and then re-deploy the new model to the web application.

Learn how to secure your online information, identify phishing attacks, enable Advanced Protections for Google Accounts, and stay safe on social media.

In this codelab, you’ll build a GitHub client in Flutter for desktop.

Learn how to create a theme and brand that’s accessible and personalized with Material 3.

Learn how to use adaptive design principles in Material Design to achieve consistency across screen sizes. In this codelab, you take a mobile design to tablet format, and learn about the responsive grid, adaptive composition patterns, and the correct components.