رقصنده با کد (و غیره)

📌css pseudo-classes ✅یک css pseudo-classes یک کلمه کلیدی است که به یک selector اضافه میشود که یک وضعیت خاصی از المانهای انتخاب شده را مشخص کند. نحوه استفاده از این روش به صورت زیر است: selector:pseudo-class { property: value; } ✅با استفاده از pseudo-classes این امکان برای طراحان وب فراهم میشود که یک استایل خاص را برای شرایط خاصی از یک المان اعمال کنند. به عنوان مثال تغییر رنگ دکمه هنگام کلیک بر روی آن. ✅لیست کامل pseudo-classes در آدرس وب سایت زیر معرفی شده است. https://www.w3schools.com/css/css_pseudo_classes.asp @alithecodeguy

📌overflow in css ✅ویژگی overflow محتوای یک المان را زمانیکه از ناحیه تعیین شده بزرگتر است و درواقع دچار سرریز شده است کنترل مینماید که آن محتوا چگونه نمایش داده شود. ✅با استفاده از این ویژگی تعیین میشود که محتوای المان موردنظر بریده شود یا نوار اسکرول اضافه شود. ✅این ویژگی دارای چهار مقدار میباشد که عبارتند از: 🔹visible این ویژگی همیشه به صورت پیشفرض فعال است و محتوا خارج از کادر تعیین شده نمایش داده میشود. 🔹hidden در صورت اضافه بودن محتوا از چهارچوب المان موردنظر، محتوای سرریزشده invisible میشود و به هیچ عنوان قابل نمایش نمیباشد. 🔹scroll در صورت اضافه بودن محتوا از چهارچوب المان موردنظر، یک نوار اسکرول عمودی و افقی برای مشاهده محتوای invisible شده، نمایش داده میشود 🔹auto مانند scroll است اما نوار اسکرول را در صورت نیاز اضافه مینماید. https://developer.mozilla.org/en-US/docs/Web/CSS/overflow @alithecodeguy

📌position property in css ✅ویژگی position می تواند به شما در دستکاری مکان یک المان کمک کند. این ویژگی دارای 5 مقدار میباشد که عبارتند از: 🔹static این مقدار به صورت پیشفرض تعیین شده است و مکان المان همیشه با توجه به رفتار مروگر تعیین میگردد. 🔹relative این مقدار رفتار المان را باتوجه به المان parent اصلی تعیین مینماید و با استفاده از مقادیر top، bottom، left و right محل المان تعیین میگردد. 🔹absolute این مقدار رفتان المان را با توجه به نزدیکترین parent تعیین مینماید و اگر parent نداشته باشد از body به عنوان parent خود استفاده مینماید. 🔹fixed این مقدار تعیین مینماید که المان مورد نظر در حالت اسکرول صفحه ثابت بماند و position آن تغییر نکند. 🔹sticky این مقدار تعیین زمانی استفاده میشود که زمان اسکرول صفحه موقعیت المان تغییر نکند و در صفحه نمایش نشان داده شود. https://developer.mozilla.org/en-US/docs/Web/CSS/position @alithecodeguy

📌عبارات با قاعده ( Regular Expressions ) در جاوا اسکریپت ✅عبارات با قاعده در جاوااسکریپت مجموعه کاراکتر هایی هستند که یک الگوی جستجو را تشکیل می دهند که میتوانند شامل یک کاراکتر یا یک الگوی پیچیده تر باشند. ✅ نحوه استفاده از عبارات باقاعده به این صورت است: /pattern/modifiers; ✅عبارات منظم دارای متدهایی میباشند که با استفاده از این متدها برنامه نویسان میتوانند از عباراتی که ایجاد کرده اند در کدهای خود استفاده کنند. مانند متد test، replace، search و ... . ✅از این روش می توان برای جستجوی متن در جاوا اسکریپت و عملگر های جایگزین کردن متن استفاده کرد. ✅برای آشنایی بیشتر پیشنهاد میشود وب سایت معرفی شده را مطالعه نمایید. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions @alithecodeguy

نکته خوب تیلویندی #tailwind

📌تغییر از فونت با استفاده از google fonts ✅درواقع google fontsیک وبسایت کاربردی و جامع از انواع فونتها میباشد که طراحان سایت میتوانند از تمام فونتهای موجود د راین سایت برای تغییر ستایل متون در وبسایت خود استفاده نمایند. ✅به دو روش میتوانید از فونتهای موجود دراین سایت استفاده کنید: 🔹از طریق import کردن در صفحه css 🔹از طریق link کردن در صفحه html ✅نحوه استفاده از هر دو روش در ویدئو آموزش داده شده است. https://fonts.google.com/ @alithecodeguy

📌z-index css ✅از z-index برای المانهایی استفاده میشود که روی هم قرار میگیرند و باهم تداخل دارند و با استفاده از این ویژگی ترتیب قرارگیری المانها روی هم مشخص میشود. ✅این property یک عدد صحیح را به عنوان مقدار قبول میکند که شامل اعداد مثبت، منفی و صفر میباشد. https://developer.mozilla.org/en-US/docs/Web/CSS/z-index @alithecodeguy

سوال سر صبحی 😬 آیا در js میتونیم روی آرایه ها از for...in استفاده کنیم؟ و‌اگر میشه استفاده کرد چه فرقی با for...of داره؟

📌CSS Pseudo-elements ✅یک کلمه کلیدی است که به یک selector اضافه میشود و به برنامه نویس این امکان را میدهد که تنها قسمت خاصی از المانها را تغییر دهد. ✅برای استفاده از این روش کافیست اول المان مورد نظر را انتخاب کرده و کلمه کلیدی مورد استفاده را پس از المان بیاورید و در نهایت از نحوه استایل دهی در css استفاده نمایید. ✅لیست pseudo-elements را میتوانید در آدرس زیر مشاهده نمایید. https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements @alithecodeguy

دورهمی آنلاین و رایگان Tailwind3 جلسه از طریق اسکایپ پنج شنبه ۱۴ بهمن ساعت ۱۸ لینک اسکایپ : https://join.skype.com/GvwuGHpgGou3

📌متد ()includes در آرایه ✅این متد مشخص میکند که یک آرایه آیا مقدار مشخصی درمیان ورودی های خود دارد یا نه و مقدار true و false را برمیگرداند. ✅برخی از موارد کاربرد این متد شامل جست و جو در متن(رشته ها)، جست و جو در آرایه ها و موارد مشابه میباشد. ✅این متد در متون به حروف کوچک و بزرگ حساس است. ✅این متد دو پارامتر ورودی میگیرد که اولین پارامتر مقداری است که قصد جست وجو در آرایه را داریم و پارامتر اجباریست. پارامتر دوم نیز index شروع جست و جو است که مقدار اختیاری است. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes @alithecodeguy

📌تگ picture در HTML ✅از این تگ زمانی میتوانید استفاده کنید که قصد دارید برای سایزهای مختلف از مرورگر، از چندین تصویر متفاوت استفاده نمایید. ✅تگ picture شامل یک یا چندین تگ source میباشد و همچنین در داخل این تگ لازم است از چندین attribute استفاده کنید که شامل media، src و srcset است. https://www.w3schools.com/html/html_images_picture.asp @alithecodeguy

دوستان گرامی پستها رو ، من (علی) و خانم پناهی میذاریم. اگر سوالی براتون پیش اومده به نویسندش دقت کنید و اگر از خود نویسندش بپرسید احتمالا سریعتر نتیجه بگیرید. برای این پنج شنبه دورهمی tailwind 3 رو داریم. جمعه دو هفته دیگه هم دوره فشرده جدید داریم. بنراشو میذارم. امشب یا فردا هم در مورد عقد قرارداد و سفته و اینجور مسایل ویدیو میسازم. اگر نظر خاصی در موردش داریم ممنون میشم کامنت کنید

📌CSS Box Model ✅تمام المانهای HTML را می توان به عنوان باکس در نظر گرفت و در css زمانیکه از دیزاین و layout صحبت میکنیم درواقع از box model استفاده میکنیم. ✅هر css box model به صورت یک جعبه‌ای است که در اطراف المانهای HTML قرار میگیرد. این box model از 4 قسمت مختلف تشکیل شده است. 🔹Content بخشی است که متن و تصاویر قرار میگیرند. 🔹Padding شامل یک ناحیه و فضا اطراف content است. 🔹Border حاشیه ای است که اطراف padding و content قرار میگیرد. 🔹Margin شامل یک ناحیه و فضا خارج از border است. https://www.w3schools.com/css/css_boxmodel.asp @alithecodeguy

📌CSS Box Model ✅تمام المانهای HTML را می توان به عنوان باکس در نظر گرفت و در css زمانیکه از دیزاین و layout صحبت میکنیم درواقع از box model استفاده میکنیم. ✅هر css box model به صورت یک جعبه‌ای است که در اطراف المانهای HTML قرار میگیرد. این box model از 4 قسمت مختلف تشکیل شده است. 🔹Content بخشی است که متن و تصاویر قرار میگیرند. 🔹Padding شامل یک ناحیه و فضا اطراف content است. 🔹Border حاشیه ای است که اطراف padding و content قرار میگیرد. 🔹Margin شامل یک ناحیه و فضا خارج از border است. https://www.w3schools.com/css/css_boxmodel.asp @alithecodeguy

📌دستورات Break و Continue در جاوا اسکریپت ✅دستورات Break و Continue در جاوا اسکریپت اجازه می دهد اجرای حلقه های تکرار را کنترل کرده و قبل از اینکه شرط اجرای حلقه نقض شود تا حلقه پایان یابد، حلقه را پایان داده و یا مجددا اجرا شود. این دستورات کنترل شما را بر حلقه های تکرار for و while بیشتر می کند. ✅دستور Break باعث شکستن حلقه و خروج از حلقه می شود. ✅دستور Continue از اجرای کدهای بعد از Continue جلوگیری میکند و حلقه از ابتدا اجرا می شود. @alitehcodeguy

📌خروجی در جاوااسکریپت ✅در جاوااسکریپت میتوانید به چهار روش داده ها را در خروجی نمایش دهید: 🔹نمایش خروجی در تگهای html با استفاده از innerHTML 🔹نمایش خروجی در صفحه وب با استفاده از ()document.write. این دستور معمولا برای تست خروجی مورد استفاده قرار میگیرد. 🔹نمایش به صورت پیغام در یک alert box با استفاده از ()window.alert 🔹گرفتن خروجی در کنسول مرورگر با استفاده از ()console.log. از این روش معمولا برای خطایابی استفاده میشود. @alithecodeguy

📌 متد ()concat ✅متد concat برای الحاق دو آرایه بهم مورد استفاده قرار میگیرد و یک آرایه جدید برمی‌گرداند. 📌متد ()slice ✅ متد slice دو آرگومان می‌گیرد که این آرگومانها index آرایه هستند و برای کپی کردن آرایه از index آغازین تا index پایانی مورد استفاده قرار میگیرد. اولین آرگومان index است که کپی کردن آیتم‌ها را از آن شروع می‌کنیم. دومین آرگومان index است که کپی آیتم‌ها را تا آن انجام می‌دهیم. در نهایت این متد یک آرایه جدید برمی‌گرداند که آیتم‌های آرایه اصلی از ایندکس آغازین تا ایندکس پایانی در آن کپی شده‌ است. @alithecodeguy

📌Css Text ✅ در css پروپرتی های بسیاری برای قالب بندی متن وجود دارد که هنگام استایل دهی در صفحات وب، تعداد زیادی از این ویژگی ها مورد استفاده قرار میگیرد. ✅ پروپرتی های متن به صورت زیر دسته بندی میشود: 🔹Text Color برای استفاده از رنگ بندی در متن استفاده میشود 🔹Text Alignment برای تراز بندی متن در صفحات وب استفاده میشود 🔹Text Decoration برای حذف یا اضافه کردن decoration برای متون در صفحات وب استفاده میشود ✅ برای آشنایی با ویژگی های بیشتر و همچنین نحوه استفاده از این ویژگی ها سایت زیر را مطالعه کنید. https://www.w3schools.com/css/css_text.asp @alithecodeguy

📌font awesome ✅یکی از راه های اضافه کردن آیکون به صفحات وب استفاده از font awesome میباشد. با استفاده از این روش میتوانید به جای تهیه و استفاده از تصاویر مختلف در وبسایت خود از آیکونهای آماده در این فونت استفاده کنید. به این دلیل که این تصاویر به صورت برداری هستند می‌توانید آیکونها را بدون تغییر در کیفیت نمایش آنها، در هر اندازه‌ای به کار ببرید. ✅همچنبین می‌توانید به کمک CSS میتوانید، رنگ، اندازه و موارد دیگری را که از این طریق قابل تنظیم کردن است روی آیکونها اعمال کنید. ✅برای استفاده رایگان از font awesome میتوانید از دو روش استفاده کنید. روش اول دانلود آیکونها از وب سایت میباشد و روش دوم ایجاد اکانت و لینک کردن آدرسی که پس از ایجاد اکانت در اختیار کاربر قرار میگیرد. @alithecodeguy