𝗖𝗢𝗢𝗟𝗬 𝗖𝗢𝗗𝗘 | کولی کد
1.7K subscribers
220 photos
81 videos
8 files
362 links
اینجا قراره برنامه نویسی رو خیلی ساده و با حال خوب یاد بگیریم 🚀

📺 𝗬𝗢𝗧𝗨𝗕𝗘 : https://rb.gy/37siuq

📷 𝗜𝗡𝗦𝗧𝗔𝗚𝗥𝗔𝗠 : https://rb.gy/jmz946

👥 𝗚𝗥𝗢𝗨𝗣 : @CoolyCoder

𝗔𝗗𝗦 : @ADS_CoolyCode

✌️ 𝗣𝗩 : @CoolyCode_Support
Download Telegram
Media is too big
VIEW IN TELEGRAM
#tools #website

● معرفی وبسایت Bundlephobia ●

یکی از مهم ترین مسائلی که باید بهش توجه بشه داخل پروژه های جاوااسکریپتی استفاده درست از لایبرری‌های مختلف هستش، چون که به شدت روی پرفورمنس سایت شما تاثیر گذار هستند ⚠️

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

Channel | YouTube | Instagram
4👍21
#tools #website #css #grid #tailwind


● با این سایتا لنگ گرید نمیمونی ●

وقتی با گرید در CSS کار می‌کنیم، خیلی پیش میاد که بعضی از پروپرتی های مهم رو فراموش کنیم و نتونیم طرحی که در ذهن خودمون داریم رو به درست ایجاد کنیم 🫠

میخوام سه تا سایت جالب بهتون معرفی بکنم که میتونید خیلی ساده با UI خوبی که براتون آماده کردند Grid مد نظر خودتون رو پیاده سازی کنید 😎

1️⃣ https://cssgrid-generator.netlify.app

2️⃣ https://grid.layoutit.com

3️⃣ https://visual-grid-generator.netlify.app

اگر هم دوست داشتید به طور کامل تر در مورد Grid داخل CSS اطلاعات کسب کنید میتونید از طریق داکیومنت زیر اقدام کنید 📄

https://learncssgrid.com


البته هنوز تموم نشده، اگر از tailwind استفاده میکنید میتونید از سایت tailwindgen استفاده بکنید که میاد گرید دلخواهتون رو با استفاده از class های tailwind براتون ایجاد میکنه و با فرمت HTML یا JSX خروجی رو براتون می‌فرسته 🤩 🔥

https://www.tailwindgen.com


Channel | YouTube | Instagram
👍5
#tools #website #api #fake_api


💎 معرفی وبسایت 💎

اگر front-end دولوپر هستید و نیاز به api با دیتای فارسی دارید برای ساخت نمونه کار و پروژه های تمرینی خودتون میتونید از وبسایت http://iransweb.com استفاده کنید که توسط یکی از هموطن های خوبمون ساخته شده 🤞🚀


به درد کیا میخوره ؟ 🤔

این وبسایت برای افرادی که نیاز به api فارسی دارند برای پروژه های خودشون میتونه گزینه بسیار خوبی باشه زیرا دسته بندی های مختلفی را مانند فروشگاه موبایل، قهوه، پوشاک و ... را برای api ها در نظر گرفته که تنوع خوبی ایجاد میکنه برای استفاده شما 🔥

این هم پست لینکدین سجاد عزیز، سازنده این وبسایت هست که میتونید برای حمایت از ایشون از صفحه خودشون وارد سایت بشید

Channel | YouTube | Instagram
🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
#tools #website


💎معرفی وبسایت 💎

* می‌خوای اسکرین‌شات کدت حرفه‌ای‌تر و جذاب‌تر به نظر برسه؟ 🤔 *

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

این وبسایت قابلیت کاستومایز بالایی رو در اختیار شما قرار میده و تقریبا همه چیز مثل رنگ‌ها، فونت‌ها، پس‌زمینه و هرچیزی که به ذهنتون می‌رسه با این وبسایت قابل تغییره

پ.ن : اگر دنبال یه راه ساده و سریع برای ایجاد اسکرین شات‌های باکیفیت از کد های خودتی، این ویدیو رو از دست نده 😁


مشاهده ویدیو

Channel | YouTube | Instagram
🤣3🔥1😁1
#tools #plugin

● معرفی افزونه PerfectPixel by WellDoneCode

یک افزونه کاربردی برای توسعه‌دهندگان وب هستش که به شما اجازه می‌ده تا یک تصویر رو به عنوان Overlay (لایه‌ی رویی) بر روی صفحه وب قرار بدهید. این ویژگی به شما کمک می‌کند تا پیکسل به پیکسل طراحی خود را با نسخه اجرا شده مطابقت دهید و از دقت طراحی خود اطمینان حاصل کنید 🚀

ویژگی‌های کلیدی

تطابق پیکسل به پیکسل: امکان قرار دادن تصویر بر روی صفحه برای مقایسه دقیق طرح گرافیکی با اجرای وبسایت.

تنظیم شفافیت (Opacity) : می‌توانید شفافیت تصویر Overlay را تنظیم کنید تا عناصر زیرین صفحه رو بهتر مشاهده کنید.

پشتیبانی از چندین Overlay : به‌راحتی می‌توانید چندین تصویر مختلف را به عنوان Overlay اضافه کرده و بین آن‌ها جابجا شوید.

کنترل دقیق : امکان تنظیم موقعیت و اندازه‌ی تصویر Overlay برای همخوانی کامل با صفحه.

در کل با استفاده از PerfectPixel می‌توانید از دقت و کیفیت نهایی پروژه‌های خودتون اطمینان حاصل کنید و ریزالت نهایی رو به‌طور کامل با طرح گرافیکی منطبق کنید 🚀

با حمایت خودتون بهمون انرژی بدید ❤️
〰️〰️〰️〰️〰️〰️〰️〰️〰️〰️
Channel | Group | YouTube
🔥61👎1
#tools #website #css #csstrciks

معرفی وبسایت css-tricks

وبسایت CSS-Tricks یه منبع خیلی پرطرفدار و معتبر بین توسعه‌دهندگان وبه که بیشتر روی #css و ترفندهای مربوط به طراحی و توسعه وب تمرکز داره. این سایت رو کریس کویر تو سال ۲۰۰۷ راه انداخت و با ارائه مقالات، راهنماها، نمونه کدها و کلی ترفندهای جذاب، خیلی زود تو جامعه توسعه‌دهندگان شناخته شد و محبوبیت پیدا کرد.

💎 ویژگی های کلیدی این وبسایت 💎

🔹 ایده‌ها و الهام‌های جدید برای طراحی خلاقانه‌تر بهتون می‌ده.

🔹 کدهای آماده (Snippets) ارائه می‌ده که سرعت کدنویسی‌تون رو افزایش می‌ده.

🔹 شما رو با ابزارها و فریم‌ورک‌های مدرن مثل React و Vue.js آشنا می‌کنه.

به طور کلی، CSS-Tricks به شما کمک می‌کنه تا با یادگیری اصول و تکنیک‌های جدید، بهینه‌تر و حرفه‌ای‌تر در طراحی صفحات عمل کنید 👌


🌐 مشاهده وبسایت

Channel | Group | YouTube
🔥7👎1
معرفی ابزار cURL

برنامه cURL یک ابزار تحت ترمیناله که برای ارسال درخواست‌های HTTP و تعامل با #Api ها خیلی استفاده می‌شه و طرفدارای زیادی داره. این ابزار به شما این امکان رو می‌ده تا درخواست‌های مختلفی مثل GET، POST، PUT و DELETE رو از طریق ترمینال ارسال کنید و پاسخ مد نظرتون رو دریافت کنید

نحوه نصب cURL 🔻
macOS
brew install curl


Linux
sudo apt update && sudo apt install curl


Windows
توی ویندوز 10 به بالا به صورت دیفالت نصبه ولی اگر نصب نبود از صفحه رسمیش میتونید دانلود کنید


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

#tools | #CURL#Api

〰️〰️〰️〰️〰️〰️〰️〰️〰️〰️
Channel | Group | YouTube
👎2🔥2
#tools #website

معرفی وبسایت uiverse.io

وبسایت uiverse یک پلتفرم آنلاینه که مجموعه بزرگی از کامپوننت های آماده و جذاب رو در اختیارتون قرار میده و خیلی ساده میتونید با کپی کردن کدهای html, css این کامپوننت ها ازشون استفاده کنید

نکته مهمی که هست اینه که بعضی از کامپوننت هارو با تیلویند در اختیارتون قرار میده و اگر هم نبود میتونید بدید چت جی‌پی‌تی و بهش بگید تبدیلش کنه به کد tailwind


Channel | Group | YouTube
👌6👍2👎1🔥1
𝗖𝗢𝗢𝗟𝗬 𝗖𝗢𝗗𝗘 | کولی کد
●● معرفی ابزار cURL ●● برنامه cURL یک ابزار تحت ترمیناله که برای ارسال درخواست‌های HTTP و تعامل با #Api ها خیلی استفاده می‌شه و طرفدارای زیادی داره. این ابزار به شما این امکان رو می‌ده تا درخواست‌های مختلفی مثل GET، POST، PUT و DELETE رو از طریق ترمینال ارسال…
نحوه استفاده از ابزار cURL

توی پست قبلی این ابزار رو معرفی کردیم و توی این پست میخوایم ببینیم چجوری میشه ازش استفاده کرد 🔻
GET
curl https://fakestoreapi.com/carts


POST
curl -X POST -H "Content-Type: application/json" -d '{"userId":5,"date":"2020-02-03","products":[{"productId":5,"quantity":1},{"productId":1,"quantity":5}]}' https://fakestoreapi.com/carts


این دو نمونه ساده برای درخواست GET و POST بود و خیلی فلگ های حرفه ای تر و بیشتری وجود داره داخل این ابزار که میتونید ازشون استفاده بکنید 🚀

🌐 وبسایت رسمی cURL

#tools #Api
〰️〰️〰️〰️〰️〰️〰️〰️〰️〰️
Channel | Group | YouTube
🔥3👍1
#tools | #vscode | #extension


🎯 CSS Peek
مشاهده و ویرایش مستقیم استایل‌های CSS متصل به یک المنت HTML بدون نیاز به جستجو در فایل‌های CSS.

🌐 دانلود
🚀 Tabnine
تکمیل خودکار کد با استفاده از هوش مصنوعی برای پیشنهاد‌های دقیق‌تر و هوشمندتر که سرعت شمارو تو نوشتن کدها بالا می‌بره.
🌐 دانلود
🛜 Thunder Client
یک ابزار قدرتمند برای تست APIها به صورت مستقیم از وی‌اس‌کد و جایگزینی خوب برای Postman.

🌐 دانلود
🎨 Color Highlight
نمایش رنگ‌های استفاده شده در CSS به صورت بصری در کنار کد، به صورت بک‌گراند کد رنگی.

🌐 دانلود
📊 Git Graph
نمایش گرافیکی و تصویری تاریخچه گیت و شاخه‌های مختلف پروژه با امکان مدیریت کامیت‌ها و شاخه‌ها.

🌐 دانلود

🆔 Channel | Group | YouTube
🔥621👍1
💎 جعبه ابزار جادویی Frontend دولوپرا 💎

یک ui kit خفن اوردم براتون که به ادعای خودش جادوییه، اسمش MagicUI هستش و بیش از ۵۰ کامپوننت animate ( انیمیشنی ) شده خفن داره که بهتون قول میدم اگر ببینیدش شما هم مجذوبشون میشید بس که جذابه.

حالا چرا میگم انقدر جذاب و خفنه ؟

به این دلیل که برای ایجاد انیمیشن ها از Framer Motion استفاده میکنه که واقعا بهش قدرت میبخشه و برای استایل دهی ام از tailwind استفاده می‌کنه.

فیلم چند نمونه از کامپوننت هاش رو گذاشتم میتونید ببینید، لینک سایتشم میزارم براتون حتما یه سر بهش بزنید 🚀


🌐 مشاهده وبسایت

#️⃣ #libarary | #uikit | #tools

🚀 @coolycode
6🔥11
هیچوقت فکرشو میکردید بشه طرح های ui داخل فیگما رو با چند تا کلیک به کد تبدیل کرد ... ⁉️💥

ابزار locofy همین الان داره انجامش میده. اونم نه فقط به کد html, css بلکه از Typescript و کلی چیزای دیگه پشتیبانی می‌کنه که واقعا برگاتون میریزه :))

از چیا پشتیبانی میکنه ؟ 🚀

طبق ادعای خودش‌ قابلیت این رو داره تا طرح شمارو به هر کدوم از تکنولوژی های زیر تبدیل کنه :

Frameworks
React
Angular
Next
Vue
Gatsby


Design System
MUI
Bootstrap
Ant Design
ChakraUi
Vuetify
...


Other
Javscript
Typescript
Tailwind
Css
...


البته از تکنولوژی های دیگه ای هم پشتیبانی میکنه و برای هر مرحله از پروژه مثل دانلود کد، دیپلوی و ... برنامه داره که میتونید توی عکس همسن پست ببینید

راستی توی این ویدیو نحوه استفاده ازش رو توضیح داده، به نظرم ببینید جالب بود 🔻

📺 https://youtu.be/yhCtAs--r_Y


🌐 وبسایت رسمی locofy

#️⃣ #figma #tools #AI #uiux

🚀 @coolycode
6🔥2😍2🤣1
This media is not supported in your browser
VIEW IN TELEGRAM
🔸 چند وقت پیش وبسایت MagicUI رو بهتون معرفی کردم که کلی کامپوننت های تعمالی و انیمیشنی خفن آماده داشت

🔸 حالا یه سایت پیدا کردم که بیش از 100 تا کامپوننت آماده انیمیشنی و تعاملی خفن داره که بر پایه tailwindcss, framer-motion و ... ساخته شدن و خودم تقریبا همشون رو دیدم و واقعا جذاب و خفن بودن

🔸 بهتون پیشنهاد میکنم حتما یه سری بهش بزنید، سبک کامپوننت هاشم با MagicUI متفاوته و یسری کامپوننت های متقاوت تر هم داره که میتونید خلاصش رو توی ویدیو همین پست ببینید

🌐 مشاهده وبسایت

راستی یه دکمه گیت‌هابم داره که خیلی خفنه لینکشو میزارم ببینیید 🔻

🚀 GitHub Button


امیدوارم از این مطلب لذت برده باشید، با ری‌اکشنای خودتون بهمون انرژی بدید ❤️‍🔥

#️⃣ #tools #component

𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣
🔥8👌3
میدونستی میتونی توی گوشیتم از قابلیت inspect و extensions مرورگر کروم استفاده کنی ؟

قطعا هر دولوپری نیاز پیدا میکنه که توی گوشیش بتونه به تب inspect و یا افزونه های کروم دسترسی پیدا کنه

مرورگر 𝗞𝗜𝗪𝗜 این قابلیت هارو برای شما فراهم کرده که میتونید از GooglePlay یا Myket هم به سادگی نصب میشه 🚀

امیدوارم از این مطلب لذت برده باشید، با ری‌اکشنای خودتون بهمون انرژی بدید ❤️‍🔥

#tools

🫶 @coolycode‌ ‌
❤‍🔥11🔥1😍1
تا امروز سعی کردیم که مطالب فوق‌العاده کاربردی و با کیفیتی رو‌برای شما عزیزان تولید کنیم و هم اکنون میتونید به صد‌ها مطلب جذاب در حوزه وب دسترسی داشته باشید 💎

با توجه به گسترده شدن مطالب کانال کولی‌کُد تصمیم، گرفتیم که یک دسته بندی مناسبی رو روی تمامی پست‌های کانال اعمال کنیم، که میتونید به صورت کامل لیستش رو مشاهده کنید 🚀
#WhatsThat : معرفی و بررسی تکنولوژی‌ها

#tools : ابزار ها و سرویس ‌های کاربردی

👨‍💻 #programming : مباحث عمومی حوزه تک

🪄 #tricks : تریک و ترفندها‌ ‌ ‌‌ ‌ ‌ ‌ ‌‌ ‌ ‌ ‌ ‌ ‌

🔗#website : معرفی وبسایت‌‌ ‌ ‌ ‌ ‌‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

📝 #tips : نکات مهم و کاربردی‌ ‌ ‌ ‌  ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

😆 #fun : فان و سرگرمی‌ ‌‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

✌️ #javascript : مربوط به جاوااسکریپت

🔵 #css : مربوط به سی‌اس‌اس ‌ ‌ ‌ ‌

💻 #Frontend : حوزه ‌فرانت‌اند ‌ ‌ ‌ ‌  ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

🌲 #Backend : حوزه بکند‌ ‌ ‌ ‌ ‌ ‌‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌‌ ‌‌ ‌ ‌ ‌ ‌

🔖#libarary : معرفی لایبرری های کاربردی

💻 #framework : معرفی و بررسی فریم‌ورک

🆚 #VS : مقایسه و بررسی تفاوت‌ها

📗#book : معرفی کتاب‌‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

🗣️ #golden_sentence : جملات ناب حوزه تک

🌐 #NEWPost : پست های اینستاگرام

📹 #youtube : ویدیو های چنل یوتوب

🎞 #video : آموزش های ویدیویی

🖥 #uiux : مباحث مربوط به ui, ux


اگر مورد جدیدی به مطالب کانال اضافه بشه داخل این لیست قرار میگیره

راستی میتونید بنرمون رو برای دوستان خودتون ارسال کنید تا اونا هم به جمع ما بپیوندن 🔻

CoolyCode Banner 🫰


#category #دسته_بندی

🧑‍💻 𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥15❤‍🔥1👌11
با نصب افزونه 𝗚𝗜𝗧𝗟𝗔𝗕 𝗪𝗢𝗥𝗞𝗙𝗟𝗢𝗪 میتونید به یسری از قابلیت های گیت‌لب داخل vscode دسترسی داشته باشید، مثل مدیریت مرج ریکوست ها و ریویو کردنشون، مدیریت پایپ‌لاین‌های CI/CD و ...

این افزونه بهتون کمک میکنه تا کاراتون خیلی سریع تر از قبل پیش بره و بتونید مرج ریکوست‌ها رو خیلی ساده تر تو محیط vscode ریویو کنید


🌐 Download Extension


#️⃣ #tools #extension #git

𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣
💯5❤‍🔥2🔥1
فرقی نمیکنه برنامه‌نویس باشی یا طراح و یا هر شغل دیگه ای که با گوشی و لپ‌تاپ زیاد سر و کار داشته باشه، باید بدونی که قراره به زودی مشکلات زیادی برای چشم هات به وجود بیاد 

چجوری جلوگیری کنیم ازش ؟
قبلا یه پست کامل راجبش ساختیم که حتما بخونیدش، ولی توی این پست میخوام برنامه BreakTimer رو بهتون معرفی بکنم که واقعا بهترین ابزار برای کمک به چشم هاتونه 🌟


برنامه 𝗕𝗥𝗘𝗔𝗞𝗧𝗜𝗠𝗘𝗥 چیست ؟ 👀
با استفاده از برنامه BreakTimer میتونید تایم های استراحت مشخصی رو‌ برای خودتون ست بکنید که به صورت اتومات در تایم استراحت یک پاپ‌آپ بهتون نمایش میده.
این برنامه انعطاف پذیری خیلی زیادی داره و میتونید تمامی تایم‌ها رو به صورت دقیق کاستوم بکنید و حتی میتونید ست بکنید که پاپ‌آپ تایم استراحت قابل ریجکت نباشه 😁
و در نهایت اینکه این برنامه کاملا رایگان و open source هست و برای ویندوز، مک و لینوکس در دسترسه ♂️


امیدوارم از این مطلب لذت برده باشید، با ری‌اکشنای خودتون بهمون انرژی بدید ❤️‍🔥

#️⃣ #tips #tools

𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣
❤‍🔥8👌2🔥1
ابزار Prettier چیه و به چه دردی میخوره ؟  👩‍💻

اگه از اون دسته آدمایی هستی که وسط کدنویسی حوصله ندارن کاما و فاصله و پرانتز و اینا رو درست بذارن (مث من 🙂)، پس Prettier میتونه به شدت کمک کننده باشه.

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


دقیقا به چه درد میخوره ⁉️
1️⃣‌ ‌ ‌ ‌ کدارو تمیز و مرتب می‌کنه و دیگه نیاز نیست دستی اسپیس، تب، کاما و ... بزنی.

2️⃣‌ ‌ ‌ ‌  تو پروژه‌های تیمی، فرمت کد همه اعضا شبیه همه می‌شه و یکپارچگی حفظ میشه
3️⃣‌ ‌ ‌ ‌  تغییرات فرمتی توی فایل ها باعث نمیشه که توی پول ریکوست ها اون فایل به عنوان فایل تغییر یافته علامت بخوره، این موردو تیم لید ها و مسئولای گیت خوب درک میکنن و توی ریویو کردن کدا به شدت کمک کنندس


پی نوشت ... 📌
روی VS Code هم یه افزونه داره که میتونید نصبش کنید و هر بار که سیو کنید فایلاتون رو فرمت میشه اوتومات، البته باید گزینه format on save رو از تنطیمات فعال کنید، و اگر auto save هم روشن باشه همیشه کدات در لحظه مرتب میشن 📱😉


#️⃣ #tools #WhatsThat

🧑‍💻 @CoolyCode
Please open Telegram to view this post
VIEW IN TELEGRAM
1146🔥4