تمپلیت انجین یه ابزاره که به ما کمک می‌کنه با قابلیت هایی که داره صفحات Dynamic ( پویا ) بسازیم. یعنی چی ؟ یعنی یه قالب درست می‌کنی که بخش‌های ثابت (مثل ساختار HTML) و بخش‌های متغیر (مثل اسم کاربر) داره. بعد موقع اجرا، اون قسمت‌های متغیر با داده‌های واقعی جایگزین می‌شن.

🧩 پشتیبانی از ساختار منطقی
🔸 امکان استفاده از دستورات شرطی و حلقه‌ها رو فراهم می‌کنه تا بر اساس داده‌های دریافتی، نمایش محتوا به صورت منطقی و متغیر صورت بگیره.

🚀 ایجاد محتوای دینامیک
🔸 با وارد کردن داده‌های متغیر در قالب‌ها، محتوای پویا تولید می‌شه.

📁 وراثت قالب‌ها
🔸 قالب‌های اصلی رو تعریف می‌کنید و توی قالب‌های دیگه ازشون بهره می‌برید، یه جورایی میشه همون لی‌اوت‌ اصلی و قسمت‌های شیر مثل Header و Footer، که باعث کم شدن کدهای تکراری میشه.

🔃 فرمت‌دهی و فیلتر دیتا
🔸 میتونید داده‌ها رو قبل از نمایش فرمت‌دهی کنید با قابلیت‌های خود تمپلیت انجین، مثل تنظیم قالب تاریخ یا اعداد.

🗃️ پشتیبانی از داده‌های پیچیده
🔸 امکان کار با داده‌های پیچیده مثل آرایه‌ها و objectها رو می‌ده تا اطلاعات به شکل بهتری نمایش داده بشه.

شما داخل قالبی که نوشتید، جای متغیرها رو مشخص می‌کنی وقتی کد اجرا می‌شه، تمپلیت انجین این قسمت‌ها رو با دیتای واقعی پر می‌کنه و برای اضافه کردن کدهای منطقی مثل حلقه‌ها یا شرط‌ها، باید از سینتکس مخصوص خود اون تمپلیت انجین استفاده کنی.

مثلاً توی EJS، برای حلقه نوشتن می‌تونی🔻

<% items.forEach(item => { %>
  <li><%= item %></li>
<% }) %>

Node.js : EJS ~> Pug ~> Handlebars

Python : Jinja2 ~> Mako

PHP : Twig ~> Blade

Java : Thymeleaf ~> FreeMarker

#WhatsThat

𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣

🚀 @coolycode

روی ایکون ستینگ پایین کلیک کن ⚙️

روی گزینه Keyboard Shortcuts بزن ⌨️

توی قسمت سرچ بنویس 🔻

Transform to Uppercase‌‌ ‌ ‌ ‌ ‌ ‌

حالا روی ستون Keybinding کلیک کن 🖱️

شورت کات مد نظرت رو وارد کن

در نهایت کلید Enter رو بزن ✅

بوم، الان اگر هر متنی رو سلکت کنی کافیه فقط شورت‌کاتی که ست کرده بودی رو بزنی تا اون متن رو UPPERCASE کنه 💥

#tips | #tricks

𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣

✨ تاحالا شده فکر کنی که راجب پایتون و جاوااسکریپت و ... چیزی بلد نیستی؟

✨ فکر کنی که همیشه یه چیزی میلنگه انگار یه چیزی کمه؟

تیلویند درواقع یه فریمورک CSS‌ای سبک برای طراحی سایته که به جای نوشتن کدهای جداگانه‌ی CSS، از کلاس‌های آماده استفاده می‌کنی یا به اصطلاح همون utility ها.

مثلاً به جای اینکه توی فایل CSS بنویسی دکمه پس‌زمینه آبی و متن سفید داشته باشه، فقط توی HTML کلاس‌های bg-blue-500 و text-white رو اضافه می‌کنی.

یکی از مهم ترین قابلیت های تیلویند این مورده، چون شما میتونید کلاس‌های سفارشی، تم‌ها، و حتی پلاگین‌های اختصاصی خودتون رو بسازید.

تیلویند فقط کلاس‌هایی رو که در پروژه استفاده شده‌اند، در خروجی نهایی تولید میکنه (با استفاده از PurgeCSS). این باعث میشه که فایل‌های CSS نهایی بسیار کوچک‌تر از فریمورک‌هایی مثل Bootstrap باشن.

در مقایسه با فریمورک‌هایی که نیاز به یادگیری سیستم گرید و کامپوننت‌های از پیش ساخته‌شده دارند، یادگیری Tailwind آسون‌تره، مخصوصاً برای کسایی که با CSS آشنایی خوبی دارن، ولی خب اولش یه تایم خوبی رو ازتون میگیره تا خوب و دقیق تر باهاش آشنا بشید.

چون Tailwind کامپوننت‌های آماده (مثل دکمه، فرم، مودال) ارائه نمیده، شما باید این موارد رو خودتون بسازید و این میتونه زمانگیر باشه، مگر اینکه از یک کتابخانه‌ی مبتنی بر Tailwind مثل DaisyUI یا Flowbite استفاده کنید.

تیلویند بر خلاف برخی از لایبرری ها، یک سیستم گرید آماده نداره ولی با کلاس‌های responsive utility-first مثل sm:, md:, lg: این کار کاملاً امکان‌پذیر است، صرفا شیوه‌ اینکار متفاوت تره و خودتون باید انجامش بدید.

با وجود انعطاف‌پذیری بالا، در برخی موارد خاص، ممکنه که Tailwind قادر به پشتیبانی از برخی طراحی‌های خیلی پیچیده نباشه و شما مجبو به کدنویسی مستقیم با CSS بشید.

#CSS | #Tailwind

𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣

#fun

𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣

#website

🚀 @CoolyCode

همونطور که در جریان هستین؛ تیلویند و بوت استرپ دوتا از محبوب ترین فریمورک های css هستن که خیلیا وقتی میخوان یه css فریمورک انتخاب کنن؛ واسه انتخاب یکی از این دوتا توی دوراهی میمونن.

البته که توی چند سال اخیر استفاده از تیلویند افزایش بسیار چشم گیری داشته و محبوبیت بوت‌استرپ خیلی کمتر شده و ما میخوایم توی این پست این مسئله رو به طور کامل باز کنیم و ببینیم چه مزیت ها و معایبی دارند هردوشون

مزایا ✅
➊ قابلیت کاستومایز سازی بسیار بالا
➋ فوق‌العاده سبک و بهینه، بخاطر ساختارش
➌ یادگیری نسبتاً ساده
➍  پروسه استایل‌دهی سریع‌.

معایب ❌
➊ محدودیت‌ در طراحی‌های پیچیده
➋ جدا نبودن استایل ها و HTML، که میتونه باعث شلوغ شدن کد‌ها بشه، و خب این مورد توی بوت‌استرپ کمتر دیده میشه چپن کامپوننت های از پیش اماده داره

مزایا ✅
➊ وجود کامپوننت های از پیش آماده
➋ وجود grid system برای ریپانسیو سازی

معایب ❌
➊ شباهت زیاد به بقیه سایت هایی که از بوت‌استرپ استفاده میکنند و یونیک نبودن
➋ نیاز مند تایم بیشتر برای یونیک کردن کامپوننت ها
➌ حجم بالا و تاثیر منفی بر روی پرفرمونس، به دلیل عدم وجود بهینه سازی های مناسب

البته مورد سوم توی بوت‌استرپ ۵ بهتر شده 🔺

از این مقایسه میشه نتیجه گرفت که برای توسعه پروژه هایی که دیزاین منحصر به فردی دارن و در مقیاس بزرگ تری هستن، بهتره که از Tailwind استفاده بشه؛ ولی برای پروژه هایی که تایم کمی دارن و یا دیزاین و پرفورمنس در اولویت نیست، بوت استرپ هم میتونه انتخاب خوبی باشه ✅

#framework #css #tailwind

𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣

‍‍‍‍‍‍‍‍‍‍<div class="group">
  هاور کن ببین چی میشه!
  <div class="opacity-0 group-hover:opacity-100 transition">
    🎉 سورپرایز!
  </div>
</div>

توی کد بالا وقتی موس روی div والد با کلاس group میره، div فرزند که به طور پیش‌فرض با opacity-0 مخفی شده، به آرامی توسط کلاس group-hover:opacity-100 نمایان میشه و محتویاتش رو نشون میده.

و برای برای ایجاد افکت نرم از transition استفاده کردیم که میتونید خودتون بیشتر راجبش بخونید. ( more )

#tips | #tricks | #tailwind

𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣

ولاگش رو‌هم ضبط کردیم که میتونید ببینید🔻

https://t.me/coolycode/16‌ #event

http://FrontChapter.ir/event

𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣

#tips

🚀 @coolycode

باز کردن سریع هر فایل
با این میانبر می‌تونی خیلی راحت اسم فایل موردنظرت رو تایپ کنی و مستقیماً اون رو باز کنی.

کامنت/آنکامنت کردن یک خط
این ترکیب بهت کمک می‌کنه که یک خط رو به‌سرعت کامنت یا آنکامنت کنی، بدون نیاز به تایپ دستی //.

جابه‌جا کردن یک خط به بالا یا پایین
اگر بخوای بدون کپی/پیست کردن، یک خط رو بالا یا پایین ببری، این میانبر خیلی کاربردیه.

حذف خط جاری
با این ترکیب می‌تونی کل خطی که نشانگر روشه رو بدون انتخاب حذف کنی.

نمایش یا مخفی کردن سایدبار
با این میانبر سریع سایدبار رو باز و بسته کن تا فضای بیشتری برای کدنویسی داشته باشی.

فعال کردن IntelliSense برای پیشنهادات کد
اگر در حال کدنویسی هستی و پیشنهادهای خودکار نمایش داده نشدن، این میانبر کمک می‌کنه دوباره اون‌ها رو ببینی.

جستجو در کل پروژه
این میانبر بهت امکان می‌ده که در کل فایل‌های پروژه دنبال متن یا کدی خاص بگردی.

انتخاب بعدیِ کلمه‌ای که هایلایت شده
اگه بخوای چند کلمه مشابه رو یکی‌یکی انتخاب کنی، این ترکیب فوق‌العاده‌ست.

انتخاب تمام موارد مشابه در متن
این میانبر همه‌ی نمونه‌های یک کلمه در فایل رو یکجا انتخاب می‌کنه تا بتونی همه رو هم‌زمان تغییر بدی.

باز کردن Command Palette
با این ترکیب می‌تونی به همه‌ی دستورات و قابلیت‌های VS Code دسترسی داشته باشی.

#vscode #tricks

𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣