Category: طراحی سایت

فرآیند طراحی کامل چیست؟ – مجله Smashing

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

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

فرآیند طراحی “درست” چیست؟

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

  • فرآیند دو الماس برای روش جامع و قابل اعتماد آن برای حل مشکلات. در این راهنما، دن نسلر کل فرآیند Double-Diamond را به بخش‌های منفرد تقسیم می‌کند و نحوه عملکرد آن را گام به گام و با تمام جزئیات دقیق توضیح می‌دهد.
چگونه یک تفکر طراحی، HCD، UX یا هر فرآیند خلاقانه ای را از ابتدا اعمال کنیم
کلاسیک. را فرآیند Double-Diamond بازسازی شد برای واقعیت آشفته راهنمای مفید توسط دن نسلر. (پیش نمایش بزرگ)
  • فرآیند الماس سه گانه برای رویکرد واقعی تر آن به ورودی طراح در طول چرخه عمر محصول. این یک قطعه است آدام گری در مورد اینکه چرا آوردن انعطاف‌پذیری به واقعیت کثیف فرآیند طراحی برای بهبود برنامه‌ریزی و شامل کار طراحی به عنوان نمونه‌های اولیه حیاتی است.
چرا الماس دوتایی کافی نیست
گسترش دو الماس با یک الماس اضافی برای تمرکز بیشتر در آزمایش و اصلاح. از جانب فرآیند الماس سه گانه، راهنمای آدام گری. (پیش نمایش بزرگ)
  • مدل تفکر طراحی سازمانی توسط IBM برای تمرکز آن بر بلوغ و مقیاس طراحی، که واقعا به سازمان های بزرگ کمک می کند. یک مدل مفید که به استدلال برای تحقیقات کاربر، تمرکز کاربر، و نمونه‌سازی سریع با وفاداری پایین – و نحوه انتقال مالکیت به تیم‌های طراحی در مقیاس کمک می‌کند.
تفکر طراحی چارچوب مجدداً برای شرکت مدرن پیش بینی شده است
یک مدل مفید برای پروژه های پیچیده و دنیای سازمانی: مدل تفکر طراحی سازمانی توسط IBM. (پیش نمایش بزرگ)
  • فرآیند سیب زمینی داغ، به دلیل سادگی آن در پل زدن طراحی و توسعه در سراسر کل چرخه عمر محصول. طراحان و توسعه دهندگان ایده ها، ماکت ها و نمونه های اولیه را به طور دائم به یکدیگر می اندازند. گاهی اوقات مراحل طراحی درگیر بیشتری نسبت به فازهای توسعه دهنده وجود دارد، اما دست آف وجود ندارد، و کل فرآیند توسط هدایت می شود همکاری مستمر.
فرآیند سیب زمینی داغ
یک رویکرد مشترک برای طراحان و توسعه دهندگان، با تمرکز بر پرتاب ایده ها به عقب و جلو: فرآیند سیب زمینی داغ توسط دن مال. (پیش نمایش بزرگ)

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

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

فرآیندی که برای من کار می کند

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

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

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

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

برای اطمینان از اینکه هر دو طرف معادله را به درستی دریافت کرده‌ام، نقشه‌های سفر مشتری، ایده‌های طوفان فکری و آنها را در اولویت قرار دهید با مدل کانو و تاثیر ÷ ماتریس تلاش (با توسعه دهندگان، PM ها و سهامداران).

نمونه ای از درخت طراحی KPI
یک نمونه ای از درخت طراحی KPI، پیوند اهداف تجاری با اهداف طراحی. (پیش نمایش بزرگ)

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

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

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

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

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

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

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

بسته بندی

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

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

شما می توانید جزئیات بیشتری را در الگوهای طراحی در کتابخانه ویدیویی در مورد الگوهای طراحی رابط هوشمند 🍣 – با یک آموزش زنده UX که در سپتامبر امسال در راه است.

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

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

ساختن طرح‌بندی‌های CSS در یک ابزار طراحی – مجله Smashing

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

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

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

طراحی چیدمان به درستی انجام شده است

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

Flexbox نان و کره ای برای ایجاد چیدمان های ساده و انعطاف پذیر است. این رایج‌ترین روش برای قرار دادن عناصر است: چیدن آن‌ها در ردیف‌ها و ستون‌ها و تصمیم‌گیری در مورد نحوه تراز و توزیع آنها.

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

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

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

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

شروع به کار با طرح بندی فلکس

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

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

عناصر را می توان به هر طریقی مرتب کرد

Flex Layout به شما این امکان را می‌دهد تا کنترل کنید که چگونه عناصر موجود در این لیست‌ها در مقابل یکدیگر قرار می‌گیرند.

عناصر در مقابل یکدیگر قرار گرفته اند

همچنین می‌توانید نحوه چیدمان عناصر در کانتینرها را کنترل کنید.

عناصر درون ظروف

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

عناصر تو در تو به صورت طرح بندی های پیچیده

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

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

ساختن یک مثال با هم

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

نمونه ماکت

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

همچنین می‌توانیم از Flex Layout برای پشته آواتارها استفاده کنیم. برای همپوشانی تصاویر، یک شکاف منفی بین عناصر کار را انجام می دهد. ما همچنین کنترل کاملی بر ترتیب عناصر داریم. ما می توانیم پشته را در هر جهتی قرار دهیم. همچنین می توانیم ترتیب پشته هر عنصر را به صورت جداگانه کنترل کنیم. این به لطف پشتیبانی Penpot از z-index، یکی دیگر از ویژگی های مفید CSS است.

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

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

اما اگر برخی از عناصر به شبکه تعلق نداشته باشند چه؟ در کنار Flexbox، Penpot از موقعیت یابی مطلق پشتیبانی می کند. این بدان معنی است که هر عنصری را می توان از طرح بندی Flex برداشت تا همچنان در همان ظرف باقی بماند اما قوانین طرح بندی را نادیده بگیرد. این دقیقا همان چیزی است که ما برای دکمه “ویرایش” نیاز داریم.

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

مراحل بعدی

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

برای کاوش بیشتر و یادگیری بیشتر در مورد نحوه استفاده از طرح بندی Flex، فراموش نکنید الگوی Flex Layout را امتحان کنید.

در صورتی که گیر کردید یا سوالی دارید، انجمن پنپات بهترین مکان برای جستجوی کمک خواهد بود.

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

خلاصه

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

به زودی: پشتیبانی از CSS Grid

شاید شما هم اکنون مانند من فکر می کنید: چیدمان های CSS فقط Flexbox نیستند، اینطور نیست؟ اگر با CSS کار می کنید، احتمالاً می دانید که Flexbox به تنهایی کافی نیست. طرح‌بندی‌های پیچیده‌تر اغلب با استفاده از CSS Grid بهتر ساخته می‌شوند. Flexbox و Grid وقتی با هم ترکیب شوند بهترین عملکرد را دارند – برای ایجاد وب‌سایت‌های دقیق و در عین حال پیچیده و کاملاً پاسخگو.

Penpot هنوز از CSS Grid پشتیبانی نمی کند، اما در شرف تغییر است! شما می توانید در مورد آن در آینده بیشتر بدانید جشنواره پنپات. در طول این رویداد، تیم Penpot طرح خود و یک نسخه نمایشی از ویژگی طرح‌بندی Grid را به اشتراک می‌گذارد. اگر می‌خواهید درباره مراحل بعدی Penpot بیشتر بدانید، در پیوستن (مجازی یا حضوری) تردید نکنید.

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

ویرایش بصری به CMS بدون سر می رسد – مجله Smashing

چند سال پیش، دوستم ماریا از من خواست که یک وب سایت برای شرکت معماری او بسازم. برای پروژه‌هایی مانند این، من معمولاً از یک سیستم مدیریت محتوای بدون سر (CMS) استفاده می‌کردم و یک front end سفارشی می‌ساختم، اما این بار به او توصیه کردم از یک سازنده سایت مانند Squarespace یا Wix استفاده کند.

چرا سایت ساز؟ چون ماریا فردی بسیار بصری و خلاق است و می‌دانستم که می‌خواهد همه چیز درست به نظر برسد. او به حلقه بازخورد بصری یک سازنده سایت نیاز داشت و Squarespace و Wix دو مورد از اساسی‌ترین پیشنهادها در فضای ویرایش بصری هستند.

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

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

اما اول…

باز هم ویرایش بصری چیست؟

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

Dreamweaver در حدود 2005

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

دو ویژگی تعیین کننده ویرایش بصری وجود دارد:

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

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

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

ویرایش بصری در CMS بدون سر

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

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

رابط معمولی برای یک CMS بدون هد

یک رابط CMS معمولی بدون سر فقط فیلدهای فرم را برای ویرایش محتوا فراهم می کند. این فاقد زمینه محتوایی است که در صفحه به نظر می رسد. این UX می‌تواند برای افرادی که با تجربه‌های ویرایش هم‌زمان در ابزارهایی مانند Google Docs، Wix، Webflow یا Notion آشنا هستند، احساسی قدیمی داشته باشد.

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

بیایید تجربه ویرایش CMS را با و بدون ویرایش بصری در صفحه اصلی Roev.com مقایسه کنیم.

ویرایش محتوا با ویرایش بصری فعال است
ویرایش محتوا بدون ویرایش بصری؛ تجربه یک CMS معمولی بدون هد

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

CMS های بدون سر که از ویرایش بصری پشتیبانی می کنند

در حال حاضر بسیاری از پیشنهادات CMS بدون headless از ویرایش بصری پشتیبانی می کنند. بیایید به چند گزینه محبوب تر نگاه کنیم.

تینا

TinaCMS از ابتدا برای ویرایش بصری ساخته شده است، اما یک حالت “ویرایش پایه” را نیز ارائه می دهد که شبیه به CMS های سنتی است. تینا یک رابط مدیریت منبع باز و API محتوای هدلس دارد که با فایل های موجود در مخزن Git شما (مانند Markdown و JSON) همگام می شود.

ویرایش بصری با TinaCMS

Storyblok

Storyblok یک CMS بدون هد است که پیشگام اولیه در ویرایش بصری بود. Storyblok محتوای شما را در پایگاه داده خود ذخیره می کند و آن را از طریق API های REST و GraphQL در دسترس قرار می دهد.

ویرایش بصری با Storyblok

Sanity.io (از طریق آنها پلاگین iframe)

سلامت عقل یک CMS سنتی بدون هد با یک رابط مدیریت منبع باز است. با استفاده از آن از ویرایش بصری پشتیبانی می کند پلاگین Iframe Pane. Sanity محتوای شما را در پایگاه داده خود ذخیره می کند و آن را از طریق API در دسترس قرار می دهد.

سلامت عقل

Builder.io

Builder.io یک CMS منبع بسته و بدون هد با ویرایش بصری است که محتوا را در پایگاه داده Builder.io ذخیره می کند و آن را از طریق API در دسترس قرار می دهد.

ویرایش بصری با بیلدر

Stackbit

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

ویرایش بصری با Stackbit

Vercel

اگرچه این یک CMS نیست، اما پیش‌نمایش‌های استقرار Vercel می‌توانند نشان دهند دکمه ویرایش در نوار ابزار این دکمه ویرایش یک رابط کاربری را پوشش می دهد که به سازندگان محتوا کمک می کند تا به سرعت به مکان صحیح در CMS حرکت کنند.

ویرایش بصری با Vercel

نتیجه

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

گزینه های بسیار خوبی برای ایجاد تجربه های ویرایش بصری بدون به خطر انداختن کنترل توسعه دهنده و توسعه پذیری وجود دارد. وعده Dreamweaver بالاخره رسید!

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

SmashingConf در سانفرانسیزو چگونه بود؟ – مجله Smashing

“خاطرات شیرینی را برای آنها رقم بزنید.”

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

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

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

داوطلبان Smashing امسال در SmashingConf در سانفرانسیسکو
داوطلبان Smashing امسال در SmashingConf در سانفرانسیسکو. (از چپ به راست، از بالا به پایین: آلانا ریسه، یی زونگ کوانگ، گرگ شوئنبرگ، دانا نگ و رن چن.) عکس آری استایلز.

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

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

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

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

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

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

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

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

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

“من نمی دانستم [frequently-used tech] می تواند همه این کارها را انجام دهد!»

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

من نمی‌توانم منتظر بمانم تا از این در محل کار استفاده کنم – این اتفاق خواهد افتاد [task I don’t understand yet] خیلی سریعتر!»

«باورم نمی‌شود که در چند ساعت چقدر دارم یاد می‌گیرم!»

سرگرم کننده و هیجان انگیز بود.

کری فیشر در کارگاه آموزشی دسترسی
کری فیشر در کارگاه آموزشی دسترسی عکس از مارک تیله.

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

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

باشگاه دویدن صبح سه شنبه
باشگاه دویدن صبح سه شنبه. عکس از یی زونگ کوانگ.

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

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

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

می دانید، من در واقع یک درونگرا هستم. من معمولا از رویدادهای اجتماعی می ترسم – اما اینجا خیلی راحت احساس می کنم!»

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

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

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

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

  • SmashingConf فرایبورگ 🇩🇪 (حضوری + آنلاین، 4-6 سپتامبر) با ماجراجویی در سیستم های طراحی، دسترسی، CSS، JS و عملکرد وب.
  • SmashingConf Antwerp 🇧🇪 (9-11 اکتبر)، در مورد سیستم های طراحی، قابلیت استفاده، طراحی محصول و چالش های پیچیده رابط کاربری.
سرمقاله Smashing
(jn، cr، il)
Read More

ویرایشگر تصویری React که تجربه توسعه دهندگان را بهبود می بخشد – مجله Smashing

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

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

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

کدوکس بیشتر «کد شما» است تا «کد پایین»

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

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

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

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

ایجاد یک پروژه جدید با Codux
مجموعه‌ای در حال رشد از چارچوب‌ها و شروع‌کننده‌ها درست خارج از جعبه وجود دارد. (پیش نمایش بزرگ)

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

در واقع، در اینجا یک کار بسیار سرگرم کننده وجود دارد. یک فایل کامپوننت از پروژه خود را در VS Code باز کنید و پنجره ویرایشگر را در کنار پنجره Codux که روی همان کامپوننت باز است قرار دهید. یک تغییر کوچک در CSS یا چیز دیگری ایجاد کنید و هر دو رندر پیش نمایش را تماشا کنید و کد به‌روزرسانی فوری در Codux.

این است که محکم ادغام شده است.

این راهنمای بصری شما برای React است

این واقعاً نکته اصلی Codux است. واقعا است یک رویکرد بصری برای کار با React، حداقل از جنبه توسعه. اگر من یک فایل کامپوننت را باز کنم، Codux تمام زمینه ای را که برای ویرایش کد نیاز دارم به من می دهد زیرا نشان می دهد من کجا و چگونه قطعات در سراسر برنامه استفاده می شود. هک، در انجام کارهای DevTools-y به اندازه خود DevTools خوب است (اگر نه بهتر!)!

بردهای بصری، درختان مؤلفه، ادغام Git، اشکال‌زدایی… کدوکس همه آنها را دارد و بیشتر آن‌ها را دارد و آن را حتی بیشتر به یک فروشگاه یک‌جا برای همه چیزهای مرتبط با یک پروژه تبدیل می‌کند. من قبلاً Codux را با CodePen مقایسه کردم، اما در واقع بیشتر شبیه داشتن CodePen، Figma، GitHub، VS Code، و حتی یک برنامه نمونه سازی در یک مکان است بدون اینکه نیازی به ترک کد شما باشد.

کد را به صورت بصری کاوش کنید

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

به این ترتیب، من اغلب نمی‌دانم کدی که می‌نویسم چگونه یا اینکه قرار است روی چیز دیگری در برنامه تأثیر بگذارد یا خیر. آیا تغییر این قطعه در یک جزء بر همان قطعه در جزء دیگر تأثیر می گذارد؟ آیا با به‌روزرسانی وضعیت یا رفتار مؤلفه در اینجا، به طور ناخواسته حالت دیگری را فعال می‌کنم که نباید تحت تأثیر قرار گیرد؟

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

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

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

کد، بازرسی و اشکال زدایی با هم در نهایت

هنگام انتخاب یک عنصر در مرحله تعاملی در Codux، چند امکان دیگر وجود دارد:

  • آ پانل سبک برای ویرایش CSS و آزمایش طرح‌بندی‌های مختلف. و دوباره، تغییرات در زمان واقعی، هم در پیش‌نمایش رندر شده و هم در داخل انجام می‌شوند شما کد، که همیشه برای شما قابل مشاهده است – چه مستقیماً در Codux یا در IDE شما.
  • آ پنل اموال که دسترسی آسان به تمام ویژگی های انتخاب شده یک مؤلفه را با کنترلرهای بصری برای اصلاح آنها (و مشاهده تغییرات منعکس شده مستقیم در کد) فراهم می کند.
  • یک پنل محیطی کنترلی بر محیط رندر کامپوننت، مانند اندازه صفحه نمایش یا بوم، و همچنین استایل آن برای شما فراهم می کند.
درخت عناصر کدوکس
پانل سمت چپ را می بینید؟ این درخت عناصر Codux است که DOM واقعی و منطق مسئول رندر کردن مولفه‌ها را نشان می‌دهد و به شما اجازه می‌دهد تا ساختار را تأیید کنید، خواه این مؤلفه ثابت باشد یا پویا. (پیش نمایش بزرگ)

شاید به Codux A Spin بدهید

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

نه دروغ. این دقیقاً همان چیزی است که وقتی تیم Wix در مورد آن به من گفت. حتی فکر نمی کردم این ایده خوبی باشد که همه آن را در یک مکان بسته بندی کنم.

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

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

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

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

زمان استفاده از آنها (قسمت 2) – مجله Smashing

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

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

  • آیا این یک شی است؟
  • آیا آن ملک مورد نظر شما را دارد؟
  • وقتی یک ملک نگه می دارد undefinedآیا ارزش آن همین است یا خود ملک مفقود شده است؟

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

با ساخت اشیا اولیه، بسیاری از نقاط شکست بالقوه به یک مکان منتقل می شوند – جایی که اشیا در آن مقداردهی اولیه می شوند. اگر می توانید مطمئن شوید که اشیاء شما با مجموعه خاصی از ویژگی ها مقداردهی اولیه شده اند و آن ویژگی ها دارای مقادیر خاصی هستند، لازم نیست مواردی مانند وجود ویژگی ها را در هر جای دیگری از برنامه خود بررسی کنید. شما می توانید آن را تضمین کنید undefined در صورت نیاز یک ارزش است.

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

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

ساخت اجسام اولیه به صورت عمده

ساده ترین، بیشتر اولیه راه (جناسی مورد نظر) برای ایجاد یک شی بدوی به شرح زیر است:

const my_object = Object.freeze({});

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

import React, { useState } from "react";

const summary_tab = Object.freeze({});
const details_tab = Object.freeze({});

function TabbedContainer({ summary_children, details_children }) {
    const [ active, setActive ] = useState(summary_tab);
  
    return (
        <div className="tabbed-container">
            <div className="tabs">
                <label
                    className={active === summary_tab ? "active" : ""}
                    onClick={() => {
                        setActive(summary_tab);
                    }}
                >
                    Summary
                </label>
                <label
                    className={active === details_tab ? "active": ""}
                    onClick={() => {
                        setActive(details_tab);
                    }}
                >
                    Details
                </label>
            </div>
            <div className="tabbed-content">
                {active === summary_tab && summary_children}
                {active === details_tab && details_children}
            </div>
        </div>
    );
}

export default TabbedContainer;

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

const tab_kinds = Object.freeze([
    Object.freeze({ label: "Summary" }),
    Object.freeze({ label: "Details" })
]);

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

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

function populate(...names) {
    return function(...elements) {
        return Object.freeze(
            elements.map(function (values) {
                return Object.freeze(names.reduce(
                    function (result, name, index) {
                        result[name] = values[index];
                        return result;
                    },
                    Object.create(null)
                ));
            })
        );
    };
}

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

function populate(...names) {
    return function(...elements) {
        const objects = [];

        elements.forEach(function (values) {
            const object = Object.create(null);

            names.forEach(function (name, index) {
                object[name] = values[index];
            });

            objects.push(Object.freeze(object));
        });

        return Object.freeze(objects);
    };
}

با این نوع تابع در دست، می‌توانیم همان آرایه از اشیاء زبانه‌دار را ایجاد کنیم:

const tab_kinds = populate(
    "label"
)(
    [ "Summary" ],
    [ "Details" ]
);

هر آرایه در فراخوانی دوم مقادیر اشیاء به دست آمده را نشان می دهد. حالا فرض کنید می خواهیم خواص بیشتری اضافه کنیم. ما باید یک نام جدید به فراخوانی اول و یک مقدار برای هر آرایه در تماس دوم اضافه کنیم.

const tab_kinds = populate(
    "label",
    "color",
    "icon"
)(                                          
    [ "Summary", colors.midnight_pink, "💡" ],
    [ "Details", colors.navi_white, "🔬" ]
);

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

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

بیایید به مثال برگردیم و ببینیم که با آن چه به دست آوردیم populate تابع:

import React, { useState } from "react";
import populate_label from "./populate_label";

const tabs = populate_label(
    [ "Summary" ],
    [ "Details" ]
);

const [ summary_tab, details_tab ] = tabs;

function TabbedContainer({ summary_children, details_children }) {
    const [ active, setActive ] = useState(summary_tab);
      
    return (
        <div className="tabbed-container">
            <div className="tabs">
                {tabs.map((tab) => (
                    <label
                        key={tab.label}
                        className={tab === active ? "active" : ""}
                        onClick={() => {
                            setActive(tab);
                        }}
                    >
                        {tab.label}
                    </label>
                )}
            </div>
            <div className="tabbed-content">
                {summary_tab === active && summary_children}
                {details_tab === active && details_children}
            </div>
        </div>
    );
}

export default TabbedContainer;

استفاده از اشیاء اولیه نوشتن منطق UI را ساده می کند.

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

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

آن رادیو را بررسی کنید

یکی از گزینه های جایگزین برای رویکرد بالا که من با آن مواجه شدم، حفظ آن است active حالت – آیا برگه انتخاب شده است یا نه – به عنوان یک ویژگی از ذخیره می شود tabs هدف – شی:

const tabs = [
    {
        label: "Summary",
        selected: true
    },
    {
        label: "Details",
        selected: false
    },
];

به این ترتیب جایگزین می کنیم tab === active با tab.selected. این ممکن است به نظر یک پیشرفت باشد، اما نگاه کنید که چگونه باید برگه انتخاب شده را تغییر دهیم:

function select_tab(tab, tabs) {
    tabs.forEach((tab) => tab.selected = false);
    tab.selected = true;
}

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

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

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

let selected = []; // Nothing is selected.

// Select.
selected = selected.concat([ to_be_selected ]);

// Unselect.
selected = selected.filter((element) => element !== to_be_unselected);

// Check if an element is selected.
selected.includes(element);

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

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

جایگزینی برای رشته ها

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

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

مشکل رشته ها این است که آنها برای انسان هستند. طبیعی است که ما چیزها را با نامگذاری از یکدیگر متمایز کنیم. اما یک برنامه معنای آن نام ها را نمی فهمد.

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

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

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

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

یکی دیگر از استفاده‌های رشته‌ها که من سعی می‌کنم از آن اجتناب کنم، بررسی این است که آیا به شی مورد نظر خود می‌رسیم یا خیر. معمولاً این کار با ذخیره یک رشته در یک ویژگی به نام انجام می شود id. مثلاً فرض کنید یک متغیر داریم. برای بررسی اینکه آیا شیء مورد نظر ما را در خود نگه می دارد یا خیر، ممکن است نیاز داشته باشیم که آیا رشته ای در آن وجود دارد یا خیر id دارایی با چیزی که انتظار داریم مطابقت دارد. برای انجام این کار، ابتدا بررسی می کنیم که آیا متغیر دارای یک شی است یا خیر. اگر متغیر یک شی را نگه می دارد، اما شی فاقد آن است id اموال، سپس ما می گیریم undefined، و ما خوب هستیم. با این حال، اگر یکی از مقادیر پایین آن متغیر را داشته باشیم، نمی‌توانیم مستقیماً ویژگی را بخواهیم. در عوض، باید کاری انجام دهیم که یا مطمئن شویم که فقط اشیا به این نقطه می رسند یا هر دو بررسی را در جای خود انجام دهیم.

const myID = "Oh, it's so unique";

function magnification(value) {
    if (value && typeof value === "object" && value.id === myID) {
        // do magic
    }
}

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

import data from "./the file where data is stored";

function magnification(value) {
    if (value === data.myObject) {
        // do magic
    }
}

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

پیدا می کنم سود کمی در اتکا به رشته ها برای هر چیزی غیر از خروجی برای کاربر وجود دارد. عدم قابلیت همکاری رشته‌ها در اشیاء اولیه را می‌توان به تدریج و بدون نیاز به تغییر نحوه مدیریت عملیات‌های اساسی، مانند مقایسه، حل کرد.

بسته بندی

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

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

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

Read More

با موفقیت در مقیاس ملاقات کنید، کتاب فوق‌العاده جدیدی نوشته آدی عثمانی — مجله Smashing

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

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

جلد گالینگور با کیفیت بالا. سرپرستی آدی عثمانی. روی جلد توسط اسپن برونبورگ. چاپ و ارسال کتاب الکترونیکی در پاییز 2023. کتاب را پیش خرید کنید.

موفقیت در مقیاس

فهرست

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

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

این کتاب برای چه کسی است

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

موفقیت در مقیاس

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

آدی عثمانیآدی عثمانی یک رهبر مهندسی است که روی Google Chrome کار می کند. او سازمان تجربه توسعه‌دهنده Chrome را رهبری می‌کند و به کاهش اصطکاک برای توسعه‌دهندگان برای ایجاد تجربه‌های کاربری عالی کمک می‌کند.

جزییات فنی

  • شابک: 978-3-910835-00-9 (چاپ)
  • جلد گالینگور با کیفیت، صحافی دوخته شده، نشانگر صفحه روبانی.
  • پست هوایی رایگان در سراسر جهان حمل و نقل از آلمان از پاییز 2023 شروع می شود.
  • کتاب الکترونیکی موجود برای دانلود در پاییز 2023 به صورت PDF، ePUB و Amazon Kindle.
  • کتاب را پیش خرید کنید.

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

کتاب‌ها و چیزهای شگفت‌انگیز بیشتر

ترویج بهترین شیوه ها و ارائه نکات عملی به شما برای تسلط بر چالش های کدنویسی و طراحی روزانه همیشه بوده (و خواهد بود) هسته اصلی هر کاری که انجام می دهیم در Smashing.

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

Read More

چگونه گردش کار طراحی خود را با Setapp تقویت کنیم – مجله Smashing

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

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

من در حال حاضر شغل آزاد دارم. با این حال، رئیس خودم بودن با چالش‌هایی همراه است: کار با مشتریان، فروش و مذاکره، صورت‌حساب، ساختن یک برند شخصی، ایجاد استراتژی محتوا، ردیابی زمان، مدیریت پروژه… این فهرست ادامه دارد.

تلاش برای همگام شدن با همه چیز قبلاً سخت بود. مهم نیست که چقدر تلاش کردم، لیست کارهای من همیشه بی پایان به نظر می رسید. مدام احساس غرق شدن می کردم.

با خودم فکر کردم، “باید راه بهتری وجود داشته باشد.”

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

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

برنامه های ذکر شده در این راهنما در دسترس هستند Setapp. چه کاربر مک هستید یا نه، این هک ها به شما کمک می کند کارهای بیشتری را در زمان کمتری انجام دهید و کیفیت زندگی خود را بهبود ببخشید. امیدوارم در این راهنما ارزشی پیدا کنید.

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

شما می توانید استفاده کنید Setapp برای دسترسی به بیش از 240 برنامه در مک و آیفون تحت یک اشتراک ماهانه.

من شخصا از Setapp برای انجام این کار استفاده می کنم سه چیز:

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

پیگیری زمان و از بین بردن حواس پرتی

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

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

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

با Timemator، می توانید قوانین ردیابی خودکار زمان را برای برنامه ها، فایل ها یا وب سایت های خاص تنظیم کنید. به عنوان مثال، می توانید قوانینی را تنظیم کنید تا زمانی که روی یک پروژه خاص در Figma یا Adobe Photoshop کار می کنید، تایمر شروع به ردیابی کند.

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

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

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

Timemator گزارش می دهد
اعتبار تصویر: زمان سنج. (پیش نمایش بزرگ)

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

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

من از Font Book (مدیر فونت پیش فرض در MacOS) ناامید شدم. کاربر پسند نبود. جستجو و مقایسه فونت ها کار سختی بود.

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

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

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

ویژگی Typeface برای حذف فونت های تکراری
(پیش نمایش بزرگ)

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

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

سریع ترین راه برای ایجاد مدل های دستگاه

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

من ساعت‌ها به جستجوی قالب‌های موکاپ دستگاه پرداختم و Adobe Photoshop را راه‌اندازی کردم تا از آن الگوها استفاده کنم. کل فرآیند زمان بر بود، بنابراین من به ابزاری به نام تغییر کردم Mockuuups Studio.

نمونه هایی از مدل های مختلف تولید شده توسط Mockuuups Studio
(پیش نمایش بزرگ)

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

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

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

برای افزایش سرعت گردش کار خود، می توانید از پلاگین Figma، Sketch یا Adobe XD آنها استفاده کنید. این افزونه Figma آنهاست:

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

ایجاد اسکرین شات و ضبط صفحه، سریع

هنگام ارائه طرح ها (مخصوصاً هنگام کار از راه دور)، من هر روز برای مشتریانم اسکرین شات و ضبط صفحه می گیرم.

اما به جای استفاده از ابزار پیش فرض اسکرین شات مک، CleanShot X راه حل بهتری است این یک ابزار ضروری برای هر کاربر مک است.

برای گرفتن سریع اسکرین شات، از این کلید میانبر در مک خود استفاده کنید: فرمان + تغییر مکان + 4.

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

نمونه ای از نحوه حاشیه نویسی اسکرین شات هایم:

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

من سال ها از این ابزار با شکایت صفر استفاده کردم. این ابزار هنگام به اشتراک گذاری اسکرین شات ها با مشتریان یا در رسانه های اجتماعی زندگی شما را آسان تر می کند.

یک ویژگی جالب که شما نیز دوست خواهید داشت: می‌توانید هر متنی را ضبط و کپی کنید، بنابراین دیگر نیازی به تایپ مجدد دستی آن نخواهید داشت!

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

پیگیری جلسات مختلف، جزئیات آن‌ها و شرکت‌کنندگان، به‌ویژه هنگام جابه‌جایی بین Google Meet، Zoom، صندوق ورودی ایمیل و تقویم‌ها، چالش برانگیز است.

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

رابط Meeter با google meets برنامه ریزی شده
(پیش نمایش بزرگ)

از Google Meet، Zoom و Microsoft Teams پشتیبانی می کند. وقتی می خواهید به یک جلسه بپیوندید، دیگر لازم نیست وقت خود را برای جستجوی پیوندهای جلسه تلف کنید، سپس پیوند را در مرورگر کپی و جایگذاری کنید. در عوض، اکنون می توانید روی حضور در هر جلسه تمرکز کنید.

این ابزار به شما امکان می دهد مستقیماً با مخاطبین و شماره تلفن های FaceTime خود تماس بگیرید و از نوار منو نیز به تماس های تکراری بپرید. خیلی ساده!

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

صرفه جویی در زمان با Spotlight در مک

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

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

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

سپس، این موارد را در Spotlight امتحان کنید:

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

باحال، درسته؟ یادگیری نحوه استفاده موثر از Spotlight یک بازی را تغییر می دهد. آن را امتحان کنید و ببینید چقدر می توانید در زمان خود صرفه جویی کنید.

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

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

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

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

با Sip، می‌توانید به سرعت رنگ‌ها را مستقیماً از نوار منوی Mac گرفته و آنها را در هر ابزار طراحی یا توسعه، از جمله Adobe Photoshop، Figma، و Sketch قرار دهید. این کار ایجاد پالت های رنگی سفارشی را که با برند مشتری مطابقت دارد آسان می کند.

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

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

در حال حاضر، از 24 فرمت رنگی محبوب در صنعت مانند Android XML، CSS hex، RGB و CMYK پشتیبانی می کند.

اکنون، ویژگی مورد علاقه من Sip’s Contrast Checker است. در مثال زیر، می‌توانید از انتخابگر رنگ برای بررسی کنتراست بین متن خاکستری و پس‌زمینه سفید استفاده کنید و اطمینان حاصل کنید که استانداردهای دسترسی را رعایت کرده و برای همه کاربران خوانا است.

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

نکته: همیشه مطمئن شوید که کنتراست بین متن و پس‌زمینه بیشتر یا مساوی باشد 4.5:1 برای متن کوچک و 3:1 برای متن بزرگ. اگر تضاد رنگ با شکست مواجه شد، برای بهبود آن، روی دکمه “FIX” کلیک کنید!

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

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

Bartender به شما امکان می دهد آیکون های نوار منو خود را در گروه های منظم و مرتب سازماندهی کنید یا آنها را کاملاً پنهان کنید – به همین سادگی. می‌توانید آیکون‌های نوار منوی خود را در یک منوی کشویی قابل تنظیم جمع کنید تا بدون درهم‌کاری باقی بماند.

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

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

بعد از یک ماه استفاده از آن، می توانم بهتر تمرکز کنم. این یکی از آن بهبودهای ظریف کیفیت زندگی است که می تواند تأثیر زیادی بر بهره وری و طرز فکر شما داشته باشد.

بسته بندی

کاش زودتر این ابزارها را کشف کرده بودم!

برنامه هایی که در بالا به اشتراک گذاشته ام در دسترس هستند Setapp. با یک اشتراک ماهانه، به بیش از 240 برنامه مک و آیفون دسترسی خواهید داشت. آنها ارائه می دهند آزمایشی رایگان 7 روزه، بنابراین می توانید آن را امتحان کنید و تصمیم بگیرید که برای شما مناسب است یا خیر.

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

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

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

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

دستورالعمل های UX – مجله Smashing

ما اغلب به آن تکیه می کنیم سربرگ های چسبناک برای جلب توجه کاربر به ویژگی های مهم یا فراخوان برای اقدام. به ناوبری نوار کناری، CTAها، سرصفحه‌ها و پاورقی‌های چسبنده، ردیف‌ها یا ستون‌های «ثابت» در جداول و دکمه‌های شناور فکر کنید. ما قبلاً الگوهای ناوبری تلفن همراه را بررسی کرده ایم الگوهای طراحی رابط هوشمند، اما منوهای چسبنده شایسته نگاه دقیق تر هستند.

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

دو نمونه از منوهای چسبنده با Sverigesradio در سمت چپ و TV Gids در سمت راست
چند منوی چسبنده در حال استفاده: روشن Sverigesradio و تی وی گیدز، با چندین منوی چسبناک زنجیره ای. (پیش نمایش بزرگ)

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

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

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

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

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

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

ناوبری نوار چسبنده یک سرویس پستی
خدمات پستی از ایسلند با چهار مورد در ناوبری نوار چسبنده (اکنون تغییر کرده است). (منبع: پوستورین) (پیش نمایش بزرگ)

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

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

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

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

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

مثالی از کنتراست ضعیف بین پیمایش زیر منوی چسبنده و ناحیه محتوا
کنتراست ضعیف بین پیمایش زیر منوی چسبنده و ناحیه محتوا می تواند باعث مشکلات دسترسی شود. کشف شده از طریق NN/گروه. (پیش نمایش بزرگ)

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

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

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

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

نمونه ای از منوی آکاردئون در مجله Smashing
نمایش و پنهان کردن جزئیات سبد خرید در صورت نیاز. در مجله Smashing. (پیش نمایش بزرگ)

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

از آنجا که منوهای چسبنده اغلب فضای زیادی را اشغال می کنند، می توانیم در صورت نیاز آنها را آشکار کنید و زمانی که کاربر روی محتوا متمرکز است آنها را پنهان کنید. این ایده پشت سرصفحه‌های نیمه پایدار است: وقتی کاربر شروع به اسکرول کردن به پایین می‌کند، منو ناپدید می‌شود، اما پس از آن هر حرکتی به بالا باعث می‌شود منو دوباره ظاهر شود.

منوی نیمه ماندگار
منوی نیمه ماندگار روشن است CB2، زمانی که به آن نیاز دارید ظاهر می شود و زمانی که به آن نیاز ندارید ناپدید می شود. (پیش نمایش بزرگ)

مشکل این الگو این است که گاهی اوقات کاربران فقط می‌خواهند به بخش قبلی صفحه برگردند یا برخی جزئیات را در پاراگراف قبلی دوبار بررسی کنند و منو اغلب مانع می‌شود. Page Laubheimer از NN/Group استفاده از a انیمیشن اسلاید در که تقریباً 300-400 میلی‌ثانیه طول دارد و حس طبیعی را بدون ایجاد حواس پرتی حفظ می کند.

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

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

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

بسته بندی

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

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

ما باید آنچه را که مهم است اولویت بندی کنیم و آنچه را که مهم نیست حذف کنیم. و اغلب، تمرکز باید کاملاً بر روی محتوا باشد و نه ناوبری.

شما می توانید جزئیات بیشتری را در ناوبری UX در کتابخانه ویدیویی در مورد الگوهای طراحی رابط هوشمند 🍣 – با یک آموزش زنده UX که در سپتامبر امسال در راه است.

منابع بیشتر

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

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

ایمن ترین راه برای مخفی کردن کلیدهای API هنگام استفاده از React – Smashing Magazine

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

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

کلیدهای API چیست؟

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

چرا کلیدهای API باید محافظت شوند؟

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

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

بهترین روش برای پنهان کردن کلیدهای API در یک برنامه React

اکنون که متوجه شدید چرا کلیدهای API باید محافظت شوند، بیایید نگاهی به روش‌های پنهان کردن کلیدهای API و نحوه ادغام آنها در برنامه React بیاندازیم.

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

متغیرهای محیطی

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

یکی از محبوب ترین ها env بسته هایی که می توانید در برنامه React خود برای مخفی کردن داده های حساس استفاده کنید dotenv بسته بندی برای شروع:

  1. به دایرکتوری برنامه react خود بروید و دستور زیر را اجرا کنید.
    npm install dotenv --save
    
  2. خارج از src پوشه در پوشه ریشه پروژه خود، یک فایل جدید به نام ایجاد کنید .env.

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

  3. در شما .env فایل، کلید API و مقدار مربوط به آن را در قالب زیر اضافه کنید:
    // for CRA applications
    REACT_APP_API_KEY = A1234567890B0987654321C ------ correct
    
    // for Vite applications
    VITE_SOME_KEY = 12345GATGAT34562CDRSCEEG3T  ------ correct
    
  4. ذخیره کنید .env را فایل کنید و از اشتراک گذاری آن به صورت عمومی یا سپردن آن به کنترل نسخه خودداری کنید.
  5. اکنون می توانید از env برای دسترسی به متغیرهای محیطی در برنامه React خود شی کنید.
    // for CRA applications
    'X-RapidAPI-Key':process.env.REACT_APP_API_KEY
    // for Vite  applications
    'X-RapidAPI-Key':import.meta.env.VITE_SOME_KEY
    
  6. برنامه خود را مجدداً راه اندازی کنید تا تغییرات اعمال شوند.

با این حال، اجرای پروژه خود بر روی رایانه محلی خود تنها آغاز کار است. در برخی مواقع، ممکن است لازم باشد کد خود را در GitHub آپلود کنید، که به طور بالقوه می تواند شما را در معرض دید قرار دهد .env فایل. پس آن وقت چه باید کرد؟ می توانید استفاده از .gitignore فایل برای مخفی کردن آن

را .gitignore فایل

را .gitignore file یک فایل متنی است که به Git دستور می‌دهد تا فایل‌هایی را که هنوز به مخزن اضافه نشده‌اند، هنگام فشار دادن به مخزن نادیده بگیرد. برای انجام این کار، را اضافه کنید .env به .gitignore قبل از اینکه به مرحله بندی commit های خود بروید و کد خود را به GitHub فشار دهید، فایل را ثبت کنید.

// .gitignore
# dependencies
/node_modules
/.pnp
.pnp.js

# api keys
.env

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

سرور پروکسی پشتیبان

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

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

  1. بسته های لازم را نصب کنید
    برای شروع باید چند بسته مانند بیان، CORS، Axios، و Nodemon. برای انجام این کار، به دایرکتوری حاوی پروژه React خود بروید و دستور زیر را اجرا کنید:
    npm install express cors axios nodemon
    
  2. یک فایل سرور back-end ایجاد کنید.
    در دایرکتوری ریشه پروژه شما، خارج از شما src پوشه، یک فایل جاوا اسکریپت ایجاد کنید که شامل تمام درخواست های شما به API باشد.

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

  3. وابستگی ها را راه اندازی کنید و یک نقطه پایانی تنظیم کنید.
    در فایل سرور باطن خود، وابستگی های نصب شده را مقداردهی اولیه کنید و یک نقطه پایانی را تنظیم کنید که a را ایجاد کند GET به API شخص ثالث درخواست کنید و داده های پاسخ را در پورت شنیده شده برگردانید. در اینجا یک قطعه کد نمونه است:
    // defining the server port
    const port = 5000
    
    // initializing installed dependencies
    const express = require('express')
    require('dotenv').config()
    const axios = require('axios')
    const app = express()
    const cors = require('cors')
    app.use(cors())
    
    // listening for port 5000
    app.listen(5000, ()=> console.log(`Server is running on ${port}` ))
    
    // API request
    app.get('/', (req,res)=>{    
        const options = {
            method: 'GET',
            url: 'https://wft-geo-db.p.rapidapi.com/v1/geo/adminDivisions',
            headers: {
                'X-RapidAPI-Key':process.env.REACT_APP_API_KEY,
                'X-RapidAPI-Host': 'wft-geo-db.p.rapidapi.com'
            }
       };
       
        axios.request(options).then(function (response) {
            res.json(response.data);
        }).catch(function (error) {
            console.error(error);
        });
    }
    
  4. یک تگ اسکریپت در خود اضافه کنید package.json فایلی که سرور پروکسی بک‌اند را اجرا می‌کند.

    اسکرین شات با تگ اسکریپت در فایل package.json
    (پیش نمایش بزرگ)

  5. سرور بک‌اند را با اجرای دستور زیر شروع کنید و سپس در این مورد، به آن بروید localhost:5000.
    npm run start:backend
    
  6. یک درخواست به سرور باطن (http://localhost:5000/) از قسمت جلو به جای مستقیم به نقطه پایانی API. در اینجا یک تصویر است:
    import axios from "axios";
    import {useState, useEffect} from "react"
    
    function App() {
    
      const [data, setData] = useState(null)
    
      useEffect(()=>{
        const options = {
          method: 'GET',
          url: "http://localhost:5000",
        }
        axios.request(options)
        .then(function (response) {
            setData(response.data.data)
        })
        .catch(function (error) {
            console.error(error);
        })  
      }, [])
    
      console.log(data)
    
      return (
        <main className="App">
        <h1>How to Create a Backend Proxy Server for Your API Keys</h1>
         {data && data.map((result)=>(
          <section key ={result.id}>
            <h4>Name:{result.name}</h4>
            <p>Population:{result.population}</p>
            <p>Region:{result.region}</p>
            <p>Latitude:{result.latitude}</p>
            <p>Longitude:{result.longitude}</p>
          </section>
        ))}
        </main>
      )
    }
    export default App;
    

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

خدمات مدیریت کلید

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

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

  • مدیر اسرار AWS
    را مدیر اسرار AWS یک سرویس مدیریت مخفی است که توسط وب سرویس آمازون ارائه می شود. این به شما امکان می دهد اسرار اطلاعاتی مانند اعتبار پایگاه داده، کلیدهای API و سایر اطلاعات حساس را به صورت برنامه نویسی از طریق تماس های API به سرویس مدیر مخفی AWS ذخیره و بازیابی کنید. منابع زیادی وجود دارد که می تواند شما را در کمترین زمان شروع کند.
  • Google Cloud Secret Manager
    را Google Cloud Secret Manager یک سرویس مدیریت کلید است که توسط Google Cloud Platform ارائه و به طور کامل مدیریت می شود. قادر به ذخیره، مدیریت و دسترسی به داده های حساس مانند کلیدهای API، گذرواژه ها و گواهی ها است. بهترین بخش این است که به طور یکپارچه با ویژگی‌های Google back-end-as-a-service ادغام می‌شود و آن را به انتخابی عالی برای هر توسعه‌دهنده‌ای که به دنبال راه‌حلی آسان است تبدیل می‌کند.
  • خرک کلید لاجوردی
    را خرک کلید لاجوردی یک سرویس مبتنی بر ابر ارائه شده توسط Microsoft Azure است که به شما امکان می‌دهد انواع اسرار، از جمله رمزهای عبور، کلیدهای API، رشته‌های اتصال پایگاه داده و سایر داده‌های حساس را که نمی‌خواهید مستقیماً در کد برنامه خود آشکار کنید، به‌طور یکپارچه ذخیره و مدیریت کنید. .

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

نکاتی برای تضمین امنیت کلیدهای API شما

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

  1. پایگاه کد موجود خود را بررسی کنید و هر کلید API سخت کدگذاری شده ای را که باید پنهان شود شناسایی کنید.
  2. استفاده از متغیرهای محیطی با .gitignore برای ذخیره ایمن کلیدهای API خود. این به جلوگیری از قرار گرفتن تصادفی کلیدهای شما کمک می کند و مدیریت آسان تر در محیط های مختلف را امکان پذیر می کند.
  3. برای افزودن یک لایه امنیتی اضافی، استفاده از یک سرور پروکسی بک‌اند را برای محافظت از کلیدهای API خود در نظر بگیرید، و برای نیازهای امنیتی پیشرفته، یک ابزار مدیریت کلید این کار را انجام می‌دهد.

نتیجه

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

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

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