https://virgool.io/feed/@katebmedia fa 2026-06-07 11:13:22 https://files.virgool.io/upload/users/432307/avatar/PMHGck.jpeg?height=120&width=120 https://virgool.io/@katebmedia https://virgool.io/@katebmedia/%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A8%D9%87%D8%AA%D8%B1-%D8%A7%D8%B2-console-log-%D8%AF%D8%B1-%D8%AC%D8%A7%D9%88%D8%A7%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-clqzzfnpzldu یکی از ابزارهای کلیدی برای پیداکردن خطا استفاده از console log است. بطورکلی، پس از نوشتن کد مرورگر را چک میکنیم که آیا کد ما درست کار می کند یا نه. اگر درست کار نکرد داخل اسکریپت console مینویسیم و مجدد چک می کنیم. خیلی وقتها تعداد console ها زیاد می شود و console که نوشتیم بین console های دیگر گم می شود.معمولا برای حل این مشکل دو آرگومان برای console می نویسیم، اولی اسم متغیر و دومی مقدار را نشان می دهد:let x = 10;console.log("x" , x);//x 2دستور بالا را با کد زیر جایگزین کنید:console.log({x});نتیجه بصورت زیر است:{x: 10} صالح کاتبی صالح کاتبی Sun, 14 Mar 2021 10:44:56 +0330 https://virgool.io/@katebmedia/%D9%88%D8%A7%D8%AD%D8%AF%D9%87%D8%A7%DB%8C-%D9%85%D8%AE%D8%AA%D9%84%D9%81-%D9%81%D9%88%D9%86%D8%AA-%D8%AF%D8%B1-css-zas1la2urn8p حتما شما متوجه شده اید که برای font-size واحدهای مختلفی استفاده میشود. در این مقاله من سه واحد px، em، و rem را بصورت مختصر بررسی میکنم.واحد pxپیکسل می تواند اولین گزینه باشد اما یک مشکل دارد. فرض کنید از واحد px در پروژه خود استفاده کرده اید و براساس پیکسل مدیا کوری نوشته اید. اگر کاربر اندازه فونت پیشفرض مرورگر خود را تغییر داده باشد چه؟ فونت سایز ثابت می ماند و تنظیمات کاربر برای فونت اعمال نخواهد شد.واحد emواحد em بر اساس font-size المان پدر محاسبه می شود. برای مثال، اگر المان div اندازه فونت 16px داشته باشد، برای آن div و فرزندانش 1em = 16px میشود.برای مثال اگر اندازه فونت المان پدر 20px باشد، و بخواهیم اندازه فونت المان فرزند 30px باشد، em به این صورت محاسبه میشود:30 / 20 = 1.5اندازه فونت المان فرزند برابر با 1.5em است.واحد remمقدار rem بر خلاف em اندازه خود را از المان پدر به ارث نمیبرد، بلکه مقدار خود را براساس المان root یا همان html محاسبه میکند. برای مثال، اگر المان root اندازه فونت 16px داشته باشد، برای برای تمامی المان ها 1em = 16px میشود.مطالعه بیشتر: http://kntit.ir/%D9%85%D8%B7%D8%A7%D9%84%D8%A8-%D8%A2%D9%85%D9%88%D8%B2%D8%B4%DB%8C/%D9%85%D9%82%D8%A7%D9%84%D8%A7%D8%AA/292-%D8%A7%D8%B2-%DA%A9%D8%AF%D8%A7%D9%85-%D9%88%D8%A7%D8%AD%D8%AF-%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%D9%87-%DA%AF%DB%8C%D8%B1%DB%8C-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%DA%A9%D9%86%DB%8C%D9%85-px-em-rem.html صالح کاتبی صالح کاتبی Tue, 29 Dec 2020 10:06:25 +0330 https://virgool.io/@katebmedia/%D8%AA%D8%A7%DB%8C%D9%BE%D9%88%DA%AF%D8%B1%D8%A7%D9%81%DB%8C-%D8%AF%D8%B1-%D9%88%D8%A8-%D8%A7%D9%86%D8%AA%D8%AE%D8%A7%D8%A8-%D8%A8%D9%87%D8%AA%D8%B1%DB%8C%D9%86-%D9%81%D9%88%D9%86%D8%AA-%D8%A8%D8%B1%D8%A7%DB%8C-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-xxyklc6cvbnp تایپوگرافی وب، هنر چیدمان حروف و متن بصورت خوانا، واضح، و لذت بخش است.اما تایپوگرافی وب با تایپوگرافی چاپ تفاوت دارد. در طراحی چاپی، متغیرهای کمی برای سروکله زدن با آن وجود دارد. طرح چاپی بوسیله کسی که از آن استفاده میکند (user) تغییر نمیکند، رنگ ها کاملا ثابت هستند، و حروف تغییر نمیکند. اما زمانی که تایپوگرافی وب روی صفحه نمایش کاربر قرار میگیرد، فاکتورهای خیلی زیادی را باید مد نظر داشت، مانند:اندازه تصویر: پیش بینی آن غیر ممکن است. با اینکه طراحی ریسپانسیو سعی دارد خود را با آن تطبیق دهد اما بعضی وقتها واقعا نشدنی است.رزولوشن تصویر: تراکم پیکسل نقش مهمی در خوانایی متن دارد. هرچند پیشرفتهای تکنولوژی باعث شده کاربران زیادی به تصاویر باکیفیت دسترسی داشته باشند، اما طراحان باید تکنولوژی قدیمی تر را مد نظر داشته باشند.کالیبراسیون صفحه: سطح شفافیت تصویر نقش تعیین کننده ای در نمایش رنگ ها دارد. طراحان وب مجبور هستند رنگهایی انتخاب کنند که در کالیبراسیون های مختلف خیلی تغییر نکند.طراحی وب با سرعت زیادی درحال تغییر است. خیلی وقت نیست از زمانی که تنها حق انتخاب چند فونت خاص را داشتیم نمیگذرد. اما امروزه در انتخاب فونت دستمان کاملا باز است. هرچند در تایپوگرافی وب، انتخاب فونت مناسب تازه شروع کار است.انخاب فونت مناسب برای وب سایتدر تایپوگرافی موارد بسیار زیادی را باید در نظر داشته باشید تا فونتی که انتخاب میکنید مناسب و خوانا باشد. در ادامه به چند مورد از آن اشاره میکنم:1. تعداد فونت های استفاده شده در سایت زیاد نباشد. استفاده بیش از سه فونت باعث میشود سایت به هم ریخته بنظر برسد.2. فونت های استاندارد استفاده کنید. کاربران با فونت های استاندارد آشنایی بیشتری دارند و میتوانند مطالب سایت شما را سریعتر بخوانند.3. طول خطوط را محدود کنید. اینکار باعث خوانایی بیشتر میشود. اگر میخواهید تجربه خواندن سایت بهتر شود هر خط نباید بیش از 60 کاراکتر داشته باشد.4. از حروفی استفاده کنید که در سایزهای مختلف به خوبی نمایش داده شود. وب سایت شما قرار است در صفحه نمایش با سایزهای مختلف دیده شود. لازم است برخی المان های سایت در سایزهای متفاوت نمایش داده شود مانند دکمه ها یا عناوین. مطمئن شوید فونتی که استفاده کرده اید در صفحه نمایش کوچک خوانا باشد.5. فونتهایی استفاده کنید که حروف آن از هم متمایز باشند. بعضی فونتها ممکن است باعث شوند حروف از یکدیگر متمایز نباشند. مثل حرف "چ" و "ج"، "د" و "ر"، "فا" و "نا"، "نیم" و "لیم"، ...6. ارتفاع خطوط نه خیلی زیاد باشد و نه خیلی کم. اینکار کمک به خوانایی متن میکند.7. مطمئن شوید تضاد رنگی بین متن و پس زمینه وجود داشته باشد.8. از نوشتن متن هایی با رنگ قرمز و سبز خودداری کنیم. زیرا کسانی که کوررنگی دارند (حدود 8% از انسان ها) نمیتوانند این رنگ ها را ببینند. برای مثال برای نشان دادن پیام خطا بجای اینکه بنویسیم "تمام فیلدهایی که به رنگ قرمز مشخص شده اند اجباری هستند" بنویسیم "تمام فیلدهایی که به رنگ قرمز و با * مشخص شده اند اجباری هستند".9. از متنهای چشمک زن اجتناب کنید. زیرا متنهای چشمک زن میتواند در برخی افراد ایجاد تشنج کند. علاوه بر این، متن های چشمک زن درکل برای کاربران آزاردهنده است.مطالعه بیشتر: http://kntit.ir/%D9%85%D8%B7%D8%A7%D9%84%D8%A8-%D8%A2%D9%85%D9%88%D8%B2%D8%B4%DB%8C/%D9%85%D9%82%D8%A7%D9%84%D8%A7%D8%AA/301-web-typography.html صالح کاتبی صالح کاتبی Sat, 26 Dec 2020 10:49:54 +0330 https://virgool.io/@katebmedia/%D8%AC%D8%A7%D9%88%D8%A7%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-synchronous-%D8%A7%D8%B3%D8%AA-%DB%8C%D8%A7-asynchronous-rpvf9qzsejhw جاوااسکریپت چیزی مابین این دو است. جاوااسکریپت در ذات خود زبان Synchronous است و خط به خط خوانده میشود. به عبارت دیگه جاوااسکریپت در لحظه تنها یک عملگر را اجرا می کند. ولی این اصلا چیز خوبی نیست.فرض کنید قرار است شما به دیتابیس یک سایت موسیقی ریکوئست بزنید و 800 رکورد بخوانید. در زبان Synchronous شما باید منتظر بمانید تا ابتدا این 800 رکورد خوانده شود تا بتوانید به سراغ کدهای دیگر بروید. خوشبختانه شما می توانید طوری کد بزنید تا جاوااسکریپت بصورت Asynchronous رفتار کند. راه هایی که پیش پای شما است به شرح زیر است:1. callbackهامی توان گفت callbackها فانکشن هایی هستند که بعنوان آرگومان به فانکشن دیگر پاس داده می شوند. زمانی که یک فانکشن تمام شود callback اجرا می شود. هرچند این راه حل خوبی بنظر میرسد، اما بی عیب نیست. از آنجایی که شما نمی دانید دقیقا کی فانکشن C به نتیجه می رسد، مجبور هستید تا فانکشن های وابسته را درون آن قرار بدهید. اینکار به سرعت تبدیل به جهنم callback ها خواهد شد.2. Promiseبا کمک Promise می توانید کدها را از هم جدا کنید و از جهنم callback ها آزاد شوید. Promise به شما این امکان را میدهد که تا زمان تکمیل تسک قبلی، تسک های بعدی را به تاخیر بیاندازید.3. Async/Awaitبه کمک Async/Await میتوانید کدهای asynchronous را بصورت synchronous بنویسید:ابتدا Async فانکشن promise بر می گرداند.سپس Await منتظر promise می ماند.مطالعه بیشتر: http://kntit.ir/%D9%85%D8%B7%D8%A7%D9%84%D8%A8-%D8%A2%D9%85%D9%88%D8%B2%D8%B4%DB%8C/%D9%85%D9%82%D8%A7%D9%84%D8%A7%D8%AA/329-is-javascript-synchronous-or-asynchronous.html صالح کاتبی صالح کاتبی Tue, 15 Dec 2020 11:43:18 +0330 https://virgool.io/@katebmedia/%DB%8C%DA%A9-%D9%81%D8%B1%DB%8C%D9%85-%D9%88%D8%B1%DA%A9-%D8%B9%D8%A7%D9%84%DB%8C-%D8%A8%D8%B1%D8%A7%DB%8C-rtl-%DA%A9%D8%B1%D8%AF%D9%86-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-lddlr3gf7s67 فریم ورک RTLCSS به شما این امکان را می دهد تا بجای نوشتن دو فایل CSS، تنها یک فایل برای نسخه LTR بنویسید. RTLCSS نسخه RTL را کامپایل می کند.برای من پیاده سازی سایت های دوزبانه همیشه کابوس بود، چون لازم بود دو فایل CSS مجزا یکی برای نسخه فارسی و یکی برای نسخه انگلیسی می نوشتم. برای اینکار اول سایت را بصورت RTL پیاده سازی می کردم و بعد از بررسی سایت (text alignها، marginها، paddingها و floatها و ...)، آن را تبدیل به LTR می کردم. اینکار وقت خیلی زیادی از من میگرفت.این اواخر، CSSهای مشترک را در یک فایل جمع میکردم و بخش هایی که باهم مشترک نبودند را بصورت فایل های rtl.css و ltr.css می نوشتم.اما فریم ورک RTLCSS این امکان را می دهد تا بجای نوشتن دو فایل CSS، تنها یک فایل برای نسخه LTR بنویسیم. اما چگونه؟اول از همه لازم هست تا دستور cli را برای RTLCSS را بصورت globally روی سیستم خودتان نصب کنید:npm install -g rtlcssبا کمک دستور زیر می توانید CSS را convert کنید:rtlcss input.css output.rtl.cssبه جای input.css و output.css اسم CSS خودتان را بنویسید. همچنین دقت داشته باشید که دقیقا در مسیر فایل CSS که قرار است کامپایل کنید قرار داشته باشید.مثال:فرض کنید سایت دو زبانه فارسی و انگلیسی داردید و می خواهید جهت body در نسخه فارسی rtl و در نسخه انگلیسی ltr باشد. با کمک RTLCSS اینکار به راحتی انجام می شود:body { direction: ltr/* rtl:rtl*/;}خروجی بصورت زیر است: /*style.css */ body { direction: ltr/* rtl:rtl*/; } /* style.rtl.css */ body { direction: rtl;}اگر برای نوشتن CSS از Sass استفاده می کنید اینکار بسیار راحت تر است. شما می توانید یک متغیر تعریف کنید:$body-direction: ltr #{'/* rtl:rtl*/'}body {direction: $body-direction;}خروجی بصورت زیر است: /*style.css */ body { direction: ltr/* rtl:rtl*/; } /* style.rtl.css */ body { direction: rtl;} صالح کاتبی صالح کاتبی Tue, 08 Dec 2020 13:12:23 +0330 https://virgool.io/@katebmedia/%D8%A8%D8%AC%D8%A7%DB%8C-foreach-%D8%A7%D8%B2-map-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%DA%A9%D9%86%DB%8C%D8%AF-dxlwswlu0zzy اجازه بدهید در قالب یک مثال توضیح بدهم. فرض کنید آرایه ای از چندین آبجکت دارید - هر آبجکت نماینده یک فرد است. اما شما به id هر فرد نیاز دارید.// What you havevar officers = [ { id: 20, name: 'Captain Piett' }, { id: 24, name: 'General Veers' }, { id: 56, name: 'Admiral Ozzel' }, { id: 88, name: 'Commander Jerjerrod' }];// What you need[20, 24, 56, 88]شیوه های مختلفی برای اینکار وجود دارد. میتوانید یک آرایه خالی تعریف کنید و بعد از .forEach()، .for(...of)، و یا .for() استفاده کنید.اما بهتر است اینکار را انجام ندهیم.همانطور که میدانید .forEach() چیزی return نمیکند. این بدان معناست که شما باید نتایج را درون یک آرایه push کنید. اما چرا باید دو فانکشن داشته باشیم درحالی که میتوانیم با یک فانکشن آن کار را انجام دهیم؟var results = data.map(formatElement);سعی کنید بعضی از حلقه های پروژه هایتان را با .map()، .reduce()، و .filter() جایگزین کنید. هم کد کمتری خواهید داشت و هم کدهای خواناتری خواهید داشت.مطالعه بیشتر: http://kntit.ir/%D9%85%D8%B7%D8%A7%D9%84%D8%A8-%D8%A2%D9%85%D9%88%D8%B2%D8%B4%DB%8C/%D9%85%D9%82%D8%A7%D9%84%D8%A7%D8%AA/331-simplify-your-javascript-use-map-reduce-and-filter.html صالح کاتبی صالح کاتبی Wed, 02 Dec 2020 14:33:33 +0330