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

admin6 روز پیش

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

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

آیا در مورد Git جدید شنیده اید؟ history دستورات؟ با نمایه عملکرد کروم گیج شده اید؟ و آیا استفاده می کنید inert ویژگی در سایت های شما؟

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

جنسیت می گوید:

من اخیراً در مورد گروه Wet Leg وقتی دیدم آنها در Tiny Desk در NPR در یوتیوب اجرا می کردند، متوجه شدم. از آن زمان، آلبوم Moisturizer آنها اغلب تکرار شده است.

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

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

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

Datatype یک فونت متغیر است که متن را به نمودار تبدیل می کند. 🤯 من نمی‌دانم این از نظر فنی چگونه کار می‌کند، اما قطعا می‌تواند برای گرافیک‌های جاسازی شده یا خطوط جرقه‌ای مفید باشد. سلب مسئولیت: از مسائل دسترسی آگاه باشید. احتمالا باید با یک role="img" و span ترکیبی هنگام استفاده از آن

خطوط منحنی که شبیه یک پاراگراف و عنوان هستند.

Redacted Script فونتی است که شبیه متن دست نویس است. من دوست دارم یک ظرف اسکلت با آن ببینم. 😅

چند بلوک سیاه روی سفید

و اگر خیلی فانتزی است، Flow Block همین کار را می کند، اما بدون دست خط.

شاید باید یک روز بنشینم تا بفهمم این همه جادوی فونت چگونه کار می کند…

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

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

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

کوله بار این هفته از Karma Points به نادیا و چارلز می رسد!

کوله بار تابستانی امتیازات کارما این هفته به نادیا و چارلز می رسد که شروع به حمایت مالی از وب ویکلی کرده اند. این تعداد حامیان را به 56 نفر می رساند.

پس از کسر هزینه های حمل و نقل و میزبانی وب، اکنون وب ویکلی حدود 160 دلار در ماه درآمد دارد. از همه شما برای حمایت از این خبرنامه سپاسگزاریم! ❤️

اگر از Web Weekly لذت می برید، با کمک مالی ماهانه کوچک به حامیان مالی Patreon یا GitHub آن را برگردانید. این واقعاً در این زمان‌های دشوار شلختگی هوش مصنوعی و ایجاد وب با تلاش کم اهمیت دارد.

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

فایرفاکس در WebAssembly

اینجا چیزی برای دیدن وجود ندارد، فقط مرورگری است که در مرورگر شما اجرا می شود.

فایرفاکس را راه اندازی کنید

بدون کد

بخش No Code این هفته کاملاً فنی بود.🫣 اگر مقالات خوبی در خارج از حباب فناوری دارید، آنها را به روش من شلیک کنید!

تجربی `git history` فرمان

تعمیر تاریخ git $ ghi9012

Git یک مورد جدید ارسال می کند history دستوری که تغییر و اصلاح commit ها را آسان می کند. اگر از rebasing تعاملی خوشتان نمی آید، واقعاً این را دوست خواهید داشت.

تاریخچه تغییرات

حالت های عنصر در جاوا اسکریپت و (!) CSS

جدید در Edge: نرده های عملکرد شبکه

Document-Policy: Network Performance Railings;report-to=neg-endpoint Reporting-Endpoints: neg-endpoint="/neg-report/"

من خیلی به این علاقه دارم! Edge اکنون با یک ویژگی آزمایشی عرضه می‌شود که به شما هشدار می‌دهد و فعالیت‌های شبکه را که بهینه نشده‌اند، مانند دارایی‌های فشرده نشده یا تصاویر بزرگ، نظارت می‌کند.

سریع باش

مشخصات عملکرد را درک کنید

پروفایل شبکه آبشار.

اگر از ابزار عملکرد Chrome DevTools می ترسید، این یکی را بررسی خواهید کرد. جوآن توضیحات خوبی از تمام جزئیاتی که باید بدانید را جمع آوری کرد!

وارد آن شوید!

سال‌هاست که همه افراد آنلاین این معامله را می‌دانند: وب‌سایت‌ها می‌توانند از شما انگشت نگاری کنند. شما را شناسایی کند. شما را دنبال کنید. به همین دلیل است که ما بنرهای کوکی را رد می کنیم. ما به دنبال دکمه رد همه هستیم. کمی احساس امنیت می کنیم. مرورگرهای مدرن دیگر به کوکی نیاز ندارند.

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

اثر انگشت خود را بشناسید

روی تصاویر رنگین کمانی

ظرفی با حاشیه قرمز که نشان می دهد این تصویر ممکن است سرریز شود.

در اینجا تمانی دوباره کارهای تمنی را انجام می دهد و نحوه تغییر و تنظیم گرادیان تصاویر فردی را با استفاده از آن توضیح می دهد. object-fit و object-position.

را عنصر (یک عنصر HTML) “کانتینر” است و منبع تصویر (تصویر واقعی) درون آن “کانتینر” بارگذاری می شود و به “محتوا” تبدیل می شود. ما رابطه ظرف-محتوای خود را داریم، بنابراین می توانیم در مورد سرریز صحبت کنیم.

این یک خواندن عالی برای درک مطلب است img اصول اولیه

درک تصاویر

مشاهده تعاملات بلوک انتقال

:root {view-transition-name: none;} ::view-transition { pointer-events: none;}

آیا تا به حال متوجه شده اید که “چیزها غیرقابل کلیک می شوند” هنگامی که یک انتقال view اجرا می شود؟ اگر انیمیشن های طولانی اجرا می کنید، کریس کارهایی را که می توانید در مورد آن انجام دهید به اشتراک می گذارد.

چیزها را تعاملی نگه دارید

تزئینات قطره منتشر شد – برخی از لینک ها

.decorated { grid-template: repeat(auto-fill,minmax(30px,1fr))/ repeat(auto-fill,minmax(30px,1fr));gap: 5px;قاعده: جامد;قاعده-رنگ: قرمز، قرمز، آبی; عرض قانون: 1px, 1px, 3px. }

از زمانی که طراحی مجدد Web Weekly را منتشر کردم، منتظر ارسال تزیینات شکاف CSS به مرورگرها بودم، زیرا طراحی شامل حاشیه‌های زیادی است و سبک دادن به همه چیز در بین نماها کمی دردسرساز شده است.

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

قوانین طراحی بصری

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

من تقریباً مطمئن هستم که این پست را سالها پیش خواندم (به نظر می رسد از آن زمان تمدید شده است) و هنوز برخی از قوانین را دنبال می کنم. این قوانین آسان برای به خاطر سپردن به شما کمک می کند اگر چشمی به طراحی ندارید.

چیزها را زیبا کنید

MDN تصادفی – `inert`

<div инертен><етикет за="бутон2">دکمه 2</label><идентификатор на бутона="бутон2">من بی تحرک هستم</button></div>
<p>” loading=”lazy”/></p>
<p>از آرشیو نامحدود دانش MDN…</p>
<p>اگر با عناصری سروکار دارید که اصلاً نباید در دسترس یا قابل دسترسی باشند، HTML <code>inert</code> ویژگی کمک می کند!</p>
<p>عناصر را بی اثر کنید</p>
<h2 id= خلاصه TIL – @keyframe انیمیشن ها در آبشار CSS

آبشار مشخص می کند که چه ویژگی هایی برای یک عنصر اعمال شود: 1. user-agent (مرورگر) 2. کاربر 3. نویسنده (توسعه دهنده) 4. انیمیشن های فریم کلیدی CSS 5. نویسنده (توسعه دهنده) !مهم 6. کاربر !مهم 7. کاربر-عامل (مرورگر) !مهم 8. انتقال CSS

آیا می دانستید که انیمیشن های فریم کلیدی جایگاه ویژه ای در آبشار CSS دارند؟ نه؟ پس این پست برای شماست!

متحرک کردن

جدید در پایه

سه تابع جدید به طور گسترده در دسترس: Array.fromAsync، تصاویر avif و :has()

به نظر نمی رسد ویژگی جدیدی وجود داشته باشد که اخیراً به جریان اصلی تبدیل شده باشد، بنابراین اجازه دهید سه مورد را که به تازگی به طور گسترده در دسترس قرار گرفته اند به اشتراک بگذارم! 🎉

من ممکن است پیر شده باشم، اما هنوز احساس می کنم که این ویژگی ها دیروز ظاهر شدند.

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

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

نموداری که مقایسه چارچوب های آزمایشی را نشان می دهد.

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

مقایسه کنید

فکر هفته

وقتی این هفته 41 ساله شدم، تک تک کلمات این پست را احساس می کنم. زنده نگه داشتن دوستی ها اغلب به کار سختی تبدیل می شود و اگر مراقب نباشید، «دوستان مادام العمر» می توانند به سرعت به «افرادی که قبلاً می شناختم» تبدیل شوند.