Category: طراحی سایت

استفاده از مجله صوتی – Smashing

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

فرد سردبیر مهارت های نرم افزاری و توسعه حرفه ای در Smashing Magazine (او را صدا کنید!) و مهندس نرم افزار در The Guardian است. علایق او شامل
اطلاعات بیشتر در مورد فردریک

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

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

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

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

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

مقالات صوتی نیویورکر

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

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

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

با رادیوهای جهان در باغ رادیو هماهنگ شوید

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

وب سایت رادیو باغ
در اصل در سال 2016 ساخته شده است ، باغ رادیو سال گذشته تغییر کامل همراه اول را دریافت کرد.

در میان آنها قطعات زیادی برای این کار لازم است سزیوم JS برای کره زمین ، اسری برای تصاویر ماهواره ای ، و GeoIP رایگان برای API مکان. یک ایده عالی که به زیبایی اجرا شده است. (یک ذکر محترم نیز باید به آن اشاره شود رادیووووو، نوعی معادل سفر در زمان.)

گیاه شناسی و سمفونی ها در باغ پندرکی

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

وب سایت باغ Penderecki
باغ پندرکی نه یک وب سایت بلکه یک کاخ ذهن مجازی است. غوطه وری ، آموزشی ، شکیل … چه کسی فکر می کند در این روزگار اینترنت همچنان می تواند چنین پیچیده ای احساس کند؟

هکتار از تاریخ شفاهی Margraten’s World WWII

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

زمینه های وب سایت Margraten
وب سایت گذشته کتاب های درسی تاریخ را بیرون می کشد و به همان اندازه که شایسته آن است احساس واقعی و فوری می کند.

موسیقی مکمل است و به مصاحبه شوندگان کمک می کند تا روح یک زمان و مکان را به ذهن متبادر کنند. آیا بدون آن اثر یکسان خواهد بود؟ ما خیلی مطمئن نیستیم

Netflix شدت مشابه تریلر را به راهنمای سری تاریکی خود می آورد

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

سریال Dark Netflix
همه چیز در مورد چیزهای کوچک است: هنگام ترک برگه ، صدا قطع می شود که جلوه ای عالی به شما می بخشد. (اعتبار تصویر: Netflix – تاریک)

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

موزه فناوری اطلاعات تورهای صوتی را به وب می آورد

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

موزه فناوری اطلاعات DataArt
قطعه های صوتی به طور یکپارچه در تجربه کلی در یکپارچه می شوند وب سایت موزه فناوری اطلاعات DataArt.

با دیدن آن تقریباً واضح است. تقریباً همه در هنگام گوش دادن به یک راهنمای صوتی در موزه یا گالری یا بنای تاریخی سرگردان بوده اند. چرا نباید همین گزینه به صورت آنلاین در دسترس ما باشد؟

اخلاق برای طراحی

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

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

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

نوار پخش کننده Sticky Music SoundCloud

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

وب سایت SoundCloud
ابر صدا کار خوبی در زمینه اجازه دادن به کاربر به طور همزمان انجام می دهد.

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

بسته بندی کردن

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

اگر علاقه مند به یادگیری بیشتر هستید ، مقالات زیر نقطه شروع صوتی برای طراحی صوتی بصورت آنلاین را ارائه می دهند:

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

سرمقاله سر و صدا(vf، yk، he)
Read More

سه ابزار ممیزی جلویی که اخیراً کشف کردم – مجله سر و صدا

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

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

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

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

اما چگونه می توانید همه این موارد را که باعث مشکلات عملکردی می شوند ، پیدا کنید؟

بگذارید برخی از ابزارهایی را به اشتراک بگذارم به شما کمک می کند تا مشکلات عملکرد را دریابید وب سایت های با کیفیت و سریع ارسال کنید.

توجه داشته باشید: اگر به دنبال یک نمای کلی از بهترین روش ها و ابزارها هستید ، به لیست عملکرد Frontend نگاهی بیندازید.

Waterfaller: ابزاری با تمرکز بر آبشارهای شبکه

کشف کردم آبفشان همین اواخر برخلاف Lighthouse یا WebPageTest ، Waterfaller فقط بر روی یک چیز تمرکز دارد – مسائل مربوط به آبشار شبکه.

عکس صفحه نمایش Waterfaller
آبفشان بر روی مسائل مربوط به آبشار شبکه تمرکز کرده و توصیه هایی برای بهبود آن ارائه می دهد.

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

من دامنه باریک Waterfaller را دوست دارم! یک آزمون را انجام دهید ، پرونده های مشکل ساز را پیدا کنید و مشاوره دریافت کنید – این همه در 30 ثانیه قابل انجام است. زیباست!

آزمایشگاه زرد: ابزاری که سایت شما را از بالا به پایین تجزیه و تحلیل می کند

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

تصویر آزمایشگاه Yellow Lab
ابزار آزمایشگاه زرد تعدادی ممیزی از CSS گرفته تا JavaScript تا عملکرد را اجرا می کند و مروری دقیق درباره مسائل و نحوه رفع آنها را ارائه می دهد.

این یک ابزار زیبا برای یافتن مسائل در معماری CSS شما به صورت انتخابگرهای تکراری یا بیانیه های زیاد رنگ است. همچنین به ساختار HTML بسیار پیچیده اشاره دارد و همچنین پیکربندی سرور و حافظه پنهان شما را بررسی می کند. این یک همراه عالی برای ساخت یک وب سایت با کیفیت بالا است.

webhint: انتخابی ترین ابزار موجود

بگذارید رئیس نهایی را به شما معرفی کنم. سلام کنید وب سایت مایکروسافت. webhint با Lighthouse قابل مقایسه است و سایت شما را از نظر مسایل در زمینه دسترسی ، سازگاری ، برنامه های وب پیشرو ، عملکرد و امنیت اسکن می کند.

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

آنچه مرا در مورد webhint متحیر می کند این است که به طرز باورنکردنی انتخابی است. من در گذشته با موقعیت هایی روبرو شده بودم که نمره کاملاً سبز Lighthouse را داشتم ، WebPageTest به من A مستقیم داد ، اما هنوز هم ، webhint زمینه های پیشرفت را به من ارائه می داد.

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

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

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

“از ابزار مناسب برای کار استفاده کنید.”

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

سرمقاله سر و صدا(vf ، او)
Read More

نحوه ساختن برنامه Geocoding در Vue.js با استفاده از Mapbox – Smashing Magazine

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

Prince Chukwudire یک مهندس Frontend است که مشتاق اجرای کامل پیکسل از طراحی UI کاربر محور و نوشتن تست های واحد برای بهبود کد…
اطلاعات بیشتر در مورد شاهزاده

در این راهنما ، نگاهی کلی به مفاهیم رمزگذاری جغرافیایی رو به جلو و کدگذاری معکوس خواهیم داشت. ما با استفاده از یک برنامه کوچک خواهیم ساخت که این مفاهیم را برای نمایش مکانهای خاص به کار می برد جعبه نقشه و Vue.js 2.6.11 برای رسیدن به این هدف.

دقت دقیق و مدولار بودن از جمله امتیازاتی هستند که کد ژئوکلیک را به وسیله ای مناسب برای یافتن مکان خاص تبدیل می کنند.

در این راهنما ، ما یک برنامه کدگذاری ساده از ابتدا ، با استفاده از Vue.js و Mapbox. ما مراحل ساخت داربست جلویی تا ساخت یک رمزگذار برای مدیریت کدگذاری جلو و کدگذاری معکوس را پوشش خواهیم داد. برای استفاده بیشتر از این راهنما ، شما نیاز به درک اولیه JavaScript و Vue.js و نحوه برقراری تماسهای API دارید.

کدگذاری مکانیکی چیست؟

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

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

به عبارت دیگر ، رمزگذاری جغرافیایی معکوس 40.714224 ، -73.961452 را به “277 Bedford Ave، Brooklyn” تبدیل می کند ، و کدگذاری جغرافیایی جلوتر برعکس عمل می کند ، “277 Bedford Ave، Brooklyn” را به 40.714224 ، -73.961452 تبدیل می کند.

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

برنامه ما توابع اساسی زیر را خواهد داشت:

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

با استفاده از Vue CLI پروژه را تنظیم کنید

ما از دیگ بخار در این مخزن یافت می شود. این شامل یک پروژه جدید با Vue CLI و yarn به عنوان مدیر بسته شما باید مخزن را شبیه سازی کنید. اطمینان حاصل کنید که از طریق geocoder/boilerplate شاخه.

ساختار فایل برنامه را تنظیم کنید

در مرحله بعد ، ما باید ساختار پرونده پروژه خود را تنظیم کنیم. تغییر نام دهید Helloworld.vue پرونده را در پوشه کامپوننت به Index.vue، و فعلاً آن را خالی بگذارید. پیش بروید و موارد زیر را در App.vue فایل:

<template>
  <div id="app">
    <!--Navbar Here -->
    <div>
      <nav>
        <div class="header">
          <h3>Geocoder</h3>
        </div>
      </nav>
    </div>
    <!--Index Page Here -->
    <index />
  </div>
</template>
<script>
import index from "./components/index.vue";
export default {
  name: "App",
  components: {
    index,
  },
};
</script>

در اینجا ، م componentلفه اخیراً تغییر نام یافته را به صورت محلی وارد کرده و سپس ثبت کرده ایم. ما همچنین یک نوار پیمایش اضافه کرده ایم تا زیبایی شناسی برنامه خود را ارتقا دهیم.

ما به یک .env پرونده برای بارگذاری متغیرهای محیط. پیش بروید و یکی را در ریشه پوشه پروژه خود اضافه کنید.

بسته ها و کتابخانه های مورد نیاز را نصب کنید

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

  1. Mapbox GL JS
    این کتابخانه جاوا اسکریپت برای ارائه نقشه های تعاملی از WebGL استفاده می کند کاشی های برداری و جعبه نقشه.
  2. Mapbox-gl-geocoder
    این کنترل کننده کد جغرافیایی برای Mapbox GL به ما کمک می کند تا کدگذاری جغرافیایی به جلو داشته باشیم.
  3. دوتنف
    ما مجبور به نصب این نیستیم زیرا از قبل با Vue CLI نصب شده است. این به ما کمک می کند تا متغیرهای محیط را از یک بارگیری کنیم .env پرونده را وارد کنید process.env. به این ترتیب می توانیم پیکربندی های خود را از کد خود جدا کنیم.
  4. آکسیوس
    این کتابخانه در درخواستهای HTTP به ما کمک می کند.

بسته های مدیر بسته ترجیحی خود را در CLI خود نصب کنید. اگر از Yarn استفاده می کنید ، دستور زیر را اجرا کنید:

cd geocoder && yarn add mapbox-gl @mapbox/mapbox-gl-geocoder axios

اگر از npm استفاده می کنید ، این را اجرا کنید:

cd geocoder && npm i mapbox-gl @mapbox/mapbox-gl-geocoder axios --save

ابتدا باید وارد می شدیم geocoder پوشه قبل از اجرای دستور نصب.

داربست قسمت جلویی با Vue.js

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

موارد زیر را در مورد خود کپی کنید Index.vue فایل:

<template>
  <div class="main">
    <div class="flex">
      <!-- Map Display here -->
      <div class="map-holder">
        <div id="map"></div>
      </div>
      <!-- Coordinates Display here -->
      <div class="dislpay-arena">
        <div class="coordinates-header">
          <h3>Current Coordinates</h3>
          <p>Latitude:</p>
          <p>Longitude:</p>
        </div>
        <div class="coordinates-header">
          <h3>Current Location</h3>
          <div class="form-group">
            <input
              type="text"
              class="location-control"
              :value="location"
              readonly
            />
            <button type="button" class="copy-btn">Copy</button>
          </div>
          <button type="button" class="location-btn">Get Location</button>
        </div>
      </div>
    </div>
  </div>
</template>

برای دیدن آنچه در حال حاضر داریم ، سرور توسعه خود را راه اندازی کنید. برای نخ:

yarn serve

یا برای npm:

npm run serve

برنامه ما اکنون باید به این شکل باشد:

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

نقطه خالی سمت چپ به نظر می رسد. این باید نمایشگر نقشه ما باشد. بیایید اضافه کنیم که

نمایش تعاملی نقشه با Mapbox

اولین کاری که باید انجام دهیم دسترسی به کتابخانه های Mapbox GL و Geocoder است. ما با وارد کردن کتابخانه های Mapbox GL و Geocoder در اینجا شروع خواهیم کرد Index.vue فایل.

import axios from "axios";
import mapboxgl from "mapbox-gl";
import MapboxGeocoder from "@mapbox/mapbox-gl-geocoder";
import "@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css";

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

.env
VUE_APP_MAP_ACCESS_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

ما همچنین باید ویژگی هایی را تعریف کنیم که به جمع آوری کاشی های نقشه در مثال داده کمک می کند. موارد زیر را در زیر جایی که کتابخانه ها را وارد کرده ایم اضافه کنید:

export default {
  data() {
    return {
      loading: false,
      location: "",
      access_token: process.env.VUE_APP_MAP_ACCESS_TOKEN,
      center: [0, 0],
      map: {},
    };
  },
}
  • location ویژگی به ورودی که در داربست خود داریم مدل می شود. ما از این برای مدیریت کدگذاری جغرافیایی معکوس استفاده خواهیم کرد (یعنی مکانی را از مختصات نمایش می دهیم).
  • center مختصات ما (طول و عرض جغرافیایی) را در خود جای داده است. همانطور که به زودی خواهیم دید ، این امر برای کنار هم قرار دادن کاشی های نقشه بسیار مهم است.
  • access_token ویژگی به متغیر محیطی ما اشاره دارد که قبلاً آن را اضافه کردیم.
  • map ویژگی به عنوان سازنده برای م componentلفه نقشه ما عمل می کند.

بیایید شروع به ایجاد روشی کنیم که نقشه تعاملی ما را با رمزگذار جغرافیایی جلو در آن جاسازی کند. این روش عملکرد پایه ما است و به عنوان واسطه بین م componentلفه ما و Mapbox GL عمل می کند. ما این روش را فراخوانی خواهیم کرد createMap. این را در زیر شی داده اضافه کنید:

mounted() {
  this.createMap()
},

methods: {
  async createMap() {
    try {
      mapboxgl.accessToken = this.access_token;
      this.map = new mapboxgl.Map({
        container: "map",
        style: "mapbox://styles/mapbox/streets-v11",
        center: this.center,
        zoom: 11,
      });

    } catch (err) {
      console.log("map error", err);
    }
  },
},

برای ایجاد نقشه خود ، container که نقشه را در خود جای داده است ، style ویژگی برای قالب نمایش نقشه ما ، و a center ملک مختصات ما center ویژگی از نوع آرایه ای است و طول و عرض جغرافیایی را در خود نگه می دارد.

Mapbox GL JS نقشه ما را بر اساس این پارامترها در صفحه اولیه می کند و a را برمی گرداند Map اعتراض به ما Map شی object در حالی که روش ها و خصوصیاتی را که ما را قادر به تعامل با نقشه می کند به نقشه موجود در صفحه ما ارجاع می دهد. ما این شی returned برگشتی را در نمونه داده خود ذخیره کرده ایم ، this.map.

انتقال رمز جغرافیایی با Mapbox Geocoder

اکنون ، نشانگر ژئوکارد و نشانگر سفارشی را اضافه می کنیم. رمزگذار Geocoding با تبدیل مکان های متنی به مختصات ، کدگذاری به جلو را کنترل می کند. این به صورت یک جعبه ورودی جستجو اضافه شده به نقشه ما ظاهر می شود.

موارد زیر را در زیر اضافه کنید this.map مقدار اولیه ای که در بالا داریم:

let geocoder =  new MapboxGeocoder({
    accessToken: this.access_token,
    mapboxgl: mapboxgl,
    marker: false,
  });

this.map.addControl(geocoder);

geocoder.on("result", (e) => {
  const marker = new mapboxgl.Marker({
    draggable: true,
    color: "#D80739",
  })
    .setLngLat(e.result.center)
    .addTo(this.map);
  this.center = e.result.center;
  marker.on("dragend", (e) => {
    this.center = Object.values(e.target.getLngLat());
  });
});

در اینجا ، ما ابتدا با استفاده از سازنده `MapboxGeocoder` نمونه جدیدی از یک geocoder ایجاد کرده ایم. این یک ژئو کد را بر اساس پارامترهای ارائه شده اولیه می کند و یک جسم را در معرض روش ها و رویدادها برمی گرداند. ویژگی `accessToken` به نشانه دسترسی ما به Mapbox اشاره دارد و` mapboxgl` به [map library](https://docs.mapbox.com/#maps) در حال حاضر استفاده می شود. هسته اصلی برنامه ما نشانگر سفارشی است. رمزگذار به طور پیش فرض با یکی ارائه می شود. با این حال ، این سفارشی سازی لازم را به ما نمی دهد. بنابراین ، ما آن را غیرفعال کرده ایم. در حال حرکت ، Geocoder تازه ایجاد شده خود را به عنوان یک پارامتر به روش `addControl` که توسط شی map نقشه ما در معرض دید ما قرار دارد ، منتقل کردیم. `addControl` یک` کنترل` را به عنوان یک پارامتر می پذیرد. برای ایجاد نشانگر سفارشی خود ، ما از رویدادی که توسط جسم رمزگذار ما در معرض دید ما قرار گرفته استفاده کرده ایم. شنونده رویداد `on` ما را قادر می سازد مشترک رویدادهای رخ داده در رمزگذار ژئو باشیم. متنوع را می پذیرد [events](https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md#on) به عنوان پارامترها. ما در حال گوش دادن به رویداد “نتیجه” هستیم که هنگام تنظیم ورودی شلیک می شود. به طور خلاصه ، در “نتیجه” ، سازنده نشانگر ما بر اساس پارامترهایی که ارائه داده ایم ، یک مارکر ایجاد می کند (در این حالت یک ویژگی و رنگ قابل کشیدن). این یک شی returns را برمی گرداند که ما برای بدست آوردن مختصات خود از روش `setLngLat` استفاده می کنیم. ما نشانگر سفارشی را با استفاده از روش `addTo` به نقشه موجود خود اضافه می کنیم. سرانجام ، ما در مختصات خود ویژگی `center` را با مختصات جدید به روز می کنیم. ما همچنین باید حرکت مارکر سفارشی خود را پیگیری کنیم. ما با استفاده از شنونده رویداد `dragend` به این مهم دست پیدا کردیم و ویژگی` center` خود را با مختصات فعلی به روز کردیم. بیایید الگوی را به روز کنیم تا نقشه تعاملی و کد جغرافیایی رو به جلو نمایش داده شود. قسمت نمایش مختصات را در الگوی ما با موارد زیر به روز کنید:

<div class="coordinates-header">
  <h3>Current Coordinates</h3>
  <p>Latitude: {{ center[0] }}</p>
  <p>Longitude: {{ center[1] }}</p>
</div>

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

برای بالا بردن زیبایی برنامه ما ، فایل CSS زیر را به قسمت زیر اضافه کنید: head بخش از index.html فایل. این پرونده را در پوشه عمومی قرار دهید.

<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css" rel="stylesheet" />

برنامه ما اکنون باید به این شکل باشد:

پیش نمایش رمزگذاری جغرافیایی
پیش نمایش رمزگذاری جغرافیایی (پیش نمایش بزرگ)

مکان Geocode معکوس با API Mapbox

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

کدگذاری معکوس در Mapbox توسط API کدگذاری معکوس انجام می شود. این می پذیرد longitude، latitude، و access token به عنوان پارامترهای درخواست این تماس بار ویژه ای را با جزئیات مختلف برمی گرداند. نگرانی ما اولین مورد در است features آرایه ، جایی که مکان geocoded معکوس است.

ما باید تابعی ایجاد کنیم که فرستنده باشد longitude، latitude و access_token از مکانی که می خواهیم به Mapbox API برسیم. برای دریافت جزئیات آن مکان باید آنها را ارسال کنیم.

سرانجام ، ما باید نسخه را به روز کنیم location ویژگی در مثال ما با مقدار place_name کلید در شی.

زیر createMap() تابع ، بیایید یک تابع جدید اضافه کنیم که به خواسته های ما رسیدگی کند. این باید چگونه به نظر برسد:

async getLocation() {
  try {
    this.loading = true;
    const response = await axios.get(
      `https://api.mapbox.com/geocoding/v5/mapbox.places/${this.center[0]},${this.center[1]}.json?access_token=${this.access_token}`
    );
    this.loading = false;
    this.location = response.data.features[0].place_name;
  } catch (err) {
    this.loading = false;
    console.log(err);
  }
},

این عملکرد باعث می شود GET درخواست به API Mapbox. پاسخ حاوی place_name – نام محل انتخاب شده ما این را از پاسخ دریافت می کنیم و سپس آن را به عنوان مقدار تنظیم می کنیم this.location.

با انجام این کار ، ما باید دکمه ای را ویرایش و تنظیم کنیم که این عملکردی را که ایجاد کرده ایم فراخوانی کند. ما از یک استفاده خواهیم کرد click شنونده رویداد – که با آن تماس خواهد گرفت getLocation وقتی کاربر روی آن کلیک می کند ، روش است. پیش بروید و جز button دکمه را در این ویرایش کنید.

<button
  type="button"
  :disabled="loading"
  :class="{ disabled: loading }"
  class="location-btn"
  @click="getLocation"
>
  Get Location
</button>

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

copyLocation() {
  if (this.location) {
    navigator.clipboard.writeText(this.location);
    alert("Location Copied")
  }
  return;
},

به روز کنید Copy جز component دکمه ای برای فعال کردن این:

<button type="button" class="copy-btn" @click="copyLocation">

نتیجه

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

منابع

سرمقاله سر و صدا(ks ، vf ، yk ، il ، al)
Read More

تنظیم مبدل ارز با ExchangeRatesApi.io – Smashing Magazine

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

Leonardo Losoviz یک توسعه دهنده و نویسنده مستقل است ، و تلاش مستمر برای ادغام پارادایم های نوآورانه (PHP بدون سرور ، اجزای سمت سرور ، GraphQL)
اطلاعات بیشتر در مورد لئوناردو

آمازون به بازدیدکنندگان این امکان را می دهد تا قیمت ها را با ارز خود نشان دهند با تشکر از ExchangeRatesApi.io، ما می توانیم همین کار را برای فروشگاه های آنلاین خود انجام دهیم و تجربه بهتری را به مشتریان خود ارائه دهیم. بیایید دریابیم که چگونه

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

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

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

در این مقاله به معرفی شما می پردازیم ExchangeRatesApi.io، یک راه حل محبوب API که داده هایی را برای نرخ ارز فعلی و تاریخی 168 ارز ارائه می دهد.

آنچه می خواهیم بدست آوریم

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

هنگام بازدید از یک صفحه محصول در amazon.co.uk، قیمت را به پوند انگلیس ارائه می دهیم:

صفحه محصول در amazon.co.uk ، با قیمت پوند نشان داده شده است
صفحه محصول در amazon.co.uk، با قیمت پوند نشان داده شده است. (پیش نمایش بزرگ)

اما اگر بخواهیم می توانیم قیمت آن را با ارز دیگری ببینیم. در تنظیمات کشور / منطقه ، گزینه تغییر ارز وجود دارد:

کرکره با تنظیمات منطقه
کرکره با تنظیمات منطقه. (پیش نمایش بزرگ)

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

کرکره با تنظیمات منطقه
کرکره با تنظیمات منطقه. (پیش نمایش بزرگ)

سرانجام ، به صفحه محصول ، قیمت به یورو نمایش داده می شود:

صفحه محصول در amazon.co.uk ، با قیمت نشان داده شده به یورو.
صفحه محصول در amazon.co.uk ، با قیمت نشان داده شده به یورو. (پیش نمایش بزرگ)

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

چطوری انجامش میدیم

ExchangeRatesApi.io با ارائه آخرین داده های فارکس برای 168 ارز ، RI API را ارائه می دهد. این اطلاعات همیشه به روز بوده و اطلاعات را از پایگاه گسترده ای از منابع تجاری و بانک های سراسر جهان جمع آوری می کند.

بعد از ثبت نام در خدمات خود (نکته: آنها یک ردیف رایگان) ، یک کلید دسترسی API به ما اختصاص داده می شود:

داشبورد در ExchangeRatesApi.io
داشبورد در ExchangeRatesApi.io. (پیش نمایش بزرگ)

ما کلید دسترسی API خود را می گیریم ، و آن را به نقطه انتهایی اضافه کنید:

https://api.exchangeratesapi.io/v1/latest
 ?access_key=YOUR_API_KEY

برای تجسم پاسخ ، نقطه پایانی را در مرورگر خود کپی / جای گذاری کنید:

مشاهده پاسخ به REST API در مرورگر
مشاهده پاسخ به REST API در مرورگر. (پیش نمایش بزرگ)

همانطور که احتمالاً در تصویر بالا قابل درک است ، داده های مربوط به همه 168 ارز بازیابی شده است. برای اینکه نتایج را فقط به چند مورد محدود کنیم ، ما هستیم رمز ارزها را از طریق param نشان دهید symbols.

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

https://api.exchangeratesapi.io/v1/latest
 ?access_key=YOUR_API_KEY
 &symbols=USD,GBP,AUD,JPY,CNY

پاسخ به شرح زیر است:

{
 "success": true,
 "timestamp": 1620904263,
 "base": "EUR",
 "date": "2021-05-13",
 "rates": {
   "USD": 1.207197,
   "GBP": 0.860689,
   "AUD": 1.568196,
   "JPY": 132.334216,
   "CNY": 7.793428
 }
}

چه داده هایی را می توان بازیابی کرد

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

نقاط پایانی نشان داده شده در زیر باید به آنها پیوست شود https://api.exchangeratesapi.io/v1/ (به عنوان مثال: latest تبدیل می شود https://api.exchangeratesapi.io/v1/latest) ، و اضافه شده است access_key با کلید دسترسی API خود پارامتر کنید.

آخرین نرخ ها

latest نقطه پایان داده های نرخ ارز را برای همه ارزهای موجود یا برای یک مجموعه خاص در زمان واقعی برمی گرداند.

تبدیل ارز

convert نقطه پایان تبدیل مبلغی را از هر ارز به ارز دیگری در 168 ارز پشتیبانی شده فعال می کند.

نرخ های تاریخی

این نقطه پایان شکل دارد YYYY-MM-DD (مانند 2021-03-20) ، مربوط به تاریخی است که می خواهیم اطلاعات نرخ ارز تاریخی را برای آن بازیابی کنیم.

داده های سری زمانی

timeseries نقطه پایان داده های تاریخی روزانه را برای نرخ ارز بین دو تاریخ مشخص برای حداکثر بازه زمانی 365 روز برمی گرداند.

داده های نوسان

fluctuation نقطه پایان داده های نوسان بین تاریخ های مشخص شده را برای حداکثر بازه زمانی 365 روز برمی گرداند.

واکشی داده ها از API

برای اجرای مبدل ارز ، می توانیم از convert نقطه پایانی (که برای آن باید در لایه Basic مشترک شویم):

https://api.exchangeratesapi.io/v1/convert
 ?access_key=YOUR_API_KEY
 &from=GBP
 &to=JPY
 &amount=25

پاسخی که خواهیم گرفت به این شکل است:

{
 "success": true,
 "query": {
   "from": "GBP",
   "to": "JPY",
   "amount": 25
 },
 "info": {
   "timestamp": 1620904845,
   "rate": 154.245331
 },
 "historical": "",
 "date": "2021-05-14",
 "result": 3856.079212
}

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

مشتری سمت

کد جاوا اسکریپت زیر به API متصل می شود و مقدار تبدیل شده و نرخ ارز را در کنسول چاپ می کند:

// Set endpoint and your access key
const access_key = 'YOUR_API_KEY';
const from = 'GPB';
const to = 'JPY';
const amount = 25;
const url = `https://api.exchangeratesapi.io/v1/convert?access_key=${ access_key }&from=${ from }&to=${ to }&amount=${ amount }`;

// Get the most recent exchange rates via the "latest" endpoint:
fetch(url)
 .then(response => response.json())
 .then(data => {
   // If our tier does not support the requested endpoint, we will get an error
   if (data.error) {
     console.log('Error:', data.error);
     return;
   }

   // We got the data
   console.log('Success:', data);
   console.log('Converted amount: ' + data.result);
   console.log('(Exchange rate: ' + data.info.rate + ')');
 })
 .catch((error) => {
   console.error('Error:', error);
 });

سمت سرور

کد زیر نحوه اتصال به REST API و چاپ نتیجه تبدیل شده را نشان می دهد ، درون یک برنامه PHP.

همین روش را می توان برای سایر زبانها نیز اجرا کرد:

  • URL نقطه پایانی را مشخص کنید ، کلید دسترسی API خود را ضمیمه کنید.
  • به نقطه پایان متصل شوید ، پاسخ آن را در قالب JSON بازیابی کنید.
  • داده های JSON را به یک شی / آرایه رمزگشایی کنید.
  • مقدار تبدیل شده را از زیر دریافت کنید result ویژگی.
// Set endpoint and your access key
$access_key = 'YOUR_API_KEY';
$from = 'GBP';
$to = 'JPY';
$amount = 25;

// Initialize CURL:
$ch = curl_init("https://api.exchangeratesapi.io/v1/convert?access_key=${access_key}&from=${from}&to=${to}&amount=${amount}");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

// Get the JSON data:
$json = curl_exec($ch);
curl_close($ch);

// Decode JSON response:
$conversionResult = json_decode($json, true);

// Access the converted amount
echo $conversionResult['result'];

نتیجه

ExchangeRatesApi.io به عنوان یک متولد شد پروژه منبع باز، با هدف تهیه نرخ ارزهای فعلی و تاریخی منتشر شده توسط بانک مرکزی اروپا و نوشته شده در پایتون.

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

و همچنین می توانید این کار را بسیار ساده تر کنید: اگر می خواهید مبدل ارز خود را در هیچ زمانی کار نکنید ، برای هر زبان برنامه نویسی ، دسترسی به داده های همیشه به روز که شامل مجموعه گسترده ای از منابع تجاری و -API سریع با زمان تقریبی 100٪ (99.9٪ در 12 ماه گذشته) ، سپس بررسی کنید ExchangeRatesApi.io.

سرمقاله سر و صدا(vf، yk، he)
Read More

الگوهای ایده آل برای کاربران صفحه خوان – مجله سر و صدا

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

کاری فیشر نویسنده ، سخنران و توسعه دهنده ای است که علاقه زیادی به تلاقی کد front-end و UX ، قابلیت دسترسی دیجیتال و تنوع در …
اطلاعات بیشتر در مورد Carie

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

در حالی که گرافیک برداری مقیاس پذیر (SVG) برای اولین بار در اواخر دهه 90 معرفی شد ، در دهه گذشته به دلیل انعطاف پذیری فوق العاده ، وفاداری بالا و سبکی نسبی ، در دنیایی که پهنای باند و عملکرد بیش از هر زمان دیگری اهمیت دارد ، شاهد محبوبیت مجدد گسترده ای در دهه اخیر بوده ایم. . پیشرفت در جاوا اسکریپت و معرفی درخواستهای رسانه CSS از جمله @ ترجیح می دهد-رنگ طرح و @ حرکت کمتری را ترجیح می دهد عملکرد SVG ها را فراتر از مورد استفاده اولیه خود برای نمایش ساده تصاویر بردار در وب سایت قرار داده اند.

با پیشرفت فناوری SVG ، درک ما از نحوه طراحی و توسعه SVG نیز باید پیشرفت کند. بخشی از این پیشرفت شامل در نظر گرفتن تأثیر چنین طرح ها و کدهایی بر روی انسان های واقعی ، یعنی کاربران نهایی ما است.

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

البته ، مثالهای زیر به عنوان لیست جامعی از تمام الگوهای احتمالی مورد استفاده در حوزه دیجیتال نیستند ، اما برخی از محبوب ترین یا الگوهای SVG همه جا حاضر ممکن است روبرو شوید به خواندن ادامه دهید تا کشف کنید از کدام الگوهای SVG باید اجتناب کنید و کدام الگوها بیشترین فراوانی را دارند!

توضیحات اصلی جایگزین با استفاده از <img> برچسب زدن

گروه اول از چهار الگو با استفاده از <img> برچسب اتصال به یک فایل SVG. این گزینه خوبی برای تصاویر اساسی و بدون عارضه در وب سایت ، برنامه یا سایر محصولات دیجیتالی شماست. در حالی که اشکال در استفاده از این الگو این است که شما به راحتی نمی توانید بسیاری از عناصر بصری یا انیمیشن ها را به عنوان SVG درون خطی کنترل کنید ، این الگو باید در کل تصاویر سبک تر و سریع تری ارائه دهد و امکان نگهداری آسان تر در SVG هایی که در چندین مکان استفاده می کنید را فراهم کند.

الگوی شماره 1: <img> + alt="[words]"

تصویر روباه ارائه شده در مثال codepen
<img role="img" class="fox" alt="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

الگوی شماره 2: <img> + role="img" + alt="[words]"

تصویر روباه ارائه شده در مثال codepen
<img role="img" class="fox" alt="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

الگوی شماره 3: <img> + role="img" + aria-label="[words]"

تصویر روباه ارائه شده در مثال codepen
<img role="img" class="fox" aria-label="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

الگوی شماره 4: <img> + role="img" + aria-labelledby="[ID]"

تصویر روباه ارائه شده در مثال codepen
<p id="caption1" class="visually-hidden">What does the fox say?</p>
<img role="img" aria-labelledby="caption1" class="fox" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

توضیحات اصلی جایگزین با استفاده از <svg> برچسب زدن

گروه دوم از چهار الگو با استفاده از <svg> با یک فایل SVG درون خطی برچسب گذاری کنید. اگرچه افزودن مستقیم کد SVG به نشانه گذاری می تواند بارگیری صفحه را کمی کندتر کند ، اما با کنترل بیشتر بر عناصر بصری یا انیمیشن های تصاویر ، این ناکارآمدی جزئی جبران می شود. با افزودن مستقیم SVG به HTML ، در مورد ارائه اطلاعات تصویر به کاربران صفحه خوان خود ، گزینه های بیشتری دارید.

الگوی شماره 5: <svg> + role="img" + <title>

تصویر روباه ارائه شده در مثال codepen
<svg role="img" ...>
   <title>What does the fox say?</title>
   [design code]
</svg>

الگوی شماره 6: <svg> + role="img" + <text>

تصویر روباه ارائه شده در مثال codepen
<svg role="img" ...>
   <text class="visually-hidden" font-size="0">What does the fox say?</text>
   [design code]
</svg>

الگوی شماره 7: <svg> + role="img" + <title> + aria-describedby="[ID]"

تصویر روباه ارائه شده در مثال codepen
<svg role="img" aria-describedby="fox7" ...>
   <title id="fox7">What does the fox say?</title>
   [design code]
</svg>

الگوی شماره 8: <svg> + role="img" + <title> + aria-labelledby="[ID]"

تصویر روباه ارائه شده در مثال codepen
<svg role="img" aria-labelledby="fox8" ...>
   <title id="fox8">What does the fox say?</title>
   [design code]
</svg>

توصیفهای جایگزین با استفاده از <svg> برچسب زدن

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

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

بسته به نوع و میزان اطلاعاتی که باید به SVG خود اضافه کنید ، ممکن است به طور کلی روش دیگری را در نظر بگیرید.

الگوی شماره 9: <svg> + role="img" + <title> + <text>

تصویر روباه ارائه شده در مثال codepen
<svg role="img" ...>
   <title>What does the fox say?</title>
   <text class="visually-hidden" font-size="0">Will we ever know?</text>
   [design code]
</svg>

الگوی شماره 10: <svg> + role="img" + <title> + <desc>

تصویر روباه ارائه شده در مثال codepen
<svg role="img" ...>
   <title>What does the fox say?</title>
   <desc>Will we ever know?</desc>
   [design code]
</svg>

الگوی شماره 11: <svg> + role="img" + <title> + <desc> + aria-labelledby="[ID]"

تصویر روباه ارائه شده در مثال codepen
<svg role="img" aria-labelledby="fox11 description11" ...>
   <title id="fox11">What does the fox say?</title>
   <desc id="description11">Will we ever know?</desc>
   [design code]
</svg>

الگوی شماره 12: <svg> + role="img" + <title> + <desc> + aria-describedby="[ID]"

تصویر روباه ارائه شده در مثال codepen
<svg role="img" aria-describedby="fox12 description12" ...>
   <title id="fox12">What does the fox say?</title>
   <desc id="description12">Will we ever know?</desc>
   [design code]
</svg>

مشاهده CodePen کامل [Accessible SVG Pattern Comparison (Fox Version)](https://codepen.io/smashingmag/pen/dyvvbKj) توسط کاری فیشر.

مشاهده CodePen کامل مقایسه الگوی SVG قابل دسترسی (نسخه فاکس) توسط کاری فیشر.

برندگان و بازندگان الگوی SVG

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

توضیحات اصلی جایگزین با استفاده از <img> برچسب (گروه 1)

بهترین در نمایش
  • الگوی 2: <img> + role="img" + alt="[words]"
  • الگوی 3: <img> + role="img" + aria-label="[words]"
احتیاط کن
  • الگوی 4: <img> + role="img" + aria-labelledby="[ID]"
  • الگوی 1: <img> + alt="[words]"

توضیحات اصلی جایگزین با استفاده از <svg> برچسب (گروه 2)

بهترین در نمایش
  • الگوی 5: <svg> + role="img" + <title>
  • الگوی 8: <svg> + role="img" + <title> + aria-labelledby="[ID]"
احتیاط کن
  • الگوی 7: <svg> + role="img" + <title> + aria-describedby="[ID]"
  • الگوی 6: <svg> + role="img" + <text>

توصیفهای جایگزین با استفاده از <svg> برچسب (گروه 3)

بهترین در نمایش
  • الگوی 11: <svg> + role="img" + <title> + <desc> + aria-labelledby="[ID]"

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

احتیاط کن

  • الگوی 9: <svg> + role="img" + <title> + <text>
  • الگوی 10: <svg> + role="img" + <title> + <desc>
  • الگوی 12: <svg> + role="img" + <title> + <desc> + aria-describedby="[ID]"
  • هیچ یک از الگوهای این گروه به طور کامل در این تست ها رد نشدند.

نتایج آزمایش

قلم را ببینید [Testing Results](https://codepen.io/smashingmag/pen/YzZQBwG) توسط کاری فیشر.

قلم را ببینید نتایج آزمایش توسط کاری فیشر.

بسته بندی کردن

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

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

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

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

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

سرمقاله سر و صدا(vf ، او)
Read More

راهنمای رفع اشتباهات با Git (قسمت 2) – مجله سر و صدا

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

در این بخش دوم از مجموعه خود با عنوان “لغو اشتباهات با Git” ، ما با شجاعت دوباره خطر را در چشم خواهیم دید: من چهار سناریوی جدید برای روز قیامت آماده کرده ام – البته شامل برخی از روش های هوشمندانه برای نجات گردن ما! اما قبل از غواصی: نگاهی به مقاله های قبلی در Git بیاندازید تا روش های بیشتری برای نجات خودکار داشته باشید که به شما کمک می کند اشتباهات خود را با Git برطرف کنید!

بیا بریم!

بازیابی شعبه حذف شده با استفاده از Reflog

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

خوشبختانه ، راهی وجود دارد که آن شاخه را از بین ببرد – با کمک یک ابزار Git به نام “Reflog”. ما در بخش اول سری خود از این ابزار استفاده کرده بودیم ، اما در اینجا کمی تازه سازی وجود دارد: Reflog مانند مجله ای است که Git هر حرکت اشاره گر HEAD را در مخزن محلی شما یادداشت می کند. به عبارت دیگر ، واژه های کمتر مزاحم: هر زمان که تسویه حساب کنید ، متعهد شوید ، ادغام شوید ، دوباره پایه بزنید ، گیلاس انتخاب کنید و غیره ، یک ورودی در ژورنال ایجاد می شود. این باعث می شود که Reflog به یک شبکه ایمنی کامل در هنگام خراب شدن کارها تبدیل شود!

بیایید نگاهی به یک مثال عینی بیندازیم:

$ git branch
* feature/login
master

می بینیم که در حال حاضر شعبه خود را داریم feature/login بررسی شد بگذارید بگوییم این شاخه ای است که قصد حذف آن را داریم (سهوا). با این حال ، قبل از انجام این کار ، باید شاخه دیگری را تغییر دهیم زیرا نمی توانیم شاخه HEAD فعلی خود را حذف کنیم!

$ git checkout master
$ git branch -d feature/login

شاخه ویژگی های ارزشمند ما اکنون از بین رفته است – و من یک دقیقه به شما فرصت می دهم تا (الف) از شدت اشتباه خود مطلع شوید و (ب) کمی عزاداری کنید. بعد از اینکه اشک را پاک کردید ، باید راهی برای بازگرداندن این شاخه پیدا کنیم! بیایید Reflog را باز کنیم (به سادگی با تایپ کردن) git reflog) و ببینید چه چیزی برای ما ذخیره کرده است:

Git's Reflog تمام اقدامات اصلی را در مخزن محلی ما پروتکل می دهد
Git’s Reflog تمام اقدامات اصلی را در مخزن محلی ما پروتکل می دهد. (پیش نمایش بزرگ)

در اینجا برخی از نظرات برای کمک به شما در درک نتیجه:

  • اول از همه ، شما باید بدانید که Reflog ورودی های خود را به ترتیب زمانی مرتب می کند: جدیدترین موارد در بالای لیست هستند.
  • بالاترین (و در نتیجه جدیدترین) مورد ، کالای موجود است git checkout دستوری که قبل از حذف شاخه اجرا کردیم. در اینجا در Reflog وارد شده است زیرا یکی از این “حرکات اشاره گر HEAD” است که Reflog آن را با رعایت وظایف لازم ثبت می کند.
  • برای لغو اشتباه فاحش خود ، می توانیم به سادگی به کشور برگردیم قبل از که – که به وضوح و به وضوح در Reflog ثبت شده است!

بنابراین بیایید این را امتحان کنیم ، با ایجاد یک شاخه جدید (با نام شاخه “گمشده” ما) که از این هش حالت “قبل” SHA-1 شروع می شود:

$ git branch feature/login 776f8ca

و voila! شما خوشحال خواهید شد که ببینید ما اکنون شاخه به ظاهر گمشده خود را بازیابی کرده ایم! 🎉

اگر از یک رابط کاربری گرافیکی دسک تاپ مانند «Tower»، می توانید یک میانبر خوب بگیرید: به سادگی ضربه بزنید CMD + با بر روی صفحه کلید خود برای خنثی کردن آخرین دستور – حتی اگر فقط با خشونت شاخه ای را حذف کرده باشید!

رابط کاربری گرافیکی دسک تاپ مانند Tower می تواند روند لغو اشتباه را آسان تر کند.

انتقال تعهد به شعبه دیگری

در بسیاری از تیم ها ، توافق نامه ای برای عدم تعهد در شاخه های طولانی مدت مانند وجود دارد main یا develop: شاخه هایی از این قبیل فقط باید تعهدات جدید را از طریق ادغام دریافت کند (به عنوان مثال ادغام یا دوباره سازی). و البته ، البته ، اشتباهات اجتناب ناپذیر است: ما بعضی اوقات این شاخه ها را فراموش کرده و مرتکب آن می شویم! بنابراین چگونه می توانیم ظرفیتی را که ایجاد کرده ایم پاک کنیم؟

انتقال تعهد به شاخه مقصد صحیح خود
تعهد ما در یک شاخه اشتباه قرار گرفت. چگونه می توانیم آن را به شاخه مقصد صحیح خود منتقل کنیم؟ (پیش نمایش بزرگ)

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

اولین قدم این است که به شاخه مقصد صحیح بروید و سپس مرتکب استفاده بیش از حد از آن شوید cherry-pick دستور:

$ git checkout feature/login
$ git cherry-pick 776f8caf

اکنون تعهد خود را در شعبه مورد نظر ، جایی که در وهله اول قرار داشت ، خواهید داشت. عالی!

اما هنوز یک چیز باقی مانده است که باید انجام دهیم: ما باید شاخه ای را که در آن قرار دارد تمیز کنیم به طور تصادفی در ابتدا فرود آمد! cherry-pick دستور ، به اصطلاح ، یک نسخه از تعهد را ایجاد کرد – اما نسخه اصلی هنوز در شاخه طولانی مدت ما وجود دارد:

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

این بدان معنی است که ما باید به شاخه طولانی مدت خود برگردیم و استفاده کنیم git reset برای حذف آن:

$ git checkout main
$ git reset --hard HEAD~1

همانطور که می بینید ، ما از git reset در اینجا دستور دهید تا تعهد معیوب را پاک کنید. HEAD~1 پارامتر به Git می گوید که “1 نسخه پشت سر HEAD برگرد” ، به طور موثر بالاترین (و در مورد ما: ناخواسته) تعهد را از تاریخچه آن شاخه پاک می کند.

و voila: تعهد اکنون همان جایی است که باید در وهله اول انجام می شد و شاخه طولانی مدت ما تمیز است – گویی که اشتباه ما هرگز اتفاق نیفتاده است!

ویرایش پیام یک تعهد قدیمی

قاچاق اشتباه تایپی به یک پیام متعهد بسیار آسان است – و فقط بعداً می توانید آن را کشف کنید. در چنین حالتی ، قدیمی خوب --amend گزینه از git commit برای رفع این مشکل نمی توان استفاده کرد ، زیرا فقط برای آخرین مرتکب کار می کند. برای اصلاح هر تعهدی که قدیمی تر از آن باشد ، باید به ابزاری Git به نام “Interactive Rebase” متوسل شویم.

پیامی متعهد که قابل تغییر است
در اینجا یک پیام متعهد است که ارزش تغییر دارد. (پیش نمایش بزرگ)

ابتدا باید به Interactive Rebase بگوییم که می خواهیم کدام قسمت از تاریخچه مرتکب را ویرایش کنیم. این کار با تغذیه آن به یک هش متعهد انجام می شود: والدین مرتکب کسی شوید که می خواهیم آن را دستکاری کنیم.

$ git rebase -i 6bcf266b

سپس یک پنجره ویرایشگر باز می شود. این شامل لیستی از همه تعهدات است بعد از موردی که ما به عنوان مبنای Rebase Interactive در دستور ارائه دادیم:

نمایش دامنه تعهداتی که برای ویرایش در جلسه Interactive Rebase انتخاب کرده ایم
دامنه تعهداتی که برای ویرایش در جلسه Interactive Rebase انتخاب کردیم. (پیش نمایش بزرگ)

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

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

در اینجا تمام مراحل در یک نگاه برای شما قرار داده شده است:

با استفاده از Rebase Interactive برای ویرایش پیام مرتکب قدیمی ، از ابتدا تا انتها.

اصلاح یک عهد شکسته (به روشی بسیار زیبا)

در آخر ، ما می خواهیم نگاهی به آن بیندازیم fixup، چاقوی ارتش سوئیس از ابزارهای خنثی کردن. به زبان ساده ، به شما امکان می دهد یک مرتکب شکسته / ناقص / نادرست را پس از واقعیت برطرف کنید. این به دو دلیل واقعاً ابزاری فوق العاده است:

  1. مهم نیست مشکل چیست.
    ممکن است شما اضافه کردن یک پرونده را فراموش کرده باشید ، باید چیزی را حذف کرده باشید ، یک تغییر نادرست انجام دهید یا یک اشتباه تایپی داشته باشید. fixup در همه این شرایط کار می کند!
  2. بسیار ظریف است.
    واکنش عادی و غریزی ما نسبت به اشکال موجود در تعهد ، تولید a است جدید متعهدی که مشکل را برطرف می کند. این روش کار ، هرچند که شهودی به نظر برسد ، باعث می شود خیلی زود سابقه متعهد بودن شما بسیار آشفته به نظر برسد. شما مرتکب “اصلی” شده اید و سپس این کمیته “باند-کمک” کوچک که اشتباهات اولیه را برطرف می کند. تاریخچه شما مملو از تعهدات کمکی باند و بی معنی است که درک آنچه در پایگاه کد شما اتفاق افتاده را دشوار می کند.
اگر مرتباً اشتباهات کوچکی را با تعهدات به اصطلاح کمک باند برطرف کنید ، خواندن تاریخچه تعهد شما بسیار دشوار خواهد بود
رفع مداوم اشتباهات کوچک با “تعهدات کمک باند” خواندن تاریخچه تعهد شما را بسیار سخت می کند. (پیش نمایش بزرگ)

اینجاست که fixup وارد می شود. به شما این امکان را می دهد که همچنان این باند-کمک را اصلاح کنید. اما در اینجا جادو می شود: سپس آن را در مورد عمل اصلی و شکسته اعمال می کند (آن را به این ترتیب ترمیم می کند) و سپس مرتکب کمک باند زشت را به طور کامل کنار می گذارد!

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

ما می توانیم یک مثال عملی را با هم مرور کنیم! بگذارید بگوییم که تعهد انتخاب شده در اینجا شکسته است

رفع مرتکب نادرست انتخاب شده به روشی زیبا
تعهد انتخاب شده نادرست است – و ما می خواهیم آن را به روشی زیبا برطرف کنیم. (پیش نمایش بزرگ)

بیا همچنین بگویید که من تغییراتی را در پرونده ای به نام آماده کرده ام error.html این مسئله را حل خواهد کرد. در اینجا اولین مرحله ای است که باید انجام دهیم:

$ git add error.html
$ git commit --fixup 2b504bee

ما در حال ایجاد یک تعهد جدید هستیم ، اما به Git می گوییم این یک تعهد ویژه است: این یک رفع مشکل برای یک تعهد قدیمی با هش مشخص شده SHA-1 است (2b504bee در این مورد).

مرحله دوم ، اکنون شروع یک جلسه Interactive Rebase است – زیرا fixup متعلق به مجموعه ابزارهای بزرگ Interactive Rebase است.

$ git rebase -i --autosquash 0023cddd

در مورد این دستور دو نکته قابل توضیح است. اول ، چرا تهیه کردم 0023cddd به عنوان هش تجدید نظر در اینجا؟ زیرا ما باید جلسه Interactive Rebase خود را در تعهد والدین همکار شکسته خود شروع کنیم.

دوم ، چه چیزی است --autosquash گزینه برای؟ کار زیادی از روی شانه های ما می گیرد! در پنجره ویرایشگر که اکنون باز می شود ، همه چیز از قبل برای ما آماده شده است:

پنجره جلسه Interactive Rebase
پنجره جلسه تعاملی Rebase (پیش نمایش بزرگ)

با تشکر از --autosquash گزینه ، Git قبلاً کار سنگین را برای ما انجام داده است:

  1. این تعهد کمربند کمکی ما را با fixup کلمه کلیدی اقدام به این ترتیب ، Git آن را مستقیماً با تعهد ترکیب می کند در بالا و سپس آن را دور بریزید.
  2. همچنین خطوط را به ترتیب مرتب کرد ، و تعهد باند کمک ما را مستقیماً زیر تعهدی که می خواهیم برطرف کنیم حرکت می دهد (دوباره: fixup با ترکیب تعهد مشخص شده با یکی کار می کند در بالا!)

به طور خلاصه: هیچ کاری برای ما ندارد جز بستن پنجره!

بیایید نگاهی نهایی به نتیجه نهایی بیندازیم.

  • تعهد شکسته قبلی ثابت است: اکنون شامل تغییراتی است که ما در تعهد کمک باند خود آماده کرده ایم.
  • خود تعهد زشت کمک های باند کنار گذاشته شده است: تاریخچه مرتکب تمیز است و خواندن آن آسان است – گویی که اصلا اشتباهی رخ نداده است.
نمونه ای از اینکه چگونه سابقه مرتکب پاک به نظر می رسد
نتیجه نهایی پس از استفاده از ابزار رفع اشکال: سابقه مرتکب تمیز! (پیش نمایش بزرگ)

دانستن اینکه چگونه خطاها را لغو کنید یک ابرقدرت است

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

اگر می خواهید در مورد لغو اشتباهات با Git بیشتر بدانید ، می توانم “جعبه کمک های اولیه برای Git”، یک سری فیلم کوتاه در مورد دقیقاً همین موضوع.

از اشتباهات لذت ببرید – و البته لغو آنها را با سهولت انجام دهید!

سرمقاله سر و صدا(vf ، او)
Read More

توصیفگرهای قلم CSS – مجله سر و صدا

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

مدت زمان طولانی است که بارگذاری قلم یک مانع از عملکرد وب است و در آنجا وجود دارد در اینجا هیچ گزینه خوبی وجود ندارد. اگر می خواهید از فونت های وب استفاده کنید ، انتخاب های شما اساساً Flash of Invisible Text (معروف به FOIT) است که در آن متن مخفی است تا زمان بارگیری قلم یا Flash of Unstyled Text (FOUT) که در ابتدا از قلم سیستم fallback استفاده می کنید و سپس آن را به فونت وب هنگام بارگیری. صادقانه بگویم هیچ یک از گزینه ها “پیروز” نشده اند زیرا هیچکدام واقعاً راضی کننده نیستند.

نبود font-display قرار است این را حل کنید؟

font-display املاک برای @font-face این انتخاب را به توسعه دهنده وب داده است در حالی که قبلاً مرورگر تصمیم گرفته است که (IE و Edge در گذشته FOUT را دوست داشتند ، در حالی که سایر مرورگرها FOIT را ترجیح می دادند). با این حال ، فراتر از آن ، واقعاً مشکلی حل نشد.

تعدادی از سایتها به آنجا منتقل شدند font-display: swap وقتی این اولین بار بیرون آمد ، و Google Fonts حتی آن را به عنوان پیش فرض قرار داده است در سال 2019. در اینجا فکر این بود که برای عملکرد بهتر است متن را با بیشترین سرعت ممکن نمایش دهید، حتی اگر در فونت جایگزین باشد ، و سپس هنگام بارگیری نهایی ، قلم را در آن عوض کنید.

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

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

اکنون ، وقتی فونت های وب در کنار هم قرار می گیرند ، به طرز چشمگیری زیبا تر هستند و با نام تجاری Smashing Magazine تناسب دارند. اما همچنین می بینیم موارد کاملاً زیادی وجود دارد تفاوت در طرح بندی متن با دو قلم اندازه قلم ها بسیار متفاوت است و به همین دلیل ، محتوای صفحه به اطراف تغییر می کند. در این عصر Core Web Vital ها و تغییرات چیدمان تجمعی (کاملاً درست!) به عنوان ضرر برای کاربران شناخته شده است ، font-display: swap به همین دلیل یک انتخاب ضعیف است.

من دوباره برگشتم به font-display: block در سایتهایی که از آنها مراقبت می کنم ، به نظر من تغییر متن کاملا ناراحت کننده و آزار دهنده است. در حالی که درست است که block شیفت را متوقف نمی کند (قلم هنوز با متن نامرئی ارائه می شود) ، حداقل باعث می شود تا کمتر مورد توجه کاربر قرار بگیرند. من نیز با بارگذاری قلم بهینه سازی شده است با بارگیری پیش فرض هایی که به کوچکترین شکل ممکن ساخته ام قلم های زیرمجموعه میزبان خود – بنابراین بازدیدکنندگان غالباً فقط برای مدت زمان کمی فونت های برگشتی را مشاهده می کنند. برای من ، “دوره بلوک” از swap خیلی کوتاه بود و من صادقانه ترجیح می دهم کمی بیشتر صبر کنم تا رندر اولیه درست شود.

استفاده كردن font-display: optional می تواند FOIT و FOUT را حل کند – با هزینه

گزینه دیگر استفاده از آن است font-display: optional. این گزینه اساساً فونتهای وب را اختیاری می کند ، یا به عبارت دیگر ، اگر قلم در زمان نیاز صفحه به آن نیاز نداشته باشد ، بر عهده مرورگر است که هرگز آن را تعویض نکند. با استفاده از این گزینه ، ما از FOIT و FOUT اجتناب می کنیم اساساً فقط با استفاده از قلمهایی که قبلاً بارگیری شده اند.

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

با این حال ، برداشت های اول محاسبه می شود و داشتن این بار اولیه بدون فونت های وب کمی بیش از حد به نظر می رسد. من همچنین فکر می کنم – اتفاقاً بدون هیچ مدرکی برای تأیید این موضوع! – اینکه این تصور را به مردم خواهد داد ، شاید ناخودآگاه ، اینکه چیزی در مورد وب سایت “خاموش” است و ممکن است بر نحوه استفاده افراد از وب سایت تأثیر بگذارد.

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

ساخت فونت Fallback شما با قلم شما بسیار نزدیکتر است

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

عکسهای صفحه Font Style Matcher نشان می دهد که دو مجموعه بیش از متن روی هم قرار گرفته اند و در قسمت بالا تفاوت های زیادی وجود دارد و در پایین متن بسیار شبیه است.
مطابق سبک قلم عکسهای صفحه با تنظیمات پیش فرض ، یکسان برای دو فونت (بالا) و تنظیمات تنظیم شده برای مطابقت بهتر (پایین). (پیش نمایش بزرگ)

متأسفانه ، مسئله مطابقت سبک قلم این است که نمی توانیم این سبک های CSS را اعمال کنیم فقط به قلم های جایگزین ، بنابراین ما نیاز به استفاده از JavaScript و FontFace.load API برای اعمال (یا برگرداندن) این تفاوت های سبک وقتی فونت وب بارگیری می شود.

مقدار کد زیاد نیست ، اما هنوز هم کمی بیشتر از آنچه باید باشد احساس می شود. اگرچه مزایا و امکانات دیگری برای استفاده از JavaScript API برای این مورد وجود دارد ، همانطور که در اینجا توضیح داده شده است زک چرمن که در این صحبت خارق العاده از سال 2019 – شما می توانید جریان مجدد را کاهش دهید و آن را کنترل کنید data-server حالت و prefers-reduced-motion هرچند که (توجه داشته باشید که از آن زمان به بعد هر دو در معرض CSS قرار گرفته اند).

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

font-family: Mija,-apple-system,Arial,BlinkMacSystemFont,roboto slab,droid serif,segoe ui,Ubuntu,Cantarell,Georgia,serif;

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

راه حل بهتری در راه است

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

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

این دقیقاً همان مجموعه جدیدی است توصیفگرهای قلم به عنوان بخشی از سطح 5 ماژول قلم های CSS انجام دادن. اینها به @font-face اعلامیه هایی که در آن فونت فردی تعریف شده است.

سیمون هرن نوشته شده در مورد یک به روز رسانی پیشنهادی به مشخصات توصیفگر قلم که شامل چهار توصیفگر جدید است: ascent-override، descent-override، line-gap-override و advance-override. شما می توانید با زمین بازی F-mods که سیمون ایجاد کرده است تا فونت های سفارشی و جایگزین شما را بارگیری کند ، سپس با overrides بازی کنید تا کاملا مطابقت داشته باشد.

همانطور که سایمون می نویسد ، ترکیبی از این چهار توصیفگر به ما اجازه می دهد طرح فونت جایگزین را متناسب با فونت وب نادیده بگیریم ، اما آنها فقط فاصله و موقعیت عمودی را تغییر می دهند. بنابراین برای فاصله بین حروف و حروف ، باید CSS اضافی ارائه دهیم. با این حال ، اکنون با تغییر می کند آینده size-adjust توصیف کننده.

چگونه کار می کند؟ فرض کنید شما CSS زیر را دارید:

@font-face {
  font-family: 'Lato';
  src: url('/static/fonts/Lato.woff2') format('woff2');
  font-weight: 400;
}

h1 {
    font-family: Lato, Lato-fallback, Arial;
}

سپس آنچه شما انجام می دهید ایجاد یک است @font-face برای فونت Arial fallback اعمال کنید توصیف کننده های تنظیم کننده به آن سپس قطعه CSS زیر را دریافت خواهید کرد:

@font-face {
  font-family: 'Lato';
  src: url('/static/fonts/Lato.woff2') format('woff2');
  font-weight: 400;
}

@font-face {
    font-family: "Lato-fallback";
    size-adjust: -9900.00%;
    ascent-override: 96%;
    src: local("Arial");
}

h1 {
    font-family: Lato, Lato-fallback, sans-serif;
}

این به این معنی است که وقتی Lato-fallback در ابتدا استفاده می شود (همانطور که Arial یک است local فونت و می تواند بلافاصله و بدون هیچ گونه بارگیری اضافی استفاده شود) سپس size-adjust و ascent-override تنظیمات به شما امکان می دهد این را به قلم Lato نزدیک کنید. این یک چیز اضافی است @font-face اعلامیه برای نوشتن ، اما مطمئناً بسیار آسان تر از حلقه هایی که قبلاً مجبور به پرش از آن بودیم!

به طور کلی ، وجود دارد چهار اصلی @font-face توصیف کنندگان در این مشخصات گنجانده شده است: size-adjust، ascent-override، descent-override، و line-gap-override با چند نفر دیگر هنوز برای موارد استفاده از زیرنویس ، فوق مقاله و موارد دیگر در نظر گرفته شده است.

مالت اوبل ایجاد شده ابزاری بسیار مفید برای محاسبه خودکار این تنظیمات با دو فونت و یک مرورگر که از این تنظیمات جدید پشتیبانی می کند (در یک لحظه بیشتر در مورد این!). همانطور که مالت خاطرنشان کرد ، کامپیوترها در این نوع کارها مهارت دارند! در حالت ایده آل ، ما می توانیم این تنظیمات را برای قلم های رایج در معرض دید توسعه دهندگان وب قرار دهیم ، مثلاً ممکن است این نکات را در مجموعه قلم ها مانند Google Fonts ارائه دهیم؟ این مطمئناً به افزایش فرزندخواندگی کمک می کند.

اکنون سیستم عامل های مختلف ممکن است اندکی داشته باشند تنظیمات مختلف قلم و دقیقاً درست کردن اینها اساساً یک کار غیرممکن است ، اما هدف این نیست. هدف این است که شکاف را از این طریق استفاده کنید font-display: swap دیگر چنین تجربه گیج کننده ای نیست ، اما ما نیازی به افراط در آن نداریم optional یا فونت وب ندارد.

چه زمانی می توانیم از این استفاده کنیم؟

سه مورد از این تنظیمات را دارد قبلاً از نسخه 87 در Chrome ارسال شده است، اگرچه کلید است size-adjust توصیفگر هنوز در هیچ مرورگر پایداری در دسترس نیست. با این حال، Chrome Canary مانند Firefox پشت یک پرچم از آن برخوردار است بنابراین این یک مفهوم انتزاعی و دور نیست ، بلکه چیزی است که می تواند خیلی زود فرود بیاید.

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

Chrome قصد خود را برای اعلام کرده است ساختن size-adjust موجود در Chrome 92 به دلیل انتشار در 20 ژوئیه احتمالاً نشان می دهد تقریباً وجود دارد.

بنابراین ، هنوز کاملاً آماده نیست ، اما به نظر می رسد در آینده ای بسیار نزدیک عرضه خواهد شد. در ضمن ، با یک بازی کنید نسخه ی نمایشی در Chrome Canary و ببینید آیا می تواند کمی بیشتر به رفع مشکلات بارگذاری قلم و تأثیر CLS نزدیک شود.

سرمقاله سر و صدا(vf ، او)

Read More

نحوه پیاده سازی احراز هویت در Next.js با Auth0 – Smashing Magazine

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

مهندس سیستم از بوینس آیرس ، آرژانتین ، با 15+ سال تجربه در زمینه تولید نرم افزار. توسعه دهنده پشته کامل. سفیر Auth0. GitKraken
اطلاعات بیشتر در مورد Facundo

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

“احراز هویت” عبارت است از تأیید اعتبار اینکه کاربر همان شخصی باشد که ادعا می کند. ما این کار را معمولاً با پیاده سازی سیستم اطلاعات کاربری ، مانند کاربر / گذرواژه ، س questionsالات امنیتی یا حتی تشخیص چهره انجام می دهیم.

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

هنگام ارزیابی اینکه آیا بهتر است که ما سیستم عامل خود را ایجاد کنیم یا از سرویس شخص ثالث استفاده کنیم ، مواردی وجود دارد که باید آنها را در نظر بگیریم:

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

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

در این مقاله ، نحوه پیاده سازی احراز هویت و مجوز را در برنامه های Next.js با استفاده از یکی از محصولات موجود در بازار مشاهده خواهیم کرد: Auth0.

Auth0 چیست؟

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

“Auth0 یک راه حل انعطاف پذیر و منفی برای افزودن خدمات تأیید اعتبار و مجوز به برنامه های شماست.”

و آریاس، auth0.com

Auth0 دارای چندین ویژگی جالب است ، مانند:

  • ورود به سیستم تنها: به محض ورود به برنامه ای که از Auth0 استفاده می کند ، هنگام وارد کردن برنامه دیگری که از آن استفاده می کند ، مجبور نیستید دوباره اعتبارنامه خود را وارد کنید. به طور خودکار وارد همه آنها خواهید شد.
  • ورود به سیستم اجتماعی: با استفاده از نمایه شبکه اجتماعی دلخواه خود احراز هویت کنید.
  • احراز هویت چند عاملی؛
  • چند پروتکل استاندارد مجاز هستند ، مانند OpenID Connect ، JSON Web Token یا OAuth 2.0.
  • گزارشگری و ابزارهای تحلیلی.

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

نکته جالب دیگر در مورد Auth0 این است که ما یک Next.js SDK موجود برای استفاده در برنامه ما. با استفاده از این کتابخانه که مخصوص Next.js ایجاد شده است ، می توانیم به راحتی به Auth0 API متصل شویم.

Auth0 SDK برای Next.js

همانطور که قبلاً اشاره کردیم ، Auth0 SDK متمرکز Next.js را ایجاد کرده و آن را حفظ می کند ، در میان سایر SDK های موجود برای اتصال به API با استفاده از زبانهای مختلف برنامه نویسی. ما فقط باید بارگیری کنیم بسته NPM، برخی از جزئیات مربوط به حساب و اتصال Auth0 خود را پیکربندی کنید ، و ما باید کار خود را ادامه دهیم.

این SDK به ما ابزارهایی برای پیاده سازی احراز هویت و مجوز با هر دو روش سمت کلاینت و سمت سرور ، با استفاده از API Routes در قسمت پشتی و React Context با React Hooks در جلو می دهد.

بیایید ببینیم که برخی از آنها در مثال Next.js چگونه کار می کند.

مثال Next.js برنامه با استفاده از Auth0

بیایید به مثال قبلی پلت فرم ویدئویی خود برگردیم و یک برنامه کوچک ایجاد کنیم تا نحوه استفاده از Auth0 Next.js SDK را نشان دهد. ما راه اندازی خواهیم کرد ورود جهانی Auth0. ما چند URL ویدیوی YouTube خواهیم داشت. آنها در زیر یک بستر احراز هویت پنهان می شوند. فقط کاربران ثبت نام شده قادر به مشاهده لیست فیلم ها از طریق برنامه وب ما هستند.

توجه داشته باشید: این مقاله بر روی پیکربندی و استفاده از Auth0 در برنامه Next.js شما متمرکز است. ما به جزئیاتی مانند سبک CSS یا استفاده از پایگاه داده وارد نخواهیم شد. اگر می خواهید کد کامل برنامه نمونه را مشاهده کنید ، می توانید به اینجا بروید این مخزن GitHub.

حساب Auth0 ایجاد کرده و جزئیات برنامه را پیکربندی کنید

اول از همه ، ما باید یک حساب Auth0 با استفاده از ایجاد کنیم صفحه ثبت نام.

ایجاد یک حساب Auth0 با استفاده از صفحه ثبت نام
(پیش نمایش بزرگ)

پس از آن ، بیایید به داشبورد Auth0. قابل اعتماد و متخصص برنامه های کاربردی و یک برنامه جدید از نوع ایجاد کنید [“Regular Web Applications”].

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

حالا بیایید سراغ تنظیمات برگه برنامه و در زیر URI های برنامه بخش ، جزئیات زیر را پیکربندی کرده و تغییرات را ذخیره کنید:

  • URL های برگشت تماس مجاز است: اضافه کردن http://localhost:3000/api/auth/callback
  • URL های خروج مجاز است: اضافه کردن http://localhost:3000/
برگه تنظیمات برنامه.
(پیش نمایش بزرگ)

با این کار ، ما در حال پیکربندی URL هستیم که می خواهیم بعد از ورود کاربران به سایت ما (Callback) ، و URL که بعد از ورود کاربران به سیستم آنها هدایت می شویم (Logout) ، هدایت شوند. وقتی نسخه نهایی برنامه خود را در سرور میزبان مستقر می کنیم ، باید URL های تولید را اضافه کنیم.

Auth0 Dashboard دارای پیکربندی ها و تنظیمات بسیاری است که می توانیم برای پروژه های خود اعمال کنیم. ما می توانیم نوع احراز هویت مورد استفاده خود ، صفحه ورود به سیستم / ثبت نام ، داده هایی را که برای کاربران درخواست می کنیم تغییر دهیم ، ثبت نام های جدید را فعال یا غیرفعال کنیم ، پایگاه داده کاربران را تنظیم کنیم و غیره.

برنامه Next.js ایجاد کنید

برای ایجاد یک برنامه کاملاً جدید Next.js ، ما استفاده خواهیم کرد ایجاد برنامه بعدی، که همه چیز را به طور خودکار برای شما تنظیم می کند. برای ایجاد پروژه ، اجرا کنید:

npx create-next-app [name-of-the-app]

یا

yarn create next-app [name-of-the-app]

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

cd [name-of-the-app]

و اجرا:

npm run dev

یا

yarn dev

Auth0 Next.js SDK را نصب و پیکربندی کنید

بیایید Auth0 Next.js SDK را در برنامه خود نصب کنیم:

npm install @auth0/nextjs-auth0

یا

yarn add @auth0/nextjs-auth0

حال ، در پرونده env.local (یا منوی متغیرهای محیط بستر میزبانی خود) ، اجازه دهید این متغیرها را اضافه کنیم:

AUTH0_SECRET="[A 32 characters secret used to encrypt the cookies]"
AUTH0_BASE_URL="http://localhost:3000"
AUTH0_ISSUER_BASE_URL="https://[Your tenant domain. Can be found in the Auth0 dashboard under settings]"
AUTH0_CLIENT_ID="[Can be found in the Auth0 dashboard under settings]"
AUTH0_CLIENT_SECRET="[Can be found in the Auth0 dashboard under settings]"
گزینه های پیکربندی برای Auth0 Next.js SDK.
(پیش نمایش بزرگ)

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

مسیر Dynamic API را ایجاد کنید

Next.js راهی برای ایجاد API های بدون سرور ارائه می دهد: مسیرهای API. با استفاده از این ویژگی ، ما می توانیم کدی ایجاد کنیم که در هر درخواست کاربر به مسیرهایمان اجرا شود. ما می توانیم مسیرهای ثابت را تعریف کنیم ، مانند /api/index.js. اما ما همچنین می توانیم داشته باشیم مسیرهای API پویا، به همراه پارامترهایی که می توانیم از آنها در کد مسیرهای API خود استفاده کنیم /api/blog/[postId].js.

بیایید پرونده را ایجاد کنیم /pages/api/auth/[...auth0].js، که یک مسیر API پویا خواهد بود. در داخل فایل ، اجازه دهید فایل را وارد کنیم handleAuth روش از Auth0 SDK ، و نتیجه را صادر کنید:

import { handleAuth } from '@auth0/nextjs-auth0';

export default handleAuth();

این مسیرهای زیر را ایجاد و مدیریت می کند:

  • /api/auth/login
    برای انجام ورود یا ثبت نام با Auth0.
  • /api/auth/logout
    برای خارج شدن کاربر.
  • /api/auth/callback
    برای هدایت کاربر پس از ورود موفقیت آمیز.
  • /api/auth/me
    برای دریافت اطلاعات پروفایل کاربر

و این قسمت سمت سرور برنامه ما خواهد بود. اگر می خواهیم وارد برنامه خود شویم یا برای یک حساب جدید ثبت نام کنیم ، باید از آن بازدید کنیم http://localhost:3000/api/auth/login. ما باید در برنامه خود پیوندی به آن مسیر اضافه کنیم. برای خروج از سایت ما نیز همین: پیوندی را به اضافه کنید http://localhost:3000/api/auth/logout.

م Userلفه UserProvider را اضافه کنید

برای مدیریت وضعیت احراز هویت کاربر در جبهه برنامه وب ما ، می توانیم استفاده کنیم UserProvider م componentلفه React ، موجود در Auth0 Next.js SDK. این ملفه استفاده می کند واکنش به متن درونی

اگر می خواهید به حالت احراز هویت کاربر در یک جز access دسترسی پیدا کنید ، باید آن را با یک بسته بندی کنید UserProvider جزء.

<UserProvider>
  <Component {...props} />
</UserProvider>

اگر می خواهیم به همه صفحات برنامه خود دسترسی پیدا کنیم ، باید این م componentلفه را به pages/_app.js فایل. pages/_app.js React را نادیده می گیرد App جزء. این یک ویژگی است که Next.js برای شخصی سازی برنامه ما در معرض دید قرار می دهد. می توانید در این باره بیشتر بخوانید اینجا.

import React from 'react';
import { UserProvider } from '@auth0/nextjs-auth0';

export default function App({ Component, pageProps }) {
  return (
    <UserProvider>
      <Component {...pageProps} />
    </UserProvider>
  );
}

ما یک قلاب React داریم useUser که به حالت احراز هویت در معرض UserProvider. برای مثال می توانیم از آن برای ایجاد نوعی صفحه خوش آمد گویی استفاده کنیم. بیایید کد را تغییر دهیم pages/index.js فایل:

import { useUser } from "@auth0/nextjs-auth0";

export default () => {
 const { user, error, isLoading } = useUser();

 if (isLoading) return <div>Loading...</div>;

 if (error) return <div>{error.message}</div>;

 if (user) {
   return (
     <div>
       <h2>{user.name}</h2>
       <p>{user.email}</p>
       <a href="https://smashingmagazine.com/api/auth/logout">Logout</a>
     </div>
   );
 }
 return <a href="http://smashingmagazine.com/api/auth/login">Login</a>;
};

user شی شامل اطلاعات مربوط به هویت کاربر است. اگر شخصی که از این صفحه بازدید می کند وارد سیستم نشود (الف نداریم) user شی available موجود) ، ما پیوندی به صفحه ورود به سیستم نمایش خواهیم داد. اگر کاربر از قبل احراز هویت شده باشد ، ما نمایش می دهیم user.name و user.email خصوصیات موجود در صفحه و پیوند خروج از سیستم.

بیایید یک فایل videos.js با لیستی از سه URL ویدیوی YouTube ایجاد کنیم که فقط برای افراد ثبت شده قابل مشاهده خواهد بود. برای اینکه فقط به کاربران وارد شده اجازه مشاهده این صفحه را بدهیم ، ما استفاده خواهیم کرد withPageAuthRequired روش از SDK.

import { withPageAuthRequired } from "@auth0/nextjs-auth0";

export default () => {
 return (
   <div>
     <a href="https://www.youtube.com/watch?v=5qap5aO4i9A">LoFi Music</a>
     <a href="https://www.youtube.com/watch?v=fEvM-OUbaKs">Jazz Music</a>
     <a href="https://www.youtube.com/watch?v=XULUBg_ZcAU">Piano Music</a>
   </div>
 );
};

export const getServerSideProps = withPageAuthRequired();

توجه داشته باشید که برنامه وب ما به هر شخص اجازه می دهد تا با استفاده از بستر Auth0 در حساب خود ثبت نام کند. همانطور که ما در حال پیاده سازی ورود جهانی هستیم ، کاربر همچنین می تواند از یک حساب Auth0 موجود دوباره استفاده کند.

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

نتیجه

در این مقاله ، نحوه ایمن سازی برنامه های Next.js با استفاده از Auth0 ، یک بستر تأیید اعتبار و مجوز ، را مشاهده کردیم. ما در مقایسه با ایجاد بستر امنیتی خود ، مزایای استفاده از سرویس شخص ثالث را برای تأیید اعتبار برنامه های وب خود ارزیابی می کنیم. ما یک نمونه برنامه Next.js ایجاد کردیم و آن را با استفاده از Auth0 free plan و Auth0 Next.js SDK ایمن کردیم.

اگر می خواهید یک برنامه Auth0 به عنوان مثال در استفاده کنید Vercel، شما می توانید آن را انجام دهید اینجا.

خواندن و منابع بیشتر

سرمقاله سر و صدا(vf، yk، he)
Read More

کارگاه های سر و صدا در جلو و طراحی – مجله سر و صدا

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

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

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

چگونه می توانیم یک سیستم طراحی موفق؟ مدرن چطور؟ CSS و JavaScript؟ وضعیت ایمیل HTML چگونه است؟ و چه چیزهای جدید ، هوشمندانه ای است الگوهای طراحی ما می توانیم استفاده کنیم؟ انتقال ما به TypeScript یا Vue.js به چه چیزی نیاز دارد؟ با ما کارگاه های آنلاین، سعی می کنیم به این س questionsالات به خوبی پاسخ دهیم.

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

یک گربه Smashing دوستانه به عنوان کاپیتان که در اقیانوس قایقرانی می کند.
ملاقات کارگاه های آنلاین سر و صدا: جلسات زنده و تعاملی در جلو و UX.

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

کارگاه های آینده (مه-سپتامبر 2021)

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

ما همچنین داریم بسته های دوستانه برای تیم ها و آژانس های بزرگتر

کارگاه های آموزشی در ماه مه – ژوئیه

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

کارگاه های آموزشی در آگوست – سپتامبر

کارگاه های آنلاین چگونه هستند؟

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

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

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

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

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

TL ؛ دکتر

  • دوره کارگاه ها چند روز، تقسیم جلسات 2.5 ساعته.
  • هر روز وقت کافی برای پرسش و پاسخ زنده است.
  • ده ها نمونه های عملی و تکنیک ها
  • شما تمام مواد و ضبط های کارگاه را دریافت خواهید کرد.
  • همه کارگاه ها بر روی جلو و UX متمرکز شده اند.
  • بسته کارگاهی تهیه کنید و 250 دلار پس انداز کنید خارج از قیمت

متشکرم!

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

سرمقاله سر و صدا(vf)
Read More

نحوه احراز هویت در Next.js با Auto0 – Smashing Magazine

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

مهندس سیستم از بوینس آیرس ، آرژانتین ، با 15+ سال تجربه در زمینه تولید نرم افزار. توسعه دهنده پشته کامل. سفیر Auth0. GitKraken
اطلاعات بیشتر در مورد Facundo

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

“احراز هویت” عبارت است از تأیید اعتبار اینکه کاربر همان شخصی باشد که ادعا می کند. ما این کار را معمولاً با پیاده سازی سیستم اطلاعات کاربری ، مانند کاربر / گذرواژه ، س questionsالات امنیتی یا حتی تشخیص چهره انجام می دهیم.

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

هنگام ارزیابی اینکه آیا بهتر است که ما سیستم عامل خود را ایجاد کنیم یا از سرویس شخص ثالث استفاده کنیم ، مواردی وجود دارد که باید آنها را در نظر بگیریم:

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

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

در این مقاله ، نحوه پیاده سازی احراز هویت و مجوز را در برنامه های Next.js با استفاده از یکی از محصولات موجود در بازار مشاهده خواهیم کرد: Auth0.

Auth0 چیست؟

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

“Auth0 یک راه حل انعطاف پذیر و منفی برای افزودن خدمات تأیید اعتبار و مجوز به برنامه های شماست.”

و آریاس، auth0.com

Auth0 دارای چندین ویژگی جالب است ، مانند:

  • ورود به سیستم تنها: به محض ورود به برنامه ای که از Auth0 استفاده می کند ، هنگام وارد کردن برنامه دیگری که از آن استفاده می کند ، مجبور نیستید دوباره اعتبارنامه خود را وارد کنید. به طور خودکار وارد همه آنها خواهید شد.
  • ورود به سیستم اجتماعی: با استفاده از نمایه شبکه اجتماعی دلخواه خود احراز هویت کنید.
  • احراز هویت چند عاملی؛
  • چند پروتکل استاندارد مجاز هستند ، مانند OpenID Connect ، JSON Web Token یا OAuth 2.0.
  • گزارشگری و ابزارهای تحلیلی.

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

نکته جالب دیگر در مورد Auth0 این است که ما یک Next.js SDK موجود برای استفاده در برنامه ما. با استفاده از این کتابخانه که مخصوص Next.js ایجاد شده است ، می توانیم به راحتی به Auth0 API متصل شویم.

Auth0 SDK برای Next.js

همانطور که قبلاً اشاره کردیم ، Auth0 SDK متمرکز Next.js را ایجاد کرده و آن را حفظ می کند ، در میان سایر SDK های موجود برای اتصال به API با استفاده از زبانهای مختلف برنامه نویسی. ما فقط باید بارگیری کنیم بسته NPM، برخی از جزئیات مربوط به حساب و اتصال Auth0 خود را پیکربندی کنید ، و ما باید کار خود را ادامه دهیم.

این SDK به ما ابزارهایی برای پیاده سازی احراز هویت و مجوز با هر دو روش سمت کلاینت و سمت سرور ، با استفاده از API Routes در قسمت پشتی و React Context با React Hooks در جلو می دهد.

بیایید ببینیم که برخی از آنها در مثال Next.js چگونه کار می کند.

مثال Next.js برنامه با استفاده از Auth0

بیایید به مثال قبلی پلت فرم ویدئویی خود برگردیم و یک برنامه کوچک ایجاد کنیم تا نحوه استفاده از Auth0 Next.js SDK را نشان دهد. ما راه اندازی خواهیم کرد ورود جهانی Auth0. ما چند URL ویدیوی YouTube خواهیم داشت. آنها در زیر یک بستر احراز هویت پنهان می شوند. فقط کاربران ثبت نام شده قادر به مشاهده لیست فیلم ها از طریق برنامه وب ما هستند.

توجه داشته باشید: این مقاله بر روی پیکربندی و استفاده از Auth0 در برنامه Next.js شما متمرکز است. ما به جزئیاتی مانند سبک CSS یا استفاده از پایگاه داده وارد نخواهیم شد. اگر می خواهید کد کامل برنامه نمونه را مشاهده کنید ، می توانید به اینجا بروید این مخزن GitHub.

حساب Auth0 ایجاد کرده و جزئیات برنامه را پیکربندی کنید

اول از همه ، ما باید یک حساب Auth0 با استفاده از ایجاد کنیم صفحه ثبت نام.

ایجاد یک حساب Auth0 با استفاده از صفحه ثبت نام
(پیش نمایش بزرگ)

پس از آن ، بیایید به داشبورد Auth0. قابل اعتماد و متخصص برنامه های کاربردی و یک برنامه جدید از نوع ایجاد کنید [“Regular Web Applications”].

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

حالا بیایید سراغ تنظیمات برگه برنامه و در زیر URI های برنامه بخش ، جزئیات زیر را پیکربندی کرده و تغییرات را ذخیره کنید:

  • URL های برگشت تماس مجاز است: اضافه کردن http://localhost:3000/api/auth/callback
  • URL های خروج مجاز است: اضافه کردن http://localhost:3000/
برگه تنظیمات برنامه.
(پیش نمایش بزرگ)

با این کار ، ما در حال پیکربندی URL هستیم که می خواهیم بعد از ورود کاربران به سایت ما (Callback) ، و URL که بعد از ورود کاربران به سیستم آنها هدایت می شویم (Logout) ، هدایت شوند. وقتی نسخه نهایی برنامه خود را در سرور میزبان مستقر می کنیم ، باید URL های تولید را اضافه کنیم.

Auth0 Dashboard دارای پیکربندی ها و تنظیمات بسیاری است که می توانیم برای پروژه های خود اعمال کنیم. ما می توانیم نوع احراز هویت مورد استفاده خود ، صفحه ورود به سیستم / ثبت نام ، داده هایی را که برای کاربران درخواست می کنیم تغییر دهیم ، ثبت نام های جدید را فعال یا غیرفعال کنیم ، پایگاه داده کاربران را تنظیم کنیم و غیره.

برنامه Next.js ایجاد کنید

برای ایجاد یک برنامه کاملاً جدید Next.js ، ما استفاده خواهیم کرد ایجاد برنامه بعدی، که همه چیز را به طور خودکار برای شما تنظیم می کند. برای ایجاد پروژه ، اجرا کنید:

npx create-next-app [name-of-the-app]

یا

yarn create next-app [name-of-the-app]

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

cd [name-of-the-app]

و اجرا:

npm run dev

یا

yarn dev

Auth0 Next.js SDK را نصب و پیکربندی کنید

بیایید Auth0 Next.js SDK را در برنامه خود نصب کنیم:

npm install @auth0/nextjs-auth0

یا

yarn add @auth0/nextjs-auth0

حال ، در پرونده env.local (یا منوی متغیرهای محیط بستر میزبانی خود) ، اجازه دهید این متغیرها را اضافه کنیم:

AUTH0_SECRET="[A 32 characters secret used to encrypt the cookies]"
AUTH0_BASE_URL="http://localhost:3000"
AUTH0_ISSUER_BASE_URL="https://[Your tenant domain. Can be found in the Auth0 dashboard under settings]"
AUTH0_CLIENT_ID="[Can be found in the Auth0 dashboard under settings]"
AUTH0_CLIENT_SECRET="[Can be found in the Auth0 dashboard under settings]"
گزینه های پیکربندی برای Auth0 Next.js SDK.
(پیش نمایش بزرگ)

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

مسیر Dynamic API را ایجاد کنید

Next.js راهی برای ایجاد API های بدون سرور ارائه می دهد: مسیرهای API. با استفاده از این ویژگی ، ما می توانیم کدی ایجاد کنیم که در هر درخواست کاربر به مسیرهایمان اجرا شود. ما می توانیم مسیرهای ثابت را تعریف کنیم ، مانند /api/index.js. اما ما همچنین می توانیم داشته باشیم مسیرهای API پویا، به همراه پارامترهایی که می توانیم از آنها در کد مسیرهای API خود استفاده کنیم /api/blog/[postId].js.

بیایید پرونده را ایجاد کنیم /pages/api/auth/[...auth0].js، که یک مسیر API پویا خواهد بود. در داخل فایل ، اجازه دهید فایل را وارد کنیم handleAuth روش از Auth0 SDK ، و نتیجه را صادر کنید:

import { handleAuth } from '@auth0/nextjs-auth0';

export default handleAuth();

این مسیرهای زیر را ایجاد و مدیریت می کند:

  • /api/auth/login
    برای انجام ورود یا ثبت نام با Auth0.
  • /api/auth/logout
    برای خارج شدن کاربر.
  • /api/auth/callback
    برای هدایت کاربر پس از ورود موفقیت آمیز.
  • /api/auth/me
    برای دریافت اطلاعات پروفایل کاربر

و این قسمت سمت سرور برنامه ما خواهد بود. اگر می خواهیم وارد برنامه خود شویم یا برای یک حساب جدید ثبت نام کنیم ، باید از آن بازدید کنیم http://localhost:3000/api/auth/login. ما باید در برنامه خود پیوندی به آن مسیر اضافه کنیم. برای خروج از سایت ما نیز همین: پیوندی را به اضافه کنید http://localhost:3000/api/auth/logout.

م Userلفه UserProvider را اضافه کنید

برای مدیریت وضعیت احراز هویت کاربر در جبهه برنامه وب ما ، می توانیم استفاده کنیم UserProvider م componentلفه React ، موجود در Auth0 Next.js SDK. این ملفه استفاده می کند واکنش به متن درونی

اگر می خواهید به حالت احراز هویت کاربر در یک جز access دسترسی پیدا کنید ، باید آن را با یک بسته بندی کنید UserProvider جزء.

<UserProvider>
  <Component {...props} />
</UserProvider>

اگر می خواهیم به همه صفحات برنامه خود دسترسی پیدا کنیم ، باید این م componentلفه را به pages/_app.js فایل. pages/_app.js React را نادیده می گیرد App جزء. این یک ویژگی است که Next.js برای شخصی سازی برنامه ما در معرض دید قرار می دهد. می توانید در این باره بیشتر بخوانید اینجا.

import React from 'react';
import { UserProvider } from '@auth0/nextjs-auth0';

export default function App({ Component, pageProps }) {
  return (
    <UserProvider>
      <Component {...pageProps} />
    </UserProvider>
  );
}

ما یک قلاب React داریم useUser که به حالت احراز هویت در معرض UserProvider. برای مثال می توانیم از آن برای ایجاد نوعی صفحه خوش آمد گویی استفاده کنیم. بیایید کد را تغییر دهیم pages/index.js فایل:

import { useUser } from "@auth0/nextjs-auth0";

export default () => {
 const { user, error, isLoading } = useUser();

 if (isLoading) return <div>Loading...</div>;

 if (error) return <div>{error.message}</div>;

 if (user) {
   return (
     <div>
       <h2>{user.name}</h2>
       <p>{user.email}</p>
       <a href="https://smashingmagazine.com/api/auth/logout">Logout</a>
     </div>
   );
 }
 return <a href="http://smashingmagazine.com/api/auth/login">Login</a>;
};

user شی شامل اطلاعات مربوط به هویت کاربر است. اگر شخصی که از این صفحه بازدید می کند وارد سیستم نشود (الف نداریم) user شی available موجود) ، ما پیوندی به صفحه ورود به سیستم نمایش خواهیم داد. اگر کاربر از قبل احراز هویت شده باشد ، ما نمایش می دهیم user.name و user.email خصوصیات موجود در صفحه و پیوند خروج از سیستم.

بیایید یک فایل videos.js با لیستی از سه URL ویدیوی YouTube ایجاد کنیم که فقط برای افراد ثبت شده قابل مشاهده خواهد بود. برای اینکه فقط به کاربران وارد شده اجازه مشاهده این صفحه را بدهیم ، ما استفاده خواهیم کرد withPageAuthRequired روش از SDK.

import { withPageAuthRequired } from "@auth0/nextjs-auth0";

export default () => {
 return (
   <div>
     <a href="https://www.youtube.com/watch?v=5qap5aO4i9A">LoFi Music</a>
     <a href="https://www.youtube.com/watch?v=fEvM-OUbaKs">Jazz Music</a>
     <a href="https://www.youtube.com/watch?v=XULUBg_ZcAU">Piano Music</a>
   </div>
 );
};

export const getServerSideProps = withPageAuthRequired();

توجه داشته باشید که برنامه وب ما به هر شخص اجازه می دهد تا با استفاده از بستر Auth0 در حساب خود ثبت نام کند. همانطور که ما در حال پیاده سازی ورود جهانی هستیم ، کاربر همچنین می تواند از یک حساب Auth0 موجود دوباره استفاده کند.

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

نتیجه

در این مقاله ، نحوه ایمن سازی برنامه های Next.js با استفاده از Auth0 ، یک بستر تأیید اعتبار و مجوز ، را مشاهده کردیم. ما در مقایسه با ایجاد بستر امنیتی خود ، مزایای استفاده از سرویس شخص ثالث را برای تأیید اعتبار برنامه های وب خود ارزیابی می کنیم. ما یک نمونه برنامه Next.js ایجاد کردیم و آن را با استفاده از Auth0 free plan و Auth0 Next.js SDK ایمن کردیم.

اگر می خواهید یک برنامه Auth0 به عنوان مثال در استفاده کنید Vercel، شما می توانید آن را انجام دهید اینجا.

خواندن و منابع بیشتر

سرمقاله سر و صدا(vf، yk، he)
Read More