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

admin7 روز پیش

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

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

آیا در مورد جدید شنیده اید عنصر HTML؟ استفاده می کنید round() در CSS شما؟ و آیا درخواست ها را با AbortSignal.timeout?

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

استفان می گوید:

موسیقی واقعا سنگین به BPM بالا، ضربات انفجار و میلیون ها نت نیاز ندارد.
گاهی اوقات تنها چیزی که لازم است یک ریف AF سنگین و یک موزیک ویدیو کاملاً مناسب است.

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

این هفته یاد گرفتم که فایرفاکس و سافاری گاهی اوقات بسته به سایتی که در آن هستید رفتار متفاوتی دارند. راستش هیچ نظری نداشتم. این چگونه ممکن است؟

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

دن در یک پست تحقیقاتی عالی وارد جزئیات شد. در اینجا چند نقل قول وجود دارد.

ظاهراً فایرفاکس و سافاری «فایل‌های عجیب و غریب» را ارسال می‌کنند که در کنترل نسخه به صورت عمومی در دسترس هستند.

فایل های Quirks فقط سایت های خراب را تعمیر نمی کنند. آنها غالباً کنترل کروم بر معنای “کار می کند” را در وهله اول جبران می کنند.

و کروم به یکی نیاز ندارد زیرا، صادقانه بگویم، این استاندارد است.

Chrome به چیزهای عجیب و غریب نیاز ندارد زیرا تفسیر کروم از استانداردهای وب، نسخه ای است که دیگران در حال اجرا هستند.

چه کاری می توانیم در مورد آن انجام دهیم؟ تست در چندین مرورگر!

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

این یک خواندن عالی است. ممنون دن!

و اگر می‌خواهید عمیق‌تر در موضوع سازگاری وب غواصی کنید: در اینجا یک نقشه مفید با تمام منابع وجود دارد.

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

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

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

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

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

مراقب باش!

بدون کد

زمانی که `O(n^2)` یک تله در دید آشکار پنهان شده است

دو قطعه کد با هم مقایسه می شوند. یکی O(n^2) و یکی O(n) دارد.

من به ندرت با نماد Big O سروکار دارم. آرال نحوه شناسایی کدهای بسیار پیچیده را توضیح می دهد و راه حل های سریع ارائه می دهد. آن را دوست دارم!

پاک کن

نحوه ایجاد طرح‌بندی مناسب برای موبایل

.chat-button { position: fixed; راست: calc(env(safe-area-inset-right) + 16px); پایین: calc(env(safe-area-inset-bottom) + 16px)؛}

کیلیان توضیح می دهد که چگونه safe-area-inset-* می تواند به شما مقداری پولیش اضافی در رابط های کاربری تلفن همراه بدهد. این پست همچنین شامل دموهای تعاملی است. خوب

به دستگاه احترام بگذارید

برگه های سبک ساختنی چیست؟

// ایجاد یک شیء شیوه نامه const sheet = new CSSStyleSheet();// Populate (همزمان) sheet.replaceSync(`button { background: hotpink; cursor: pointer; } `);// یا آن را به خود سند وصل کنید document.adoptedStyleSheets = [sheet];

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

به سبک ارسال کنید

HTML توضیحی بیشتر:

وب شگفت انگیز عجیب – کمی باران برای صفحه دوم شما

باران روی شیشه پنجره که به بیرون نگاه می کند.

اگر عاشق باران هستید و به دنبال یک تصویر آرامش بخش در صفحه دوم خود هستید، آن را دوست خواهید داشت!

از پنجره به بیرون نگاه کن

یونیکد، شکلک ها و جفت های جانشین

جدولی که واحدهای کد، نقاط کد و نمودارها را توضیح می دهد.

جورج اشکال مورد علاقه خود را در تمام دوران به اشتراک می گذارد و توضیح می دهد که چگونه یونیکد و شکلک ها در داخل کار می کنند. آن را دوست دارم

هر کدی که str.slice(0,1) یا str را اجرا کند[0] برای دریافت “نخستین علامت” به طور بالقوه شکسته شده است.

با خیال راحت به اشتراک بگذارید

آیا نیاز داریم `round()` در CSS؟

.title { font-size : round ( down , 15px , 2px ); }

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

گرد و گرد و گرد…

را `web-features-cli`

دستور wf و خروجی نمونه برای «user-invalid».

کوتاه و شیرین: اگر در ترمینال زندگی می‌کنید و می‌خواهید به پشتیبانی مرورگر، اشکالات، خطوط پایه و مشخصات در همانجا دسترسی داشته باشید، گروه اجتماعی W3C WebDX یک CLI جدید منتشر کرده است!🎉

درخواست ویژگی وب

MDN تصادفی – `AbortSignal.timeout`

try { const res = await fetch(url, { signal: AbortSignal.timeout(5000) });// ... } catch (err) { if (err.name === "TimeoutError") { console.error("بیش از 5 ثانیه طول کشید تا به نتیجه رسید!");} // ... }

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

میدونی میتونی بگذری AbortSignal روی مال شما fetch تماس می گیرد؟ و حتی سردتر، شما این را می دانید AbortSignal از یک روش انتظار پشتیبانی می کند؟ خب حالا شما این کار را می کنید!😎

لغو درخواست ها

خلاصه TIL – متن جایگزین برای محتوای تولید شده

.new-item::before { /* "ستاره سیاه" و محتوای عنصر خوانده می شود */ content: "★";/* "تاکید کرد" محتوای & عنصر خوانده می شود */ content: "★" / "تاکید کرد";/* محتوای تولید شده نادیده گرفته می شود و فقط محتوای عنصر خوانده می شود */ محتوا: "★" / "";}

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

جایگزینی را شناسایی کنید

جدید در پایه

از آوریل، search مورد به طور گسترده در دسترس است! و اگر در صدر هستید، ::highlight() پایه است، از ماه مارس در دسترس است.

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

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

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

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

سرویس اعتبار سنجی شماره

فقط به این دلیل که من به تازگی فیدهای Web Weekly را بررسی کردم، اگر فیدهای RSS را به وبلاگ خود ارسال کنید (که امیدوارم انجام دهید)، در اینجا اعتبار سنجی رسمی W3C وجود دارد. بیایید همه چیز را معتبر نگه داریم، درست است؟🫣

اعتبار سنجی

فکر هفته

حقیقت در مورد آن.

کوچک کردن تیم [because of AI] تعداد مواردی را که ممکن است اشتباه پیش بروند کاهش نمی دهد. تعداد افرادی که می توانند آنها را داشته باشند را کاهش می دهد.