شبه المنت ها و شبه کلاس ها در css

Davood Habbabi — Wed, 05 May 2021 17:09:38 +0430

رفقا سلام امروز در خدمتتون هستم با معرفی نیم المنت ها و نیم کلاس های css امیدوارم به دردتون بخوره 1 . شبه المنت یا نیم المنت (pseudo elements)یه مفهومی توی css وجود داره به اسم شبه المنت یا نیم المنت به این صورت که یه سری المنت ها به صورت خارجی وجود ندارن ولی می شه بهشون با css استایل داد و یا اصلا به صورت المنت باهاشون رفتار کرد یا اصلا ایجادشون کرد مثلا :نیم المنت after :در واقع این بزرگوار میاد قبل از شروع المنت اصلی یه نیم المنت ایجاد می کنه می شه در حد تکست و فونت ایکون بهش محتوا داد و استایل های مختلف بهش داد نیم المنت before :این هم مثل after عمل می کنه با این تفاوت که بعد از المنت اصلی ایجاد می شه نیم المنت first-letter :همون طور که از اسمش پیداس میاد حرف اول المنت اصلی رو می گیره و شما می تونید مثل بقیه المنت ها بهش استایل بدیدنیم المنت first-line :ایشون هم خط اول رو هدف قرار می ده و می تونید خط اول المنت اصلی رو هر استایلی که بخواید بدید نیم المنت marker :در تگ های ol و ul وقتی که لیست ایجاد می کنید در کنار لیست ایتم ها یک علامت به صورت عددی یا ایکونی وجود داره با استفاده از نیم المنت marker می تونید به اون بخش استایل بدید نیم المنت selection :توی صفحات وب شما می تونید بخشی از متن رو سلکت کنید و روی اون بخش عملیات مختلف انجام بدید مثل کپی و پیست و هر عملیات دیگه ای با استفاده از این نیم المنت می تونید به بخش های سلکت شده توسط موس استایل های متفاوت بدید 2 . شبه کلاس یا نیم کلاس (pseudo classes)با استفاده از این شبه کلاس ها شما می تونید به حالت های خاصی از المنت اصلی استایل های مختلفی بدید به عنوان مثال وقتی که روی یک لینک کلیک کنید و نگهدارید (نیم کلاس active)یا وقتی که کرسر موس رو داخل یک تکست باکس قرار بدید (نیم کلاس focus )*** نکته : تعداد نیم کلاس ها خیلی زیاده من تو این مقاله چند تاییش رو اسم می برم و شما رو میسپارم به دست دوست خوبم w3schools ***نیم کلاس first-child :همون طور که از اسمش پیداست اولین فرزند المنت اصلی رو هدف قرار می ده نیم کلاس hover :این نیم کلاس حالتی رو هدف قرار می ده که نشانگر موس در لحظه روی المنت قرار گرفته باشه نیم کلاس root : مستقیما دایکیومنت اصلی رو هدف قرار می ده(اغلب متغیر های css هم توی همین تعریف می شه )نیم کلاس disabled :حالت غیر فعال المنت رو هدف قرار می ده (یعنی وقتی که اتربیوت disabled داخل المنت فعال باشه) نیم کلاس last-child :همون طور که از اسمش پیداست اخرین فرزند المنت اصلی رو هدف قرار می دهخلاصه شناختن این نیم کلاس ها و نیم المنت های خیلی مهم هستن و شما با دذونستن اینها می تونید بخش خیلی زیادی کد هاتون رو بهینه کنید لینک کامل نیم کلاس ها و نیم المنت ها اینجا هست می تونید خودتون بخونیدش : نیم المنت ها و نیم کلاس ها امیدوارم مفید باشه :)

ایجاد پیش‌ نمایش لینک‌ در شبکه های مجازی

رضا هاشمی — Tue, 02 Mar 2021 17:36:41 +0330

ایجاد پیش‌ نمایش لینک‌ در شبکه های مجازیخیلی برام پیش اومده که میخواستم لینک یه پروژه ای که قبلا کار کردم یا در حال توسعه هستم رو برای یه نفر توی تلگرام یا واتساپ یا جاهای دیگه ارسال کنم اما وقتی لینک رو میفرستم اصلا ظاهر جالب و قشنگی نداره. و حتی بعضی وقتا شده که بین چت هامون گم شده و طرف میگه من لینکو پیدا نمی کنم دوباره بفرست.حتما شما هم دیدید که بعضی لینک ها پیش نمایش جالبی داره که همین پیش نمایش باعث جذب مخاطب میشه مثل تصویر پایین.پیش نمایش یک لینکپیش نمایش لینک معمولاً شامل یک تصویر ، عنوان ، توضیحات و نام دامنه است. همه این اطلاعات توسط شما قابل تنظیم است!پروتکل Open Graphاین قطعه کد بخشی از پروتکل Open Graph است که توسط Facebook ایجاد شده.این متا تگ ها نحوه نمایش لینک ها هنگام اشتراک گذاری در شبکه های اجتماعی را کنترل می کنن.برای شروع ایجاد پیش نمایش لینک، باید متا تگ های Open Graph را در قسمت کد HTML وب سایت خودمون اضافه کنیم.Open Graph Protocolمتادیتاهای اجباریچهار property برای پیاده‌سازی و تنظیم پیش‌نمایش لینک اجباری هستند:1: تگ og:titleاین همان متا تگ هست که در تگ <head> صفحه هم هست. اگر متا تگ og: title پیدا نشود ، به جای آن به صورت پیش فرض از متا تگ <title> استفاده می شود که مثل کد پایین نوشته می شود.<meta property="og:title" content="اینجا عنوان نوشته می شود" />2: تگ og:typeاین تگ نوع محتوای موجود در صفحه را مشخص می کنه که برای دیدن انواعی که میتونید استفاده کنید می تونید به اینجا مراجعه کنید ، سایت های فاقد این متا تگ به عنوان website شناخته می شن.<meta property="og:type" content="website" />3: تگ og:urlکه آدرس صفحه‌ی وبسایت می باشد و باید توجه داشته باشید که مقدار آن حتما absolute URL باشد:<meta property="og:url" content="https://آدرس وب.com" />4: تگog:imageتصویری که در پیش نمایش لینک نمایش داده می شود. این تصویر مانند بنر تبلیغاتی هست که باید محتوای صفحه را ارائه بدهد پس در انتخاب این تصویر خوب دقت کنید.<meta property="og:image" content="https://آدرس عکس.jpeg" />به نظر می رسد که این مقدار هم فقط با absolute URL کار می کند.پیشنهاد می شود که وضوح عکس 1200 در 627 پیکسل و نسبت ابعاد 1 به 1.91 باشد و همچنین حجم عکس هم بیشتر از 5 مگابایت نباشد.متادیتاهای اختیاری1: تگ og:description به اندازه یک یا دو جمله برای توضیح عملکرد وبسایتمون به این تگ اضافه می کنیم.<meta property="og:description" content="توضیحات برای وب سایت" />2: تگ og:site_nameاگر این صفحه وب سایت ما بخشی از یک وبسایت اصلی باشد این بخش را اضافه می کنیم و نام اصلی وب سایت را قرار میدیم<meta property="og:site_name" content="نام وب سایت" />متادیتاهای مخصوص توئیتر1: تگ twitter:cardاین متادیتا نوع نمایش کارت را در توئیتر مشخص میکند. چنانچه type , title و description در صفحه موجود باشد توئیتر به صورت پیش فرض نوع summary card را برا پیش نمایش لینک شما انتخاب خواهد کرد.<meta name="twitter:card" content="summary_large_image" />2: تگ twitter:siteدر این متادیتا آدرس صفحه توئیتر مربوط به وبسایت خود را قرار دهید.<meta name="twitter:site" content="@gajino">3: تگ twitter:creatorدر این متادیتا نام سازنده این صفحه قرار میگیرد. <meta name="twitter:creator" content="@rezahashemi">در صورت وجود مشکل یا سوال میتوانید به مستندات توئیتر مراجعه کنید.یا به منبع این مقاله مراجعه کنید. </article> <article> <h1>چگونگی Data Fetching (واکشی دادها) در Nextjs</h1> <p>Saeid J — Sat, 27 Feb 2021 16:27:49 +0330</p> در nextjs مفهوم بسیار مهمی وجود داره به نام (پیش بارگذاری)pre-rendering. به طور پیش فرض nextjs برای تمامی صفحه ها pre-rendering انجام میده. به این معنی که برای هر صفحه html رو تولید میکنه. به جای اینکه تمام کارها با جاوا اسکریپت سمت کلاینت انجام بشه.این کار باعث SEO بهتر و performance بالاتر میشه.برای چک کردن اینکه nextjs چگونه یک صفحه رو pre-render میکنه:ابتدا در کروم جاوا اسکریپت رو disable کنید:سپس این صفحه رو مشاهده کنید .اگر صفحه ای رو با React ایجاد کرده باشید و جاوااسکریپت مرورگر غیر فعال باشه اون صفحه لود نمیشه.برای تست این صفحه رو با غیر فعال کردن جاوااسکریپت در مرورگر ببینید .در این لینک میتونید ببینید چه جوری js رو در مرورگر کروم غیرفعال کنید.چگونگی pre-rendering با nextjsچگونگی pre-rendering بدون nextjsدر nextjs برای pre-rendering دادها دو روش وجود دارد.Static Generation (SG)Server Side Generation (SSR) تفاوت در این دو روش به زمان ایجاد html برای هر صفحه است.در sg ابتدا pre-rendering برای هر صفحه html را در زمان build تولید می کند و بعد از اون برای هر request از همان html تولید شده استفاده میشه.در ssr به این گونه است pre-rendering به ازای هر request تولید html انجام می دهد. تولید html در building timeتولید html به ازای هر requestتوجه داشته باشید که nextjs به شما این امکان را می دهد که برای هر یک از صفحه های خود یک نوع pre-rendering داشته باشید یا Static generation و یا Server Side Generation .چه زمانی از SSR و چه زمانی از SG استفاده کنیم؟پیشنهاد Nextjs این است که تا جای ممکن از Static Generation(با یا بدون داده)استفاده شود ، زیرا صفحه یک بار ساخته شده و توسط CDN سرویس دهی می کند که این کار باعث سرعت بارگذاری بسیار بیشتری در مقابل نوع SSR می شود.می توان از Static Generation برای صفحات مختلف بسیاری استفاده کرد.نکته ای که در استفاده از SG باید به آن توجه داشت این است که از این نوع Pre-rendering باید برای صفحاتی استفاده کرد که نیازی به ازتباط با کاربر قبل از بارگذاری ندارند.در واقع برای فهم بهتر این که در چه صفحه ای باید از SG و در چه صفحه ای باید از SSR استفاده کنیم یک سوال را از خود می پرسیم:آیا می توانم صفحه را پیش از درخواست کاربر (user request) پیش بارگذاری کنم. اگر جواب بله بود باید از SG و اگر خیر بود باید از SSR استفاده کرد.توجه داشته باشید که SG به این معنی نیست که ما نمی توانیم داده ای را از دیتابیش دریافت کنیم بلکه به این معنی است که این داده باید در زمان ساخت دریافت شده و بارگزاری شود.برای مثال صفحاتی مانند درباره ما، تماس با ما داده مورد نیاز خود را از دیتابیش دریافت می کنند اما نیازی به تعامل با کاربر قبل از بارگذاری ندارند اما صفحاتی مانند جستجو که بر اساس درخواست کاربر نتیجه را نایش می دهند باید به صورت SSR پیاده سازی شوند.همچنین صفحات SSR برای SEO استفاده می شوند که بسیار مهم است.امیدوارم مفید باشه </article> <article> <h1>روتینگ فارسی برای next js</h1> <p>Davood Habbabi — Sun, 21 Feb 2021 14:57:32 +0330</p> اون دسته از عزیزانی که با next js کار کردن می دونن که روتینگ فارسی نداشت و کلی داستان داریم براش تا بتونیم روت های استاتیک و یا داینامیکی بسازیم یعنی اگر بخوایم داشته باشیم http://localhost:3000/سلامباید توی فایل هامون یه سلام.jsایجاد کنیم و داخلش کدمون رو بنویسیم ولی خب به دلیل این که UTF-8 در فایل سیستم متفاوته با UTF-8 در url همچنان صفحه 404 خواهیم داشت یعنی چی ؟بذارید یه مثال بزنم کلمه "سلام" رو در زبان فارسی در نظر بگیرید این در محیط دسکتاپ برابر است با : \xd8\xb3\xd9\x84\xd8\xa7\xd9\x85ولی در url برابر است با :%D8%B3%D9%84%D8%A7%D9%85خب واضحه که این دو تا رشته با هم برابر نیستن پس وقتی ما در محیط دسکتاپ یه فایل ایجاد می کنیم next سعی می کنه http://localhost:3000/%D8%B3%D9%84%D8%A7%D9%85رو باز کنه در فایل سیستم دنبالش می گرده ولی پیدا نمی کنه چون در فایل سیستم چنین چیزی ذخیره شده http://localhost:3000/\xd8\xb3\xd9\x84\xd8\xa7\xd9\x85خب حالا فهمیدیم مشگل کجاس چطوری حلش کنیم ؟جناب next یه کانفیگی داره به اسم Rewrites که با استفاده از اون می تونیم بگیم از روی فایل سیستم تشخیص نده و فایل ها رو از اونجایی که ما می گیم بخونه در واقع روال قبلی next رو داره دور می زنه و این امکان رو به ما می ده تا بگیم تو کدوم روت چه فایلی رو بخونه بذارید با مثال بریم جلو :فرض کنید محتویات فایل next.config.js یه پروژه ای به این صورته :module.exports = { async rewrites() { return [ { source: '/about', destination: '/', }, ] }, }این یعنی محتویات صفحه http://localhost:3000/aboutداره از فایل index.js پروژه خونده می شه خب این دقیقا چیزیه که ما لازم داریم با یکم تغییرات بیاید برای http://localhost:3000/سلامامتحان کنیم یعنی :module.exports = { async rewrites() { return [ { source:`/${encodeURI("سلام")}`, destination: '/hello', }, ] }, }اون /hello که می بینید در واقع یک فایل hello.js توی پوشه pages ساختیم و اون مقدار ${encodeURI("سلام")} دقیقا انکد شده "سلام" هستش این طوری پیج های غیر داینامیکی رو می تونیم به فارسی روت کنیم حالا بازم اگر لازم باشه همچین روتی داشته باشیم http://localhost:3000/سلام/hiباید داخل فایل next.config.js براش کانفیگ کنیم تا بشناسه یعنی module.exports = { async rewrites() { return [ { source:`/${encodeURI("سلام")}`, destination: '/hello', }, { source: '/${encodeURI("سلام")}/hi', destination: '/hello/hi', }, ] }, }برای پیج های داینامیکی بعد از روت فارسی هم می تونیم اینطوری کانفیگ بنویسیم module.exports = { async rewrites() { return [ { source: '/${encodeURI("سلام")}', destination: '/hello', }, { source: '/${encodeURI("سلام")}/:id', destination: '/hello/:id', }, ] }, }توجه کنید برای این که id رو بگیرید باید توی فولدر pages/hello یک فایل به اسم id].js] بسازیدامیدوارم مفید باشه :) </article> <article> <h1>نحوه نمایش رنگی تصاویر png سفید با کد رنگ دلخواه</h1> <p>رضا هاشمی — Sun, 21 Feb 2021 09:06:00 +0330</p> خب مشکل من از جایی شروع شد که قرار شد یک لیست از تصاویر png (که همه سفید هستند) به همراه کد رنگ هاشون از API بگیرم و به صورت آیکون های رنگی نمایش بدم.نمونه عکس سفیدکه البته اگر از حالت روز در ویرگول استفاده کنید این عکس رو نخواهید دید چون بک گراند سفیده و عکس هم سفیده و من بک گراند عکس رو تغییر ندادم تا کاملا متوجه مشکل بشوید.خلاصه بعداز کلی کلنجار رفتن با css خیلی کلافه شده بودم و فقط تونسته بودم باfilter: opacity(0.5) drop-shadow(0 0 0 #ff0000);یک مقدار رنگ به آیکون هام بدم اما اصلا قابل قبول نبود. مثلا کد بالا که رنگ عکس رو باید قرمز کنه تبدیل به عکس پایین می کنه:تصویر ایجاد شده با فیلتر cssهمونطور که ملاحضه می کنید تقریبا قرمز شده اما جالب و قابل قبول نیست.وپس از کلی سرچ و امتحان کردن روش های مختلف و فیلترهای مختلف به راهکار استفاده از svg رسیدم که دقیقا همون چیزی بود که من نیاز داشتم به تکه کد پایین دقت کنید.قطعه کد svg که تصویر رو لود میکنه<svg width="40" height="40" viewBox="0 0 40 40"> <defs> <filter id="prefix__a17"> <feFlood flood-color="#ff0000" result="flood"></feFlood> <feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1"> </feComposite> </filter> </defs> <image width="100%" height="100%" xlink:href="https://link/to" filter="url(#prefix__a17)" type="image"> </image> </svg>باید دقت کنید که حتما باید id تگ filter با مقدار پراپرتی filter در image یکسان باشد و باید کد رنگ مورد نظر خودمون رو به پراپرتی flood-color در تگ feFlood تخصیص بدیم.که در نهایت نتیجه کد بالا به صورت عکس پایین نمایش داده می شود.تصویر ایجاد شده با استفاده ازفیلتر svgهمونطور که مشاهده می کنید تصویر دقیقا رنگ مورد نظر رو نمایش داده و این دقیقا همون آیکون مد نظر من هست.در انتها تشکر میکنم که این پست رو مطالعه کردید و اگر راه بهتری به نظرتون رسید بهم اطلاع بدید. </article> <article> <h1>Event Capturing و Event Bubbling در جاوااسکریپت</h1> <p>Ali Khoshgoftar — Sun, 21 Feb 2021 01:01:34 +0330</p> داستان از اونجا شروع شد که میخواستم یه Modal بنویسم و میخواستم زمانی که این Modal باز بود یه پس زمینه تیره داشته باشیم و اگر روی باکس Modal کلیک شد بتونم روی دکمه OK کلیک کنم و اگر روی پس زمینه تیره کلیک کردم این Modal بسته بشه به همین سادگی :)modalدر جاوا اسکریپت یه مفهومی به اسم Event Flow وجود داره که ترتیب کلیک شدن روی المنت هارو مدیریت میکنه و دو حالت Event Capturing و Event Bubbling داره در حالت پیش فرض روی Event Bubbling قرار داره و به این صورته که از داخلی ترین فرزند، Event شروع به انتشار میکنه و تا بالا ترین والد ادامه پیدا میکنهمثلا فرض کنید قطعه کد زیر رو داریم:<div id="modalWrapper"> <button id="modal">click me</button> </div> let parent = document.querySelector('#modalWrapper'); parent.addEventListener('click', ()=>{ console.log("Parent clicked"); }); let child = document.querySelector('#modal'); child.addEventListener('click', ()=>{ console.log("Child clicked"); });در این کد به ترتیب المنت های زیر رو داریمbutton , div , body , html , document , windowو با کلیک روی click me به ترتیب از داخلی ترین فرزند یعنی button ایونت ها صدا زده میشن و خروجی این کد میشه// Child clicked// Parent clickedو اگر بخوایم این ترتیب رو برعکس کنیم باید از آرگومان سوم addEventListener که مقدار boolean میگیره که خیلی ها از جمله خود من تا چند وقت پیش کاربردشو نمیدونستم استفاده کنیم :)این مقدار به صورت پیشفرض برابر با false هستش و اگر این مقدار رو برابر true قرار بدیم ترتیب صدا شدن ایونت ها برعکس میشه و از خارجی ترین والد به سمت داخلی ترین فرزند حرکت میکنه<div id="modalWrapper"> <button id="modal">click me</button> </div> let parent = document.querySelector('#modalWrapper'); parent.addEventListener('click', ()=>{ console.log("Parent clicked"); },true); let child = document.querySelector('#modal'); child.addEventListener('click', ()=>{ console.log("Child clicked"); },true);در نتیجه به ترتیب المنت های زیر رو داریمwindow , document , html , body , div , button و با کلیک روی click me به ترتیب از خارجی ترین والد ایونت ها صدا زده میشن و خروجی این کد میشه// Parent clicked// Child clickedEvent Capturing VS Event Bubbling و همچنین اگر بخوایم با صدا شدن یک Event فرایند انتشار سایر Event ها متوقف بشه میتونیم از stopPropagation استفاده کنیم که روش استفاده از این متد به صورت زیر می باشد .<div id="modalWrapper"> <button id="modal">click me</button> </div> let parent = document.querySelector('#modalWrapper'); parent.addEventListener('click', (e)=>{ console.log("Parent clicked"); }); let child = document.querySelector('#modal'); child.addEventListener('click', (e)=>{ console.log("Child clicked"); e.stopPropagation(); }); و نتیجه کد بالا برابر است با // Child clickedممنون که وقت گذاشتی، لطفا هر موردی که از قلم انداختم کامنت کن که به این مقاله اضافه کنم ;) </article> <article> <h1>فلاکس چیست و با ریداکس چه تفاوتی دارد؟</h1> <p>Saeid J — Sat, 20 Feb 2021 15:14:29 +0330</p> در حال حاضر یکی از زبان های محبوب برای توسعه فرونت react هست . مفهومی در ری اکت وجود داره به نام flux و redux . درباره اینکه flux چیست و چه تفاوتی با redux دراه در ادامه صحبت میکنم.فلاکس یک معماریه که توسط فیسبوک برای ساخت client side web app ایجاد شده. فلاکس در واقع بیشتر یک پترنه تا یک فریمورک .روند در fluxفلاکس چیست؟در اینجا درباره پیاده سازی فلاکس توسط فیسبوک صحبت میکنم.جریان فلاکس : به این شکله ک در لایه ویو که کامپوننت های ری اکت هستند عملی رو به dispatcher ارسال میکنند. دیسپچر یک event رو emit میکنه به store. استور چک میکنه که آیا چیزی برای انجام دادن با توجه به رویدادی که از دیسپچر براش اومده داره یا نه. اگر جواب اره باشه شروع به پردازش برای اون رویداد میکنه. کامپوننت ها همواره به تغییرات استور گوش میدن اگر رویدادی براشون ارسال بشه با توجه به اون رویداد خودشون رو آپدیت میکنن.تفاوت بین flux و redux:یکی از مهم ترین تفاوت ها بین فلاکس و ریداکس اینه که فلاکس multiple store هست اما ریداکس single store.اصل تفاوت در نوع مدیریت داده ها است . در ریداکس state ها immutable هستند(غیر قابل تغییرن) ، بنابراین ما یک داده جدید رو به وجود میاریم.اما در فلاکس ما میتونیم چندین state برا چنیدن کامپوننت داشته باشیم(که این کار باعث بی نظمی میشه).در فلاکس کامپوننت ها به store event ها گوش میدن برای تغییر ، در ریداکس کامپوننت ها خودشون رو بر اساس تغییر state آپدیت میکنن. از اونجایی که ریداکس single store (با داشتن چندین reducers ) هس در پیاده سازی و راحتی استفاده دست بالا رو داره.به عنوان react dev ترجیح میدم از ریداکس استفاده کنم چون کد تمیز و خواناتری رو برای خودم و هر کسی که کد رو بخونه ارایه میده.امیدوارم مفید باشه </article> <article> <h1>تفاوت بین var , let و const</h1> <p>Davood Habbabi — Tue, 26 Jan 2021 12:10:15 +0330</p> با اومدن es6 تعریف متغیر در جاوا اسکریپت تغییر کرد و یه کلید واژه به اسم let وارد جاوا اسکریپت شد فرق const با اون دو تای دیگه که مشخصه const همون طور که از اسمش پیداست یک مقدار ثابت هستش و طی برنامه نمی شه مقدارش رو تغییر داد ولی فرق های let و var :برای فهمیدن تفاوت های let و var باید یکم بیشتر راجع به scope ها بدونید در زمان های دور (es5) دو نوع scope داشتیم یا Global Scope بود یا Function Scope از اسمشونم معلومه چیه دیگه یا مقادیر داخل function ها تعریف می شدن یا به صورت عمومی (که تعریف همچین متغییر هایی به دلیل پرفرمنس جیز بود و نباید انجامش می دادیم )وقتی که es6 اومد یه Scope جدید با خودش آورد به اسم Block Scope حالا بریم ببینیم فرقشون چیهنکته : در جاوااسکریپت هر {} یک بلوک محسوب می شود پس هر کدی که داخل {} قرار بگیرد داخل یک بلوک کد است لازم به ذکر است که Function Scope یک حالت خاص از Block Scope می باشد در واقع function Scope همان Block Scope است که به صورت function تعریف شده باشد نکته 2 : هر function Scope قطعا یک Block Scope است ولی لزوما همه Block Scope ها Function Scope نیستند تیکه کد پایین رو در نظر بگیرید var a = 40 if(a > 10){ var a = 42; } console.log(a); //output : 42به این می گن Global Scope یعنی به صورت عمومی در دسترس هستش که خب استفاده کردن ازش همچنان جیزه :)حالا اینو ببینید let a = 40; if(a > 10){ let a = 42; } console.log(a); //output : 40بیاین یه مثال ملموس تر بزنیم که هم Function Scope استفاده کرده باشیم هم block Scopeکد پایین رو ببینید function (){ let a = 11; var b = 12 if(a > 10 ){ let a = 9; var b = 15; console.log("first log a " , a); console.log("first log b" , b); } console.log("second log a" , a); console.log("second log b" ,b); //output :first log a 9 //output :first log b 15 //output :second log a 11 //output :second log b 15 } چی شد ؟اساسی ترین فرق let و var همین هستش که let حوزش Block Scope هستش و var حوزش Function Scopeیعنی شما اگر مقداری که با let تعریف کردین داخل یه بلوک دیگه (مثل if , else , loop و ...) مجدد با همون نام تعریفش کنید و مقدار بهش بدین بیرون بلوک انگاری که هیچ کاری نکردین و تاثیری روی مقدار بیرون بلوک نخواهد داشت یه تفاوت دیگه هم let و var دارندشما می تونی داخل حوزه var مجدد با همون نام مقدار تعریف کنی ولی با let نمی تونی یعنی چی ؟ کد پایین رو ببین :function (){ var a = 10; var a = "Hello World !" console.log(a); //output : Hello World ! }ولی :function (){ let a = 10; let a = "Hello World !" console.log(a); //output : SyntaxError: Identifier 'a' has already been declared }لازم به ذکره تمامی رفتار های const کاملا مشابه let هستش با این تفاوت که let طی برنامه می تونه مقدار دیگه ای براش جایگذین بشه ولی مقدار const قابل تغییر نیست یعنی :function (){ const a = 10 ; a = "Hello World !" //output : TypeError: Assignment to constant variable. }ولی :function (){ let a = 10 ; a = "Hello World !" console.log(a) //output : Hello World ! }آقا داودامیدوارم مفید باشه :) </article> <article> <h1>مفهوم Hoisting در جاوا اسکریپت</h1> <p>Davood Habbabi — Sun, 24 Jan 2021 16:39:01 +0330</p> دوستان سلاماین Hoisting قصه ما خیلی اسمش بزرگه ولی خودش هیچی نیست بریم ببینیم چی هس اصلا این کد ها رو در نظر بگیرید console.log(a); // output : ReferenceError : a is not definedو این قطعه کد رو :var a; console.log(a); //output : undefinedفرق این ارور ها چیه ؟اولیش a کلا وجود نداره و کلا ReferenceError می ده و توضیح می ده که متغیر یا ثابتی به اسم a وجود نداره ولی توی مورد دوم a وجود داره ولی مقدارش undefined یعنی مقدار دهی نشده برنامه ارور نمی ده و توی کنسول مقدار undefined چاپ می شه خب حالا Hoisting چیه ؟باز می خوام مثال بزنم این تیکه کد رو در نظر بگیرید :console.log(a); var a = 40; // output : undefined اگر کد های جاوا اسکریپت دقیقا خط به خط کامپایل و اجرا بشن توقع داریم مثل مورد اول با ReferenceError مواجه بشیم و کد اجرا نشه و به ارور بخوره ولی نمی خوره :) و مقدار برابر با undefined می شه چرا ؟می دونیم که کد های جاوا اسکریپت یک بار کامپایل و سپس اجرا می شن تعریف متغییر ها حین کامپایل اتفاق می افته و مقدار دهی به متغییر ها حین اجرا یعنی چی ؟یعنی کامپیوتر کد های بالا رو به این صورت می بینیه var a; console.log(a); a = 40;بخاطر همینه که ارور نمی ده و مقدار undefined می شه معنی Hoisting یعنی بالا کشیدن اگر دقت کنید تعریف متغییر ها به بالای برنامه کشیده شد آقا داود امیدوارم مفید باشه :) </article> <article> <h1>ویژگی onError در تگ img</h1> <p>Davood Habbabi — Sat, 23 Jan 2021 12:57:27 +0330</p> لود نشدن عکس ها جز فجایعی هستش که توی سایت ها باهاش به رو به رو می شیم اگر هندلش نکنیم وبسایتمون رو از ریخت می اندازهولی خب همچین بی راه حل نیست و می شه این مشکل رو به نوعی کنترل کرد قطعا همچین تصویری رو توی همه سایت ها دیدین به این تصاویر می گن placeholder در واقع این نوع تصاویر جای خالی تصویر اصلی رو پر کرده (ممکنه تصویر لود نشده باشه یا توی لود به ارور خورده باشه)یه ویژگی عکس ها دارن به اسم این ویژگی کمک می کنه تا ما بفهمیم لود شدن عکس به هر دلیلی ارور خورده و می تونیم از نمایش تصویر شکسته در سایت جلوگیری کنیم این تیکه کد ساده رو ببینید <!DOCTYPE html> <html> <body> function myFunction() { alert('The image could not be loaded.'); } </body> </html>نتیجه این تیکه کد :هر وقت لود عکس به ارور بخوره یه آلرت با متن "The image could not be loaded" به کاربر نمایش داده می شه با همین منطق می تونیم src رو عوض کنیم یا عکس رو حذف کنیم یا هر بلایی سر صفحه بیاریم :)اینم لینک رفرنسMDNw3schoolsامیدوارم مفید باشه </article> <article> <h1>بهترین منبع یادگیری جاوااسکریپت</h1> <p>Davood Habbabi — Sat, 26 Dec 2020 12:42:16 +0330</p> یه سوالی که اغلب پرسیده می شه و کسی که یکم تو جاوا اسکریپت مهارت داشته باشه در واقع هیچ جوابی براش نداره می پرسی چرا ؟ می گم براتبرای هیچ زبانی اغلبا منبع محکمی نیست بخوای بخونی و دیگه توش قوی باشی چون زبان ها در حال آپدیت هستند و شما باید از هر منبعی برای بروز موندن اطلاعاتت استفاده کنیفقط 30 درصد از برنامه نویسی تئوری هستش و بقیش رو تجربه و سرچ خوب می سازه خیلی از موارد تئوری انقدر عمیقه که اغلبا توی کتاب های جامع بهش نمی رسید پس چی کار باید کرد ؟چطوری باید به سطح مطلوب رسید راهکار من به شما اینه که اصلا مهم نیست با چه منبعی پیش می ری (کامل یا ناقص)مهم اینه که شروع کنی و پیش بری اغلبا مطالعه کردن توی هر زمینه ای کنجکاوی هایی رو پیش میاره این کنجکاوی ها رو باید یادداشت کنید در این صورت دو تا حالت وجود داره یا همون منبعی که می خونید جواب شما رو 4 قدم جلوتر می ده یا این که از قلم انداخته و شما باید جای دیگه دنبالش بگردین دیده شده این نوع سوال ها باعث شده فردی ماه ها درگیر منبع خوب برای مطالعه هستش یا رفرنس خاصی می خواد برای یادگیری در آخر منابعی که می تونید باهاش جاوااسکریپت رو مطالعه کنید w3schools.com (website)javascript.info (website)eloquentjavascript.net (website and book)developer.mozilla.org (website)you don't know js (book series)امیدوارم مفید باشه </article> <article> <h1>رفع مشکل صفحه سیاه در vsCode</h1> <p>Davood Habbabi — Tue, 14 Apr 2020 15:39:52 +0430</p> سلام دوستان امروز به یه مشکلی خورم که بعد یکم سرچ و اینا به جوابش رسیدم مشکل آنچنان حاد و خطرناکی نیست ولی خب وقتمو گرفت تا حل بشه بعد از نصب vsCode صفحه کاملا مشکی شد و هر کاری کردم درست نشد (برای مهندس کامپیوتر عموما هر کاری کردم یعنی کامپیوتر رو ریستارت کردم )در واقع چیزی که می دیدم این بودیکم که سرچ زدم این لینکو پیدا کردم :https://github.com/Microsoft/vscode/issues/51701توش نوشته بود برای باز کردنش از این کامند توی ترمینال یا cmd استفاده کنید code --disable-gpuنوشته های دیگر من : رفع ارور esLint , بهترین منبع یادگیری جاوااسکریپت , ویژگی در imgخب این به درد من نمی خورد چون با هر بار برای بازکردن vscode باید از cmd شروع می کردم (دوس دارم با کلیک باز شه ) تازه وقتی با این روش بازش می کردم دیگه ترمینال خود vscode کار نمی کرد بازم سرچ زدم و رسیدم به این لینکhttps://stackoverflow.com/questions/29966747/how-can-i-disable-gpu-rendering-in-visual-studio-codeکه خب مشکلم رو حل کرد جالبه بدونید اون جوابی مشکلمو حل کرد که تیک نخورده بود (پس تو استک اورفلو جواب هایی که تیک نخورده رو هم نگاه بندازید حتما) راه حلی که ارائه شده بود این بود و خب مشکلم رو حل کرد :با روش بالا vsCode رو باز کنید کلید های Ctrl + Shift + P رو بفشاریداون بالا تایپ کنید Preferences: Configure Runtime Arguments (پس از انتخاب یک فایل براتون باز می شه)بعد از باز شدن فایل دستور "disable-hardware-acceleration": true رو به انتهای فایل اضافه کنید خب vscode رو ببندید و دوباره باز کنید :) </article> </main></body></html>

پست‌های انتشارات Gajino FrontEnd

شبه المنت ها و شبه کلاس ها در css

ایجاد پیش‌ نمایش لینک‌ در شبکه های مجازی