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

ساخت ماشین حساب با جاوااسکریپت

حسین خوانساری — Fri, 12 Jun 2020 23:04:25 +0430

این کاریه که من به عنوان یه پروژه نسبتاً تفریحی انجام دادم و دوست داشتم که تجربیاتم رو با شما هم به اشتراک بذارم. ماجرا از این قراره که ما می‌خوایم یه سیستم (یا اصلا یه تابع!) درست کنیم که بتونه عبارت‌های ریاضی رو حساب کنه؛ مثلا اگه ما بهش بدیم ۲×۲ به ما ۴ رو برگردونه. در واقع یه همچین چیزی:const answer = calculate("2 * 2") console.log(answer) // 4مرحله اول (و چالش‌برانگیز!): فهموندن عبارت به کامپیوترهمون‌طور که توی مثال دیدید، چیزی که ما به تابع ورودی میدیم یه رشته‌ست، کامپیوتر هیچ درکی ازش نداره، نمی‌دونه مفهومش چیه. چالش اول و اصلی ما اینه که بتونیم از این رشته اطلاعات رو بکشیم بیرون. مثلا بتونیم از رشته‌ی 2 * 2 اینا رو بفهمیم:[ Number { value: 2 }, Operator { type: '*', value: 2 }, Number { value: 2 } ]در واقع سعی‌مون بر اینه که بتونیم مفهوم هر کلمه (عدد، عملگر، پرانتز، یا هرچی) رو به شکل یه شیء به اسم token از متن استخراج کنیم. این به کامپیوتر یه درک کامل از اون عبارتی که انسان نوشته میده.این کار (tokenizing) رو میشه با یه حلقه روی اون رشته انجام داد، اما کار دقیقیه، باید حواس‌جمع باشید موقع نوشتن! احتمالا به کلی flag نیاز دارید، و البته خوبه که کدتون بتونه از عبارت داده‌شده غلط بگیره و ارور بده. مرحله بعد: به دست آوردن مقدار عددیواضحه که برای به دست آوردن مقدار عددی اول نیاز به درک اون عبارت داریم، که خب این مرحله رو گذروندیم. و فکر کنم از این‌جا به بعد نیازی به توضیح نباشه؛ صرفاً باید توکن‌های عملگر رو پیدا کنیم و اون عمل رو روی عددای قبل و بعدشون انجام بدیم. و البته باید به اولویت‌های عملگرها توجه کرد!در نهایت هم خروجی شما احتمالا یه عدده.مرحله آخر: قابلیت‌های بیشتر می‌تونید پرانتزها رو به طور بازگشتی حساب کنید.می‌تونید حتی تابع اضافه کنید به ماشین حسابتون! مثلا اگه قبل از شروع پرانتز یه سری حروف اومده‌بود می‌تونیم نتیجه بگیریم که این‌جا منظور فلان تابع‌ست.بعضی توابع خاص که از لحاظ نوشتاری متفاوتن رو هم می‌تونید به دلخواه خودتون پیاده کنید؛ مثل قدر مطلق یا ...نتیجه‌ی کارمن همین کد رو نوشتم و توی گیت‌هاب منتشرش کردم. از npm می‌تونید دانلودش کنید و توی خط فرمان هم ازش استفاده کنید:npm i -g @hkh12/node-calc node-calc "2*2" // prints 4 node-calc "2*2" "2*3" // prints 4 and 6 node-calc // REPL!حالت REPLو یه ربات تلگرام هم ساختم که ازش استفاده می‌کنه و می‌تونید توی تلگرام باهاش یه چیزایی رو محاسبه کنید، از همین عبارت‌ها کوئیز بسازید و کارای دیگه.امیدوارم که مطلب مفیدی بوده‌باشه براتون؛ اگه بوده توی گیت‌هاب استار بدید! ممنون.

معرفی کتابخانه «اسپریکس»

حسین خوانساری — Tue, 04 Jun 2019 00:59:49 +0430

سلام دوستان. اخیرا روی پروژه‌ای کار می‌کردم، گفتم ازش براتون بگم شاید به دردتون بخوره!اسمش هست اسپریکس. یه کتاب‌خونه‌ست برای ساختن اپلیکیشن‌های جمع‌وجور با جاوااسکریپت. چرا؟ از این جور چیزا زیاد هست!اسپریکس با بقیه فرق داره. کتاب‌خونه‌های بزرگ مثل ری‌اکت و ویو از Virtual DOM استفاده می‌کنن، و این یعنی هرچیزی با جاوااسکریپت رندر میشه در حالی که HTML تقریبا خالیه :/ و این یه مشکلی رو به وجود میاره: خروجی جاوااسکریپت ما خیلی بزرگ میشه (در بهترین حالت ۱۰۰ کیلوبایت تا جایی که من دیدم) و اجرای این کدها برای مرورگر شاید کمی سخت و هزینه‌بر باشه و لود برنامه شما زمان بیشتری ببره.ویو: تقریبا صدبرابر HTMLـمون جاوااسکریپت داریم :/پس چطوری کار میکنه؟اسپریکس هم مثل ویو (سعی میکنم دیگه از ری‌اکت مثالی نزنم) state داره ولی چیزی رو رندر نمیکنه. مثلا این تیکه کد رو ببینید:

hello @(name)

اسپریکس همیشه یه لیست آماده داره از کارایی که بعد از هر تغییر انجام بده. هروقت ما تایپ می‌کنیم، name تغییر کرده پس چندتا فانکشن باید اجرا بشن؛ و یکی از اون‌ها متن تگ div رو عوض میکنه.و در نهایت اگه توی اون فیلد تایپ کنیم X، پیام hello X می‌بینیم.خلاصه‌تر بگم: با اسپریکس بخش‌های template و logic همیشه جدا هستن و این کدهای شما رو منظم‌تر میکنه. حجم خیلی کمی هم داره (مینیفای‌شده‌: ۷ کیلوبایت، مینیفای + کمپرس شده: کمتر از ۳ کیلوبایت)!جمع‌بندیاسپریکس شاید نتونه جایگزین کتاب‌خونه‌های فعلی باشه اما برای برنامه‌های نسبتا کوچیک کارسازه.در حال حاضر هم دارم روش کار میکنم (ریپازیتوری در گیت‌هاب). اگه نظرتون جلب شد یه star بدید یا اگه خواستید یه کمکی بکنید؛ ممنون! ;)

معرفی کتابخانه XOBJ.JS : کار با اشیا، بدون درد و خون‌ریزی!

حسین خوانساری — Mon, 16 Jul 2018 00:02:56 +0430

اگه تجربه کافی در کار با کتابخونه‌های مختلف داشته‌باشید، حتما با لودَش آشنایید و باهاش کار کردید؛ میشه گفت قوی‌ترین utility libraryـه، و چیزی رو دستش نمیاد. ولی خب، من سعی کردم یکم رو دستش بیام. چیزی که میخوام بهتون معرفی کنم، یه کتابخونه‌ست که خودم ساختمش (درواقع دارم می‌سازمش)؛ تا حدودی شبیه به لودش هست ولی فقط روی اشیا متمرکز شده؛ و سعی کرده در همین حوزه از لودش جلو بزنه؛ اسمشم هست XOBJ (در واقع X-Object).نصب کتابخانهاگه می‌خواید با npm نصبش کنید، این‌طوری:npm install @hkh12/xobj و اگر می‌خواید با اگر هم نسخه مینیفای‌شده می‌خواید، به آخر همین لینک dist/xobj.umd.min.js اضافه کنید. اگه همه‌چیز درست پیش‌رفته‌باشه، یه متغیر x_ (اول ایکسه، بعد آندرلاین؛ اگر برعکس می‌بینید تقصیر ویرگوله!) خواهید داشت.حالا وقت کد زدنه!حالا می‌خوایم ازش در عمل استفاده کنیم. اول اینطوری ماژول رو ایمپورت کنید:const x_ = require('@hkh12/xobj')یا اگه ماژول معمولی به‌کارتون نمیاد، ES Module هم هست:import x_ from '@hkh12/xobj/dist/xobj.esm'حالا می‌تونید از همه قابلیت‌هایی که داره بهره ببرید؛ هرچند حال و مجال لیست‌کردنشون نیست.جمع‌بندیاگه می‌خواید مشارکت کنید، با دل و جان می‌پذیرم؛ لینک ریپازیتوری: https://github.com/Hkh12/xobj داکیومنشن هم توی خود ریپازیتوری هست. (لینکش) این پست به‌منزله این نیست که من اومدم کار خودمو تبلیغ کنم؛ بازاریابی کنم؛ یا ...اصلا اینطور نیست!توی همچین کامیونیتی‌هایی مثل همین ویرگول، اتفاقا خیلی کار پسندیده و خوبیه که ما پروژه‌هامونو به هم معرفی کنیم؛چون هم شاید به‌درد شما بخوره یه‌روزی، هم شاید یکی از همین جمع خواست مشارکت کنه تو این پروژه؛ اون‌موقع هم کسی ضرری نمی‌بینه.امیدوارم مفید باشه براتون؛ منتظر استار‌های شما هستیم :)

جوری کد بنویس که بشه خوند...!

حسین خوانساری — Sat, 14 Jul 2018 15:21:44 +0430

همیشه یکی از بزرگ‌ترین مشکلات در برنامه‌نویسی تیمی و گروهی، ناخوانا یا نامفهوم بودن کدهاست. چون معمولا استایل کدزنی ما با هم فرق می‌کنه، مثلا یکی تب میزنه یکی اسپیس. یا در اکثر مواقع، ما نمی‌تونیم کدهای هم‌دیگه رو بخونیم و بفهمیم و درک کنیم. البته همیشه نوشتن کد از خوندنش راحت‌تره و این از اول بوده؛ چون منطقاً فکر کردن از خوندن فکر دیگران راحت‌تره، نیست؟یکی‌کردن استایل‌هاتو این دست از مشکلات، ادیتورها به‌کمکمون میان. مثلا همون قضیه تب و اسپیس که گفتم رو میشه با یه فایل .editorconfig حل کرد! ادیتورکانفیگ یه فایل کوچولو و جمع‌وجوره که اکثر ادیتورا اگه اینو توی فایلاتون پیدا کنن، بهش عمل می‌کنن و از استایل اون پیروی می‌کنن. اکثر ادیتورا ساپورتش می‌کنن؛ اگر هم نکنن، پلاگینش قطعاً پیدا میشه. این یه مثال از ادیتورکانفیگ:root = true # every file with any format [*] end_of_line = lf charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true # use spaces instead of tabs indent_style = space # adjust indent size to 2 indent_size = 2 # settings for every .js file in test directory [test/**.js] indent_size = 4به‌همین سادگی، ما یه استایل واحد داریم که همه ازش پیروی می‌کنن!اهمیت کامنت‌ها شاید کامنت‌ها به‌صورت تئوریک بی‌اهمیت باشن چون کامپایلر یا موتور یا ... اونا رو به‌حساب نمیاره؛ اما ما کامپایلر نیستیم. کامنت‌ها می‌تونن درواقع نقش داکیومنشن داشته‌باشن.کد زیر رو فرض کنید:module.exports = function(t) { return t.replace(/\s+/g, '-').replace(/&/g, '-and-').replace(/[^a-zA-Z-]+/g, '').replace(/\-\-+/, '-').replace(/^\-|\-$/g, '').toLowerCase().trim() }این کد شاید برای من که نوشتمش، قابل‌فهم باشه؛ اما برای کسی که شاید سطح پایین‌تری داشته‌باشه یکم مبهمه؛ هرچند من سعی کردم خیلی مرتب بنویسم. مثلا طرف مقابل ممکنه بگه‌:خب، این قراره چیکار کنه؟ من سردرنمیارم.الان چه آرگومنتی باید بهش بدم؟چی قراره بهم برگردونه؟خب، باید بهش حق بدیم. اتکا به خود کد برای قابل‌فهم بودن کافی نیست، باید همه‌جا کامنت گذاشت تا درکش ساده‌تر بشه.حالا بذارید یکم کامنت بهش اضافه کنیم:// gets string, converts it to slug, returns it.خب، الان با همین یه‌خط کامنت، پیشرفت چشمگیری داشتیم.حالا اگه بخوایم یکم حرفه‌ای‌تر برخورد کنیم، اینطوری می‌نویسیم:/** * Converts string to slug string. * @param {string} t * @returns {string} Slug String */خب، الان اگه ادیتورتون یکم فهم داشته‌باشه، خودش اینا رو بهتون پیشنهاد میده!همین فانکشن رو تو VSCode نوشتم؛ نتیجه رو ببینید :)و به‌همین زیبایی، کدهای ما خواناتر و قابل‌فهم‌تر شدند!امیدوارم این مطلب به‌دردتون بخوره‌ :)

جاوااسکریپت همه‌جا: از VR تا ربات تلگرام

حسین خوانساری — Mon, 02 Apr 2018 21:59:59 +0430

قبلاً جاوااسکریپت یه زبان مزخرف و تقریبا به‌دردنخور بود که فقط تو مرورگر به کار می‌اومد؛ اما الان اوضاع تغییر کرده و در حال حاضر، ‌یادگیری جاوااسکریپت از واجباته و جاوااسکریپت چیزیه که همه‌کاری میشه باهاش کرد.با به‌وجود اومدن ران‌تایم نود (Node)، ما تونستیم جاوااسکریپت رو از مرورگر بیرون بیاریم، و به محیط سیستممون بیاریم؛ این یعنی:جاوااسکریپت سمت سرور اجرا میشه، ینی می‌تونید به جای زبان‌‌هایی مثل PHP از اون برای بک‌اند استفاده کنید، و تقریبا همه‌کاری رو میشه باهاش انجام داد (و حتی ربات تلگرام نوشت که شاید بعدا آموزششو براتون بنویسم)با جاوااسکریپت ابزار خط فرمان (cli) بسازید که تو هر سیستم‌عاملی اجرا میشن، فرمان‌های مختلف رو اجرا کنید، ...!اپ دسکتاپ بنویسید (به وسیله electron) اپ موبایل بنویسید (با چیزای مختلفی میشه این کارو کرد، ولی خب بهترینشون React nativeـه)برنامه‌های هیبریدی بنویسید (با ابزارهایی مثل کوردووا)و حتی، برنامه‌‌های واقعیت مجازی بنویسید! (React VR)و همچنین اکوسیستم غنی نود باعث به‌وجود اومدن فریم‌ورک‌‌ها و کتابخانه‌‌های متعدد و قدرتمندی شد که با اونا سرعت کدزنی به شدت بالاتر میره و برنامه‌‌‌های تحت‌وب خارق‌العاده‌ای به وجود میان. و، الان دیگه جاوااسکریپت دیگه kiddy script نیست، بلکه تبدیل شده به زبانی قدرتمند که هرجایی میشه اجراش کرد. پس دیگه نیازی به دست‌کم گرفتنش نیست، فقط باید اونو یاد گرفت!

موسیقی × کد

حسین خوانساری — Mon, 02 Apr 2018 02:15:53 +0430

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