تاحالا شده لازم باشه یک عکس کامل از صفحه سایتتون به کارفرما بدید و نمیدونستید چجوری باید این کارو بکنید ؟ 🧐
🧩 برای این کار میتونید از اکستنشن Go Full Page استفاده کنید تا بتونید یک عکس کامل از صفحه سایتتون بگیرید و در فرمت های pdf یا png خروجی بگیرید
این اکستنشن کاربردی رو میتونید از لینک زیر روی مرورگر کروم خودتون نصب کنید.🔥
Extension🌕
#tools #extension
@CodeModule
🧩 برای این کار میتونید از اکستنشن Go Full Page استفاده کنید تا بتونید یک عکس کامل از صفحه سایتتون بگیرید و در فرمت های pdf یا png خروجی بگیرید
این اکستنشن کاربردی رو میتونید از لینک زیر روی مرورگر کروم خودتون نصب کنید.
Extension
#tools #extension
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥6🔥3👌2
یه سایت همه فن حریف برای css 🔵
با استفاده از این سایت، میتونید استایل های مختلفی مثل gradient, boxShadow borderRadius ,transform, border و ... رو ایجاد، و تو پروژه هاتون استفاده کنید😎
➡️ Website◀️
#tools #css
@CodeModule
با استفاده از این سایت، میتونید استایل های مختلفی مثل gradient, boxShadow borderRadius ,transform, border و ... رو ایجاد، و تو پروژه هاتون استفاده کنید
#tools #css
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6⚡2
با این سایتی که امروز بهتون معرفی میکنیم میتونید تایپ ده انگشتی رو به زبان فارسی و انگلیسی و تایپ اعداد رو به راحتی یاد بگیرید به صورت رایگان
#tools #type
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥12👌1
اگه شما هم مثل من با یوتیوب زیاد کار میکنید، قطعا براتون پیش اومده که به دنبال دانلود یک ویدیو باشید. با استفاده از این ربات این کار به راحتی امکان پذیره!
#tools #youtube
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
👌10🔥4
بهینه سازی کد با ابزار tailwind-merge 💀
کتابخانه tailwind-merge یک ابزار قدرتمند برای توسعه دهندگانی هست، که از Tailwind CSS استفاده می‌کنن. هدف اصلی این کتابخانه، ترکیب کلاس‌های تکراری در پروژه‌های Tailwind CSS و جلوگیری از تضادهای احتمالی هست.
ویژگی‌های اصلی tailwind-merge⬇️
ترکیب کلاس‌های تکراری: اگه چندین کلاس Tailwind که متناقض هستن (مثل p-4 و p-2) به یک تگ اضافه بشن، tailwind-merge به‌طور خودکار تنها یکی از اون هارو(آخرین) و نگه می‌داره و بقیه رو حذف میکنه.
افزایش خوانایی و بهینه‌سازی: با حذف کلاس‌های تکراری و متناقض، کد نهایی شما خواناتر و بهینه‌تر خواهد بود، که منجر به کاهش حجم کد CSS تولید شده و افزایش عملکرد صفحه وب می‌شود.
ادغام کلاس‌ها در زمان واقعی: این کتابخانه می‌تونه به‌طور دینامیک در هنگام ساختن پروژه‌های جاوااسکریپت، کلاس‌ها رو ترکیب کنه، بنابراین نیازی به عملیات دستی یا استفاده از ابزارهای دیگه نیست.
این کتابخانه، به خصوص برای پروژه‌های بزرگ و پیچیده که از تعداد زیادی کلاس Tailwind استفاده می‌کنن، بسیار مفیده و می‌تونه به کاهش سردرگمی و پیچیدگی کد کمک کنه⚡️
#tailwind #tools
@CodeModule
کتابخانه tailwind-merge یک ابزار قدرتمند برای توسعه دهندگانی هست، که از Tailwind CSS استفاده می‌کنن. هدف اصلی این کتابخانه، ترکیب کلاس‌های تکراری در پروژه‌های Tailwind CSS و جلوگیری از تضادهای احتمالی هست.
ویژگی‌های اصلی tailwind-merge
ترکیب کلاس‌های تکراری: اگه چندین کلاس Tailwind که متناقض هستن (مثل p-4 و p-2) به یک تگ اضافه بشن، tailwind-merge به‌طور خودکار تنها یکی از اون هارو(آخرین) و نگه می‌داره و بقیه رو حذف میکنه.
افزایش خوانایی و بهینه‌سازی: با حذف کلاس‌های تکراری و متناقض، کد نهایی شما خواناتر و بهینه‌تر خواهد بود، که منجر به کاهش حجم کد CSS تولید شده و افزایش عملکرد صفحه وب می‌شود.
ادغام کلاس‌ها در زمان واقعی: این کتابخانه می‌تونه به‌طور دینامیک در هنگام ساختن پروژه‌های جاوااسکریپت، کلاس‌ها رو ترکیب کنه، بنابراین نیازی به عملیات دستی یا استفاده از ابزارهای دیگه نیست.
این کتابخانه، به خصوص برای پروژه‌های بزرگ و پیچیده که از تعداد زیادی کلاس Tailwind استفاده می‌کنن، بسیار مفیده و می‌تونه به کاهش سردرگمی و پیچیدگی کد کمک کنه
#tailwind #tools
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7⚡4❤🔥2
با استفاده از این سایت، Clip path کاستوم خودت رو بساز 🔥
سایت Bennett Feely's Clippy یک ابزار آنلاینه که به کاربران این اجازه رو میده، تا به راحتی CSS clip-path کاستوم خودشون رو ایجاد کنن. این ابزار به شما کمک میکنه تا با استفاده از رابط گرافیکی، اشکال مختلف رو برش بدید و در نهایت کد CSS مربوط به اون رو دریافت کنید.
پ.ن: clip-path به شما این امکان رو میده که با برش دادن یک عنصر به یک شکل (دایره، بیضی، چند ضلعی و ...) اشکال پیچیده در CSS و وبسایت ایجاد کنید.
🔵 Website
#css #clippath #tools
@CodeModule
سایت Bennett Feely's Clippy یک ابزار آنلاینه که به کاربران این اجازه رو میده، تا به راحتی CSS clip-path کاستوم خودشون رو ایجاد کنن. این ابزار به شما کمک میکنه تا با استفاده از رابط گرافیکی، اشکال مختلف رو برش بدید و در نهایت کد CSS مربوط به اون رو دریافت کنید.
پ.ن: clip-path به شما این امکان رو میده که با برش دادن یک عنصر به یک شکل (دایره، بیضی، چند ضلعی و ...) اشکال پیچیده در CSS و وبسایت ایجاد کنید.
#css #clippath #tools
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8⚡3😁1
در واقع HTTPie، یک ابزار قدرتمند و در عین حال کاربرپسند برای ارسال درخواست‌های HTTP و کار با APIها هست.
این ابزار به دولوپرا کمک میکنه تا درخواست‌های HTTP رو به راحتی ارسال، و پاسخ‌ها رو مشاهده و تحلیل کنند. همچنین شامل ویژگی‌هایی مثل سازگاری با APIهای RESTful و GraphQL، پشتیبانی از قالب‌های مختلف احراز هویت و یکپارچگی با ابزارهای دیگر توسعه هست
مهم تر از همه این ابزار قابلیت استفاده از Ai رو هم داره، تا بتونه بهتر پاسخگوی نیاز ها و انجام تسک ها باشه(در حال حاضر روی نسخه 1.0) هست.
برای اطلاعات بیشتر و نحوه استفاده، میتونید به وبسایتش مراجعه کنید.
#tools #api #ai
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9👌2💔1
سایت Css Matic یک ابزار آنلاینه که با استفاده ازش میتونید به صورت دستی، Box Shadow دلخواه خودتون رو تنظیم و بسازید و خروجی کد Css ای اون رو، مشاهده و کپی کنید
همچنین قابلیت های دیگه ای، مثل ساخت gradient و border radius رو هم داره.
#tools #css
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8👌2
ویدیو مد نظرتو با هوش مصنوعی ترجمه کن! 😎
توی این پست میخوام با ابزاری به اسم synclabs آشناتون کنم که به شما اجازه میده، تا هر ویدیو ای که دوست داشتید رو از هر جایی (یوتیوب، مقالات، وبلاگ ها و ...) رو به هر زبانی که میخواید ترجمه کنید.
دیگه نیاز نیست بخاطر بلد نبودن زبان های خارجه، منابعتون رو محدود کنید🏖️
🔵 Website
#ai #tools
@CodeModule
توی این پست میخوام با ابزاری به اسم synclabs آشناتون کنم که به شما اجازه میده، تا هر ویدیو ای که دوست داشتید رو از هر جایی (یوتیوب، مقالات، وبلاگ ها و ...) رو به هر زبانی که میخواید ترجمه کنید.
دیگه نیاز نیست بخاطر بلد نبودن زبان های خارجه، منابعتون رو محدود کنید
#ai #tools
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10👌3
در این پست با یک سایت به اسم GPRM آشنا میشیم که بهتون اجازه میده، با ظاهر ساده پروفایل گیتهابتون خداحافظی کنید.
این ابزار به شما این امکان رو میده که یک Readme با آمار کامیت ها، استار ها و همچنین skill هاتون با ظاهر آیکون بسازید، و به عنوان پروفایل گیتهابتون نمایشش بدید
#tools #github
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥14⚡4❤🔥2
توی این پست یک سایت بهتون معرفی میکنم که با استفاده از اون، میتونید سایت مد نظرتون رو از بابت Performance ،Structure ،LCP و LBT بسنجید و انالیزشون کنید
#web #performance #tools
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7👌2💔1
این اکستنشن برای برنامه نویسا که کلی ویدیو آموزشی میبینن، خیلی مفیده چون به راحتی میتونن کد هارو از ویدیو کپی کنن و دیگه، دردسر کد نوشتن نداشته باشن
#extension #tools
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥11👌3
در به در دنبال ابزارهای کاربردی css نباش 🔵
سایت زیر مجموعه‌ای از بهترین ابزارهای کاربردی و مهم css رو جمع آوری کرده، و به راحتی میتونید ابزار مد نظرتونو پیدا و استفاده کنید💀
🔵 Website
#css #tools
@CodeModule
سایت زیر مجموعه‌ای از بهترین ابزارهای کاربردی و مهم css رو جمع آوری کرده، و به راحتی میتونید ابزار مد نظرتونو پیدا و استفاده کنید
#css #tools
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7⚡3
کمبود آیکون های دلخواهت اونم رایگان، اذیتت میکنه ؟
😎 توی این پست چند تا منبع رایگان بهتون معرفی میکنم، که آیکون های فوق‌العاده خفنی ارائه میدن.
🔵 https://heroicons.com
🔵 https://icons8.com
🔵 https://uxwing.com/
🔵 https://tabler.io/icons
#icon #free #tools
@CodeModule
#icon #free #tools
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10👌2😁1
با این ابزار خلاقیت رو به اوج برسون 🚀
Bennett Feely یک وبسایت هست که ابزارهای خلاقانه و کاربردی بهتون ارائه میده، که با استفاده از این ابزارها میتونید به سادگی و بدون نیاز به دانش تخصصی، ایده‌های خودتون رو به واقعیت تبدیل کنید.
برخی از ابزارهای Bennett Feely⬇️
* ztext.js: تایپوگرافی 3 بعدی رو به هر وبسایت و فونت دلخواهی اضافه کنید.
* CSS Scales: این ابزار به شما امکان میده مقیاس‌های رنگی رو از ColorBrewer و van der Walt، Smith و Firing به صورت گرادیانت دریافت کنید.
* CSS Pie Chart: با استفاده از گرادیانت‌های مخروطی، نمودارهای دایره‌ای رو به سادگی بسازید.
علاوه بر اینا، ابزار های مختلف دیگه ای هم داره که در توسعه پروژه‌ها بهتون کمک میکنه. پیشنهاد میکنم یه سر به وبسایتش بزنید💀
#tools #css
@CodeModule
Bennett Feely یک وبسایت هست که ابزارهای خلاقانه و کاربردی بهتون ارائه میده، که با استفاده از این ابزارها میتونید به سادگی و بدون نیاز به دانش تخصصی، ایده‌های خودتون رو به واقعیت تبدیل کنید.
برخی از ابزارهای Bennett Feely
* ztext.js: تایپوگرافی 3 بعدی رو به هر وبسایت و فونت دلخواهی اضافه کنید.
* CSS Scales: این ابزار به شما امکان میده مقیاس‌های رنگی رو از ColorBrewer و van der Walt، Smith و Firing به صورت گرادیانت دریافت کنید.
* CSS Pie Chart: با استفاده از گرادیانت‌های مخروطی، نمودارهای دایره‌ای رو به سادگی بسازید.
علاوه بر اینا، ابزار های مختلف دیگه ای هم داره که در توسعه پروژه‌ها بهتون کمک میکنه. پیشنهاد میکنم یه سر به وبسایتش بزنید
#tools #css
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡9🔥2
تو کامپیوترت YouTube downloader داشته باش 📹
بدون شک برای هممون پیش اومده که نیاز داشته باشیم، یک ویدیویی رو از یوتیوب دانلود کنیم. بنابراین مجبوریم تا از سایت ها و ربات های مختلف استفاده کنیم که هر کدوم محدودیت هایی دارن و شاید دسترسی بهشون مشکل باشه.
پس خیلی خوبه که بتونیم یک YouTube downloader روی سیستم عامل خودمون داشته باشیم.
🪴 برای نصب این نرم افزار در لینوکس کافیه کامند زیر رو وارد کنید:
‼️ اگر هم curl ندارید یا ازش استفاده نمیکنید میتونید با wget نصب کنید:
🔥 همچنین کاربرای ویندوز و مک هم میتونن با دانلود فایل های این نرم افزار که داخل ریپازیتوری انتهای پست موجوده، از این نرم افزار کاربردی استفاده کنن.
برای کسب اطلاعات کامل و دسترسی دانلود این ابزار، میتونید به ریپازیتوری این ابزار مراجعه کنید.
🐱 Github
#tools #software
@CodeModule
بدون شک برای هممون پیش اومده که نیاز داشته باشیم، یک ویدیویی رو از یوتیوب دانلود کنیم. بنابراین مجبوریم تا از سایت ها و ربات های مختلف استفاده کنیم که هر کدوم محدودیت هایی دارن و شاید دسترسی بهشون مشکل باشه.
پس خیلی خوبه که بتونیم یک YouTube downloader روی سیستم عامل خودمون داشته باشیم.
sudo curl -L https://yt-dl.org/downloads/latest/youtube-dl -o /usr/local/bin/youtube-dl
sudo chmod a+rx /usr/local/bin/youtube-dl
sudo wget https://yt-dl.org/downloads/latest/youtube-dl -O /usr/local/bin/youtube-dl
sudo chmod a+rx /usr/local/bin/youtube-dl
برای کسب اطلاعات کامل و دسترسی دانلود این ابزار، میتونید به ریپازیتوری این ابزار مراجعه کنید.
#tools #software
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡9🔥5
در این پست، طبق درخواست شما عزیزان لینک ابزار های معرفی شده رو قراردادیم تا بتونید بهشون دسترسی داشته باشید و ازشون استفاده کنید
#ai #tools
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥11⚡2
یه مشت ابزار کاربردی که احتمالا از اونها بی خبر بودی 💀🔥
در حوزه فرانت‌اند روزانه ابزارهای زیادی پا به عرصه رقابت میزارن و همه اونها یک هدف دارن، راحتیه دولوپر!
مقاله زیر چندین ابزار و سایت کاربردی معرفی کرده که ارزش دیدن داره و پیشنهاد میکنم از دستشون ندید.
🔗 Link
#article #tools
@CodeModule
در حوزه فرانت‌اند روزانه ابزارهای زیادی پا به عرصه رقابت میزارن و همه اونها یک هدف دارن، راحتیه دولوپر!
مقاله زیر چندین ابزار و سایت کاربردی معرفی کرده که ارزش دیدن داره و پیشنهاد میکنم از دستشون ندید.
🔗 Link
#article #tools
@CodeModule
Medium
8 Frontend Tools to Become a Better Developer
As the web development field continues to evolve, front-end developers are constantly looking for tools to streamline their workflows…
🔥13❤🔥3
Swagger این ابزار رو ببینه جیغ می‌کشه!
پکیج swagger-typescript-api یک ابزار قدرتمند و کاربردیه که بهتون کمک میکنه بر اساس Swagger پروژتون، کدهایی رو که شامل اینترفیس‌ها، تایپ‌ها، و فانکشن‌های مورد نیاز برای تعامل با API هستن، به‌طور خودکار تولید کنید. کافیه آدرس swagger پروژه رو تحویلش بدید تا شیک و مجلسی، کل کوئری های مورد نیاز رو جنریت کنه.
قابلیت‌ها و کاربردهای اصلی 👇🏻
1.تولید تایپ‌ها و اینترفیس‌ها:
این پکیج فایل TypeScript تولید میکنه که شامل تمام تایپ‌های مربوط به داده‌هایی هست که API شما دریافت یا ارسال میکنه. این کار باعث جلوگیری از خطاهای تایپی و افزایش سرعت توسعه میشه.
2.ایجاد ریکوست فانکشن ها:
فانکشن‌هایی برای فراخوانی هر یک از endpointهای API تولید میکنه که مستقیماً با تایپ‌های TypeScript همخوانی دارن.
3.پشتیبانی از OpenAPI:
به‌طور کامل از نسخه‌های OpenAPI (مانند OpenAPI 3.0) پشتیبانی میکنه.
4.سفارشی‌سازی بالا:
میتونید قالب(template)های خودتون رو برای تولید کد سفارشی استفاده کنید. در کل گزینه‌های متنوعی برای تنظیم ساختار خروجی فراهم هست.
به طور خلاصه این پکیج به شدت سرعت توسعه رو بالا میبره و با مدل تایپ های تمیز و مرتب، از خطاهای احتمالی پروژتون جلوگیری میکنه.
(این ابزار خوراک ریکت کوئری دولوپر ها هست)
🔗 Link
#tools #swagger
@CodeModule
پکیج swagger-typescript-api یک ابزار قدرتمند و کاربردیه که بهتون کمک میکنه بر اساس Swagger پروژتون، کدهایی رو که شامل اینترفیس‌ها، تایپ‌ها، و فانکشن‌های مورد نیاز برای تعامل با API هستن، به‌طور خودکار تولید کنید. کافیه آدرس swagger پروژه رو تحویلش بدید تا شیک و مجلسی، کل کوئری های مورد نیاز رو جنریت کنه.
قابلیت‌ها و کاربردهای اصلی 👇🏻
1.تولید تایپ‌ها و اینترفیس‌ها:
این پکیج فایل TypeScript تولید میکنه که شامل تمام تایپ‌های مربوط به داده‌هایی هست که API شما دریافت یا ارسال میکنه. این کار باعث جلوگیری از خطاهای تایپی و افزایش سرعت توسعه میشه.
2.ایجاد ریکوست فانکشن ها:
فانکشن‌هایی برای فراخوانی هر یک از endpointهای API تولید میکنه که مستقیماً با تایپ‌های TypeScript همخوانی دارن.
3.پشتیبانی از OpenAPI:
به‌طور کامل از نسخه‌های OpenAPI (مانند OpenAPI 3.0) پشتیبانی میکنه.
4.سفارشی‌سازی بالا:
میتونید قالب(template)های خودتون رو برای تولید کد سفارشی استفاده کنید. در کل گزینه‌های متنوعی برای تنظیم ساختار خروجی فراهم هست.
به طور خلاصه این پکیج به شدت سرعت توسعه رو بالا میبره و با مدل تایپ های تمیز و مرتب، از خطاهای احتمالی پروژتون جلوگیری میکنه.
(این ابزار خوراک ریکت کوئری دولوپر ها هست)
🔗 Link
#tools #swagger
@CodeModule
GitHub
GitHub - acacode/swagger-typescript-api: Generate the API Client for Fetch or Axios from an OpenAPI Specification
Generate the API Client for Fetch or Axios from an OpenAPI Specification - acacode/swagger-typescript-api
🔥63⚡10❤🔥2
از لودینگ های معمولی خسته شدی؟ برو سراغ skeleton 💀
سایت skeletonreact ابزاری برای ایجاد کامپوننت‌های اسکلت انیمیشنی هست و از خروجی در قالب‌هایی نظیر React، React Native، Vue و Vanilla HTML پشتیبانی میکنه. انیمیشن های اسکلتی رو میتونیم به عنوان جایگزینی برای لودینگ‌های معمولی و خسته کننده در نظر بگیریم، و اونها به ما این قابلیت رو میدن که به کاربران پیش‌نمایشی از ساختار صفحات، مثل مکان‌نماهایی برای متون یا تصاویر ارائه بدیم تا تجربه کاربری بهتری در زمان بارگذاری داده‌ها فراهم بشه.
🔗 Link
#tools #skeleton
@CodeModule
سایت skeletonreact ابزاری برای ایجاد کامپوننت‌های اسکلت انیمیشنی هست و از خروجی در قالب‌هایی نظیر React، React Native، Vue و Vanilla HTML پشتیبانی میکنه. انیمیشن های اسکلتی رو میتونیم به عنوان جایگزینی برای لودینگ‌های معمولی و خسته کننده در نظر بگیریم، و اونها به ما این قابلیت رو میدن که به کاربران پیش‌نمایشی از ساختار صفحات، مثل مکان‌نماهایی برای متون یا تصاویر ارائه بدیم تا تجربه کاربری بهتری در زمان بارگذاری داده‌ها فراهم بشه.
🔗 Link
#tools #skeleton
@CodeModule
🔥26⚡4👌1💔1