Dibo – Telegram

Dibo

احنا بنعرف نعمل import لملف #جافاسكريبت جوة ملف js تاني باستخدام import keyword
بس تعرف انك تقدر تعمل import لملف #html جوة ملف html تاني وبرضو باستخدام import؟

لو عندك صفحة html وعاوز تجيب صفحة تانية تعرضها فيها فغالبا هتفكر في شوية طرق تقليدية زي مثلا iframes و ajax
طريقة iframe بطيئة جدا لانها بتعمل request كامل جديد, دة غير ان الصفحة المتضمنة مش جزء من الصفحة الرئيسية
اما طريقة ajax رغم انها افضل واخف من iframe بس بتتعامل مع المحتوي ك sting عادي

بس انت غالبا ماتعرفش ان في طريقة ابسط من كدة بكتير .. وهي انك ببساطة تستخدم import بنفس الطريقة اللي بت import بيها ملف #javascript module

<link rel="import" href="other-page.html">

وعادي برضو تimport صفحة من دومين تاني

<link rel="import" href="http://example.com/elements.html">

الحلو بأة في الموضوع انك لو بتعمل import لنفس الفايل كذا مرة, البراوزر هيعمل request واحد بس

والاحلي انه بي bundle كل ال resources في فايل واحد
فمثلا لو حابب تستخدم مكتبة زي bootstap فانت غالبا بتحمل ملفات js وملفات css وملفات fonts .. بس بالطريقة الجديدة ممكن تحمل فايل html وهو بيحمل كل الملفات المطلوبة مرة واحدة

<link rel="import" href="bootstrap.html">

bootstrap.html:

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="fonts.css">
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script src="bootstrap-tooltip.js"></script>
<script src="bootstrap-dropdown.js"></script>

ممكن تتابع ال status بسهولة, سواء في حالة نجاح التحميل او في حالة ايرور
<link rel="import" href="file.html" onload="handleLoad(event)" onerror="handleError(event)">

لو عاوز تتأكد ان الخاصية دي مدعومة في المتصفح الحالي ممكن تعمل حاجة زي كدة
if('import' in document.createElement('link')){
// supported
} else{
// use legacy methods
}

لو الخاصية مش مدعومة ممكن تستخدم polyfills بتاعة web components لان الخاصية دي اساسا جزء من #web_components

https://webcomponents.org/polyfills

نسيت اقولك انك لما بت import فايل مش معناها ان محتويات الفايل دة هتظهر في الصفحة مباشرة زي ما بيحصل مع iframe
انما معناها فقط ان الفايل اتحمل والمحتوي موجود قدامك تعمل فيه اللي انت عاوزه, وبالتالي ممكن مثلا تظهر جزء معين من الصفحة المتحملة بدل الصفحة كلها, او مثلا تكون عاوز تاخد معلومات ومش عاوز الصفحة نفسها تظهر, او مثلا عاوز تظهر الصفحة بناء علي شروط معينة او تتأكد مثلا من وجود معلومة معينة بناء عليها هتقرر تظهر الصفحة ولا لأ او تظهرها في مكان معين حسب المحتوي

let link = document.querySelector('link[rel="import"]');
let content = link.import;

المحتوي هنا عبارة عن DOM مش string وبالتالي تقدر تستخدم ادوات DOM عشان تاخد اللي انت عاوزه من الصفحة بسهولة

let el = content.querySelector('.main')

// do stuff with 'el', such as injecting it into an existing element
document.body.appendChild(el.cloneNode(true));

بس خد بالك ان الصفحة المتحملة تقدر تدخل علي ال DOM بتاع الصفحة الرئيسية, فملا لو في style معين, دة هيتطبق علي الصفحة المتحملة والصفحة الرئيسية برضو

وخد بالك برضو ال scripts اللي في الصفحة المتحملة هتبدأ تتنفذ فورا وقت التحميل, حتي لو ماحقنتهاش في الصفحة الرئيسية

ممكن نستخدم template tag ودي خاصية تانية جديدة, فايدتها باختصار ان الكود اللي جواها بيفضل خامل لغاية ما يتحقن في ال DOM

external.html
<template>
<script> ... </script>
<img src="img.jpg" />
</template>

main.html
<link rel="import" href="external.html">
<script>
let link = document.querySelector('link[rel="import"]');
let template = template = link.import.querySelector('template')

document.body.appendChild(template)
// now the resources of external.html will be loaded
</script>

طب بالمرة بأة نتعمق في الموضوع اكتر ونستغل ال html import مع ال custom elements
لو ماتعرفش اية هي ال custom elements فهي طريقة بتخليك تعمل component زي كدة ال components بتاعة #Angular و #Reactjs بس مدعومة natively في البراوزر مباشرة .. وهنتكلم عنها بالتفصيل بعدين

الفكرة بأة انك بدل ماتسيب المستخدم يـ register ال custom element بتاعك في الصفحة بتاعته, اعمل انت الشغل التقيل عندك ومل اللي عليه انه يـ import الفايل ويستخدم ال components بتاعتك بسهولة من غير مايشغ باله بالتفاصيل اللي ورا الكواليس

<link rel="import" href="elements.html">
<say-hi name="Dibo"></say-hi>

استخدم async لتحسين ال performance
<link async ... >

www.webcomponents.org

webcomponents.org - Discuss & share web components

👏7👍3❤2

3.06K views15:00

Dibo

#vscode #tips

side by side editing

👇👇
https://facebook.com/mobarmegeen/posts/pfbid02QU7UQHPd9Mr3raiR12B7j7cg4bj3ry1h2cSUMWVkJXfPjTHR6rJ2mvUDyRjFvL1Hl/

#developer #developers #frontend #backend #nodejs #html #css #java #programming

Facebook

[vscode tips] side by side editing.mp4 | #vscode #tips

side by side...

#vscode #tips

side by side editing

#developer #developers #frontend #backend #nodejs #html #css #java #programming

👍1

1.51K views07:02

Dibo