مقالات

هفته نامه وب شماره 196


تگ گوتن! تگ گوتن! 👋

آیا می دانید چه چیزی در نسخه جدید جاوا اسکریپت ارسال می شود؟ آیا قبلاً در مورد تمام ویژگی های فوق العاده موقعیت یابی لنگر می دانید؟ آیا از CSS استفاده می کنید؟ zoom?

آهنگ Web Weekly را روشن کنید و چند پاسخ را در زیر بیابید. لذت ببرید!


اولیویه می گوید:

از زمانی که تبلیغ اندروید Gemini Intelligence را تماشا کردم، در دو هفته گذشته در لیست پخش من تکرار شده است… 😀

آیا می خواهید آهنگ مورد علاقه خود را با انجمن وب ویکلی به اشتراک بگذارید؟ پاسخ را فشار دهید؛ وجود دارد پنج آهنگ دیگر در صف گیر کرده است


اگر وب ویکلی را دوست دارید، لطفاً آن را با دوستان و خانواده خود به اشتراک بگذارید.

یک “بازنشر” سریع واقعا به این خبرنامه مستقل کمک می کند. ممنون ❤️


خانواده هفتگی وب

کوله بار نقاط کارما این هفته به کریس، اسپایک، دن، جیمز و گریت، که همگی شروع به حمایت مالی از وب ویکلی کردند. این تعداد حامیان را به 53 نفر می رساند. پس از کسر هزینه های ارسال و میزبانی، Web Weekly اکنون کمتر از 150 دلار در ماه درآمد دارد.

از همه شما برای حمایت از انتشارات مستقل سپاسگزاریم. ❤️

چیزی که باعث شد این هفته لبخند بزنم

هفته نامه وب شماره 196

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

با غریبه ها صحبت کنید

بدون کد

موقعیت لنگر

.card { anchor-name: --card;   anchor-scope: --card, --card-actions;    .secondary-actions { anchor-name: --card-actions;   }}

من هنوز در مورد موارد استفاده برای موقعیت یابی لنگر (خط پایه جدید در دسترس) خارج از نمونه راهنمای ابزار تعجب می کنم. Emil توضیح می دهد که چگونه چندین لنگر به ایجاد همپوشانی نقشه قابل کلیک کمک می کند. چیزهای فانتزی!

                @container anchored(fallback: bottom) { padding: 24px 16px 16px 16px;       margin-top: 8px;       border-shape: var(--upwards-caret);     }

و اگر این لنگر به اندازه کافی نیست، جاش توضیح می دهد که چگونه با موقعیت لنگر شروع کنید. اما اشتباه نکنید، پست به موضوعات پیشرفته مانند anchored درخواست کانتینر و position-try-fallbacks به سرعت

شبکه‌ها در دسترس نیستند

.grid-lanes { display: grid-lanes;   grid-template-colons: repeat(3, 1fr);   تحمل جریان: 0; }

سافاری ارسال شد display: grid-lanes. Chromium روی آن کار می کند. اما وقتی عناصر موجود در شبکه جریان آزاد دارند و قابل تنظیم مجدد هستند، چه معنایی برای دسترسی دارد؟ میشه اصلاحش کرد flow-tolerance کمک؟ مانوئل همین سوالات را می پرسد و با احتیاط راه حل بسیار جالبی ارائه می دهد.

آگاه باشید

را color-scheme و prefers-color-scheme قطع کن

@container style(--dark: false) { .card { box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2); }}

اولی واقعیتی را توصیف کرد که واقعاً مرا شگفت زده کرد:

یک قطع تاسف بار بین طرح رنگ و پرس و جو رسانه prefers-color-scheme وجود دارد. prefers-color-scheme تنظیمات سیستم عامل را منعکس می کند – بدون در نظر گرفتن مقدار طرح رنگ. اگر سوئیچ در صفحه ای ارائه دهید که حالت تاریک را اعمال می کند، نمی توانید درخواست رسانه ترجیحی طرح رنگ را بپذیرید.

پس در مورد آن چه می کنید؟ این پست حاوی چند پاسخ در یک پلت فرم وب است.

از جدید و فانتزی استفاده کنید

پارامترهای CSS مرتبط 😱

img { پارامترهای اتصال: param(--color، green); } .foo { background-image: url("image.svg", param (--رنگ، سبز)); }

پس! اگر با آیکون‌های SVG کار می‌کنید، احتمالاً درد نوشتن رنگ‌ها را می‌دانید. پاتریک ویژگی‌های SVG از دست رفته را فهرست کرد و همانطور که مشخص شد مشخصات جدیدی در کار است که به متغیرهای CSS اجازه می‌دهد “خارجی” کنترل شوند. و من آن را تست نکردم، اما می گوید در حال حاضر در فایرفاکس ارسال می شود!

فایل های SVG خود را کنترل کنید

وب شگفت انگیز و عجیب – رولند 50

دو رابط سینت سایزر

علاقه مندان به موسیقی این را دوست خواهند داشت!

تولید

Deno و Vercel در برنامه های دسکتاپ سرمایه گذاری می کنند؟

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

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

اما سپس دیدم که ورسل اصرار دارد برنامه های دسکتاپ Zig و مبتنی بر وب را با Native SDK بسازد؟

راستش، چه خبر است؟ آیا این برای سهم بازار است؟ من آن را درک نمی کنم

لغزنده های محدوده چرخشی

سه لغزنده دامنه حرکتی

آنچه در بالا می بینید، عناصر بوم یا SVG نیستند. این سه نوار لغزنده کلاسیک هستند range ورودی ها با کمی جادوی CSS. من نمی دانم چگونه تمانی به این چیزها می رسد.

من حرکت می کنم

چیزهای جدید در ECMAScript

موارد جدید در ECMAScript 2026

این در حال حاضر یک سنت است، و من خوشحالم که Paweł هنوز در حال خلاصه کردن ویژگی های جدید جاوا اسکریپت است. ببینید چه چیزی در جاوا اسکریپت می آید.

از زبان استفاده کنید

از مزیت های برتر CSS استفاده کنید

.custom-select::picker(select) {min-block-size: calc-size(fit-content, min(size, 12em));}

جیک برای “بهبود” رفتار اندازه انتخاب های سفارشی (فعلا فقط برای Chromium) سفر کرد و اوه پسر… او در حال حرکت به سمت لنگر است، stretch و fit-content، و calc-size.مطمئنم اینجا بیش از یک سوراخ خرگوش برای شیرجه زدن پیدا خواهید کرد.

انتخاب کنید

آتش سریع

هر MDN – انتقال بین نماهای سند

@view-transition { ناوبری: خودکار; }

از آرشیو نامحدود دانش MDN…

یک یادآوری سریع، انتقال بین نماهای سند را می توان با چند خط CSS فعال کرد. Safari و Chromium آن‌ها را تامین می‌کنند تا بتوانید پولیش را به سایت‌های استاتیک خود اضافه کنید. هیچ آسیبی برای کاربران فایرفاکس وجود ندارد.

انتقال

خلاصه TIL – zoom

دو ویجت که تفاوت بین

چند وقت پیش با موارد استفاده معتبر برای CSS آشنا شدم zoom دارایی zoom?بله دقیقا.😅

بزرگنمایی کنید

به روز رسانی خودکار پایه

رابط کاربری برای پیکربندی اعلان های اولیه.

من ابزار خود را برای بررسی به‌روزرسانی‌های پایه دارم، اما اگر به‌روزرسانی‌های هفتگی وب کافی نباشد، webstatus.dev اکنون به شما امکان می دهد اعلان های اولیه را تنظیم کنید.

با ما همراه باشید

تبلیغات و دوستان

دوست من Orçun AutoShelf را ایجاد کرد و اگر می‌خواهید سازماندهی خودکار فایل را دارید، باید آن را بررسی کنید.

سه پروژه ارزشمند برای بررسی

یاور کوچک جدید

ua-tracer - عامل کاربر در واقع چه چیزی را واکشی، دنبال و اجرا می کند؟

اگر تا به حال از خود پرسیده اید که در هنگام خزیدن سایت ها چه ابزارهای تحلیلگر، عوامل کاربر یا مرورگرهای خاصی اجرا می شوند، ua-tracer کمک می کند!

بررسی کنید چه اتفاقی می افتد

نکته جانبی: آخرین بار اشاره کردم که در مورد آینده Tiny Helper چندان مطمئن نبودم زیرا صادقانه بگویم که در نمایش های کد vibe غرق شده ام. برخی از شما پاسخ دادید که واقعاً این بخش را دوست دارید. پس باید با آن چه کنم؟

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

فکر هفته

این چیزی است که من می توانم خیلی از آن عقب بمانم.

در یک دنیای ایده آل، تنها محتوای تولید شده توسط هوش مصنوعی که می خواهم مصرف کنم همان چیزی است که خودم درخواست می کنم.

از این موضوع چیزی یاد گرفتی؟

❤️ اگر چنین است، به 53 حامی دیگر Web Weekly بپیوندید و با کمک مالی ماهانه کوچکی به حامیان مالی Patreon یا GitHub برگردانید.

همین، دوستان!

آیا این ایمیل را دوست داشتید؟ از این ایمیل متنفرید؟ من می خواهم در مورد آن بشنوم!

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


و با آن، از خود مراقبت کنید – از نظر ذهنی، جسمی و عاطفی.

هفته آینده می بینمت! 👋

بپیوندید 6.4 هزار+ توسعه دهندگان و


Source link

نوشته های مشابه

دیدگاهتان را بنویسید

همچنین ببینید
بستن
دکمه بازگشت به بالا