فرانت کد | FrontCode @frontcode01 Channel on Telegram

فرانت کد | FrontCode

@frontcode01


🍕 اینجا یه اسلایس کد دور هم میزنیم 😋
🔷 مقالات ، سورس کدها ، آموزش ها ، سرگرمی و فان
🔰 پروژه پذیرفته میشود

اینستاگرام 👇
Instagram.com/frontcode01

ارتباط :
@frontcode_support

فرانت کد | FrontCode (Persian)

FrontCode یک کانال تلگرامی است که برای علاقمندان به برنامه نویسی و توسعه نرم افزارها تاسیس شده است. در این کانال شما می‌توانید به اشتراک گذاری مقالات، سورس کدها، آموزش ها، سرگرمی و فان، و همچنین پروژه های مختلف در حوزه فرانت اند و برنامه نویسی را مشاهده کنید. همچنین این کانال امکان پذیرفتن پروژه های مختلف را فراهم می کند. اگر شما هم به دنبال یادگیری و به اشتراک گذاری محتوای مرتبط با فرانت اند و برنامه نویسی هستید، به کانال FrontCode بپیوندید. برای ارتباط با مدیران کانال و پشتیبانی، می توانید به این آیدی مراجعه کنید: @frontcode_support

فرانت کد | FrontCode

07 Jan, 14:11


🔺 یه چیزی داریم تو #CSS به اسم scroll snapping که وقتی اسکرول میکنیم به المنتی، به نوعی پوزیشن اسکرول اسنپ(قفل) میشه روی اون المنت

▫️ با پراپرتی های scroll-margin میتونید پوزیشن این اسنپ شدن رو یکمی تغییر بدید

🆔 @frontcode01 | 👩‍💻🧑‍💻

فرانت کد | FrontCode

29 Dec, 14:59


🎉 جدید ترین یونیت های CSS:

- یونیت lh (مخفف line height) که دقیقا اندازه ارتفاع خط تکست میشه(به عکس توجه کنید: ارتفاع دایره صورتی که مقدارش 1lh داده شده دقیقا با ارتفاع متن کناریش برابره)

- یونیت rlh (مخفف root line height) که مشابه lh هستش منتها بجای line-height خود المنت، بر حسب line-height المنت روت <html> کار میکنه

پ.ن: نسبت این دو تا بهم مثل نسبت em و rem هستش 🙃


🆔 @frontcode01 | 👩‍💻🧑‍💻

فرانت کد | FrontCode

23 Dec, 07:30


⚡️ یکی از راه هایی که میتونید در #TypeScript برای فانکشن هاتون overload تعریف کنید با interface هستش. در این مثال، فانکشن navigate ما دو حالت کلی داره:
۱- فقط یه عدد میگیره مثل منفی ۱ و یه برمیگرده به صفحه قبل
۲- آدرس صفحه جدید رو همراه با یه سری آپشن میگیره
اینجا میتونیم بجای استفاده از | برای تعریف تایپ ها(که یک سری مشکلات هم ایجاد میکنه)، با یک interface دو حالت کلی برای فانکشنمون در نظر بگیریم و به خوبی این قضیه رو هندل کنیم

🆔 @frontcode01 | 👩‍💻🧑‍💻

فرانت کد | FrontCode

15 Dec, 17:29


با کمک Array destructuring میتونیم بدون استفاده از متغیر سوم ، مقادیر دو متغیر رو جا به جا کنیم 🫰🏼

پ.ن: قبل ES6 باید یه وریبل سومی هم تعریف میکردیم 🙃

🆔 @frontcode01 | 👩‍💻🧑‍💻

فرانت کد | FrontCode

10 Dec, 19:14


⚡️ با این ابزار میتونید حالت های مختلف کیبورد های موبایل برای اینپوت هایی که میسازید رو ببینید و با نکاتی که خود ابزار در مورد autocomplete بهتون میگه، تجربه کاربری بهتری خلق کنید 🔥

◽️ https://better-mobile-inputs.netlify.app

🆔 @frontcode01 | 👩‍💻🧑‍💻

فرانت کد | FrontCode

04 Dec, 15:30


⚡️ معرفی nullish operator:
این اوپراتور تنها در صورتی که مقدار سمت چپش null یا undefined باشه، مقدار سمت راستش رو ریترن میکنه و مشکل or operator یا همون || رو با خود false نداره
null || 2 // 2
null ?? 2 // 2

false || 2 // 2
false ?? 2 // false


🆔 @frontcode01 | 👩‍💻🧑‍💻

فرانت کد | FrontCode

29 Nov, 14:30


⚡️ قبلا اگه میخواستید توی یه صفحه ای به یه قسمت خاصی از صفحه لینک بدید که وقتی لینک باز شد، اسکرول بخوره به اون قسمت، باید تو اون صفحه یه تگ a قرار میداشت تا به id اون لینک بدید:

<a href="#section">Section</a>


ولی به وسیله text fragments میتونید بدون احتیاج به تگ a به هر قسمت از متن که میخواید لینک بدید. این تکنیک الان داره موقع سرچ کردن تو گوگل استفاده میشه 😁

<a href="page.html#:~:text=yourText">Highlight text</a>


🔺 جدول ساپورت Caniuse


🆔 @frontcode01 | 👩‍💻🧑‍💻

فرانت کد | FrontCode

19 Nov, 18:40


⚡️ یکی از راه‌هایی که میتونید تشخیص بدید یک فانکشن async هست یا نه!

🆔 @frontcode01 | 👩‍💻🧑‍💻

فرانت کد | FrontCode

14 Nov, 07:40


🎉 با سینتکس جدید رنگ های CSS، میتونید بدون استفاده از rgba و با خود rgb پراپرتی چهارم که همون مقدار alpha و opacity رنگ هستش رو بدید!😍

🔺 جدول ساپورت Caniuse

🆔 @frontcode01 | 👩‍💻🧑‍💻

فرانت کد | FrontCode

07 Nov, 08:32


⚡️ از تنظیمات DevTools کروم میتونید تیک CSS Overview رو بزنید تا یه تب جدید تو DevTools اضافه بشه که بتونید باهاش اطلاعاتی از نوع استایل‌ها، رنگ‌ها، فونت‌ها و استایل های CSSی که تعریف کردید و استفاده نکردید،‌ بدست بیارید

🆔 @frontcode01 | 👩‍💻🧑‍💻

فرانت کد | FrontCode

01 Nov, 08:10


🔺 با مدیا کوئری hover: none میتونید برای دیوایس هایی که از حالت هاور پشتیبانی نمیکنن (مثلا فقط با تاچ هستن مثل گوشی های موبایل) استایل مخصوص خودشون رو بدید.

🆔 @frontcode01 | 👩‍💻🧑‍💻

فرانت کد | FrontCode

26 Oct, 11:51


⚡️ ۴ نکته مفید HTML:

- تصویر اول: یک meta تگ داریم که باهاش میتونید تعیین کنید صفحه هر n ثانیه یکبار رفرش بشه

- تصویر دوم: با meta تگ theme-color میتونید به آدرس‌بار بالای مرورگر های موبایل (مخصوصا کروم) رنگ دلخواهتون رو بدید

- تصویر سوم: اینپوت ها میتونن type با مقدار color داشته باشن، که اگه یوزر روشون بزنه، color picker نیتیو دستگاه باز میشه تا رنگ رو انتخاب کنه

- تصویر چهارم: خود HTML یک المنت نیتیو dialog داره که باهاش میتونید مودال ها یا پرامپت ها رو نمایش بدید!

🆔 @frontcode01 | 👩‍💻🧑‍💻

فرانت کد | FrontCode

20 Oct, 07:40


🔺 میدونستید برای کامیت کردن میتونید از فلگ m چندبار استفاده کنید تا به کامیتتون پاراگراف اضافه کنید؟ :)

🆔 @frontcode01 | 👩‍💻🧑‍💻

فرانت کد | FrontCode

14 Oct, 06:58


⚡️ این کدی که تو تصویر می‌بینید جاواسکریپته! میتونید با این سینتکس برای لوپ‌هاتون label(تیتر) مشخص کنید و کاربردشم موقع break کردن هستش که میتونید تعیین کنید که از کدوم لوپ(ها) خارج بشه.

پ.ن: اگر کسی این کدو بهم نشون میداد و میگفت جاواسکریپته، میگفتم مشکل سینتکس داره. واقعا ۱ درصد هم فکر نمیکردم همچین سینتکسی داشته باشیم... واقعا چیزی نمیدونیم 🤷🏻‍♂️

🆔 @frontcode01 | 👩‍💻🧑‍💻

فرانت کد | FrontCode

09 Oct, 09:01


🔺 میدونستید تو اینپوت با تایپ number میتونید حرف "e" رو تایپ کنید؟ مخفف exponent و نشون دهنده توان عدد هستش!

✍️ پ.ن: ماشین حسابا هم اعداد بزرگ رو این مدلی نشون میدن

🆔 @frontcode01 | 👩‍💻🧑‍💻

فرانت کد | FrontCode

02 Oct, 14:20


🚀 عکسایی که با جاواسکریپت(مثلا به شکل کامپوننت های React) لود میشن، کمی دیرتر تشخیص داده میشن واسه همین زمان لودشون میره بالا. میتونید با لینک preload، عکس‌ها رو preload کنید تا عملا سریعتر لود بشن

🆔 @frontcode01 | 👩‍💻🧑‍💻

فرانت کد | FrontCode

26 Sep, 07:52


⚡️ هر وقت ما یک async کنار یک فانکشن بگذاریم، شاید اون فانکشن کلی پرامیس را در درون خودش هندل کند، ولی در انتها خودش هم یک پرامیس است و ترتیب متفاوتی نسبت به فانکشن های عادی در callstack و callback queue خواهد داشت.

🆔 @frontcode01 | 👩‍💻🧑‍💻

فرانت کد | FrontCode

18 Sep, 14:47


⚡️ یه چیز جالب وجود داره و اینه که میشه از ایموجی ها به عنوان سلکتور CSS استفاده کرد :)

🆔 @frontcode01 | 👩‍💻🧑‍💻

فرانت کد | FrontCode

13 Sep, 05:49


100000000 امین روز سال ، روز برنامه نویس مبارک ❤️🎊

🆔 @frontcode01 | 👩‍💻🧑‍💻

فرانت کد | FrontCode

08 Sep, 15:30


🔻 با اتریبیوت download که Html 5 معرفی کرد ، میتونیم نام فایل های دانلود رو کاستومایز کنیم 🔥

🆔 @frontcode01 | 👩‍💻🧑‍💻

فرانت کد | FrontCode

04 Sep, 07:00


یکبار برای همیشه سایز استاندارد breakpoint ها رو یاد بگیریم.

🆔 @frontcode01 | 👩‍💻🧑‍💻

فرانت کد | FrontCode

29 Aug, 07:41


وقتی وسط کار کردن میخوای مخ بزنی 🤦🏻‍♂️

🆔 @frontcode01 | 👩‍💻🧑‍💻

فرانت کد | FrontCode

25 Aug, 09:31


🔰 کدت رو بنویس و دیگه نگران تست نوشتن نباش، من می‌نویسم برات!
این شعار هوش مصنوعی جدیدی هستش به اسم Celp که در مقام یک دستیار تمام عیار در کنارتونه و دیگه شما رو از شر دغدغه تست نوشتن‌های روزمره راحت می‌کنه

◽️https://www.celp.ai

🆔 @frontcode01 | 👩‍💻🧑‍💻

فرانت کد | FrontCode

18 Aug, 06:40


سایت roadmap.sh خوب بود، خوب تر هم شد. اخیرا شروع کرده به تعریف کردن پروژه های مرتبط با هر مسیر به صورت سطح بندی شده

پ‌ن: این سایت نقشه‌راه هر استکی که بخواین رو بهتون نشون می‌ده.

🆔 @frontcode01 | 👩‍💻🧑‍💻

فرانت کد | FrontCode

13 Aug, 13:19


کلوچه‌های اینترنتی🍪
مجبور نیستید همه چیز رو ترجمه کنید 🤦🏻‍♂️

🆔 @frontcode01 | 👩‍💻🧑‍💻

فرانت کد | FrontCode

02 Aug, 05:39


📚 هروقت با خودتون گفتید که دیره برم چیز جدید یاد بگیرم
یه سر به چنل این خانومه بزنید.
اینجا داره ffmpeg رو معرفی میکنه با gui های مختلفش تو لینوکس 🔥

🆔 @frontcode01 | 👩‍💻🧑‍💻

فرانت کد | FrontCode

26 Jul, 08:41


⚡️ چندتا راه باحال برای اینکه falsy value ها رو از یک آرایه حذف کرد.

🆔 @frontcode01 | 👩‍💻🧑‍💻

فرانت کد | FrontCode

15 Jul, 17:00


🔺 یه هم‌وطن عزیز اومده با صدای جنگ‌های صلیبی برای تایپ‌اسکریپت اکستنشن نوشته 😅
وقتی یه تایپی رو اشتباه اساین کنید ویس "اینجا قرار نمی‌گیرید” پلی می‌شه :))


🆔 @frontcode01 | 👩‍💻🧑‍💻

فرانت کد | FrontCode

12 Jul, 07:41


دیس و دیس بک فرانت و بک 🚨

🆔 @frontcode01 | 👩‍💻🧑‍💻

فرانت کد | FrontCode

06 Jul, 07:47


🔰 کاربرد use در React 19

🆔 @frontcode01 | 👩‍💻🧑‍💻

فرانت کد | FrontCode

29 Jun, 21:20


برای دسترسی و راحتی کاربران موبایل ، از type مخصوص برای input ها استفاده کنیم 👌

🆔 @frontcode01 | 👩‍💻🧑‍💻