نوشته های امیرمحسن

تجربه اولین و آخرین خریدم از بامیلو!

امیرمحسن — Sat, 24 Nov 2018 00:28:41 +0330

امروز به خاطر تبلیغات و پیشنهاداتی که از دوستان شنیدم درباره برگزاری Black Friday در یک فروشگاه ایرانی به نام "بامیلو"؛ تصمیم گرفتم اولین تجربه خریدم از این سایت رو انجام بدم.یک سری کالا خریداری کردم که به دلیل سریع فروخته شدن کالا ها سفارش هارو به صورت جدا جدا ایجاد کردم... (4 سفارش جدا)حدود ساعت 23:30 امشب به من ایمیلی رسید با این مضمون:در ادامه این ایمیل چنین فاکتوری ثبت شده بود:برام خیلی عجیب بود! چون سفارشی که من ثبت کرده بودم و به صورت اینترنتی خریداری کرده بودم فقط 8 آیتم داشت! و از اون مهمتر اینکه از درگاه "به پرداخت ملت" بود!!! چیز عجیب ترش اینجا بود که در این ایمیل نوشته شده بود مشکل در پرداخت پیش اومده ولی من از درگاه بانک ایمیل تایید کسر از حساب دریافت کردم...خلاصه اینکه زنگ زدم به شماره پشتیبانی (خط ویژه) که در انتهای ایمیل ها ذکر شده و بعد به اپراتور مربوطه وصل شدم.خانومی که پاسخگوی من بود در ابتدا بسیار با احترام از من خواست که شماره سفارشم رو اعلام کنم و مشکلم رو بگم! من هم مشکلم رو (که در بالا توضیح دادم) بهشون گفتم و این رو هم گفتم که من 4 تا سفارش ثبت کردم.ازم خواستن که مبالغی که پرداخت کردم رو بهشون بگم؛ و من هم با توجه به ایمیل تاییدیه درگاه های پرداخت بهشون توضیح دادم:سفارش اول: 4,003,000ریال سفارش دوم: 1,668,000ریال سفارش سوم: 1,470,000ریال سفارش چهارم: 845,000ریالبه من گفتن که اصلا این اعداد درست نیست و این ارقام پرداخت نشده!!!!! در صورتی که در خود سایت هم این مبالغ ذخیره شدند: بعد بهشون گفتم که سفارش هایی که دادم به طور کلی برام لغو کنید و پولش رو بهم برگردونید.بهم گفتن دلیلش چیه و من هم گفتم: "هیچ چیز معلوم نیست!"و اون خانم به ظاهر محترم هم گفت: "همه چیز معلومه! شما نمیخوای بفهمی!"خیلی به من برخورد و واقعا با خودم فکر کردم که ارزشش رو داشت؟ تخفیف به چه قیمتی؟ تحقیر؟!اسم اون خانم رو نمیارم ولی قطعا به خاطر این بی احترامی پیگیری میکنم...این اولین و "آخرین" تجربه خرید من از بامیلو بود و به این نتیجه رسیدم که خرید از سایت هایی که اعتبار جعلی برای خودشون ساختن واقعا کار اشتباهیه.و در نهایت واقعا از خودم شرمنده شدم که این سایت رو به خانوادم و دوستام معرفی کردم تا در حراجمعه شرکت کنن...

جاوااسکریپت گردی: تبدیل به آرایه

امیرمحسن — Tue, 09 Oct 2018 19:44:05 +0330

بخش اول جاوااسکریپت گردی رو با عنوان "تبدیل به آرایه" شروع می کنم. مبحثی که توی گروه های مختلف خیلی پرسیده میشه و خیلی بیشتر پاسخ داده میشه!در این مقاله روش هایی رو معرفی می کنم و از خوبی ها، بدی ها و بعضا از best-practice هاشون هم یادی میکنم.فرض کنید یک رشته (String) داریم و میخوایم اون رو به تک تک کارکتر هاش در یک آرایه تقسیم کنیم.روش اول: مثل همیشه کلاسیک!نکته خاصی تو این روش نیست؛ همون داستان حلقه و ریختن هر حرف در یک آرایه به عنوان خروجی. شاید بپرسید که چرا از prototype استفاده کردیم که باید بگم دلخواهه و میشه به هر شکل دیگه ای نوشت! در حقیقت این روش یک نوع polyfill برای روش دوم هست.روش دوم: تقسیم بر اساس حروفاین روش بسیار کوتاهه ولی خروجیش دقیقا مشابه روش اول هست!اما روش اول و دوم (و همینطور ششم) مشکلاتی برای استفاده در برابر کارکتر های non-BMP (non-Basic Multilingual Plane) دارن. کارکتر هایی مثل: ? ? ? ? و تمام شکلک های یونیکد (Unicode Emojies)مشکل اینجاست که وقتی روی این دسته از کارکتر ها از دو روش بالا استفاده میکنیم، خروجی های عجیب و غریبی میگیریم. برای مثال:این (ظاهراً) مشکل به این دلیل پیش میاد که دو متد بالا فقط کارکتر هایی که کد 65536 و کمتر دارند رو به صورت طبیعی نشون میدند و برای کارکتر هایی با کد بالاتر، از یک جفت کارکتر از پیش تعیین شده که دارای کد کمتر هستند استفاده می کنند.خب؛ فهمیدیم مشکل چیه، دلیلش هم مشخص شد؛ برای رفعش چه کنیم؟ روش های پایین جواب سوالتونه!روش سوم: استفاده از Spread Syntax (ES6)روش چهارم: استفاده از Array.from (ES6)روش پنجم: استفاده از RegExp و پرچم u (ES6)اطلاعات بیشتر درباره پرچم u/:Stackoverflow - Javascript + Unicode regexesبعضی از مرورگر ها (مثل مرورگر Microsoft Edge) از پرچم u پشتیبانی نمیکنند که میشه از Regex زیر استفاده کرد:روش ششم: استفاده از Object.assign (ES6)روش های 3 تا 6 همه نیازمند محیطی هستند که از ES6 به صورت کامل پشتیبانی میکنه! ولی برای نسخه های پایین تر چه راهی وجود داره؟روش هفتم: استفاده از Polyfill های ES5var str = "???"; var stringToArray = function(str) { var i = 0, arr = [], codePoint; while (!isNaN(codePoint = knownCharCodeAt(str, i))) { arr.push(String.fromCodePoint(codePoint)); i++; } return arr; } console.log(stringToArray(str)); // expected output: Array [ "?", "?", "?" ]البته این Polyfill نیازمند تابع knownCharCodeAt و در بعضی از مرورگر ها String.fromCodePoint هست.String.fromCodePoint Polyfill:if (!String.fromCodePoint) { // ES6 Unicode Shims 0.1 , © 2012 Steven Levithan , MIT License String.fromCodePoint = function fromCodePoint () { var chars = [], point, offset, units, i; for (i = 0; i < arguments.length; ++i) { point = arguments[i]; offset = point - 0x10000; units = point > 0xFFFF ? [0xD800 + (offset >> 10), 0xDC00 + (offset & 0x3FF)] : [point]; chars.push(String.fromCharCode.apply(null, units)); } return chars.join(""); } }خب؛ با روش ها آشنا شدیم و حتی Polyfill های جدیدی ایجاد کردیم، ولی همچنان مشکل باقیست...روش هایی که گفتیم خیلی خوبن؛ ولی در برابر زبان های پیچیده تر و یا شکلک های ترکیبی مثل:Rainbow Flag و... همچنان نتایج عجیبی میدن و در اصلاح دچار miss-interpretation میشن!برای حل این مشکل هم کتابخانه grapheme-splitter وجود داره که برای هر زبانی از استاندارد خاص خود اون زبان در جداسازی حروف (Split) استفاده میکنه...در نهایت شمارو دعوت میکنم از این مطلب دیدن کنید تا به یک جمع بندی فوق العاده در این مبحث برسید:JavaScript has a Unicode problem by Mathias.مرسی که تا اینجا با من همراه بودید!

نصب و راه اندازی Node.js و npm

امیرمحسن — Wed, 19 Sep 2018 19:54:19 +0430

برای نصب Node.js راه های مختلفی وجود داره که می تونید متناسب با زمان، انرژی و حال خودتون یکی از روش های زیر رو انتخاب کنید:استفاده از NVM (Node Version Manager) (روش ترجیحی برای استفاده حرفه ای در آینده!)اگر سیستم عاملتون Unix-like هست از این لینک و اگر ویندوزی هستید از اینجا دریافتش کنید.بعد از نصب NVM با استفاده از دستور nvm version می تونید چک کنید که فعاله و ازش استفاده کنید...حالا با دستور زیر آخرین نسخه Node.js رو نصب و فعال کنید! (میتونید به جای node نسخه دلخواه خودتون رو وارد کنید مثلا: 10.10.0)nvm install node nvm use nodeشاید بپرسید چرا از NVM استفاده کنیم؟ سایت nodesource.com میگه:One awesome aspect of nvm is that it manages the versions of Node.js, it doesn't just upgrade them. This means you can have the latest version of Node.js, the latest versions of all the LTS release lines, and any number of other versions you want to use or test as well.دانلود مستقیم از سایت nodejs.org https://nodejs.org/en/download/ نصب با استفاده از Chocolatey (Windows) https://chocolatey.org/packages/nodejs.install نصب با استفاده از NuGet (Windows) https://www.nuget.org/packages/Node.js/ نصب با استفاده از Scoop.sh (Windows)scoop install nodejsبعد از نصب Node.js با دستور های زیر کامل نصب شدنش رو چک کنید:node -v // v9.4.0 (Might be different) npm -v // 5.6.0 (Might be different)باتشکر...

آرایه گردی در جاوااسکریپت!

امیرمحسن — Wed, 19 Sep 2018 16:38:35 +0430

تو این مقاله سعی می کنم راه های پیمایش در آرایه ها رو از روش های کلاسیک تا سوسول بازی های نسل جدید (ES6) شرح بدم. ?روش 1: حلقه های کلاسیک، ولی دوست داشتنی! ?استفاده از حلقه while / forاین روش از قدیمی ترین روش هاست و اجازه پیمایش در تمام خانه های آرایه رو به ما میده. به قول معروف: " Old but Gold " ?let i = 0; // indexconst array = [1, 2, 3];while (i < array.length) { console.log(array[i]); i++;}حلقه for (کلاسیک ترین راه ممکن و فکر میکنم پر استفاده ترین!) ?const array = [1, 2, 3]; for (let i = 0; i < array.length; i++) { console.log(array[i]); }روش 2: یه دوری بزنیم! (Array.prototype.forEach)این متد در ES6 به صورت رسمی معرفی شد و مثل روش های بالا از الگوریتم حلقه برای پیمایش استفاده می کنه (ولی در نظر داشته باشید که ES6 هست!)برای دیدن Polyfill, Specifications و هر چیزی که مربوط به این متد هست میتونید به صفحه این متد در MDN مراجعه کنید. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach const array = [1, 2, 3]; array.forEach(function(current_value, index, array) { console.log(`At index ${index} in array ${array} the value is ${current_value}`); }); // undefiendمشکلی که ممکنه در کار با این متد بهش برخورد کنید اینه که بعد از استفاده دیگه چیزی رو return نمیکنه و به همین دلیل دیگه نمیشه در ادامه دوباره از آرایه استفاده کرد. برای حل این مشکل یه سر به روش بعدی بزنید. ?روش 3: استفاده از نقشه! (Array.prototype.map)روش قبلی، خوب و منطقی بود، ولی در یک سری استفاده خاص ممکنه جواب نده. ❌این متد هم در ES6 متولد شده و کارش اینه که یک تابع رو روی تک تک اعضای یک آرایه اجرا (اعمال) کنه.ساختار متد map به این شکله: array.prototype.map(current_value, index, array) در مثال زیر ما تابع func که یک تابع Arrow Anonymous هست رو با استفاده از map به آرایه array نسبت دادیم و میتونیم در یک متغیر جدید نتایج مورد نظرمون رو دریافت کنیم. ?// example from MDN var array = [1, 4, 9, 16]; // pass a function to map const func = x => x * 2; const map = array.map(func); console.log(map); // expected output: Array [2, 8, 18, 32] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map روش 4: کَمِش کن! ? (Array.prototype.reduce)این متد یک تابع رو بر یک نگه دارنده (Accumulator) و تک تک خانه های آرایه از چپ به راست اعمال می کنه تا به یک مقدار برسه! (Accumulator رو توی Google Translate ترجمه نکنید ? به واژه انباشتگر می رسید!)? بهتره یه مثال بزنم:const array = [1, 2, 3]; const sum = (x, y) => x + y; const array_sum = array.reduce(sum, 0); console.log(`The sum of array: ${array} is ${array_sum}`); // expected output: The sum of array: 1,2,3 is 6 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce ? روش 5: فیلتِرِش کُن! نه از اون فیلترا! (Array.prototype.filter)خیلی ساده! یه شرط بده بهش؛ هر کدوم از خونه ها با شرط جور در اومد میاد بیرون... ?const array = [1, 2, 3, 4]; const even = x => x % 2 === 0; const even_array = array.filter(even); console.log(`Even numbers in array ${array}: ${even_array}`); // expected output: Even numbers in array 1,2,3,4: 2,4 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter روش 6: ببین همشون تو یه شرط مُشترِکَن؟ (Array.prototype.every)کاری که میکنه رو تو عنوان spoil کردم! ?فقط مواظب باشید این متد رو روی آرایه خالی استفاده نکنید که تو هر شرایطی true برمیگردونه!// example from MDN function isBelowThreshold(currentValue) { return currentValue < 40; } var array1 = [1, 30, 39, 29, 10, 13]; console.log(array1.every(isBelowThreshold)); // expected output: true https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every روش 7: حداقل یکیشون که این شرطو دارن؟! نَه؟؟ (Array.prototype.some)این متد هم مثل بالایی با آرایه های خالی مشکل داره. هر شرطی بدید false بر میگرده!const array = [1, 2, 3, 9, 5, 6, 4]; const over_seven = x => x > 7; if (array.some(over_seven)) { console.log('At least one element bigger than 7 was found'); // 9 } else console.log('No element bigger than 7 was found'); https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some مرسی که تا آخر این مقاله همراهم بودید. (ایشالا تو شادیاتون جبران کنم! ?)اگر خوشتون اومد لایک رو که میزنید قطعاً ?؛ ولی اگر واقعاً خوشتون اومد برای دوستاتون، همکاراتون یا هر بنده خدای دیگه ای که میشناسید (در صورتی که به جاوااسکریپت آلرژی نداشته باشه) به اشتراک بزارید... ? ?