Category: طراحی سایت

ظهور پایگاه های داده بدون سرور (قسمت 1) – مجله Smashing

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

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

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

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

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

صفحات گسترده و سیستم های مدیریت محتوا

چی؟! صفحات گسترده؟ خب بله. رابط کاربری (شما و من، یا U و من، یا UI) کاملا شبیه به یک پایگاه داده است. صفحات گسترده جدولی را در اختیار شما قرار می دهند که در آن داده ها را ذخیره کنید. در برخی موارد، آنها فقط به شما اجازه می دهند تا انواع داده های خاصی را در هر ستون تعریف کنید. آشنایی‌ها وجود دارد، اما صفحه‌گسترده‌ها پس از باز کردن هود، پایان ناگهانی پیدا می‌کنند.

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

آ سیستم مدیریت محتوا (CMS) نوع دیگری از پایگاه داده است. “محتوا” نوع خاصی از داده است که CMS در آن تخصص دارد. این اطلاعات به کاربر (توسعه‌دهنده) انتزاعات کافی برای تسهیل مدیریت چنین داده‌هایی تا جایی که پایگاه داده زیربنایی نگران کننده نباشد، ارائه می‌دهد. این قابلیت تحویل، در دسترس بودن و یکپارچگی داده های شما را کنترل می کند. اما هر چه انتزاع سنگین تر باشد، مبادله بالاتر است. انواع داده‌ها محدود به آنچه که CMS به شما می‌دهد محدود می‌شود، حتی اکثراً معماری خود را برای مدیریت روابط، پرس و جوها، انواع و غیره تحمیل می‌کنند. البته، هنوز موارد استفاده قابل توجه و قابل‌توجهی برای CMS‌ها وجود دارد، و آنها به کار نمی‌روند. هر جا. بنابراین، تا زمانی که مطمئن باشید که اینطور است شما استفاده از مورد، شما خوب با یکی.

دردهای رشد

اگر مسیر ساده تر و «انتزاعی» یک صفحه گسترده یا یک CMS را به عنوان منبع حقیقت خود انتخاب کنید و داده های شما شروع به متنوع شدن کند، موانع ظاهر می شوند. اولین مشکل یک صفحه‌گسترده معمولاً مربوط به API اصلی است، اغلب برای ترافیک بیشتر برنامه‌های با اندازه متوسط ​​در نظر گرفته نشده است، و سپس اولین مکالمه‌های بازسازی مجدد وجود دارد.

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

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

بیشتر بعد از پرش! ادامه مطلب زیر ↓

مدیر پایگاه داده سخت است

به‌عنوان توسعه‌دهندگان فرانت‌اند، اولین باری که درباره پایگاه‌های داده صحبت می‌کنیم، معمولاً گفتگو درباره «رابطه‌ای در مقابل غیرمرتبط» است. از آن زمان به بعد، در حالی که سعی می کنیم تفاوت ها را بفهمیم، تعداد بیشماری از اصطلاحات مانند ACID، BASE و حتی CAP Theorem را می شنویم. این مقاله از توضیح کامل این تفاوت ها صرف نظر می کند. در قسمت بعدی این مجموعه بهتر به آنها خواهیم پرداخت. در حال حاضر، کافی است بگوییم پایگاه های داده «غیر رابطه ای» تحمیل می کنند ثبات نهایی روی یک برنامه

سازگاری نهایی را نیز می توان در یک بحث طولانی تر باز کرد، اما بیایید آن را به این صورت در نظر بگیریم:

سازگاری نهایی به این معنی است که در شرایط خاص خاص، داده های دریافتی کهنه هستند.

مانند نظرات در یک پست وبلاگ، اگر چند ثانیه بعد از یک کامنت روی برنامه شما تأثیری نگذارند نوشتن شما هنوز آخرین مورد را نمی بینید. اما به روز رسانی رمز عبور باید انجام شود به شدت سازگار است همیشه، نه در نهایت سازگار.

البته این تنها تفاوت ها نیست. عملکرد پرس و جو بین هر نوع پایگاه داده متفاوت است. می‌توان تصور کرد که در نهایت سازگاری باعث می‌شود سریع‌تر انجام شود می خواند زیرا اطمینان کمتری وجود دارد.

دردهای رشد بیشتر

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

  • آیا منابع بیشتری را به یک سرور اضافه می کنید؟ (مقیاس عمودی)
  • چگونه می توان داده ها را در مجموعه ای از ماشین ها تکرار کرد؟
    • آیا پایگاه داده خود را به پارتیشن های کوچکتر (شارد) تقسیم می کنید؟ (مقیاس افقی، بیشتر در مورد این در قسمت 2)
  • آیا برای پرس و جوهای رایج یک پایگاه داده در حافظه سریعتر در مقابل آن اضافه می کنید؟ (فروشگاه با ارزش کلیدی)

پاسخ به این سوالات آسان نیست. این بستگی به پایگاه کاربر، نوع داده، مقدار، فراوانی و منشاء پرس و جوها دارد. آیا پایگاه داده شما خواندنی یا نوشتن سنگین است؟ و اگرچه عوامل متعددی بر این تصمیم تأثیر می‌گذارند، انتخاب اشتباه هزینه بالایی نیز دارد.

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

حتی بیشتر از آن، زیر نظر داشتن پایگاه‌های داده (در حال حاضر «زیرساخت داده» اگر موتور جستجوی ترکیبی داشته باشیم) به سطح بالایی از مشاهده و مشاهده نیاز دارد. OLAP (پردازش تحلیلی آنلاین). این یک سطح کاملاً جدید از پیچیدگی را معرفی می کند!

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

پایگاه داده های بدون سرور سرگرم کننده هستند

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

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

برای درک اینکه واقعاً «پایگاه داده بدون سرور» چیست، ابتدا باید این اصطلاح را تجزیه کنیم. این یک شوخی رایج است که “بدون سرور” یک نام اشتباه است. با این حال، هدف معماری بدون سرور این است که پیچیدگی رسیدگی به قابلیت اطمینان سایت و نگهداری سرور ارائه شده توسط یک فروشنده بدون سرور، مانند Netlify، Vercel، Amazon Web Services (AWS) و بسیاری دیگر را از مصرف کننده (توسعه دهنده) دور کند. . من تمایل دارم که دوست داشته باشم تعریف Xata از “پایگاه داده بدون سرور”.

یک “پایگاه داده بدون سرور” همان کاری را که بدون سرور برای سرورها انجام می دهد، برای پایگاه داده ها انجام می دهد. پیچیدگی از بین رفته است (به درجات مختلف بسته به پلت فرم انتخاب شده). برخی، مانند Supabase و Firebase، بسیاری از ویژگی‌های مرتبط بدون سرور را برای همراهی با پایگاه داده شما ارائه می‌دهند. دیگران، مانند AWS Aurora یا PlanetScale، بر آسان‌تر کردن استفاده و مقیاس‌بندی PostgreSQL و MySQL DB تمرکز می‌کنند. و در نهایت، دیگرانی هستند که پایگاه داده را به طور کامل انتزاعی می کنند، مانند Xata. آنها یک SDK مانند ORM را در اختیار شما قرار می دهند، پایگاه داده را پشت یک API نگه می دارند و می توانند مجموعه پیچیده ای از ویژگی های پایگاه داده را ارائه دهند که محدودیت های فعلی پایگاه های داده سنتی رابطه ای و غیر رابطه ای را خم می کند.

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

باتری های گنجانده شده است

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

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

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

شما را در یکی بعدی

امیدواریم این برای تحریک کنجکاوی شما کافی بوده باشد. این اولین مقاله از یک مجموعه 3 قسمتی است. در موارد بعدی، ما اطلاعات عمیق تری را در مورد اینکه واقعاً چه پایگاه های داده ای را پوشش خواهیم داد هستند. به طور خاص، ما بررسی خواهیم کرد:

  • طرحواره ها
  • قضایا و مدل ها،
  • انواع پایگاه های داده،
  • هر آنچه را که در نظرات زیر پیشنهاد می کنید!

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

مطالعه بیشتر در مجله Smashing

سرمقاله Smashing
(yk, il)

Read More

ابزارهای Core Web Vitals برای افزایش امتیازات عملکرد وب – مجله Smashing

خلاصه سریع ↬
نمرات Core Web Vitals خود را شناسایی، مقایسه، تجزیه و تحلیل و اصلاح کنید تا عملکرد وب سایت های خود را افزایش دهید. این ابزارها به شما در انجام این کار کمک می کنند.

موفقیت وب سایت شما بستگی به تأثیری دارد که روی کاربرانش می گذارد. با بهینه سازی خود Core Web Vitals نمرات، شما می توانید اندازه گیری و بهبود تجربه کاربر. اساسا، الف وب حیاتی یک استاندارد کیفیت برای UX و عملکرد وب است که توسط Google تنظیم شده است. هر وب حیاتی یک جنبه مجزا از تجربه کاربر را نشان می دهد. می توان آن را بر اساس داده های واقعی کاربرانی که از سایت های شما بازدید می کنند اندازه گیری کرد (متریک میدانی) یا در محیط آزمایشگاه (متریک آزمایشگاهی).

در واقع چندین معیارهای کاربر محور برای تعیین کمیت حیاتی وب استفاده می شود. آنها نیز به تکامل خود ادامه می دهند: همانطور که گفتگوهایی در مورد افزودن تدریجی دسترسی و پاسخگویی به عنوان موارد حیاتی وب نیز وجود داشت. در حقیقت، Core Web Vitals تنها بخشی از این مجموعه بزرگ حیاتی هستند.

شایان ذکر است که Core Web Vitals نمره خوبی می گیرد لزوما به این معنی نیست که وب سایت شما در لایت هاوس در دهه 90 امتیاز بالایی کسب می کند. ممکن است در حالی که نمرات Core Web Vitals سبز رنگ داشته باشید، امتیاز Lighthouse بسیار نابهینه داشته باشید. در نهایت، در حال حاضر به نظر می رسد که تنها مورد دوم است به رتبه بندی سئو کمک می کند – هم در موبایل و هم روی دسکتاپ.

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

مقایسه سرعت صفحه

مقایسه سرعت صفحه یک ابزار ارزیابی و محک زدن سرعت صفحه است. عملکرد وب یک صفحه را با استفاده از آن اندازه گیری می کند Google PageSpeed ​​Insights. همچنین می تواند عملکرد چندین صفحه سایت شما یا وب سایت های رقبای شما را مقایسه کند. معیارهای آزمایشگاهی، معیارهای میدانی، منابع صفحه، اندازه DOM، زمان CPU و صرفه جویی احتمالی برای یک وب سایت را ارزیابی می کند. PageSpeed ​​Compare موارد حیاتی مانند FCP، LCP، FID، CLS و موارد دیگر را با استفاده از داده‌های زمین و میدان اندازه‌گیری می‌کند.

Filmstripes: رندر جدول زمانی
شما می توانید وب سایت خود را با رقبای خود در یک نوار فیلم در صفحه سرعت مقایسه مقایسه کنید. (پیش نمایش بزرگ)

گزارشی که ایجاد می کند، منابع بارگذاری شده توسط یک صفحه، اندازه کلی برای هر دسته نوع منبع و تعداد درخواست های انجام شده برای هر نوع را فهرست می کند. علاوه بر این، تعداد آنها را بررسی می کند درخواست های شخص ثالث و منابعی که یک صفحه می سازد. همچنین منابع ذخیره شده را فهرست می کند و جاوا اسکریپت استفاده نشده را شناسایی می کند. PageSpeed ​​Compare DOM صفحه را بررسی می کند و اندازه، پیچیدگی و فرزندان آن را تجزیه می کند. همچنین تصاویر استفاده نشده و تغییرات چیدمان را در یک نمودار شناسایی می کند.

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

PageSpeed ​​Compare داده‌ها را از گزارش CrUX Google استخراج می‌کند و توزیع تجربیات را برای چندین وب‌سایت نشان می‌دهد.
PageSpeed ​​گزارش عملکرد وب را برای توشیبا، دل و ایسر مقایسه کنید. (پیش نمایش بزرگ)

PageSpeed ​​Compare فراهم می کند گزارش عملکرد وب در یک نمای کلی داشبورد با مجموعه ای از نمودارها. میتونی مقایسه کنی حداکثر 12 صفحه در یک زمان و گزارش را به روشی ساده و خوانا ارائه می کند زیرا از PageSpeed ​​Insights برای تولید گزارش استفاده می کند. شبکه و CPU برای آزمایش‌های داده‌های آزمایشگاهی برای شرایط واقعی‌تر محدود شده‌اند.

انبوه Core Web Vitals را بررسی کنید

بررسی موارد حیاتی وب هسته انبوه Experte یک ابزار رایگان است که تا 500 صفحه از کل دامنه را می خزد و یک نمای کلی از امتیازات Core Web Vitals برای آنها ارائه می دهد. هنگامی که ابزار تمام صفحات را خزید، شروع به اجرای a می کند بررسی Core Web Vitals برای هر صفحه و نتایج را در یک جدول برمی گرداند. اجرای آزمون کمی طول می کشد، زیرا هر تست صفحه وب یکی یکی انجام می شود. بنابراین ایده خوبی است که اجازه دهید آن را اجرا کند 15-30 دقیقه برای دریافت نتایج خود

بررسی Bulk Core Web Vitals
انبوه Core Web Vitals را بررسی کنید دامنه شما را می خزد و امتیازات Core Web Vitals را تا 500 صفحه گزارش می کند. (پیش نمایش بزرگ)

آن وقت چه فایده ای دارد؟ در نتیجه، یک نمای کلی از صفحاتی که بهترین عملکرد را دارند، دریافت می کنید صفحاتی که بدترین عملکرد را دارند – و می تواند مقادیر را در طول زمان مقایسه کند. این ابزار در زیر هود، از Pagespeed Insights برای اندازه گیری Core Web Vitals استفاده می کند.

تو می توانی نتایج را به عنوان یک فایل CSV صادر کنید برای Excel، Google Sheets یا Apple Pages. فرمت جدولی که نتایج در آن برگردانده می شوند، مقایسه موارد حیاتی وب در صفحات مختلف را آسان می کند. این تست ها هم برای موبایل و هم برای دسکتاپ قابل اجرا هستند.

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

Treo

اگر به دنبال گزینه کمی پیشرفته‌تر برای بررسی انبوه Core Web Vitals هستید، این ابزار به خوبی نیازهای شما را پوشش می‌دهد. سرعت سایت Treo همچنین ممیزی سرعت سایت را با استفاده از داده های گزارش Chrome UX انجام می دهد، فانوس دریایی و PageSpeed ​​Insights.

سرعت سایت Treo
Treo یک نمای کلی بسیار دقیق از معیارهای عملکرد شما، از جمله معیارهای جغرافیایی و تجربی، مانند Interaction to Next Paint، ارائه می‌کند. (پیش نمایش بزرگ)

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

سرعت سایت Treo
Treo کل سایت را می خزد و نقاط پرت را برای امتیازات Core Web Vitals شما برجسته می کند. (پیش نمایش بزرگ)

با Treo Site Speed، شما همچنین می توانید یک وب سایت را در مقابل رقبا محک بزنید. گزارش هایی که Treo تولید می کند جامع هستند و بر اساس دستگاه ها و جغرافیا تفکیک می شوند. آنها گرانول هستند و در سطح دامنه و صفحه در دسترس هستند. می توانید گزارش ها را صادر کنید یا با استفاده از یک API به داده های آنها دسترسی پیدا کنید. آنها نیز هستند قابل اشتراک گذاری.

سرعت سایت Treo
Treo کل سایت را می خزد و نقاط پرت را برای امتیازات Core Web Vitals شما برجسته می کند. (پیش نمایش بزرگ)
بیشتر بعد از پرش! ادامه مطلب زیر ↓

تست WebPageTest Core Web Vitals

WebPageTest البته به تنهایی یک مجموعه تست عملکرد است. با این حال، یکی از ویژگی های مفیدی که ارائه می دهد، تفکیک دقیق آن است معیارهای Core Web Vitals و اشاره به مناطق مشکل دار و نحوه رفع آنها.

WebPageTest: معیارهای حیاتی وب مشاهده شده
WebPageTest نمرات Core Web Vitals را به همراه پیشنهاداتی برای بهبود گزارش می دهد. (پیش نمایش بزرگ)

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

اشکال زداهای تغییر چیدمان تجمعی

اساسا، دیباگر CLS به شما کمک می کند تا CLS را تجسم کنید. از Layout Instability API در Chromium برای بارگیری صفحات و محاسبه CLS آنها. CLS برای دستگاه های موبایل و دسکتاپ محاسبه می شود و تکمیل آن چند دقیقه طول می کشد. شبکه و CPU در حین آزمایش قطع می شوند و صفحات از ایالات متحده درخواست می شوند.

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


دیباگر CLS در عمل: برجسته کردن تغییرات فریم به فریم.

اگرچه CLS در ابتدا به عنوان یک معیار آزمایشگاهی محاسبه می‌شود، اشکال‌زدای CLS اندازه‌گیری‌های CLS را از گزارش Chrome UX نیز دریافت می‌کند. بنابراین، CLS میانگین 28 روز گذشته است. اشکال‌زدای CLS به شما امکان می‌دهد از میان‌افزارهای کوکی چشم پوشی کنید – به علاوه، می‌توانید گزارش‌هایی را برای کشورهای خاص نیز ایجاد کنید.

به طور متناوب، شما همچنین می توانید استفاده کنید Layout Shift GIF Generator. ابزار در دسترس است صفحه وب آن یا به عنوان یک ابزار خط فرمان. با ابزار CLI می توانید گزینه های اضافی مانند عرض و ارتفاع درگاه دید، کوکی هایی برای عرضه به صفحه، گزینه های خروجی GIF و روش محاسبه CLS.

پلی پن وب ویتال

اگر می خواهید امتیازات Core Web Vitals خود را در حین توسعه در نزدیکی خود نگه دارید، پلی پن وب ویتال یک ویژگی فوق العاده است که ارزش بررسی آن را دارد. پلی پان یک مرورگر مستقل برای توسعه وب است که شامل ابزارهایی برای دسترسی، طراحی واکنشگرا و اخیراً عملکرد و Core Web Vitals نیز می شود.

پلی پان اکنون با ویژگی Core Web Vitals دوباره ضربه می زند. (پیش نمایش بزرگ)

می‌توانید به‌طور خودکار امتیازات Web Vitals را برای هر صفحه جمع‌آوری کنید، و سپس در پایین صفحه شما نشان داده می‌شوند. این ابزار همچنین تجسم LCP را ارائه می دهد و تغییرات طرح را نیز نشان می دهد.

اشاره های قابل توجه

  • جستجوگر اصلی وب سایت Calibre’s Core به شما اجازه می دهد تا Core Web Vitals را برای صفحه خود با یک کلیک بررسی کنید. از داده‌های گزارش Chrome UX استفاده می‌کند و LCP، CLS، FID، TTFB، INP و FCP را اندازه‌گیری می‌کند.
کالیبر Core Web Vitals را نیز نمایش می دهد: فقط URL را وارد کرده و نتایج را دریافت کنید. آسان. (پیش نمایش بزرگ)
سرمقاله Smashing
(vf، yk، il)
Read More

یک راهنما – مجله Smashing

خلاصه سریع ↬
این راهنما به شما نشان می‌دهد که چگونه سایت jQuery خود را به React with Next.js منتقل کنید – که این کار مهمی است، مخصوصاً برای پایه‌های کد بزرگ. با این حال، این انتقال به شما امکان می دهد از مفاهیم جدیدتر (مانند واکشی داده ها در زمان ساخت) برای کمک به عملکرد و قابلیت نگهداری کد ما استفاده کنید.

جی کوئری سال هاست که به توسعه دهندگان خدمات خوبی ارائه کرده است. با این حال، کتابخانه‌ها (مانند React) و Frameworks (مانند Next.js) اکنون ویژگی‌های مدرن‌تری را برای کمک به عملکرد و قابلیت نگهداری کد ما به ارمغان می‌آورند. این راهنما به شما نشان می دهد که چگونه سایت جی کوئری خود را بازنویسی کنید استفاده از Next.js برای استفاده از تمام این ویژگی‌های جدید، مانند مسیریابی سمت سرویس گیرنده برای انتقال روان‌تر و توانایی تفکیک کد به اجزای آن برای استفاده مجدد بیشتر.

شروع شدن

ساده ترین راه برای شروع با Next.js اجرا کردن است npx create-next-app. این اراده داربست یک پروژه برای شما. با این حال، برای درک اینکه این دستور چه کاری انجام می دهد، برنامه خود را از ابتدا ایجاد می کنیم.

ابتدا پروژه Next.js خود را با استفاده از آن ایجاد می کنیم npm init. می توانید تنظیمات پیش فرض را ادامه دهید، زیرا بعداً آنها را تغییر خواهیم داد. سپس، می خواهیم React و Next.js را با استفاده از:

npm install react react-dom next

در مرحله بعد، ما می توانیم در را باز کنیم package.json فایل و جایگزین پیش فرض کنید scripts با:

"scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
}

این به شما امکان می دهد که بدوید npm run dev برای راه اندازی سرور توسعه؛ npm run build برای ساخت اپلیکیشن خود؛ و npm run start برای راه اندازی سرور آن برنامه ساخته شده.

برای افزودن صفحات – مثل شما index.html با jQuery – یک دایرکتوری به نام ایجاد کنید pages و یک فایل به نام ایجاد کنید index.jsx در آن داخل این فایل کد زیر را قرار دهید:

export default function Index() {
  return <h1>Hello World</h1> ;
}

حالا با دویدن npm run start و پیمایش به localhost:3000، باید ببینید a h1 تگ نمایش داده شد نام این تابع مهم نیست، بنابراین می توانید آن را هر چه می خواهید صدا کنید. با این حال، از یک تابع پیکان ناشناس استفاده نکنید، زیرا این کار مانع می شود تازه کردن سریع از کار کردن

بیشتر بعد از پرش! ادامه مطلب زیر ↓

CSS

در jQuery، می توانید CSS را بر اساس صفحه مشخص کنید و شیوه نامه های مختلف را برای صفحات مختلف وارد کنید. این نیز در Next.js با استفاده از next/head جزء و الف link مانند جی کوئری تگ کنید. به هر حال، راه‌های کارآمدتری برای این کار در Next.js وجود دارد.

شیت جهانی

راه اول با استایل شیت جهانی است. برای این کار باید یک سفارشی ایجاد کنیم App با ساخت فایل _app.js درون pages فهرست راهنما. نقطه شروع این فایل به شرح زیر است:

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

در بالای این فایل، می توانید یک دستور import اضافه کنید و هر فایل CSS را که می خواهید وارد کنید. به عنوان مثال، اگر یک پوشه جداگانه در سطح ریشه ایجاد کرده باشید به نام styles و بگذار main.css در آن، سپس اضافه کنید:

import "../styles/main.css"

اکنون، هر آنچه که در این فایل قرار دهید، در سراسر برنامه شما اعمال خواهد شد.

ماژول های CSS

گزینه بعدی ماژول های CSS است – که به شما امکان می دهد CSS را مشخص کنید هر جا در برنامه شما ایجاد خواهند کرد نام کلاس های منحصر به فرد از کلاس هایی که ارائه می کنید، بنابراین می توانید از یک نام کلاس در چندین مکان در کد برنامه خود استفاده کنید.

گسترش اولیه سلام دنیا به عنوان مثال، شما می توانید یک فایل ایجاد کنید index.module.css در همان دایرکتوری و سپس import را بنویسید:

import styles from "./index.module.css"

پس از آن، اگر بخواهید الف را تعریف کنید heading کلاس در فایل CSS، می توانید کارهای زیر را انجام دهید:

export default function Index() {
  return <h1 className={styles.heading}>Hello World</h1> ;
}

و آن سبک ها فقط برای آن عنصر اعمال خواهند شد.

JSX مدل دار

آخرین گزینه داخلی است سبک JSX. این بیشتر شبیه به گنجاندن a است <style> در بالای صفحه خود تگ کنید تا برخی از سبک ها را تعریف کنید. به سادگی اضافه کنید jsx به <style> تگ کنید و از یک رشته الگو در داخل استفاده کنید، مانند این:

<style jsx>{`
  .heading {
      font-weight: 700
  `}</style>

این گزینه این مزیت را دارد که در زمان اجرا قابل تغییر است. به عنوان مثال، اگر می‌خواهید وزن فونت را در اجزای سازنده خود قرار دهید، می‌توانید این کار را انجام دهید:

<style jsx>{`
  .heading{
      font-weight: ${props.fontWeight}
  `}</style>

یکی از معایب این روش معرفی آن است جاوا اسکریپت زمان اجرا اضافی را وارد برنامه خود کنید و اندازه را 12 کیلوبایت افزایش دهید (3 کیلوبایت gzipped).

مناسبت ها

در jQuery، ممکن است رویدادهایی برای پاسخ دادن به عناصر DOM تنظیم شده باشند. برای اینکه ایده ای به شما بدهد، ممکن است بخواهید کد را زمانی که a p برچسب کلیک می شود و این کار را به صورت زیر انجام دهید:

$( "p" ).click(function() {
    console.log( "You clicked a paragraph!" );
});

در عوض، React استفاده می کند گردانندگان رویداد – که ممکن است در HTML دیده باشید – مانند onclick. توجه داشته باشید که React به جای آن از camelCase استفاده می کند و همینطور onclick باید به عنوان ارجاع شود onClick. بنابراین، بازنویسی این مثال کوچک در React به شکل زیر است:

export default function Index() {
  function clickParagraph(){
    console.log("You clicked a paragraph!");
  }
  return <p onClick={clickParagraph}>Hello World</p>;
}

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

جلوه ها

از افکت ها در جی کوئری استفاده می شود نمایش و پنهان کردن محتوا. ممکن است قبلاً چیزی شبیه به این داشته باشید:

$( "p" ).hide();

در React این رفتار با استفاده از آن پیاده سازی می شود رندر شرطی. می توانید این را با ترکیب آن با جایگزینی برای رویدادهایی که اخیراً دیدیم مشاهده کنید:

import {useState} from "react"
export default function Index() {
  const [show, setShow] = useState(true);
  function clickButton(){
    setShow(false)
  }
  return (
    <div>
      <h1>Hello world</h1>
      {show && <button onClick={clickButton}>Click me</button>}
    </div>
  )
}

وقتی روی این دکمه کلیک کنید، مقدار آن تغییر می کند show به false و بنابراین، بیانیه چیزی را ارائه نمی کند. این را می توان با عملگر شرطی گسترش داد تا یک چیز یا چیز دیگری را نشان دهد، بسته به مقداری مانند این:

show ? <p>Show this if show is true</p> : <p>Show this if show is false</p>

واکشی داده ها

در jQuery از Ajax برای استفاده می شود واکشی داده های خارجی بدون بارگیری مجدد در React، این کار را می توان با استفاده از useEffect قلاب. برای این مثال، هنگام بارگیری صفحه، نرخ ارز را از یک API عمومی دریافت می‌کنیم:

import { useState, useEffect } from "react";
export default function Index() {
  const [er, setEr] = useState(true);
  useEffect(async () => {
    const result = await fetch("https://api.exchangerate.host/latest");
    const exchangerate = await result.json();
    setEr(exchangerate.rates["GBP"]);
  }, []);
  return (
    <div>
      <h1>Hello world</h1>
      <p>Exchange rate: {er}</p>
    </div> 
  );
}

useEffect یک تابع و یک آرایه وابستگی می گیرد. تابع با استفاده از واکشی داده ها را انجام می دهد async به عنوان fetch API به صورت ناهمزمان سپس می‌توانیم هر حالتی را که می‌خواهیم در آنجا تنظیم کنیم و در صفحه به‌روزرسانی می‌شود. آرایه وابستگی تعیین می کند که کدام تغییرات مقدار تابع را اجرا می کند. در این حالت، روی یک آرایه خالی تنظیم می‌شود که به این معنی است که تابع تنها زمانی اجرا می‌شود که صفحه برای اولین بار بارگذاری شود.

فراتر از این، Next.js نیز ارائه می دهد گزینه هایی برای واکشی داده ها در سرور یا در زمان ساخت برای زمان ساخت واکشی داده ها، تابع getStaticProps می تواند به کار رود. این تابع عملکرد را بهبود می بخشد زیرا داده ها را می توان با صفحه ارائه کرد – به جای انتظار در یک سرویس خارجی. برای استفاده از آن، این تابع را در a ایجاد کنید صفحه چون در کامپوننت ها کار نمی کند.

export async function getStaticProps() {
  return {
    props: {},
  }
}

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

با جایگزینی نام تابع از getStaticProps به getServerSideProps، تابع فراخوانی می شود در هر درخواست، به شما این امکان را می دهد که در صورت نیاز از توابع Node.js استفاده کنید. همچنین به شما این امکان را می‌دهد که درخواست‌های داده زیادی را روی سرور انجام دهید و آنها را پردازش کنید تا پهنای باند مورد استفاده مشتری را کاهش دهید.

شما همچنین می توانید یک راه میانی بین این دو به نام بازسازی استاتیکی افزایشی. این گزینه یک صفحه استاتیک را به همان روش ایجاد می کند getStaticProps، اما به شما امکان می دهد a را مشخص کنید دوره اعتبار سنجی مجدد – زمانی که درخواستی حداکثر به اندازه دوره ای که شما مشخص کرده اید، صفحه را دوباره ایجاد می کند. برای انجام این کار، باید در کنار لوازم جانبی، a revalidate با زمان بر حسب ثانیه که می خواهید کلید بزنید.

اشیاء در عناصر DOM

با jQuery، باید مراقب باشید که از کدام روش برای تبدیل یک شی به عناصر DOM استفاده می کنید. متداول‌ترین مثال این است که فهرستی از آیتم‌ها ایجاد کنید زیرا با jQuery، یک حلقه روی آیتم‌ها هر کدام را یکی یکی به DOM اضافه می‌کند. با React، DOM مجازی برای ایجاد استفاده می شود تفاوت های حالت جدید از فعلی این بدان معنی است که با وجود افزودن موارد در یک حلقه، آنها به عنوان یک عملیات به DOM واقعی اضافه می شوند.

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

export default function Index() {
  const fruits = ["Apple", "Orange", "Pear"];
  return (
    <div>
      <h1>Hello world</h1>
      <ul>
        {fruits.map((fruit) => (
          <li key={fruit}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

توجه داشته باشید که عنصر داخل map نیاز دارد الف key پشتیبانی این در فرآیند تفاوت که در بالا مورد بحث قرار گرفت استفاده می شود و تشخیص هر عنصر را برای React آسان می کند، بنابراین هر یک از این عناصر باید منحصر به فرد باشند.

معوق

استفاده از Deferred ها در jQuery را می توان با جاوا اسکریپت اصلی جایگزین کرد promise عملکرد. نحو برای deffereds طراحی شده است آینه عملکرد وعده ها، بنابراین نحو باید آشنا باشد و نیازی به تغییر زیاد نداشته باشد. یک مثال از جایی که ممکن است از deffered استفاده شود، in است واکشی داده ها. اگر این کار را با fetch روش در جاوا اسکریپت، سپس می توانید a اضافه کنید .then تا پایان واکشی همانطور که یک وعده را برمی گرداند. این کد فقط زمانی اجرا می شود که واکشی کامل شود و بنابراین داده (یا یک خطا) وجود خواهد داشت. شما می توانید این عملکرد را در حال استفاده در اینجا مشاهده کنید:

fetch("example.com")
.then((response) => {
  console.log(response)
})
.catch((error) => {
console.error(error)
})

این واکشی خواهد شد example.com و پاسخ واکشی شده را ثبت کنید مگر اینکه خطایی رخ دهد – در این صورت به عنوان یک خطا ثبت می شود.

علاوه بر این نحو، جدیدتر async/await از نحو نیز می توان استفاده کرد. اینها به تابعی نیاز دارند که به صورت تعریف شده است async، به همان روشی که ممکن است یک تابع را صادر کنید. شما می توانید آن را به این صورت اعلام کنید:

async function myFunction(){
  return
}

در داخل این تابع، می‌توانید با قرار دادن توابع غیرهمگام بیشتر فراخوانی کنید await در مقابل آنها، به عنوان مثال:

async function myFunction(){
  const data = await fetch("example.com")
  return data
}

این کد وعده ای را برمی گرداند که هنگام واکشی داده ها برطرف می شود، بنابراین باید در داخل یک تابع ناهمزمان فراخوانی شود تا منتظر نتیجه بماند. با این حال، برای اینکه خطاها را نیز دریافت کنید، باید یک شرطی بنویسید وضعیت پاسخ را بررسی کنید – اگر data.ok درست نیست، باید یک خطا پرتاب شود. سپس، می توانید این عبارات را به جای استفاده، در یک بلوک try catch بپیچید .catch. در این مقاله می توانید در مورد این روش ها بیشتر بخوانید.

بهبودها

مسیریابی

Next.js استفاده می کند مسیریابی سیستم فایل، که بسیار شبیه به استفاده از متفاوت است .html صفحات در یک وب سایت سنتی با این حال، این سیستم همچنین ویژگی های فراتر از آن را ارائه می دهد، مسیرهای پویا را ارائه می دهد و امکان دسترسی به یک صفحه را تحت طیف وسیعی از URL ها فراهم می کند.

به عنوان مثال، اگر یک وبلاگ دارید، ممکن است همه فایل های خود را در زیر نگه دارید /blog/*، ایجاد یک فایل [slug].jsx درون blog پوشه – که به آن محتوا اجازه می دهد برای همه صفحات زیر ارائه شود blog. سپس، می‌توانید از روتر در Next.js برای پیدا کردن مسیری که به آن پیمایش شده است استفاده کنید، مانند:

const router = useRouter()
const { slug } = router.query

مسیرهای API

مسیرهای API به شما این امکان را می‌دهند که باطن خود را در برنامه Next.js خود بنویسید. برای استفاده از این مسیرها، یک api پوشه در شما pages دایرکتوری – اکنون، هر فایلی که در داخل آن ایجاد می شود، مانند بقیه صفحات، به جای مشتری، روی سرور اجرا می شود.

برای شروع با اینها، باید صادرات یک تابع پیش فرض از فایل، و این می تواند دو پارامتر داشته باشد. اولی درخواست ورودی است و دومی به شما امکان می دهد پاسخ را ایجاد کنید. یک مسیر اصلی API را می توان به صورت زیر نوشت:

export default function handler(request, response) {
  response.status(200).json({ magazine: 'Smashing' })
}

محدودیت ها

رابط کاربری جی کوئری

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

انیمیشن

در حالی که می‌توانید به‌جای افکت‌ها از رندر شرطی استفاده کنید، این کارکرد یکسانی را ارائه نمی‌دهد، زیرا نمی‌توانید کارهایی مانند محو کردن محتوا را انجام دهید. یکی از کتابخانه هایی که به ارائه این قابلیت کمک می کند این است React Transition Group – که به شما امکان می دهد انتقال ورودی و خروجی را تعریف کنید.

نتیجه

حرکت از jQuery به Next.js یک است تعهد بزرگبه خصوص برای پایه های کد بزرگ. با این حال، این انتقال به شما امکان می‌دهد از مفاهیم جدیدتر (مانند واکشی داده‌ها در زمان ساخت) استفاده کنید و مسیرهای مهاجرت ساده‌ای به نسخه‌های جدید React و Next.js را به همراه ویژگی‌هایی که ارائه می‌کنند، تنظیم می‌کند.

React می تواند به شما کمک کند کد خود را بهتر سازماندهی کنید (که به ویژه برای پایگاه های کد بزرگ مهم است) و بهبود عملکرد قابل توجهی را از طریق استفاده از DOM مجازی به ارمغان می آورد. به طور کلی، من معتقدم که انتقال از jQuery به Next.js ارزش تلاش را دارد و امیدوارم اگر تصمیم به مهاجرت دارید، از تمام ویژگی‌هایی که React و Next.js ارائه می‌دهند لذت ببرید.

مطالعه بیشتر در مجله Smashing

سرمقاله Smashing
(nl)
Read More

نگاهی به SmashingConf SF 2022 — مجله Smashing

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

ماه گذشته اولین میزبانی خود را داشتیم آفلاین + برخط کنفرانس در سانفرانسیسکو همچنین این اولین کنفرانس حضوری ما از سال 2019 بود، و ما بسیار هیجان زده بودیم – و البته، کمی دلهره – که بازگشت به کنفرانس های حضوری از نو. در این مقاله، مایلیم دیدگاه خود را به عنوان برگزارکنندگان به اشتراک بگذاریم و نگاهی به رویدادهای آینده خود بیاندازیم.

چرا ما خیلی هیجان زده بودیم

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

20 و 21 ژوئن 2022 تاریخ بازگشت ما به میزبانی رویدادهای حضوری بود و این یک موفقیت بود!

شرکت کنندگان در SmashingConf SF
دیدن شرکت کنندگانی که برای اولین بار پس از سال ها برگشتند، باور نکردنی است. برخی از آنها حتی در اولین کنفرانس حضوری خود شرکت کردند. (اعتبار تصویر: مارک تیل) (پیش نمایش بزرگ)
شرکت کنندگان در SmashingConf SF
یک کنفرانس خوب بدون شبکه خوب اتفاق نمی افتد. بسیاری از شرکت کنندگان از آن برای ملاقات و گفتگو استفاده کردند، اولین بار پس از سالها. (اعتبار تصویر: مارک تیل) (پیش نمایش بزرگ)

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

و چون اسمشینگ یک تیم کاملاً از راه دور است، ما 2.5 سال همدیگر را ندیده بودیم &خط تیره؛ از زمان رویداد ما در نیویورک در اکتبر 2019. و بله، همه ما کمی پیر شده‌ایم (با موهای کمتر یا خاکستری‌تر و چروک‌ها و کیسه‌های زیر چشم‌هایمان بیشتر)، اما میزان انرژی که از این رویدادها دریافت می‌کنیم شگفت‌انگیز است. ما افراد زیادی را دیدیم پیدا کردن دوستان جدید، دوباره با دوستان قدیمی ارتباط برقرار کنید، الهام بگیرید، بخورید، بنوشید و مخلوط شوید – که باور نکردنی است.

برنامه کنفرانس

برنامه ما شامل دو روز گفتگوهای تک آهنگی بود که توسط دو روز کارگاه آموزشی همه جانبه “ساندویچ” شده بود. سخنرانان و کارگاه ها ترکیبی قوی از طراحی و قسمت جلویی موضوعات در Smashing، ما شدیداً به کنفرانس‌هایی با طیف وسیعی از موضوعات اعتقاد داریم (چون شما می‌توانید از هر سخنرانی چیزی یاد بگیرید)، و از این رو کنفرانس‌هایی را متمرکز بر یک چیز واحد انجام ندهید (ما این کار را در جامعه ما با رویدادها ملاقات می کند). موضوعات مختلف از CSS، سیستم‌های طراحی، و نوشتن تجربه کاربری گرفته تا یادگیری نحوه صحبت مجدد. و البته سورپرایزهایی مانند آدی عثمانی (به عنوان سخنران مرموز ما) – این بار در مورد درس های زندگی صحبت می کنیم تا عملکرد وب.

روز 1

نام گوینده عنوان گفتگو
برد فراست ایجاد سیستم های طراحی موضوعی
کیت کالسویچ افزایش دسترسی
رابین مارکس ازدواج با HTTP/3
شوبهی پانیکر راز زدایی از رهبری
میریام سوزان استایل دهی به وب درونی (با کوئری های کانتینر، لایه ها و محدوده)
الیوت جی استکس تایپوگرافی برای مردم

روز 2

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

علاوه بر برنامه در طول روز، ما چندین رویداد بزرگ عصرانه داشتیم، که از آن شروع شد جلسات جام جم – که ترکیبی از گفتگوهای کوتاه و اختلاط بود – و الف مهمانی افسانه ای Smashing جایی که ما مهارت‌های بازی خود (و موفقیت‌های اواخر قرن بیستم) و البته رقصیدن با مهارت‌های فوق‌العاده دی‌جی توبی را تقویت کردیم. از افراد سحرخیز برای شرکت در یک دعوت شد پل گلدن گیت 5K هر صبح کنفرانس نیز اجرا شود.

البته تمام جلسات ضبط شد و فیلم های کنفرانس چند هفته دیگر منتشر خواهد شد، پس لطفا با ما همراه باشید! 💌

محل برگزاری

امسال ما به افسانه بازگشتیم فورت میسون و واقعا از فضا استفاده کرد. کنفرانس اصلی در تئاتر تاریخی کاول برگزار شد. ما خوش شانس بودیم که آب و هوای فوق العاده ای داشتیم و این مکان نمادین ‐ با مناظر زیبای خلیج سانفرانسیسکو و خلیج پل گلدن گیت &خط تیره؛ مثل همیشه زیبا بود کارگاه‌ها در اتاق‌های جلسه پر از نور فورت میسون برگزار می‌شد و به شرکت‌کنندگان این فرصت را می‌داد که در یک محیط کوچک‌تر و به سبک کلاس درس به موضوعات طراحی و توسعه بپردازند.

پوستر کارگاه ها
ما بیش از 150 نفر به کارگاه های حضوری پیوستند، علاوه بر روزهای کنفرانس. (اعتبار تصویر: مارک تیل) (پیش نمایش بزرگ)
تصویری از Cassie Evans که در یک اتاق کارگاه نشسته است و در حال توضیح انیمیشن های SVG برای گروهی از مردمی که مشتاق یادگیری همه چیز در مورد وب فوق العاده هستند.
کیسی ایوانز برگزاری کارگاه حضوری در زمینه انیمیشن SVG. (اعتبار تصویر: مارک تیل) (پیش نمایش بزرگ)
تصویری از سوفی طاهران روی صحنه SmashingConf SF 2022
سوفی طاهران صحبت در مورد طراحی با کلمات در SmashingConf SF. (اعتبار تصویر: مارک تیل) (پیش نمایش بزرگ)

لوکیشن دوم ما بود مجازی; این بار، ما همچنین یک نسخه آنلاین از رویداد را از طریق مرکز آنلاین Vi.to خود میزبانی کردیم. با قابلیت پیگیری با کیفیت بالا پخش زنده کنفرانس از خانه (یا محل کار)، سؤالات خود را در چت بپرسید، و چند مصاحبه ساده در پشت صحنه را ببینید، این تجربه آنلاین یک گزینه عالی بود که در آینده به ارائه آن ادامه خواهیم داد.

تد بویر، یک طراح و توسعه دهنده فرانت اند مستقر در سیاتل، جریان را از راه دور دنبال کرده و در مورد تجربه خود نوشته است. تماشای آنلاین SmashingConf SF 2022.

دی جی توبی
یک و تنها: SmashingConf DJ توبی. (اعتبار تصویر: مارک تیل) (پیش نمایش بزرگ)

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

تصویری از آدی عثمانی و دی جی توبی روی صحنه با صورت آدی که توسط موهای مجعد فوق العاده اش پوشیده شده است.
واقعاً بسیار مرموز: بلندگوی مرموز ما برای SmashingConf SF 2022 بود آدی عثمانی. (اعتبار تصویر: مارک تیل) (پیش نمایش بزرگ)

بعد چه می شود؟

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

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

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

ناگفته نماند که ما بسیار خوشحال و مفتخریم که شما را در آنجا ملاقات کنیم – در فرایبورگ و/یا در نیویورک.

تصویری از چاریس رودا و آری استایلز که در گاری گلف نشسته اند
به زودی میبینمت! 👋 (اعتبار تصویر: مارک تیل) (پیش نمایش بزرگ)
سرمقاله Smashing
(به عنوان، vf، il)

Read More

ابزارهای قدرتمند بهینه سازی تصویر – مجله Smashing

خلاصه سریع ↬
بهینه سازی اندازه تصاویر می تواند تأثیر بیشتری بر عملکرد نسبت به سایر قسمت ها روی هم بگذارد. در این مقاله، لویی لازاریس ابزارهای مختلف موجود برای کاهش اندازه تصاویر را پوشش می دهد.

در سال های اخیر، جامعه توسعه وب به درستی این پیام را به طور گسترده منتشر کرده است که تصاویر اغلب بزرگترین منبع در هر صفحه وب هستند. در حالی که بسیاری از توسعه‌دهندگان زمان خود را صرف بهینه‌سازی سایر بخش‌های عملکرد یک صفحه وب می‌کنند، کاهش اندازه تصاویر می‌تواند تأثیر بیشتری بر عملکرد نسبت به همه بخش‌های دیگر روی هم بگذارد.

شاید قبلاً بدانید که مجله Smashing کتاب بهینه سازی تصویر اثر Addy Osmani را منتشر کرده است که این موضوع را با جزئیات کامل پوشش می دهد. اما این پست را به عنوان یک تعریف از کتاب در نظر بگیرید، زیرا این کار صرفاً بر ابزارهای مختلف موجود برای کاهش اندازه تصاویر تمرکز دارد.

فشرده سازی تصویر انبوه WebUtils

فشرده سازی تصویر انبوه WebUtils به شما امکان می دهد تصاویر را فشرده کرده و آنها را به WebP، JPG، PNG، AVIF و JXL تبدیل کنید. به نظر نمی رسد نشانه ای از محدودیت در اندازه فایل یا تعداد فایل ها وجود داشته باشد، اما اگر بخواهید تبدیل انبوه را انجام دهید، روند کندی است. همچنین می توانید کیفیت و اندازه را تنظیم کنید و همه چیز در سمت مشتری انجام می شود.

تصویری از وب سایت WebUtils Bulk Image Compress
فشرده سازی تصویر انبوه WebUtils تصاویر را به WebP، AVIF و JPEG-XL تبدیل می کند.

Compressor.io

Compressor.io به شما امکان می دهد JPEG، PNG، SVG، GIF، و WebP را با استفاده از فشرده سازی با اتلاف یا اتلاف تا 10 مگابایت در هر فایل بهینه کنید. اگر می‌خواهید فشرده‌سازی را سفارشی کنید یا از فایل‌های بزرگ‌تر استفاده کنید، باید طرح Premium را دریافت کنید. در این مورد، به نظر می رسد فشرده سازی در سمت سرور باشد، بنابراین نتایج بسیار سریع تری دریافت خواهید کرد.

تصویری از وب سایت Compressor.io
Compressor.io تصاویر را روی سرور فشرده می کند.

Imagecompresser.com

Imagecompresser.com به شما امکان می دهد تا حداکثر 10 فایل را به طور همزمان آپلود کنید و از فرمت های PNG، JPEG، WebP، JPG و GIF پشتیبانی می کند. به نظر نمی رسد محدودیتی در اندازه فایل در هر تصویر وجود داشته باشد، بنابراین احتمالاً برای فایل های بزرگ 10 یا کمتر به خوبی کار می کند.

تصویری از وب سایت Imagecompresser.com
آپلود فایل ها به صورت همزمان از طریق Imagecompresser.com.

AnyWebP

AnyWebP به طور خاص برای تبدیل تصاویر در قالب WebP است و می توانید خروجی به JPEG، PNG یا ICO داشته باشید. شما می توانید بر اساس اندازه یا کیفیت فایل سفارشی کنید. شما همچنین می توانید تقریباً هر فرمت فایل (TIFF، PSD، BMP، و غیره) را به WebP تبدیل کنید. این ابزار همچنین برنامه های بومی آفلاین را برای مک و ویندوز ارائه می دهد که به شما امکان تبدیل انبوه را می دهد. در هر صورت هیچ یک از فایل ها روی سرور آپلود نمی شوند.

تصویری از وب سایت AnyWebP
ابزارهایی مانند AnyWebP به شما کمک کند گردش کار خود را بهبود بخشد.

Compressimage.io

Compressimage.io بهینه سازی تصویر کاملا آفلاین بدون محدودیت در اندازه فایل یا تعداد فایل ها امکان پذیر است. تنها محدودیتی که به نظر می رسد این است که شما فقط می توانید JPEG و PNG را فشرده کنید. گزینه های سفارشی به شما امکان می دهد سطح فشرده سازی، اندازه تصویر و اگر می خواهید به WebP تبدیل کنید را تنظیم کنید. همچنین می توانید یک پسوند سفارشی به نام فایل اضافه کنید.

تصویری از وب سایت Compressimage.io
تلاش كردن Compressimage.io برای بهینه سازی تصویر قابل اعتماد
بیشتر بعد از پرش! ادامه مطلب زیر ↓

JPEG.rocks

JPEG.rocksهمانطور که از نام آن پیداست، یک بهینه ساز تصویر JPEG سازگار با حریم خصوصی، کاملاً سمت مشتری و منبع باز است. به نظر می رسد محدودیتی برای اندازه یا تعداد فایل ها وجود ندارد و می توانید کیفیت فایل خروجی را شخصی سازی کنید.

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

Compressor.js

Compressor.js کاملاً با سایر ابزارهای این لیست متفاوت است. این شامل حدود دوازده تنظیمات مختلف است که به شما امکان می دهد کیفیت تصویر، اندازه، نوع مایم و موارد دیگر را سفارشی کنید. تنها محدودیت بزرگ این است که شما باید یک فایل را در یک زمان انجام دهید. بنابراین این گزینه مناسبی برای تغییر اندازه انبوه نخواهد بود، اما برای بهینه سازی های خاصی که می خواهید روی یک تصویر خاص انجام دهید موثر است.

تصویری از وب سایت Compressor.js
Compressor.js از بومی مرورگر استفاده می کند canvas.toBlob API برای انجام کار فشرده سازی.

اسکووش

اسکووش توسط تیم Chrome Labs طراحی شده است. برنامه وب به یک تصویر محدود می‌شود، اما شامل چندین گزینه برای کاهش اندازه، پالت رنگ، انتخاب روش فشرده‌سازی، سطح کیفیت فشرده‌سازی و مجموعه‌ای از تنظیمات پیشرفته دیگر است. موتوری که این ابزار را نیرو می دهد به عنوان API یا CLI برای پردازش انبوه نیز موجود است.

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

SVGOMG

SVGOMG به طور خاص برای کاهش اندازه گرافیک SVG است. این یک رابط کاربری گرافیکی برای SVGO، یک ابزار مبتنی بر Node.js است. بهینه‌سازهای SVG مفید هستند زیرا بسیاری از برنامه‌هایی که SVG تولید می‌کنند، اطلاعات اضافی و بی‌فایده را در کد SVG که تصویر را تولید می‌کنند، شامل می‌شوند.

تصویری از وب سایت SVGOMG
شما قطعا می خواهید بدهید SVGOMG تلاش!

Optimizilla

Optimizilla از فشرده سازی با اتلاف برای کاهش اندازه تصاویر JPEG، GIF و PNG استفاده می کند. شما می توانید حداکثر 20 تصویر را آپلود کنید و می توانید قبل از دانلود، سطح فشرده سازی و کیفیت را برای هر یک از تصاویر سفارشی کنید.

تصویری از وب سایت Optimizilla
Optimizilla تصاویر JPEG، GIF و PNG را به حداقل اندازه ممکن کوچک می کند.

من را کوچک کن

من را کوچک کن به شما امکان می دهد تصاویر JPEG، PNG، WebP یا SVG را بدون افت کیفیت قابل تشخیص بهینه سازی کنید. هیچ محدودیتی در تعداد فایل ها یا اندازه فایل ها وجود ندارد، اما فایل های بزرگتر به معنای روند فشرده سازی کندتر است.

تصویری از وب سایت Shrink Me
را من را کوچک کن ابزار می تواند به شما کمک کند تا اندازه فایل تصویر خود را بدون کاهش کیفیت بصری کاهش دهید.

JPEG Stripper

JPEG Stripper فایل های JPEG را با حذف داده های غیر ضروری بهینه می کند. آپلود تنها یک تصویر را در یک زمان مجاز می‌کند، بنابراین این تنها برای چند تصویر در قالب JPEG مفید است.

تصویری از وب سایت JPEG Stripper
ایجاد شده توسط Toolsley، JPEG Stripper ابزاری است که می‌توانید از آن برای حذف تمام ابرداده‌ها از JPEG بدون تأثیر بر کیفیت تصویر استفاده کنید.

Shrink Media به شما امکان می دهد تصاویر PNG، JPEG و WebP را تا وضوح 5000×5000 بهینه کنید، و همچنین به عنوان یک برنامه تلفن همراه برای iOS یا Android در دسترس است. از لغزنده های تعاملی برای تغییر سطح کیفیت و ابعاد عکس استفاده کنید. شما همچنین می توانید URL را به یک تصویر بچسبانید، اما این ابزار فقط به شما امکان می دهد هر بار یک تصویر را بهینه کنید.

تصویری از وب سایت Shrink Media
Shrink Media به شما امکان می دهد تا اندازه تصاویر خود را به صورت رایگان کاهش دهید.

OptimizeImages

OptimizeImages به شما امکان می دهد اندازه SVG، PNG، JPEG، WebP، GIF، و AVIF را کاهش دهید در حالی که به شما امکان تبدیل به WebP یا AVIF را می دهد. حداکثر 30 تصویر را بهینه کنید و یک گزینه کیفیت فشرده سازی (توصیه شده، متوسط ​​یا فوق العاده) را انتخاب کنید.

تصویری از وب سایت OptimizeImages
OptimizeImages می تواند وب سایت شما را برای بررسی تصاویری که نیاز به بهینه سازی دارند اسکن کند.

ImagesTool.com شامل تعدادی ابزار مختلف دستکاری تصویر است. می توانید اندازه، تبدیل، فشرده سازی تصاویر و موارد دیگر را تنظیم کنید. پشتیبانی از JPEG، WebP، SVG، GIF و APNG. همه کارها در سمت مشتری انجام می شود، و شما می توانید بین فشرده سازی بدون ضرر و سفارشی یکی را انتخاب کنید. محدودیتی برای تعداد فایل هایی که می توانید بهینه سازی کنید وجود ندارد، و همچنین می توانید بر اساس پوشه آپلود کنید یا در تصاویر خود جایگذاری کنید.

تصویری از وب سایت ImagesTool.com
می توانید به ImagesTool.com برای پردازش تصاویر بدون آپلود فایل.

AVPress

AVPress کمی متفاوت است زیرا به طور خاص برای بهینه سازی فایل های ویدئویی و انیمیشن های GIF است. این اجازه می دهد تا یک ویدیو یا GIF واحد پردازش شود و شامل چندین سفارشی سازی و تنظیمات خروجی است که می توانید در فایل انتخابی خود اعمال کنید.

تصویری از وب سایت AVPress
ساخته شده توسط آدی عثمانی، AVPress 100% سمت مشتری است.

مبدل AVIF

مبدل AVIF به شما امکان می دهد تقریباً هر فرمت تصویری را به AVIF تبدیل کنید، یک فرمت فایل نسل بعدی که ظاهراً فشرده سازی بهتری نسبت به WebP، JPEG، PNG و GIF دارد. به نظر نمی رسد این برنامه محدودیتی در تعداد فایل ها یا اندازه فایل ها داشته باشد، اما توجه داشته باشید که فرمت AVIF هنوز در همه مرورگرهای مدرن پشتیبانی نمی شود.

تصویری از وب سایت AVIF Converter
مبدل AVIF به شما امکان می دهد تصاویر را به صورت رایگان و سریع به AVIF تبدیل کنید.

TinyPNG

TinyPNG ابزار قدیمی تری است که فایل های WebP، PNG یا JPEG را بهینه می کند. شما می توانید حداکثر 20 در یک زمان و حداکثر تا 5 مگابایت در اندازه آپلود کنید.

تصویری از وب سایت TinyPNG
TinyPNG از تکنیک های فشرده سازی هوشمند برای کاهش حجم فایل های WEBP، JPEG و PNG استفاده می کند.

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

  • SVGO ابزار محبوب بهینه سازی SVG است که هسته اصلی SVGOMG است که قبلا ذکر شد.
  • libSquoosh Squoosh API است که به شما امکان می دهد برنامه های جاوا اسکریپتی بسازید که تصاویر را در لحظه بهینه می کند.
  • Squoosh CLI یک ابزار خط فرمان برای استفاده از موتوری است که Squoosh را اجرا می کند.
  • pngquant یک ابزار خط فرمان به طور خاص برای بهینه سازی تصاویر PNG است.
  • esbuild-squoosh;
  • imagemin یک پروژه جاوا اسکریپت نگهداری نشده قدیمی است که به شما امکان می دهد تصاویر را به صورت برنامه ای بهینه کنید.

بسته به اینکه از چه ابزار ساخت یا اجرای وظیفه ای استفاده می کنید، imagemin فوق الذکر احتمالاً به عنوان یک افزونه برای ابزار انتخابی شما در دسترس است. در اینجا چند افزونه imagemin برای ابزارهای ساخت مختلف آورده شده است:

در نهایت، اگر در حال ساخت برنامه‌های بومی هستید که نیاز به پردازش تصویر و بهینه‌سازی سریع دارند، در اینجا برخی از گزینه‌های زبان برنامه‌نویسی C وجود دارد:

  • MozJPEG برنامه ای برای بهینه سازی تصاویر JPEG است که برای استفاده به عنوان کتابخانه در برنامه های گرافیکی، ابزارهای پردازش تصویر و برنامه های مشابه در نظر گرفته شده است.
  • jpegoptim ابزاری برای بهینه سازی فایل های JPEG است.
  • libvips یک کتابخانه برای پردازش تصاویر است.

ممکن است بخواهید ابزارها و منابع دیگری را برای بهینه سازی تصویر بررسی کنید. اینها لزوماً در دسته های بالا قرار نمی گیرند، اما ممکن است با یکی از موارد استفاده خاص شما مطابقت داشته باشند.

  • QOI
    فرمت تصویر کاملاً خوب یک فرمت تصویری است که تصاویر را بدون اتلاف به اندازه ای مشابه PNG فشرده می کند در حالی که کدگذاری 20x-50 برابر سریعتر و رمزگشایی 3x-4 برابر سریعتر ارائه می دهد.
  • JXL
    نه یک ابزار، بلکه یک وب سایت اجتماعی که حول فرمت تصویر JPEG XL متمرکز شده است.
  • UPNG.js
    این موتور PNG پشت برنامه محبوب Photopea است، یک رمزگشا و رمزگذار پیشرفته PNG/APNG که بهینه‌سازی بدون تلفات و تلفات را ارائه می‌دهد.
  • Optimus
    یک برنامه دسکتاپ بومی که به شما امکان فشرده سازی، بهینه سازی و تبدیل تصاویر را با پشتیبانی از فرمت های JPEG، PNG و WebP می دهد.
  • ImageOptim
    یک برنامه مک و پلاگین Sketch برای کاهش اندازه فایل های تصویری.
  • pngcrush
    ابزار فشرده سازی تصویر قدیمی که می تواند از طریق خط فرمان استفاده شود.
  • تریماژ
    یک اپلیکیشن کراس پلتفرم بومی و رابط خط فرمان برای بهینه سازی تصاویر JPEG و PNG.
  • PNGGauntlet
    یک برنامه بومی قابل تنظیم قدیمی برای ویندوز، مک و لینوکس که PNG را بهینه می کند و فرمت های مختلف را به PNG تبدیل می کند.
  • پنگیو
    یکی دیگر از برنامه های بومی که از pngquant برای بهینه سازی PNG استفاده می کند.

نتیجه

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

سرمقاله Smashing
(vf، yk، il)
Read More

استفاده از چیزی جز Docker برای پروژه ها – مجله Smashing

خلاصه سریع ↬
استفاده از Docker برای ساخت و اجرای برنامه‌ها و دستورات، نیاز به دانش قبلی در برخی ابزارها یا زبان‌های برنامه‌نویسی را برطرف می‌کند. همچنین، از نیاز به نصب ماژول ها و وابستگی های جدید به طور مستقیم به سیستم جلوگیری می کند، که توسعه را مستقل از ماشین می کند.

وضعیت زیر را تصور کنید: شما شروع به کار روی یک پروژه جدید می کنید، شاید همچنین با یک زبان برنامه نویسی متفاوت که به آن عادت ندارید. بنابراین، پروژه وجود دارد و شما باید بتوانید آن را اجرا کنید.

امیدوارید اسنادی وجود داشته باشد که به شما بگوید چه کاری انجام دهید – که چندان رایج نیست – و اگر/وقتی وجود داشته باشد، معمولاً کار نمی کند. تو باید بدانی چی برای نصب، جایی که برای نصب آن، چگونه این یک سناریوی غیر معمول نیست، و شما در واقع می توانید آن را در نقطه ای انتظار داشته باشید. اما اگر راهی برای اطمینان از عدم تکرار این اتفاق وجود داشت، چه؟

در طول این پست، رویکردهای مختلفی را خواهیم دید که می‌توانیم از آنها برای آسان‌تر کردن این کار فقط با استفاده از Docker استفاده کنیم.

زبانهای برنامه نویسی
(منبع: pngfind.com) (پیش نمایش بزرگ)

سطح اول: استفاده از نام مستعار با داکر

مثال با جاوا + Maven

برای مثال یک پروژه جاوا را در نظر می گیریم. معمولاً برای اجرای یک برنامه جاوا، اجرا می کنید java -jar application.jar.

برای تولید jar فایل‌ها و مدیریت وابستگی‌های پروژه، می‌توانید از ابزارهای مختلفی استفاده کنید که معروف‌ترین آن‌ها Maven و Gradle هستند. بیایید Maven را برای این مثال در نظر بگیریم. بیایید برخی از دستورات Maven را ببینیم:

  • mvn dependency:copy-dependencies
    اگر وابستگی ها هنوز دانلود نشده باشند، آن ها را دانلود می کند.
  • mvn package
    برنامه را می سازد و آن را تولید می کند jar. همچنین اگر وابستگی ها هنوز دانلود نشده باشند را دانلود می کند. اگر می‌خواهید از اجرای آزمایش‌ها در فرآیند ساخت صرفنظر کنید، می‌توانید آن را نیز پاس کنید -Dmaven.test.skip=true پارامتر.

با فرض اینکه به Maven 3 و Java 11 نیاز داریم، به این ترتیب می توانید از Docker استفاده کنید:

alias java="docker run -v "$PWD":/home -w /home openjdk:11-jre-slim java"
alias mvn='docker run -it --rm --name maven -v "$(pwd)":/usr/src/mymaven -w /usr/src/mymaven maven:3-jdk-11-slim mvn'

به این ترتیب می توانید هر دستور Maven و Java را بدون نیاز به نصب جاوا یا Maven اجرا کنید. می توانید دستورات را با اجرا تست کنید java -version یا mvn -version. معمولاً تصویر رسمی Docker این ابزارها به شما دستورالعمل هایی در مورد نحوه اجرای آن می دهد و شما فقط می توانید یک نام مستعار برای آن ایجاد کنید.

طرفداران:

  • اگر دیگر نیازی به استفاده از آن ندارید، می توانید تصویر Docker مربوطه را حذف کنید.
  • تغییر نسخه آسان است.

معایب:

  • در این مثال، شما هنوز باید دریابید که از چه نسخه جاوا و چه ابزاری (در این مورد Maven) و نسخه آن استفاده شده است.
  • اگر با یک زبان برنامه نویسی سر و کار دارید که نمی دانید، زمان بیشتری طول می کشد تا بفهمید چه کاری باید انجام دهید.
  • هنوز باید بدانید که کدام دستورات را اجرا کنید.

این یک رویکرد منصفانه است، به خصوص اگر بدانید که چه کاری انجام می دهید. اما این با خود پروژه همراه نیست. بنابراین، بیایید سعی کنیم آن را کمی بهبود دهیم.

بیشتر بعد از پرش! ادامه مطلب زیر ↓

سطح دو: استفاده از Docker برای اجرای برنامه

آنجاست Dockerfile شروع به درخشش می کند ما می دانیم که چگونه فقط با استفاده از Docker دستورات را اجرا کنیم، اما چگونه برنامه را اجرا کنیم؟

یک Dockerfile رایج برای آن موقعیت می تواند این باشد:

FROM openjdk:11-jre-slim

ARG JAR_FILE=target/*.jar

ADD ${JAR_FILE} app.jar

ENTRYPOINT ["java", "-jar", "/app.jar"]

و شما می توانید آن را به روشی که معمولاً یک تصویر داکر می سازید، با استفاده از آن بسازید docker build -t my-application .، مثلا.

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

به نظر می رسد یک پیشرفت بسیار جزئی است، اما در حال حاضر بسیار کمک می کند، همانطور که می توانید در مزایا / معایب آن ببینید:

طرفداران

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

منفی

  • هنوز باید نحوه ساخت اپلیکیشن را بیابید.
  • همچنین به این معنی است که شما هنوز باید بدانید که کدام دستورات را اجرا کنید.

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

سطح سه: استفاده از Docker برای ساخت و اجرای برنامه

اگر چیزی در مورد جاوا و Maven نمی دانستید و هنوز هم می توانستید برنامه را فقط با یک دستور که قبلاً می دانید بسازید، چه می کنید؟

آنجاست ساخت های چند مرحله ای درخشیدن

با ساخت‌های چند مرحله‌ای، از چندین عبارت «FROM» در Dockerfile خود استفاده می‌کنید. هر دستور «FROM» می‌تواند از پایه متفاوتی استفاده کند و هر کدام از آنها مرحله جدیدی از ساخت را آغاز می‌کنند. شما می توانید به طور انتخابی مصنوعات را از یک مرحله به مرحله دیگر کپی کنید و هر چیزی را که نمی خواهید در تصویر نهایی پشت سر بگذارید.

چگونه می تواند به ما کمک کند؟ خوب، اجازه دهید Dockerfile قبلی را در نظر بگیریم. ما به یک نیاز داشتیم JAR فایل برای ساخت تصویر داکر. با ساخت چند مرحله ای، خود Dockerfile می تواند مسئول تولید آن باشد. در یک رویکرد ساده، Dockerfile به شکل زیر است:

# ============= DEPENDENCY + BUILD ===========================
# Download the dependencies on container and build application
# ============================================================

FROM maven:3-jdk-11-slim AS builder

COPY ./pom.xml /app/pom.xml
COPY . /app

WORKDIR /app

RUN mvn package $MAVEN_CLI_OPTS -Dmaven.test.skip=true

# ============= DOCKER IMAGE ================
# Prepare container image with application artifacts
# ===========================================

FROM openjdk:11-jre-slim

COPY --from=builder /app/target/*.jar app.jar

ENTRYPOINT ["java", "-jar", "/app.jar"]

بیایید ببینیم اینجا چه خبر است.

از اول FROM به اولی RUN بیانیه، در حال انجام کارهای مربوط به Maven است – کپی کردن فایل هایی که باید کپی شوند و دستوری را اجرا می کند که وابستگی ها را دانلود می کند و برنامه را می سازد. این کار را با استفاده از maven:3-jdk-11-slim تصویر، و نام را تنظیم می کند builder.

بعد از آن دومی را می بینید FROM بیانیه با استفاده از openjdk:11-jre-slim تصویر شما همچنین می بینید COPY بیانیه ای که از مکانی به نام کپی می شود builder. اما اون چیه محل? آن چیست سازنده?

این نامی است که در ابتدا برای تصویر Maven تعیین کردیم FROM بیانیه. داره کپی میکنه jar فایل از آن ظرف بنابراین، شما می توانید به معنای واقعی کلمه با موارد مختلف بازی کنید FROM ورودی‌ها برای ساختن هر چیزی که می‌خواهید، و دستور ساخت تصویر Docker همچنان یکسان است: docker build -t my-application ..

طرفداران:

  • صرف نظر از زبان برنامه نویسی، اگر پروژه دارای این رویکرد باشد، می توانید برنامه را بدون نصب چیزی غیر از Docker اجرا کنید.
  • از جوانب مثبت به ارث می برد مرحله اول و سطح دو.

شایان ذکر است که می توانید از این Dockerfile نیز استفاده کنید Docker Compose، که می تواند واقعاً قدرتمند باشد، به خصوص اگر برنامه شما نیاز به نمایش پورت ها، به اشتراک گذاری حجم ها یا بستگی به تصاویر دیگر دارد.

پیوست: استفاده از Docker برای هر دستور اصلی

اکنون که می دانید چگونه با بازی های مختلف بازی کنید FROM اظهارات، یک Dockerfile ممکن دیگر می تواند باشد:

# ============= DEPENDENCY RESOLVER =============
# Download the dependencies on container
# ===============================================

FROM maven:3-jdk-11-slim AS dependency_resolver

# Download all library dependencies
COPY ./pom.xml /app/pom.xml

WORKDIR /app

RUN mvn dependency:copy-dependencies $MAVEN_CLI_OPTS

# ============= TESTING =================
# Run tests on container
# =======================================

FROM dependency_resolver AS tester

WORKDIR /app

CMD mvn clean test $MAVEN_CLI_OPTS

# ============= BUILDER =================
# Build the artifact on container
# =======================================

FROM dependency_resolver as builder

# Build application
COPY . /app

RUN mvn package $MAVEN_CLI_OPTS -Dmaven.test.skip=true

# ============= DOCKER IMAGE ================
# Prepare container image with application artifacts
# ===========================================

FROM openjdk:11-jre-slim

COPY --from=builder /app/target/*.jar app.jar

ENTRYPOINT ["java", "-jar", "/app.jar"]

بنابراین، اکنون ما چهار مرحله مختلف داریم: dependency_resolver، tester، builderو خود برنامه

اگر بخواهیم برنامه را بسازیم یا آن را آزمایش کنیم، به وابستگی های پروژه نیاز داریم. بنابراین، یک وجود دارد dependency_resolver آنجا قدم بگذار در دومی و سومی FROM بیانیه ها، می توانید ببینید که به آنها بستگی دارند dependency_resolver.

مهم: اگر سعی کنید تصویر داکر را با docker build -t my-application .، فقط اولین و سومین و آخرین مرحله (dependency_resolver، builderو خود برنامه به ترتیب) اجرا می شود.

اما چرا؟

وقتی سعی می‌کنید تصویر را بسازید، سعی می‌کند ببیند وضعیت نهایی تصویر چیست، که خود برنامه کاربردی خواهد بود. همانطور که می دانیم و می بینیم، آخرین مرحله بستگی به این دارد builder (COPY بیانیه). اگر بررسی کنیم builder مرحله، خواهیم دید که بستگی دارد dependency_resolver (FROM بیانیه). بنابراین، به ترتیب زیر اجرا می شود:

dependency_resolver -> builder -> برنامه

بعدش چیه tester مرحله انجام وجود دارد؟ آیا راهی برای رسیدن به آن وجود دارد؟

با استفاده از آن می توانید یک هدف را مشخص کنید --target: docker build --target tester -t my-application ..

این هم هست سازگار با Docker Compose.

نتیجه

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

امیدوارم این پست برای شما مفید بوده باشد و در مورد Docker اطلاعاتی را منتشر کنید.

سرمقاله Smashing
(yk, il)
Read More

نگاهی به ریمیکس و تفاوت با Next.js – مجله Smashing

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

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

بیایید در مورد Remix صحبت کنیم، چارچوب (نوعی) جدید برای ایجاد پروژه های جاوا اسکریپت با استفاده از رندر سمت سرور. بیایید ویژگی‌ها و مفاهیم اصلی آن را مرور کنیم و شباهت‌ها و تفاوت‌ها را با یکی دیگر از چارچوب‌های محبوب جاوا اسکریپت ببینیم: Next.js.

ریمیکس چیست؟

مطابق با وب سایت رسمی آنRemix یک فریم‌ورک کامل پشته‌ای است که به توسعه‌دهندگان اجازه می‌دهد تا با تمرکز بر استانداردهای وب، تجربیات کاربری عالی ایجاد کنند. با استفاده از آن، می توانید برنامه وب خود را با استفاده از React و JavaScript برای رندر سمت کلاینت و رندر سمت سرور ایجاد کنید.

همانطور که بر روی Web Fetch API ساخته شده است، برنامه های ایجاد شده با Remix می توانند در هر جایی اجرا شوند. Remix از رندر سمت سرور برای دستکاری داده ها و ارائه محتوای HTML در سرور استفاده می کند و مقدار کمتری از جاوا اسکریپت ممکن را برای مشتری ارسال می کند.

Remix در ابتدا یک چارچوب حق بیمه مبتنی بر اشتراک بود، اما کمتر از یک سال پیش، به عنوان یک چارچوب منبع باز راه اندازی شد. پس از این، جامعه توسعه دهندگان و کاربران Remix شروع به رشد کردند و محبوبیت بیشتری پیدا کردند.

ویژگی های اصلی ریمیکس

بیایید برخی از ویژگی های اصلی ارائه شده توسط Remix را برجسته کنیم:

  • مسیرها:
    مانند سایر فریم ورک‌ها، Remix به توسعه‌دهندگان اجازه می‌دهد تا مسیرهای مختلف پروژه‌های وب خود را با استفاده از فایل‌های JavaScript/TypeScript که حاوی توابع کنترل‌کننده هستند، مدیریت کنند. ما می‌توانیم مسیرهایی را در وب‌سایت خود ایجاد کنیم و فایل‌هایی را ایجاد کنیم که از سلسله‌مراتب سیستم فایل پروژه‌های ما پیروی می‌کنند و URLهای آنالوگ برای صفحات خود ایجاد می‌کنند. مسیرهای ریمیکس با استفاده از ویژگی مسیریابی جزئی ارائه شده توسط React-Router. با در نظر گرفتن این رویکرد، می توانیم مزایای زیر را برجسته کنیم.

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

  • رسیدگی به خطا:
    کامپوننت‌های تودرتو یک مزیت دیگر نیز به همراه دارند: اگر هنگام رندر کردن یک مؤلفه خاص خطایی رخ دهد، بر سایر بخش‌های تودرتوی صفحه تأثیری نمی‌گذارد. بنابراین، می‌توانیم به جای دریافت خطای کلی صفحه، خطا را فقط در قسمتی که رخ داده است، کپسوله کنیم.

  • تشکیل می دهد:
    از آنجایی که Remix بر روی استانداردهای وب تمرکز دارد، از روش های بومی استفاده می کند (POST، PUT، DELETE، PATCH) برای رسیدگی به فرم ها به جای استفاده از جاوا اسکریپت برای آن.

  • لودرها و اقدامات:
    Remix دو نوع عملکرد مختلف را برای ایجاد محتوای پویا سمت سرور ارائه می دهد. را loader توابع برای رسیدگی استفاده می شود GET درخواست های HTTP در سرور، عمدتا برای دریافت داده ها از منابع مختلف استفاده می شود. را action مانیتور توابع POST، PUT، DELETE، و PATCH درخواست ها، متمرکز بر دستکاری و اصلاح داده ها.

اکنون که در مورد برخی از ویژگی‌های اصلی Remix صحبت کردیم، اجازه دهید آن را با یکی از محبوب‌ترین و پرکاربردترین فریمورک‌های React امروزه مقایسه کنیم: Next.js.

بیشتر بعد از پرش! ادامه مطلب زیر ↓

تفاوت Remix و Next.js چیست؟

اگر نگاهی گذرا بیندازیم، ممکن است به نظر برسد که Next.js و Remix همان هدف را دنبال می‌کنند – و احتمالاً هم همینطور هستند. اما اگر ویژگی‌ها و رویکردهایی را که ارائه می‌کنند تحلیل کنیم، شباهت‌ها و تفاوت‌ها را شناسایی می‌کنیم و می‌توانیم به حل سناریوها با یکی از چارچوب‌ها بیشتر از دیگری فکر کنیم.

React Based

هر دو فریم ورک در بالای React ایجاد شده اند، اما Remix سعی می کند خود را از آن جدا کند. می بینیم که Remix سطوح بالاتری از انتزاع را ارائه می دهد. همچنین، اعضای مختلف جامعه Remix روی پیاده سازی های مختلف کار کرده اند با استفاده از چارچوب های دیگرمانند Vue.js، Angular و Svelte. Next.js به React وابسته است و در حال حاضر برنامه ای برای تغییر آن وجود ندارد.

رندر سمت سرور

علاوه بر ویژگی‌هایی که در بالا ذکر کردیم، می‌توانیم ببینیم که هم Remix و هم Next.js رندر سمت سرور (SSR) را برای تولید نشانه‌گذاری و محتوای صفحات ما از وب سرور قبل از ارسال آن به مشتری ارائه می‌کنند.

در حالی که احتمالا Next.js متکی به رویکرد هیدراتاسیون سمت کلاینت است که بومی React است، Remix سعی می کند تا جایی که ممکن است محتوای سمت سرور تولید کند. این به جلوگیری از ارسال کد جاوا اسکریپت، تولید محتوا و واکشی داده ها از مشتری کمک می کند.

تولید سایت استاتیک

از طرف دیگر، Next.js امکان پیش تولید صفحات و محتوای ثابت را در زمان ساخت، با استفاده از تولید سایت ایستا (SSG) ارائه می دهد، در حالی که Remix این کار را نمی کند. بسته به نوع صفحاتی که می‌خواهیم ایجاد کنیم، این ویژگی چیزی است که می‌تواند مزایای بزرگی را ارائه دهد. با SSG می‌توانیم داده‌ها را واکشی کنیم و صفحات را در زمان ساخت رندر کنیم، قبل از بازدید کاربران از وب‌سایت ما، صفحات ثابت داشته باشیم، بدون اینکه منتظر تولید محتوا باشیم.

اما SSG همچنین می تواند مشکل ساز شود: هر زمان که تغییراتی را در کد یا محتوای برنامه خود اعمال می کنیم، باید منتظر یک فرآیند ساخت برای تولید نسخه جدید دارایی های ثابت باشیم. این می تواند به یک نقطه دردناک تبدیل شود، زیرا اگر پروژه ما بزرگتر و بزرگتر شود، زمان ساخت افزایش می یابد. برای رسیدگی به این مشکل، تیم Vercel یک ویژگی به نام توسعه داد بازسازی استاتیکی افزایشی (ISR)، و کاملاً جدید ISR درخواستی.

قدیمی در حالی که اعتبار مجدد

برای ارائه هرچه سریعتر محتوا، Remix بر روی آن تکیه دارد دستورالعمل ذخیره سازی stale-while-revalidate (SWR). به جای اینکه محتوای ایستا را از قبل تولید کند، زمانی که برنامه ترافیک دریافت می کند، حافظه پنهان را آماده می کند. صفحات و اسناد از حافظه پنهان ارائه می‌شوند، در حالی که در پس‌زمینه برای بازدیدکننده بعدی اعتبارسنجی مجدد می‌شوند.

ناوبری سمت مشتری

یکی از ویژگی هایی که Next.js برای ارائه یک ناوبری روان به کاربران استفاده می کند این است از پیش واکشی. ما می توانیم استفاده کنیم <Link> کامپوننت برای ساختن وب سایت ما برای از پیش بارگذاری صفحه که <link> به زمانی که عنصر در viewport ظاهر می شود هدایت می شود. اگر از صفحه اصلی یک وب سایت بازدید کنیم و پیوند “تماس” را در صفحه مشاهده کنیم، Next.js محتوای مربوط به صفحه تماس را دانلود و واکشی می کند. بنابراین، وقتی روی لینک کلیک می کنیم، لازم نیست منتظر دانلود شدن صفحه باشیم.

اما یک محدودیت وجود دارد: Next.js فقط برای صفحاتی که از قبل با استفاده از تولید سایت ایستا (SSG) ساخته شده اند، واکشی اولیه ارائه می دهد. اگر پیوندهایی به صفحاتی داشته باشیم که به صورت پویا تولید می شوند، این ویژگی فعال نمی شود.

ریمیکس این محدودیت را ندارد. همانطور که از HTML استفاده می کند <link rel="prefetch"> برچسب (به جای کش مانند Next.js)، ما می توانیم نه تنها پیوندها، بلکه در واقع هر صفحه را از قبل واکشی کنیم.

اول لبه

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

حتی اگر برنامه های مدرن برای ارائه محتوای ثابت به CDN ها متکی هستند، کد سمت سرور که برای تولید محتوای پویا پردازش می شود، عموماً در مرکز داده اجرا می شود و در یک مکان خاص اجرا می شود. راه‌حل برای این سناریو استفاده از دستورالعمل ذخیره‌سازی SWR است، با این اخطار که در نهایت محتوای قدیمی ارائه می‌شود در حالی که CDN منبع را تازه‌سازی می‌کند.

با در نظر گرفتن این موضوع، در سال های گذشته، مفهوم جدیدی به وجود آمد: محاسبات لبه. ایده این است که از همان رویکرد استفاده شده توسط CDN ها پیروی کنیم، منطق سرور را در سرورها و مکان های مختلف تکرار کنیم، و کد پویا را تا حد امکان نزدیک تر به کاربر اجرا کنیم. در حالی که Remix به عنوان “Edge First” تعریف می شود، به این معنی که تصور می شد این فریم ورک از همان ابتدا بر روی Edge اجرا شود، Vercel راه اندازی شد. توابع لبه به عنوان یک ویژگی اضافی برای برنامه مستقر در پلتفرم.

کد سمت سرور

هنگام تشریح ویژگی‌های اصلی Remix، گفتیم که چارچوب از روش‌های HTTP بومی برای مدیریت فرم‌ها با کمک استفاده می‌کند. action و loader کارکرد. یک فرم، یک سرور، یک POST درخواستی که داده های سریال فرم را به سرور منتقل می کند، یک اقدام سمت سرور، یک صفحه جدید در نتیجه درخواست ما. بازگشت به استانداردهای وب

ریمیکس فراهم می کند <Form> عنصر، یک نسخه بهینه از فرم HTML. با آن و action توابع، می‌توانیم کد کلاینت و کد سرور مربوط به مسیرهایمان را در یک فایل داشته باشیم. Remix می داند که چگونه رابط کاربری صفحات ما و رفتار سمت سرور متصل به درخواست ها را مدیریت کند. بدون زمینه، بدون مدیریت دولتی.

از سوی دیگر، Next.js به کد جاوا اسکریپت متکی است تا بداند چگونه وضعیت برنامه را مدیریت کند، APIها آن را فراخوانی می‌کنند، داده‌ها را اعتبارسنجی مجدد می‌کنند و رابط صفحه وب را به‌روزرسانی می‌کنند. استفاده كردن مسیرهای API، می‌توانیم فایل‌های جداگانه‌ای داشته باشیم که عملکرد سمت سرور را اجرا می‌کنند و داده‌ها را به frontend ما برمی‌گردانند.

همانطور که گفتیم، و همانطور که می بینید، Remix راهی برای جهش داده ها دارد که سعی می کند به اصول اولیه بازگردد و آن روزهایی را به یاد می آورد که PHP چیز بزرگی بود.

وابستگی Node.js

همانطور که قبلاً گفتیم، Remix به جای وابستگی به Node.js بر اساس Web Fetch API است. این امکان را به ما می دهد که برنامه های Remix را نه تنها روی سرورهای Node.js (مانند Vercel یا Netlify)، بلکه در انواع دیگر پلتفرم ها (مانند Cloudflare Workers یا Deno Deploy) اجرا کنیم.

نتیجه

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

مطالعه بیشتر در مجله Smashing

سرمقاله Smashing
(nl, il)

Read More

نمونه های تجسم داده لذت بخش – مجله Smashing

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

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

گفتن داستان های جذاب با داده ها آسان تر از انجام دادن است. صفحات گسترده دقیقاً باعث آواز خواندن قلب ها نمی شوند. قطعات بزرگ JSON آنقدر الهام بخش نیستند که وحشتناک هستند. هر چند نیازی نیست که اینطور باشد. داده ها می توانند برقصند. داده ها باید رقصیدن

بخشی از: طراحی وب به خوبی انجام شده است

این نسخه Web Design Done Well نمونه‌های باشکوهی از تجسم داده‌ها در وب را به نمایش می‌گذارد و با برخی از منابع بی‌شماری در دسترس کسانی که می‌خواهند یاد بگیرند که خودشان را بسازند، بسته می‌شود. از نقشه های باد گرفته تا هفت تراس کوه برزخ، تجسم داده ها می تواند شما را به مکان های قابل توجهی برساند.

نقشه باد

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

اسکرین شات نقشه باد
(پیش نمایش بزرگ)

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

بیشتر بعد از پرش! ادامه مطلب زیر ↓

DivineComedy.digital

تجسم داده فقط نشان دادن اطلاعات نیست – بلکه نشان دادن ارتباط بین اطلاعات است. DivineComedy.digital یک “ابزار علوم انسانی دیجیتال” است که نشان می دهد چگونه دانته کمدی الهی در طول هفت قرن پس از انتشار خود را در هنر نشان داده است.

اسکرین شات DivineComedy.digital
(پیش نمایش بزرگ)

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

ابر داده باز پیوندی

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

اسکرین شات از ابر داده باز پیوند شده
(پیش نمایش بزرگ)

نگهداری شده توسط جان فیلیپ مک کری برای مرکز بینش برای تجزیه و تحلیل دیجیتال، نمودار با استفاده از LOD Cloud Draw. (اگر چه نمودار نیرو محور D3 شاید معادل اصلی تر باشد.) LODC از زمان شروع با 12 مجموعه داده در سال 2007، راه درازی را پیموده است.

نمونه ای از یک نمودار با تجسم داده های مرتبط که DPpedia را در هسته خود دارد
(پیش نمایش بزرگ)

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

پروژه پناهندگان سازمان ملل

امیدوارم تا الان متوجه موضوع مشترکی شده باشید. تجسم داده ها زمانی که هدفی داشته باشد وزن بیشتری به همراه دارد – زمانی که چیزی فراتر از یک چیز زیبا باشد. جادوی تجسم داده ها این است که می تواند مجموعه داده های پیچیده ای را در مورد موضوعات پیچیده دریافت کند و آنها را به روشی ارائه دهد که تقریباً هر کسی بتواند آن را درک کند. تجسم داده‌ها نمی‌تواند داستان‌هایی را تعریف کند که هیچ رسانه دیگری نمی‌تواند. این نمودار جریان جنبش پناهندگان در قرن 20 و 21 نمونه ای خیره کننده از آن است – مملو از اطلاعات در عین حال قابل دسترس و واضح.

تصویری از وب سایت پروژه پناهندگان سازمان ملل با نمودار جریانی جنبش پناهندگان در قرن بیستم و بیست و یکم
(پیش نمایش بزرگ)

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

نمودار کووید فایننشال تایمز

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

اسکرین شات نمودار فایننشال تایمز ردیابی عفونت های کووید
(پیش نمایش بزرگ)

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

تجسم داده ها می تواند زیبا باشد. تجسم داده های مستند شده حتی بهتر است.

داده های باز سنگاپور

داشبوردهای داده به یک پایه اصلی وب مدرن تبدیل شده اند. سنگاپور data.gov.sg مثال خوبی از دولتی است که داده ها را نه تنها در دسترس عموم قرار می دهد، بلکه قابل خواندن نیز می باشد. این یک داشبورد داده وسیع و قابل کاوش است – داشبوردی که همه ما می‌توانیم از آن بیاموزیم، هم از نظر طراحی و هم از نظر دسترسی.

تصویری از وب سایت دولتی سنگاپور با داده های پولیک باز در مورد موضوع محیط زیست
(پیش نمایش بزرگ)

با تقریباً 2000 مجموعه داده در مورد موضوعات مختلف از قیمت ملک گرفته تا برنامه های داستان کوتاه، سایت مانند یک کتابخانه مجازی احساس می شود. مرور آسان و شهودی است. داده‌ها به تمام معنا در دسترس هستند و تلاش می‌کنند تا آن‌ها را برآورده کنند اصول به اشتراک گذاری داده های خودش:

  • داده ها باید به راحتی قابل دسترسی باشند.
  • داده ها باید برای ایجاد مشترک در دسترس قرار گیرند.
  • داده ها باید به موقع منتشر شوند؛
  • داده ها باید در قالب قابل خواندن توسط ماشین به اشتراک گذاشته شوند.
  • داده ها باید تا حد امکان خام باشند.

بشنو، بشنو

پودینگ به بررسی سطح موسیقی پاپ می پردازد

این سوالی است که همه ما را شب‌ها بیدار نگه می‌دارد – آیا مردان در موسیقی پاپ بالاتر از قبل آواز می‌خوانند؟ خوشبختانه، این پروژه توسط داده ها یعنی جادوگران پودینگ پاسخ ما را می دهد. آیا مردان در موسیقی پاپ بالاتر می خوانند؟ از داده‌های ثبت صوتی پاندورا برای یافتن میانگین آهنگ هر آهنگی که از سال 1958 در بیلبورد هات 100 نمایش داده شده است استفاده می‌کند. نه، واقعاً. انجام دادند.

تصویری از وب‌سایت پودینگ با نموداری که داده‌های ثبت صوتی نت‌های بلند را از سال 1958 نشان می‌دهد.
(پیش نمایش بزرگ)

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

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

نقشه خورشید گرفتگی

طراحی شده توسط روزنامه نگار تصویری دنیس لو، این نقشه گرفتگی توسط واشنگتن پست هم خیره کننده و هم مفید است – یک داده برنده یعنی ترکیبی که اگر وجود داشته باشد. مقاله سال تولد شما را می پرسد، سپس هر خورشید گرفتگی در طول زندگی شما را نشان می دهد (به شرط اینکه تا 100 سال زندگی کنید). اون چطور انجامش میدهد؟ البته در جهان

نقشه خورشید گرفتگی در کره زمین
(پیش نمایش بزرگ)

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

داشبورد IMPF

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

تصویری از داشبورد واکسیناسیون کووید وزارت بهداشت فدرال آلمان
(پیش نمایش بزرگ)

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

معماری باز قمری

من فکر نمی‌کنم که ما هرگز واقعاً شگفتی کودکانه خود را برای اکتشاف فضایی از دست نمی‌دهیم. اکنون بیش از هر زمان دیگری نوع بشر به ستاره ها می رسد – اما چه کسی چه می کند؟ و چطور پیش می رود؟ معماری باز قمری (LOA) به دنبال پاسخ به این سؤالات و بسیاری موارد دیگر است. همکاری بین MIT Media Lab ابتکار اکتشاف فضایی و بنیاد قمری را باز کنید، LOA شامل تجسم داده های فضایی خیره کننده از ماموریت های از سال 1958 است.

تصویری از وب سایت Lunar Open Architecture که تجسم داده های ماموریت های فضایی را از سال 1958 نشان می دهد.
(پیش نمایش بزرگ)

با گروه‌بندی ماموریت‌ها بر اساس سازمان‌ها، نوع و وضعیت، مجموعه گره‌ها به شما درک فوری از چگونگی تکامل اکتشاف فضایی در طول زمان و چگونگی تکامل آن در آینده را می‌دهد. همانطور که MIT گفته است، “آینده اکتشافات ماه در حال شلوغ شدن است.” پروژه هایی مانند این نشان می دهد که واقعیت چیزی است که توده ها می توانند و باید درک کنند. این علم موشک نیست.

Nationscape Insights

وقتی صحبت از اراده مردم به میان می‌آید، هیاهوی بسیار زیادی در اطراف وجود دارد. بسیاری ادعا می کنند که می دانند چیست، اما به ندرت به نتایج یکسانی می رسند. احتمالاً به این دلیل که اغلب خودشان با مردم مشورت نمی کنند. در Nationscape Insights پروژه – همکاری بین گروه مطالعاتی رای دهندگان صندوق دموکراسی، UCLA، و USA Today – تلاشی است برای حذف لفاظی از سیاست و نشان دادن آنچه رای دهندگان واقعا فکر می کنند.

تصویری از وب سایت یو اس ای تودی با تجسم داده ها از افکار عمومی در مورد موضوعات مختلف
(پیش نمایش بزرگ)

پروژه Nationscapes Insights که شامل 80 هفته داده‌های نظرسنجی جمع‌آوری‌شده در دوره انتخابات 2020 ایالات متحده است، به شما امکان می‌دهد تا نظرات عمومی را در مورد موضوعاتی از کنترل اسلحه گرفته تا طرح جدید سبز، با فیلترهایی برای منطقه، جمعیت‌شناسی، و احزاب سیاسی بررسی کنید. این یک مجموعه داده قابل توجه است. رابط کاربری شهودی، واضح و – من فکر می کنم – به طرز چشمگیری غیر حزبی است. روش شناسی مشخص است. می توانید سوالاتی که از مصاحبه شوندگان پرسیده شده است را مشاهده کنید. این تجسم داده است که به جای ابرها شفاف می شود و این همیشه یک هدف ارزشمند است.

داده های خود را روشن کنید

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

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

منابع یادگیری

کتابخانه ها

برای نشانک های شما

بیشتر خواندن

سرمقاله Smashing
(vf، yk، il)

Read More

افزودن جستجو به سایت شما در 15 دقیقه – مجله Smashing

خلاصه سریع ↬
آیا نیاز به جستجو برای سایت خود دارید، اما زمانی را برای اضافه کردن آن پیدا نکرده اید؟ در عرض 15 دقیقه، لئوناردو لوسوویز توضیح می‌دهد که چگونه می‌توانید جستجوی فوق‌العاده قدرتمندی را اضافه کنید که بسیار خوب نیز به نظر می‌رسد. در این مقاله یاد خواهید گرفت که چگونه با جستجو از 0 به 100 برسیم.

سایت من با استفاده از یک مولد سایت ایستا ایجاد شده و در یک CDN مستقر شده است، بنابراین از سرعت آن بسیار خوشحالم. اما یک قابلیت وجود دارد که من همیشه آن را از دست داده ام: جستجو.

همانطور که بارها ذکر شده است، Jamstack به معنای «ایستا» نیست – ما می‌توانیم سایت‌های کاملاً پویا با پشتیبانی از جاوا اسکریپت را در سمت کلاینت ایجاد کنیم که با APIهای (عمدتاً شخص ثالث) تعامل دارند. جستجو در این دسته قرار می گیرد.

در تمام این مدت، من جستجو را به سایت خود اضافه نکرده بودم، زیرا خسته بودم، کار دشواری خواهد بود. من در جاوا اسکریپت یا CSS مهارت استثنایی ندارم، بنابراین می‌ترسیدم که ایجاد یک ورودی جستجوی زیبا (یا حداقل قابل احترام) که نتایج را به هنگام تایپ کاربر نشان دهد و ادغام آن در سایت من خارج از توانایی‌های من باشد.

و سپس، ناگهان، در واقع در کمتر از 15 دقیقه، من در سایت خود جستجو کردم!

وب سایت من.”>
پیش نمایش ورودی جستجو در دسترس است وب سایت من.

این به لطف امکان پذیر شد جستجوی سایت 360، سرویسی است که جستجو برای هر سایتی را ارائه می دهد، چه بر اساس Jamstack (مانند من)، وردپرس (برای آن آنها یک پلاگین دارند)، یا هر پشته دیگری. من قصد داشتم ابتدا در مورد این سرویس تحقیق کنم، اما همانطور که معلوم شد، حتی قبل از اینکه تحقیقاتم به پایان برسد، در نهایت با خوشحالی مطلق (و در ابتدا غیرمنتظره) سرویس آنها را نصب کردم و در سایت خود جستجو کردم.

خلاصه کل فرآیند این است: همانطور که برای یک حساب کاربری رایگان ثبت نام کردم، این سرویس سایت من را مستقیماً از اینترنت باز ایندکس کرد بدون اینکه از من بخواهد هیچ گونه پیکربندی را ارائه دهم. سپس من را طی چند مرحله برای پیکربندی رابط کاربری جستجو هدایت کرد و در نهایت پیوندی به یک فایل جاوا اسکریپت با پیکربندی سفارشی من ایجاد کرد. همانطور که این JS را در سایت خود قرار دادم و مرورگر را به روز کردم، voilà، من جستجو کردم!

واقعاً زمان زیادی نمی برد و همچنین عالی به نظر می رسد. در این مقاله به شما نشان خواهم داد که چگونه با استفاده از Site Search 360 جستجو را به سایت خود اضافه کنید، همانطور که انجام داده ام. تا زمانی که خواندن این مقاله را به پایان می رسانید، اگر دنبال کنید، ممکن است از قبل جستجو کرده باشید. 🙏

افزودن جستجو به وب سایت خود با جستجوی سایت 360

در صفحه اصلی از جستجوی سایت 360، یک ورودی وجود دارد که از شما می خواهد “دامنه خود را (site.com) وارد کنید.” این کار را انجام دهید و روی “آزمون رایگان” کلیک کنید. سپس خواهد گفت: “آره! آزمایشی رایگان شما آماده است» و از شما بخواهد برای تکمیل ثبت نام ایمیل خود را وارد کنید. این کار را انجام دهید و روی “برو!” کلیک کنید.

دامنه خود را وارد کنید تا با یک حساب کاربری رایگان ثبت نام کنید
دامنه خود را وارد کنید تا با یک حساب کاربری رایگان ثبت نام کنید. (پیش نمایش بزرگ)

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

همه آماده
همه آماده اند! (پیش نمایش بزرگ)

روی “بیایید شروع کنیم!” کلیک کنید. برای رفتن به داشبورد برنامه، جایی که یک فرآیند ورود به سایت شما را در تنظیم جستجوی سایتتان راهنمایی می کند.

روند شبانه روزی
روند شبانه روزی (پیش نمایش بزرگ)

از آنجایی که محتوای سایت شما تا به حال ایندکس شده است، هنگام کلیک بر روی “Test now!” پیش نمایش رابط کاربری جستجو از محتوای واقعی سایت شما استفاده می کند. توجه کنید که چگونه، حتی قبل از اینکه شروع به سفارشی کردن ظاهر و احساس کنید، عالی به نظر می رسد!

پیش نمایش ورودی جستجو و کشویی
پیش نمایش ورودی جستجو و کشویی (پیش نمایش بزرگ)

روی «نتایج بیشتر» در منوی بازشوی پیشنهادات کلیک کنید تا نتایج جستجو را تجسم کنید. (در زیر خواهیم دید که چگونه می توان این لیست را که در ابتدا تصویر کوچک، عنوان، URL و گزیده مورد را با عبارت منطبق به صورت پررنگ نمایش می دهد، تغییر داد.)

پیش نمایش نتایج جستجو
پیش نمایش نتایج جستجو (پیش نمایش بزرگ)

برای سفارشی کردن رابط کاربری جستجو، روی دکمه “Search Designer” کلیک کنید و سبک را در سایت خود تکرار کنید. این مرحله یک بار مرخصی نیست: هر لحظه می توانید به آن بازگردید (حتی پس از اینکه پیکربندی سفارشی شما منتشر شد و جستجو قبلاً در سایت شما نصب شده است).

دکمه جستجوی طراح
دکمه جستجوی طراح (پیش نمایش بزرگ)

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

با طراح جستجو شروع کنید
شروع با طراح جستجو (پیش نمایش بزرگ)

ما اکنون از طراح جستجو که به شما کمک می کند ظاهر بصری ورودی جستجو، کشویی و نتایج را ویرایش کنید.

طراح جستجو
طراح جستجو (پیش نمایش بزرگ)

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

پیش نمایش زمان واقعی
پیش نمایش زمان واقعی (پیش نمایش بزرگ)

در Search Designer، می‌توانید عناصر زیر را (در میان بسیاری موارد دیگر) پیکربندی کنید:

  • رنگ های اصلی، ثانویه، پس زمینه، متن، نماد و رنگ حاشیه، اندازه متن، اندازه گوشه های گرد و سایر سبک ها.
  • زبان (از میان 19 زبان پشتیبانی شده تا به امروز)؛
  • با استفاده از ورودی جستجویی که قبلاً در سایت خود دارید یا ورودی جستجوی سایت 360؛
  • فعال کردن پیشنهادات تکمیل خودکار (هنگامی که کاربر در حال تایپ کردن نمایش داده می شود)؛
  • به Google Analytics و Google Tag Manager متصل شوید.
  • فعال کردن جستجوی صوتی؛
  • طرح بندی برای نمایش نتایج در دسکتاپ و موبایل.

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

پیشنهادات از پیش تعریف شده
پیشنهادات از پیش تعریف شده (پیش نمایش بزرگ)

پس از انجام تنظیمات، اجازه دهید به فرآیند نصب برگردیم.

گام بعدی این است که نتایج جستجو را تغییر دهید و نحوه استخراج داده ها (برای عنوان، تصاویر و گزیده) را از صفحه وب نشان دهید. پیکربندی خودکار پیش فرض در حال حاضر بسیار خوب کار می کند (استخراج داده ها از <meta> ویژگی ها)، بنابراین به احتمال زیاد می توانید از این مرحله رد شوید.

اصلاح نتایج جستجو
اصلاح نتایج جستجو (پیش نمایش بزرگ)

شما تا به حال تقریباً تمام شده اید! تنها کاری که باید انجام دهید این است که پیکربندی را منتشر کنید.

به فرآیند نصب برگردید و روی “Install now!” کلیک کنید. با این کار یک پنجره مودال باز می شود. کد HTML را کپی کرده و در کد منبع سایت خود قرار دهید (قبل از بسته شدن </body>) و روی «انتشار» کلیک کنید.

پیکربندی را منتشر کنید
پیکربندی را منتشر کنید (پیش نمایش بزرگ)

سایت خود را مجدداً راه اندازی کنید، مرورگر را به روز کنید، و چه چیزی دارید؟ سایت شما اکنون جستجو دارد!

سایت من جستجو دارد!
سایت من جستجو دارد! (پیش نمایش بزرگ)

به روز رسانی ظاهر بصری

همانطور که قبلاً ذکر کردم، می‌توانید پیکربندی رابط کاربری جستجو را حتی پس از فعال شدن جستجو ادامه دهید. از این پس، می‌توانید به راحتی از منوی برنامه در سمت چپ (زیر مورد «طراحی و انتشار») به Search Designer دسترسی داشته باشید. پس از انجام برخی اصلاحات، با کلیک بر روی “انتشار”، سبک جدید در سایت شما اعمال می شود بدون اینکه نیازی به کپی/پیست کردن کد جدید یا استقرار مجدد سایت باشد.

طراحی و انتشار
طراحی و انتشار (پیش نمایش بزرگ)

در مورد من، من پیکربندی را کمی بیشتر بهینه کردم. من نظرم را در مورد موقعیت ورودی جستجو تغییر دادم و ترجیح دادم آن را در بالای ناوبری نمایش دهم. راه حل این بود که منوی ناوبری را در یک منوی جدید قرار دهید <div id="nav-wrapper"> عنصر و سپس ورودی “پیش از” را تزریق کنید #nav-wrapper انتخابگر

ورودی جستجو در بالای منوی پیمایش
ورودی جستجو در بالای منوی پیمایش (پیش نمایش بزرگ)

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

تراز پیش فرض
تراز پیش فرض (پیش نمایش بزرگ)

Search Designer CSS سفارشی را می‌پذیرد، بنابراین می‌توانم قطعه‌ای از کد CSS اضافی را ارائه کنم تا سبک پیش‌فرض ورودی جستجو را نادیده بگیرم و آن را در سمت چپ تراز کنم.

CSS اضافی
CSS اضافی (پیش نمایش بزرگ)

من روی «انتشار» کلیک کردم، مرورگر را تازه‌سازی کردم و اکنون استایل در موبایل درست به نظر می‌رسد.

نادیده گرفتن تراز
نادیده گرفتن تراز (پیش نمایش بزرگ)

در نهایت، من همچنین تصمیم گرفتم ویژگی “Result Groups” را فعال کنم، که نتایج را به دسته های مختلف به انتخاب خودمان تقسیم می کند. (چه صفحاتی در یک گروه قرار می گیرند از طریق یک الگوی URL تعریف می شوند؛ به عنوان مثال، من گروه “Blog” را طوری تنظیم کرده ام که حاوی URL های نوع باشد. /blog/....) در مورد من، می‌خواهم نتایج گروه‌های «وبلاگ»، «راهنماها» و «متا» را نمایش دهم و نتایج را از «برچسب‌ها» پنهان کنم.

گروه های نتیجه
گروه های نتیجه (پیش نمایش بزرگ)

اکنون، زمانی که بازدیدکننده یک عبارت جستجو را وارد می‌کند، نتایج در فهرست کشویی توسط گروه‌های انتخابی سازماندهی می‌شوند که یافتن اطلاعات مورد نظر را بسیار آسان‌تر می‌کند. به عنوان مثال، هنگام جستجوی “فاصله نام”، “Meta” حاوی صفحه ای است که ویژگی را توصیف می کند. “راهنماها” حاوی صفحاتی است که نحوه استفاده و پیکربندی این ویژگی را توضیح می دهد. و “Blog” آن پست های وبلاگ را نشان می دهد که این ویژگی را اعلام می کند.

کشویی با نتایج سازمان‌دهی شده در گروه‌ها
کشویی با نتایج سازماندهی شده در گروه (پیش نمایش بزرگ)

به همین ترتیب، هنگام کلیک کردن بر روی “نمایش همه نتایج”، پنجره مودال به تب ها (در یک برگه در هر گروه) سازماندهی می شود، که اسکرول کردن به پایین و مرور نتایج در هر گروه را آسان می کند.

جستجو با برگه ها
جستجو با برگه ها (پیش نمایش بزرگ)

من از این نتایج فوق العاده خوشحالم! فقط 15 دقیقه طول کشید تا از 0 به 100 برسیم، رابط کاربری واقعاً خوب به نظر می رسد و جستجو بسیار سریع است. به طور کلی، تجربه برای بازدیدکنندگان من قانع کننده است. سر به مکان من و با ورودی جستجو بازی کنید تا بفهمید چرا از آن راضی هستم.

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

به عنوان مثال، اگر یک سایت غنی از محتوا، مانند یک وبلاگ یا یک فروشگاه آنلاین دارید، و می‌خواهید نتایج جستجوی خود را فیلتر کنید (بر اساس دسته، تاریخ، قیمت و غیره)، می‌توانید این کار را انجام دهید:

فیلترها
فیلترها (پیش نمایش بزرگ)

و سپس، Site Search 360 دارای یک ابرقدرت است که آن را از رقبای خود متمایز می کند: مجهز به هوش مصنوعی آن موتور جستجوی محصول معنایی به طور مداوم رتبه بندی نتایج جستجو را بهینه می کند و محبوب ترین نتایج را به بالا ارتقا می دهد. اگر جستجوی تجارت الکترونیک را فعال کرده‌اید، فقط نشان دهید که چه چیزی برای شما مهم است که در فروشگاه آنلاین خود بفروشید، و موتور به طور خودکار نتایج را بر اساس چندین فاکتور رتبه‌بندی مرتب می‌کند.

بسته بندی

من شخصاً کاملاً تحت تأثیر قرار گرفتم جستجوی سایت 360پیشنهاد جستجوی قدرتمند فقط در 15 دقیقه، سایت من قابلیت جستجویی داشت که مدت زیادی آن را به تعویق می انداختم. مشکل حل شد!

اگر شما هم می خواهید بدون زحمت جستجو را به سایت خود اضافه کنید، بروید آن را بررسی کنید.

سرمقاله Smashing
(il)
Read More

DevFest برای اوکراین، کنفرانس خیریه در مورد آینده فناوری 🇺🇦 — مجله Smashing

خلاصه سریع ↬
DevFest برای اوکراین یک کنفرانس آنلاین خیریه است که 20 سخنران فنی پیشرو در صنعت را در حمایت از اوکراین گرد هم می آورد. 14 تا 15 ژوئن.

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

در چنین مواقعی، اتحاد تلاش ها و کار با هم به عنوان یک جامعه مهم تر از همیشه به همین دلیل است که می خواهیم امروز یک ابتکار فوق العاده را برجسته کنیم. DevFest برای اوکراین، یک کنفرانس با سخنرانان فنی در سطح جهانی و یک ماموریت مهم: جمع آوری کمک های مالی برای اوکراین.

DevFest برای اوکراین یک کنفرانس فناوری خیریه است که گرد هم خواهد آمد 20 سخنران پیشرو در صنعت طی دو روز (14 تا 15 ژوئن)، با پخش جریانی زنده از لندن و لویو. به موضوعات کلیدی برای آینده فناوری، از جمله گرایش های اندروید، وب و هوش مصنوعی.

DevFest برای اوکراین
از سخنرانان پیشرو در صنعت بیاموزید و در کنفرانس آنلاین مبتنی بر کمک مالی به اوکراین کمک کنید DevFest برای اوکراین. 14 تا 15 ژوئن.

در چه چیزی می توانید انتظار داشته باشید DevFest برای اوکراین?

این کنفرانس به صورت آنلاین برگزار خواهد شد 14 تا 15 ژوئن، شامل جلسات زنده و ضبط شده از لندن و لویو، همراه با پرسش و پاسخ زنده. از جانب جلسات فنی و نکات کلیدی الهام بخش به شبکه و مروری بر آخرین ابزارهای توسعه دهنده، DevFest برای اوکراین افرادی را گرد هم می آورد که آینده فناوری های اندروید، وب و هوش مصنوعی را شکل می دهند.

از سخنرانان پیشرو در صنعت مانند رومن گای و چت هاسه که از 1.0 اندروید را می سازند، جی تامپکینز و کراوتس از تیم Google Chrome، یا رابرت کرو از تیم TensorFlow که در مورد روند توسعه ML صحبت خواهد کرد. مشارکت مبتنی بر کمک مالی است: کمک مالی شما به شما امکان دسترسی به پخش زنده و ضبط‌های پس از رویداد را می‌دهد. برای برنامه دقیق، به DevFest برای اوکراین سایت اینترنتی.

کمک های مالی به کجا خواهد رفت؟

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

هدف اولیه جمع آوری 50000 دلار بود. به لطف کمک های مالی متعدد افراد و شرکا، آنها قبلاً به نقاط عطف 50,000 و 75,000 دلاری خود رسیده اند. و اکنون آنها هدف جدیدی را تعیین کردند – جمع آوری 100000 دلار. با این بودجه، آنها می توانند حدود 1000 جعبه کمک های اولیه، یا 320 جلیقه ضد گلوله، یا 60 تن کمک های بشردوستانه بخرند که می تواند جان هزاران دوست اوکراینی ما را نجات دهد. بیا با هم انجامش بدیم!

چگونگی عضویت

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

از پشتیبانی صمیمانه شما ممنونم. 💙💛

Read More