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

admin1 هفته پیش

0 0 خواندن این مطلب 7 دقیقه زمان میبرد

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

آیا میدانستید که fetch دو فاز وجود دارد؟ آیا راهی بهتر از CSP برای کنترل اتصالات شبکه خروجی می خواهید؟ و آیا باید نقشه های وارداتی را به سایت های خود ارسال کنید؟

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

الن می گوید:

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

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

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

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

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

این بسیار عجیب است: اگر افرادی را در نظر بگیرید که گفتند احتمال ماندن و ترک فناوری تقریباً به همان اندازه است، 50٪ از شرکت کنندگان فکر می کردند که من 5 سال دیگر در زمینه فناوری کار نخواهم کرد یک امکان واقعی است من همچنین به شوخی می گویم که در نهایت یک کار “واقعی” انجام خواهم داد، اما تعجب می کنم که تعداد ما بسیار زیاد است. بیایید همه در جنگل برای خرد کردن چوب ملاقات کنیم!

در طی 5 سال آینده، چقدر احتمال می دهید که شغل خود را به دلایلی خارج از کنترل خود تغییر دهید؟ خیلی بعید: 23٪، تا حدودی بعید: 27٪، به همان اندازه محتمل / بعید: 24٪، تا حدودی احتمال: 18٪، بسیار محتمل: 8٪

28 درصد از مردم با صفحه کلید “نه چندان عالی” اپل تایپ می کنند؟ عجب! اگر شما هستید، مراقب مچ دست خود باشید و به #teamSplitKeyboard بپیوندید! این واقعا مهم است.

معمولا از چه نوع کیبوردی برای کار استفاده می کنید؟ صفحه کلید اپل: 28٪، صفحه کلید مکانیکی: 25٪، Logitech 15٪.

و برای بستن این نکته کوچک: بازی ویدیویی مورد علاقه است Clair Obscur: Expedition 33و پرخواننده ترین کتاب است Dungeon Crawler Carl. من هیچ کدام را نشنیده ام. آیا آنها آنقدر خوب هستند؟ آیا آنها را امتحان کنم؟ در هر صورت من یک پلی استیشن جدید برای GTA 6 می گیرم… 🫣

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

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

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

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

شاید متوجه شده باشید که من آخرین هفته نامه وب را چهار هفته پیش فرستادم. چه اتفاقی برای “هفتگی” افتاد؟

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

و دوم اینکه من خیلی سرم شلوغ بود. من به بازی کنفرانس برگشتم و در دو رویداد در ایالات متحده و یونان صحبت کردم. و علاوه بر آن، من دو ماراتن دوچرخه سواری “تا حدی فوق العاده” انجام داده ام (برای دوستداران دوچرخه Strava، بیایید وصل شویم!). و با پشت سر گذاشتن این رویدادها، صادقانه بگویم که وقت خواندن اخبار یا نوشتن خبرنامه را نداشتم. اما ما دوباره اینجا هستیم. پس بیایید مشغول شویم! 🎉

کوله بار نقاط کارما این هفته به دانیل و دیوید می رسد.

این هفته ما در مورد دانیل و دیوید هیجان زده ایم! از شما برای حمایت از وب ویکلی بسیار سپاسگزاریم. اکنون 58 نفر با مقداری پول به من کمک می کنند. با تشکر از همه!

این حرکات کوچک واقعاً مرا در این دوران سخت نارنجک‌های نامحدود نگه می‌دارد. اگر می‌خواهید از انتشارات مستقل نیز حمایت کنید، می‌توانید این کار را در حامیان مالی Patreon یا GitHub انجام دهید.

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

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

به سختی می‌توانستم زیبایی این سایت را به تصویر بکشم، اما صادقانه بگویم، این خیلی خوب است!

اگر تا به حال می خواستید یک وب سایت را نابود کنید، امروز روزی است که می توانید به این “پرتقال خنده دار” کوچک (نه رئیس جمهور) دستور دهید تا به عناصر شلیک کند. پرش از عناوین و تصاویر نیز بسیار هوشمندانه است.

اقلام را از بین ببرید

بدون کد

گاهی بهتر است چیزی نگویی → “[Social media dialogue] حرف زدن زیاد است نه زیاد گوش دادن. به همین دلیل است که اغلب به پایین‌ترین شکل‌های ارتباطی تنزل می‌یابد: فحش دادن، تمسخر، تمسخر، فریاد زدن، توهین».
درباره افتخار کردن در انجام کار ← “افراد وقتی می بینند (یا می فهمند) چقدر کار انجام داده اید، متوجه می شوند که چه کاری انجام داده اید.”
جزئیات را نمی‌خواهم → “یاد گرفته‌ام که “جزئیات را نمی‌خواهم” نادیده‌انگیز نیست.”

از آینده: پارامترهای مرتبط در SVG

سه روش مختلف برای استفاده از پارامترهای مرتبط

من قبلاً پارامترهای اتصال را در Web Weekly 196 به اشتراک گذاشته ام. درباره چیست؟

احتمالاً مشکل را می دانید: شما مقداری SVG را از جایی خارجی بارگیری می کنید و می خواهید چند رنگ یا متغیر را منتقل کنید. این واقعا تا الان امکان پذیر نبود. Firefox Nightly قبلاً اولین بخش از مشخصات ماژول پارامترهای محدود جدید را ارسال کرده است.

اگر می خواهید بیشتر بدانید Ollie یک TL;DR در مورد آن پست کرده است، اما برای مثال کاربردی تر، Vadim شما را پوشش داده است.

برخی از مقادیر را به هم وصل کنید

دو فاز از `fetch`

پاسخ const = await fetch(url) // await headers const body = await answer.json() // await body

آیا تا به حال به این فکر کرده اید که چرا باید دو بار برای دسترسی به بدنه پاسخ با استفاده از آن منتظر بمانید fetchمن این کار را نکردم، اما واقعاً از آن عصبانی شدم. با این حال، پس از خواندن پست گابور، همه چیز منطقی تر می شود. اولین await منتظر می ماند تا سرصفحه های پاسخ ارائه شود. دوم await منتظر پاسخ بدن و به طور کلی من آن را نمی دانستم response.body یک است ReadableStream.

اگه میخوای غصه بخوری fetch و JS داخلی، این مقاله را بررسی خواهید کرد.

استخراج را درک کنید

نکاتی برای زوم موبایل

و در مورد اقدامات زوم صحبت می کنیم، آیا تا به حال از یکی از آنها استفاده کرده اید touch-action ویژگی CSS؟ اندی توضیح داد که چه زمانی می تواند مفید باشد.

دو ضربه زدن را نادیده بگیرید

روشی جدید برای کنترل شبکه

لیست اتصالات مجاز: ("https://api.example.com/*" منشا پاسخ)

آیا شما یک سیاست امنیتی محتوا (CSP) را در سایت خود ارسال می کنید؟ راستش را بخواهید، قضاوت نمی کنم.

من انجام می دهم stefanjudis.com، و این کاملاً چیزی است. CSP همیشه قدرتمند بوده است، اما همچنین بسیار پیچیده به نظر می رسید. و وقتی یک استاندارد قدیمی خیلی پیچیده است چه کار می کنید؟ درست است، شما یک مورد جدید اختراع می کنید. اگرچه در این مورد (مثل همیشه) احساس خوبی دارد. من دوست دارم یک راه سریع برای مسدود کردن/حل کردن اتصالات داشته باشم. شما چه فکر می کنید

کنترل خود را حفظ کنید

این بد نیست که هنوز هیچ سند MDN واقعی برای این کار وجود ندارد … به نظر می رسد اسناد پلت فرم وب کم کم از بین می روند …

وب شگفت انگیز عجیب و غریب

صحنه رنگارنگ با گورخر.

من در طول سال ها مطالب وب عجیب و غریب زیادی را به اشتراک گذاشته ام، اما این سایت قطعاً در بین سه عجیب ترین سایت قرار دارد. من حتی نمی توانم توصیف کنم (یا بفهمم) اینجا چه خبر است، اما مرد… من عاشق اینترنت عجیب و غریب هستم.

برای جمع آوری چیزها؟

مسائل متن دو طرفه

نقاط شکست نامگذاری شده بدون درخواست رسانه

سبک @container(--viewport: 'mobile') { /* Styles for the mobile bucket */ }

قرار نیست دروغ بگم، هنوز ناراحتم @custom-media به جایی نمی رسد، اما اکنون که درخواست های سبک کانتینر به خط پایه رسیده اند، می توانید از آنها برای نام گذاری نقاط شکست خود با یک ترفند کوچک استفاده کنید.

نقاط شکست خود را نام ببرید

تور عناصر سفارشی براموس

قطعه های HTML برای "کلیدهای نمایش"، "ورودی غنی" و "پری دریایی عنصری" موارد سفارشی

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

عناصر سفارشی فقط CSS

my-card { display: grid; شبکه-الگو-مناطق: "هدر" "بدن" "پاورقی"; [slot="header"] { grid-area: header;} [slot="body"] { grid-area: body;} [slot="footer"] { grid-area: footer;}}

من احساسات متفاوتی در مورد رویکرد فقط CSS برتون به عناصر سفارشی دارم. اما نحوه استفاده او از اسلات بسیار هوشمندانه است! نظر شما چیست؟

سبک با عناصر سفارشی

MDN تصادفی – `importmap`

<тип скрипт="importmap">{ "واردات": { "دایره": "https://example.com/shapes/circle.js"، "مربع": "./modules/shapes/square.js" } } </script>” loading=”lazy”/></p>
<p>از آرشیو نامحدود دانش MDN…</p>
<p>اولی در مورد نیاز به ابزار برای ساخت در سال 2026 بحث کرد و من هنوز از آن شگفت زده هستم <code>importmap</code> این روزها به طور گسترده در دسترس است.</p>
<p>واردات</p>
<h2 id= TIL – فرار از انتخابگرهای CSS در جاوا اسکریپت

$console.log(`.${CSS.escape('a:b')}`);// ".a\:b" console.log(`[href=${CSS.escape('@')}]`);// "[href=\@]" console.log(`.${CSS.escape('[jooo]')}');// ".\[jooo\]"$

در اینجا یک آموخته عجیب از چند سال پیش آمده است: آیا می دانستید که وجود دارد؟ CSS فضای نام در جاوا اسکریپت که شامل متدی برای escape انتخابگرهای CSS؟ چرا

من موارد استفاده را در وبلاگ بررسی کردم.

فرار

جدید در پایه

به طور گسترده در دسترس است: "بررسی دید" / تازه موجود: "فیلد متنی"

با فایرفاکس 154 جدید text-box خلاصه CSS وارد خط مبنا شد newly availableاگر می‌خواهید اندازه جعبه‌های متن را کنترل کنید و از شر تمام فضای سفید مخصوص فونت خلاص شوید، باید آن را بررسی کنید. وقتش رسیده…

و در مقابل یک جدید widely available ویژگی های وب: آیا می دانستید که checkVisibility() روش چیزی است؟ حالا شما این کار را انجام می دهید و می توانید با خیال راحت از آن در هر کجا استفاده کنید!

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

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

لوگوی خود را روشن‌تر از سفید کنید — یک لوگو آپلود کنید، رنگ‌هایی را انتخاب کنید که روشن شوند، یک HDR JPEG دانلود کنید. در صفحه‌های HDR، قطعات انتخاب‌شده تا ۷.۵ برابر روشن‌تر از #FFFFFF می‌درخشند. هر جای دیگری یک JPEG کاملا معمولی است.

این قبلاً عالی است! ممکن است این تصاویر را دیده باشید که در کرومیوم یا سافاری «سفیدتر از سفید» هستند. این افکت بر اساس برخی از ترفندهای فوق‌العاده تصویر HDR است که در Web Weekly 190 به اشتراک گذاشتم. اگر می‌خواهید لوگوهای خود را نیز برجسته کنید، در اینجا یک وب‌سایت سریع برای انجام این کار وجود دارد!

روزت را روشن کن

فکر هفته

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