نوشته های Jafar Rezaei

آیکون‌باکس! پایانی بر دغدغه‌های استفاده از آیکون

Jafar Rezaei — Mon, 19 Apr 2021 17:11:38 +0430

سلام، من جعفر رضائی هستم(sayjeyhi). توی این بلاگ پست، به شکل مختصر میخوام در مورد iconها صحبت کنیم. مسئله‌ای که خیلی وقتا ما فرانت‌اند کارا، دیزاینرا یا حتی بک‌اند کارا باهاش درگیر هستیم و در آخر یه روش باحال و ساده برای مدیریت‌شون بهتون معرفی میکنم.https://www.freepik.com/premium-photo/flat-lay-human-hands-choosing-beautiful-skeins-purple-green-tones-with-blank-label-mock-up-wooden-table_8022757.htmاگه رابط کاربری تولید می‌کنید(حتی مهم نیست برا کدوم پلتفرم) حتما توی هر پروژه‌ای که باهاش کار می‌کنید یا کار می‌کردین به آیکون‌ها نیاز داشتین.این نیاز و درگیری مختص به زمان حال حاضر نمیشه و از قدیم بوده، از پیدا کردن آیکون مناسب تا استفاده کردنش توی پروژه همیشه یه داستانایی داشته. یه سری پروژه‌ها هم برای حل این مسائل به کمکمون اومدن ولی هر کدوم یه سری چالش‌هایی داشتن.بزارین اول با بررسی اینکه اصلا icon چیه شروع کنیم. در تعریفی که توی ویکی‌پدیا اومده، گفته شده که :In computing, an icon is a pictogram or ideogram displayed on a computer screen in order to help the user navigate a computer system.خب ترجمه غیر تحت لفظی‌ش میشه: یه تصویر یا ایدئوگرام که روی نمایشگر به مسیر حرکتی کاربر کمک می‌کنه.البته مفاهیمی مثل symbol, index و ... هم بعضا برای بیان همین مضمون(تقریبا) به کار می‌رفت ولی واژه مرسوم همون icon هست.انسان مدرن امروزی قطعا یه جوری خودشو با icon سازگار کرده بوده و نیازشو رفع می‌کرده. از اونجایی که جدیدا شهرنشینی آغاز شده بود. مردم از عکس برای قرار دادن icon و حتی خیلی کارهای دیگه استفاده می‌کردن. منظورم از عکس، اره، مثلا همون تگ img یا css background توی صفحات وب بود. البته واقعا کار سخت و اعصاب خوردکنی بود. توی پروژه‌های فعلی هم ممکنه نیاز باشه این کارها رو انجام بدیم. ولی خب اینجا سعی می‌کنیم موارد عمومی که توی اکثر پروژه‌ها نیازه رو بررسی کنیم.با یه بررسی کلی می‌بینیم که روش‌های مرسومی که بشر برای نمایش iconها استفاده کرده اینا بوده :استفاده از تصاویر تکی iconها : غیرکاربردی، به دلیل نیاز به درخواست جداگانه برای لود هر عکساستفاده از مجموعه sprite شده از ‌تصاویر‌ : دردسر برای جایگزینی و تولید sprite image و وکتور نبودناستفاده از فونت آیکون‌ها : محدودیت در انتخاب آیکون، دردسر برای تولید کردن فونت‌ آیکون و الزام به لود فایل فونت برای لود همه آیکون‌ها به شکل یکجااستفاده از فونت آیکون‌های کاستوم شده : همان موارد فوق منهای محدودیت در انتخاب آیکوناستفاده از آیکون‌های svg : مدیریت assetهای svg و بهینه کردن کدهای svg شاید استفاده از css برای ساخت آیکون : سخت بودن تولید آیکون و بیشتر برای لوگو و تک آیکون‌ها می ارزهحاااالا، بشر اومده یه سایت رایگانی زده که تقریبا هر پکیج مشهور آیکونی که توی بازار بوده رو جمع کرده و سعی کرده مشکلاتی که توی موارد بالا و با هر کدوم از روش‌های استفاده از آیکون بوده رو حل کنه و بعلاوه هم برای گرافیست و هم برای کدنویس پلاگین‌ها و پکیج‌های از پیش آماده ای رو درست کنه که امکان استفاده بی دغدغه و سریع از آیکون‌های مختلف از پکیج‌های مختلف رو فراهم کنه. این روش روی پروژه‌های مختلف ایرانی و خارجی تست شده و امروز هم نسخه دوم سایتش لانچ شده.نتیجه این تلاش بشر، تولید یه سایت به اسم آیکون‌باکس شده که به شکل رایگان و متن‌باز در دسترسه :)نسخه دسک تاپ و موبایلش هم با یه رابط کاربری جذاب برای استفاده روی کامپیوتر، گوشی، pwa و به شکل in-app در نرم افزارهایی مثل فیگما و ادوبی xd بهینه‌سازی شده و به زودی پشتیبانی این برنامه‌ها هم اضافه میشه.iconbox.spaceapp.iconbox.spaceبا بازنشر این نوشته و حمایت از ما، به بشر امروزی کمک کنید.

اون عددهای تو path svg چیکار میکنن؟ قدم به قدم

Jafar Rezaei — Mon, 14 Sep 2020 18:38:42 +0430

تا حالا فک کردین که اون عددها و حروفی که روی یه path از svg نوشته میشن چیکار میکنن؟ یا تا حالا یه svg ساختین که ببینید چطوری یه path تولید میشه؟ البته کاری با بقیه المان‌ها مثل rect ، line و ... نداریم و بحث‌مون بیشتر روی همین تگ path می‌چرخه، اگه دوست دارین سردربیارین ازش با من همراه باشین.یه تیکه کد svgکد بالا یه svg از پک feather icons هستش، این ایکون یه path داره که روش یه attribute به اسم d خورده که مخفف data هستش. البته اینا توضیح کلی هستن و چیزی که مهمه مقداری هست که روی این attribute قرار گرفته. این مقدار رو اینجا میزارم دقیق‌تر ببینیمش:M14.3320h-.21a22001-1.76-1.58L9.686l-2.766.4A11001613H3a110010-2h2.34l2.51-5.79a220013.79.38L14.3218l2.76-6.38A110011811h3a1100102h-2.34l-2.515.79A2200114.3320z چیزی ازش فهمیدین؟ :)) همین کد باعث رندر شدن وکتور پایین میشه، یعنی در کل هرچیزی که وکتور باشه و رستر نباشه معیار ترسیم شدنش محاسبات ریاضیه که حالا توی چند پاراگراف بعدی می‌بینید که چقدر ساده هستن این اعداد و میشه درکشون کرد. (برای تفاوت وکتور و raster یه سرچ کوچولو کنین).Feather - ActivityIcon خب هدف اینه که بتونیم متوجه بشیم مقدار define چی میگه بهمون. البته حالا نه در اون حد که خودمون بیاییم دستی همچین چیزی بنویسیم، ولی یه کم متوجه بشیم که شاید بعدا یه سری برنامه‌هایی نوشتیم که یه کار ساده‌ای رو با svg انجام بده برامون. (چون این مقدار رو میشه animate کرد یا حتی با تکنیک morphing که باز می‌تونید یه سرچ کوچولو کنید میشه کارهای جالبی انجام داد).بزارین یه کم راهنمایی کنم و کد بالا رو توی چند سطر از هم جدا کنم: https://gist.github.com/sayjeyhi/67b147a986846b8342f9570c1bab6327 خب اینطوری شاید بهتر بتونیم متوجه بشیم که چی به چیه. اولین نکته اینه که هر بخش با یه عدد شروع میشه و هر حرف یه معنی مشخص داره، بیایین از خط اول شروع کنیم و یه تعدادی رو با هم بررسی کنیم:خط اول که با M شروع میشه خلاصه شده moveTo هست، میگه یه قلم بردار و برو به { x: 14.33, y: 20 } چون میخوام از اونجا شروع کنم یه چیزی بکشم. همیشه هم بعدش دو تا مقدار قرار میگیره و توی همه ‌‌svgها هم اول باید نقطه شروع طراحی رو مشخص کنیم. تو svg فعلی‌مون می‌تونین حدس بزنین کجا میشه؟ اون انحنای پایین، توی عکس زیر هم نشونش میدم:۲. خط دوم دستور h رو داره که یه مقدار میگیره و برای جابجایی position استفاده میشه، میگه از محل فعلی -۰.۲۱ به چپ برو. (زیاد مهم نیست فعلا)۳. خط سوم (`a 2,2 0 0 1 -1.76,-1.58`) دستور a رو داره که مخفف arc هست و برای کشیدن یه قوس به کار میره، مقادیر این دستور خیلی زیادن ولی باعث کشیده شدن لبه کناری اون بخش پایین میشن، یعنی اینجا:خلاصه مقادیرش رو هم بخوام بگم، اولین مقادیر یعنی 2,2 مشخص کننده شعاع قوس هستن، مقادیر 0 0 1 میان میگن که خب اگه ما تو یه دایره ۴ تا قوس داریم و داریم به سمت مثبت درجه‌ها حرکت می‌کنیم، بیا یکی مونده به آخر که میشه همونی که نرسیده به ۱۸۰ درجه ساختی رو بردار و مقادیر -1.76,-1.58 این دوتا مقدار قوسی که کشیده شده رو جابجا میکنن به مرکزیتی که برسن توی اون مرکز طرح و بتونن اون گوشه رو بسازن، این گوشه رو میگم:۴. خط چهارم، `L 9.68,6` میشه گفت ساده‌ست، L مخفف Line هست که میگه یه خط به نقطه { x: 9.68, y: 6 } بکش و این خط رسم میشه:۵. مقدار خط پنجم(`l -2.76,6.4`) خیلی شبیه به خط چهارمه، ولی چرا اینجا `l` با حروف کوچیک نوشته شده؟ یه نکته‌ای رو اینجا میگم چون یه قانونه کلی هستش.وقتی یکی از عملگرها با حرف بزرگ نوشته شده باشه یعنی آدرسی که میدم دقیقا همین نقاط هستن، ولی وقتی با حروف کوچیک باشه یعنی به نسبت نقطه جاری اونقدر جابجا میخوام.پس اینجا میخواییم یه خطی بکشیم که از نقطه فعلی -2.76 چپ‌تر و 6.4 پایین‌تره. یعنی این خط تولید میشه:۶. خط ششم، `A 1,1 0 0 1 6,13` یه قوس داریم مثل خط سومه ولی با حرف کوچیک شروع شده پس مختصات قطعی هستن و با نقطه فعلی سنجیده نمیشن. شعاع نصف قوس خط سومه و بقیه مختصات شبیه به همونن.۷. خط هفتم، `H 3` چون یه خط به شکل افقی داریم و جابجایی عمودی نداریم بجای لاین می‌تونیم بگیم horizontally برو به نقطه ۳. توی نقطه مقابلش V و v رو هم داریم که عمودی یا verticaly کار می‌کنن. ولی این خط از کد باعث ترسیم این بخش میشه:۸. خط هشتم، `a 1,1 0 0 1 0,-2` یه قوس هست که قبلا توضیح دادیم. این بخش رو می‌کشه:۹. خط نهم، `h 2.34` مثل خط هفتم ولی به شکل وابسته به نقطه فعلی هستش و این خط رو می‌کشه:۱۰. خط دهم، `l 2.51,-5.79` یه خط ساده به بخش بالایی. ۱۱ تا ۱۹. این خط‌ها هم شبیه همون بالایی‌ها هستن و توضیحی لازم ندارن فک کنم، فقط وظیفه هر کدوم رو به تصویر نشون میدم:۱۱۱۲۱۳۱۴۱۵۱۶۱۷۱۸۱۹خب تا اینجا فک کنم با کلی عملگر برای ترسیم توی path آشنا شدین، فقط می‌مونه‌ آخرین خط که z هست و میگه که کارمون تموم شده و شکلی که کشیدیم کامل میشه، حالا میشه توی این شکل رو با fill پر کرد یا با stroke خط دورشو از لحاظ رنگ و قطر کنترل کرد.نتیجه گیریمن مثال تقریبا سختی رو برای توضیح انتخاب کردم ولی خوبیش اینه که یهو پریدیم توی داستان :))، اشکال خیییلی ساده‌تری رو هم میشه ترسیم کرد.مثل یه خط ساده:M2,2 L8,8مثل یه فلش:M2,8 L5,2 L8,8و یه سری چیزای دیگه. چند تا عملگرها رو هم نگفتیم مثل q , c , s , t که اینا هم از همون خانواده arc ها تقریبا حساب میشن ولی با یه سری تفاوت. اگه علاقه مند بودین مطالب خوبی توی نت هست. مثلا این pen خیلی خوب این موارد باقی‌مونده رو پوشش داده. منم یه سری منبع معرفی میکنم که برای نگارش همین متن هم ازشون استفاده کردم.https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#:~:text=The%20element%20is%20the,created%20as%20s.https://www.w3.org/TR/SVG/paths.htmlhttps://svg-path-visualizer.netlify.app/https://css-tricks.com/svg-path-syntax-illustrated-guide/یه نکته پایانی هم اینکه، چیزی که یاد می‌گیریم مال ما نیست، یاد بدیمش، مخلصیم.سایر نوشته‌هام https://vrgl.ir/EKt7v https://vrgl.ir/p7xp2 https://vrgl.ir/nsNIL

بدون هیچ نرم‌افزاری markdown رو به فرمت‌های مختلف تبدیل کنیم!

Jafar Rezaei — Thu, 10 Sep 2020 23:12:07 +0430

تقریبا یه هفته پیش بود که کارای آخر «کتاب سوال و جواب‌های ری‌اکت» رو داشتم انجام میدادم (اگه نمیدونین این کتاب چیه، می‌تونین به مطلب قبلی‌م مراجعه کنین) و دیگه می‌خواستم برای گرفتن یه خروجی قابل ارائه آماده‌ش کنم.موضوعی که خیلی وقت بود ذهنمو مشغول کرده بود، شاید برای شما هم به عنوان یه مسئله مطرح باشه، این بود که چطوری می‌تونیم یه محتوای متنی که حالا مثلا یه کتاب ۲۰۰ صفحه‌ای باشه رو به صورت جمعی روی گیت‌هاب ببریم جلو و امکان اینو داشته باشیم که به صورت پیوسته محتوای تولید شده رو تغییر بدیم و به بعد هر موقع خواستیم به شکل pdf، epub، mobi و بقیه چیزا خروجی بگیریم؟https://www.agingresearch.org/reasonable-and-necessary/tax-papers-falling/تجربه کتاب قبلی(یادگیری اصولی جاواسکریپت) که روی ایندیزاین کار شده بود، خیلی خوشایند نبود! چون هم ویراستاری کتاب خیلی زمان‌بر بود، هم نمیشد به شکل جمعی و بهینه روی کتاب کار کرد و کلی دردسر دیگه داشت.پس استفاده از نرم‌افزارهای ورد یا ایندیزاین کلا منتفی بودن! یه روشی باید پیدا می‌کردم که بشه یه کتاب به فرمت‌های مختلف، قابلیت شخصی‌سازی بالا، پشتیبانی از فارسی و فونت‌های خاص رو فراهم کنه و کنار همه اینا امکان اینو بهمون بده که بتونیم به شکل پیوسته و کم‌هزینه خروجی بگیریم.ایده‌های خیلی زیادی مثل نوشتن یه سیستم از پایه برای تبدیل‌هایی که می‌خواییم یا استفاده از گوگل docs به ذهنم می‌رسید ولی بازم نه فرصتشو داشتم و نه کیفیت کار می‌تونست خوب در بیاد.کلی مطلب راجع به نحوه ساخت pdf و doc و استفاده از LaTeX و... خوندم و کلی هم مینی پروژه براش درست کردم ولی نمیشد!‌همینطوری داشتم توی سایت‌های مختلف می‌گشتم راجع به LaTeX و موتورهای مختلف می‌خوندم که یهو رسیدم به یه repo خیللللی خفن توی گیت‌هاب!https://github.com/shd101wyy/markdown-preview-enhancedاین extension خیلی خیلی خوبه، از KaTeX و MathJax و... هم پشتیبانی می‌کنه، هم برای atom و هم برای vscode قابل استفاده‌ست و خیلی هم configurable ـه.سریع نصب و تستش کردم و همه چی خوب بود. خیلی خوب فارسی رو هم پشتیبانی می‌کرد و هم امکان خروجی گرفتن داشت، ولی... فونتش خیلی داغون بود، لینک‌های فهرست و برگشت به بالا از کار افتاده بودن و pdfاش خیلی استایل ایناش درست نبود و فقط می‌اومد یه خروجی قابل خوندن میداد.یه کم سرچ کردم و دیدم که همون قابلیت configurable بودنش، این اجازه رو میده که روی مراحل مختلف parse شدن و تبدیل متن markdown به فرمت‌های مختلف یه سری جاهاش دست ببریم و بتونیم کارهای دلخواه‌مون رو انجام بدیم. خب تا اینجا فقط می‌دونستم که میشه کنترل کارهای مختلف تبدیل‌های LaTeX رو دست گرفت ولی چطوری؟!من روی vscode باهاش کار کردم و این مطلب رو هم براساس همین پیش‌زمینه می‌نویسم. وقتی این extension نصب می‌شه یه فایل توی root کاربر جاری و تو فولدر `.mume` ایجاد می‌کنه. mume هم به قول خود سازنده قلب این پروژه‌س و تقریبا یه core برای تبدیلات markdown هستش. البته شاید نیازی به دونستن این مسیر نیست، چون با زدن دکمه های Cmd+shift+p می‌تونیم دستوراتی رو بنویسیم که به فایل‌های کانفیگ mume برسیم.توی اون پوشه یه سری فایل داریم، دوتاشون خیلی مهمن، `parser.js` و `style.less`. این دوتا فایل می‌تونن کمک کنن که توی ساخت کتاب تغییراتی بدیم. مثلا توی فایل style.less میشه یه سری css برای استایل دهی صفحات تعریف کرد که موقع خروجی لحاظ بشن! و توی parser میتونیم یه سری توابع callback رو توی مراحل مختلف ساخته شدن کتاب کنترل کنیم. مثل `onWillParseMarkdown` ، `onDidParseMarkdown`، `onWillTransformMarkdown` ، `onDidTransformMarkdown` و ... . حالا احتمالا متوجه میزان اهمیت این دوتا فایل شدین. مسئله مربوط به فونت و استایل‌دهی‌های کلی تقریبا با دستکاری style.less حل شد. بقیه کارهای اصلی لازم بود که با دست کاری‌هایی توی فایل parser باید انجام می‌شد، مثلا لینک‌های فهرست باید با کلیک کردن می‌رفتن به سوال مربوطه. یعنی:هر کدوم از این لینک‌ها باید با کلیک شدنش می‌رفت به سوال مربوطه:مسئله این بود که باید توی مرحال اجرایی برای تولید این فرمت‌ها دستکاری می‌کردم، کتابخونه‌ای که استفاده می‌کردم هم قابلیت callback زدن توی مراحل مختلف رو داشت ولی پیدا کردن markdown توی اون callbackها و تغییر دادنش واقعا سخت بود، چون از یه طرف متن فارسی بود و این کتابخونه همه متن‌ها رو میاد یه انکد htmlEntities اعمال می‌کنه و از یه طرف دیگه کدهای markdown شروعش اکثرا مشخصه ولی پایانش دست خداست :)) ، مثلا تگ‌های ‌هدینگ با # شروع میشن ولی پایانشون آخر خطه. خلاصه فهمیدن این بخش‌ها توی کتاب و دستکاری‌شون توی فرآیند تبدیل یه کم سخت بود. هدینگ‌هایه کاری که انجام دادم این بود که توی callbackای که بعد از ساخته شدن html مربوط به کتاب بود یه سری regex نوشتم که تبدیلاتی می‌خوام رو انجام بدم. یکی از اصلی ترین تبدیل‌ها دکمه عنوان سوالات بود که باید یه هدینگ و یه آی دی برام تولید میکرد. توی فایل parser.js یه تیکه کد توی onDidParseMarkdown نوشتم که روی نتیجه بدست اومده یه کاری رو برام انجام بده: https://gist.github.com/sayjeyhi/ed702fdd3dc8fab86066b22a06e28bd0 خب این کد باعث شد بتونم هدینگ‌های لینک‌دار که سکشن بندی شدن رو توی pdf درست کنم. اگه دقت کنید توی این کد از crypto استفاده کردم دلیلش اینه که من نیاز داشتم یه سری لینک یونیک درست کنم. همونطوری که یه کم پیش هم گفتم این کتابخونه markdown-preview هم میاد متن‌های فارسی رو html encode میکنه و همین باعث میشه لینک‌های فارسی صحیحی تولید نشن و لینک‌های ما هم کار نکنن. پس باید یه جوری به ازای هر سوال یه شناسه منحصر به فرد ایجاد می‌شد و این شناسه یونیک باید توی فهرست هم قابل دسترس می‌بود. برای همین منظور عنوان اون سوال رو md5 اعمال کردم روش و یه شناسه خوب تولید شد که یونیک بود برای اون سوال.دکمه‌های برگشت به بالابعد از هر سوال یه لینکی داریم که کاربر می‌تونه با کلیک روی اون فهرست برگرده این مورد هم باید لینکش درست می‌شد که مثل همون حالت قبلی با یه regex حل شد: https://gist.github.com/sayjeyhi/56b2fbe85e15ffd53b34aa89e9f1a888 یه لینکی هم که لینک مربوط به هرسوال توی فهرست‌ سوالات بود که باید به جواب مورد نظر وصل میشد: https://gist.github.com/sayjeyhi/267c7cacb6b4e881155062451a66afb6 با این دوتا کد دیگه رفت و برگشت به سوالات و همینطور لینک بازگشت به فهرست هم اوکی شده بود و تقریبا خوب بود کارها. تا اینکه یکی از دوستامون توی توئیتر یه ایده‌ای که خودمم یه بار بهش فکر کرده بودم رو دوباره مطرح کرد :خب اینطوری شد که یه کد هم به مراحل اضافه کردم، با یه regex پیچیده‌تر :)) که با کلیک روی بازگشت به فهرست، برمیگرده به سوالی که قبلا اونجا بودین: https://gist.github.com/sayjeyhi/c37cf9b6d1cbd7c50cfe426ca70563f6 خب تا اینجا دیگه لینک‌بندی خیلی اوکی کار می‌کرد، ولی خب یه چیزی ناقص بود! مگه میشد اخه این pdf رو داد به چاپ و ازش برای نسخه فیزیکی هم استفاده کرد؟ خیلی استایل بندی خوبی نداشت، درسته فونتش اوکی شده بود، لینک‌ها برای مطالعه آنلاین درست کار می‌کردن... ولی برای چاپ واقعا ناقص بود.الهه‌ای به نام pupteerخب تا به اینجای داستان داشت خوش می‌گذشت که متوجه کمبودهای نسخه فیزیکی شدم! من ایده‌ال‌ترین حالتم این بود که بتونم استایل کتاب قبلی که با ایندیزاین کار شده بود رو با اینجا هم داشته باشم. پس دست به کار شدم! قالب بندی کتاب یادگیری اصولی جاواسکریپتبا یه نگاه میشه متوجه شد که خیلی جاه‌طلبانه بوده خواسته‌م، واقعا این layout یه صفحه‌نگاری تقریبا کامل محسوب میشه. خب یه کم خواسته‌مو کمتر کردم و اومدم گفتم که تاثیر گذارترین مولفه‌های کتاب رو داشته باشم کافیه، یه لیست درآوردم که لازم بود داشته باشم، شماره صفحات، بیل‌بیلک خط خطی که گوشه هر صفحه قرار گرفته، پیش‌گفتار و paddingهای درست درمون که بشه برای چاپ فرستاد فایل رو.این لیست رو که درست کردم، بیشتر با نحوه‌ کار این کتابخونه آشنا شدم و فهمیدم که یه شخص سومی وجود داره که الهه قصه ماست (البته شخص سوم‌های زیادی رو ساپورت می‌کنه این کتابخونه و میتونه با ابزارهای جانبی ارتباط برقرار کنه، مثلا رو مک calibre رو میشه نصب کرد و از ابزارهایی مث pandoc و prince هم استفاده کرد). همونطوری که گفتیم بین اینا pupteer که توسط گوگل برای مرورگر chrome ساخته شده الهه قصه ماست، چون هم سریعتره هم کیفیت خیلی خوبی ارائه میده و هم خطای خیلی کمی داره. یه ویژگی خوبش هم اینه که قابلیت کانفیگ شدن(تا یه حدی) رو با استفاده از frontmatter رو بهتون میده. https://gist.github.com/sayjeyhi/e58fd79ea81de9be637d6e71e7070237 اگه کد بالا رو به شکل raw مشاهده کنین، می‌بینین که من برای تصاویری که می‌خواستم توی فوتر قرار بدم دوتا عکس برای سمت چپ و راست رو به شکل base64 اضافه کردم، برای page number توی فوتر و مرکز رو انتخاب کردم، حاشیه‌هایی که می‌خواستم رو تنظیم کردم و قطع وزیری رو برای طول و عرض کتاب ست کردم.این تنظیمات فقط موقع ساخت pdf اضافه میشه و کاری با md , mobi و بقیه فرمت‌ها نداره، چون در حقیقت توی بقیه فرمت‌ها صفحه معنی نداره و محتوا به شکل یکپارچه نمایش داده میشه. نتیجه نهایی یه همچین تصویری میشد:یکی از اصلی‌ترین دلیل‌هایی که مانع شد که بتونم عینا استایل قبلی کتاب رو اجرا کنم، عدم امکان ست کردن کانفیگ جداگانه برای صفحات زوج و فرد توی pupteer بود. به همین دلیل توی شماره صفحه و تصاویر فوتر سعی کردم حالتی رو درست کنم که توی همه صفحات یکی باشه. مورد بعدی عدم امکان تنظیم شروع نمایش هدر و فوتر توی pupteer بود که باعث می‌شد از همون صفحه اول نمایش فوتر و هدر شروع بشه و این مشکل بدی بود. به جز این دو مورد بقیه‌ی مسائلی که برای من دغدغه بودن به راحتی حل شدن. این دو مورد هم توی گیت‌هاب بحث شده بود راجع بهشون(شایدم می‌تونستم با یه کم تلاش بیشتر فیکس کنمشون) ولی فعلا دیگه به همین موارد بسنده کردم و کتاب تولید شد ??.یه مورد آخر هم از خوبی‌های کار با این کتابخونه رو بگم. اینکه شما می‌تونین همون لحظه که markdown می‌نویسین، تغییرات رو هم ببنیین و اینطوری احتمال خطا توی تولید محتوا کمتر میشه.البته خیلی ویژگی‌های خوب دیگه مثل امکان تایپ فرمول پیچیده ریاضی، رسم نمودارهای خاص و .. رو هم داره که من بحثی روشون ندارم ولی اگر خواستین حتما به سایت و ریپوشون سر بزنین. دوباره میزارم این پایین:https://github.com/shd101wyy/markdown-preview-enhancedکدهای خودمم که برای تولید کتاب و کانفیگ‌های مربوط به mume بوده رو روی گیت‌هاب ماریوتک گذاشتم:https://github.com/Mariotek/mume-transpile-configموفق و سربلند و پیروز و خرسند و شاااد باشین، مخلصیم. موردی هم بود خوشحال میشم کامنت بزارین :)سایر نوشته‌هام https://vrgl.ir/EKt7v https://vrgl.ir/p7xp2 https://vrgl.ir/M6OIh

دیگه از جلسات استخدامی ری‌اکت نترسین!

Jafar Rezaei — Sun, 30 Aug 2020 22:04:02 +0430

یه مدتی بود یه پروژه‌ای رو شروع کرده بودم که یه کتاب برای اونایی که junior یا midlevel هستن و میخوان برای شغل‌های جدید توی شرکت‌های جدید اپلای کنن کمک کنه. مسئله این بود که واقعا خیلی‌ وقتا توانایی خوبی داشتن ولی با سوالاتش آشنا نبودن یا اعتماد به نفس کافی نداشتن.همین شد که پروژه ترجمه سوالات استخدامی ری‌اکت رو شروع کردم و بعد نزدیک به ۴ ماه نتیجه‌اش شده یه کتاب حدود ۲۰۰ صفحه‌ای که به شکل متن‌‌باز منتشر میشه. این کتاب شامل سوالایی میشه که توی اکثر مصاحبه‌ها (حتی توی اسنپ‌مارکت) موقع استخدام ازتون پرسیده میشه.این کتاب به فرمت‌های مختلف (pdf، html، md، epub و ...) توی گیت‌هاب قابل دسترسه و می‌تونین به شکل open source(همون متن‌باز) ازش استفاده کنین. البته خود این تبدیل‌هایی که انجام شده و کل کتاب بدون نرم‌افزار ورد یا indesign حاضر شده رو احتمالا یه بلاگ پست کامل توضیح بدم که چیکارا انجام شده، تجربه باحالی بود.https://github.com/Mariotek/reactjs-persian-interview-questionsتوی لینک بالا می‌تونین این کتاب رو ببینید و مطالعه کنید. اگه خوشتون اومد به دوستاتون هم معرفی کنید. توییتر یا بقیه شبکه‌های اجتماعی می‌تونه خیلی کمک کننده باشه.در آخر امیدوارم که بتونیم کارای مفیدی رو به رایگان برا هم انجام بدیم و باعث پیشرفت هم بشیم.سایر نوشته‌هام https://vrgl.ir/EKt7v https://vrgl.ir/M6OIh https://vrgl.ir/nsNIL

چطوری از فرمت جدید تصاویر avif استفاده کنیم؟

Jafar Rezaei — Sun, 23 Aug 2020 16:33:28 +0430

یکی دو ساعت پیش بود که Addy Osmani یه توئیت زد و از انتشار یه فرمت جدید که تاثیر خیلی خوبی می‌تونه روی سرعت لود صفحات وب بزاره خبر داد.خب منم غنیمت رو فرصت شمردم، گفتم یه بلاگ پست کوچیک راجع بهش بنویسم..Addy Osmaniخب با یه نگاه به همین یه تیکه کد میتونیم متوجه بشیم که خیلی راحته استفاده ازش، کافیه توی بلوک `picture` یه `source` دیگه هم میزاریم. که برای لود کردن avif استفاده می‌شه. ولی این فرمت چیه؟ چطوری میشه تصاویر avif بسازیم و چطوری استفاده کنیم ازش؟ تو این مقاله کوتاه پاسخ این سوالا رو می‌تونین پیدا کنین.مقایسه با بقیه بازیکنااین تکنولوژی که بعد از webp اومده و یه next generation format برای تصاویر محسوب میشه، خیلی هیجان انگیزه چون در مقایسه با jpeg و حتی webp که خودش خیلی فرمت کم حجمی بود، کم حجم‌تره!واو!تصویر فوق کافیه که یه کم ما رو به فکر فرو ببره و بعدش یه کم به چالش بیفتیم تا بتونیم برای این استفاده از این فرمت برنامه‌ریزی کنیم. فرمت AV1 (یا همون .avif) یه سوپر فرمت برای کم حجم‌سازی تصاویره.بله این فرمت خیلی خیلی بهینه‌ست و می‌تونه یکی از اصلی‌ترین عناصر صفحات وب که تصاویر هستن رو با سرعت بیشتری لود کنه. چالش لود تصاویر همیشه برای شرکت‌های بزرگ مطرح بوده و دنبال راهکارهای جدیدی برای این موضوع بودن. همین الان که داریم صحبت می‌کنیم Netflix بزرگوار توی این بلاگ پست توضیح داده که از AVIF برای تصاویر استفاده می‌کنه. نکته اونجایی جالب میشه که میریم caniuse رو چک می‌کنیم. نتیجه قابل تامله! فقط ۵ صدم درصد مرورگرها فعلا از این فرمت پشتیبانی می‌کنن.can i use avifفعلا شاید بگید زوده که بریم سراغ این فرمت. ولی با توجه به میزان بهبودی که توی صفحات وب میده می‌ارزه که تبدیلش رو انجام بدیم و یه تیکه کد توی کدهامون بخاطرش داشته باشیم.البته احتمال اینکه به زودی شاهد پشتیبانی گسترده ازش باشیم خیلی زیاده. به اضافه اینکه همین الانشم webp رو داریم پشتیبانی می‌کنیم که الان حدود ۸۵ درصد از مرورگرها پشتیبانی ‌میکنن ازش (ولی خب باز می‌ارزه).الان استفاده کنیم خطا میده؟!پشتیبانی از avif توی کروم ۸۵ و فایرفاکس ۸۰ اضافه شده و اگه همینطوری توی تگ img لینک یه فایل avif رو بزاریم، آره لود نمیشه و حتی مرورگر فعلی شما هم احتمال خیلی بالایی داره که از این فرمت پشتیبانی نکنه و اگه نسخه canary آخر گوگل کروم نباشین باز نمیشه تصاویر avif. حتی فایرفاکس هم فعلا باید flag مربوط به avif رو از تنظیمات فعال کنید. فعالسازی flag avif برای فایرفاکسولی این موضوع به معنی عدم استفاده ازش نیست! چون همونطور که می‌دونین میشه از تگ picture استفاده کرد و این تگ اجازه این مورد رو میده که اگه مرورگر از فرمت مورد نظر ما پشتیبانی میکنه. لود تصویر با اون فرمت براش انجام بشه و اصطلاحا به شکل progressive لود تصویر رو انجام میده، پس خیالتون راحت همین امروز برین همه تصاویر رو به فرمت‌های webp و avif هم تبدیل کنین و توی سورس کدهاتون با تگ picture و source لود کنید. چطوری تصاویر رو تبدیل کنیم؟خب قطعا کتابخونه‌های تبدیل کننده این فرمت هم خیلی سریع رشد میکنن، مثلا به عنوان یه سرویس آنلاین Squoosh رو میشه عنوان کرد که برای تبدیل به این فرمت استفاده کرد. (البته نسخه دارای avif اینجاست روی netlify). البته روی گیت‌هاب آزمایشگاه گوگل PR فعال داره که روی squoosh بیاد (لینک).اگه هم می‌خواییم اصطلاحا به شکل programaticly این تبدیل رو انجام بدین یا مثلا توی محیط cli بتونین این تبدیل رو انجام بدین می‌تونین از libavif که با c نوشته شده استفاده کنین، یا روی محیط macos با Homebrew نصبش کنین.brew install joedrago/repo/avifenc avifenc --helpخلاصه که امیییدواریم بشه این تجربیات باحال رو به زودی روی پروژه‌های داخلی هم ببینیم و لذت سرعت صفحات وب رو بیشتر تجربه کنیم.منابع:https://aomediacodec.github.io/av1-avif/https://www.ctrl.blog/entry/webp-avif-comparison.htmlhttps://netflixtechblog.com/avif-for-next-generation-image-coding-b1d75675fe4https://reachlightspeed.com/blog/using-the-new-high-performance-avif-image-format-on-the-web-today/سایر نوشته‌هام https://vrgl.ir/p7xp2 https://vrgl.ir/M6OIh https://vrgl.ir/nsNIL

یه باگ بد و یک طومار حرف جاواسکریپتی - حکایتی از اسنپ مارکت

Jafar Rezaei — Tue, 21 Jul 2020 17:32:06 +0430

سلام ، من جعفر رضائی هستم، یکی از بچه‌های تیم فرانت‌اند توی اسنپ‌مارکت.این پست رو دارم ساعت ۳:۴۴ دقیقه بامداد می‌نویسیم و الان نصف شب بعد همون روزی هست که یه مشکلاتی روی مدیریت کوکی‌های nodejs‌ برای server side rendering پروژه نیوسایت پیش اومد.ذره بین و عکساگه در جریان مشکلی که پیش اومد نیستین، بزارین اول بگم که مشکل چی بود... این مشکل که حدودا ۲ ساعت و ۲۷ دقیقه روی production و برای ۱۰ درصد از ترافیک سایت اصلی که به صورت A/B تست به سایت جدید منتقل میشدن، رخ داد و باعث می‌شد کاربرایی که در لحظه بازکردن سایت همزمانی زیادی داشتن توکن jwtشون با داده کاربر دیگه‌ای پر بشه و بعد از لود شدن صفحه بجای پنل خودشون، پنل یه فرد دیگه رو ببینن.البته طبق سفارشات ثبت شده، این مورد برای موارد کمی رخ داده و ۸۷ درصد سفارشات این بازه با آدرس صحیح خودشون ثبت شدن که مشخص می‌کنه داشتن با پنل خودشون کار می‌کردن.خب تا اینجای صحبتم سکانس اول بود که مشکل پیش اومده رو توصیف می‌کرد، سکانس دوم رو مسائل فنی، دلیل بروز این مشکل و راهکاری که برای حل سریعش انجام دادیم رو میگم.اول از همه می‌خوام یه سوال بپرسم، اگه به هر دلیلی یهو این مشکل در وب‌سایت شما پیش بیاد چیکار می‌کنین؟ من امروز این سوال رو چند بار از خودم پرسیدم که در اون لحظه چطوری می‌تونستم با کمترین زمان دقیق‌ترین تصمیم رو بگیرم! البته واقعیتشو بگم قیافه‌م بعد دیدن باگ این شکلی شد:حالت‌های چهره - از چپ به راستخب اولین کاری که کردم و احتمالا شما هم می‌کردین این بود که دیپلوی اخیر که ممکن بود مشکل از اون بوده رو revert کردم و دوباره فرستادم بالا... مشکل حل نشد! چون تغییرات قبل از اون هم مربوط به چیزی نبود که فکر کنم مشکلی ایجاد کرده باشه، پس رفتیم کدها رو بخونیم.چند تا مسئله‌ای که ممکن بود مشکل از اونا باشه رو در آوردیم.وجود باگ در سرویس authenticationاشتباه بودن jwt توکن و وجود باگ توی توکنی که refresh توکن می‌کنهرندر شدن markup جابجا برای کاربران توی expressکوکی‌های روی سرور nodejs۲ تا تئوری اول با یه بررسی ساده رد شدن. مورد سوم اصلا امکان پذیر نبود و بیشتر حاصل تفکر عجولانه توی اون لحظه بود و تنها مورد باقی مونده cookie بود...یه بررسی کوتاه بچه‌های تیم روی کوکی، بی نتیجه‌ بود و خبری از وجود باگ نداشت، بعلاوه روی استیج این مشکل رو نداشتیم. آقای سوباساالبته در نظر بگیرین که کارتون سوباسا پخش نمی‌شد و هر لحظه که بررسی‌ها بیشتر طول می‌کشید خطا روی پروداکشن بیشتر در جریان بود. پس باید هر چه سریع‌تر تصمیمی گرفته می‌شد، توی اون لحظات، دو راه وجود داشت:یه روش پیدا کنیم که سریع جلوی مشکل رو بگیریم و بعدا یه فیکس دقیق روش بزنیمبشینیم کامل بررسی کنیم مشکل رو و اساسی باگ رو حل کنیمقطعا راه اول رو باید انتخاب می‌‌‌کردیم، ولی خب چه‌جوری باید مشکل رو فیکس کنیم؟! دقیقا چی باعث این مشکل میشه!اینجا یه لحظه به stream شدن و امکان ایجاد خطا بوسیله Readable stream توی nodejs فکر کردم. قبلا توی گیت‌هاب یه صحبتی با سازنده Preact آقای developit داشتم(لینک) که از یکی از پکیج‌هاشون توی نیوسایت و با stream استفاده کنیم ولی پاسخ خیلی طولانی ایشون خیلی از مسائل رو برای من شفاف کرده بود.https://github.com/GoogleChromeLabs/critters/issues/53یه issue ، یه کلاس درس!یکی از نکته‌های خوب این صحبت، تشریح نحوه stream شدن توی nodejs بود. برای مثال اینکه nodejs هر سایز از دیتا برای stream که داشته باشیم میاد توی بلاک‌های 16 کیلوبایتی به کلاینت ارسال می‌کنه، یعنی اگر شما ۶۰ کیلوبایت html می‌خوایید stream کنید این اتفاق توی 4 بلاک انجام میشه.پس فکر به اینکه نکنه داریم یه مشکلی رو با stream کردن بوجود می‌آریم پیش اومد. با توجه به معماری منعطفی که برای server side rendering روی نیوسایت ایجاد کردیم(که احتمالا در قالب یه پست دیگه توضیح میدم یا به شکل open source منتشر میشه) اولین و راحت‌ترین کار تبدیل کردن نحوه رندر از stream به string و دیپلوی کردنش بود.خوشبختانه بعد از این دیپلوی خطا روی سیستم بچه‌ها دیده نشد و گویا مشکل حل شده بود، ولی مسئله این بود که یه مشکل دیگه‌ای هنوز وجود داشت!کاربرایی که قبلا لاگین کردن باید از حساب فردی که خودشون نیستن خارج میشدن... برای این موضوع هم یه پچ نوشته شد و مرحله اول یعنی جلوگیری از وقوع بیشتر خطا انجام شد. ولی خب تا اینجا فقط تونسته بودیم بدون متوجه شدن دلیل اصلی رخدادن باگ، از رخ دادن بیشتر اون جلوگیری کنیم.حالا سکانس سوم: یه کمی اوضاع آرومتره و می‌خواییم مشکل اصلی رو پیدا و حل کنیم... مشکل دقیقا چی بوده؟! یعنی استریم نباید انجام بدیم؟! مگه میشه!اگه دقت کرده بودین یه بخشی از صحبت‌هام گفته شد که ساختار منعطفی برای SSR فراهم کردیم. این ساختار که کلا به شکل ماژولار داره کار می‌کنه و سعی شده حتی بدون تغییر کد بتونه CSR بشه و از lazy و suspense روی ssr پشتیبانی می‌کنه و کلا حتی نحوه درخواست api هم per component هست نه per route و کلی ویژگی‌های متفاوت دیگه.(میدونم فعلا رو خود ری‌اکت هم suspense برای سرور نیومده ولی ssr-prepass از kitten می‌تونه امکان suspense رو node رو بهتون بده :) )https://github.com/kittenاین معماری متفاوت باعث میشه ما یه سری چالش‌های متفاوت‌تر داشته باشیم، یکی از اون چالش‌ها که در راستای ماژولار بودن سیستم پیش اومده بود، نحوه مدیریت کوکی‌ها بوده. خب میدونیم که روی سرور اگه با express داریم کار می‌کنیم می‌تونیم به ازای هر درخواست روی res.cookie برای کلاینت کوکی بفرستیم.ولی اگه ما برای درخواست‌های httpها یه ماژول داشته باشیم که با یه ماژول دیگه که jwt توکن رو مدیریت می‌کنه ارتباط برقرار می‌کنه، چطوری می‌تونیم res رو توی اون context داشته باشیم؟! شاید بپرسین چرا به res نیاز داریم؟ چون مثلا با فرض اینکه شما jwt توکن دارین و اون توکن منقضی شده ما باید بدون اینکه شما در جریان تعویض توکن باشین یه توکن جدید براتون درست کنیم، اون موقع چون می‌تونه درخواست روی سرور باشه پس لازمه توکن شما روی کوکی نوشته بشه...خب ما برای اینکه یه storage به شکل isolated برای هر request داشته باشیم که مدیریتش هم راحت باشه و نیاز به maintain کردن کانتینر و... مثل redis نباشه. اومدیم از یه پکیج مشهور به اسم node-continuation-local-storage استفاده کردیمhttps://github.com/othiym23/node-continuation-local-storageبا این پکیج میشه یه namespace منحصر به فرد برای هر درخواست ایجاد کرد و بهمون اجازه میده یه‌ سری متغیر رو توی یه session نگهداری کنیم و هرجایی از برنامه بهش دسترسی داشته باشیم. یعنی به شکل یه gateway برای تبادل داده عمل می‌کنه. پس می‌تونه برامون res و req رو توی کل ماژول‌ها قابل دسترس کنه. اما مشکل زمانی پیش میاد که استریم انجام میشه و پکیج‌های 16kb ارسال میشن به مرورگر. توی این حالت اگر concurrent در حال stream باشیم، nodejs میاد برای بهینه بودن اجرای برنامه، از context موجود بین درخواست‌ها به شکل مشترک استفاده می‌کنه و انگار تغییرات یه جا داره انجام میشه. پس توی یه بلاک از استریم دیتا درسته،pipe انجام میشه و توی بلاک بعدی از محل نادرستی از حافظه خونده میشه! پس باگ ایجاد میشه.الان که ما دیگه رو renderToString هستیم ولی از اون سمت نحوه مدیریت شدن داده بین ماژول‌ها رو تغییر دادیم و بجای کار روی محوریت کوکی، دیتا رو به شکل ساده‌تر توی closure مربوط به همون ماژول مدیریت می‌کنیم.با توجه به اینکه با رفرش شدن صفحه امکان داشت کوکی شما از middleware احراز هویت رد نشه و نیاز به رفرش داشته باشه و این مورد بدتر باعث میشد که توکن شما مجددا عوض بشه. البته توی این سناریو در بدترین حالت، با توجه به میزان همزمانی کاربران، یه کاربر فعال در اون بازه زمانی اطلاعات ۷ نفر(نفرات ثابت) دیگه رو رفرش کرده و دیده.امیدوارم توضیحاتم کافی و شفاف بوده باشه، اگه جایی سوالی داشتین خوشحال میشم بپرسین. امیدوارم فرهنگ بیان دلیل رخدادن باگ‌ها و قبول کردن اینکه سیستم‌ها به باگ می‌خورن و هنر ما توسعه‌دهنده‌ها رفع کردن اونا با کمترین هزینه هستش جا بیفته. مورد بعدی اینکه، ما توی پروژه وب‌سایت جدید اسنپ مارکت بخش زیادی از سورس رو به صورت open source جلو بردیم و توی گیت‌هابمون موجوده ، خوشحال می‌شم به گیت‌هاب‌‌مون هم مراجعه کنین و اگه نظری دارین بهمون بگین :) و کلام آخر ، امیدوارم فرهنگ open source بودن رو بیشتر و بیشتر جا بندازیمhttps://github.com/snappmarket