🔺اگه قبلا از کتابخونه‌های مختلف جاوااسکریپتی برای Lazy Loading تصاویر استفاده می‌کردیم، امروز می‌تونیم این کار رو بدون هیچ کدنویسی اضافی انجام بدیم. کافیه به تگ <img> یک خاصیت اضافه کنیم به اسم loading با مقدار lazy. و تمام! 👌

- با این روش، تصاویر موجود توی صفحه زمانی لود میشن که توی محدوده‌ی دید قرار بگیرن. که باعث میشه سرعت بارگذاری صفحه بالا بره.

- این ویژگی کاملا جدید هست و فقط مرورگرهای جدید از اون پشتیبانی می‌کنن.
#html

🔺عجیب اما واقعی!

- اگه توی صفحه HTML یک المنت با یک id خاص داشته باشین، یک متغیر سراسری به اسم همون id توی جاوااسکریپت در دسترسه که مقدارش همون المنت هست

- این ویژگی برمی‌گرده به دوران قدیم (IE اون موقع‌ها) و مرورگرهای جدید برای سازگار بودن با کدهای قدیمی مجبور به پیاده‌سازی این ویژگی شدن

- پیشنهاد میشه علاوه‌بر اینکه روی این ویژگی حساب نکنین، حتی مواظب متغیرهای سراسری که به این صورت ساخته میشن باشین!

» جزییات بیشتر
Credits: Amir Pourhadi

#html

🔺از تگ picture استفاده کنین تا بتونین توی سایزهای متفاوت صفحه، تصاویر متفاوتی رو نشون بدین

- معمولاً توی صفحه‌های وب برای هر عکس ورژن و سایزهای متفاوتی وجود داره و می‌خوایم هنگام طراحی صفحه‌های Responsive براساس سایزهای مختلف صفحه، سایز متفاوتی از عکس رو نمایش بدیم

- تگ picture این امکان رو میده که براساس شرایط مختلف، عکس متفاوتی نمایش داده بشه تا از هدر رفت منابع و پهنای‌باند جلوگیری بشه 👌

- توی این تگ برای هر ورژن از تصویر یک تگ source قرار می‌دیم و مشخص می‌کنیم که این تصویر توی چه شرایطی باید نمایش داده بشه

- انتهای اون هم یک تگ img می‌ذاریم که زمانی نمایش داده میشه که هیچکدوم از شرایط برقرار نباشه

- مرورگر به صورت خودکار تصمیم می‌گیره که کدوم از تصاویر باید دانلود و نمایش داده بشه

#html

🔺اعتبارسنجی فرم HTML مثل آب خوردن 🍶

- همونطور که شاید بدونین، برای دیتی مشغول ضبط آموزش‌هایی با عنوان «پروژه‌های جاوااسکریپت برای تازه‌کارها» هستم. موضوع یکی از پروژه‌ها ساختن اعتبارسنجی فرم بود

- یکی از راحت‌ترین و ساده‌ترین روش‌های اعتبارسنجی، چیزی هست که فریم‌ورک لاراول ارائه میده و من به عنوان یک پروژه تفریحی خواستم از لاراول الگو بگیرم و اون روی توی فرانت‌اند پیاده‌سازی کنم (DEMO)

- این پروژه هنوز کامل نیست. لیست کارهایی که باید انجام بشه رو از اینجا ببینین

- اگه مایل هستین، Star بزنین و توی این پروژه مشارکت داشته باشین تا کامل‌ترش کنیم:
https://github.com/AliN11/easy-html-form-validator

#html

🔺اگه یک ورودی از نوع number داریم، می‌تونیم هنگام خوندن مقدار اون، از valueAsNumber استفاده کنیم تا چیزی که تحویل می‌گیریم از نوع number باشه (اگه از value. استفاده کنیم، خروجی همیشه string هست)

- همچنین اگه نوع ورودی date هست، می‌تونیم از valueAsDate استفاده کنیم تا چیزی که تحویل می‌گیریم نوعی از آبجکت Date باشه

#html #javascript

🔺ـ Node و Element توی دام (DOM) چه تفاوتی دارن؟ 🤔

- همونطور که می‌دونیم یک صفحهٔ HTML از اجزای مختلفی مثل تگ‌ها، متن‌ها، کامنت‌ها و ... تشکیل میشه

- برای دسترسی به این اجزا و کار کردن با اونها، مرورگر برای ما آبجکت DOM که یک رابط بین HTML و جاوااسکریپت هست رو می‌سازه. با DOM می‌تونیم به همهٔ این اجزا دسترسی داشته باشیم و تغییراتی توی صفحه بدیم

- به این اجزایی که توی DOM وجود دارن به طور کلی گفته میشه Node. مثلاً متن توی تگ p، کامنت‌ها و خودِ المنت‌ها همگی نوعی Node هستن

- اعضایی مثل div و img یک نوع خاص از Node هستن که بهشون گفته میشه Element

- برای مثال توی تصویر، یک المنت p داریم و در مجموع ۴ تا Node:
۱. کامنت
۲. المنت p
۳. اتریـبـیـوت class
۴. متن بین تگ‌های باز و بستهٔ p

#tips #html