منابع تازه برای طراحان و توسعه دهندگان وب (آوریل 2024)

CanIEmail feature compatibility chart

زمان نسخه دیگری از مجموعه ابزارها و منابع جدید ما برای طراحان و توسعه دهندگان دیگر فرا رسیده است.

این بار، ما کمی از همه چیز داریم، از نمایش‌های نمایشی که آخرین ویژگی‌های CSS را به نمایش می‌گذارند تا چند کتابخانه جاوا اسکریپت که نمی‌خواهید از دست بدهید. بنابراین، بیایید مستقیماً وارد شویم و چیزهای جدید را کشف کنیم!

caniemail

شبیه CanIUse. CanIEmail یک مرجع جامع برای پشتیبانی کلاینت ایمیل از ویژگی های HTML و CSS فراهم می کند. این به شما کمک می کند تا بفهمید کدام ویژگی های HTML و CSS در مشتریان مختلف ایمیل برای ایجاد طرح های ایمیل سازگار و قابل دسترس پشتیبانی می شوند.

نمودار سازگاری ویژگی CanIEmail

ویرایشگر JSON Viewer

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

رابط ویرایشگر JSON Viewer

ابزار لنگر

CSS Anchor Positioning، دارای CSS جدید insert-area ویژگی، به زودی در مرورگرها وارد می شود. این سایت یک نمایش عملی از این مشخصات جدید را در عمل نشان می دهد. می توانید موقعیت های مختلف لنگر و نحوه تنظیم پویا عناصر اطراف را مشاهده کنید.

نسخه نمایشی CSS Anchor Position

Drag-n-Drop عملی

توسعه یافته توسط Atlassian، Drag-n-Drop عملی یک کتابخانه جاوا اسکریپت برای افزودن قابلیت کشیدن و رها کردن در وب آسان است. طیف وسیعی از ویژگی‌ها مانند دستگیره‌های کشیدن سفارشی، پشتیبانی از دستگاه‌های لمسی و سازگاری با چارچوب‌های وب مدرن از جمله React، Vue، و Angular را ارائه می‌کند.

مثال رابط Drag-n-Drop

پلاگین وردپرس Readme Parser

این یک بسته Composer مفید است که می توانید از این بسته برای خواندن آن استفاده کنید readme.txt یا readme.md در یک افزونه وردپرس فایل کنید و اطلاعات مربوط به افزونه مانند نام افزونه، نسخه PHP مورد نیاز، نسخه آزمایش شده وردپرس و توضیحات را جمع آوری کنید.

این بر اساس تجزیه کننده readme WordPress.org است، با برخی از ترفندها برای اطمینان از سازگاری با نسخه های بیشتر PHP.

افزونه وردپرس Readme Parser UI

نمادهای فسفر

نمادهای فسفر مجموعه ای از نمادهای انعطاف پذیر با بیش از 1000 نماد در شش وزن ارائه می دهد: لاغر، سبک، منظم، پررنگ، پر کنید، و دوتن. این نمادها به گونه ای طراحی شده اند که در هر اندازه ای واضح به نظر برسند، برای پلتفرم ها و فریم ورک های مختلف از جمله React، Vue، Flutter و Elm در دسترس هستند.

نمایش وزن های مختلف PhosphorIcons

آبشار

آبشار یک دیگ بخار منبع باز رایگان SaaS است که حداقل راه اندازی را برای شروع پروژه های SaaS شما فراهم می کند. این شامل پشته فناوری ضروری مانند Next.js، Prisma، PostgreSQL و TailwindCSS است. همچنین شامل احراز هویت، پرداخت‌ها، بهبود سئو و ادغام تجزیه و تحلیل است.

با Cascade، می توانید به سرعت برنامه های SaaS را به طور کارآمد بسازید.

راه اندازی دیگ بخار Cascade SaaS

طراحی تاریک

این سایت مجموعه‌ای از وب‌سایت‌های دارای طرح‌هایی با تم تیره را ارائه می‌کند. این وب‌سایت‌ها از صنایع و دسته‌های مختلف از جمله آموزش، بازرگانی و آژانس را به نمایش می‌گذارد.

چه بر روی یک وب سایت، برنامه یا رابط کار می کنید، این سایت می تواند الهام بخش شما باشد.

مجموعه طرح های با تم تیره

زمین بازی Cloudflare AI

زمین بازی Cloudflare AI یک Playground آنلاین است که به شما امکان می دهد مدل های مختلف LLM مانند Mistral، Llama، OpenChat و DeepSeek Coder را آزمایش کنید. اگر می‌خواهید برنامه مبتنی بر هوش مصنوعی خود را بر روی Cloudflare Workers AI اجرا کنید، یک ابزار مفید است، جایی که می‌توانید این مدل‌ها را در شبکه جهانی آن با استفاده از GPUهای بدون سرور اجرا کنید و برنامه‌های هوش مصنوعی را به کاربران خود نزدیک‌تر کنید.

رابط کاربری Cloudflare AI Playground

RunJS

RunJS یک زمین بازی آنلاین جاوا اسکریپت است که در آن می توانید کد را با بازخورد زنده فوری بنویسید و اجرا کنید. این آن را به ابزاری مناسب برای آزمایش سریع ایده ها، آزمایش الگوریتم ها یا اشکال زدایی کد تبدیل می کند.

رابط زمین بازی RunJS JavaScript

والکی

Valkey یک ساختار داده کلید/مقدار با کارایی بالا است که با هدف ازسرگیری توسعه در پروژه منبع باز قبلی Redis است. به طور مشابه، از ساختارهای بومی مختلف و یک سیستم افزونه قابل توسعه پشتیبانی می کند.

رابط ساختار داده Valkey

المو

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

افزونه Elmo Chrome در حال اجرا است

پیش پا افتاده

Banal یک راه آسان برای بررسی اندازه بسته‌بندی وابستگی‌های NPM به طور مستقیم در VSCode فراهم می‌کند. این به شما امکان می دهد تأثیر هر وابستگی را بر اندازه کلی پروژه شناسایی و ارزیابی کنید. این به شما کمک می‌کند درباره اینکه کدام وابستگی‌ها را شامل یا حذف کنید تا عملکرد و استفاده از منابع را بهینه کنید، تصمیم‌گیری آگاهانه بگیرید.

استفاده از برنامه افزودنی VSCode Banal

جاوا اسکریپت شیوا

جاوا اسکریپت شیوا یک کتاب آنلاین است که برنامه نویسی جاوا اسکریپت را از مبانی تا موضوعات پیشرفته مانند برنامه نویسی تابعی و برنامه نویسی ناهمزمان به شما آموزش می دهد. چه تازه کار باشید و چه بخواهید مهارت های خود را تقویت کنید، این کتاب منبع ارزشمندی برای یادگیری جاوا اسکریپت است.

جلد کتاب جاوا اسکریپت فصیح

فایربولت

Firebolt یک فریمورک React برای ساخت سریع برنامه های وب با کارایی بالا و تمام پشته است. این یک ساختار دایرکتوری ساده، پشتیبانی درجه یک CSS-in-JS، و یک سیستم مسیریابی بصری برای صفحات، دارایی ها، فایل های مجازی، API ها و موارد دیگر را ارائه می دهد.

رابط فریم ورک Firebolt React

Grep با مثال

“به عنوان مثال” یک راهنمای تعاملی برای یادگیری است grep CLI، ابزار جستجوی متنی است که معمولاً در سیستم‌های لینوکس یافت می‌شود. این آموزش های گام به گام را ارائه می دهد و به کاربران اجازه می دهد نمونه هایی را با تغییر دستورات در زمان واقعی آزمایش کنند.

رابط آموزشی تعاملی Grep CLI

افسانه های A11y

افسانه های A11y وب سایتی است که قصد دارد تصورات غلط رایج در مورد دسترسی به وب را از بین ببرد. اطلاعات و منابعی را برای کمک به شما در ایجاد تجربیات فراگیرتر و کاربرپسندتر در وب فراهم می کند.

افسانه های A11y که تصورات غلط رایج را رد می کند

AnalogJS

آنالوگ یک متا چارچوب برای ساخت وب سایت ها و برنامه ها با Angular است. این شبیه به Next.js یا Nuxt است، اما برای Angular ساخته شده است. ویژگی های کلیدی شامل پشتیبانی از Vite، Vitest، Playwright، مسیریابی مبتنی بر فایل، ادغام علامت گذاری برای مسیرهای محتوا، مدیریت مسیر API/سرور، و قابلیت های ترکیبی SSR/SSG است.

رابط متا فریم ورک AnalogJS Angular

WordPresser در Github

این افزونه کروم پیوندهای نمایه WordPress.org را در کنار نام‌های کاربری GitHub اضافه می‌کند. این به شما کمک می کند تا به راحتی کاربران وردپرس یا مشارکت کنندگان در Github را بشناسید و کارآمدتر همکاری کنید. این در هر دو کروم و فایرفاکس موجود است.

افزونه WordPresser GitHub Chrome

WordPress.com Studio

WordPress.com Studio یک برنامه دسکتاپ جدید برای کاربران وردپرس است که توسعه محلی را ساده می کند. این به شما امکان می دهد تا به راحتی کارهای محلی را برای همکاری با اعضای تیم یا مشتریان، ایجاد الگوها و الگوها، و سفارشی کردن سایت تنها با چند کلیک به اشتراک بگذارید.

رابط برنامه WordPress.com Studio

]
منبع: https://www.hongkiat.com/blog/designers-developers-monthly-04-2024/