<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
    <channel>
        <title>نوشته های محمد ابراهیمی اول</title>
        <link>https://virgool.io/feed/@ebrahimiaval</link>
        <description>یاد می‌گیرم، تجربه می‌کنم، اشتباه می‌کنم و این چرخه من است تا موفق بشم یا ازش درس بگیرم.</description>
        <language>fa</language>
        <pubDate>2026-06-07 11:47:57</pubDate>
        <image>
            <url>https://files.virgool.io/upload/users/2298/avatar/AaDGqx.jpg?height=120&amp;width=120</url>
            <title>محمد ابراهیمی اول</title>
            <link>https://virgool.io/@ebrahimiaval</link>
        </image>

                    <item>
                <title>صفر تا صد تاریخچه اینترنت و وب: درس‌هایی از اعماق وب</title>
                <link>https://virgool.io/@ebrahimiaval/%D8%B5%D9%81%D8%B1-%D8%AA%D8%A7-%D8%B5%D8%AF-%D8%AA%D8%A7%D8%B1%DB%8C%D8%AE%DA%86%D9%87-%D8%A7%DB%8C%D9%86%D8%AA%D8%B1%D9%86%D8%AA-%D9%88-%D9%88%D8%A8-%D8%AF%D8%B1%D8%B3-%D9%87%D8%A7%DB%8C%DB%8C-%D8%A7%D8%B2-%D8%A7%D8%B9%D9%85%D8%A7%D9%82-%D9%88%D8%A8-r4z0v1y5jznp</link>
                <description>ایشون تیم برنرز لی (Timothy John Berners-Lee) هستن کسی که احتمالاً اسمش رو با عنوانهای مخترع وب (WWW),  HTML , URL , HTTP و موسس W3C  شنیده باشید که سال ۲۰۰۴ از ملکه الیزابت دوم مدال شوالیه هم گرفت!تیم برنرز لی (Timothy John Berners-Lee)پیشگفتار: چرا باید این مطلب رو بخونم؟چون تاریخ خودش رو تکرار میکنه! در این مطلب به سراغ پشت پرده ها و جزئی ترین حاشیه های خلق اینترنت، وب، HTML و مرورگرها و ...  رفتم و از چالش ها و حقیقت های واقعی این مسیر صحبت کنم تا در پس فهمیدن اونها بتونیم درس هایی نه فقط فنی بلکه روانشناسی، اقتصادی و به طور کلی درسهایی برای کار و زندگی یاد بگیریم.وقتی که دارید این مطلب رو مرور میخونید، به احتمال زیاد خاطرات اتفاقاتی در حوالی خودتون رو به خاطر خواهید آورد که با اونها مشترک و به اونها شبیه هست چون تاریخ خودش رو تکرار میکنه!صفر تا صد تاریخچه اینترنت و وبکسی که تاریخ رو خونده باشه به دو چیز مجهز میشه، اول عدم تکرار اشتباهات و توانایی درک که این که آخر این مسیر احتمالا چی در انتظار ما هست و  دوم توانایی داشتن تخمین دقیقتری از آینده. از این دو مورد میشه برای حداکثر کردن فرصتها و حداقل کردن شکست ها کمک گرفت. این مطالب رو من با دیدی ترکیبی نوشتم، پس پیشنهاد میکنم شما هم صرفا از دید فنی و مهندسی نبینید بلکه روی ابعاد دیگر مثل روانشناسی، اقتصادی و مدیریت هم فکر کنید تا بتونید حداکثر سود رو از این مطلب ببرید.اگر این مطلب واستون مفید بود ممنون میشم به هر روشی که خودتون میدونید اون رو به حتی شده یک نفر دیگه برسونید و این میتونه برای من انگیزهای بشه تا مطالب بیشتری از این جنس تهیه و منتشر کنم.سایر مقاله ها رو هم میتونید در صفحه ویرگول ببینید. در صفحه لینکدین مطالب کوتاه رو میذارم و میتونیم اونجا با هم در ارتباط باشیم. استفاده از مطالب مقاله با ذکر نام و لینک به مطلب آزاد هست.محمد ابراهیمی اول / نگارش بهار ۱۴۰۴  / ویرایش دوم۱) فصل یک: جایی که همه چیز شروع شد!بیاین از نقطه صفر شروع کنیم، از آغاز خلقت چیزی که به اون می گیم اینترنت! البته نه، بیاین به عمق بیشتری بریم و از منفی شروع کنیم، از جایی که ایده اینترنت مطرح شد و هنوز هیچ چیزی وجود نداشت! ۱.۱) نقطه آغاز رسمیاگر گوگل کنید &quot;اینترنت کی خلق شد&quot; می رسید به سال ۱۹۸۳؛ زمانی که پروتکل TCP/IP که توسط وینت سرف (Vint Cerf) (مشهور به پدر اینترنت) و همکارش باب کان (Bob Kahn) طراحی شده بود به عنوان استاندارد رسمی ARPANET  در نظر گرفته شد؛ اما این صرفا یک تاریخ رسمی هست و تمام حقیقت نیست چون ایده اینترنت و حتی همین پروتکل TCP/IP دهها قبل تر خلق شده بودن و حتی خود ARPANET خیلی وقت بود که داشت فعالیت میکرد! بریم با ببینیم حقیقت چی هست!نقطه آغاز رسمی اینترنت۱.۲) نقطه آغاز واقعی: همه چیز از اینجا شروع شدایده اولیه اینترنت رو جوزف کارل رابنت لیکلایدر (J. C. R. Licklider) در ۱۹۶۰  (حدود ۲۳ سال قبل از نقطه آغاز رسمی) در دانشگاه MIT مطرح کرد. اون درباره مفهومی با عنوان &quot;Intergalactic Computer Network&quot; نظریه پردازی کرد و طرحی رو مطرح کرد که هدفش شبکه ای جهانی از کامپیوترها برای اشتراک داده به صورت زنده (Real-Time) بود و این نقطه واقعی و بنیادی آغاز خلقت اینترنت بود.نقطه ای که ذهن افراد متخصص رو درگیر کرد و موسسات پروژهشی مثل ARPA رو وارد فاز تحقیق و توسعه. بعدها لیکلایدر عضو ARPA شد و در توسعه ARPANET که نسخه اجرایی طرح خودش بود مشارکت کرد.لیکلایدر اولین ایده پرداز و طراح اینترنت ۱.۳) اولین نسخه واقعی: تبدیل شدن ایده به محصولنه سال بعد از ایده پردازی لیکلایدر (۱۹۶۹)  آژانس پروژه های تحقیقاتی پیشرفتهٔ دفاعی آمریکا (ARPA) با هدف ارتباط بین کامپیوترهای دانشگاهی و نظامی در زمان جنگ سرد با هدف افزایش سرعت تولید علم در حوزه دفاعی و نظامی شبکه  ARPANET  رو خلق کرد. البته این آژانس ۲ سال قبل از طرح لیکلایدر (۱۹۵۸) و برای اهداف پروژهی پیرامون رقابت های جنگ سرد تاسیس شده بود و نه صرفا برای ایجاد شبکه ARPANET. اولین شبکه ارتباطی ARPANET در ایالات متحده امریکااولین پیام با این شبکه در اکتبر ۱۹۶۹  بین دانشگاههای UCLA و Stanford ارسال شد و اولین شبکهای بود که با روش انتقال داده پکت سوئیچینگ (packet-switching network) استفاده میکرد. این روش برخلاف روش سنتی و مرسوم اون زمان یعنی سوئیچینگ مداری (circuit switching) نیاز به اشغال یک کانال ثابت تا پایان اتصال نداشت. ۱.۴) آغاز شبکه packet-switchingدر روش سنتی سوئیچینگ مداری  (circuit switching) که تلفنهای آنالوگ از اون استفاده میکردن؛ بین دو گره در شبکه یک ارتباط فیزیکی ثابت برقرار میشد و دادهها بدون تغییر خاصی در طول این خط ارتباطی منتقل می شدن. این شبکه ساده و ارزان بود ولی چون خط ارتباطی ثابتی تا پایان ارتباط دو گره اشغال میشد کارایی و بهرهوری بسیار پایینی داشت. علاوه بر این چالشهایی مثل امنیت پایین و ضعف این شبکه در مقابل حملات هستهای باعث شد تا در دوران جنگ سرد امریکاییها دنبال شبکهای بدون این نقصها باشن. circuit switchingهمه جا گفته میشه که اولین بار Packet Switching توسط ARPANET در سال ۱۹۶۹ بکارگرفته شد ولی پاول باران (Paul Baran) و دونالد دِیویس (Donald Davies) کسانی بودن بین سالهای ۱۹۶۰ تا ۱۹۶۹ روی این روش ارتباطی به صورت جدا کار کرده بودن.اولین بار پاول باران (آمریکایی) در سال ۱۹۶۰ در مقابل ضعف شبکه سنتی در حملات هستهای پیشنهاد داد که اطلاعات به جای عبور از یک مسیر ثابت، به بستههای کوچک تقسیم بشن که از مسیرهای مختلف حرکت کنن و حدود دو سال هم روی این موضوع تحقیق و توسعه کرد ولی اسم مشخصی برای این مدل نذاشت اما دقیقا همین اصول packet switching رو توصیف میکرد.در سال ۱۹۶۵ دونالد دیویس (انگلیسی) بدون اطلاع از طرح پاول باران (چون نظامی و مخفی بود) طرحی مشابه اون رو با هدف رفع چالشهای شبکه سنتی سوئیچینگ مداری ارائه داد و از اصطلاح &quot;packet&quot; برای اولین بار استفاده کرد. دیویس در طی حدود ۴ سال تلاش شبکه آزمایشی NPL Network رو با همین معماری پیاده سازی کرد ولی برخلاف ARPANET که حمایت مستقیم و نیاز عملیاتی وزارت دفاع آمریکا با بودجهای بالا داشت NPL بودجهای محدود و تقاضایی آزمایشی داشت.مدل شبکه آزمایشگاهی NPL که توسط دونالد دیویس بر پایه پکت سوئیچینگ طراحی و اجرا شداین پروژه در حد تحقیقاتی و اثبات مفهومی (Proof of Concept) ماند. شاید اگر بریتانیا مانند وزارت دفاع آمریکا از پروژه NPL حمایت میکرد الان ما باید در مورد این شبکه که سالها قبل از ARPANET استارت خورده بود صحبت میکردیم!به طور خلاصه، در روش انتقال داده پکت سوئیچینگ دادهها به بستههای کوچک تقسیم میشدند و هر بسته میتوانست از مسیر متفاوتی به مقصد برسد، سپس در مقصد دوباره به هم چسبیده و بازیابی میشدند. این روش انتقال نیاز به یکسری اصول و قواعد داره تا با اون در مبدا داده تقسیم بشه بعد در شبکه مسیریابی بشه و سپس در مقصد مثل قطعات یک پازل به هم متصل بشن تا داده اولیه تشکیل و تحویل گیرنده داده بشه و برای این کار در شبکه ARPANET از پروتکل NCP (Network Control Protocol) استفاده شد.۱.۵) آغاز پروتکلهای سطح بالاانگیزه ساخت اولین پروتکل سطح بالا رو ARPA ایجاد کرد. اون از دانشگاهها خواست تا برای شبکه پکت سوئیچینگ ARPANET خودش یک پروتکل ارتباطی ایجاد کنن.۱.۵.۱) اولین پروتکلپس از درخواست ARPA گروه مشهوری به نام Network Working Group (NWG) که استیو کراکر (Steve Crocker) دانشجوی دکتری در UCLA رهبر اون بود روی این موضوع شروع به کار کرد. در این تیم افراد تاثیر گذار بودن از جمله  وینت سرف (Vint Cerf) خالق پروتکل TCP/IP که به پدر اینترنت مشهور هست، جان پوستل (Jon Postel)  مرد افسانهای دنیای اینترنت، مسئول ثبت پروتکلها و خالق پروتکل ارسال ایمیل SMTP  و ری تاملینسون (Ray Tomlinson) کسی که اولین ایمیل رو فرستاد، هم از اعضای NWG بودن. پس از مدتی کار فشرده در آخر کراکر با کمک تیمش پروتکل NCP (Network Control Protocol) رو رو در سال ۱۹۶۹ خلق کرد و به عنوان اولین پروتکل ARPANET مورد استفاده قرار گرفت.پروتکل NCP اولین پروتکل ارتباطی ARPANETطراحی یک پروتکل در شرایطی که ماشینها سختافزارها، سیستمعامل و حتی زبانهای برنامهنویسی متفاوتی داشتن کار سادهای نبود! مهندسا میگفتن: &quot;ما حتی نمیدونیم چطوری یه پیغام ساده بفرستیم بین دو ماشین متفاوت!&quot;نمیدونستن آیا باید اتصال دائمی باشه یا ارتباط بستهای؟ مشکل هماهنگسازی شماره پورتها و فرمت بستهها رو داشتن و باید یه چیزی شبیه به سشن (session) طراحی میکردن که از Packet Switching بتونه استفاده کنه.۱.۵.۱.۱) اولین RFC: چون موضوع پیچیده، تعداد جلسات زیاد و همه چی دائماً در حال تغییر بود کراکر یه تصمیم جالب گرفت و گفت:&quot;ما یه سری یادداشت غیررسمی مینویسیم که اسمش رو میذاریم RFC — Request For Comments&quot;.اولین RFC یعنی شماره 1 در آوریل ۱۹۶۹ توسط خودش نوشته شد و همین RFCها بعدها شد مبنای توسعه اینترنت.اولین RFC که توسط خالق این رویه، استیو کراکر نوشته شدهپروتکل NCP برای شروع گزینه خوبی بود ولی نقصهای جدیای هم داشت.خیلی سفارشی طراحی شده بود و فقط درون ARPANET جواب میداد و نمیتونست چند شبکه مختلف رو متصل کنه و علاوه بر این راهکاری برای اطمینان از تحویل بستهها مثل TCP امروزی نداشت.در این پروتکل چیزی به نام IP address به شکل امروزی وجود نداشت و آدرسدهی در NCP ساده، لوکال و در فایلی به نام hosts.txt انجام میشد که چیزی شبیه به این بود:عدد سمت چپ host number معادل IP امروزی که فقط داخل ARPANET معنی داشت، بعد اسم که hostname و نام قابلفهمی برای انسان بود میآمد که کارکردی شبیه به نام دامنه امروزی داشت و در اخر خط هشتگ برای توضیح اختیاری.1   UCLA-NMC        # UCLA Network Measurement Center
2   SRI-ARC         # Augmentation Research Center
3   UCSB-CMPSC      # UC Santa Barbara Computer Science
4   UTAH-10         # University of Utahاین فایل به صورت دستی توسط NIC (Network Information Center) در SRI (Stanford Research Institute) نگهداری و بروزرسانی میشد و همهی کامپیوترهای شبکه باید این فایل رو از NIC میگرفتن و تو سیستم خودشون کپی میکردن. وقتی تعداد میزبانها زیاد شد (مثلاً از دهها به صدها یا هزارها رسید)، دیگه نگهداری ومدیریت دستی hosts.txt ممکن نبود و اینجا بود که نیاز به آدرسدهی ساختاریافته (IP)، مسیریابی خودکار بین شبکهها و سیستم نام دامنه (DNS) به شدت احساس شد.۱.۵.۲) اولین پروتکل امروزییک سال پس از خلق NCP و استفاده در ARPANET  وینت سرف (Vint Cerf) و همکارش باب کان (Bob Kahn) شروع به طراحی پروتکلی که نقصهای NCP رو پوشش بده کرد ولی تا سال ۱۹۷۰ خیلی جدی دنبال نمیشد اما به مرور که نقصهای NCP بیشتر به چشم میآمد اونها تصمیم گرفتن جدیتر کار کنن برای همین در ۱۹۷۳ به صورت جدی و رسمی کار طراحی TCP/IP رو استارت زدن. به مرور تعریف این پروتکل وسیعتر و مرز IP و TCP هم واضحتر میشد؛ اونها در سال ۱۹۷۸ تصمیم گرفتن برای فهم و توسعه راحتتر پروتکل TCP و IP رو به دو پروتکل مستقل تقسیم کنن که TCP مسئول کنترل انتقال تعریف شده و IP هم مسئول آدرسدهی و مسیریابی بود.جزئیات TCP و IP۱.۵.۲.۱) اولین نسخه IPاولین نسخه IP در سال ۱۹۷۰ در همان طرح اولیه وینت سرف طراحی شد که به IP V1 مشهور هست. بعدها با جدیتر شدن طراحی و توسعه TCP/IP نسخه جدیدی تحت عنوان IP V2 خلق شد. بعدها این نسخه توسعه پیدا کرد و IP V3 تعریف شد که برای اولین بار در ژانویه ۱۹۸۰ طی  RFC 760 معرفی شد. تمام این نسخهها همواره در تحقیقات آزمایشگاهی بکار رفتن و هیچ وقت مورد استفاده فراگیر و عمومی قرار نگرفتن.۱.۵.۲.۲) اولین نسخه رسمی IPدر سپتامبر ۱۹۸۱، حدود یک سال و نیم بعد از معرفی IP V3، نسخه جدید طی RFC 791  به صورت نهایی و رسمی و با نام IP V4 معرفی شد که بعدها به عنوان نسخه مرجع برای پیادهسازیهای گسترده مورد استفاده قرار گرفت.ساختار آدرس معرفی شده 32 بیتی بود و میشد حدود ۴ میلیارد آدرس یکتا با اون تولید کرد.تفاوتهای نسخههای 6 و 4 IPدر اون زمان که هنوز اینترنت به شکل فراگیری امروزی نبود، چنین تعدادی خیلی کافی به نظرم میرسید ولی پس از عمومی شدن اینترنت خیلی طول نکشید تا آدرسها تمام شد! البته با وجود کمبود آدرس همچنان این نسخه فراگیرترین نسخههای IP هست.۱.۵.۲.۳) آخرین نسخه رسمی IPبرای رفع چالش تعداد IP به صورت رسمی در ۱۹۹۸ نسخه جدید IP V6 طی RFC 2460 معرفی شد. این آدرس 128 بیتی هست که 340 تریلیون تریلیون تریلیون آدرس یکتا رو میشه با اون تولید کرد ولی با وجود مزایای بسیار این آدرس به دلیل عدم پشتیبانی دستگاههای قدیمی، پیچیدگی بیشتر و نیاز به آموزش هنوز مهاجرت به IPv6 کامل نشده. بین نسخه 4 و 6 یک نسخه 5 معروف به Stream Protocol هم طی RFC 1190 و RFC 1819 معرفی شد که طراحی شد بود برای انتقال جریانهای صوتی و تصویری در زمان واقعی (real-time) بود ولی هرگز جایگزین IPv4 نشد و چون این نسخه با نام IP V5 معرفی شده بود بعدا در معرفی نسخه جدید مجبور شدن از نام IP V6 استفاده کنن.۱.۶) آغاز DNS قبل از پروتکل TCP/IP تعداد گرههای شبکه کم بود و هر گره یک استم و یک شماره داشت که در فایل hosts.txt نگهداری میشد. نحوه ارتباط خیلی شبیه به کار کردن با دفتر تفلنهای قدیمی بود که ما برای تماس با هر کسی که میخواستیم یه نگاه به اون می انداختیم و اسم فرد رو پیدا می کردیم و بعد شماره تلفنش رو با تلفن میگرفتیم.وقتی که در سال ۱۹۸۳ پروتکل TCP/IP به صورت رسمی استاندارد ARPANET شد، ارتباط در اینترنت بر پایه آدرسهای IP مستقیم انجام میشد و خیلی طول نکشید تا مدیریت لیستی از نامها و آدرسها پیچیده و به نوعی ناممکن بشه.برای رفع این مشکل در سال ۱۹۸۳، پاول موکاپتریس (Paul Mockapetris) سیستمی توزیعشده و سلسلهمراتبی به نام (Domain Name System) DNS را ابداع کرد. اون طرح اولیه خودش رو در RFC 881 و مدتی بعد در RFC 882 مطرح کرد که بعد با RFC 1034 و RFC 1035 در سال ۱۹۸۷ تکمیل و نهایی شد.پاول موکاپتریس خالق DNS ساختار DNS یک ساختار سلسله مراتبی و توزیع شده هست که توسط هزاران سرور DNS نگهداری میشه و نهادهای ICANN (The Internet Corporation for Assigned Names and Numbers) و IANA (The Internet Assigned Numbers Authority) متولی جهانی مدیریت ریشه و تخصیص دامنهها و نگهدارنده لیست دامنههای سطح بالا (مانند .com، .org، .ir) هستن.مراحل کار بار DNSبه طور خلاصه سیستم DNS نامهایی مثل www.example.com رو به IPهایی مثل 93.184.216.34 تبدیل میکنه و چنین ترتیبی داره:ترتیب کلی DNS۱.۷) تا اینجا فهمیدیم کهاولین ایده پردازی در سال ۱۹۶۰ توسط لیکلایدر انجام شداولین شبکه پایه اینترنت امروزی در سال ۱۹۶۹ با نام ARPANET توسط ARPA با پروتکل NCP آغاز به کار کرداولین پروتکل مرسوم امروزی ( پروتکل TCP/IP) توسط وینت سرف و باب کان در ۱۹۷۰ شروع  به طراحی شدپروتکل TCP و IP در سال ۱۹۷۸ تفیکیک شدن اولین نسخه رسمی اینترنت در سال ۱۹۸۳ با پذیرش پروتکل TCP/IP به عنوان استاندارد ارتباطی برای ARPANET اعلام شداما این همه واقعیت نیست!۲) آغاز اینترنت تجاری و عمومیتا اینجا یعنی بین سالهای ۱۹۶۰ تا ۱۹۸۳، هر چی گفتیم در مورد یک شبکه مخفیِ دولتی با هدف پژوهش در امور نظامی بود و با چیزی که ما به اسم اینترنت میشناسیم خیلی فاصله داشت.این فاصله با کلی حادثه و چالش همراه بود و به این راحتیها اینترنت امروزی خلق نشد. بذارید حرف اخر رو اول بزنم! سر هر چیز ریز و درشتی ابتدا یک گروهی مخالف بودن و هر چقدر هم که نفوذ و جایگاه این گروههای مخالف (متخصص فنی، دانشگاهی، نظامی و دولتی) بالاتر بود سالهای بیشتری طول کشید تا اون تغییر رخ بده.تغییر در نهایت اتفاق خواهد افتاد!البته که در اخر تمام این تغییرات یا خودشون اتفاق افتادن یا نسخه توسعه یافتهای ازشون رخ داد. به این شکل که یا افراد مخالف به مرور نفوذ و قدرتشون کم شد یا هم این که گروه موافق تغییر به مرور میتونستن خودشون صاحب نفوذ بشن یا افراد با نفوذ رو به عضویت بگیرن و در این تقابل دست بالاتری پیدا کرده و پیروز بشن. در ادامه روی این چالشهایی که در مسیر تغییرات بزرگ مثل عمومی شدن اینترنت تمرکز میکنیم تا بببینم این تغییرات چطور آغاز شدن، چه چالشهایی رو پشت سر گذاشتن و نهایتا چطور موفق و فراگیر شدن.۲.۱) اولین باری همه از وجود اینترنت با خبر شدناز ۱۹۶۹ که ARPANET خلق شد روی مخفی بودن این شبکه خیلی تاکید میشد. مخصوصا از سمت گروهی از نظامیان و دولتیهای محافظه کار با دلایلی مثل به خطر افتادن امنیت دادههای حساس نظامی و افتادن به دست دشمنان و غیرنظامیها و همچنین احتمال بکارگیری دشمن از این تکنولوژی علیه امریکا با آشکار شدن این شبکه مخالفهایی جدی میشد.یکی از افراد پیگیر آشکار شدن این شبکه، لری رابرتز (Lawrence (Larry) Roberts) پدر ARPANET و معمار کلیدی این شبکه بود که همواره برای قانع کردن مقامات تلاش میکرد و به در بسته میخورد. اون توضیح میداد که با این کار میشه دستاوردهایی کسب کرد مثل اثبات موفقیت پروژه، که از این طریق میشد در جنگ سرد دست بالاتر امریکا رو نشون داد و علاوه بر این میشه از این شبکه برای افزایش سرعت توسعه و انتقال علم در سایر دانشگاهها و رشته نیز استفاده کرد  و در کنارش از این دانشگاهیان برای توسعه سریعتر، بیشتر و بهتر این شبکه کمک گرفت.پس از ۳ سال تلاش نهایتا به کمک جمعی از علاقمندان به آشکارسازی تونستن وزارت وزارت دفاع آمریکا رو راضی کنن و سال ۱۹۷۲ وزارت دفاع آمریکا اجازه داد تا ARPANET در یک همایش عمومی به نمایش گذاشته بشه و به مخالفان که همچنان سر و صدا می کردن تأکید میکرد هیچگونه اطلاعات نظامی یا محرمانهای در این نمایش نیست و اتفاقاً با جذب حوزهٔ غیرنظامی، میشه اکوسیستم قویتری برای توسعه درست کرد.در رویداد International Computer Communication Conference (ICCC) برای اولین بار شبکه ARPANET بهصورت عمومی به نمایش گذاشته شد که طی اون ARPA اتصالات بلادرنگ (real-time) بین بیش از ۳۰ نقطه مختلف از سراسر آمریکا رو نمایش داد.در این رویداد بازدیدکنندهها میتونستن با ترمینالها (Terminal) کار کنن و از راه دور به دادههای دانشگاههای دیگه دسترسی داشته باشن. این لحظه خیلی مهمی هست و میشه این لحظه در سال ۱۹۷۲ رو سال آغازی بر شروع فراگیری اینترنت معرفی کرد که طی اون عموم مردم (خصوصاً محققان و صنعتگران) دیدن چنین چیزی وجود داره و همین زمینه و انگیزهای برای توسعه بیشتر اون شد.۲.۲) جنگ پروتکلهادر سال ۱۹۷۰ وینت سرف (Vint Cerf) و باب کان (Bob Kahn) پروتکل TCP/IP رو طراحی و معرفی کردن (یک سال پس از آغاز به کار ARPANET و پروتکل NCP و دو سال قبل از آشکارسازی) اما مدیران دولتی و فنی اون زمان حاضر نبودن به جای NCP که متمرکز و دولت محور بود از TCP/IP غیرمتمرکز استفاده کنن و در حدود ۱۴ سال هم این تفکر بسته رو موفق شدن که ادامه بدن. اونها این کار رو برای امنیت داده ها مخاطره آمیز میدونستن و شبکه های بسته با نظارت و کنترل کامل رو بهتر میدونستن. البته گروهی از این مخالف ها هم افرادی بودن که با شبکه های متمرکز سنتی حس راحتی میکردن و بشون عادت کرده بودن و این تغییر رو بیهوده میدیدن.در نهایت پس از ۱۳ سال تلاش افرادی مثل پاول باران (Paul Baran) ، وینت سرف (Vint Cerf) و باب کان (Bob Kahn) و محسوستر شدن محدودیتها و مشکلات NCP نهایتا ARPA متقاعد شد تا بجای پروتکل NCP از TCP/IP به عنوان یک استاندارد ارتباطی استفاده کنه که همونطور که قبلا گفتم این شد نقطه آغاز رسمی اینترنت اما هنوز هم اینترنت با این که آشکار شده بود و پروتکلی غیرمتمرکز هم پیدا کرده بود محدود به مصارف نظامی چند دانشگاه و مرکز نظامی بود و بقیه مردم و دانشگاههیان ازش محرورم بودن.پیروزی پروتکل پکت سوئیچینگ TCP/IP با تلاش پاول باران، وینت سرف و باب کان۲.۳) اولین لحظه غیرنظامی شدنبا اتفاق سال ۱۹۷۲ همه فهمیدن که یه همچین چیزی هم هست ولی این لحظه بیشتر حکم نشون ظرف شکلات به یک بچه و بعد محروم کردنش از خوردن رو داشت چون هیچ کس حق نداشت ازش جز در اون مراکز دانشگاهی نظامی خاص استفاده.تا اینکه در سال ۱۹۸۵ NSFNET (National Science Foundation Network) که یک شبکهٔ کامپیوتری  توسط بنیاد ملی علوم امریکا (NSF) ساخته شد که در ابتدا محدود به کشور امریکا و فقط برای اتصال دانشگاهها و مراکز تحقیقاتی بود. در واقع تقاضای سایر رشتهها و دانشگاهها برای دسترسی به اینترنت از یک سمت و کند مشکلات ARPANET از طرف دیگه باعث شد تا بنیاد ملی علوم امریکا برای ایجاد یک شبکه جدا دست به کار بشه.شبکه NSFNETاز روز اول شبکه NSFNET رویای جایگزین شدن با ARPANET رو در سر داشت و تلاش میکرد ولی تا سالها بعد هر دو شبکه در کنار هم فعالیت میکردن یکی برای امور نظامی و دیگری علمی اما همچنان کسی حق نداشت از اینها برای مصارف عمومی و تجاری استفاده کنه.۲.۴) آغاز عمومی و تجاری شدن اینترنتشبکه NSFNET تونست در بین دانشگاهها فراگیر بشه و تا سال ۱۹۹۰ حسابی هم رشد کرد، اما این فراگیری بین دانشگاهها با کلی دانشجو در گرایشهای مختلف مثل اقتصاد، باعث شد تا ایده استفاده عمومی و تجاری اون پرطرفدارتر از قبل بشه. این گروه از یک طرف با افراد دولتی و نظامی که تفکری بسته و امنیتی داشتن درگیر بودن و از طرف دیگر با دانشگاهیان و برخی مقامات دولتی که معتقد بودن این شبکه یک ابزار عملی هست و ابزاری برای پول و تبلیغات و این کار باعث  آلوده شدن این ابزار عملی میشه. از سمت دیگه هم با گروهی که همیشه به انچه هست عادت کردن و اهل تغییر نیستن درگیر بودن، مثل تاجرهایی روشهای سنتی رو کافی میدونستن و چنین تغییری رو برای کسب و کارشون مضر میدونستن.نهایتا پس از سالها تلاش افراد و دانشجویان علاقمند به عمومی شدن و پیگیری شرکتهایی مثل CompuServe و AOL که قصد فروش اینترنت عمومی رو داشتن در تاریخ ۱۹۹۰ طی یک حرکت انقلاب گونه شبکه ARPANET رسماً خاموش شد و انحلال کامل شبکه نظامی اعلام شد و کنترل شبکه به شرکتهای مخابراتی و زیرساختهای غیرنظامی واگذار شد و اینترنت تبدیل شد به یک «زیرساخت جهانی» که قابل خصوصیسازی و تجاریسازی بود و میشه گفت این نقطه رسمی پیدایش اینترنت عمومی هست.شبکه NSFNET با این که اصلا برای عمومی شدن اینترنت تلاش نمیکرد و به نوعی هم مخالف این اتفاق بود، باعث این اتفاق شد البته این اتفاق نهایتا به انحلال خودش ختم شد. در ۱۹۹۵ بخاطر رشد فعالیت شرکتهای زیرساخت شبکه خصوصی مثل MCI، Sprint، AT&amp;T واگذار و به نوعی منحل شد. در واقع تلاشی که برای انحلال رقیب میکرد نهایتا منجر به انحلال خودش شد!۲.۵) تا اینجا فهمیدیم کهدر سال ۱۹۶۰ لیکلایدر ایده اینترنت رو مطرح کرددر سال ۱۹۶۹ شبکه مبتنی بر طرح لیکلایدر به نام ARPANET ایجاد شددر سال ۱۹۷۰ پروتکل TCP/IP توسط پدر اینترنت وینت سرف طراحی شددر سال ۱۹۷۲ شبکه ARPANET برای عموم به نمایش گذاشته شددر سال ۱۹۸۳ شبکه ARPANET پروتکل  TCP/IP رو به عنوان استاندارد معرفی کرددر سال ۱۹۸۵ شبکه NSFNET برای مصارف علمی شروع به کار کرددر سال ۱۹۹۰ همزمان با خاموش شدن ARPANET اینترنت برای مصارف عمومی و تجاری آزاد شدبا دیدن این روند تکاملی شاید بگیم سال ۱۹۹۰ سال خلق اینترنت امروزی هست!! البته در این سال هنوز اینترنت توسط مردم انچنان استفاده نمیشد چون زیرساختها هنوز دولتی بودن و سالها طول کشید شرکتهای خصوصی وارد این حوزه بشن و ابتکار عمل رو دست بگیرن و از اون طرف ابزارها و سرویسهای اینترنت هنوز خیلی پیچیده بودن و نیاز به دانش فنی بالا داشتن. چیزی که اینترنت رو برای مصارف عمومی و تجاری مناسب کرد سرویسی به نام وب و نرم افزاری به نام مرورگر بود.۳) آغاز پیدایش وببرخی به اشتباه تصور میکنن وب و اینترنت یک چیز هستن! بیاین قبل بررسی حاشیههای پیدایش وب، ببینیم به لحاظ ساختاری و مفهومی این دو چی هستن و قبل از وب چه سرویسهایی بکار گرفته میشد.۳.۱) اینترنت چیست؟اوایل ۱۹۷۰ واژههایی مثل &quot;internetworking&quot; استفاده میشد ولی واژهٔ &quot;Internet&quot; که از ترکیب &quot;Interconnected Networks&quot; (شبکههای بههمپیوسته) گرفته شده در مقالهای مشهور توسط Vint Cerf و Bob Kahn (مخترعان TCP/IP) برای اشاره به شبکهای از شبکهها بهکار رفت و زمانی که ARPANET رسماً به TCP/IP مهاجرت کرد، اصطلاح &quot;Internet&quot; بهطور رسمی تثبیت شد. امروزه به یک شبکه عمومی و جهانی از شبکههای کامپیوتری که با استفاده از پروتکل TCP/IP به هم متصلاند و به تبادل داده، خدمات و منابع میپردازند اینترنت میگن ولی اون زمان نه جهانی بود و نه عمومی تا این که سال ۱۹۹۰ محدودیتها برداشته شد و اینترنت با تعریف امروزی تونستن به معنی پیدا کنه.تا پیش از پیدایش وب روی این شبکه امکان دریافت و ارسال ایمیل، انتقال فایل، دسترسی به فایلها و اطلاعات روی سیستمها از راه دور ممکن بود و کاربران (که اکثراً محققان، مهندسان یا دانشجویان بودند) از طریق ترمینالهای متنی به اینترنت وصل میشدن .۳.۱.۱) پروتکل انتقال فایل FTP (File Transfer Protocol) که در سال ۱۹۷۱ توسط ابهی بوشان (Abhay Bhushan) برای انتقال فایل که کاربران برای اپلود و دانلود فایل با اون به سرور متصل میشدن.۴.۱.۲) پروتکل دریافت ایمیل  POP (Post Office Protocol) که اولین بار در ۱۹۸۴ توسط تیمی در دانشگاه کالیفرنیای جنوبی (USC) معرفی شد که طی اون ایمیلها دانلود و بعد از سرور پاک میشن و به نام POP1 شناخته میشه. در سال ۱۹۸۵ نسخه POP2 و در سال ۱۹۸۸ هم نسخه POP3 امروزه هم رایج هست توسعه داده شد. در اصل، این پروتکل طراحی شده بود برای کاربرانی که مدام به اینترنت وصل نبودن (مثلاً با مودم) تا ایمیلها دانلود و سپس از سرور پاک بشن و به نوعی شبیه آنچه در واقعیت بود یعنی دریافت نامه از پستچی طراحی شد.۳.۱.۳) پروتکل دریافت ایمیل  IMAP (Internet Message Access Protocol) که نسخه IMAP1 در سال ۱۹۸۶ توسط مارک کریسپین (Mark Crispin) از دانشگاه استنفورد خلق شد که برخلاف POP، ایمیلها روی سرور باقی میمونن و کلاینت فقط یک کپی از اونها رو میگیره که مناسب برای کار با چندین دستگاه بود. در ۱۹۸۸ نسخه IMAP2 منتشر و بعد در 1991 نسخه IMAP3 طی RFC 1203 مطرح شد ولی هیچوقت به عنوان یک RFC کامل و رسمی تصویب نشد چون خیلی پیچیده بود واسه همین کریسپین تصمیم گرفت تا IMAP رو یک باز طراحی اساسی و جدی کنه که نهایتا ختم شد به انتشار نسخه IMAP4 که امروز هم استفاده میشه.۳.۱.۴) پروتکل ارسال ایمیل SMTP (Simple Mail Transfer Protocol) که در سال ۱۹۸۲ جان پوستل (Jon Postel)  طی RFC 821 اون رو مطرح کرد و به عنوان استاندارد رسمی ارسال ایمیل معرفی شد و امروزه هم از همین پروتکل برای ارسال ایمیل استفاده میشه.یکسری پروتکل دیگه هم بودن که امروزه جایگزین شدن مثل پروتکل Telnet که در اوایل ۱۹۷۰ برای ورود به سیستم از راه دور ایجاد شده بود و چیزی شبیه SSH امروزی بود البته ناامن!در کل هم کار کردن با این پروتکلها تا قبل پیدایش وب و عمومی شدن اینترنت پیچیده، تخصصی و در محیطی غیرگرافیکی انجام میشد تا این که با عمومی شدن از یک سمت و پیدایش وب از سمت دیگه ورق برگشت!۴.۲) وب چیست؟وب یک سرویس اینترنتی هست که توسط  تیم برنرز لی (Timothy John Berners-Lee) خلق شد. اون یک تفاوت عمده و اساسی با بقیه سرویسهای موجود داشت «داشتن رابط کاربری گرافیکی که کار با اینترنت رو خیلی ساده میکرد». وب باعث شد تا اینترنت یک رشد انفجاری در تعداد کاربران رو تجربه و به فراگیری اینترنت در بحث عمومی و تجاری کمک بسیار جدیای کرد.Timothy John Berners-Lee۴.۲.۱) راز موفقیت وبتیم برنرز یک فیزیکدان و مهندس نرمافزار اهل بریتانیا که در CERN (مرکز تحقیقاتی فیزیک ذرات در سوئیس بزرگترین آزمایشگاه فیزیک ذرهای جهان است) کار میکرد. CERN پر بود از دانشمندانی که روی سیستمهای مختلفی کار میکردن و این افراد برای دسترسی به اطلاعات همدیگه باید در محیط ترمینال با پیچیدگی فراوان کار میکردن و برنرز از این وضعیت راضی نبود و اون رو وقتگیر و پیچیده میدونست برای همین روی ایدهای کار کرد که بعدا به نام وب (Web) یا همان WWW (World Wide Web) منتشر شد اما داستان خلق و انتشار وب هم مثل بقیه چیزها پر از پیچیدگی و مخالفت بود!کامپیوتر برنرز لی در CERN که با اون وب رو اختراع کردبرنرز در سال 1989 پیشنهاد خودش با عنوان &quot;Information Management: A Proposal&quot; به مدیرش در CERN داد و مدیرش هم در جواب گفت «جالب، مبهم، اما هیجانانگیز.» و پس از مطرح شدن بین سایر دانشمندان CERN بسیاری از مدیران و مهندسان ارشد CERN این ایده رو «بیش از حد سادهسازیشده» یا «غیرعملی» میدونستن. گروهی که به سیستمهای متنی عادت کرده بودن چنین چیزی رو غیرلازم میدونستن و گروهی هم میگفتن این حد از سادگی جواب نمیده و ارزش وقت صرف کردن نداره! تیم برنرز لی: «مردم فکر میکردن وب خیلی سادهست که جواب بده!»دو چیز باعث پیروزی وب شد. اولی این که برنرز لی همیشه تأکید داشت وب باید باز، رایگان و بدون مالکیت تجاری بمونه و این تصمیمی کلیدی بود چون سرویس Gopher از دانشگاه مینهسوتا که به نوعی رقیب وب در اون زمان بود اعلام کرد در آینده ممکنه مشمول هزینه بشه و رایگان بودن وب یک مزیت کلیدی به حساب میامد و همین باعث شد که توسعهدهندگان بهسمت گزینهای رایگان یعنی وب برن . دومین عامل سادگی در استفاده بود. در ایده وب اون یک رابط کاربری گرافیکی که میشه روی لینکها کلیک کرد و به راحتی بین مستندات جابهجا شد جایگزین یادگیری و تایپ کلی دستور برای دسترسی به اطلاعات شده بود و این کار رو برای افرادی با دانش فنی کمتر رو هم ممکن میکرد.۴.۲.۲) در اعماق وببیاین با هم بریم سراغ جزئیات اولین نسخه وب که تیم برنرز لی به نوعی با اختراع اونها وب رو اختراع کرد. اولین جزء پروتکل HTTP (Hypertext Transfer Protocol) بود که از اون برای انتقال اطلاعات وب در بستر اینترنت استفاده میشد. جزء دوم HTML (HyperText Markup Language) یک زبان نشانهگذاری برای ساخت صفحات وب بود. جزء سوم URL (Uniform Resource Locator) بود که یک روش آدرسدهی استاندارد برای صفحات و منابع بود. جزء چهارم مرورگر WorldWideWeb بود که میتونست این صفحات رو به شکل گرافیکی نمایش بده. جزء پنج و اخر هم یک وب سرور بود به نام httpd که مثل مرورگرش فقط روی کامپیوتر NeXT (ساخت شرکت NeXT متعلق به استیو جابز) با سیستم عامل NeXTSTEP اجرا میشد. WorldWideWeb NeXT Applicationدر واقع وقتی در مورد اختراع وب توسط تیم برنرز حرف میزنیم منظور اختراع همه اینها هست! برنرز ایده سرویس اینترنتی وب رو اولین بار در سال ۱۹۸۹ مطرح کرد و حدود ۲ سال طول کشید (سال ۱۹۹۱) تا اولین نسخه از وب رو توسعه بده. جالبه بدونید که همون کامپیوتر NeXT اصلی Tim Berners-Lee هنوز در CERN با همون برچسب معروف روش (!!This machine is a server. DO NOT POWER IT DOWN) نگهداری میشه. کامپیوتری که اولین وب سرور جهان بود۴.۳) تکنولوژیهای اولیه وببیاید با هم عمیقتر اولین نسخههای اجزاء وب رو بررسی کنیم.۴.۳.۱) اختراع HTTPپروتکلی که بشه با اون کار انتقال دادهها رو انجام داد یکی از اساسیترین نیازهای ایده وب بود برای همین برنرز HTTP رو خلق کرد.این پروتکل با پروتکل HTTP/2 و HTTP/3 که الان ازش استفاده میکنیم خیلی متفاوت بود از این جهت که خیلی خیلی ساده بود! هیچ هدری (Header) نداشت (نه در درخواست، نه در پاسخ) هیچ کد وضعیتی (مثل 404 یا 200) نداشت و فقط از متد GET پشتیبانی میکرد و فقط فایلهای متنی HTML رو منتقل میکرد (نه تصویر، نه صوت، نه CSS) بدون هیچ رمزنگاریای! الهام گرفتن: اون از FTP ایدهٔ &quot;درخواست فایل از سرور&quot; رو برداشت و خیلی سادهتر کرد چون نمیخواست کاربران نیاز به ورود (login) یا دستورات پیچیده داشته باشن. تقریبا همزمان با این تلاش برنرز هم Gopher پروتکلی که بهصورت منویی محتوا رو نمایش میداد رو ارائه کرده بود که نه لینک داشت و نه ساختار فرامتنی (ساختاری که علاوه بر متن اصلی محتوا اطلاعات جانبی و جزئیات نمایش مثل برجسته شدن متن هم داشته باشه)، فقط یکسری منو بود که میشد بین اونها چرخید و مستندات متنی رو مشاهده کرد اما همین ساختار هم برای برنرز در خلق پروتکل HTTP الهام بخش بود. علاوه بر این برنرز دوست داشت پروتکلش قابلاستفاده با telnet هم باشه. یعنی بشه مستقیماً به پورت 80 وصل شد و دستی دستور GET / رو تایپ کرد.سیر خلق تا تکامل HTTPنهایتا برنرز در سال ۱۹۹۰ اولین نسخه HTTP یعنی HTTP/0.9 رو برای ایده وب خودش خلق کرد. حدود ۶ سال بعد (۱۹۹۶) هم نسخهٔ HTTP/1.0 بهصورت رسمی منتشر شد، اما نه مستقیماً توسط برنرز. در واقع، تا اون زمان جامعهٔ توسعه وب و اینترنت گسترش زیادی پیدا کرده بود، و توسعهٔ HTTP از حالت فردی خارج شده بود و اون بیشتر نقش مشاور و راهنما رو داشت و در ادامه نسخههای HTTP/1.1  در سال ۱۹۹۷ و HTTP/2 در سال ۲۰۱۵ و نهایتا اخرین نسخه یعنی HTTP/3 در سال 2019 منتشر شد.۴.۳.۲) اختراع  URLتیم برنرز از مسیر فایلها در سیستمعاملها (home/user/docs/file.txt/) و همچنین پروتکلهای دیگری که در اون زمان رایج بود مثل (ftp://ftp.site.com/file.txt) FTP و Telnet (telnet://login.site.com)  الهام گرفت و چیزی شبیه به اونها رو تحت عنوان URL برای ایده وب خودش پیاده سازی کرد تا با اون بتونه صفحات وب که یکسری فایل HTML بودن رو آدرس دهی کنه.شاید فکر کنید که این کجاش اختراع هست! در حقیقت چیزی که برنرز با URL اختراع کرد تعریف و مفهومی چند پروتکلی، چند استفادهای و همچنین تعریف هر بخشهای این ساختار آدرسدهی بود. اون چنین ساختاری رو معرفی کرد:scheme://host:port/path?query#fragmentدر واقع اون میخواست تا همهٔ منابع، چه یک صفحه وب باشه چه تصویر یا حتی فایل متنی، ساختار آدرسدهی مشابهی داشته باشن تا مرورگر بدونه با دیدن اول آدرس، باید از چه پروتکلی استفاده کنه و با تفسیر هر بخش آدرس بدونه که چطور باید رفتار کنه. در واقع اون مخترع مفهوم آدرس دهی منطعف بود.البته در سالهای خلق وب (۱۹۸۹ تا ۱۹۹۰) اون خیلی پیگیر ثبت این موضوع نبود و مدتها بعد از این که در IETF (Internet Engineering Task Force) اولین تعریف رسمی URL در کنار مستندات اولیه HTTP و HTML اومد برنرز و تیمش در قالب RFC 1738 در دسامبر 1994 اون رو رسماً ثبت کردند.۴.۳.۳) اختراع وب سرور httpdاو اولین نرمافزار وبسرور دنیا بهنام httpd (مخفف &quot;HTTP Daemon&quot;) رو از صفر خودش نوشت که وظیفه اون گوش دادن روی پورت (معمولاً پورت 80) دریافت درخواست GET (فقط این نوع در نسخه HTTP/0.9 پشتیبانی میشد) پیدا کردن فایل HTML خواستهشده در سیستم ارسال محتوای فایل به مرورگر کاربر بود. سرور httpd روی دایرکتوریهایی از فایلهای متنی (HTML) کار میکرد و اونا رو براساس URL به کاربران تحویل میداد.تیم برنرز کد httpd و مرورگری که نوشته بود رو به صورت متنباز منتشر کرد و باعث شد افراد زیادی (از جمله Nicola Pellow) به اون کمک کنن تا این نرمافزارها که فقط روی کامپیوتر NeXT کار میکردن به پلتفرمهای دیگه هم منتقل بشن. بعدها پروژههایی مثل Apache HTTP Server (سال ۱۹۹۵) بر اساس همین مدل ساخته شدن.۴.۳.۴) اختراع اولین مرورگر وب مرورگر WorldWideWeb یک نرمافزار ساده بود که ظاهر گرافیکی بسیار سادهای داشت، منوی بالا برای «Open from full document reference» بود که در واقع محل درج URL بود که با اون به کمک وب سرور یک فایل HTML داخلی رو دریافت و نمایش میداد، یک نوار وضعیت در پایین صفحه بود و متن اصلی با لینکهای آبیرنگ هم در وسط نمایش داده می شد. علاوه بر اینها یکسری تنظیمات ظاهری هم داشت و از همه مهمتر این مرورگر اولین ویرایشگر WYSIWYG برای HTML هم محسوب میشد. این مرورگر قابلیت نمایش چند پنجرهای هم داشت که هر صفحه در یک پنجره جدا باز و به نمایش گذاشته میشد. WorldWideWeb browserچون اسم WorldWideWeb با کل سیستم وب اشتباه گرفته میشد، تیم برنرز بعدها نام نرمافزار رو به Nexus تغییر داد تا تمایز داشته باشه. در اواخر 1991، کدش به صورت رایگان منتشر شد، ولی چون فقط روی NeXT کار میکرد، توسعهدهندگان دیگر مرورگرهای سادهتری مثل Line Mode Browser و ViolaWWW رو ساختند که در سیستمعاملهای مختلف اجرا میشدن.۴.۳.۵) اولین مرورگر محبوبمرورگر Mosaic یکی از مهمترین نقاط عطف در تاریخ وب بود، مرورگری که عملاً باعث انفجار عمومی اینترنت در اوایل دهه ۹۰ میلادی شد. برخلاف مرورگرهای اولیه که محدود و تخصصی بودن، Mosaic تجربهای گرافیکی به مراتب ساده و در دسترستری برای همه فراهم کرد. این مرورگر در سال ۱۹۹۳ توسط Marc Andreessen و Eric Bina   خلق شد و در NCSA (National Center for Supercomputing Applications) در دانشگاه ایلینوی توسعه داده شد.مرورگر موزائیک اینها یکسری از علتهایی بود که باعث شد چنین محبوبیت و فراگیریای رخ بده.رابط کاربری گرافیکی کامل (GUI): از گرافیک، فونتهای مختلف، تصویر درونمتن (inline image)، رنگ و آیکون پشتیبانی میکرد برخلاف مرورگرهای قبلی که فقط متن و لینکهای آبی نشون میدادن.چند پلتفرمه: برای ویندوز، مک و یونیکس منتشر شد برعکس مرورگرهای اولیه مثل WorldWideWeb که فقط روی NeXT اجرا میشدن.نصب آسان: برای عموم کاربران طراحی شده بود، بدون نیاز به مهارت فنی زیاد.پشتیبانی از چند پروتکل: HTTP، FTP، NNTP و حتی فایلهای محلیمرورگر NCSA Mosaic رایگان بود، اما به دلیل محدودیتهای دولتی، نمیتونست تجاری بشه. این باعث شد Marc Andreessen از NCSA جدا بشه و شرکت Netscape Communications رو تأسیس کنه. Netscape Navigator همون تجربه Mosaic رو تجاریسازی کرد و بین 1994 تا 1998 بیشترین سهم بازار رو داشت. مایکروسافت اینترنت اکسپلوررمایکروسافت در ابتدای سال ۱۹۹۵ ورژن یک مرورگر Internet Explorer خودش رو بر پایه مرورگر Spyglass Mosaic توسعه داد که نسخهای بسیار ساده بود و فقط روی Windows 95 اجرا میشد و در قالب Microsoft Plus و بخشی از بسته مکمل Windows 95 ارائه شد. این مرورگر فقط قابلیتهای پایه مرور وب (HTML 2.0) را داشت و هیچ پشتیبانی از JavaScript، CSS نمیکرد یا حتی بوک مارک های درست حسابی هم نداشت.اولین نسخه IE که به دلیل عدم پشتیبانی از CSS به جای اعمال استایلها، اونها رو نشون میداد!در پایان همان سال (۱۹۹۵) مایکروسافت نسخه ۲ این مرورگر رو توسعه داد که در این نسخه پشتیبانی اولیه از JavaScript و SSL اضافه شد. سال بعد با توسعه نسخه ۳ و افزودن پشتیبانی از CSS رسما وارد رقابت جدی با Netscape شد و جنگ مرورگرها آغاز شد. جنگ مرورگرهادر سال ۱۹۹۶ این جنگ شروع شد و باعث شد Netscape در ۱۹۹۸ شکست بخوره ولی ده سال طول کشید تا این شکست رو قبول کنه و متوقف بشه.سهم بازار مرورگرها بین سالهای ۱۹۹۵ تا ۲۰۱۰نت اسکیپ از یک طرف بخاطر انحصاری که مایکروسافت با نصب پیش فرض IE در ویندوز ایجاد کرده بود و از طرف دیگه بخاطر رقابت دیوانهورا باعث شده بود تا Netscape 4 پر از باگ بشه تا حدی که تصمیم به بازنویسی کامل موتور مرورگر گرفته شد اما چون توسعه این نسخه خیلی طول کشید Netscape بازار رو از دست داد. البته عامل سومی هم بود! در سال ۱۹۹۸  جسم رنجور Netscape به AOL که شرکت تجاری بود فروخته شد و این شرکت روی پولسازی تمرکز کرده بود و نه نوآوری که باعث شد خیلی از توسعهدهندهها و مهندسا ناامید شدن و پروژه رو رها کردن.در همان سال ۱۹۹۸ شرکت AOL فهمید پروژه Netscape عملاً دیگه قابل نجات نیست برای همین کد مرورگرش رو Open Source کرد و مرورگر Mozilla بر اساس اون متولد شد.موزیلا سوئیتموزیلا یک مجموعهی نرمافزاری بزرگ شامل مرورگر، ایمیل، و ابزارهای دیگه بود که حجم زیاد، UI پیچیده، و سرعت پایین باعث شد محبوب نشه.اولین نسخههای مرورگر موزیلا که بر پایه کد اپن سورس نت اسکیپت توسعه داده شده بوداز سال ۱۹۹۸ تا ۲۰۰۰ آرام آرام مرورگر Internet Explorer یکه تاز بازار شد و ۹۵٪ بازار رو در اختیار گرفت. این انحصار و نبود رقیب جدی انگیزه توسعه و رشد رو از مایکروسافت گرفت و از سال ۲۰۰۰  تا ۲۰۰۴ هیچ نسخه جدیدی منتشر نشد و همین باعث نوعی بیانگیزگی و کندی فرایند توسعه HTML در W3C شده بود.موزیلا فایرفاکس در سال ۲۰۰۲ در میانه این سکوت و بیانگیزگی، تعدادی از توسعهدهندگان Mozilla تصمیم گرفتن از صفر یک مرورگر سبک، سریع  بسازن و تنها و تنها یک مرورگر بسازن!اولین نسخه مرورگر فایرفاکس که در ابتدا ققنوس نامگذاری شده بوداین فرایند دو سال طول کشید. در ابتدا اسمش رو Phoenix گذاشتن ولی به مشکل قانونی خوردن و به Firebird تغییر دادن ولی در نهایت با نام Firefox نسخه یک رو در سال ۲۰۰۴ عرضه کردن. به دلیل مزایایی مثل سرعت و امنیت بالا، تجربه کاربری بهتر با تبگردی و پشتیبانی کامل از استانداردها به سرعت محبوب شد.اپل سافاری موازی اونها در سال ۲۰۰۳ اپل با موتور KHTML (Konqueror) برای macOS مرورگر سافاری رو معرفی کرد که بعداً این موتور به WebKit تبدیل شد و که موتور سافاری فعلی هست.اولین سافاریهدف اپل نجات وب نبود بلکه اهداف مالی داشت و دنبال این بود تا از اون انحصار خاص خودش رو مثل مایکروسافت خلق کنه برای همین نتونست مثل فایرفاکس یک رشد انفجاری و محبوبیت فراگیر رو تجربه کنه. با این که مایکروسافت در نهایت در مقابل گوگل کروم و فایرفاکس شکست خورد IE رو متوقف کرد ولی اپل همچنان مشابه همون رفتار رو داره دنبال میکنه و سافاری همچنان یکی از کابوسهای دنیای توسعه وب هست و در اون باگهای عجیب و غریب رخ میده، بسیار کند و گاه ناقص با استانداردها هماهنگ میشه و با ایجاد ویژگیهای اختصاصی در دستگاههای اپل سعی میکنه این انحصار رو حفظ کنه.گوگل کرومگوگل مرورگر خودش رو در سال ۲۰۰۸ با موتور WebKit اپل منتشر کرد. این مرورگر خیلی سریع، با رابط کاربری ساده، DevTools عالی، و امنیت بالا و البته قدرت تبلیغاتیای که گوگل داشت تونست سهم بازار خیلی خوبی رو بگیره.اولین نسخه گوگل کرومبعدها WebKit رو Fork کرد و موتور جدیدی به نام Blink ساخت که امروزه هم استفاده میشه. یکی از مزیتهای رقابتی جدی کروم موتور جاوااسکریپت بسیار سریع V8 بود. سافاری و فایرفاکس در مورد تبدیل HTML و CSS به رابط گرافیکی (DOM، Layout، Paint...) خوب بودن ولی در موتور پردازش جاوااسکریپت بسیار کند بودن در نتیجه گوگل تصمیم گرفت از صفر یک موتور با تکنیکهایی مثل JIT Compilation (کامپایل در زمان اجرا) بنویسه که باعث اجرا سریعتر وب اپلیکیشنها شد که بعدا با این موتور NodeJS خلق شد و انقلابی در وب و مخصوصا توسعه Front-End ایجاد کرد.   https://virgool.io/avalamoozesh/%D8%AC%D8%A7%D9%88%D8%A7-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-%D8%A8%D8%A7%D8%B4%DB%8C%D9%85-tk3tgrljg1gn ۵) اختراع HTMLبرنرز HTML رو با ساده سازی SGML خلق کرد، SGML هم بر اساس GML خلق شده بود!5.1) زبان نشانه گذاری تعمیمیافته GMLزبان GML (Generalized Markup Language) در سال ۱۹۶۹ در IBM خلق شد. یک سیستم نشانهگذاری برای اسناد بزرگ (مثل اسناد حقوقی، علمی) بود که هم قابل خواندن برای انسان باشه، هم برای ماشین و از برچسبهایی استفاده میکرد که معنای منطقی داشتند، نه صرفاً ظاهر بصری (مثلاً :section یا :para). یک مستند که با GML نوشته شده5.2) زبان نشانه گذاری تعمیمیافته استاندارد SGMLزبان SGML (Standard Generalized Markup Language) در سال ۱۹۸۶ توسط همون فردی که GML رو در IBM خلق کرده بود یعنی Charles Goldfarb خلق شد و توسط سازمان بینالمللی استاندارد طی ISO 8879 تایید شد. نمونه یک مستند SGMLهدف این زبان نشانه گذاری تعریف یک چارچوب عمومی برای ساخت زبانهای نشانهگذاری خاصمنظوره بود. SGML بسیار انعطافپذیر بود ولی پیچیده که قابلیت تعریف DTD (Document Type Definition) جدید طبق خواستههای اون زبان رو هم داشت. در واقع SGML یک قالب و چهارچوب بود برای ساخت زبانهای جدید بود و تقریبا خودش مستقیم برای تولید محتوا استفاده نمیشد.E-Comic XML زبان DTD برنرز هم برای ایده وب خودش از SGML کمک گرفت ولی از مدتی کوتاهی اون رو مناسب وب ندونست چون معقتد بود وب یک ایده برای سادهسازی هست و SGML خیلی پیچیده و سنگین هست پس دست به کار شد و پس از ساده سازی زیاد و البته افزودن ویژگیهای جدیدی لینک (تگ &lt;a&gt;) اولین زبان وب رو خلق کرد و اسمش رو HTML(Hypertext Markup Language) گذاشت. نسخه HTML بدون DTD بود و اولین نسخه HTML که رسماً دارای DTD شد، HTML 2.0 بود که سال 1995 منتشر شد که توسط HTML Working Group یکی از زیر کارگروههای W3C توسعه داده شده بود. برنرز بخاطر این سادهسازیهای زیادی که انجام میداد اغلب مورد نقد متخصصان این حوزه قرار داشت و اونها معتقد بودن این سادهسازیها اخر به شکست اون منجر خواهد شد ولی از قدیم گفتن &quot;جوجه رو اخر پاییز میشمارن&quot; و این سادهسازیهای زیاد در نهایت یکی از دلایلی شد که باعث شد تا ایده وب برنرز موفق بشه.۵.۳) جنگ مرورگرها و تاسیس W3Cپس از موفقیت وب اولیه (1991–1993)، شرکتهای مختلف شروع کردن به توسعه نسخههای HTML اختصاصی و مرورگرهای خودشون و این روند باعث یک ناهماهنگی بزرگ شد، تا جایی که اغلب صفحات وب در مرورگرهای مختلف متفاوت نمایش داده میشد و پر از اشکالات جدی بود و توسعهدهندهها رو سردرگم کرده بود. این برای آینده وب موضوع خطرناکی شده بود  برای همین برنرز و جمعی از همکارانش W3C (World Wide Web Consortium) رو در سال ۱۹۹۴ تأسیس کردن.تصویر تیم برنرز لی در یکی از کنفرانسهای W3C با شعار معروفش &quot;one Web for All&quot;کنسرسیوم W3C یک اتحادیه جهانی از سازمانها، دانشگاهها، و شرکتهای فناوری هست که با هم همکاری میکردن تا استانداردهای وب (مانند HTML، CSS، XML، ARIA و ...) رو توسعه بدن و این اتحادیه همچنان مرجع توسعه و انتشار رسمی استانداردهای بخشهای مهمی از وب هست و در سراسر جهان دفاتر فعال داره.برنرز به کمک W3C در بین سالهای ۱۹۹۵ تا ۲۰۰۰ تلاش کرد تا ویژگی و ساختارهای صفحات وب رو یکسان و توسعه دهندهها رو متحد کنه ولی شرکتها اغلب اهمیت نمیدادن، گزینشی و سلیقهای استانداردها رو اعمال میکردن و هر شرکت سعی میکرد با توسعه قابلیتهای اختصاصی خودش با دیگر شرکتها رقابت کنه تا سهم بازار بیشتری رو به دست بیاره و به نوعی W3C خیلی نتونست این آشوب رو کنترل کنه و شلعه جنگ مرورگرها هر روز شعلهورتر میشد و ایده &quot;یک وب برای همه&quot; و &quot;یک بار کد بنویس و همجا استفاده کن&quot; تقریبا بیمعنی شده بود چون کاربران تجربه یکسانی از وب نداشتن!مثلا box model در CSS بین IE و دیگران متفاوت بود، تگهای اختصاصی مثل &lt;blink&gt; در Netscape یا document.all در IE تعریف شده بود و جاوااسکریپت در هر مرورگر با روشهای متفاوتی اجرا میشد مثلا IE از innerText استفاده میکرد و بقیه textContext و این باعث میشد توسعهدهندگان مجبور باشن کدها رو برای هر مرورگر جداگانه بنویسن یا هکهای اختصاصی بزنن که باعث شد اصطلاحی شکل بگیره به نام &quot;quirks mode&quot; یا حالت ناسازگار که رفتار عجیب مرورگرهای قدیمی مثل Internet Explorer 5/6 رو تقلید میکنه.در بین سالهای ۲۰۰۰ تا ۲۰۰۴ هم که رسما IE یکتاز انحصاری بازار مرورگرها با سهم بازار ۹۵٪ شده بود و باعث بیانگیزگی و کند توسعه HTML د W3C شده بود البته به نظرم بیشتر افسرده و خشمگین بود تا منعل!۵.۴) پیدایش XHTMLدر سال ۲۰۰۰ W3C در پاسخ به آشفتگی HTML، تصمیم گرفت بره سراغ نظم با ساختاری سختگیرانهتر و این شد که نسخه XHTML 1.0 رو توسعه داد.نمونهای از ساختار XHTMLتا قبل از این 3 بار نسخههایی رسمی برای HTML توسعه و معرفی کرده بود. نسخه HTML 2.0 در سال ۱۹۹۵، نسخه HTML 3.2 در سال ۱۹۹۷ و نسخه HTML 4.01 در سال ۱۹۹۹ اما در سال ۲۰۰۰ تصمیم گرفت تا دیگه HTML رو توسعه نده و به جای اون XHTML رو که قوانین سخت XML رو همراه داشت رو توسعه بده. این نسخه برخلاف HTML بسیار ساختارمند و قانونمند بود به طوری که اگر یک تگ رو اشتباه مینوشتید کل صفحه اجرا نمیشد و این کار رو برای افراد عادی بسیار سخت میکرد و باعث شد خیلی از توسعهدهندهها و شرکتها از این روند ناامید بشن!۵.۵) تاسیس WHATWG همزمان با انتشار فایرفاکس در سال ۲۰۰۴ گروهی از مهندس از مرورگرسازهای اصلی (Apple، Mozilla، Opera) که وضعیت موجود ناراضی بودن با این توضیح که «W3C توسعه HTML را رها کرده و XHTML بیش از حد سختگیرانه است و ما HTML را برمیگردانیم و بهبود میدهیم» یک گروه کاری تاسیس کردن. این کار گروه با ۳ هدف اصلی شروع به کار کرد: زندهنگه داشتن HTML سنتی (نه XHTML)سازگاری با مرورگرها، نه با قوانین خشکتوسعهٔ سریعتر و انعطافپذیرترخودمون HTML رو زنده میکنیم، نه با قوانین خشک، بلکه با تکیه بر نیاز واقعی توسعهدهندهها و کاربران. ما نیاز به یک استاندارد داریم که کار کنه، نه فقط درست باشه روی کاغذ و با هر اشتباهی استفاده کاربر رو محدود کنه.این گروه سال بعد (۲۰۰۵) اولین نسخه خودشون رو که نسخه ارتقا یافته همون HTML قدیمی بود با نام HTML5 منتشر کردن و عملا از این سال به بعد دو استاندارد داشتیم که یکی توسط W3C و دیگری توسط WHATWG توسعه داده میشد.از بین این مهندسان میشه به ایان هیکسون Ian Hickson (که بهش Hixie هم میگن) اشاره کرد. WHATWG برخلاف W3C، نسخههای شمارهدار (HTML5, 5.1, 5.2) منتشر نمیکنه و تنها یک نسخه &quot;زنده&quot; داره که دائم بهروز میشه. Hixie نقش کلیدی در تدوین HTML5 داشت و سالها &quot;ویرایشگر زنده&quot; HTML در WHATWG بود.ایان هیکسونبه طور کلی این دو چنین تفاوتهایی با هم دارن:نوع سازمان: WHATWG غیررسمی، کوچک، مشارکتی و W3C کنسرسیوم رسمی بینالمللینحوه توسعه: WHATWG دائمی و زنده (Living Standards) و W3C مرحلهای (WD → CR → REC)مشارکتکنندگان: WHATWG توسعهدهندگان مرورگرها و W3C شرکتها، دانشگاهها، دولتهاتصمیمگیری: WHATWG سریع و عملیاتی و W3C بوروکراتیک و کندترتمرکز: WHATWG روی HTML، DOM، APIهای اصلی وب و W3C گستردهتر (HTML، CSS، دسترسپذیری، امنیت و ...)5.6) از حواشی نسخه HTML5 تا توافقاز 2008 گروه WHATWG تصمیم گرفت دیگه ورژن جدید تولید نکنه و HTML یا بهتره بگیم اون چیزی که به عنوان HTML5 معرفی کرده بودن رو مدام و به صورت زنده اپدیت کنن مثل یک درخت که هر سال رشد میکنه و بزرگتر میشه و شاخههای اضافی هم برای باروری  بهتر هرس میشن. سه عامل باعث شد تا نسخه WHATWG مورد پسندتر از نسخه W3C بشه. اول نبود قوانین سختگیرانهای مثل XHTML، دوم همین ایده و مفهوم نسخه زنده که باعث میشد توسعه دهندهها با اون راحتتر باشن و سوم نفوذی که مرورگرهای مورد توسعه مهندسان WHATWG داشتن.این اتفاق باعث شد تا در سال ۲۰۱۴ W3C بیخیال XHTML بشه و محتوای مستندات WHATWG رو بگیره و یک نسخه مشابه HTML رو با اسم HTML5 البته طبق فرآیند رسمی استانداردسازی خودش (WD → CR → REC) پیاده سازی کنه.این اتفاق هم به جهت مجبوبیت و کارایی بهتر نسخه WHATWG بود و هم تلاشی بود از سمت W3C تا WHATWG رو به نوعی راضی به انحلال کنه تا دوباره مرجعیت توسعه HTML به خودش برگرده و نقش کمرنگ شده خودش رو بتونه احیا کنه اما WHATWG معتقد بود صرف انتشار نسخه بر اساس HTML5 اونها همه مشکل نیست و سایر جزئیات مثل ساختار بوروکراتیک W3C و فرایند رسمی و کند توسعه و انتشار خودش یک چالش جدی هست و W3C حاضر نبود تا چارچوب خشک سازمانی خودش رو هم مانند WHATWG منعطف کنه.این موضوع باعث شد بعد مدتی دوباره ۲ نسخه و خط موازی برای HTML پیش بیاد. W3C بعداً نسخههای 5.1 و 5.2 رو هم در سالهای 2016 و 2017  منتشر کرد و مشکل به لحاظ مفهومی پیچیدهتر هم شد. دو نسخه متفاوت (البته با پایه یکسان) که هر دو اسمشون HTML5 بود!این درگیری ادامه داشت و مرورگرهای مشهور و پر استفاده که اغلب تحت توسعه مهندسان WHATWG بودن نسخه WHATWG رو خیلی عملیتر و کاربردیتر پیش میبردن این رسما باعث بیتوجهی جامعه توسعه دهندههای وب به نسخه W3C شده بود تا این که در سال ۲۰۱۹ در نهایت W3C تسلیم شد و طی توافقنامهای از توسعه HTML دست کشید.به طور خلاصه طی این توافق گفته شد این پس، فقط نسخه HTML Living Standard WHATWG معتبر است و W3C دیگر نسخهٔ مستقلی از HTML منتشر نخواهد کرد و در این موضوع دخالت مستقیم و تصمیمگیریای نخواهد داشت. W3C فقط نسخهٔ snapshot (یک رونوشت از آنچه WHATWG توسعه داده) رو برای اعلام به عنوان رفرنس قانونی و رسمی منتشر خواهد کرد.اخرین تغییرات و استاندارد زنده HTML را میتوان از اینجا (https://html.spec.whatwg.org) دنبال کنید که در اینجا (https://github.com/whatwg/html) نگهداری و توسعه داده میشه.۶) فراگیری و پایداری وب و اینترنتالبته وب از سال 1993 که تیم NCSA (National Center for Supercomputing Applications) تکنولوژی CGI (Common Gateway Interface) رو خلق کرد از حالت استاتیک که فقط یکسری فایل استاتیک HTML لود میشد خارج شد و این اختلافات که تا اینجا توضیح دادیم بیشتر در لایه سمت کاربر یعنی مرورگر و Front-End بود و در Back-End به مراتب شرایط بهتر بود. تکنولوژی CGI به سرورها امکان میداد درخواستها را به برنامههای اجرایی (مثل اسکریپتهای Perl یا C) بدهند. این اسکریپتها میتوانستند ورودی از کاربر بگیرند، پردازش کنند، و HTML تولید کنند و اولین وباپلیکیشنها با این روش ساخته شدند و آن چیزی که به اون میگیم Back-End وب از این نقطه آغاز شد.اولین قدم برای آرام گرفتن آشوب لایه FrontEnd که از سال ۱۹۹۱ آغاز شده بود در سال ۲۰۱۴ با کنار گذاشته شدن XHTML و انتشار HTML5 براساس مستندات WHATWG توسط W3C برداشته شد. علاوه بر این در حوالی سال ۲۰۱۴ و ۲۰۱۵ شرکتها و توسعهدهندههای مرورگر بسیار بیشتر از قبل به یکسان شدن استانداردها و کنار گذاشتن روحیه رقبات با تولید ویژگیهای انحصاری تمایل پیدا کرده بودن و این زمینه فکری باعث شد اختلافات نمایشی در مرورگرها به مرور کاهش پیدا کنه تا این که در سال ۲۰۱۹ اون توافق تاریخی WHATWG و W3C رخ داد و پیش رفتن بر اساس استانداردها بالاخره در سال ۲۰۲۰ بعد از حدود ۲۰ سال مورد پذیرش اکثریت بازار قرار گرفت.البته هنوز هم مرورگرها در توسعه استانداردهای جدید اختلافات جزئی دارن مثلا الان سر فرمتهای (WebM, H.264) صوت و ویدیو هنوز اختلاف دارن یا Safari هنوز Web Components رو به طور کامل ساپورت نمیکنه ولی میشه گفت در موارد بنیادی، پرکاربرد و اصلی همه براساس استانداردهای W3C رفتار میکنه و بالاخره ایده &quot;یک وب برای همه&quot; و &quot;یک بار کد بنویس و همجا استفاده کن&quot; تونست محقق بشه.۶.۱) پنجاه سال، از ایده تا اوجدر این حدود ۵۰ سال یعنی از سال ۱۹۶۹ که لیکلایدر طرح اولیه اینترنت رو مطرح کرد تا ۲۰۱۹ مرجعیت توسعه و انتشار استاندارد به توافق رسیدن و وب به آرامش و همگیری امروزی خودش رسید هزاران نفر تلاش کردن و همیشه در سر راه هر تغییری گروهی مخالف ایستادن و سنگاندازی کردن ولی در آخر آنچه باید میشد، شد!در ابتدا میخواستم خودم بیام و شکست و موفقیتها، تلاش و ایستادگیها، تفکرات باز و بسته و .... رو بررسی و مرور کنم ولی به نظرم این مطلب هر بخشش باید جدا خونده و روش فکر بشه و هر کس بهتره خودش به تجربههایی که پشت این اتفاقات هست فکر کنه.به بلندای خود این مطلب، درسهایی تاریخی از جنبه فنی، روانشناسی و اقتصاد وجود داره و پیشنهاد میکنم ساده و سطحی از روی اینها نگذرید چون مشابه اونها هنوزم که هنوزه اتفاق میافته و تاریخ خودش رو تکرار میکنه!</description>
                <category>محمد ابراهیمی اول</category>
                <author>محمد ابراهیمی اول</author>
                <pubDate>Mon, 12 May 2025 12:59:47 +0330</pubDate>
            </item>
                    <item>
                <title>بهبود Performance فرانت‌اند با FOIT، FOUT و CLS</title>
                <link>https://virgool.io/@ebrahimiaval/%D8%A8%D9%87%D8%A8%D9%88%D8%AF-performance-%D9%81%D8%B1%D8%A7%D9%86%D8%AA-%D8%A7%D9%86%D8%AF-%D8%A8%D8%A7-foit-fout-%D9%88-cls-efaz4swqonxy</link>
                <description>گوگل مجموعه‌ای از شاخص‌ها رو برای اندازه گیری کیفیت UX/UI، سرعت بارگذاری، میزان ثبات بصری و ... رو تحت عنوان Core Web Vitals معرفی کرده که یکی از این شاخص‌های CLS هست، مخفف cumulative layout shift.این شاخص میزان پایداری و ثبات صفحه رو نشون میده و می‌تونید در پنجره performance در developer tools مرورگر chrome اون رو بررسی کنید. یکی از عاملی که روی اون تاثیر جدی میذاره بحث لود شدن فونت‌ها هست که در این مطلب می‌خوایم با هم اون رو بشناسیم و راهکارهای بهبودش رو درک کنیم.شاخص CLS حرکت‌های غیرمنتظره، مثل ظاهر و جابه‌جا شدن یهویی المانهای صفحه (شیفت و فلش خوردن) رو اندازه گیری‌ می‌کنه اونم با توجه به این که این تغییرات چقدر از پنجره در حال نمایش به کاربر رو تحت تاثیر قرار و اگر در پنجره نیستن چقدر از پنجره دور هستن.شاخص CLS از دو پارامتر تشکیل شده و عدد حاصل از این دو در هم ضرب میشه و مقدار CLS رو میسازه. در پارامتر impact fraction (IF) این بررسی میشه که چقدر از سطح viewport (پنجره در حال نمایش به کاربر) تحت تاثیر این تغییرات غیرمنتظره قرار گرفته و در پارامتر بعدی یعنی distance fraction (DF) هم این اندازه گیری میشه که فاصله اون تغییرات رخ داده تا viewport چقدر هست. طبیعتا هر چه سطحی کمتری از صفحه درگیری این تغییرات بشه و هر چه از محل در حال نمایش به کاربر دورتر باشه تاثیر  کمتری بر تجربه کاربر میذاره پس CLS بهتری خواهیم داشت. CLS (Cumulative Layout Shift)CLS = IF * DFاگر عدد CLS به دست امده از 0.1 کمتر بود ما عالی عمل کردیم و اگر از 0.25 بیشتر بود یعنی با یک افتضاح رو به رو هستیم و طبیعتا عدد بین این دو نیاز به تلاش برای بهبود داره و این مقدار رو  در تب performance در developer tools مرورگر chrome برای صفحه جاری می‌تونید ببنید.یکی از تلاش‌هایی که برای بهبود شاخص CLS میشه کرد، optimise کردن حجم و نحوه و سرعت لود ‌اونهاست. در طی لود شدن فونت‌ها بسته به این که ما font-display رو چطور تعریف کرده باشم FOIT (یهو ظاهرا شدن متن‌ها)  و FOUT (یهو استایل پیدا کردن متن‌ها) می‌تونه رخ بده و روی شاخص CLS تاثیر بذاره. Flash Of Unstyled Tex &amp; Flash Of Invisible Textوقتی یک فونت رو در کل یا بخش از صفحه استفاده می‌کنیم مرورگر در طی پردازش و painting وقتی به اون المنت میرسه  ابتدا تلاش می‌کنه تا به فایل فونت دسترسی پیدا کنه. اگر اون فونت قبلا لود و کش شده باشه یا فونت پیش فرض سیستم استفاده شده باشه در همین مرحله اغلب متن‌ها با فونت مورد نظر render میشن. اما وقتی ما از یک فونت خارجی استفاده کرده باشیم قضیه کمی پیچیده‌تر میشه و به طول کلی این پروسه سه بخش block, swap و failure  می‌تونه داشته باشه که البته بسته به این که font-display چی تعریف شده ممکن هست بعضی از این‌ها رو نداشته باشیم و تغییراتی هم این فاز‌ها داشته باشم.حواستون باشه این ۳ حالتی که پایین توضیح دادم مقدایر font-display نیست بلکه چرخه‌هایی مفهومی هستن و در ظاهر با مقادیر  font-display شباهت دارن ولی در تعریف می‌تونن متفاوت باشن!ابتدا مرحله block شروع میشه. در این حالت یک فونت پیش فرض نامرئی به جایگزین فونت خارجی استفاده شده استفاده میشه و اصطلاحا نمایش متن بلاک و مخفی میشه تا نهایتا فونت دانلود و پردازش و طی مرحله swap با این فونت نامرئی جا‌به‌جا بشه. در طی این تعویض فونت نامرئی و فونت قابل مشاهده یک فلش صفحه می‌خوره که به اون FOIT میگن که مخفف flash of invisible text هست.مرحله دوم swap هست و همونطور که در ادامه توضیح بالا گفتیم، در این مرحله فونت دانلود شده روی متن اعمال میشه و به نمایش در میاد. البته می‌تونه بسته به شرایط مرحله block وجود نداشته باشه و فونت پیش فرض سیستم تا زمان دریافت فونت خارجی به عنوان جایگزین نمایش داده بشه و هر وقت اون اماده شد جایگزینی اتفاق بیفته که در اون لحظه ما یک FOUT که مخفف flash of unstyled text هست رو تجربه خواهیم کرد (تغییر ناگهانی ظاهر متن‌ها).حالت سومی هم ممکن هست رخ بده! حالتی که دانلود و پردازش فونت به خطا خورده (failure) و امکان swap عملا وجود نداره! البته اینم ممکن هست که مرورگر خودش با توجه به سیستم کاربر و سرعت اینترنتش تشخیص میده که اون رو failure در نظر بگیره یعنی در واقعیت خطایی نخورده ولی مرورگر پیش بینی کرده که می ‌خوره یا دوست داره که بیخیال ماجرا بشه!هر کدام از مقادیر font-display روی این سه چرخه لود فونت می‌تونه چنین تغییراتی روی ایجاد کنه:مقدار auto (default): این گزینه که پیش فرض هم هست بسته به user-agent و سرعت اینترنت کاربر و یکسری پارامترهای مثل این، خودش اتوماتیک لود فونت رو مدیریت می‌کنه ولی به طور کلی میشه گفت اغلب شبیه مقدار block عمل می‌کنه ولی خب گاهی ممکن هست تصمیم بگیره تا فونت رو لود نکنه!مقدار block: در این حالت ابتدا میاد عملیات بلاک کردن فونت رو انجام میده (از فونت نامرئی استفاده می‌کنه) و تا مدت کوتاهی هم این صبر استراتژیک رو طول ادامه میده (حدود ۳ ثانیه که بسته به مرورگر می‌تونه متفاوت باشه). اگر در طی نامرئی بود فونت دانلود شد که متن‌ها با فونت تعیین شده render و نمایش داده میشن ولی اگر نشد بعد از این زمان فونت پیش فرض جایگزین میشه ولی مرورگر تا وقتی کاربر در همون صفحه بمونه (بی‌نهایت) منتظر میشه تا درخواست دانلود فونت و پردازشش تکمیل بشه و بعد اون رو با فونت پیش فرض در حال نمایش جابه‌جا می‌کنه اگر هم که failure شد فونت پیش فرض باقی می‌مونه!مقدار swap: اگر این مقدار رو برای font-display تعیین کنیم دیگه مرحله block و نامرئی شدن رو نخواهیم داشت و از همون اول فونت پیش فرض سیستم به جایگزین فونت خارجی برای فونت ها استفاده میشه ولی مرورگر تا وقتی کاربر در همون صفحه بمونه (بی‌نهایت) منتظر میشه تا درخواست دانلود فونت و پردازشش تکمیل بشه و بعد اون رو با فونت پیش فرض در حال نمایش جابه‌جا می‌کنه اگر هم که failure شد فونت پیش فرض باقی می‌مونه!مقدار fallback: اگر سه حالت قبل رو ترکیب کنیم و به نفع لود شدن فونت پیش فرض (fallback) همه چیز رو بچینیم میشه یه همچین حالتی. اولا که مثل حالت auto مرورگر روی اون یکسری بررسی‌ها و تصمیمات اتوماتیک می‌گیره و ممکن هست هر طور صلاح میدونه عمل کنه ولی در اغلب موارد اینطوری هست که زمان بسیار کوتاهی، حدود 100ms فونت رو ابتدا block و نامرئی می‌کنه و بعد فونت پیش فرض رو استفاده می‌کنه و بعد هم زمان کمی، حدود ۳ ثانیه صبر می‌کنه تا فونت لود بشه اگر نشد کلا بیخیال swap میشه و با همون فونت پیش فرض تا هر وقت کاربر مرورگر رو باز نگهداره متن‌ها رو نشون میده. در واقع هدفش این هست که یک تلاش خیلی کوتاه و سریع میکنه تا فونت خارجی رو استفاده کنه، شد که شد نشد بیخیالش میشه.مقدار optional: این دیگه از حالت قبلی یعنی fallback هم افراطی‌تر دنبال لود فونت پیش فرض هست. در واقع مثل همون fallback عمل می‌کنه با این فرق که دیگه ۳ ثانیه هم برای swap صبر نمی‌کنه. کلا 100ms وقت میذاره، فونت رو نامرئی می‌کنه و اگر به فونت تونست دست پیدا کنه استفاده‌ش میکنه مگر نه کلا بیخیالش میشه. البته در این حالت شرایط auto کمی سخت‌گیرانه‌تر هم میشه مثلا اگر اینترنت کاربر کند باشه یا اون فونت حتی بخواد از سیستم خود کاربر خونده بشه ولی سنگین باشه ولودش طول بکشه سریع بیخیال اون فونت میشه و failure در نظرش می‌گیره و با پیش فرض کار رو در میاره (به عبارتی میگه چون لودش خیلی سریع نیست پس بیخیال)!جمع‌بندی FOUT، FOIT و CLS همونطور که دید در برخی حالت‌ها و شرایط ما می‌تونیم شیف و فلش خوردن صفحه رو به واسطه لود شدن فونت‌ها تجربه کنیم و اگر هدف ما این باشه که CLS رو کاهش بدیم باید تا می تونیم در قدم اول تعداد فونت‌هایی که استفاده می‌کنیم رو کاهش بدیم و ترجیحا از یک یا نهایتا دوتا فونت استفاده کنیم، در قدم بعدی subset‌ و weightهای بلااستفاده رو از فونت که مورد استفاده قرار نمی‌گیرن حذف کنیم تا حجمش کم بشه و در نهایت با راهکارهای سمت سروری مثل کش کردن سرعت دانلود فونت رو افزایش بدیم و در نهایت نه به شکل افراطی بلکه خیلی معقول از انیمیشن‌هایی مثل fade-in در موارد که فلش خورد در لود داریم استفاده کنیم استفاده از انیمیشن‌هایی که منجر به تغییر سایزهایی ممتد المنت میشن و این باعث میشه تا المنت‌های جانبیشون رو هم تغییر کنن و به نوعی در کل صفحه حرکت ایجاد کنن مخصوصا در لود اولیه جدا خودداری کنید هم در پردازش بد پرفورمنس هستن و هم در تجربه کاربری و بصری و می‌تونن عاملی برای بدتر شدن نرخ CLS باشن. همچنین بهتره از font-displayهایی که سخت‌گیرانه‌تر عمل می‌کنن مثل fallback استفاده کنید و فونت‌های پیش فرض مناسبی رو تعیین کنید اگر هم که حتما لود فونت خارجی رو حتی با اندکی افزایش CLS ترجیح دادید بهتره از swap به جای block استفاده کنید.اگر نکته‌ای جا مونده اون رو در کامنت‌ها اضافه کن.محمد ابراهیمی اول ـــــــ اردیبهشت ۱۴۰۴</description>
                <category>محمد ابراهیمی اول</category>
                <author>محمد ابراهیمی اول</author>
                <pubDate>Sun, 20 Apr 2025 20:31:26 +0330</pubDate>
            </item>
                    <item>
                <title>صفر تا صد this در JavaScript</title>
                <link>https://virgool.io/@ebrahimiaval/%D8%B5%D9%81%D8%B1-%D8%AA%D8%A7-%D8%B5%D8%AF-this-%D8%AF%D8%B1-javascript-ula3avpw5oyz</link>
                <description>پیشگفتاروقتی به توضیحات this در ویدیو های آموزش سطح مبتدی جاوااسکریپت نگاه کنید بحث خیلی ساده به نظر میرسه ولی طولی نمیکشه که یه روزی یه جایی پیش میاد که رفتار عجیب this شما رو گیج میکنه! من این رو نقص آموزشهای مقدماتی نمیدونم، به نظرم اونها کار درستی میکنن که زمینه گیج شدن رو برای فردی که تازه برای اولین بار میخواد این زبان رو یاد بگیره ایجاد نمیکنن و سعی میکنن قضیه رو با چند مثال و چند حالت پرتکرار جمع کنن و به موضوع بعدی برن اما این قرار نیست دلیلی بشه که شخص بعد از گرم شدن دستش در توسعه برنامهها و گرفتن لقب توسعه دهنده جاوااسکریپت به سراغ جزئیات ماجرا که کمی گیج کننده ممکن هست باشه، نره! به نظرم من، قانون ۲۰/۸۰ اینجا هم هست! یعنی شما با دونستن ۲۰٪ حالتها و توضیحات this میتونید مقدارش در ۸۰٪ موارد رو شناسایی کنید ولی برای فهمیدن اون ۲۰٪ موارد دیگه که اتفاقا خیلی هم خاص و کم پیش آمد هستن لازم هست تا اون ۸۰٪ دیگه داستان this که نمیدونید رو یاد بگیرید.حتما یادتون هست که در امتحانات دوران مدرسه اغلب وقتی سوالی کوتاه بود جواب شرح مفصلی داشت و اگر سوال حجم و جثهی بزرگی داشت اغلب جوابی مختصر داشت. کلمه کلیدی this همین syntax مختصری که میبینید رو داره یعنی همین حروف کوچک this هست و تمام ولی وقتی که بپرسن مقدار this چی هست اینجاست که باید خبره باشی تا بتونی همه موارد رو درست جواب بدی. در این مطلب هدف فهمیدن همه حالتهایی هست که this میتونه داشته باشه.this in javascriptمقدمهکلمه کلیدی this در جاوا اسکریپت مثل نخودی بازی های دوران کودکی هست که همیشه تو بازی هست! شما هرجا بنویسید console.log(this) به ندرت پیش میاد که چیزی در خروجی چاپ نشه حتی اون undefinedی هم که ممکن هست در شرایط خاص مثل لود کردن یک فایل به صورت module رخ بده هم به نوعی خودش یک مقدار قابل تامل هست.پس این که فکر کنیم this همیشه در جایی هست که یک Class یا Object باشه چنین چیزی حداقل در ظاهر معنی نداره چون خیلی وقتها اصلا هیچ ساختار شی یا کلاس مانندی هم وجود نداره (مثلا همون فراخوانی مستقیم this در global scope) ولی خب این تفکر آنچنان هم غلط نیست، چون میدونیم که در جاوااسکریپت به جز primitive valueها بقیه همه Object هستن! پس الکی نیست که اغلب جاها که صداش میزنیم هست و دلیلش این هست که کلا ما در یک سیستم برپایه شیگرایی داریم فعالیت میکنیم!۲۰ نکته اساسی در مورد مقدار this در جاوا اسکریپت۱) با بقیه زبانها فرق داره! مقدار this در جاوااسکریپت با سایر زبانها تفاوتهایی داره. به عبارتی با دانش زبانهای دیگه در همه موارد نمیشه در مقدار this رو پیش بینی کرد.۲) مقدار this در strict mode و non-strict mode تفاوتهایی داره و اولین قدم همیشه فهمیدن این هست که ما در چه modeی داریم کد رو اجرا میکنیم . (در ادامه پس از توضیحاتی شرحش رو میگم)۳) مقدار this بستگی به این دارد که در کدام یک از ۳ محیط function, Class و global scope بکار گرفته میشود. به عبارتی بعد از شناخت mode اجرای اسکریپتها (Strict mode/non-strict mode) باید بفهمید که در چه محیطی از this استفاده میکنید.۴) در اکثر موارد پای یک function در میان هست! چه در functionها، چه در classها و چه در فضای عمومی کد (global scope) همیشه یا واضح و علنی (explicitly) یا به صورت ضمنی و مخفی (implicitly) همه چیز مانند اجرا یک function اتفاق میافته (برای اطلاعات بیشتر &quot; javascript global execution context&quot; رو گوگل کنید).پس شناخت رفتار this در functionها کمک میکنه که اکثر مقادیر ممکن برای this رو بدونید. خوب اینم یادآوری کنم که در جاوااسکریپت functionها نوع خاصی از object هستن نه یک ساختار مستقل.۵) وابسته به اجرا نه به تعریف! مقدار this در اکثر موارد به این بستگی داره که function چطور اجرا بشه نه این که چطور و در کجا تعریف بشه. به این قاعده runtime binding گفته میشه یعنی خود زبان پس از بررسی function body در زمان اجرا مقداری رو برای this تعریف میکنه و مانند پارامترهایی که به فانکشن ارسال شدن میتونید اون رو تصور کنید با این تفاوت که برخلاف پارامترهای تابع که دستی خودتون می فرستید اینجا خود زبان به صورت مخفی واستون به داخل تابع ارسال کرده و میتونید ازش استفاده کنید.۶) خطای assignment! مقدار this را نمیشود مانند مقدار دهی به یک متغییر به صورت مستقیم در حین اجرا تعیین کرد. اجرا قطعه کد زیر منجر به خطا میشود:function fn() {
       this = {foo:&#039;bar&#039;}
        console.log(this)
}
fn()  // SyntaxError: Invalid left-hand side in assignment۷)تعریف مقدار دلخواه! به کمک متدهای bind, call و apply میتوان مقدار دلخواهی برای this تعیین کرد و اگر یکبار به کمک bind اینکار را انجام دادید دیگر نمیتوانید بر روی function خروجی آن از این متدها برای تعیین this استفاده کنید و مقدار this همچنان به همان مقدار تعیین شده در دفعه اول اشاره میکنه.function fn() { return this }

const step1 = fn.bind({a: &#039;a&#039;})
console.log(step1()) //{a: &#039;a&#039;}

const step2 = step1.bind({b: &#039;b&#039;}) 
console.log(step2()) //{a: &#039;a&#039;}۸) دفعه اجرا مهم هست! هر بار که function اجرا میشود ممکن هست که مقدار this تغییر کند و این یعنی مقدار this علاوه بر بستگی داشتن به نحوه اجرا، به دفعه اجرای تابع هم بستگی داره.let counter = 1

function yourAction() { console.log(this) } 

function fn() { 
     counter++
     const yourActionThis = counter % 2 === 0 ? {a: &#039;a&#039;} : {b: &#039;b&#039;}
      yourAction.call(yourActionThis )
 }

fn() // {a: &#039;a&#039;}
fn() // {b: &#039;b&#039;}
fn() // {a: &#039;a&#039;}
fn()// {b: &#039;b&#039;}۹) دقت داشته باشیم که Arrow funtionها خاص هستن! هر چیزی که در مورد this در functionهای عادی (typical functions) میگیم به احتمال بسیار زیاد در مورد Arrow functionها درست نیست چون اصلیترین تفاوت تابعهای معمولی و arrow همین بحث this در اونهاست.مثلا شما نمیتونید از متدهای bind, call و apply برای تعیین مقدار this داخل تابع استفاده کنید چون مقدار this اونها همواره برابر نزدیکترین مقدار this در محل تعریف تابع هست (it retains the this value of the enclosing lexical context).یا این که بحث بستگی داشتن مقدار this در تابعهای عادی به نحوه اجرا برای arrow functionها معنایی نداره چون در اینها مقدار this بستگی به محل تعریف داره در حالی که در توابع معمولی محل تعریف اغلب مهم نیست!همچنین بحث mode محیط (Strict mode و non-strict mode) و محیط اجرا (function, Class و global scope) به صورت مستقیم به اینها ربطی نداره و اونها تنها چیزی که براشون مهم هست این هست که مقدار this در نزدیکترین scope محل تعریفشون چی هست یا به عبارتی این شرایطی که گفتیم، ممکن هست بر مقدار this محیط نزدیکش تاثیر بذاره و این عاملی بشه که به صورت غیرمستقیم بر مقدار this درarrow function تاثیر بذاره.دلیل این اتفاقها این هست که خود زبان جاوااسکریپت بر روی این نوع فانکشنها یک Closure ایجاد میکنه که مقدار this محل تعریف در اونها قرار داده شده و این یعنی جاوااسکریپت برای arrow functionها یک object جدید خلق نمیکنه بله همون مقدار this محیط اطراف در this اینها assign میشه یا به عبارتی هر دو به یک object یکسان اشاره میکنن.const envThis = this
 const custormThis = {a: &#039;a&#039;}
const fn = () =&gt; this
const result = fn.call(custormThis)
console.log(result === custormThis) // false
console.log(result === envThis) // trueادامه ۳) عملیات this substitution ! در حالت strict mode مد مقدار this هر چیزی (...,undefined, null, number, string) میتونه باشه. در حالت non-strict mode ساختاری تحت عنوان this substitution تضمین میکنه که مقدار this قطعا یک object خواهد بود. در این ساختار اگر مقدار this یک Primitive Value باشه به کمک Constructor آن value type یک خروجی object گرفته میشه و در this قرار داده میشه.function strict() { 
   &#039;use strict&#039;
   return this 
} 
Number.prototype.strictThis = strict 
const strictResult = (1).strictThis() 
console.log(strictResult) // 1 
console.log(typeof strictResult) // &#039;number&#039;

function nonStrict() { return this } 
Number.prototype.nonStrictThis = nonStrict 
const nonStrictResult = (1).nonStrictThis() 
console.log(nonStrictResult) // Number (1) 
console.log(typeof nonStrictResult) // &#039;object&#039;برای فهم بهتره این اتفاق باید تفاوت Literal value و Constructor instance value رو بدونید.const literalNumber = 123
const instanceNumber = new Number(123)

console.log(literalNumber) // 123
console.log(instanceNumber) // Number (123)

console.log(literalNumber.valueOf()) // 123
console.log(instanceNumber.valueOf()) // 123

console.log(typeof literalNumber) //number
console.log(typeof instanceNumber) //objectهمچنین اگر مقدار this برابر undefined یا null باشد زبان جاوا اسکریپت اتوماتیک مقدار this رو به مقدار globalThis تغییر میده. مقدار کلمه کلیدی globalThis در اغلب محلهای اجرا برنامه برابر Object سراسری هست. مثلا اگر scriptها در مرورگر اجرا شوند مقدار globalThis برای شیglobal یا همان شی window خواهد بود.function fn() { return this }
 const fnThis = fn.call(undefined)
 console.log(fnThis === globalThis) // trueوقتی هم که functionها را به صورت عادی فراخوانی کنید مقدار this برابر undefined خواهد بود که در strict mode همین مقدار میماند و تغییر نمیکند ولی در non-strict mode ساختار this substitution باعث میشود که مقدار آن برابر globalThis شود.function fn() { 
     &#039;use strict&#039;
     return this 
} 
console.log(fn() === undefined) // true


function fn() { return this } 
console.log(fn() === globalThis) // true۱۰) ارسال ضمنی در memeber access! هنگامی که از member access (هم dot member access و هم computed member access) استفاده میکنید به صورت ضمنی (implicitly) مقدار this بخش قبلی به بخش بعدی منتقل میشود. یعنی اگر متد fn شی obj را با نقطه call کنید آنگاه مقدار this در داخل متد fn برابر obj خواهد بود ولی اگر fn را در متغییر subFn قرار دهیم و بعد اجرا کنیم (بدون dot member access آن را call کنیم) مقدار this هیچ ربطی به obj نخواهد داشت و این کار مشابه این است که به صورت انتزاعی function مستقیما در جلوی fn تعریف شده و شرایط this طبق این حالت انتزاعی تعریف خواهد شد.const obj = {fn: function () { return this } } 

// with member access
console.log(obj.fn() === obj) //true
console.log(obj[&#039;fn&#039;]() === obj) //true

// with assignment
const subFn = obj.fn
console.log(subFn () === obj) // falseبه زنجیره کار نداره! نکتهای که باید به اون دقت داشت این هست که اگر زنجیرهای از objectهای تو در تو داشته باشیم آنگاه مقدار this در هر مرحله برابر object مرحله قبلش است و کاری به زنجیره اون object و خود object اصلی نداره.const a= { 
        name: &#039;a&#039;,
        b: {
                name: &#039;b&#039;,
                fn: function () { return this },
                c: {
                        name: &#039;c&#039;,
                        fn: function () { return this }
                 }
         }
 }

const bFnResult = a.b.fn()
 console.log(bFnResult ) // {name: &#039;b&#039;, fn: ƒ, c: {…}}
console.log(bFnResult === a.b) // true

console.log(a.b.c.fn()) //{name: &#039;c&#039;, fn: ƒ}متد super یک استثنا هست! این قاعده ارسال ضمنی this سطح قبل به سطح بعد برای کلمه کلیدی super در حالت ()super.fn اجرا نمیشه و مقدار this در fn به super اشاره نخواهد کرد و این یک استثنا هست! متد fn در این syntax به صورت ضمنی یک arrow function در نظر گرفته میشه یعنی مقدار this در fn برابر مقدار this نزدیکترین scope به fn در زمان اجرا است.class A { 
      static aFn() { return this } 
} 

class B extends A { 
      static bFn() { 
            return super.aFn() 
      } 
} 

console.log(B.bFn() === A) // false 
console.log(B.bFn() === globalThis) // false 
console.log(B.bFn() === B) // trueگفتن این نکته هم خالی از لطف نیست که متدهای تعریف شده به صورت static در یک کلاس دقیقا مشابه این رفتار میکنن که شما یک object مخفی با نام آن کلاس در حافظه تعریف کنید و این متدها را برای آن تعریف کنید چون این متدها اختصاصی برای خود کلاس خواهند بود و ربطی به instance object ندارند. حالا یک کلمه کلیدیای هم داریم به نام super که دقیقا مشابه کلاس نیست ولی یکی از رفتارهایی که میکنه این هست که مشابه نحوه فراخوانی با نام کلاس میشه یک متد از کلاس رو با super صدا زد با این تفاوت که وقتی با super فراخوانی بشه مقدار this برابر مقدار this در scope محل اجرا خواهد بود ولی وقتی با نام کلاس صدا زده بشه طبق قاعده member acces مقدار this به خود کلاس اشاره میکنه.class A { 
    static name = &#039;A&#039;
    static aFn() { return this } 
}

class B extends A { 
    static name = &#039;B&#039;
    static bFn() { 
        return { 
            withSuper: super.aFn(), 
            withCalassName: A.aFn() 
        } 
    }
} 

const result = B.bFn() 

console.log(result.withSuper === A) // false 
console.log(result.withSuper === B) // true

console.log(result.withCalassName === A) // true 
console.log(result.withCalassName === B) // false۱۱) توابع callback! مقدار this در callback functionها از همون قواعدی که برای fucntionها گفتیم پیروی میکنه. تابع logThis در مثال زیر به عنوان callback به متدها (توابع پایه) forEach و setTimeout ارسال شدن.function logThis() {    
      &#039;use strict&#039;
     console.log(this); 
} 

 [1, 2, 3].forEach(logThis); // undefined, undefined, undefined 
setTimeout&#40;logThis, 1000&#41;; // undefinedشرایط خاص یک متد واسه callbackش! تنها نکتهای که باید به اون دقت کرد این هست که این callback که ما به یک تابع پایه ارسال کردیم آیا توسط خود این تابع پایه تغییری در thisش صورت میگیره یا نه. مثلا ممکن هست در بدنه این تابع پایه callback با متد call و یک object دلخواه به عنوان this صدا زده بشه که در این صورت باید مستند اون تابع پایه مطالعه بشه. به عنوان مثال اغلب متدهای iterative آرایهها پارامتری به نام thisArg میگیرند که اگر شما مقداری برای اون تعریف کرده باشی این متدها callback را با این مقدار call میکنند و مقدار this برابر مقدار thisArg میشه و اگر تعریف نکنید همون قوانین عادی functionها رو خواهد داشت.[1, 2, 3].forEach(logThis, { name: &#039;obj&#039; });
// { name: &#039;obj&#039; }, { name: &#039;obj&#039; }, { name: &#039;obj&#039; }۱۲) در Constructor functionها همواره مقدار this به instance object خلق شده اشاره میکند.let innerThis 
function fn() { 
     this.name = &#039;instance&#039;
     innerThis = this 
     return this 
} 

const instanceObject = new fn() 
console.log(instanceObject) // fn {name: &#039;instance&#039;} 
console.log(instanceObject === innerThis) // trueاین یعنی مقدار this مستقل از زنجیره propertyهایی هست که ممکن است در هنگام استفاده از new expertion وجود داشته باشند. به عبارتی قاعده ارسال ضمنی this در بحث memeber access در اینجا عمل نمیکند.const a = { 
        b: { 
                c: { 
                        fn: function () { 
                                this.name = &#039;ebrahimiaval&#039;
                                 return this 
                        } 
                } 
        }
 }

 const instanceObject = new a.b.c.fn() 
console.log(instanceObject) // fn {name: &#039;ebrahimiaval&#039;} 
console.log(instanceObject === a.b.c) // falseاگر Constructor function یک مقدار non-primitive مثل آرایه، شی یا تابع را برگرداند مقدار شی this عملا نادیده گرفته میشود. اصطلاحا به چنین حالتی dead code گفته میشود. البته لفظ مرده خیلی هم دقیق نیست چون مقدار this تعریف و به بدنه constructor ارسال و اجرا هم میشه ولی در نهایت چون چیز دیگری return میشه عملا میشه گفت در پایان اجرا constructor پرونده this بسته میشه و میمیره یا بهتره اینطور بگیم که مثل یک متغییر خصوصی واسش رفتار میکنه که با شروع تابع شروع و با پایانش تمام میشه! برخلاف بار منفیای که داره، از این روش گاهی اوقات در تعریف Constructor function استفاده میشه و الزاما چیز بدی نیست!const customThis = {a: &#039;a&#039;} 
function fn() { 
      this.action = function () { 
            console.log(&#039;do action&#039;)
      } 
      this.action()  // log &#039;do action&#039; string
       return customThis
} 
const instanceObject = new fn() 
console.log(instanceObject) // {a: &#039;a&#039;} 
console.log(instanceObject === customThis) // true۱۳) در Classها (Class Context) همه چیز به دو گروه Instance Context و Static Context تقسیم میشه و مقدارthis هر گروه متفاوت هست![1] گروه اول (Instance Context) اونهایی هستن که حاصل نمونه گیری از کلاس هستن. instance object یک کلاس که با اجرا new expression تازه خلق خواهند شد و شامل Constructor, methods و instance field initializers (public or private)ها میشن و با هر بار صدا زدن new یک object مستقل از نمونههای قبلی ایجاد میشه که مقدار this برابر خود همین instance object خواهد بود یعنی نه به کلاس و پراپرتیهای staticش ربطی داره و نه به نمونههای قبلی گرفته شده از این کلاس!باید توجه داشته باشید که به صورت پیش فرض و مستقل از هر نوع تعریفی در Class Syntax حالت محیط روی Strict mode تنظیم شده و امکان غیرفعال کردن آن هم وجود ندارد پس باید مقدار thisها در این ساختار را در حالت Strict mode ارزیابی کنید!متد constructor کلاس بسیار مشابه یک Constructor function هست و از این جهت قواعد مقدار this در متد سازنده کلاس هم بسیار مشابه قواعد Constructor functionها هست با چند نکته که که منحصر به syntax کلاس هست.اول super! مثلا شما نمیتونید قبل از این که در سازنده کلاسهای زیر مجموعه یک کلاس پایه (sub class یا derived class یا extended class) متد super رو صدا بزنید به this به هر شکل و نحوی اشاره کنید چون منجر به خطا میشه!اجرای super الزامیهست! همچنین شما نمیتونید در کلاسهای زیر مجموعه constructor تعریف کنی ولی متد super رو اجرا نکنی چون منجر به خطا میشه مگر این که مثل قاعده dead code در Constructor function یک مقدار non-primitive را برگردانید با این تفاوت که در اینجا دیگه حق ندارید اشارهای به this کنید چون منجر به خطا میشه!فقط در constructor کلاس پایه یک object برای this خلق میشود ولی برای توابع سازنده کلاسهای زیر مجموعه هیچ this جدیدی ایجاد نمیشود و همه به همان this کلاس پایه اشاره میکنن یا به عبارتی تو در تو به سطوح پایینتر پاس داده میشود.[2] گروه دوم (Static Context) اونهایی که مربوط به خود کلاس هستن یعنی بدون این که از کلاس یک نمونه بگیریم تا بعدش بتونیم به متد و پراپرتیها دسترسی پیدا کنیم، اینجا میشه مستقیم و انگار که با کلاس طرف نیستیم بلکه با یک literal object طرف هستیم باشون کار کنیم و ازشون انتظار داشته باشیم. این گروه رو با کلمه کلیدی static در کلاس میشه تعریف کرد و شامل static methods, static field initializers و static initialization blocks میشود. مقدار this در اینها به خود کلاس اشاره میکنه.:: نکات مشترک Static Context و Instance Context با تفاوت جزئی:مقدار this چه در Static methodها و چه در instance methodها مشابه قواعد مقدار this که در بخش متدهای literal objectها توضیح دادیم هست یعنی به محل تعریف ربطی نداره بلکه به نحوه فراخوانی کردن آنها بستگی داره.این یعنی اگر ما Static methodها را با member accessی برابر خود کلاس فراخوانی کنیم مقدار this به موجودیت کلاس اشاره داره (برابر مقدار this کلاس) هست و اگر در تابعی بریزیم و بعد فراخوانی کنیم this آن هیچ ربط و اشارهای به کلاس نداره و مثل یک تابع معمولی رفتار میکنه. برای instance methodها هم دقیقا همین قاعده هست با این تفاوت که instance method به instance object اشاره میکنه و به کلاس ربطی نداره! در اینجا متد رو یا میشه در تابعی ریخت و اجراش کرد که خب مثل اجرای یک تابع معمولی و مستقل از instance object خواهد بود و یا هم اگر با member accessی از خود instance object فراخوانی کنیم طبیعتا طبق قواعد انتقال ضمنی this در member access در متد مقدار this برابر instance object خواهد بود.اگر هم متدها به صورت Arrow function تعریف شده باشند مقدار this برای متدهای static برابر this کلاس هست یا به عبارتی به کلاس اشاره داره و برای متدهای نمونه (instance method) برابر خود instance object هست یا به عبارتی به instance object اشاره میکنه. (دقت کنید که رفتار arrow functionها به ازای این که در یک literal object تعریف شدن و یا در یک کلاس متفاوت هست!)همچنین مقدار this اگر به صورت مستقیم به فیلدهای نمونه ( instance field یا instance props) assign بشه برابر خود instance object ایجاد شده هست و اگر به فیلدهای (static) استاتیک assing بشه به کلاس اشاره داره.class A { 
     instanceThis= this
     static  staticThis= this
 } 
const a = new A() 
console.log(a.instanceThis=== A) // false
console.log(a.instanceThis=== a) // true

console.log(A.staticThis=== A) // true
console.log(A.staticThis=== a) // false۱۴) مقدار this در assignment مستقیم به یک property از literal object برابر this در نزدیکترین scope به محل تعریف آن object خواهد بود. یعنی اگر در global scope چنین اتفاقی بیفته و فایل script به صورت module باگذاری نشده باشه مقدار this برابر globalThis و اگر به شکل module باشد برابر undefined خواهد بود.const rootThis = this
const a = {
       b: this
}
console.log(a.b) // undefined in modules OR window in typical browser script
console.log(a.b === rootThis) // true۱۵) مقدار this در در getter و setterها مانند متدهای literal objectها به نحوه فراخوانی بستگی دارد نه محل تعریف. البته چون اغلب این متدها توسط object محل تعریف فراخوانی میشن، اینطور هم میشه گفت که مقدار this به object محل تعریف اشاره داره.function sum() {
      return this.a + this.b + this.c
 } 

const o = { 
      a: 1, 
      b: 2, 
      c: 3, 
      get average() { 
            return (this.a + this.b + this.c) / 3  
      }
}

Object.defineProperty(o, &#039;sum&#039;, { get: sum, enumerable: true, configurable: true })

console.log(o.average) // 2
console.log(o.sum) // 6۱۶) وقتی شما scriptها رو در چارچوب functionهای عادی یا Class که به صورت واضح تعریف شدهاند ننویسید میشه گفت که شما scriptها رو در بخش عمومی کد یا همون global context نوشتید. این محیط درست هست که هیچ ظاهر function مانند واضحی نداره ولی اگر شما فرض کنید که هر چه در global scope مینویسید مشابه این هست که در یک تابع با نام global نامرئی نوشتید که بعدا این تابع اتوماتیک با شروع ارزیابی scriptها توسط خود جاوااسکریپت اجرا خواهد شد،آنچان هم تصور غلطی نیست و اتفاق اصلی بسیار مشابه همین هست پس برای فهم بهتره میتونید از این شماتیک ذهنی استفاده کنید و بعد قواعد this در functionها رو به یاد بیارید.در global scope مقدار کلمه کلیدی this مستقل از این که شرایط محیط Strict mode تعریف شده یا non-strict mode همواره برابر خواهد بود با globalThis که در اغلب محیطهای اجرا برابر global object خواهد بود.بسته به موتور اجرا کننده! اگر scriptهای موجود در global scope را در مرورگر اجرا کنید global object شی window خواهد بود پس مقدار globalThis هم برابر window و مقدار this هم برابر window خواهد بود یا در NodeJS چون شی پایه window وجود ندارد مقدار globalThis با مقدار شی خاص global در NodeJS برابر خواهد بود.در حالتmodule! دقت کنید که اگر یک script به صورت module بارگذاری شود دیگر root آن فایل global scope نخواهد بود. در این حالت مقدار this در global scope اون script همواره و مستقل از Strict mode و non-strict mode برابر undefined خواهد بود. همچنین مقدار globalThis طبق تعریف بالا اغلب برابر global object خواهد بود که در اکثر مرورگرها برابر شی window هست.&lt;!DOCTYPE html&gt; 
&lt;html&gt; 
     &lt;head&gt; 
               &lt;title&gt;ebrahimi aval&lt;/title&gt; 
               &lt;meta charset=&#039;UTF-8&#039; /&gt; 
     &lt;/head&gt;
      &lt;body&gt; 
               &lt;script  type=&#039;module&#039;&gt; 
     &lt;/body&gt;
 &lt;/html&gt;


//ــــــــــــــــــــ in script.js ــــــــــــــــــــ 
var title= &#039;ebrahimiaval&#039;
console.log(this) // undefined
console.log(globalThis === this) // false
console.log(window.title) // undefined
console.log(globalThis === window) // true۱۷) موتور اجرا کننده! باید اتفاقات خاص محیط محل اجرای برنامه رو هم دقیق بشناسید چون ممکن هست در برخی محیطها توسعهدهندههای آن شرایط خاصی برای this تعیین کرده باشن. مثلا CommonJS در NodeJS با این که در ظاهر scriptها در global scope تعریف میشوند ولی مقدار this برابر module.exports است. یا در تعریف در (DOM event handler) رویدادهای تگهای HTML در اغلب محیطهای اجرا مقدار this به element محل تعریف آن event اشاره میکنه که یک رفتار خاص تعریف شده برای اون متد هست.&lt;div   id=&#039;red&#039; 
          style=&#039;padding: 30px; background-color: red&#039;
          =&#039;console.log(this) //div#red&#039;&gt;              
&lt;/div&gt;همچنین مقدار this در callback رویدادها همواره برابر event.currentTarget و اگر المنت محل رخ دادن رویداد با المنت محل تعریف رویداد یکی باشد برابر e.target است.&lt;div id=&#039;red&#039; style=&#039;padding: 30px; background-color: red&#039;&gt; 
            &lt;div id=&#039;blue&#039; style=&#039;padding: 30px; background-color: blue&#039;&gt; &lt;/div&gt; 
&lt;/div&gt;


function redElementClickHandler(e) {
      // Always true
    console.log(this === e.currentTarget) 

     // true when click on div#red and false when click on div#blue
    console.log(this === e.target) 
}

document.querySelector(&#039;#red&#039;).addEventListener(&#039;click&#039;, redElementClickHandler)۱۸) مقدار this در متد evel به دو حالت فراخوانی مستقیم (direct) و غیر مستقیم (indirect) تقسیم میشه. در فراخوانی مستقیم عملا آن قطعه کد در حال ارزیابی بخشی از کد محل اجرا متد evel به حساب میاد ولی در فراخوانی غیر مستقیم آن قطعه کد هیچ ربطی به محل اجرا متد evel نداره و به عنوان بخشی از global scope ارزیابی میشه.globalThis.foo = 1 
function direct() { 
     let foo = 10 
     eval&#40;&#039;foo++&#039;&#41; 
     console.log(foo) // 11 
     console.log(globalThis.foo) // 1 
} 

function indirect() {
     let foo = 10 eval?.(&#039;foo++&#039;) 
     console.log(foo) // 10 
     console.log(globalThis.foo) // 2 
} 

direct() 
indirect()۱۹) در IIFEها (Immediately Invoked Function Expression) چون عملا تعریف و اجرا تابع در یک محل و هم زمان هست قوانین حاکم بر مقدار this در این functionها دقیقا مشابه این هست که ابتدا تابع را تعریف کنیم و بعد با فراخوانی نام تابع آن را اجرا کنیم پس از قوانین اجرای تابع معمولی پیروی میکنه.function main() { 
      const innerThis = this;

      (function () { 
            console.log(this == innerThis) // false 
            console.log(this == globalThis) // true 
      })()

      function fn() { 
            console.log(this == innerThis) // false 
            console.log(this == globalThis) // true 
      } 
      fn();

      (() =&gt; { 
            console.log(this == innerThis) // true 
            console.log(this == globalThis) // false 
      })() 

      const arrowFn = () =&gt; { 
            console.log(this == innerThis) // true 
            console.log(this == globalThis) // false 
      }
      arrowFn() 
} 

main.call({a: &#039;a&#039;})۲۰) هر چند در with statements منسوخ شده ولی لازم هست بدونیم که مقدار this در اینها چی هست، شاید برای فهم کدهای یک پروژه قدیمی روزی به کار بیاد. در این ساختار به جای تکرار object برای دسترسی به properyها، آنها را در block خود در دسترس قرار میده و این مشابه دسترسی به مقادیر object از طریق member access عمل میکنه و قوانین حاکم بر مقدار this هم مثل بحث دسترسی و فراخوانی از طریق member access هست.const outerThis = this

const obj = { 
          bar: this, 
          foo() { return this }
 }

with (obj) { 
          console.log(bar === outerThis) // true 
          console.log(foo() === obj) // true 
}جمعبندیاگر کل این متن رو چکیده کنیم به این میرسیم که اول باید ببینم حالت strict چی هست بعد ببینم در function، class یا global scope هستیم بعد ببینیم این کد روی چه موتور و در چه محیطی (مرورگر، node js ...) داره اجرا میشه بعد به این دقت کنیم که ایا تابع با member access فراخوانی شده یا نه و اگر بله چه استثناها(مثل super) و شرایطی داره، بعد به این که این تابع یک arrow function بوده یا نه و بعد این که ایا این به صورت callback ارسال شده یا نه و اگر بله اون متدی که این رو براش فرستادیم دستکاری خاصی میکنه یا نه. در کنار اینها یکسری نکته واضح رو هم باید یاد بگیریم یا بهتره بگم حفظ کنیم، مثلا این که نمیشه مقدار this رو با assignment (=) مستقیم به در this قرار داد یا این برای eval دو حالت متفاوت اجرا داریم و ... .به نظرم باید حداقل این متن ۳ بار در ۳ هفته جدا خونده بشه تا احتمال این که به ذهنتون سپرده شده بالا بره مگر نه با یک بار خوندن احتمال میدم ماه دیگه ازتون کسی بپرسه میگید، راستش تو مطلبی که محمد ابراهیمی اول در اول آموزش گذاشته بود خونده بودم یادم گرفته بودم و ولی حقیقتا الان دقیق یادم نیست و سوالم این هست اگر قرار باشه که اینقدر سریع و راحت فراموشش کنیم اصلا چرا باید بخونیمش! پس تلاش کنید که مسلط بشید با تکرار و تکرار و تکرار. یک راه جانبی هم که کمک کننده هست یادداشت کردن خلاصهای از نکات به قلم خودتون و مرور اون به عنوان یک cheatsheet برای this در javascript هست.منبع: MDN Web Docگرداوری و ترجمه شده توسط محمد ابراهیمی اول</description>
                <category>محمد ابراهیمی اول</category>
                <author>محمد ابراهیمی اول</author>
                <pubDate>Thu, 27 Feb 2025 09:14:15 +0330</pubDate>
            </item>
                    <item>
                <title>کجا از Mid-Level ،Junior و Senior استفاده بکنیم و کجا نه؟!</title>
                <link>https://virgool.io/@ebrahimiaval/%DA%86%D8%B1%D8%A7-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-%D8%B9%D9%86%D9%88%D8%A7%D9%86-%D9%87%D8%A7%DB%8C-mid-level-junior-%D9%88-senior-%D8%A7%D8%BA%D9%84%D8%A8-%D8%A7%D8%B4%D8%AA%D8%A8%D8%A7%D9%87-%D9%87%D8%B3%D8%AA-xp4yfzpnnd0x</link>
                <description>سطح توانایی ما به دو پارامتر مهم بستگی داره که این دو نسبی هستن پس نمیشه یک سطح رو مستقل از این دو پارامتر تعریف کرد! میزان تطابق طول،عمق، مسیر و هم پوشانی دانش و تجربه کسب شده در گذشته با نیازها و انتظارات محل تقاضا در قدم اول و طول و عمق شکاف ایجاد شدن بین این زمان و آخرین فعالیت مرتبط با موضوع تخصص و میزان زمان صرف شده روی اون موضوع در قدم بعد بر این که ما در این زمان و در این مکان چه سطح تخصصی ای داریم تاثیر مستقیم دارن و نباید عنوان خودمون رو بدون بیان این موارد به صورت مستقل و ثابت تعریف و استفاده کنیم. نادیده گرفتن این پارامترها باعث میشه تا ما دیدی واقع بینانه نداشته باشیم و به روان و اقتصاد خودمون و کسانی که با ما همکاری می‌کنن هم آسیب بزنیم.پارامتر اول: دریای بی‌انتهای علمروی هر شاخه علمی که دست بذارید دریایی از موضوعات مختلف هست که ما بسته به اجبار، انتظارات، نیاز و علاقه‌های خودمون بخش‌هایی از این دریا رو فتح می‌کنیم. در طی این فتح کردن موضوعات زیادی رو به دلیلی مثل محدودیت‌های زمانی و مالی و علاقه نداشتن نادیده می‌گیرم، با برخی صرفا جهت اطلاع در حد عنوان و توضیحات پایه آشنا میشیم، در برخی وارد موضوع میشیم و تا حدی هم پیش میریم ولی عمیق نمی‌شیم و نهایتا  ممکن هست تا اعماق برخی از بخش‌ها پیش بریم و یکی از افراد خبره در اون ریز موضوع بشیم.بخشی‌ از شاخه‌های مهندسی نرم‌افزارتلاش برای فراگیری کل شاخه‌ها و به عبارتی علامه همه امور شدن با وسعتی که علوم این روزها پیدا کردن تقریبا نشدنی، نگاهی کمالگرایانه و مخرب هست و ما باید بصرفه‌ترین طول و عمق رو دنبال کنیم. طول یعنی چه موضوعاتی رو برای آشنایی انتخاب کنیم و عمق یعنی در این شاخه‌ها تا چه میزان عمیق بشیم.سبک‌های متفاوت یادگیری: برخی علاقه دارن در یک شاخه عمیق بشن (I-shaped). مثلا فردی ممکن هست در شاخه و مسیر ریاضی و مهندسی، مهندسی کامپیوتر، مهندسی نرم‌افزار، توسعه وب،‌ توسعه فرانت‌اند وقت بذاره و عمیق بشه.  وقتی از این فرد سوالات مرتبط با شاخه عمیق شده بپرسید اغلب بسیار حرفه‌ای و کارامد جواب میده ولی اگر سوالاتی از سایر شاخه‌ها بپرسید احتمال نتونه جواب چندان به درد بخوری بده. در واقع این فرد انتخاب کرده در مسیر کسب دانش و تجربه خودش طول کم ولی عمقی زیاد داشته باشه.برخی هم علاقه‌‌های زیاد و لیست بلند‌ بالایی از موضوعات منتخب دارن (Generalist). این فرد گستره وسیع و طول بلندی از موضوعات رو انتخاب کرده ولی به دلایلی مثل محدودیت زمانی،‌ نداشتن تمرکز کافی و ... تقریبا در هیچ کدام از این موضوعات یک شخص عمیق و برجسته نیست ولی در این موضوعات می‌تونه راهکارهایی رو ارائه بده که شاید خیلی حرفه‌ای نباشه ولی در سطوح مقدماتی کارایی داره.  اصطلاحا به این افراد میگن آچار فرانسه گفته میشه و اغلب عنوان سطح تخصصی هم ندارن و صرفا با برچسب &quot;آشنا با ...&quot; معرفی میشن و میشه گفت این گروه تقریبا مخاطب این مطلب نیستن.گروهی هم ترجیح میدن ترکیبی از دو گروه بالا باشن (T-shaped). این افراد هم مانند گروه اول روی یک موضوع مشخص متمرکز و عمیق میشن و هم مانند گروه دوم فقط به این شاخه اکتفا نکردن و در چند شاخه دیگه هم دستی بر آتش دارن. انواع مدل‌های کسب دانش و تجربهاهمیت مسیر: این که ما در طی این عمیق شدن از چه مسیری رفتیم هم مهم هست. مثلا فردی تصمیم میگیره تا در شاخه Front-End عمیق بشه و فرض کنید دانش و تجربه خوبی هم پیدا میکنه ولی به واسطه این که هیچ وقت نشده که در یک پروژه چارت‌های سه بعدی پیاده سازی کنه و چون یادگیری و اجرای این چارت‌ها زمانبر هستن مسیر متخصص شدنش هیچ وقت از چنین موضوعی که مربوط به شاخه تخصصی اون هست نگذشته و به عبارتی درست هست که اون در اکثر موضوعات Front-End فردی متخصص هست ولی در این موضوع خاص مبتدی حساب میشه و این رو نباید نادیده گرفت!هم پوشانی شاخه‌ها و زیر شاخه‌های علوم: نباید از این نکته مهم هم غافل شد که شاید ما برای شاخه‌ها و زیر شاخه‌ها عنوان‌ها و به نوعی مرزهای انتزاعی قطعی و تفکیک شده در نظر می‌گیریم ولی واقعیت اینطوری نیست. ما در لبه‌های تقریبا تمام شاخه‌ها یک ترکیب و پیوستگی داریم. مثلا وقتی وارد حوزه طراحی رابط کاربری وب میشی از یک طرف با علم کامپیوتر درگیر هستی از یک طرف دیگه هنر و از یک طرف دیگه بحث‌های روانشناسی. گاهی این هم‌پوشانی مثل این مورد گفته شده، به نوعی الزامی و همیشگی هستن یعنی شما نمی‌تونی طراح رابط کاربری باشی ولی هیچ درکی از هنر نداشته باشی و ادم موفقی هم بتونی باشی! اما گاهی این هم پوشانی خیلی وابسته به موقعیت و موضوع میشه. مثلا یک فرد توسعه دهنده Back-End در یک بازی اندرویدی بوده حالا در پروژه جدید قرار هست که یک پلتفرم حسابداری رو توسعه بده! در واقع مسیر و سبک یادگیری فرد در این پروژه هم کارایی داره ولی چون فرد در این پروژه نیاز هست که علاوه بر برنامه‌نویسی درک صحیحی از یکسری مفاهیم، ساختارها و فرمول‌های ریاضی و اقتصادی داشته باشه به دلیل نداشتن دانش در بخش هم‌پوشان سطح اون پایین‌تر ارزیابی میشه.نقشه‌ای از وابستگی و ارتباطات علوممقایسه در محل تقاضا: تا اینجا متوجه شدیم که ما چون با دریایی بی‌انتهایی از علم رو به رو هستیم امکان یادگیری همه شاخه‌ها و زیر شاخه‌ها وجود نداره پس ما بسته به علاقه و شرایطی که داریم یک سبک یادگیری رو دنبال میکنیم که یا سراغ عمیق شدن میریم یا نه! اگر نرفتیم که خب سطح معنی نداره صرفا یک لیبل هست که میگیم با این موضوع آشنا هستیم ولی اگر عمیق شدن جزئی از برنامه یادگیری ما باشه بعدش این مهم میشه که ما در چه موضوعاتی عمیق شدیم و چه مسیری رو طی کردیم و ایا این مسیر از ناحیه‌های هم پوشان مورد نیاز هم رد شده یا نه و این موارد در مقایسه با نیازها و انتظارات محل تقاضا سنجیده میشه. تغییر سطح تخصص بسته به نیازمندی‌های پروژهدر واقع این محل تقاضا هست که تعیین می‌کنه ما چه سطحی داریم یا به عبارتی سطح نسبت به محل کار ما تعریف میشه. ما می‌تونیم وارد جذب شرکت و پروژه‌ای بشیم که مشابه اون رو بارها و بارها توسعه دادیم و تقریبا همه چیز آشناست و سطح فوق تخصص و ارشد رو کسب کنیم و در همون زمان اگر ما رو به شرکت دیگری ببرن به سطح متوسط یا مبتدی تغییر وضعیت پیدا کنیم. مثلا شما بارها و بارها Front-End و قالب سایت‌های وردپریسی رو باکیفیت و ظرافت خیلی خوبی توسعه دادید و در اون خبرگی خوبی هم پیدا کردید. اگر شما از شرکت فعلی به شرکتی بردید که اونجا هم قرار باشه با همون ساختارهای سابق برای سایت وردپرسی اون شرکت قالب توسعه بدید سطح شما متخصص و ارشد می‌تونه در نظر گرفته بشه و اما اگر شم از این شرکت به یک شرکت دیگر برید که پروژه اون‌ها قرار هست تحت NextJs, ReactJS و Tailwind توسعه داده بشه که شما اصلا با این  ساختارها کار نکردید سطح شما می‌تونه متوسط یا مبتدی ارزیابی بشه.  سطح تخصص با مکان رابطه مستقیم دارد: سطح تخصص ما به میزان تطابق طول،عمق، مسیر و هم پوشانی دانش و تجربه کسب شده در گذشته به نیازها و انتظارات محل تقاضا بستگی دارد.پارامتر دوم: زمان و حافظهمغز ما انسان‌ها هم مثل کامپیوترها هست!‌ حافظه سریع کوتاه مدت (RAM, CPU CACHE,...) و حافظه کند بلند مدت(SSD, HDD,...) داریم البته با این تفاوت که در حافظه‌های الکترونیکی داده‌ها دقیق و ثابت هستن یعنی داده‌ای که به اون برای ذخیره شدن میدیم یک ماه بعد در فرایند بازیابی دقیقا مشابه همون داده زمان ذخیره سازی هست ولی مغز ما داده‌ها رو به صورت جز‌ءهای انتزاعی ذخیره و هنگام بازیابی اون‌ها رو ترکیب می‌کنه یا به عبارتی در لحظه با ترکیب اجزا خلق می‌کنه این باعث میشه تا ما نتونیم در بلند مدت اکثر مشاهدات و تجربه‌های خودمون رو دقیقا مشابه لحظه ذخیره سازی، بازیابی کنیم و اغلب دست خوش تغییراتی میشن.موضوع ذخیره و بازیابی داده‌ها در مغز و نحوه کارکرد ذهن به نظرم موضوع جذابی هست که در کتاب‌های تفکر سریع و آهسته اثر دنیل کانمن و آموس تورسکی، کتاب ماشین تجربه اندی کلارک و کتاب اثر انتظار دیوید رابسن میشه در موردش اطلاعات خوبی کسب کرد ولی برای مطلب ما همین قدر کافی هست که بدونیم مغز اغلب دنیا رو اونطور که هست ذخیره و بازیابی نمی‌کنه بلکه اونطور که ما هستیم و با انتظارات و تجربه‌های قبلی ما مطابقت داره بازیابی می‌کنه. به عبارتی مغز ما بسیار سریع این سرعت کارامدی خوبی به ما میده ولی خب در بعضی موارد هم ممکن هست خطاهایی داشته باشه که تحت عنوان خطاهای شناختی از اون یاد میشه. ما وقتی در مورد موضوعی که به مغز مرتبط هستن صحبت می‌کنیم قطعا باید نحوه کارکرد اون هم توجه داشته باشیم این وابستگی رو نادیده نگیریم.تصویری از شبیه سازی یک سیناپس کاهش تسلط در طول زمان: وقتی ما مدت طولانی‌ای با موضوعی که در گذشته روی اون تمرکز داشتیم و حتی ممکن هست در اون خبره هم شده باشیم، ارتباط نداشته باشیم تسلط ما بر اون موضوع کاهش پیدا می‌کنه و بازیابی اون نیاز به تمرکز و تلاش خواهد داشت. بخش‌هایی که تکرار و تسلط بیشتری بر اون‌ها داشتیم ممکن هست با اولین تلاش‌ها سریع بازیابی بشن ولی بخش‌هایی که خیلی کم تکرار شدن و خیلی در اون‌ها عمیق نشده بودیم نیاز به تلاش بیشتری داشته باشن و در اخر هم  ممکن هست ناقص و ناکارامد بازیابی بشن و لازم باشه تا مجددا مشابه وقتی که هیچ اشنایی با اون نداشتیم رفتار کنیم و از ابتدا یاد بگیریم.Studying for Memory &amp; Comprehensionداده‌های واسط نامرئی: وقتی ما با موضوعی آشنا میشیم و سعی می کنیم در اون عمیق بشیم و بعد اون رو بکار بگیریم در طی این پروسه ما بیشترین فشار رو به حافظه کوتاه مدت خودمون میاریم و ولی مواردی که خیلی به نظرم ما مهم بودن با تاکید، توجه و تکرار ما به حافظه بلند مدت هم راه پیدا کردن. ترکیب داده‌های اصلی در حافظه بلند مدت و با داده‌های سطحی در حافظه کوتاه مدت به ما قدرت و سرعت خوبی در اجرا میده. داده‌های واسط نامرئیوقتی ما برای مدتی دست از فعالیت در اون موضوع بزنیم، داده‌های مرتبط با اون موضوع که در حافظه کوتاه مدت بودن حذف میشن و فقط داده‌های اصلی که در حافظه بلند مدت باقی می‌مونن. در پروسه حذف اطلاعات از حافظه کوتاه مدت و ثبت موارد مهم در حافظه بلند مدت همیشه اطلاعاتی هستن که نادیده گرفته و حذف میشن و در ظاهر ممکن هست خیلی مهم به نظر نرسن ولی برای فعالیت سریع و دقیق ما لازم هست و حذف و عدم ثبت این‌ها باعث میشه ما در آینده حتی وقتی خیلی از چیزها رو بازیابی کردیم سرعت اجرای ما از گذشته کندتر باشه چون دوباره باید این اطلاعات واسط نامرئی خلق و در حافظه کوتاه مدت قرار بگیرن.زمان مقدم بر مکان:  فردی به مدت چهار سال روی یک پروژه بوده ولی بخشی از این پروژه فقط در ابتدای آن طراحی و توسعه پیدا کرده و در ادامه اصلا پیش نیامده که مجددا بازبینی و تغییری بکنه به همین دلیل با گذشت زمان مشمول قاعده کاهش تسلط در طول زمان شده. به عبارتی درست است که مکان طبق توضیحات پارامتر اول عامل مهمی در تعیین سطح هست ولی نباید اینطور برداشت کنیم که چون مکان رو تغییر ندادیم پس سطح ما هم تغییر نمی‌کنه! زمان مقدم بر مکانبروزرسانی‌ها: تقریبا همه علوم مدام در حال توسعه و بروزرسانی هستن و در برخی نرخ بروزرسانی‌ها به حدی هست که اگر چند سال دور باشیم رسما دانش گذشته ما منسوخ و ناکارامد خواهد بود! به عبارتی حتی اگر در گذشته عمیق و در سطح ارشدی خبره هم بوده باشیم و خوش‌شانس باشیم و تمام اون‌ها رو بازیابی کنیم دوباره به سطح متخصص ارشد باز نخواهیم گشت چون مطالب جدید رو نمی‌دونیم و نیاز به یادگیری دارن.نرخ بروزرسانی استفاده از سطح تخصصی در چه شرایطی درست هست؟اگر بخواهیم کل توضیحات بالا رو در یک بند خلاصه کنیم می‌تونی بگیم، اگر زمان و مکان رو به توضیحات سطح تخصصی اضافه کنیم بیان سطح مشکلی نداره. توضیحاتی مثل:الان توسعه دهنده ارشد Front-End  در شرکت  اسنپ هستمدو سال پیش در دیجیکالا به عنوان mid-level پایتون مشغول به کار بودمیک سال هست که بعنوان Senior software developer در شرکت لرنیت مشغول بکارمدقت داشته باشید که شاید شرکت عنوان‌های تخصصی‌ای برای شما در نظر بگیره و این موضوع طبق توضیحات چون وابستگی زمانی و مکانی داره مشکلی نداره ولی شما نباید این عنوان رو بدون ذکر محل شرکت و یا بعد از رفتن از اون شرکت بکار ببرید. مثلا این عنوان در صورت تایید شرکت درست هست Senior Software developer at learnit.ir تا وقتی که در شرکت Learnit مشغول به کار باشید و فردای روزی که از شرکت خارج شدید عنوان شما میشه Software developer.چرا در آگهی‌ها سطح تخصص بیان میشه: مثلا استخدام Senior Front-End developer در کافه بازار؟وقتی در آگهی عنوان سطح مطرح میشه معنی اون این هست که ما پس از سپری شدن دوره اشنایی شما با کد‌ها، انتظارات و تسک‌های ما و تلاش شما برای فراگیری و مسلط شدن بر اون موضوعات که ممکن هست چند ماه طول بکشه انتظاری که داریم این هست شما در اون سطح فعالیت کنید. مثلا در آگهی اسخدام یک  Senior Senior Frontend Engineer انتظار مجموعه این هست که بعد از چند ماه شما تسلط کافی برای انجام تسک‌های پیشرفته Front-End مورد نیاز اونها رو داشته باشید و حتی می‌تونه این معنی رو هم به صورت مخفی داشته باشه که شما باید بتونید مسئولیت تیم توسعه Front-End رو هم به عهده بگیرید و ارشد این گروه بشید.در واقع شرکت‌ها در آگهی انتظار ندارن که شما فردای روزی که استخدام شدید در اون سطح ذکر شده باشید بلکه انتظار دارن در زمانی معقول به اون سطح برسید. اگر هم دیدید که کارفرمایی انتظاری خلاف این داره بدونید که اون فرد یا مجموعه مبتدی هستن و این بستگی به نظر شما داره که با یک مجوعه کار بکنید یا نه ولی آگاه باشید که ریسک بلایی داره.جمع بندیسطح تخصصی به دو پارامتر زمان و مکان با توضیحات و جزئیاتی که گفته شد بستگی داره. این که من عنوان خودم رو به بدون ذکر زمان و مکان بیان کنم درست نیست و باعث میشه تا در پروسه‌های جذب و استخدام در کشف واقعیت دچار خطا بشم و تیم جذب رو هم به خطا بندازم و هزینه این خطا به صورت روانی و مالی به من تحمیل خواهد شد.درک تغییر سطح ما نسبت به زمان و مکان به ما کمک می‌کنه تا در دام معیارهای سخت‌گیرانه، تحریف ترجیح و ناتوانی در درک و کشف واقعیت نیفتیم و مسیر پیشرفت ما هموارتر بشه. حتی من توضیحات بالا رو برای عناوین رسمی و اکادمیک مثل مهندس، دکتر و فوق لیسانی، کارشناس،‌فوق تخصص و ... هم درست می‌دونم. مثلا فردی سی سال قبل دکترای ادیبات فارسی گرفته و بعد از دانشگاه هم رفته شده شهردار، استاندار و نماینده مجلس و در طی این دوران هم حتی با یک صفحه از موضوعات تخصصی دکتراش هم رو به رو نشده! واضح هست که بعد سی سال بدون مرور دانش فرد از یک فوق دیپلم اون رشته هم دانش کمتری داره ولی مردم اون رو هنوز دکتر صدا می‌کنن! باید دید واقعیت و درست بودن برای ما مهم هست یا رایج و نادقیق بودن!</description>
                <category>محمد ابراهیمی اول</category>
                <author>محمد ابراهیمی اول</author>
                <pubDate>Fri, 13 Sep 2024 14:29:22 +0330</pubDate>
            </item>
                    <item>
                <title>شکست، فقط اگر در یک مسیر حرکت کنیم سود هست</title>
                <link>https://virgool.io/@ebrahimiaval/%D8%B4%DA%A9%D8%B3%D8%AA-%D9%81%D9%82%D8%B7-%D8%A7%DA%AF%D8%B1-%D8%AF%D8%B1-%DB%8C%DA%A9-%D9%85%D8%B3%DB%8C%D8%B1-%D8%AD%D8%B1%DA%A9%D8%AA-%DA%A9%D9%86%DB%8C%D9%85-%D8%B3%D9%88%D8%AF-%D9%87%D8%B3%D8%AA-mmwbegztxt7w</link>
                <description>شکست اگر در یک مسیر حرکت کنیم سود هست نه وقتی شاخه به شاخه می‌پریم!اگر شکست رو هزینه دادن بابت یادگیر تعریف کنیم فقط وقتی این تعریف درست هست که بعدا این یادگیری در دفعات بعدی تکرار سودی بیشتر از اون هزینه خلق کنه (سود خالص) یا از پیش امدن مجدد این هزینه جلوگیری کنه (سود حاصل از ضرر نکردن) مگر نه شما هزینه بدی که یک چیز هم یاد بگیری که بعد کلا اون مسیر و جاده رو ببوسی بذاری کنار این دقیقا چطور سودی هست؟! نهایتا بشه این سود رو اگر کسی حاضر بود بابتش پول پرداخت کنه به شخصی که دوباره می‌خواد این مسیر رو بره بفروشی یا اگر یکی از افراد نزدیکت خواست تکرار کنه آگاهش کنی تا اینطور شاید بخشی از ضررت مادی یا معنوی جبران بشه!آزموده را آزمودن خطاستشاید بگید خب شاید همین که دست می‌کشیم از ادامه اون مسیر غلط سود هست چرا اینطور می‌گی! چون آزموده را آزمودن خطاست! مثلا یکی بیاد معتاد بشه اونم در حالی که این همه تجربه ثابت شده در غلط بودن شروع کردن این راه موجود هست اونم با این منطق که، نه! من اینطوریم که حتما باید خودم تجربه کنم اعتمادی به تجربه بقیه ندارم شاید اونا خوب معتاد نشد، من بلدشم می‌دونم چطور بکشم که هم فضا رو لمس کنم و هم حال کنم و زندگی کنم و زندگیم به فنا نره!من بلدشم!حالا گفتم اعتیاد ولی همین الگو رو خیلی‌ها برای خلق کسب و کارهای به اصلاح رویایی و خلاقانه  ولی در حقیقت احمقانه هم استفاده می‌کنن! یا برای شروع کارهایی که قبلا خیلی‌ها تجربه کردن و دیدن این مسیر اخر و عاقبت نداره ولی این با منطق این که من یه ایده جدید دارم و اونا بلدش نبودن و من متفاوت هستم وارد میشن و یک تابوت به تابوت‌های دیگه اضافه می‌کنن!جوینده یابندستبله خیلی از این شکست‌خورده‌های با تجربه هم هستن که این تجربه شکست رو عمومی نکردن و نمی‌دونیم یا در خیلی از موارد هست که تجربه‌ای که ازش حرف میزنیم اصلا مثل تجربه اعتیاد اخر و عاقبت نداره اونقدر عمومی نیست که شما یه گوگل بزنی پیدا کنی! در این طور موارد باید خودت استین بالا بزنی و بگردی و خودت شخص با تجربه رو پیدا کنی و در مواردی اصرار کنی و هزینه‌ای داره بپردازی تا نهایتا وقت‌ بذاره و بهت بگه! به حد کافی تلاش کنیدبه هر جهت وقتی یک مسیر جدید رو شروع می‌کنید مخصوصا وقتی که اندکی بزرگ، پرهینه یا طولانی مدت محسوب میشه قبل از هر اقدامی باید از تجربه‌های عمومی شده استفاده کنید و ریسک شروع رو بسنجید و اگر چیزی پیدا نکردید خودتون بگردید و ادمی که ممکن هست این مسیر رو رفته باشه رو پیدا کنید و از اون تجربه رو بکشید بیرون و ریسک اقدام رو بسنجید و اینطور هم نباشه که حرف های یکی رو شنیدیم پس کافیه یا بگید گشتم کسی نبود من که می‌گم این ایده من خاص و جدیده فقط یکی بود یه چیزایی در مورد فلان می‌گفت ولی خیلی به درد نمی‌خورد! نه اتفاقا باید این مرحله رو اینقد جدی بگیرید و وقت بذارید که به شکل محسوسی بشه گفت روی جمع آوری تجربه‌ها وقت گذاشتید چون نمیشه صرفا با تایید یا رد یک شخص نتجیه بگیریم باید نمونه‌ها کافی باشه تا اماری قابل اعتماد کشف بشه و دوتا تلاش هم کردید و کسی نبود سریع بیخیال نشید و خودتون رو بابت خلاقانه و بدیع بودن تشویق کاذب بکند!سنجش ریسکگفتم ریسک! خود این سنجش ریسک بحث بزرگی هست ولی اینجاش به این مطلب ما مرتبط میشه که در منطق عقلانی بحث مدیریت ریسک مرسوم هست که میگن اعداد محدود شده‌ای رو میگن مثلا شخص نهایتا باید روی ۳۰٪ دارایش ریسک کنه و برای ۷۰٪ دیگه باید قدم‌هایی برداره که اگر بدون ریسک هم نیستن ولی بسیار کم ریسک هستن. این یعنی وقتی شما می‌خوای فلان زبان برنامه نویسی رو شروع کنی تا برنامه نویس بشی، یا فلان مقدار پولت رو در فلان بازار سرمایگذاری کنی یا بری کسب و کار بزنی یا حتی مواردی مثل خرید لباس از یک منطقه خاص در یک شهر غریبه باید اول بری تجربه‌ها رو جمع آوری کنی بعد نسبت ریسک به سود رو محاسبه کنی و بعد به میزان شدت این ریسک اقدام کنی حالا اگر شکست خوردی میشی یک تجربه جدید که خود این کلی ارزشمند هست چون قبلا گشتی و کسی این رو نداشته و دوما چون این مسیر اساسش درست بوده و اینطور نبوده که مثل اعتیاد همون اول همه بگن کلا این مسیر خراب هست نرو پس بعدا هم تکرار می‌کنی این تجربه تو رو نسبت به بقیه جلوتر میندازه و ادم قوی‌تر و پخته‌تری ازت میسازه.مثال !مثلا شخصی سال‌ها شاگرد طلا فروشی بوده و می‌خواد طلا فروشی بزنه و طی بررسی مسیر که همون زدن طلا فروشی هم هست واسه این شخص مثبت ارزیابی شده و از اون طرفم ریسک‌های که این کار داره مثل نوسانات ارز و اونس، احتمال تقبلی بودن و ... رو هم از واکشی تجربه دیگران و هم از تجربه فعالیت خودش لیست کرده حالا از لیست کردن اونها ریسک نهایی رو ارزیابی می‌‌کنه و اقدام می‌کنه و با کمترین دردسر کارش رو پیش می‌بره! می‌گذره و سال‌ها بعد یک نوع خاصی از زیورالات جدید راهی بازار میشه که طرفدار هم پیدا می‌کنه و این هم روی الگوی قدیمی‌ای که یاد گرفته بوده که هر وقت بازار سمت محصول جدیدی رفت قدیمی‌ها رو برای این که هم نمونه هم بشه از این ترند سود کرد با اجرت پایین‌تر و در صد سود کمتر بده بره شروع می‌کنه به حراج کردن قدیمی‌ها و بعد اون‌ها رو تبدیل می‌کنه به مدل های جدید! اما بعد مدتی می‌فهمه این طلاهای جدید بخاطر شرایط ساخت خاصی که دارن بعد چند ماه تغییر رنگ میدن و تیره‌تر میشن و چون از فلان نگین‌های خاص هم استفاده شده امکان اسیدشویی نیست و با رنگ جدیدش باید کنار امد!این یک شکست هست! از اون طرف کلی طلای قدیمی رنگ ثابت که ۳ سال هم می‌موند کاریش نمی‌شد و اگرم می‌شد یه اسیدشویی می‌کردی عین روز اولش میشد رو طرف داده و اینا رو گرفته از این طرفم وقتی ۶ ماه بگذره کسی نخره تیره میشه و وقتی هم تیره بشه دیگه کاریش نمیشه کرد مگر این که بره دست طلاساز و با کلی اجرت بازسازی بشه و از اون طرفم مشتری تیره‌ها رو نمی‌خره! این تجربه رو نه کسی داشت و نه هم می‌شد پیش بینیش کرد چون هیچ وقت تا حالا چنین اتفاقی رو کسی تجربه نکرده بوده!این میشه شخص یاد می‌گیره از این به بعد چون احتمال داره طلاهای جدید مشکلاتی عجیب داشته باشن اول مقدار کمی از اون‌ها رو بیاره تا هم از بازار جا نمونه و هم ببینه ایا این‌ها واقعا گزینه خوبی برای خرید عمده و بردن فعالیت به این سمت هستن یا نه! این میشه یک شکست ارزشمند و اون هزینه‌ای هم که داده به شکل سود حاصل از عدم تکرار هزینه به شخص چون مسیرش رو ادامه میده بر می‌گرده. اینجا این هم فرض شده که شخص می‌دونسته نهایتا باید ۳۰٪ طلاهای قدیمی رو تبدیل به طرح جدید کنه و نهایتا ۳۰٪ ضرر کرده و اونقدر ناشیانه رفتار نکرده که کلا نابود بشه و امکان ادامه دادن مسیر ازش گرفته بشه.هزینه بدید!چون تجربه‌ها هزینه دارن اغلب افراد مخصوصا کسایی که هزینه‌های سنگین دادن میل ندارن اون رو رایگان در اخیتار بقیه بذارن و این مسئله عدم اشتراک تجربه بین افراد قدیمی‌تر و بازاری‌های کلاسیک بیشتر هم هست چون همون طور که توضیح دادم یه جورایی برگ برنده حساب میشه! اما خوشبختانه در شغل‌های جدید و اونهایی که امکان دسترسی به فضای مجازی واسشون مقدور هست در سال‌های اخیر بیشتر شاهد اشتراک تجربه هستیم و شرایط خیلی بهتر شده ولی همچنان نباید صرفا به گوگل و جستجوی سطحی در اقدام‌های اساسی مثل انتخاب رشته، انتخاب مسیر شغلی، زدن کسب و کار و ... بسنده کرد و باید خودتون استین بالا بزنید و مو رو از ماست بیرون بکشید و اگر جایی لازم به هزینه‌ای جزئی نسبت به هزینه احتمالی نهایی از دادن این هزینه فرار نکنید چون بعدا به احتمال زیاد مجبور خواهید شد به شکل و در جای دیگری با رقم بالاتری این هزینه رو بپردازید.جمع بندیشکست مادامی سود هست که هزینه حاصل از وقوع اون به آدم برگرده و نون این شکست رو بشه خورد مگر نه هزینه‌ای بیش نیست که بی دلیل داده شده و ما رو در زندگی به جای جلو انداختن به عقب پرت می‌کنه. کلا همه شکست خوردن‌ها عقب افتادن جزئی از ذاتشون هست پس باید با جمع‌اوری تجربه‌های دیگران اونم با حجم و تعداد قابل قبول یک تحلیل آماری درست از ریسک‌ها بدست اورد و بعد با رعایت اصول ریسک و محدودیت‌های اقدام بر اساس نسبت ریسک به سود کار رو شروع کرد تا وقتی شکست خوردیم و به عقب پرت شدیم اینقدر پرت نشیم که بمیریم و از بازی حذف بشیم بلکه فقط شناختی نسبت به جاده پیش رو به ما بده تا دفعه اول اگر از راست رفتیم و به عقب پرت شدیم اینبار حداقل دوباره در اون موقعیت سمت راست نریم و چپ رو امتحان کنیم. حالا اگر در رفتن به سمت چپ هم شکست خوردیم چون این شکستی جدید و بدیع بود و کسی تجربه نکرده بود بشه برگ برنده ما نسبت به بقیه و نهایتا هم دفعه بعدی می‌دونیم  علاوه بر راست چپ هم نریم و بالا رو امتحان کنیم و اینبار اگر موفق شدیم هزینه تلاش‌های قبلی رو جبران کنیم و به چنین شکست‌های میگن شکست‌های موفقیت آمیز و ارزشمند.محمد ابراهیمی اول ۱۴۰۲/۱۰/۰۹</description>
                <category>محمد ابراهیمی اول</category>
                <author>محمد ابراهیمی اول</author>
                <pubDate>Sat, 30 Dec 2023 11:25:30 +0330</pubDate>
            </item>
                    <item>
                <title>چرا مدرس الزاما نباید مجری هم باشه!</title>
                <link>https://virgool.io/@ebrahimiaval/%DA%86%D8%B1%D8%A7-%D9%85%D8%AF%D8%B1%D8%B3-%D8%A7%D9%84%D8%B2%D8%A7%D9%85%D8%A7-%D9%86%D8%A8%D8%A7%DB%8C%D8%AF-%D9%85%D8%AC%D8%B1%DB%8C-%D9%87%D9%85-%D8%A8%D8%A7%D8%B4%D9%87-wkvczxbq1vml</link>
                <description>کَل اگر طبیب بودی سر خود دوا نمودی. تو اگر استاد بودی درآمدت از فروش آموزش نبود و به جاش می‌رفتی کار می کردی!این تفکر غلطی هست که من هم مدتی درگیرش بودم و فکر می‌کردم تنها کسی باید آموزش بده که خودش توانایی کار اجرایی قوی داره یا به عبارتی کسی باید آموزش بده که شغل و درآمد اصلی خودش اجرای همون آموز‌ش‌ها هست و آموزش یک فعالیت جانبی واسش به حساب میاد!غلط بودنش از اونجا برای من روشن شد که خودم هم تلاش کردم آموزش بدم ولی متوجه شدم بحث آموزش اولا یکسری توانایی‌ها مثل فن بیان و مهارت‌های تدریس و ... لازم داره که اصلا ربطی به عنوان موضوع آموزشی که میدیم نداره (مدرس بودن خودش یه تخصص جدا از تخصص ماست خیلی‌ها در کارشون خبره هستن ولی تونایی انتقال دوتا چیز ساده به یک نفر دیگه رو هم ندارن)، دوما یک مدرس باید وقت زیادی رو بذاره تا روش تدریس و محتواش رو آماده کنه و مدام هم در حال مطالعه باشه تا محتواها رو به روز نگهداره و این وقت در پس زمینه فرآیند آموزش اتفاق می‌افته که اغلب از دید دانشجوها مخفی هست و از اون طرفم فرد شاغل اغلب چنین وقتی رو در طی انجام کار اجرایش نداره، اون نهایتا وقت‌های آزاد محدودی دارن که نهایتا به درد انتقال تجربه‌‌ها، توصیه‌ها و ایده‌ها در یک ارائه کوتاه مدت بخوره مثلا یک کلیپ ۲۰ دقیقه‌ای یوتیوب  یا یک ارائه ۱۵ دقیقه‌ای در پلن یک سمینار مرتبط (البته گروهی هم هستن که راهکاری برای این چالش پیدا کردن که در انتهای مطلب توضیح دادم).از اون طرفم به همین سبک در کار اجرایی شخص باید توانایی‌هایی رو داشته باشه که برای یک مدرس تسلط بر اون‌ها الزام نداشته باشه، مثل کشف و رفع باگ‌های پروژه‌ که برای مجری الزامی هست ولی برای مدرس مزیت به حساب میاد چون مدرس اصل محتوا رو از منابع استخراج میکنه یعنی تولید از چیزی که هست ولی مجری یک دفعه در پروژه به باگی میخوره که در موردش جایی چیزی نوشته نشده و باید این کشف و حل مسئله رو خودش پیش ببره و مدرس در این زمینه فقط با آموزش روش‌های عمومی کشف و حل باگ می‌تونه به شخص کمک کنه.آموزش پایه نه کارآموزیهمینجا لازم هست توضیح بدم که منظور من از مدرس و دوره آموزشی همون آموزشی‌های تئوری و مفهومی و بنیادین هست و نه آموزش‌هایی که یک مربی در کارگاه آموزشی یا محیط واقعی به عنوان مربی کارآموزی با در معرض عمل گذاشتن دانشجوها تلاش داره بشون یاد بده. چنین فضای آموزشی‌ای رو من کارآموزی می‌بینم و مرحله‌ای بعد از یادگیری بنیادین مورد بحث ما هست.دید عمیق ولی محدود به بخش‌های خاص در مقابل دید وسیع و سطحیدر اجرا ما با همه بخش‌هایی که در یک آموزش جامع میاد کار نمی‌کنیم پس طبیعی‌ هست که یادمون بره یا حداقل دقیق یادمون نباشه مثلا کسی که در حوزه توسعه یک نرم افزار حسابداری چند سالی هست فعالیت اجرایی داره شاید به بحث‌های استریم صوت و ویدیو مسلط نباشه که هر وقت ازش بپرسید بتونه سریع پاسخ بده بلکه اون به زمانی برای مرور یا یادگیری نیاز داره ولی برای تولید یک آموزش جامع لازم هست این بخش هم توضیح داده بشه و مدرس باید حتما وقت بذاره و درک کنه و سپس آموزش بده هر چند لازم نیست به اعماق همه سرفصل‌ها بره.از اون طرفم شخص مجری چون وقت زیادی روی تولید نرم افزار حسابداری گذاشته به مشکلات و چالش‌های خاصی در اون موضوع رسیده که اینقدر منحصر به فرد و کم اتفاق هستن و کمتر کسی ممکن هست به دونستن اونها نیاز پیدا کنه که بهتره در محتوای آموزش قرار داده نشه چون بهترین وقت مراجعه به اونها همون وقت برخورد با اونها هست. به عبارتی نکات عمیق در یک پروژه خاص رو فرد مجری یاد می‌گیره تا چالشش رو حل کنه و بعد از اون تخصص در اون حوزه خاص بالاتره میره چون چیزهای عمیق‌تری رو میدونه.البته برخی مدرس‌ها برای این موضوعات خیلی تخصصی میان دوره‌هایی رو برگذار میکنن ولی اغلب هم اینطوری هست که کسی که در موضوعی خیلی خاص و عمیقی تخصصی اموزش تولید میکنه فقط مدرس همین‌ موضوعات هست و مدرس دیگری موضوعات و دوره‌های عمومی اون شاخه رو تدریس میکنه که الزاما هم نیاز نیست همه این مطالب تخصصی رو بدونه (همین که مروری کرده باشه شاید براش کافی باشه). الزامی نیست ولی بهتر استبه نظرم بهترین حالت برای یک مجری این هست که تسلط کافی در اجرا داشته باشه ولی با اصول تولید محتوا و ارائه مطلب هم آشنا باشه و گاه به گاه برای شبکه سازی، برندینگ، اشتراک تجربه و ... ازش استفاده کنه و از اون طرفم شخص مدرس باید تسلط کافی رو روی تولید، ارائه و بروزرسانی آموزش داشته باشه ولی خوبه که بتونه تجربه‌های اجرایی گاه به گاه و کوتاه هم داشته باشه تا هم نیازهای خودش رو برطرف کنه و هم بتونه تجربه‌های از فرایند اجرا به آموزشش اضافه کنه و هم به عنوان یک جریان درآمدی جانبی این توانایی رو تو استین داشته باشه شاید یه روزی فرصت طلایی در اجرا براش پیش امد که از تدریس بهتر بود :)تناقض مدرس‌-مجری‌ها!چیزی که اینجا تناقض ایجاد میکنه وجود مدرس‌هایی هست هم آموزش میدن و هم فعالیت جدی در آموزش دارن.اما این گروه چطور چالش‌های توضیح داده شده رو حل می کنن؟دو راه حل برای چالش‌های مدرس بودن یک مجری من با بررسی افرادی که به این سبک می‌شناختم متوجه شدم که این‌ها به طور کلی از دو روش استفاده می‌کنن. روش اول استفاده از یک تیم تولید و حتی مدیریت جانبی هست. اونها دستورات مدرس رو پیگیری میکنن و نهایتا مدرس نقش مدیر این سیستم رو ایفا میکنه. این تیم گاهی مخفی هست و گاهی خیلی آشکار که در مواردی که تیم تهیه، تولید و مدیریت آشکاری وجود داره که شرح ما واضح هست ولی اگر دیدید مدرسی خیلی مشغول اجرا هست و ظاهرا وقت خاصی نداره ولی از اون طرفم آموزش‌های خوبی تولید می‌کنه شک نکید یک یا چند دستیار مخفی داره که به اون کمک می‌کنن.خالی از لطف نیست بگیم که مدرس متمرکز هم می‌تونه تیم داشته باشه که بودنش مزیت حساب میشه نه طبق تعریف بالا یک الزام.روش دوم، Stop-Start هست! در روش قبلی همه چیز موازی پیش می‌رفت یعنی همزمان که شخص مدرس مشغول کارهای اجرایی بود دستیار تولیدش هم در حال فعالیت بود. اما گاهی پیش میاد به هر دلیلی مدرس دستیار و تیم تولیدی نداره و خودش شخصا و انفرادی می‌خواد این کار رو انجام بده در این روش شخص فعالیت اجرایی رو برای مدتی متوقف و محدود می‌کنه و اصل زمانش رو روی تولید محتوا و فعالیت‌های آموزشی می‌ذاره و کارهای اجرایی به بعد موکول میکنه و پس از اتمام دوره مجددا به حالت قبل تغییر وضعیت میده.هزینه فرصتهر کدوم از سه حالت، (۱)مدرس متمرکز، (۲)مدرس تیم دار و (۳)مدرس استات استارتی مزایا و معایبی دارن. مثلا در مدرس متمرکز احتمال نوسان کیفیت و نظم زمانی کمتر هست و دسترسی به مدرس اغلب بهتر ولی در مدرس-مجری‌ها چون این‌ها فعالیت اجرایی هم دارن احتمال این که در فرایند اموزش نوسان‌های زیادتری تجربه بشه بیشتر هست. از اون طرف مدرس-مجری‌ها چون در حال فعالیت اجرایی هستن در موضوعاتی عمیق‌تر میشن که همین کیفیت اموزششون در اون موضوعات رو می‌تونه بیشتر کنه و از اون طرفم تزریق تجربه‌های اجرای به اموزش‌های تئوری بیشتری دارن. مدرس متمرکز وقت بیشتری برای مطالعه ترندهای روز و نکات جدید داره پس احتمالا دوره‌های بروزتری داره در حالی که مدرس-مجری حتی اگر تیمش براش اموزش‌ها رو بروز کنن هم چون خودش وقت کافی برای بررسی موضوعات جدید رو نداره احتمالا اگر دوره رو بروز هم بکنه سوتی‌هایی در طی آموزشش بده که کیفیت دوره رو دچار چالش بکنه.جمع بندیاصل هدف این مطلب توضیح این هست که چرا تفکر «الزاما باید مدرس مجری قوی‌ای هم باشه» غلط هست و نباید با چنین ذهنیتی به قضاوت مدرس و دوره‌ها و در انتها ۳ حالت مختلف و مجاز و استاندار مدرس رو معرفی کردم ولی اگر از من بپرسید به نظرت کدام یک بهتر از بقیه هست من می‌گم به نظرم باید ببینیم اولا دنبال چی هستیم (از صفر آموزش دیدن، بروز شدن، تخصصی‌تر رفتار کردن ....) و بعد شخص به شخص مدرس رو ارزیابی کنیم چون صرف حالت فعالیت نمی‌تونه چیزی رو تضمین کنه فقط همین که گاردی سرسختانه‌ای نسبت به مدرس‌های متمرکز نداشته باشیم چیزی هست که من رو از نوشتن این مطلب خوشحال میکنه.</description>
                <category>محمد ابراهیمی اول</category>
                <author>محمد ابراهیمی اول</author>
                <pubDate>Thu, 19 Oct 2023 12:09:11 +0330</pubDate>
            </item>
                    <item>
                <title>آموزش نصب NVM روی macOS M1 Silicon</title>
                <link>https://virgool.io/@ebrahimiaval/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D9%86%D8%B5%D8%A8-nvm-%D8%B1%D9%88%DB%8C-macos-m1-silicon-xfnrmmrgl6dt</link>
                <description>قبلا در پست «آموزش نصب هم‌زمان چند نسخه مختلف node js با nvm» شرح نحوه نصب و کانفیگش روی Windows و unix base رو توضیح دادم و نصب و کانفیگش روی macOs با پردازنده m1 هم تفاوت خاصی نداره فقط چند نکته هست که بهتره قبلش بدونید.۱) حذف node js موجوداگر قبلا node رو نصب کردید احتمال این هست که موقع نصب nvm گره‌هایی به کار بیفته پس بهتره اول نود global فعلی رو حذف نصب کنید. نحوه uninstall و حذف کامل ‌node js از macOS M1 Siliconدر این مقاله کامل توضیح داده ولی دستورات رو اینجا لیست کردم که «دونه دونه اجرا کنید» نود موجود رو از سیستم macOSتون حذف میکنه.# cd /
# cd usr/local/include
# sudo rm -R node
# cd ..
# cd lib
# sudo rm -R node_modules
# cd ..
# cd bin
# sudo rm -R node
# cd /
# sudo rm -R .npm۲) نصب NVM روی macOS M1 Siliconقبل از این که فرایند نصب رو شروع کنید لازم هست که rosetta رو برای اجرا برنامه‌‌هایی که برای پرازنده Apple silicon ساخته نشدن نصب کنید. نسخه‌های nodejs قبل از ورژن 15 برای پردازنده‌های arm توسعه پیدا نکردن پس نیاز به rosetta هست البته ظاهرا node این مشکل رو در اپدیت‌هایی حل کرده و شاید لازم به نصب rosseta نباشه ولی بودنش همیشه کمک کنندست پس بهتر نصب داشته باشیدش.softwareupdate --install-rosetta۳) استفاده از nvm  و نصب نسخه‌های مختلف  node jsبقیه داستان مشابه همون مطلب قبلی برای سیستم‌‌های  unix هست که می‌تونید تو در مطلب زیر بخونید. https://virgool.io/avalamoozesh/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D9%86%D8%B5%D8%A8-%D9%87%D9%85-%D8%B2%D9%85%D8%A7%D9%86-%DA%86%D9%86%D8%AF-%D9%86%D8%B3%D8%AE%D9%87-%D9%85%D8%AE%D8%AA%D9%84%D9%81-node-js-%D8%A8%D8%A7-nvm-w8c9ba2kriuf </description>
                <category>محمد ابراهیمی اول</category>
                <author>محمد ابراهیمی اول</author>
                <pubDate>Wed, 14 Dec 2022 13:52:50 +0330</pubDate>
            </item>
                    <item>
                <title>جاوا اسکریپت باشیم!</title>
                <link>https://virgool.io/avalamoozesh/%D8%AC%D8%A7%D9%88%D8%A7-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-%D8%A8%D8%A7%D8%B4%DB%8C%D9%85-tk3tgrljg1gn</link>
                <description>سال ۱۹۹۵ بود که برندان آیک (Brendan Eich)، کسی که بعداً شرکت موزیلا (Mozilla) رو تاسیس کرد، در طی ۱۰ روز یک زبان اسکریپت نویسی برای مرورگر  Netscape نوشت تا بشه با اون صفحات وب رو در سمت کلاینت پویا‌تر کرد و  اصلا دنبال این هم نبود که یک زبان برنامه نویسی جدی و حرفه‌ای رو توسعه بده بلکه فقط دنبال کمی پویایی بیشتر و البته رقابت در ماجرایی معروف به جنگ مرورگرها بود.  آیک اسم این زبان رو موکا (mocha) گذاشت که اسم نوعی سرو قهوه هست و فکرشم نمی‌کرد که روزی موکا به این غول پرنفوذ تبدیل بشه.خالق JavaScript برندان آیکدر مطلب &quot;صفر تا صد تاریخچه اینترنت و وب: درس‌هایی از اعماق وب&quot; با جزئیاتی دقیق روند پیدایش اینترنت و وب رو توضیح دادم و اگر نمی‌دونید همه چیز از کجا شروع شد پیشنهاد می‌کنم یک سر به این مطلب بزنید تا دیدی جامع و دقیق پیدا کنید.بعد از اختراع وب توسط تیم برنرز لی (Timothy John Berners-Lee) در سال ۱۹۹۱ مرورگرها فقط صفحات استاتیکی بودن که از بارگذاری یکسری فایل استاتیک html ایجاد می‌شدن. دو سال بعد، در سال 1993 که گروه NCSA  تکنولوژی CGI رو خلق کرد تا صفحات وب بتونن محتوهایی پویا و یکسری اعمال مثل اعتبارسنجی رو انجام بدن. این پویایی صرفا در سمت Back-End اتفاق افتاد و همچنان در سمت کلاینت همه چیز استاتیک بود تا این که برندان آیک (Brendan Eich) در سال ۱۹۹۵ اولین زبان برنامه نویسی سمت کلاینت رو به نام موکا اختراع کرد.برندان آیک یکی از برنامه‌نویسانی بود که در شرکت Netscape استخدام شده بود؛ شرکتی که مرورگر Netscape Navigator، محبوب‌ترین مرورگر اون دوران رو توسعه میداد. مهندسان شرکت Netscape دنبال این ایده بودن تا بشه سمت کلاینت رو هم با یک زبان برنامه نویسی پویا کنن. اونا در ابتدا تلاش کردن تا زبان Java که اون زمان خیلی هم محبوب شده بود رو در مرورگر خودشون بکار بگیرن ولی Java بیش از حد سنگین و پیچیده بود و چنین چیزی با توجه به محدودیت‌های نرم‌افزاری و سخت‌افزاری سیستم‌های اون زمان تقریبا نشدنی بود.در همین زمان به برندان آیک تسکی داده شد که طی اون مأموریت داشت تا ظرف ۱۰ روز زبانی جدید برای مرورگر Netscape بسازد با این شرایط:شبیه به Java به نظر برسد (Syntax اون مشابه Java به نظر برسه)آسان و سبک باشد تا کاربران معمولی هم راحت یاد بگیرند و استفاده کنندر مرورگر اجرا شود و محدودیت‌های نرم افزاری و سخت‌افزاری برای اون در نظر گرفته بشهقابلیت تعامل با DOM و HTML را هم داشته باشهبرندان با این که فرصت کمی داشت ولی موفق شد طی این ۱۰ روز زبانی ابتدایی که این مشخصات رو داشته باشه خلق کنه و اسمش رو بذاره موکا (Mocha)! برای این که چرا این اسم رو گذاشتن داستان‌های متفاوتی گفته شده. یک گروه میگن اسم قهوه محبوب آیک بوده، یکی گروه دیگه میگن مارک اندریسن (Marc Andreessen)، یکی از بنیان‌گذاران Netscape، پیشنهاد داده و گروه دیگری هم اون رو مربوط به یک دورهمی در یک کافه نسبت میدن به هر حال خیلی این نام ماندگار نشد و چند ماه بعد، در تابستان همان سال ۱۹۹۵ به LiveScript تغییر داده شد.برای نام گذاری LiveScript هم چنین دلایلی آورده شده: واژه‌ی &quot;Live&quot; نشان‌دهنده‌ی دینامیک بودن زبان هست یعنی بر خلاف HTML که ایستا هست، LiveScript می‌تونه در زمان اجرا به صفحه واکنش نشان بده. علاوه بر اون نام &quot;LiveScript&quot; جنبه بازاریابی و تبلیغاتی هم می‌تونست داشته باشه که ویژگی پویا و زنده بودن تعاملات در مرورگر Netscape نشون بده. این نام به صورت رسمی در نسخه‌ی Netscape Navigator 2.0 Beta 3 که در سپتامبر 1995 منتشر شد برای این زبان استفاده شد.اما این اسم هم چند ماه بیشتر دووام نیاورد! در زمستان ۱۹۹۵ (December 1995)، وقتی که Netscape آماده انتشار نسخه نهایی مرورگر Netscape Navigator 2.0 بود، در یک اقدام غیرمنتظره و جنجالی، نام زبان از LiveScript به JavaScript تغییر داده شد که کاملا هدفی بازاریابانه و تبلیغاتی داشت.داستان دقیق‌تر از این قرار بود که شرکت Sun Microsystems که سازنده‌ی زبان Java بود، در اون زمان با Netscape همکاری تجاری داشت و چون Java در سال ۱۹۹۵ خیلی پر سروصدا و محبوب بود، و رسانه‌ها اون رو آینده‌ی برنامه‌نویسی می‌دونستن و روایاپردازی‌های بانمکی نقل محافل بود و همین باعث شد تا Netscape هم بیاد از این آب گل آلود ماهی خودش رو بگیره و به نوعی تلاش کنه تا یک پیوند ذهن بین این داستان‌های هیجان انگیز و زبان تازه توسعه داده شده خودش ایجاد کنه.زبان لایو اسکریپت که حالا اسم جاوااسکریپت رو پیدا کرده بود، هیچ ربط و ارتباطی به Java نداشت و الان هم نداره و صرفا برخی Syntaxهای اون مشابه Java طراحی شده و اتفاقی کاملا تبلیغاتی بود پس این حرف که JavaScript کوچک شده Java هست کاملا غلط هست.&quot;It was a marketing gimmick. We knew that Java was the hot thing at the time, and this was a way to ride that wave.&quot;— Brendan Eichجاوااسکریپت تا سال‌ها با هویت گمراه‌کننده‌ای شناخته می‌شد و حتی تا امروز، بسیاری از مبتدی‌ها تصور می‌کنند Java و JavaScript به هم مرتبط‌اند هست و جاوااسکریپت نسخه کوچک شده جاوا هست! این نام‌گذاری، اگرچه گمراه‌کننده، اما باعث موفقیت تجاری زودهنگام این زبان شد و حیله بازاریابی Netscape جواب داد!در این سال که جاوااسکریپت متولد و هی تغییر نام داده شد، مایکروسافت اولین مرورگر IE خودش رو عرضه کرده بود و داشت تلاش می‌کرد تا اون رو توسعه بده و یک رقیب جدی برای مرورگر Netscape Navigator بشه. مایکروسافت در ابتدای سال ۱۹۹۵ ورژن یک مرورگر Internet Explorer خودش رو بر پایه مرورگر Spyglass Mosaic توسعه داد که نسخه‌ای بسیار ساده بود و فقط روی Windows 95 اجرا می‌شد. این مرورگر فقط قابلیتهای پایه مرور وب (HTML 2.0) را داشت و هیچ پشتیبانی از JavaScript، CSS نمی‌کرد یا حتی بوک مارک های درست حسابی هم نداشت اما در پایان همان سال (۱۹۹۵) نسخه ۲ این مرورگر رو توسعه داد که در این نسخه پشتیبانی اولیه از JavaScript و SSL اضافه شد. سال بعد (۱۹۹۶) با توسعه نسخه ۳ و افزودن پشتیبانی از CSS رسما وارد رقابت جدی با Netscape شد و جنگ مرورگرها آغاز شد!البته IE از جاوااسکریپت در ابتدا استفاده نکرد! مایکروسافت با مشاهده موفقیت جاوااسکریپت و با نوعی کپی برداری از اون، نسخه‌ی خودش را با نام JScript برای مرورگر Internet Explorer ساخت.از وقتی IE امد و جنگ مرورگرها شروع شد و این دو شرکت برای رقابت با هم مدام ساختارهای جدید و انحصاری توسعه دادن تا با کمک اون‌ها بتونن جذابیت و کارایی بیشتری پیدا کنن ناسازگاری و تفاوت در نوشتن و اجرای کدها روز به روز بیشتر و بیشتر شد تا جایی که به یک افتضاح ختم شد!چون این دو با هم رقیب بودن و برای شکست و حذف همدیگر تلاش می‌کردن هیچ وقت برای توسعه استانداردها با هم مشارکتی جدی نداشتن و به استانداردهای W3C که با هدف یکسان کردن استانداردها ایجاد شده بود بی‌توجه‌ی میکردن. جزئیات بیشتر این درگیری ها و چطوری شکست خوردن Netscape از IE و بعد پیدایش FireFox و Google کروم رو می‌تونید در مطلب &quot;صفر تا صد تاریخچه اینترنت و وب: درس‌هایی از اعماق وب&quot; بخونید.اختلاف ویژگی و اجرای JavaScript شرکت Netscape و JScript شرکت مایکروسافت بسیار شدید شده بود برای همین در اواخر 1996، شرکت Netscape مشخصات زبان JavaScript را به ECMA International که در اون زمان با نام European Computer Manufacturers Association فعالیت می‌کرد ارائه داد تا فرایند استانداردسازی رو شروع بشه و جلوی این آشفتگی گرفته بشه.چند ماه بعد، در ژوئن 1997 اولین نسخه رسمی با نام ECMAScript 1 (ES1) منتشر شد. بعدها در ۱۹۹۸ نسخه ECMAScript 2 و در ۱۹۹۹ هم نسخه ECMAScript 3 منتشر شد که شامل استانداردهایی برای regex و try/catch بود.طی این مدت، روز به روز مرورگر IE سهم بازار بیشتری می‌گرفت و مرورگر نت اسکیپ افول می‌کرد تا جایی که در سال ۱۹۹۹ که ES3 منتشر شده بود اینترنت اکسپلورر تقریبا همه بازار رو گرفته بود و به نوعی یک انحصار مطلق ایجاد کرده بود. برای مایکروسافت با این انحصار و سهم بازار منطقی نبود تا بیاد حرف‌ها و دستورات یک سازمان دیگه که هیچ قدرت خاصی در بازار نداره و تعیین کننده نیست رو بپذیره برای همین در تمام این دوران نسبت به ECMAScript بسیار بی‌توجه بود و اینطور می‌گفت که نیاز به ECMAScript نیست چون کل بازار دست IE هست و مهندسان مایکروسافت بهتر میدونن چی رو چطوری طراحی کنن!مایکروسافت در تمام جلسات ECMAScript سعی می‌کرد تا روند رو منحرف و کند کنه و همین موضوع باعث شد نسخه‌ی چهارم استاندارد (ES4) که قرار بود در اوایل دهه ۲۰۰۰ منتشر شود، به خاطر مخالفت مایکروسافت هرگز نهایی نشه و تبدیل به نسخه گم شده ECMAScript بشه!این قلدری‌ها دلسرد و کندی عجیبی در وب ایجاد کرده بود که حتی دامن W3C رو هم گرفته بود و مثل سابق روی توسعه استانداردهاش کار نمی‌کرد و حتی بعد از سال ۲۰۰۰ تا سال‌ها مایکروسافتی که مدام نسخه جدید و با ویژگی‌ها و تغییرات جدید منتشر می‌کرد هیچ نسخه جدیدی منتشر نکرد!تا این مرورگر جاه طلب و پیشرو موزیلا فایرفاکس شروع به توسعه کد و این محیط کسالت بار رو دوباره هیجان انگیز کرد. البته به این سادگی نبود و حسابی مایکروسافت چوب لای چرخ‌هاشون می‌کرد. مثلا سر همین ES4 گروه موزیلا تغییرات زیادی رو طلب می‌کردن ولی مایکروسافت معتقد بود نیاز نیست.در ES4 گروهی مثل موزیلا که خواهان پیشروی بلندپروازانه بودند دنبال پیاده سازی ویژگی‌های مثل کلاس‌ها و تایپ‌های استاتیک، ماژول‌ها و ... بودن ولی مایکروسافت و برخی دیگر معتقد بودند این تغییرات بیش از نیاز کاربران هست و چون مایکروسافت دست بالاتر رو داشت هیچ وقت ES4 امکان اجرا پیدا نکرد.اما این گروه تسلیم نشدن و ایده‌های خودشون رو در مرورگر فایرفاکس دنبال می‌کردن. حتی با W3C که کند شده بود هم به مشکل خوردن و گروهی تحت عنوان WHATWG برای توسعه HTML ایجاد کردن. همین روحیه در نهایت باعث شد تا فایرفاکس محبوبیت پیدا کنه. البته بعد از این که مایکروسافت متوجه پیشرفت فایرفاکس شد بعد از سال‌ها خواب بودن شروع کرد به توسعه و انتشار نسخه‌های جدید مرورگر IE ولی همون روندی که قبلا خودش برای حذف نت اسکیپ پیش گرفته بود برای خودش اتفاق افتاد و در نهایت پس از نسخه 11 توسعه این مرورگر رو متوقف کرد و عملا بازاری که قبلا پادشاه‌ش بود رو از دست داد.تا گروه موزیلا فایرفاکس کار خودشون رو سال ۲۰۰۲ شروع کردن و دو سال بعد اولین نسخه FirFox رو منتشر کرد و تا دو سال بعد (۲۰۰۶) هم نتونست آنچنان در مقابل IE قدم علم کنه ولی پس از ۲۰۰۶ هر سال کاربران بیشتری به دلیل کندی و باگ‌های زیاد اینترنت اکسپلورر به فایرفاکس مهاجرت می‌کردن و از قدرت مایکروسافت به مرور کم می‌شد.همین تضعیف جایگاه کم کم باعث شد تا مایکروسافت از سر اجبار و نه تعقل کوتاه بیاد تا این که در نهایت، در سال 2008 یک توافق صلح‌آمیز (Harmony proposal) بین دو گروهی که خواهان پیشروی آهسته (ES3.1) بودند (مثل مایکروسافت) و گروهی که خواهان پیشروی بلندپروازانه بودند (ES4) (مثل موزیلا) شکل گرفت که طی این توافق تاریخ در سال ۲۰۰۹ نسخه‌ی سبک‌تر ES5 منتشر شد و همزمان هم برای توسعه نسخه‌ی آینده (ES6/ES2015) چارچوبی پایه‌گذاری شد.این توافق نقطه عطف بسیار مهمی در تاریخ جاوااسکریپت هست، لحظه‌ای که اختلافات تعریف و اجرا کد شروع به یکسان شدن کردن و در نهایت باعث شد تا جاوااسکریپت بسیار فراگیر بشه.این توافق مهم توسط گروه TC39 یا همان Technical Committee 39 گروهی در ECMA است که وظیفه‌ی نگهداری، توسعه و تصویب استاندارد ECMAScript را بر عهده داره انجام شد. از جمله اعضای این گروه میشه به برندان آیک (Brendan Eich) خالق اولین نسخه جاوااسکریپت،آلن ویرفز بروک (Allen Wirfs-Brock) استانداردنویس برجسته ECMA، داگلاس کراکفورد (Douglas Crockford) خالق JSON و JSLint اشاره کرد.بعد از توافق ۲۰۰۹ و افول ارام جایگاه اینترنت اکسپلورر مایکروسافت و رشد مرورگرهایی مثل فایرفاکس و گوگل کروم، نهایتا در سال ۲۰۱۵ یک نسخه استاندارد جدید با کلی قابلیت‌های شگفت انگیز و انقلابی برای جاوااسکریپت با نام ECMAScript 6 منتشر که بعدها به‌طور رسمی به ECMAScript 2015 (ES2015) تغییر نام داد که منجر به فراگیری و رشد انفجاری جاوااسکریپت شد و دنیای وب مخصوصا در سمت کلاینت وارد تغییراتی جدی شد که تا همین امروز هم تب و تابش باقی هست.البته ناگفته نماند که خلق NodeJs بر پایه موتور V8 گوگل کروم و معرفی فریم ورک‌های SPA مثل AngularJs و ReactJS هم بسیار در این موضوع تاثیر گذار بودن.جاوااسکریپت در طی این ۱۰ سال بین ۱۹۹۵ تا سال ۲۰۱۵ خیلی جدی گرفته نمی‌شد. حتی قبل از توافق ۲۰۰۹ بیشتر برای مسخره کردن و اجرا عملیات‌های نچندان مهم و ظاهری مثل تغییر شکل موس و انیمیشن ریزش برف کریسمس استفاده می‌شد.تا قبل از پیدایش ES6 و بلوغ NodeJS شاخه توسعه رابط کاربری در توسعه وب بیشتر یک موضوع پیش پا افتاده بود و شرکتی هم یک فرد رو مستقلاً به عنوان Front-End Developer استخدام نمی‌کرد تا این که اتفاقات بالا افتاد و این فیلد شغلی بخش زیادی از وظیفه‌هایی که تا دیروز لایه Back-End و توسعه دهنده‌های اونها مسئولش بودن رو به عهده گرفت  کار تا جایی پیش رفته که در برخی پروژه‌های لایه فرانت اند بسیار سنگین‌تر و تخصصی‌تر از لایه Back-End شده و تیم‌های زیادی داریم که توسعه دهنده Front-End در اون‌ها مساوی یا حتی بیشتر از Back-End developer اون حقوق دریافت می‌کنه.</description>
                <category>محمد ابراهیمی اول</category>
                <author>محمد ابراهیمی اول</author>
                <pubDate>Sun, 11 Sep 2022 19:08:18 +0430</pubDate>
            </item>
                    <item>
                <title>آموزش نصب هم‌زمان چند نسخه مختلف node js با nvm</title>
                <link>https://virgool.io/avalamoozesh/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D9%86%D8%B5%D8%A8-%D9%87%D9%85-%D8%B2%D9%85%D8%A7%D9%86-%DA%86%D9%86%D8%AF-%D9%86%D8%B3%D8%AE%D9%87-%D9%85%D8%AE%D8%AA%D9%84%D9%81-node-js-%D8%A8%D8%A7-nvm-w8c9ba2kriuf</link>
                <description>وقتی چند پروژه داشته باشیم که یکی قدیمی هست و یکی جدید یا این که بخواهیم پروژه رو با نسخه‌های مختلف test کنیم که مشکل اجرایی نداشته باشه و از این دست موارد، نیاز به ابزاری هستکه با اون بتونیم نسخه‌های مختلف node رو همزمان نصب کنیم تا هر وقت خواستیم از یکی از نسخه‌ها استفاده کنیم. nvm ابزاری هست که خیلی ساده و خوب این مسئله رو برای ما هندل میکنه.آموزش نصب هم‌زمان چند نسخه مختلف node js با nvm امکان نصب و استفاده از nvm روی محیط‌های unix, macOS, and windows WSL وجود داره. اگر کاربر خانواده لینوکس باشید که می‌تونید مستقیم به مرحله بعد برید ولی اگر کاربر windows هستید لازم هست ابتدا WSL رو نصب و راه اندازی کنید.توضیح بیشتر درباره WSL برای کابران ویندوزWSL یا همون Windows Subsystem for Linux بعنی داشتن لینوکس در ویندوز. شما ویندوز خودتون رو دارید و هم زمان می‌تونید لینوکس رو هم در ترمینال‌های خودتون در پس زمینه داشته باشید و با دستوراتی به اون ورود کنید یا از اون بخواهید یکسری عملیات رو تحت لینوکس روی سیستم عامل ویندوز فعلی خودتون اجرا کنه. چیزی شبیه VMware هست با این تفاوت که خیلی سریع اجرا میشه و در ترمینال‌های تحت ویندوز در دسترس هست. در (ایــنجا) قدم به قدم گفته چطور نصب و راه اندازی کنید و اگر اهل ویدیو دیدن هستید ( این اموزش یوتیوب) کمکتون می‌کنه. در کل کار سختی نیست، ویندوز خودتون رو آپدیت می‌کنید بعد از بخش turn windows features on or off دو گزینه virtual machine platform و Windows Subsystem for Linux رو تیک می‌زنید تا نصب بشن و بعد از ری‌استارت شدن سیستم wsl در دسترس هست. حالا از store ویندوز ubuntu رو دانلود و نصب می‌کنید و بعد با دستوری که در آموزش‌ها هست اون رو به wsl 2 تغییر بدید تا از قابلیت‌های بیشترش استفاده کنید.این NVM چطور کار می کنه؟بعد از نصب nvm و نسخه های node مورد نظرتون (با دستورات‌ زیر) در هر لحظه یکی از نسخه ها نودی که خودتون انتخاب کردید فعال میشه و هر دستوری بنویسید با اون نسخه اجرا میشه و لازم نیست در دستورات اجرایی خودتون تغییر ایجاد کنید. سویچ بین نسخه‌ها تنها به اجرا یک دستور نیاز داره. برای مثال اگر دستور node -v رو اجرا کنید و v14.16.1 رو نمایش بده اگر دستور nvm use 12.22.1  رو اجرا کنی و بعد دوباره node -v رو اجرا کنی این بار می بینی که v12.22.1 رو نمایش میده که نشون میده نسخه نود فعال تغییر کرده.نصب و راه اندازی nvm اگر می‌خواهید nvm رو روی macOS M1 Silicon نصب کنید قبلش این مطلب رو بخونید.با دستور زیر nvm نصب میشه اما این برای مثال هست و بهتره برید به  صفحه گیت‌هاب nvm و دستور نصب نسخه جدیدش که مشابه دستور زیر هست رو کپی کنید و در ترمینال خودتون اجرا کنید.curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bashدستور زیر رو اجرا کنید و اگر nvm نمایش داده شد که هیچ اگر نشد لازم هست سیستم رو ری‌استارت کنید.command -v nvmنصب  nvm و نسخه‌های مختلف node jsبرای نصب آخرین نسخه LTS دستور زیر رو اجرا کنید.nvm install --ltsاگر دستور زیر رو اجرا کنید مشخصات نسخه‌های نصب شده رو می‌بینید.nvm ls برای نصب سایر نسخه‌ها اگر version رو میدونید از دستور بعد و اگر می‌خواهید لیست نسخه‌های دردسترس رو ببیند دستور زیر رو اجرا کنید (دریافتش شاید کمی طول بکشه).nvm ls-remoteبرای نصب یک نسخه خاص از دستور زیر استفاده کنید. nvm install [node version] 
### for example (nvm install 12.22.1) for node version 12.22.1حالا بهتره دستور nvm ls رو اجرا کنید و نسخه‌ها موجود رو ببنید.تنظیم نسخه پیش فرض nodeاگر دستور node -v رو اجرا کنید ورژن نسخه پیش فرض در حال اجرا رو می‌بنید. برای تغییر نسخه default از دستور زیر استفاده کنید تا هر بار سیستم restart شد به صورت پیش فرض اون برای اجرا اماده بشه.nvm alias default  [node version] 
### for example (nvm alias default 12.22.1)تغییر نسخه nodeخب رسیدیم به اصل داستان، با این دستور میشه در هر زمان که دوست داشتید به طور موقت نسخه node فعال رو تغییر بدید (دقت کنید که بعد از restart و  بستن ترمینال این انتخاب حذف و نسخه پیش فرض فعال میشه). nvm use [node version] 
### for example (nvm use 12.22.1)اگر به جای node version کلمه node رو بنویسید (nvm use node) به روزترین نسخه node نصب شده رو واستون فعال میکنه.حذف یکی از node‌هابرای حذف یکی از نسخه‌های node js از دستور زیر استفاده کنید.nvm uninstall [node version] 
### for example (nvm uninstall 12.22.1)جمع بندیدر مستند nvm دستورات و توضیحات بیشتری هست ولی آنچه اصل ماجرا و مهم برای کار با nvm بود همین هایی بود که گفتم و می تونید کار رو با اون شروع کنید و ادامه بدید.</description>
                <category>محمد ابراهیمی اول</category>
                <author>محمد ابراهیمی اول</author>
                <pubDate>Wed, 14 Apr 2021 13:09:30 +0430</pubDate>
            </item>
                    <item>
                <title>کانفیگ کامل ESLint برای React و Next JS</title>
                <link>https://virgool.io/avalamoozesh/%DA%A9%D8%A7%D9%86%D9%81%DB%8C%DA%AF-%DA%A9%D8%A7%D9%85%D9%84-eslint-%D8%A8%D8%B1%D8%A7%DB%8C-react-%D9%88-next-js-j66rbubujb22</link>
                <description>مطالب پراکنده و ناقص زیادی در وب هست برای همین اینجا می‌خوام یکبار برای همیشه یک شرح کاملی از هر چیزی که لازم و ضروری هست که بدونید بگم. قبلش بهتره کمی در مورد این که ESLint چی هست و اصلا به چه دردی می‌خوره و آیا ما نیاز داریم که باشه یا نه، بدونیم و بعد بریم سراغ دستورالعمل قدم به قدم نصب، راه اندازی و استفاده ازش.کانفیگ کامل ESLint برای React و Next JSاین ESLint چی هست و به چه دردی می‌خوره؟کلمه lint معنی پرز یا ضایعات پنبه یا شاید در دید کلی‌تر به معنی خورده ضایعات حاشیه انجام کار معنی پیدا کنه. در اینجا وقتی می‌گیم یک ابزار یا پکیج lint استفاده می‌کنیم یعنی ما قصد داریم تا یک ناظر به پروژه اضافه کنیم، واسش یکسری قوانینی که دوست داریم رعایت بشه رو بگیم و کار ما رو بررسی کنه تا اگر خارج از اون قوانین رفتار کردیم بمون هشدار و خطا بده تا رفع کنیم و در نهایت کدی تمیز و روی اصول داشته باشیم. مثلا می‌تونیم برای اون تعریف کنیم که هر بار جایی من یک متغییر تعریف کردم ولی استفاده نکردم خطا بده تا اون رو پاک کنم یا اگر یک switch case تعریف کردم حتما باید بخش default هم داشته باشه تا بدونیم اگر caseها نشدن آخرش باید چی بشه و از این دست قوانین و شرایط.وقتی می‌گیم lint کردن معنی این میده که کد بررسی بشه و هر چیزی که با قوانین تعریف شده ما مطابقت نداشت به شکل خطا یا هشدار در کنسول به ما نمایش داده بشه. اینطور نیاز نیست مدام نگران این باشیم که نکنه جایی چیزی از دستمون در رفته و جلوی خطای انسانی هم گرفته میشه.پکیج‌های زیادی برای این کار هست ولی یکی از بهترین‌هاش ESLint هست. نصب و تنظیم ESLint برای Next JSبا دستور زیر پکیج eslint رو نصب می‌کنیم.npm install --save-dev eslintحالا وقت این هست که فایلی با نام eslintrc.json. رو در ریشه پروژه ایجاد کنیم تا در اون قوانینی که دوست داریم رو تعریف کنیم. البته راه ساده‌تری هم هست، استفاده از generator خود eslint. با اجرا یکی از دستورات زیر از شما سوالاتی در مورد قوانین می‌پرسه و بعد فایل رو با اون قوانینی که گفتید میسازه.npx eslint --initبا کلید‌های بالا پایین کیبورد می‌تونید بین گزینه‌ها جا به جا بشید و با زدن enter انتخابشون کنید. گزینه‌های زیر رو به ترتیب انتخاب کنید:To check syntax and find problemsJavaScript modules (import/export)Reactyes (اگر از تایپ‌اسکریپت استفاده می‌‌کنید) / no (استفاده نمی‌کنید)BrowserJSONYESالان پکیج‌های وابسته لازم نصب میشه و فایل کانفیگ در ریشه برنامه با قوانینی که گفتیم ساخته میشه که مقادیر زیر رو در خودش داره ( اگر بدشانسی اوردید و نصب eslint-plugin-react در مرحله آخرش به خطا خورد، خودتون دستی نصبش کنید):{
    &amp;quotenv&amp;quot: {
        &amp;quotbrowser&amp;quot: true,
        &amp;quotes2021&amp;quot: true
    },
    &amp;quotextends&amp;quot: [
        &amp;quoteslint:recommended&amp;quot,
        &amp;quotplugin:react/recommended&amp;quot
    ],
    &amp;quotparserOptions&amp;quot: {
        &amp;quotecmaFeatures&amp;quot: {
            &amp;quotjsx&amp;quot: true
        },
        &amp;quotecmaVersion&amp;quot: 12,
        &amp;quotsourceType&amp;quot: &amp;quotmodule&amp;quot
    },
    &amp;quotplugins&amp;quot: [
        &amp;quotreact&amp;quot
    ],
    &amp;quotrules&amp;quot: {
    }
}تنظیمات تکمیلی الان وقت این هست که تنظیمات لازم برای Next JS رو به فایل تنظیماتمون اضافه کنیم. راه ساده‌ترش این هست که فایل eslintrc.json. ایجاد شده در ریشه رو باز کنید و هر چه در اون هست رو با تنظیمات زیر جایگزین کنید و بعد توضیحاتی که در ادامه دادم رو بخونید تا بدونید اینایی که اضافه کردیم چیه.{
    &amp;quotsettings&amp;quot: {
        &amp;quotreact&amp;quot: {
            &amp;quotversion&amp;quot: &amp;quotdetect&amp;quot
        }
    },
    &amp;quotenv&amp;quot: {
        &amp;quotbrowser&amp;quot: true,
        &amp;quotes2021&amp;quot: true,
        &amp;quotnode&amp;quot: true
    },
    &amp;quotextends&amp;quot: [
        &amp;quoteslint:recommended&amp;quot,
        &amp;quotplugin:react/recommended&amp;quot
    ],
    &amp;quotparserOptions&amp;quot: {
        &amp;quotecmaFeatures&amp;quot: {
            &amp;quotjsx&amp;quot: true
        },
        &amp;quotecmaVersion&amp;quot: 12,
        &amp;quotsourceType&amp;quot: &amp;quotmodule&amp;quot
    },
    &amp;quotplugins&amp;quot: [
        &amp;quotreact&amp;quot
    ],
    &amp;quotrules&amp;quot: {
        &amp;quotreact/prop-types&amp;quot: &amp;quotoff&amp;quot,
        &amp;quotreact/react-in-jsx-scope&amp;quot: &amp;quotoff&amp;quot
    }
}توضیح تنظیمات تکمیلیاحتمالا از نسخه ۱۷ React دارید استفاده می‌کنید پس لازم نیست react رو در همه صفحات import کنید ولی اگر نکنید ESLint گیر میده پس rule زیر رو اضافه کردیم:&amp;quotreact/react-in-jsx-scope&amp;quot: &amp;quotoff&amp;quotاز طرفی چون نمی‌خوایم در همه کامپوننت‌های از prop-types استفاده کنیم یا ممکن هست typescript داشته باشیم rule زیر رو هم اضافه کردیم (آگر لازم می‌دونید اینو نادیده بگیرید):&amp;quotreact/prop-types&amp;quot: &amp;quotoff&amp;quotاین هشدار رو در کنسول داشتیم:Warning: React version not specified in eslint-plugin-react settingsپس در تنظیمات شناسایی ورژن React رو هم اضافه کردیم:&amp;quotsettings&amp;quot: {
       &amp;quotreact&amp;quot: {
             &amp;quotversion&amp;quot: &amp;quotdetect&amp;quot
        }
}چون در Next JS بحث Server Side Rendering  رو داریم در envها node رو هم اضافه کردیم.
  &amp;quotenv&amp;quot: {
       &amp;quotnode&amp;quot: true,
       ....نادیده گرفتن فایل‌های غیرضروریطبیعتا دوست نداریم پکیج‌هایی که نصب کردیم رو ESLint بررسی کنه پس باید ignore کنیم. همچنین دایرکتوری‌های .next و out رو پس یک فایل در ریشه پروژه با نام eslintignore. می سازیم و در اون این دایکتوری‌ها رو تعریف می‌کنیم.**/node_modules/*
**/out/*
**/.next/*تعریف Script اجراییحالا باید در فایل package.json در بخش scripts یک دستور تعریف کنیم تا وقتی اجرا کردیم عملیات lint کردن کل پروژه انجام بشه. &amp;quotscripts&amp;quot: {
      ...
     &amp;quotlint&amp;quot: &amp;quoteslint ./ --ext js,jsx,ts,tsx&amp;quot
}الان اگر در terminal پروژه دستور زیر رو اجرا کنید می‌تونید خروجی علمیات بررسی ESLint رو مشاهده کنید.npm run lintتعریف اجرای اتوماتیک در هنگام توسعهقاعدتا جالب نیست مدام دستور رو دستی اجرا کنیم و دوست داریم وقتی داریم یک کامپوننت رو توسعه میدیم همزمان عملیات lint کردن هم اتفاق بیفته تا ما حین توسعه متوجه اشتباهات بشیم و رفع کنیم. برای این کار باید تنظیمات webpack رو از طریق فایل next.config.js رو توسعه بدیم. (این فایل احتمالا در ریشه پروژه موجود باشه و اگر نیست ایجادش کنید). البته بهتره بدونید تنها فایل‌هایی که مرورگر به اونها درخواست بزنه lint میشه و تنها راه برای بررسی کل پروژه به طور کامل همون دستور بالاست. جای نگرانی نیست چون در حالت واقعی همیشه ما وقتی توسعه میدیم اون صفحه رو هم اجرا میکنیم تا تغییرات رو ببینم پس کم پیش میاد اتفاقی از دیدمون مخفی بشه و فقط برای اطمینان لازم هست قبل production build یک بار دستور بررسی سراسری رو اجرا کنید تا چیزی از قلم نیفته.با webpack 4 و eslint-loaderاگر از 4 webpack استفاده می‌کنید باید ابتدا eslint-loader رو نصب کنید:npm install eslint-loader --save-devو بعد تنظیمات زیر رو در فایل next.config.js بذارید. این تنظیمات باعث میشه تا eslint-loader با تغییر فایل‌ها و اجرا لودرهای مربوط به ترنسپایل اسکریپت‌ها هم اجرا بشه. module.exports = {
    webpack: (config, { dev }) =&gt; {
        if (dev) {
            config.module.rules.push({
                test: /\.js$/,
                exclude: /node_modules/,
                loader: &#039;eslint-loader&#039;,
                options: {
                    // Emit errors as warnings for dev to not break webpack build.
                    // Eslint errors are shown in console for dev, yay :-)
                    emitWarning: dev,
                }
            })
        }
        return config
    }
}البته eslint-loader در webpack 5 منسوخ شده و باید از روش زیر استفاده کنید.با webpack 5 و eslint-webpack-pluginاگر از 5 webpack استفاده می‌کنید باید ابتدا eslint-webpack-plugin رو نصب کنید:npm install eslint-webpack-plugin --save-devحالا باید تنظیمات زیر و در فایل next.config.js بذارید.این تنظیمات باعث میشه تا eslint-webpack-plugin با تغییر فایل‌ها و اجرا لودرهای مربوط به ترنسپایل اسکریپت‌ها هم اجرا بشه. const ESLintPlugin = require(&amp;quoteslint-webpack-plugin&amp;quot);
module.exports = {
    future:  {
        webpack5: true,
    },
    webpack: (config, {dev}) =&gt; {
        if (dev) 
            config.plugins.push(new ESLintPlugin());
        return config;
    }
};جلوگیری از commitفکر نکنم کسی دوست داشته باشه در حالی که چندتا خطا و هشدار eslint رو داریم اون رو در repository git commit کنیم. برای اتصال git به eslint و اجرا اون قبل هر کامیت از hookهای git میشه استفاده کرد. ابزاری جذاب به نام husky هست که دقیقا همین خواسته ما رو به خوبی انجام میده. پس بریم برای نصب و کانفیگش(اینجا روش‌های اتوماتیک و دستی نصب و کانفیگ هاسکی رو کامل گفته ولی در ادامه روشی که خودم بهتر دیدم رو می‌گم).قبل هر چیز husky رو نصب می‌کنیم:npm i -D huskyحالا باید اسکریپتی به نام prepare  رو در package.json ایجاد کنیم تا طی اون git hookها ساخته بشه. ساده‌ترین راه اجرا این دستور هست. بعد این هم script فایل package.json ساخته میشه هم دستور اجرا میشه که حاصل اون میشه ایجاد دایرکتوری husky. در ریشه پروژه و تنظیمات لازم اتصالات git hook. (دقت کنید که دستور set-script در ورژن 7 به بعد npm موجود هست و اگر ورژن npm رو دوست ندارید اپدیت کنید باید خودتون scriptی با نام prepare و دستور اجرایی husky install رو در package.json تعریف و بعد فقط npm run prepare رو اجرا کنید.)npm set-script prepare &amp;quothusky install&amp;quot &amp;&amp; npm run prepareالان کانفیگ پایه هاسکی انجام شده و فقط کافی هست دستوری که می‌خوایم قبل هر کامیت اجرا بشه و اگر همه چی اوکی بود اون وقت کامیت ثبت بشه رو ایجاد کنیم. برای این کار کافی هست دستور زیر رو اجرا کنید:npx husky add .husky/pre-commit &amp;quotnpm run lint&amp;quotاین دستور فایلی به نام pre-commit در دایرکتوی husky. ایجاد می‌کنه که در اون دستور npm run lint ثبت شده تا قبل هر کامیت اجرا بشه.دقت کنید که تنظیمات پایه در gitignore. ثبت شده پس اگر کسی پروژه رو clone کرد برای ایجاد این تنظیمات پایه باید ابتدا دستور زیر رو اجرا کنه.npm run prepareجمع بندیدر ابتدا eslint رو یکسری تنظیمات اولیه نصب و راه اندازی کردیم، بعد یکسری تنظیمات بیشتر برای Next JS و React به اون اضافه کردیم. بعد مواردی که نمی‌خواستیم در lint بیاد رو مشخص کردیم. در ادامه رسیدیم به ایجاد اسکریپت اجرایی و اجرای eslint طی عملیات توسعه و در آخر به کمک husky اون رو به git هم متصل کردیم تا اشتباهات قبل کامیت کردن رفع بشن. بعد اینها میشه گفت همه کارهای لازم برای یک توسعه خوب رو کردیم ولی شاید پایان پایان نباشه، شما می‌تونید در مورد قوانین و تنظیمات eslint بیشتر مطالعه کنید و اونها رو در فایل کانفیگش اضافه کنید مثلا با اضافه کردن قانون زیر به بخش rule شما مجبور خواهید شد همه‌جای پروژه stringها رو با double quotes بنویسید و اگر جایی با single quotes بنویسید به خطا می‌خورید.&amp;quotquotes&amp;quot: [&amp;quoterror&amp;quot, &amp;quotdouble&amp;quot]</description>
                <category>محمد ابراهیمی اول</category>
                <author>محمد ابراهیمی اول</author>
                <pubDate>Mon, 12 Apr 2021 15:05:38 +0430</pubDate>
            </item>
                    <item>
                <title>چهار نوع برنامه نویس،‌ تو کدوم یکی هستی؟</title>
                <link>https://virgool.io/@ebrahimiaval/%DA%86%D9%87%D8%A7%D8%B1-%D9%86%D9%88%D8%B9-%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87-%D9%86%D9%88%DB%8C%D8%B3-%D8%AA%D9%88-%DA%A9%D8%AF%D9%88%D9%85-%DB%8C%DA%A9%DB%8C-%D9%87%D8%B3%D8%AA%DB%8C-bgwbnw42flpv</link>
                <description>دانش یعنی آنچه به صورت آکادمیک به شکل تعاریف و مفاهیم و توضیحات در مستندها وجود داره دو حالت دونستن و ندونستن ایجاد می‌کنه و تجربه یعنی توانای اجرا و انجام کارها هم تونستن و نتونستن رو. برای همین ۴ دسته برنامه نویسی داریم: انواع برنامه نویسکسایی که نمی‌دونن و نمی‌تونناین‌ها فقط از برچسب برنامه نویس خوششون میاد، یعنی با برنامه نویس‌ها میگردن ازشون ویدیو اموزشی میگیرن و خودشون رو مشتاق و پیگیر نشون میدن، در میت‌اپ‌‌ها شرکت میکنن، شاید گاهی دو قسمت از این ویدیوها رو هم ببینن ولی تا حالا تو عمرشون یک زبان برنامه نویسی رو یاد نگرفتن و یک پروژه معمولی‌هم لانچ نکردن و فقط از این که تو محیط باشن خوششون میاد.این‌ها یا استعداد ندارن و یادگیری واسشون اینقدر سخت‌ هستن که هر بار شروع میکنن به این نتیجه میرسن که سخته و نمی‌فهمن، یا علاقه کافی به خود کار ندارن و یه چیز دیگه احتمالا علاقشون هست و ازش انرژی میگیرن مثلا مطرح بودن و جلب توجه دیگران یا حتی ممکن هست عاشق یک برنامه نویس شده باشه و برای نزدیک شدن به اون داره اینکار میکنه ? و... . خلاصه که یک مشکلی این وسط وجود داره که لازم هست رفع و رجوع بشه که البته گاهی هم شدنی نیست.شاید بگید خب به این که نمی‌گن برنامه نویس چرا اوردی تو دسته بندی، بخاطر این که اغلب جوری فیلم بازی میکنن و تو رزومه و سایت‌ها می‌زنن برنامه نویس که به واضحی این متن نیست و باید باشون کمی بگردی تا بفهمی. واسه همین بهتره بدونید این دسته بندی هم هست و ممکن هست شخص جز این باشه.کسایی که میدونن ولی نمی‌تونناغلب مدرس‌ها در این گروه هستن. این‌ها فقط مستندها و اموزش‌ها رو می‌ببینن و نهایتا یک تست کوچیک هم می‌کنن و بعد میان اموزش میدن و اغلب در هیچ پروژه اینترپرایز و تیم جدی‌ای نبودن و نهایتا از این تیم‌ها دوستانه دانشجویی بوده برای همین توانایی عملیاتی کمی دارن. درسته دانش دارن ولی تجربه لازم رو ندارن و دیدم که اغلب از این تجربه کردن هم فراری هستن.این گروه برای آزمون‌های استخدامی عالی هستن چون در آزمون‌های استخدامی مخصوصا ما ایرانی‌ها یکسری مطالب آکادمیک پرسیده میشه که الزاما دونستن یا ندونستنش برای مثلا یک جونیور یا میدلول چندان ملاک تصمیم گیری نمی‌تونه باشه. این ازمون‌ها ممکن هست منجر به جذب این افراد بشن و با این که دانش خوبی دارن ولی تیم به نتیجه مطلوبی نمی‌رسه و در اجرا لنگ میزنه.به نظرم برای آموزش و مشورت در مورد انتخاب تکنولوژی و معماری چون مطالعه اینها زیاد هست گزینه خوبی می‌تونن باشن ولی برای اجرا میشه به دو گروه بعد فکر کرد.کسایی که نمی‌دونن ولی می‌تونن اغلب بچه‌های عملیاتی در این دسته هستن، منظورم کسانی هست که در شرکت‌ها استخدام شدن یا فریلنسری کار میکنن و تسک‌های پروژه رو جلو می‌برن. منظور از نمی‌دونن این نیست که کلا هیچی نمی‌دونن، نه، قطعا یکسری چیزها رو میدونن که می‌تونن ولی منظور این هست مفاهیم، تعاریف و عملکردهای سطح بالا و پنهان رو خیلی کامل و جامع نمی‌دونن.مثلا این که موتور جاوا اسکریپت چطور رفتار میکنه و کد چطور پردازش میشه.یا مثلا یک دولوپر ممکن هست function و کلاس رو بتونه توسعه بده ولی دقیقا ندونه مزایا و معایب هر کدوم چیه و الان طبق کدوم منطق بهتره از کدوم استفاده کنه و دیدم که عموما سلیقه‌ای و حسی رفتار می‌کنن نه با استدلال و دلایل قابل اثبات.البته خیلی از بچه‌های عملیاتی اعتقاد دارن اصلا به ما چه بدونیم تعریف closure چی هست و call stack به چه دردی می‌خوره و موتور پردازش چطور رفتار می‌کنه و در پشت ماجرا چه اتفاقاتی رخ میده ولی فرق senior با mid level و junior دقیقا در دونستن یا ندونستن همین جزئیات هست و کسی نمی‌تونه ادعا کنه من senior هستم ولی تا به حال حداقل یک بار رفرنس مرجع رو نخونده باشه و از جزئیات با خبر نباشه و حداقل در حد کم نتونه این مفاهیم و ساختار‌ها رو توضیح بده که چی هستن و چطور کار میکنن.کسایی که میدونن و می‌تونناگر بگیم تعریف senior همین هست چندان غلط نگفتیم. کسی که هم از ریز جزئیات و دانش عمیق اطلاع داره و هم در عمل توانایی اجرای خوبی داره. به نظر من برای این سنیور باید دانش و تجربه بالا رو هم زمان داشته باشه چون باید بتونه تیم رو مدیریت کنه. وقتی میگیم تیم یعنی ادم‌های مختلف با دانش‌های مختلف و نحوه کد نویسی‌ها متفاوت پس شخص باید بیشتر از همشون بدونه که اونها از هر ساختاری هم استفاده بکنن این قبلش از اون اطلاع داشته باشه و در code review کردن مدام سورپرایز نشه و به تیمش غر نزنه که این چیه! برای همین mid level و junior چون انفرادی کار می‌کنن شاید لازم هم نباشه در حد senior اطلاعات داشته باشن ولی اگر بدونن عالیه و باید بشون جایزه داد.?شاید بگید خب گوگل جان هست دیگه چه کاریه یادگیری؟ من خودم حافظه خوبی ندارم پس حداقل من از کسی انتظار ندارم همه چیز رو ۱۰۰٪ برای همیشه بتونه حفظ کنه?. درسته همه چیز رو میشه گوگل کرد ولی سوالم این هست ایا در مورد چیزهایی که اصلا اطلاعی از بودن و نبودنش ندارید هم می‌تونید گوگل کنید؟ اصلا بنویسید چی می‌‌خوام؟ قطعا باید یک بار دیده باشی تا حداقل بدونی چنین چیزی هست، درسته به وقت نیاز  میری گوگل میکنی کاملش رو دوباره مرور میکنی.پس شاید الزاما نیاز نباشه ۳۶۵ روز سال و همیشه ۱۰۰٪ مطالب و مفاهیم رو بدونیم که البته جدای از نظر ما اگر از یکسری چیزها استفاده نکنیم خود به خود از ذهنمون پاک یا کمرنگ میشه و دست ما هم نیست ولی حداقل باید یک بار وقت کافی گذاشته باشیم و مطالعه کرده باشیم و بدونیم تا بعدا  گوگل کنیم.جمع بندیبه جز گروهی که نه می‌دونن و نه می‌تونن ۳ دسته دیگه هر کدوم در جای خودشون ارزشمند و مهم هستن و در این مطلب هدفم این بود که بدونم این چند جایگاه هست و ما بر اساس این که دوست داریم در کدوم باشیم و در کدوم راحت‌تریم برنامه ریزی کنیم و به هدفمون برسیم و از همه مهم‌تر همه این گروه‌ها رو در یک گروه به نام برنامه نویس کنار هم قرار ندیم و جزئی‌تر ببینیم. نظر خودتون رو در تکمیل و اصلاح این مطلب در کامنت‌ها بنویسید تا مطلب کامل‌تر و پخته‌تر بشه. روزگار به کام / محمد ابراهیمی اول / فروردین ۱۴۰۰</description>
                <category>محمد ابراهیمی اول</category>
                <author>محمد ابراهیمی اول</author>
                <pubDate>Fri, 26 Mar 2021 13:31:32 +0430</pubDate>
            </item>
                    <item>
                <title>سوزان دیوید: احساسات داده هستن ولی فرمان نیستن</title>
                <link>https://virgool.io/@ebrahimiaval/%DA%86%D8%B1%D8%A7-%D8%A8%DB%8C%D8%A7%D8%AD%D8%B3%D8%A7%D8%B3%D9%87%D8%A7-%D9%85%DB%8C%D8%A8%D8%A7%D8%B2%D9%86-%DA%86%D8%B1%D8%A7-%D9%86%D8%A8%D8%A7%DB%8C%D8%AF-%D8%A7%D8%AD%D8%B3%D8%A7%D8%B3%D8%A7%D8%AA-%D8%B1%D8%A7-%D8%B3%D8%B1%DA%A9%D9%88%D8%A8-%DA%A9%D8%B1%D8%AF-loooolzwhuec</link>
                <description>با احساساتمون چطور برخورد کنیم؟ انکارشون کنیم ؟ ازشون فرار کنیم؟ با تفکرات دروغین مثبت اندیشانه آنها را سرکوب کنیم؟ یا بگذاریم بروز کنن،‌نگران بشیم، بترسیم، خشمگین بشویم؟ کار درست چیست؟ هزینه فرصت هر کدام از این انتخاب‌ها چیست؟ بهترین رفتار را در زمان‌هایی که هیجان زده می‌شویم چیست؟این موضوعی هست که سوزان دیوید «Susan David» نویسده،‌محقق و روانشناس دانشکده پزشکی هاروارد در TEDx با عنوان «هدیه و قدرت جرأت عاطفی» / «The gift and power of emotional courage» به آن پرداخت و تلاش کردم ضمن بیان گفته‌های پروفسور دیوید شرحی تکمیلی از اون رو براتون آماده کنم.تلاش من این بوده که صرفا یک ترجمه لغتی نباشه برای همین من سعی کردم از مطالعات گذشته روانشناسی خودم و لغات بهتر و جملات تکمیلی برای انتقال عالی‌تر مفاهیم کمک بگیرم تا به هدف فهم ساده‌تر و کامل تر این موضوع جذاب برسیم بنابراین متن پیش رو هم تجربه و همه شرحی تکمیل شده هست.اگر این مطلب رو در صفحه لینکدین و شبکه‌های اجتماعی خودتون به اشتراک بذارید قطعا کسانی که به واسطه شما سود ببرن از شما متشکر خواهند بود و ممنونم که این کار رو می‌کنید. تلاش برای افزایش دانش و آگاهی یک حرکت قابل تحسین است. Susan David / TED Talkچرا باید در تجربه احساسات منعطف بوداین که در مقابل احساس ترس، خشم، غم، تنفر و ... سعی کنیم با تفکراتی مثل مثبت اندیش باش، منطقی باش، تو دیگه بزرگ شدی و ... به سرکوب احساسات بپردازیم کار درستی نکردیم و حتی این بدترین راه استفاده از مثبت اندیشی می‌تونه باشه.عدم انعطاف عاطفی یعنی تنظاهر به مرده بودن و احساس نداشتن یا تلاش برای سرکوب احساسات به قصد مثبت نگری. اگر موردی شما رو ناراحت کرده نباید تظاهر کنید که هیچ اتفاقی نیفتاده و تلقین کنید که هیچ حسی ندارید. از تجربه درد اندوه خشم ندامت فقدان و ... دست نکشید.از یک دفتر که هیچ کس جز خودتان آن را نخواهد خواند برای آنچه در ادامه شرح می‌دهیم استفاده کنید. با نوشتن می‌توانید با احساسات خود رو به رو شوید، آن‌ها را تخلیه کنید و در آن‌ها و چرایی و دلیل رخ دادن آن‌ها به کند و کاو بپردازید.تنها چیزی که قطعی است عدم قطعیت است.سازمان بهداشت جهانی: «افسردگی قبل از سرطان و بعد از بیماری قلبی دلیل عمده معلولیت در سطح جهان است.»یکی از دلایل بروز افسردگی بازداری هیجانی است که جفری یانگ در طرحوارده درمانی به آن پرداخته. در بازداری هیجانی شخص به سرکوب و انکار احساسات و هیجاناتی که می‌تواند رخ دهد می‌پردازد.وقتی ناراحت می‌شویم یا می‌ترسیم، خودمان را سرزنش می‌کنیم یا اگر فرزندمان به چنین احساساتی دچار شود سعی می‌کنیم آنها را از دچار شدن به چنین احساساتی منع کنیم و از اصطلاحاتی مثل ‌شجاع باش، نترس،‌ نارحت نشو، قوی باش و .... استفاده کنیم. نباید جلوی بروز و وقوع یک احساس را گرفت.زیبایی زندگی با شکست توأمان است.متاسفانه احساسات عادی انسانی با برچسب‌های خوب یا بد تلقی بیان می‌شوند! مثبت است چون با اخلاق و باورهای تعریفی ما سازگار است و منفی است چون سازگار نیست! حال این که می‌توان این سازگاری و ناسازگاری بر اساس یک خطای شناختی رخ دهد. احساسات را باید در حالی که مستقل از برچسب یک احساس هستن و این ذاتا ارزشمند است دید.مثلا همه ما به شخص مبتلا به سرطان توصیه می‌کنیم که مثبت اندیش باش! این درست نیست، این اتفاق ناگوار است و  ناراحتی احساسی عادی برای آن است. چرا قصد داریم وانمود کنیم که اینطور نیست و باید شاد باشیم؟! این کار ستمگرانه هست! ستم به مثبت گرایی! بی رحمانه، نامهربان است و بی اثر. متاسفانه نه تنها با خودمان بلکه با دیگران نیز چنین می‌کنیم.اگر بین فرار از احساسات، تسلیم در برابر آن و مثبت گرایی نقطه مشترکی باشد این است: «همه اینها واکنش‌های صلب ، سخت و ناکارآمد هستن!». جفری یانگ در بحث تله‌های زندگی یا به بیان تخصصی‌تر طرحواره‌ها از ۳ مکانیزم دفاع افراد بیمار در مقابل تله‌هایشان صحبت می‌کند. تسلیم، فرار و ضد حلمه یا به بیان تخصصی تسلیم، اجتناب، جبران افراطی. اگر مثبت اندیشی از جایگاه جبران افراطی در جهت انکار واقعیت باشد نه تنها مفید نیست بلکه مخرب آسیب‌زا می‌تواند عمل کند و این مستقل از بحث مثبت نگری در واقعیت علمی خود است. جفری یانگ شناخت و کنترل آگاهانه و عقلانی را راهکار صحیح معرفی می‌کند.تحقیقات در مورد سرکوب عواطف نشان می‌دهد که وقتی عواطف به حاشیه رانده می‌شوند یا مورد بی‌توجهی قرار می‌گیرند قوی‌تر می‌شوند. درست مثل کیک شکلاتی در یخچال که هر چه شما بیشتر سعی کنید آنرا انکار کنید بیشتر وسوسه‌تان می‌کند! هیچ راه فراری و فراموشی‌ای وجود ندارد!شاید فکر کنید با بی توجهی به احساسات و عواطف ناخواسته،‌آنها را کنترل می‌کنید ولی این شما هستید که در کنترل آنها هستید. وقایع ناگورا احساس برانگیز هستن و می‌توانند دردناک باشند. درد درونی همیشه روزی و در جایی سر بر می‌آورد و بهایش را چه کسی می‌پردازد؟ ما، فرزندانمان، همکارانمان، جامعه.اشتباه برداشت نکنید، من [سوزی دیوید] مخالف شادی نیستم و خودم هم آدم شادی هستم اما وقتی احساسات عادی را به کنار می‌رانیم تا مثبت گرایی کاذب را در آغوش بگیریم، ظرفیت خود برای مقابله با جهان واقعی و مشکلاتش را،‌نه جهانی که آرزویش را داریم، از دست می‌دهیم.به من می‌گن «نمی‌خوام تلاشی کنم، چون نمی‌خواهم احساس یأس کنم» یا می‌گن «فقط می‌خوام این احساس از بین بره و فرمولی جادویی معرفی کن یا قرصی که بخورم و رفع بشه» و من به اونها می‌گم «می‌فهم، اما این اهداف مرده‌هاست». حقیقت این است که فقط مرده‌ها هستم که دچار استرس نمی‌شوند، دلشکسته نمی‌شوند، و ناامیدی پس از شکست را تجربه نمی‌کنند یا بهتره بگوییم هیچ حس منفی‌ای ندارند چون احساس نمی‌کنند. ما به عنوان موجودی زنده در جهانی پرفراز و نشیب با مجموعه‌ای از اتفاقات تلخ  و شیرین قطعا به احساساتی که در تفکر عموم ناخوشایند است رو به رو می‌شویم و نباید این واقعیت را انکار کنیم بلکه باید بفهمیم رفتار صحیح در مقابل آن چیست.تاثیر مثبت بر جهان بدون تحمل فشار و زحمت امکان پذیر نیست. زحمت بهای پذیرفته شدن در یک حیات معنادار است.چطور عدم انعطاف را برچینم و انعطاف عاطفی را دریابیم؟اکنون تحقیقات نشان می‌دهد که پذیرش کامل تمامی احساساتمان  حتی احساسات دشوار و آزار دهنده سنگ بنای انعطاف و بالندگی و شادمانی واقعی و اصیل است.انعطاف عاطفی از پذیرش احساسات فراتر است. می‌دانیم که دقت نیز مهم است. در تحقیقاتم فهمیدم که کلمات نقشی مهمی دارند. باید بدانید دقیقا با چه احساسی رو به رو هستید. بین یأس و استرس دنیایی تفاوت وجود دارد. این که «من مأیوسم» با این که «من استرس دارم» متفاوت است، یا میان استرس و دلهره داشتن.وقتی که با دقت به احساساتمان برچسب می‌زنیم،‌عامل دقیق احساساتمان را بهتر تشخیص می‌دهیم و آنچه که دانشمندان  «آمادگی بلقوه» در مغز می‌نامند فعال شده و امکان برداشتن گام‌های درست را به ما می‌دهد.برداشتی اشتباه از احساساتمان تفسری اشتباه ایجاد می‌کند، بنابراین در جهتی اشتباه نسبت به رفع آن اقدام می‌کنیم. مثلا گاهی ترس خود را به شکل خشم و تهاجم بروز می‌دهد و نباید کنترل خشم آموخت چرا که زیر بنای آن ترس است. حتما دیدید که برخی افراد را که بترسانید بجای جیغ کشیدن و فرار کردن حمله‌ور می‌شوند.احساسات داده هستن [Emotions are Data] احساسات داده‌هایی هستند که بر اساس ریشه‌هایی خلق شدن و به ما اطلاعاتی درباره ریشه می‌دن .ما به چیزهایی که در دنیا اهمیتی برای ما ندارند احساسی هم نداریم پس وقتی نسبت به موضوعی حس خاصی در ما شکل می‌گیرد این یک نشانه‌ است که با بررسی آن نشانه به ریشه‌های آن می توانیم برسیم. اگر از خواندن اخبار خشمگین می‌شوید نباید جلوی آن را بگیرید بلکه باید بدانید دلیلش چیست؟ چه اطلاعاتی به شما می‌دهد؟ این خشم نشانه است،‌ نشانی از این که به برابری و عدالت ارزش می‌دهید و فرصتی است برای برداشتن گام‌های فعالانه‌تر تا زندگی خود را در آن جهت پیش ببرید.یا مثلا اگر شما از این که دوست صمیمی یا همسرتان به تلفن شما با پاسخ نداد یا با تاخیری زیاد پاسخ داد و حس خشم و نگرانی کردید این می‌تواند یک نشانه باشد. جفری یانگ در طرحواره درمانی این رفتار را به عنوان یکی از رفتارهایی که می‌تواند نشانه طرحواره «رها شدگی / بی‌ثباتی» باشد دسته بندی کرده است. شما با شناسایی کردن این احساس به کمک رواندرمانگران فعال در حوزه طرحواره درمانی می‌توانید این نقص خود را شناخته و به ریشه‌های تحولی آن برسید و آن را برطرف کرده و بهبودی در شخصیت فردی خود ایجاد کنید. اما اگر این رفتار را یک رفتار عادی بدانید یا از ان فرار کنید یا سعی کنید با مثبت اندیشی در حالی که سراسر خشم و نگرانی هستید به آن حلمه کنید هیچ نتیجه مثبتی نخواهید گرفت و این مشکل حل نخواهد شد.وقتی آمادگی رویارویی با احساسات دشوار را داریم، قادر به پاسخگویی همتراز با آن ارزش‌ها هستیم.اما یک هشدار مهم نیز مطرح است. احساسات داده‌های اطاعاتی هستند فرمان نیستد.احساسات داده هستن، فرمان نیستید [ Emotions are Data, not Directives ]ما می‌توانیم احساساتمان را برای کشف ارزش‌های درونیمان کند و کاو کنیم و به اکتشاف در آنها بپردازیم بدون این که لازم باشد به فرمان آنها گوش بدهیم و کاری بکنیم.ما میتوانیم در طی خواندن یک خبر خشمگین شویم و کشف کنیم که پیرو ارزش انسانی عدالت و برابری هستیم ولی لازم نیست به فرمان آن که می‌گوید برو و کسی که نابرابری کرده رو بکشن گوش کنیم!مثلا من [سوزان دیوید] می‌توانم وقتی پسرم از دست خواهر کوچکش کلافه می‌شود در کنارش باشم و با ان همدلی کنم ولی از این نظرش که می‌گوید خواهرش را بدهیم به اولین غریبه‌ای که در خیابان می‌بینیم حمایت نکنم.ما مالک احساساتمان هستیم،‌آنها مالک ما نیستند.وقتی تفاوت میان این که «با تمام منطق و عقلانیتی که دارم چگونه احساس می‌کنم» و این که «در راستای ارزش‌ها چه اقدامی از من سر می‌زند و رفتار من چیست» نهادینه شود و به بخشی از رفتار من تبدیل شود، ما می‌توانیم بهترین مسیر ممکن را طی کنیم و آن را مدیون عواطفمان خواهیم بود.در عمل چگونه رفتار کنیم؟وقتی که حس عاطفی قوی و سختی را احساس می‌کنید،‌ فورا به دنبال راه‌های فرار از تجربه این احساس نباشید. آن را بشناسید، به خاطرات خودتان سر بزنید و ریشه‌های تحولی آن را پیدا کنید. سعی کنید بفهمید که آن حس عاطفی به شما چه می گوید؟ از گفتن «من...هستم» در جاهایی مثل من عصبانی هستم یا من غمگین هستم پرهیز کنید چون وقتی می‌گوید که «من...هستم» طوری می‌نماید که انگار شما آن احساس هستید در حالی که شما شما هستید و آن احساس هم یک منبع اطلاعاتی که می‌توانید از آن برای کشف خود استفاده کنید.به جای «من...هستم» بگوید «متوجهم که احساس ... را دارم». پس نه آن را انکار کنید و بگوید «نه، من اصلا احساس ... ندارن» مثلا من اصلا نترسیدم، من اصلا نگران نیستم، من اصلا غمگین نیستم و نه تسلیم آن شوید و جوری جلوه کنید که انگار برده احساس خود شدید و تابع فرمان آن هستید مثلا من غمگین هستم، من حس ضعف می‌کنم، من خجالت زده هستم تا ذهن شما آن را به شکل یک بن بست غیرقابل تغییر بشناسد، بلکه سعی کنید با خودتان همدلی کنید و بگوید میدانم که این اتفاق ناراحت کننده هست، متوجهه هستم که این اتفاق باعث ترس من شده و سپس به دنبال این بگردید که چرا چنین است و با ریشه‌های آن که ارزش‌های شما را شکل می‌دهد آشنا شوید و از آن در جهت رشد خود استفاده کنید. کند و کاو احساسات برای کشف ریشه‌ها هدف ما از این انعطاف عاطفی است تا بتوانیم با شناخت ریشه‌ها به شناختی از خود و ارزش‌های خود برسیم و با اصلاح و بهبود آن به شخصیتی فرهیخته و رشد یافته تبدیل بشویم.«اینها مهارت‌هایی حیاتی برای خودمان، خانواده‌هایمان و جوامع‌مان هست و برای محیط کار نیز اساسی‌اند.»در تحقیقاتم [سوزان دیوید] وقتی به آنچه به افراد کمک می‌کند،‌تا بهترین وجه خود را به ظهور برسانند،‌ یک عامل کلیدی مهم یافتم: «ملاحظه شخصی». وقتی افراد امکان حس کردن حقیقت عاطفی خود را می‌یابند،‌ارتباط، خلاقیت و نوآوری در محیط سازمانی شکوفا می‌شود.تنوع و تکثر فقط درباره ظاهر و بعد مشاهده افراد نیست بلکه درباره درون و احساسات افراد نیز هست. منعطف‌ترین و سازگارترین افراد،‌تیم‌ها،‌ سازمان‌ها، خانواده‌ها و جوامع آنهایی هستند که بر اساس پذیرا بودن احساسات عادی انسانی بنا شده‌اند. همین است که به ما اجازه می‌دهد تا بگوییم «عواطف و احساساتم به من چه می‌گویند؟» ، «کدام اقدام مرا به ارزش‌هایم می‌رساند و کدام یک مرا از ارزش‌هایم دور می‌کند؟».احساسات مثل تابلوهای راهنما عمل می‌کنن فقط باید به آنها توجه کرد، آنها را نادیده نگرفت و از آنها به بهترین وجه ممکن استفاده کرد تا به مقصدی که رشد ما را محقق می‌سازد برسیم.انعطاف عاطفی یعنی قدرت لمس و پذیرش عواطف و احساسات عادی انسانی،‌ همراه با کنجکاوی، شفقت و مهربانی و بویژه جرأت برداشتن گام‌های مرتبط باارزش در جهت رشد شخصی.وقتی که بچه بودم خواب مرگ می‌دیدم، پدر مرا در آغوش گرفت و سعی نکرد به من دروغ بگوید و حس ترس من از مرگ را انکار کند بلکه گفت «همه ما میمیرم، سوزی و خیلی عادی است که بترسی.». تلاش نکرد تا بین من و واقعیت مانعی ایجاد کند و من تلقین کنم که مرگ ترس ندارد! مرگ ترس دارد و این یک حس عادی انسانی است. مدتی طول کشید تا به نحوه هدایت من در آن شب‌ها پی ببرم، آنچه یاد داد این بود که جرأت، بی‌باکی نیست،‌ جرأت ترس متحرک است. این کار به من یاد داد تا بدانم فرصت محدود است و باید از ان به بهترین وجه ممکن استفاده و به رشد خودم بپردازم تا وقتی که لحظه آن فرار رسید و پرسید «برای مرگ حاضری؟»  جوابم با نگریستن به خودم یک «بله» قاطع باشد.منبع پایه مطلب: سخنرانی سوزان دیوید در تدکس / گرداورنده و تکمیل کننده: محمد ابراهیمی اول / 1399/8/29</description>
                <category>محمد ابراهیمی اول</category>
                <author>محمد ابراهیمی اول</author>
                <pubDate>Thu, 19 Nov 2020 22:18:36 +0330</pubDate>
            </item>
                    <item>
                <title>کتاب مدیر مدرسه جلال آل احمد</title>
                <link>https://virgool.io/@ebrahimiaval/%DA%A9%D8%AA%D8%A7%D8%A8-%D9%85%D8%AF%DB%8C%D8%B1-%D9%85%D8%AF%D8%B1%D8%B3%D9%87-%D8%AC%D9%84%D8%A7%D9%84-%D8%A2%D9%84-%D8%A7%D8%AD%D9%85%D8%AF-kgk0nrzmsjk1</link>
                <description>نیت کردم نکات و برداشت‌های خودم از کتاب‌هایی که می‌خونم رو بنویسم تا اگر حافظه یاری نکرد، این یادگاری یادم بندازه. کتاب‌های آدم‌های بزرگ شیره‌ی تفکرات و خلاصه‌ی زندگیِ غیرمعمول و غیرِ «صبح برو سرِ کار، شب بخواب، روز از نو»شون هست و حیفِ که از این نعمت‌ها استفاده نکنیم.مدیر مدرسه جلال آل‌احمدمدیر مدرسه – جلال آل‌احمدکتاب مدیر مدرسه داستان آقا معلمی‌ست که برای فرار از سختیِ معلم دبستان بودن و با دم این و آن دیدن، مدیر مدرسه‌ای در ناکجاآباد می‌شود؛ که البته آخر سر خودش به این اشتباه پی می‌برد.۱ :: خطای شناختی و توهمِ پیش از تجربه بزرگ‌ترین درس این داستان است.ما آدم‌ها وقتی نیت انجام کاری می‌کنیم، به‌جای این‌که بریم و پای حرف اهل تجربه بشینیم، برای خودمون رؤیاپردازی می‌کنیم تا مبادا این خیالِ عسلی با تلخیِ حقیقت قاطی بشه و کامِ شیرین‌مون تلخ بشه.این آقا معلمِ مدیرشده اصلاً برای مدیریت نیامده بود؛ آمده بود تا کُنجی امن و آسوده پیدا کنه برای استراحت. واسه همین تا می‌تونسته در کارها دخالتی نمی‌کرده و عملاً ناظم رو با رفتارش مدیر می‌کرده. مدیری که برای فرار و آرامش داشتن، کارها رو به دیگران می‌سپره، چیزی جز هرج‌ومرج درو نمی‌کنه. اتفاقی که مایکل گربر در کتاب افسانه‌ی کارآفرینی درباره‌ی علت شکست استارتاپ‌ها در مرحله‌ی نوجوانی گفته، در اینجا هم دیده میشه.گربر توصیه می‌کنه در کنار سپردن کارها به دیگران، نظارت و قدرت نفوذ خودتون رو حفظ کنید و خیال آسوده نکنید که چون فلانی هست و فعلاً همه‌چیز خوبه، پس کاری که می‌کنم درسته؛ وگرنه روزی به اشتباه بودنش پی می‌برید که دیگه کار از کار گذشته و حتی کسی شما رو هم به عنوان مدیر و تکیه‌گاه نه می‌شناسه، نه قبول داره.۲ :: موضوع دیگه‌ای که در این داستان به چشم می‌خوره چیزیه که در جامعه‌ی امروز ما اکثراً اون رو دیدیم یا حداقل شنیدیم: نفوذ افراد پول‌دار و توسری‌خوردنِ افراد معمولی و فقیر.در دو جای این داستان، دو اتفاق برای افراد معمولی جامعه می‌افته — یکی معلم کلاس چهارم و دیگری یک فرد عادی — و آقا مدیر از درِ حق‌خواهیِ اون‌ها درمیاد. ولی در نهایت، طرف پول‌دارِ ماجرا با وعده‌وعیدهایی دمِ شاکی رو می‌بینه و به اون می‌فهمونن که «کاسه داغ‌تر از آش نباشه». چیزی که بیشتر از هر چیز در این بخش لمس میشه، قدرت پوله که بر هر علم و هنر و فرهنگی می‌چربه. انگار نویسنده خواسته جواب انشای «علم بهتر است یا ثروت» رو به گوش بقیه برسونه و از تلخیِ این حقیقت بگه!۳ :: در جایی از داستان هم به بحث داغ این روزهای کشور ما، یعنی اختلاس، پرداخته شده که جالبه نمونه‌ی مشابهش در زمان حال هم وجود داره. برداشتنِ حق‌وحقوق معلم‌ها و ناپدید شدنِ عاملانش نشون میده که حداقل در سده‌ی اخیر، این مقوله در ایران یک اتفاق عادی بوده و تغییرات سیاسی هم تأثیری بر این روند نداشته. جالب‌تر این‌که هم در دیروز و هم در امروز، مردم می‌دونن «یکی برد»، ولی به قول آل‌احمد:«یارو یک تکه نان شد و سگ خورد»و از آخر ماجرا کسی خبری نداره.۴ :: از جذابیت‌های این داستان، نثر بی‌پرده، تند و خودمانیِ آل‌احمده که یک تصویر واقعی و بی‌هیچ سانسوری از آنچه واقعاً رخ میده نشون میده. مخصوصاً در روزگارِ امروزِ اینستاگرامی که کمتر کسی خودش هست و همه سعی می‌کنن آراسته و اتوکشیده باشند، عیب دیگران رو نقد کنن و بی‌خار و عیب جلوه کنن تا دیگران هم نقدشون نکنند.اما خب شاید وجود بعضی کلمات باعث بشه پدری به بچه‌ش خوندن این کتاب رو توصیه نکنه — یا حداقل تا وقتی به +۱۸ برسه!۵ :: نقد به خود و پی‌بردن به اشتباه‌ها هم یکی از درس‌های جذاب این داستان بود.مدیر مدرسه، که راوی داستان هم بود، وقتی به اشتباه خودش پی می‌برد، خودش رو نقد می‌کرد و به دنبال اصلاح و جبران می‌رفت.محمد ابراهیمی اَوَلفروردین ۹۹</description>
                <category>محمد ابراهیمی اول</category>
                <author>محمد ابراهیمی اول</author>
                <pubDate>Tue, 21 Apr 2020 15:14:38 +0430</pubDate>
            </item>
                    <item>
                <title>وب اپلیکیشن چیست؟ تفاوت و شباهت‌ آن با وب سایت ‌چیست؟</title>
                <link>https://virgool.io/@ebrahimiaval/%D9%88%D8%A8-%D8%A7%D9%BE%D9%84%DB%8C%DA%A9%DB%8C%D8%B4%D9%86-%DA%86%DB%8C%D8%B3%D8%AA-%D8%AA%D9%81%D8%A7%D9%88%D8%AA-%D9%88-%D8%B4%D8%A8%D8%A7%D9%87%D8%AA-%D8%A2%D9%86-%D8%A8%D8%A7-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-%DA%86%DB%8C%D8%B3%D8%AA-xsa3ok0yrbj7</link>
                <description>می‌تونید پادکست رو یاد در ویدیو زیر یا در کست باکس یا هم در اینستاگرام گوش کنید و یا هم متن زیر که یادداشت برداری شده از پادکست هست رو مطالعه کنید. اگر می‌خواهید به همه محتواها دسترسی داشته باشید هم کانال تلگرام اول آموزش رو دنبال کنید.  https://www.aparat.com/v/b72Uk به وبلاگ‌های شخصی، سایت‌‌ها خبری مثل زومیت یا ورزش ۳ و مواردی از این دست میگن وب سایت و به جیمیل، گوگل انالاتیکس، تسکولو  چیزایی از این دست هم میگن وب اپلکیشن.وب اپلیکیشن یک نرم افزار یا برنامه هست که میشه به اونها توسط مرورگر وب دسترسی داشت و از ازشون استفاده کرد. کلمه اپلیکیشن نباید شما رو به اشتباه بندازه و اون رو چیزی شبیه به یک برنامه موبایل بدونید.برخلاف برنامه‌های موبایل، برای توسعه اونها نیاز به استفاده از یک SDK مشخص نیست در واقع اون‌ها مال همه چیز در همه جا هستن و با زبان‌های توسعه وب ساخته میشن!یکی از مزیت‌های وب اپلکیشن‌ها این هست که بر روی بسیاری از دستگاه‌ها قابل استفاده هستن یا اصلاحات Cross platform هستن به عبارتی روی هر دستگاهی که یک مرورگر وب قابل نصب باشه شما می‌تونید از اونها استفاده کنید.در گذشته برای استفاده از نرم افزارها تنها گزینه دسکتاپ بود و  هر نرم افزار فقط روی یک سیستم عامل مشخص قابل نصب بود. بعد از مدتی گوشی‌ها هم قابلیت پردازشی مناسبی پیدا کردن و برنامه‌هایی برای اونها توسعه داده شد ولی باز هم مشکلی وجود داشت. برنامه‌های مربوط به دسکتاپ روی موبایل نصب نمی‌شدن و بلعکس. با امدن وب اپلیکشن‌ها هر دو مشکل حل شده. امروز یک وب اپلکیشن نوشته میشه و قابلیت اجرا بر روی همه دستگاه‌ها رو داره و از همه مهم‌تر داده‌ها و رفتاره‌ها در همه سیستم‌ها امکان Sync  یا همون همگام یا یکسان شدن رو دارن. این یعنی برنامه‌هایی ارزون‌تر، سریع‌تر و قابل اعتماد‌ترالبته فعلا نباید انتظار حضور نرم‌افزارهای گرافیکی و پردازشی قدرتمند رو داشته باشیم هر چند در آینده‌ای نزدیک این هم ممکن میشه حتی همین الان هم سایت‌های مثل photopea.com که یک جورای میشه گفت یک فتوشاپ انلاین هست داره فعالیت می‌کنه و حتی بازی‌های تحت وبی زیادی هم با گیم انجین  webgl نوشته شده که در وب سایت crazygames.com بازی کنید.تفاوت وب سایت و وب اپلکیشناما بریم سراغ وب سایت‌هااصلی‌ترین هدف یک وب سایت‌ها ارائه محتوا و اطلاعات هست که بخاطر قدمتی که دارن میشه گفت پدر بزرگ وب اپلیکیشن‌ها هم به حساب میان.  برخلاف وب اپلکیشن‌ها که هدف اصلی اونها عملیات‌ هست در وب سایت‌ها عملیات‌ها چندان به چشم نمیان و نهایت به یک فرم تماس با ما، ثبت کامنت برای مطلب یا عملیات‌های ساده‌ای مشابه اون ختم میشه. به طور کلی میشه گفت یک وب سایت مجموعه‌ای از صفحات محتوایی مرتبط به هم هست که صفحه اصلی اون‌ها اهمیت بسیار بالایی داره این در حالی هست که در وب اپلکیشن‌ها بخش‌های عملیاتی‌ای وجود داره که هر کدوم می‌تونه به صورت مستقل اهمیت خاص خودش رو داشته باشه و مشخصا نشه گفت کدوم برتر از اون یگی دیگه هست.در وب سایت‌ها عمده محتوا برای همه کاربران یکسان هست و خیلی لاگین بودن یا نبودن کاربر واسشون مهم نیست اما بحث SEO در اکثر موارد واسشون اهمیت بسیار بالا‌یی داره. این در حالی هست که در وب اپلیکیشن‌ها به جز چند صفحه عمومی که عمدتا یک سری توضیحات در اونها قرار داده شده و کاربر رو به لاگین یا ثبت نام هدایت میکنه بقیه خدمات و امکانات به کاربر وابسته هست و زشون خواسته میشه لاگین یا ثبت نام کنن تا محتوا و ابزارهای عملیاتی خاص خودش رو ببینه.البته جدیدا شاهد نوع جدیدی هستیم که شاید بشه به اون‌ها گفت وب سایت اپلیکیشن که ترکیبی از هر دو هستن و مشخصا نمیشه گفت کدوم هستن مثل بعضی از فروشگاه‌های اینترنتی یا سایت‌های اشتراک محتوا. اما به طور کلی مشخصه اصلی یک وب سایت محتوا محوری و محتوایی یکسان با حساسیت کم نسب کاربر هست ولی در وب اپلیکیشن وابستگی شدیدی به کاربر و رفتارش وجود داره و عملیات‌ها مهم‌تر از هر چیز دیگه‌ای هستن و محتوای چندانی هم عمدتا وجود نداره.اما شباهت شونلایه Front-End هر دو این ها معمولا با زبان‌های HTML, CSS و JavaScript ساخته شده است که امروزه همه مرورگرهای مشهور از اون‌ها پشتیبانی می‌کنن و Back-End اون‌ها  هم می‌تونه با هر زبانی مثل تا آخر, Node JS, PHP و هر زبان بک اندی دیگه‌ای نوشته شده باشه در واقع این دو فقط ساختار ،بیزینس پلن و نحوه ارائه خدمتشون متفاوت هست ولی در اصل از یک چیز خلق شدن.البته لازم هست که تاکید کنم برای توسعه یک وب اپلیکیشن دانش و تجربه برنامه نویسی بیشتری لازم هست و عمدتا قیمت‌ تمام شده وب اپلیکیشن‌ها به مراتب بالاتر یا حتی ‌در مواردی چندین برابر  توسعه یک وب‌ سایت‌ خواهد بود. محمد ابراهیمی اول / اسفند ۹۸قسمت بعدی &quot;رازهای استخدام و درآمد برنامه نویسی - قسمت یک&quot; https://virgool.io/@ebrahimiaval/%D8%B1%D8%A7%D8%B2%D9%87%D8%A7%DB%8C-%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D9%88-%D8%AF%D8%B1%D8%A2%D9%85%D8%AF-%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87-%D9%86%D9%88%DB%8C%D8%B3%DB%8C-%D9%82%D8%B3%D9%85%D8%AA-1-am9uv2bkwkjk </description>
                <category>محمد ابراهیمی اول</category>
                <author>محمد ابراهیمی اول</author>
                <pubDate>Tue, 17 Mar 2020 16:10:35 +0330</pubDate>
            </item>
                    <item>
                <title>چرا جاوا اسکریپت خنگ به نظر می‌رسد!</title>
                <link>https://virgool.io/avalamoozesh/%DA%86%D8%B1%D8%A7-%D8%AC%D8%A7%D9%88%D8%A7-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-%D8%AE%D9%86%DA%AF-%D8%A8%D9%87-%D9%86%D8%B8%D8%B1-%D9%85%DB%8C%D8%B1%D8%B3%D8%AF-mtc1utxmhatb</link>
                <description>در جاوا اسکریپت موضوعی هست که باعث گیج شدن توسعه‌دهنده‌ها میشه و دلیلی شده برای نقد و مسخره کردن جاوا اسکریپت. چیزی شبیه این:اما داستان چیهبهتره برای شناخت و حل این چالش کمی عمیق‌تر موضوع رو بررسی کنیم از جایی که جاوا اسکریپت تصمیم گرفت منعطف باشه و مثل C++ یا هم قبیله‌هاش سختگیر و خشک نباشه.واسه همین  اون تصمیم گرفت از نوع داده سست یا weak typing یا همون dynamic typing پشتیبانی کنه. این سبک معمولا به عنوان یک مزیت برای انعطاف پذیری برنامه‌ عنوان میشه. در این حالت برای متغییر نوع داده مهم نیست و هر مقداری رو در طول پروسه برنامه می‌توانیم در اون مقدار‌دهی کنیم. به عبارتی متغییر‌ها ظر‌ف‌هایی هستند که هر نوع داده‌ای را هر وقت بخواهیم می‌توانیم در آن بریزیم بدون این که به خطا و مشکلی بخوریم یا این که بعد از تبدیل نوع داده در طول برنامه مجبور باشیم تا یک متغییر جدید برای نوع داده جدید بوجود آمده بسازیم.این مثال رو ببینید (بهتره کد‌ها رو کپی کنید و در کنسول مرورگر اجرا کنید و نتیجه رو ببینید):var amount = 99.99;
amount = amount * 2;
console.log(amount); // 199.98
// convert `amount` to a string, and
// add &amp;quot$&amp;quot on the beginning
amount = &amp;quot$&amp;quot + String(amount);
console.log(amount); // &amp;quot$199.98&amp;quotدر ابتدا amount داده‌ای از نوع Number داشت و در خط یکی مونده به آخر طی عملیات‌هایی داده‌ از نوع String شد. این در نوع داده سست یا پویا مجاز هست حالا فرض کنید اگر جاوا اسکریپت از نوع داده سخت یا Static typing که برخی موارد به اون type enforcement هم گفته میشه پشتیبانی می کرد در خط یکی مونده به آخر باید یک متغییر جدید مثلا amountAsString تعریف می‌شد تا داده تغییر یافته رو نگهداری می‌کرد و دیگه نمی‌شد داده رو توی amount که جنس عددی میگیره ریخت.تبدیل نوع داده خودکار ضمنی یا همون implicit coercion گفتیم که جاوا‌ اسکریپت با اختیار و علم، منعطف بودن رو انتخاب کرده در حالی که می‌تونست مثل خیلی از زبان‌ها خشک و سخت‌گیر باشه. یکی از ویژه‌ترین دلایل فراگیری و محبوب شدن JS همین منعطف بودنش هست.در راستای همین انعطاف پذیری جاوا اسکریپت در دل خود و دور از چشم ما قابلیتی رو پشتیبانی میکنه تحت عنوان تبدیل نوع داده خودکار ضمنی یا همون implicit coercion. در JS شما برای عملیات‌های ریاضی باید جنس داده‌هاتون عددی باشه و اگر بخواین چیزی رو روی صفحه نمایشگر نشون بدید باید از نوع String باشه و وقتی دارین شرط رو چک می‌کنید باید یک داده بولین (true / false) باشه.در راستای همین انعطاف پذیری JS وقتی نوع داده برای عملیاتی معتبر نباشه خودش سعی می‌کنه به نوع داده‌ای که می‌تونه معتبر باشه تبدیل نوع انجام بده و تا حد امکان سخت نگیره و خطا نده. مثلا وقتی شما یک رشته رو به یک شرط بدید اون رو به بولین تبدیل می‌کنه و نمیگه داده معتبر نیست و باید بولین باشه. در JS رشته‌ی تنهایی که خالی هست به False و دارای کاراکتر به True تعبیر میشه:if (&amp;quot this is sample test &amp;quot)
    alert&#40;1000&#41;;همچنین یک اتفاق دیگه هم در کد بالا می‌افته ولی شما متوجه اون نمی‌شید. وقتی alert اجرا میشه چون نمایش یک داده در صفحه است باید 1000 که یک عدد است به رشته تبدیل بشه این کار رو JS اتوماتیک انجام میده. به همه این تبدیل‌های خودکاری که اتفاق می‌افته تبدیل نوع داده خودکار ضمنی یا همون implicit coercion گفته میشه.از طرفی این کار بسته به محل و شرایط اتفاق می افته نه همیشه و همه جا به یک صورت.مثلا رشته غیر خالی اگر به تنهایی در شرط بیاد به true تعبیر می‌شود ولی اگر در یک عملیات مقایسه‌ای بیاد به عدد تبدیل میشه و اگر رشته قابل تبدیل به عدد نباشه NaN میشه!&gt;&gt;&gt; &amp;quot0&amp;quot == false
true

&gt;&gt;&gt;  if (&amp;quot0&amp;quot) console.log(&amp;quot it&#039;s true &amp;quot)
it&#039;s true 
هر چیزی یه خوبی داره یه بدی داره انصافا درک این تبدیل نوع خودکار کمی پیچیده هست و خب طبق رسم این دنیا هر چیزی یه خوبی‌ داره یه بدی.این کار باعث کاهش عدم قطعیت کد و بروز خطاهای عجیب غریب و گیج کننده‌بودن برای توسعه دهنده میشه. به مثال زیر دقت کنید:یک مثال دیگه:I&gt;&gt;&gt; &amp;quot0&amp;quot == 0
true

&gt;&gt;&gt; 0 == [ ]
true


&gt;&gt;&gt;  &amp;quot0&amp;quot == [ ]
falseراه حلراه حل این مشکل استفاده از شرط‌های قطعی و تبدیل نوع‌های دستی هست. در واقع هر کس این اصول رو یاد گرفت و باش مشکلی نداشت می‌تونه باش کار کنه ولی کسایی که نمی‌تونن JS دستشون رو نبسته و این امکان رو گذاشته که از شرط قطعی و تبدیل اجباری استفاده کنن تا شبیه زبان‌های نوع داده سخت بشه. دو مثال بالا بعد از تغییرات سختگیرانه:&gt;&gt;&gt; &amp;quot0&amp;quot === false
false


&gt;&gt;&gt; if (   Number(&amp;quot0&amp;quot)  !== 0   )    console.log(&amp;quot it&#039;s true &amp;quot)
// no resultیک مثال دیگه:I&gt;&gt;&gt; &amp;quot0&amp;quot === 0
false

&gt;&gt;&gt; 0 === [ ]
false


&gt;&gt;&gt;  &amp;quot0&amp;quot === [ ]
falseاین مطالب هم می‌تونه واست سودمند باشه: https://virgool.io/JavaScript8/%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D8%AA%D9%88%D8%B3%D8%B9%D9%87-%D8%AF%D9%87%D9%86%D8%AF%D9%87-front-end-%DB%8C%D8%A7-%DA%86%DB%8C-euhuy45ijfdf  https://virgool.io/programmers-revolution/%D8%A7%D8%B3%D8%AA%D8%A7%D8%B1%D8%AA%D8%A2%D9%BE-%DB%8C%D8%A7-%D9%82%D8%AA%D9%84%DA%AF%D8%A7%D9%87-%DA%A9%D8%A7%D8%B1%D9%85%D9%86%D8%AF%D8%A7%D9%86-whtphuslrdju </description>
                <category>محمد ابراهیمی اول</category>
                <author>محمد ابراهیمی اول</author>
                <pubDate>Sun, 19 May 2019 13:37:49 +0430</pubDate>
            </item>
                    <item>
                <title>چالش‌های نسخه Production در React JS</title>
                <link>https://virgool.io/iran-react-community/%DA%86%D8%A7%D9%84%D8%B4%D9%87%D8%A7%DB%8C-%D9%86%D8%B3%D8%AE%D9%87-production-%D8%AF%D8%B1-react-js-hygungwpgukx</link>
                <description>دنیای Front-End داره روز به روز پیچیده‌تر و البته حرفه‌ای تر میشه. در گذشته همه دیدی ساده انگارانه به Front-End داشتن ولی الان این فیلد داره شونه به شونه فیلد‌هایی حرکت می‌کنه که در گذشته پرچم دارن بودن. این خروج Front-End از حاشیه و ایفای نقش به عنوان یک نقش کلیدی در بازی توسعه وب علاوه بر حس خوبی که ایجاد کرده مشکلات و چالش‌هایی رو هم به همراه داشته.تا دیروز چندتا فایل js  رو با تگ script به انتهای یک صفحه اضافه می‌کردید و در قلب یک Framework یا ساختاری از جنس Back-End کد میزدید اما امروز به عنوان یک واحد مستقل عمل کنید و کارهایی مثل مدیریت Routeهای وب سایت  که تا دیروز back-end انجام می‌داد رو در لایه front-End انجام بدید.برای همین مانند یک سیستم توسعه حرفه‌ای، در پروژه‌های جدید Front-End و به خصوص React باید دو حالت داشته باشیم، یکی برای توسعه (dvelopment) و یکی هم برای تولید (prodcution). یکی برای وقتی که در حال توسعه و دیباگ هستیم و یکی دیگه هم واسه وقتی که قرار نیست کدی تغییر کنه و باید توسط تعداد زیادی کاربر استفاده بشه. به عبارتی در حالت توسعه تعداد کاربران ( توسعه دهندگان) کم هست  و نرخ تغییرات کد زیاد  ولی در حالت تولید تعداد کابران زیاد و نرخ تغییرات کم. جدای از این‌ها، محل اجرا و تنظیمات جانبی این دو حالت هم با هم متفاوت هست.نمونه‌ای برای دو حالت توسعه‌ و تولیداگر شما از یک ابزار استاندارد توسعه‌ری‌اکت استفاده می‌کنید، احتمال زیاد این دو حالت در اون وجود داره. مثلا در ابزارCRA یا همون Creact React App شما با اجرای دستور npm start می‌تونید برنامه ری‌اکت خودتون رو در حالت dvelopment اجرا کنید و  با اجرای دستور npm run build  هم برنامه رو به صورت فایل‌های استاتیک فشرده و باندل شده‌ در بیارید و نسخه prodcution رو بسازید.عدم استقبال توسعه‌دهندگانچند موردی که دیدم و باشون صحبت کردم فهمیدم دلیل این که سراغ پروداکشن نرفتن یک یا چندتا از موارد زیر هست:بی‌انگیزه بودن: بخاطر این که در حالت توسعه هم پروژه کار می‌کنه و تفاوت این دو حالت رو خیلی واضح درک نمی‌کنن انگیزی زیادی برای این که وقت بذارن و یاد بگیرن نمی‌بینن!در نهایت این افراد نسخه توسعه رو در اختیار کاربران هم قرار میدن! مثلا پروژه CRA رو می‌برن روی یک سرور مجازی و روی اون دستور  npm start رو اجرا می‌کنن، بعد nginx  رو به پورت 3000 پراکسی می‌کنن و بعد خوشحال میشن از این که پروژه لانچ شده! وقت نداشتن: حس می‌کنن خیلی کار وقت گیری هست و الان وقت این کار رو ندارن (البته تو این مورد بعضی‌ها راست میگن! به طرف دوزار میدن یه ماه هم وقت بعد  ازش بوینگ 727 می‌خوان!)آشنا نبودن: چون قبلا در توسعه Front-End چنین چیزی رو تجربه نکرده بودن اصلا با این موضوع آشنایی نداشتن و گاهی هم که چیزهای در موردش شنیدن احساس کردن یه چیز تشریفاتی هست نه الزامی.الزامی برای پروژه‌های React ساختار مستقلپروژه‌های ری‌اکتی که به سبک جدید یعنی ساختاری مستقل و SPA هستن (نه به صورت زیر مجموعه‌ای از یک ساختار Back-Endی) عمدتا دارای ساختار پیچیده‌ای هستن.  برای مدیریت پیچیدگی، دیباگ و بهبود performance کد‌ها نیاز هست از ابزارهایی مثل webpack ، ES-lint ، react-dev-tools و ... استفاده بشه و گاهی هم استفاده ازشون الزامی چون واقعا بدون اینها نمیشه کار رو خیلی خوب توسعه داد. طبیعی هست که برخی ساختارها صرفا به درد محیط توسعه می‌خوره و جایی در تولید ندارد مثل webpack-hot-reload که با تغییر کد اتوماتیک مرورگر رو رفرش می‌‌کنه.  البته می‌دونید که خود React صرفا یک کتابخانه مدیریت Component هست و چیز خیلی خاصی نداره ولی از اونجایی که پایه ساختار و بستر کار چندین کتابخانه،پلاگین و ابزار دیگه شده اسم اون روی پروژه میاد و مثلا میگن این پروژه با React زده شده در حالی که ترکیب چند پکیج مختلف و گاه مستقل هست.( redux ، react-dom، react-router-dom ،axios و ....) فقط داشتن دو محیط تفکیک شده کافی نیستاگر بخواهیم کمی دیدمون رو وسیع‌‌تر کنیم و تولید رو  فقط نسخه تولید معنی نکنیم و  به داشتن دو محیط مجزا کار رو ختم نکنیم میشه گفت که ساختار هر پروژه می‌تونه شرایطی رو به وجود بیاره که ما رو مجبور به توسعه برنامه به سبک خاصی کنه. مثلا نیاز به SEO و Render سمت سرور ما رو مجبور به تغییر ساختار پروژه از CSR به SSR می‌کنه که این تغییر خود باعث تغییر بسیاری از موارد دیگه میشه. برای آشنایی با چیستی و تفاوت‌های SSR و CSR در React JS این مطلب رو بخونید: https://virgool.io/iran-react-community/%D8%B4%D9%86%D8%A7%D8%AE%D8%AA-%D9%85%D9%81%D8%A7%D9%87%DB%8C%D9%85-ssr-%D9%88-csr-%D8%AF%D8%B1-react-js-v2lsdju7aiuc چالش‌های تبدیل CSR به SSRدو حالت CSR و SSR شاید در 90٪ ساختار‌ و سبک توسعه یکسان باشن ولی همون 10٪ تفاوت‌های بنیادینی رو ایجاد میکنه و باعث بروز برخی چالش‌ها میشه. که در زیر دو مورد از این چالش‌های رو می‌بینید:فایل‌های استاتیک در مقابل نسخه پویادر حالت CSR نسخه تولید تنها چند فایل فشرده شده استاتیک هست و میشه با یک هاست معمولی هم پروژه رو لانچ کرد ولی در حالت SSR شما به یک وب سرور node js برای مدیریت Render سمت سرور و یک process manager مثل PM2  برای پایداری اجرای برنامه نیاز دارید. این تفاوت در این هم تفاوت ایجاد می‌کنه که شخصی که توسعه دهده CSR هست الزاما نیاز نیست با node js آشنا باشه ولی در SSR الزامی هست و باید کلیت و دانشی حداقلی از این موضوع داشته باشه. از طرفی CSR رو میشه با یک هاست معمولی هم هندل کرد در حالی که SSR نیاز به محیطی داره که بشه روی اون یک وب سرور node js رو اجرا کرد. این در حالی هست که حالت توسعه این دو تقریبا یکسان هست.مرورگر در مقابل ایزومورفیککدها در CSR فقط در مرورگر اجرا میشه در حالی که در SSR به صورت ایزومورفیک یعنی هم در مرورگر و هم در سرور توسط node js اجرا میشه. این یعنی اگر در کدهایی که در سرور پردازش میشه شما ویژگی‌هایی که خاص مرورگر هست رو فراخوانی کنید به خطا میخورید. مثلا اگر در render یک کلاس Component کد زیر نوشته شده باشه به خطا می خورید:const path = .pathname;برای حل این مشکل باید محیط رو تشخصی بدید (یکی از راه‌های تشخیص بررسی وجود شی window است) و بر اساس شرایط کار رو پیش ببرید. مانند:const path =  (typeof window !== &#039;undefined&#039;) ? 
                            .pathname
                            :
                             req.url    // req is request object of express node JS frameworkهمچنین برای عملیات‌های اصلی از ساختار‌هایی که از ایزومورفیک پشتیبانی می‌کنند باید استفاده کنید. مثلا برای هندل درخواست‌های ajax در مرورگر و HTTP request یا اصطلاحا server fetch  در سرور  باید از axios استفاده کرد و پکیج‌هایی که صرفا می‌توانند ajax یا server fetch کنند کارایی ندارن.متغییر‌های محیطی/ environment variable (فایل env.)گفتیم که برخی اتفاقات فقط باید در یکی از این دو حالت اتفاق بی‌افته، مثلا اسکریپت‌های مدیریت مارکتینگ یا ابزارهایی مثل چت آنلاین دلیلی نداره توی محیط develop فعال باشن و مزاحمت ایجاد کنن و یا توی محیط Production دلیلی نداره بعضی لاگر‌ها فعال باشن. برای مدیریت این کار از متغییر‌های محیطی یا همون environment variable استفاده میشه. اگر از CRA استفاده می‌کنید این قابلیت در اون وجود داره و می‌تونید ایــنجا در موردش اطلاعات بیشتری کسب کنید.به عنوان مثال در حالت توسعه یک سرویس‌دهنده لوکال داریم که با آدرس مثلا http://localhost:9090 میشه با API اون ارتباط برقرار کرد ولی در حالت تولید درخواست‌ها باید به سرویس دهنده اصلی بخوره مثلا https://api.site.com. این دست مقادیر متغییر نسبت به محیط رو میشه به کمک متغییرهای محیطی به برنامه پاس داد.چالش Router و خطای 404یکی دیگه از چالش‌هایی که در حالت Production رخ میده درست کار نکردن router هست که به خاطر SPA بودن ساختار رخ میده. اگر به عنوان مثال شما نسخه Prodcution یک برنامه CRA رو روی یک هاست معمولی قرار داده باشید و از ساختاری مسیریابی SPA ای مانند React-Router استفاده کرده باشید، صفحه اصلی سایت به درستی نمایش داده میشه. با کلیک روی یک لینک مثلا www.site.com/about-us صفحه درباره ما به درستی نمایش داده میشه ولی وقتی صفحه‌ رو بارگذاری مجدد کنید به خطای سرور 404 می‌خورید.دلیل این اتفاقا این هست که وب سرور به صورت پیش فرض عنوان بعد از هر اسلش (/) رو نام یک دایرکتوری فرض میکنه در حالی که در برنامه شما این عبارت صرفا یک ادرس شبیه سازی شده هست برای اجرا فلان کامپوننت و اصلا دایرکتوری‌ای با عنوان about-us در ساختار شما وجود نداره. برای حل این مشکل باید به وب سرور دستور بدیم که اگر فایلی با آدرس ارسالی پیدا شد رو برگردون و اگر هم پیدا نشد درخواست رو به فایل index.html ارسال کنه. با ارسال درخواست‌ها به اون react-router فعال و کامپوننت‌ مورد نظر رندر میشه.البته این کار وظیفه DevOps هست و ربطی به توسعه دهنده front-end نداره ولی بهتره بدونید. نحوه انجام این کار بستگی به مدل پروژتون که SSR هست یا CSR ،هاست هست یا سرر مجازی ،وب سرورتون چی هست (nginx، apache و ...) هست بستگی داره.به عنوان مثال در یک هاست معمولی که وب سرور آپاچی داره میشه با تعریف فایل .htaccess اون به شکل زیر این مشکل رو رفع کرد:&lt;ifModule mod_rewrite.c&gt;
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule (.*) index.html [QA,L]
&lt;/ifModule&gt;چالش‌های هنگام buildموکول کردن تست و بررسی نسخه تولید به زمان تولید برای اکثر توسعه‌دهنده‌ها دردسر‌هایی رو ایجاد کرده و بهتره قبل از این که زیر فورس شدید قرار بگیرید و زندگی به کامتون تلخ بشه قبلش این کار رو بکنید.ساختاری که در محیط توسعه برای bundle و optimize کردن کد‌ها استفاده میشه واضح هست که با محیط تولید متفاوت هست. مثلا در محیط توسعه کدها روی رم Bundle و در واقع به صورت یک فایل مجازی ساخته میشن در حالی که در حالت تولید فایل‌های واقعی هستن. همچنین در محیط توسعه کدها minify نمیشن و عملیات‌های optimization روی اونها اعمال نمیشه چون هم این کار زمان بر هست و هم برای دیباگ لازم هست کد‌ها به همان صورتی که هستند باشند در حالی که در نسخه تولید عملیات‌های مختلفی برای کم‌حجم کردن و افزایش کارایی کدها انجام میشه.همین موضوع باعث ایجاد برخی خطاها هنگام build میشه. برای این که خطاهای مختلف روی هم انباشته نشه و روز تولید شما رو نامید نکنه بهتره هر چند وقت پروژه رو build کنید.گاهی هم شده که تفاوت سیستم‌عامل توسعه‌دهنده و سیستم عامل سرور مشکل آفرین شده. وقتی توسعه دهنده در سیستم خودش build میگیره هیچ خطایی وجود نداره ولی وقتی در سرور این کار رو می‌کنه برخی خطاها رخ میده. پس بهتره هر چند وقت روی سروری که مشابه سرور نهایی هست هم پروژه تست بشه تا خطاهای متعدد روی هم انباشه نشه.</description>
                <category>محمد ابراهیمی اول</category>
                <author>محمد ابراهیمی اول</author>
                <pubDate>Thu, 16 May 2019 15:48:36 +0430</pubDate>
            </item>
                    <item>
                <title>با کی کار کنیم و با کی نه؟!</title>
                <link>https://virgool.io/@ebrahimiaval/%D8%A7%D8%B3%D8%AA%D8%A7%D8%B1%D8%AA%D8%A2%D9%BE-%DB%8C%D8%A7-%D9%82%D8%AA%D9%84%DA%AF%D8%A7%D9%87-%DA%A9%D8%A7%D8%B1%D9%85%D9%86%D8%AF%D8%A7%D9%86-whtphuslrdju</link>
                <description>عده‌ای سرمایه‌گذار، موسس و مدیر استارت‌آپ‌ و شرکت‌ هستند و عده‌ای هم در این استارت‌آپ‌ها و شرکت‌ها مشغول به کار. دو گروه که سطح دانش و تجربه متفاوتشون اونها رو متفاوت کرده. این اختلاف سطح‌ها باعث میشه افراد انتظارات و خواسته‌های متفاوتی داشته باشن. در ادامه میگم که ما باید با کی کار کنیم و با کی نه و با کی باید مشروط کار کنیم تا نه اعصابمون خورد بشه نه زندگی به کاممون تلخ.شروع استارت‌آپ‌هاداشتیم زندگی می‌کردیم تا این که فهمیدیم اسم کارهایی که می‌کنیم استارت‌آپ هست (حدودا سال ۹۰). اولش فقط یک اسم با کلاس بود و که می‌گفتیم تا بگیم مثلا خیلی خفنیم، ولی الان دنیای بی‌انتهایی شده که هر کس به اندازه تلاش، توانایی‌ و سابقه فعالیت‌‌هاش درکی ازش داره ولی همچنان یه چیز لوکسه که هر کی دوست داره بگه منم دارم!متاسفانه همین الان هم که با هم داریم حرف میزنیم قواعدش به تکامل بالایی نرسیده و هنوز هم افراد در حال آزمون و خطا و کسب تجربه هستن و کلی موضوع مبهم وجود داره. امروز یک روش و رفتار باب میشه و بعد از مدتی کلا رد میشه و عده‌ای این وسط نقش موش آزمایشگاهی رو ایفا می‌کنن و به فنا میرن!اگر تعریف تکامل یافته و امروزی استارت‌آپ رو ملاک قرار بدیم عمر این موجود در ایران به ۱۰ سال نمی‌رسه و عمر خز شدنش هم به ۵ سال، پس انتظار تکامل و پیاداری داشتن شاید خیلی منطقی نباشه ولی خب دلیلم نمیشه دانش فرد در حد همون ۱۰ سال پیش باشه و یا فکر کنه علامه هست و حرکت‌های من درآوردی بزن اونم فقط با این توجیح که یه بار خر شانسی آورده و حرکت من درآوردی قبلیش درست در آمده و یا چون ساندویچ فروش خوبی بوده می‌تونه الانم مدیر و موسس خوبی در یک استارت‌آپ باشه.درد بی‌فکری جامعهبیاین صادق باشیم! متاسفانه در ایران سطح فرهنگ بسیار پایین هست و روز به روز هم بدتر میشه. بنزین گرون میشه به جای اعتراض کردن آرام و ساکت ساعت‌ها در صف می‌ایستیم و فقط وقتی اعتراض می‌کنیم که یکی بخواد تو صف بیاد جلوی ما! عین طبل تو خالی, حجیم ولی تهی. کوروش و فردوسی و ابوعلی سینا و ... افتخار ماست ولی تنها بخش بسیار کوچکی از ما مسیر، روش و عملکردمون با اونا یکی هست و عمده ملت هیچ وقت در طول زندگی حتی زحمت فکر کردن به خودشون نمیدن.فکر کردن یعنی عمیق شدن در اتفاقات و کشف حقیقت ،یعنی هر کی هر چی گفت، چون خیلی خفن، معروف و یا والا مقامه قبول نکنیم، بشینیم فکر کنیم روش. فکر کردن یعنی به ظاهر حرف‌ها و رفتار‌ها توجه نکردن و کشف باطن و دلیل‌ها به کمک عقل و کشف حقیقتی که واقعا بده نه آنچه شخصی یا گروهی برای ما نقل کردن.استارت‌آپ خیلی خز شده، شما تو خیابون به یکی بگی استارت‌آپ یعنی چی حداقل تعریفی ساده ای رو میگه و قطعا نمیگه اصلا نمیدونم چیه! این خوبه ولی بخاطر این فرهنگ بی فکری‌ای که داریم آدم پدرسوخته نابلد هم در حوزه استارت‌آپ زیاد داریم و بهتره نگیم استارت‌آپ بگیم قلتگاه!وسوسه میلیاردیدست به دست شدن اخبار موفقیت‌ استارت‌آپ‌ها و کسب ثروت‌های میلیاردی با دست خالی خیلی‌ها رو وسوسه کرده و طرفی که نهایت درک و دانشش این هست که پول میدم چند نفر میان یه وب سایت یا اپ موبایل رو میسازن و یکم تبلیغاتیم می‌کنیم و بعد همینجور پوله که میاد رو پول، میشه موسس و سریع بالای پیجش میزنه Co-founder (عمو جون حالا واستا عرق فشار سنگین تفکرت خشک بشه بعد بنویس).حالا بعضیا که پول دارن باز خوبه، درد بی درمون اونیه که بش گفتن پول ملاک عمل نیست و فلانی با دو میلیون استارت زده و الان دویست میلیاردی شده.حالا اینم پا میشه با مغز تهی از دانش می‌خواد با بیست سی میلیون استارت آپ بزنه! بدون این که اصلا بدونه اصلا استارت آپ دقیقا یعنی چی!تجربه‌ای که شخصی سازی نشدهمزخرف‌ترین اتفاق استارت‌آپ‌ها اجرا کردن بدون تفکر و شخصی سازی تجربه‌ی دیگران برای خودشون هست! یعنی طرف بدون این که ببینه اونی که مثلا امده میگه فلان کارو کردم فلان شد کی هست ویژگی‌های شخصیتی، رفتاری و اخلاقیش چیه، چه سابقه کاری و شخصی‌ای داره، چه دانشی داره، اصلا در چه سالی و در چه شراطی این کار رو کرده که این نتیجه رو داده، همون کار رو می‌خواد انجام بده و انتظار داره همون نتیجه رو هم بگیره!مثلا یک فروشگاه اینترنتی در اون سر دنیا در یک کشوری که همه چی رو حساب کتابه آمدن سیستم market place رو راه اندازی کرده بعد یکی تو ایران دید چقدر خوب پول در میاره بدون این که تحقیق جامع و کاملی بکنه و شرایط بازار ، تفاوت تعهد فروشنده آمریکایی و ایرانی، سیستم قضایی ایران و آمریکا و ... رو در نظر بگیره آمده تو ایران اینو اجرایی کرده و بعد از صرف چند میلیارد تبلیغات و هیاهو در انتها به دلیل نارضایی مشتری بخاطر عدم تحویل کالای اصل، تاخیر بسیار زیاد در تحویل و ... شکست خورده  و جمع کرده!الزاما همه این کپی کردن تجربه‌ها بین کشوری نیست و گاهی بین شرکت‌های ایرانی رخ میده. مثلا یک استارت‌آپ وقتی غول شد و خفن‌ترین نیرو‌های متخصص که مسئولیت پذیر هستن رو با حقوق خوب جذب کرد یک اتاق بازی PS4 ایجاد کرد تا بچه‌ها برای ریکاوری بازی کنن.برای کسایی که ولشون کنی پای کار شهید میشن! بعد استارت‌آپای دیگه که حتی عمرشون به ۶ ماه نمیرسید و هنوز جز خودشون کسی نمی‌شاختشون هم رفتن یه PS4 خریدن و از بازی بچه‌ها عکس و فیلم گرفتن که مثلا در مسیر رشد باشن و همون راه خفنا رو برن(سندرم پلی استیشن). حالا نه تخصص نیروهاشون یکی هست نه حقوق کارمنداشون نه اسکیلشون به هم می‌خوره! خب این کار واسه نیروی متعهد با حقوق خوب اثر بخشه نه تیمی که گشتی هر کی ارزون‌تر قیمت داده جمع کردی و همش دنبال زیر کار در رفتن هستن!خودتان را دست کم نگیریدواقعا خودتون رو دست کم نگیرید و هر چقدر هم که مبتدی باشید بالاخره انسان هستید، اعصاب دارید و عمری محدود و این حق شماست که در آرامش کار کنید و با شرایط خوب. به جرات میگم بیکار بودن بهتر از کار کردن زیر دست کافرمایی است که دانش نداره و فقط براش پول رو پول گذاشتن مهم هست و تفکرش اینه امروز استارت آپ مد شده استارت‌آپ بزنیم فردا هم که دلالی حواله خودرو مد بشه، دلالی اون و در ذهنش این جا افتاده که هر هزار تومن که بپیچونی بیشتر سود کردی! اگر کار خوب پیدا نمی‌کند خودتون رو ارتقا بدیداگر با دانش و تجربه فعلیتون کار خوب پیدا نمی‌کنید باید خودتون رو ارتقا بدید نه این که به جایی که هستید راضی بشید. از خودتون بپرسید آیا در این کشور کسی در شاخه تخصصی من هست که شرایط کار خوب داشته باشه با حقوق خوب و اگر جواب بله بود پس تو حق نداری نا‌امید بشی چون تو هم می‌تونی روزی با تلاش به اونجا برسی. بله اگر ابیاری گیاهان دریایی خوندی و هیچ کس در کشور اینو نمی‌خواد و دوزارم بالاش پول نمید بهتره بذاری برای تایم آزادت دنبالش کنی و وارد یک شاخه تخصصی دیگه بشی. البته منظور من برخی تخصص‌ها اگر شخص زمان بذار و تلاش کنه و فرصت رشدش رو فراهم رشد خواهد کرد نیست بلکه اونی  هست که جز خودش و داییش کسی بش هیچ وقت نیاز نداره و یا حاضر نیست پول درشتی براش خرج کنه.عمیق بشید در حوزه کاری خودم طرف می‌خواد برنامه نویسی یاد بگیره، راه اصولیش رو نمیره و مستند جامع و کاملش رو نمی‌خونه. فقط دنبال این هست که کسی خیلی ساده‌تر و سریع‌تر بش یاد بده تا بتونه سریع دست به کد بشه. وقتی کمی گپ و گفت باش بکنی به این نتیجه میرسی که طرف در ذهنش سطح خودش و جامعه رو در سطح بسیار پایینی تصور کرده و به نظرش حرفه‌ای شدن در این جامعه بی‌معنی هست.مثال این اتفاق رو در کامنت‌های مطلب (استخدام توسعه دهنده Front-End یا چی؟) می‌تونید بخونید. من می‌گم باید متخصص و روی یک فیلد کاری تمرکز کنید تا بتونید در فیلد کاری خودتون عمیق بشید تا در نهایت بتونید کارهای خفن بکنید. دوستی آمده میگه 90٪ شرکت‌ها چند فیلدی می‌خوان و غیر حرفه‌ای هستن! سوال من اینه خب خودتم داری میگی که 10٪ هستن که تک فیلدی بخوان و تو دلیل بیار چرا نباید جز اون 10٪ باشی که حقوق و شرایط کاریش چند برابر بهتر از اون چند فیلدی غیر متخصص در اون شرکت‌‌های 90٪ی هست! تصور اشتباه درباره مهارت، حقوق، شرایط کاری و ..محدودیتی که قرار داد NDA میاره باعث شده افراد در شرکت‌ها و فیلد‌های کاری خاص خیلی از حقوق و جزئیات پرداختی خودشون حرفی نزنن و این باعث شده هر کس در حد اطالاعاتی که داره تصور کنه. مثلا فردی که تازه توسعه JS رو در شهرستان شروع کرده از یکی از توسعه دهنده‌های با سابقه JS شهرشون می‌پرسه چقدر حقوق میگیری و اون میگه 2 تومن! بعد میگه‌ نیازه ES6 یاد بگیرم طرف میگه نه نمی‌خواد اون واسه پروژ‌های حرفه‌ای هست، اکثر پروژه‌‌ها تو کشور معمولی هست نیاز نیست یاد بگیری!-بعد این موقع مطالعه در حد همین حقوق 2-3 یاد میگیره و در حد همون سطحی که فرض میکنه تو کشور حاکم هست و وقتی کمی کار سخت مشه میگه حالا مگر چقدر میخوان بدن مگه و بعد بیخیال میشه! حتی یک لحظه به این فکر نمی‌کنه که خب باشه اکثریت اینجوری‌ هستن اولا از کجا معلوم که ایطور باشه چون حرف یک نفر هست و تحقیق نکردم و به فرضم که باشه، خب چرا من جز اون حرفه‌ای‌ها نباشم.توسعه‌دهنده‌هااگر نگاهی به آمار‌های استارت‌آپی کنیم متوجه می‌شویم که عمده این استارت‌آپ‌ها بر پایه پلتفرم‌های وب و موبایل هستند. این یعنی همیشه پای حداقل یک  توسعه دهنده در میان است! چون هم استارت‌آپ‌ها نوپا هستن و هم فیلد کاری توسعه‌دهنده میکسشون پر از چالش‌ هست و جالب این که عموما ناراضی هستن، هم موسس‌ها از توسعه‌دهنده‌ها و هم توسعه‌دهنده‌ها از موسس‌ها. دلیلش رو هم نوپایی میشه گفت و هم مواردی که در زیر توضیح دادم.متخصص با تیم مبتدی نباید کار کنهاگر شما در سطح بالایی از تخصص هستید نباید وارد استارت‌آپ‌هایی بشید که موسس اون تجربه‌ی جدی‌ای در زمینه راه‌اندازی استارت‌آپ نداره(همون شرکت‌های 90٪ی).با کسی کار کنید که به اسکیل و اندازه خودتون بخوره، اگر ازت سابقه ۴ سال کار و سطح حرفه‌ای میخواد تو هم باید ازش انتظار سابقه راه اندازی حداقل یک استارت آپ موفق ، شرایط پرداختی خوب و مزایای کاری خوب رو داشته باشی. از طرفی حتی اگر فرد متخصص راضی شد که در تیم شما فعالیت کنه شما اگر توانایی این رو ندارید که در آینده یک متخصص رو با شرایط نرمال جذب کنید (حقوق و ...) نباید با اون فرد کار کنید. چون تا مادامی که اون باش همه چی خوبه ولی با رفتنش کار شما دشوار میشه چون افراد مبتدی توانایی درک و تغییر ساختار‌های حرفه‌ای اون فرد متخصص رو ندارن و مشکلاتی پیش خواهد آمد که در حوصله این مطلب نیست.تیم مبتدی‌ای که نیازش به متخصص  الزامیستاگر موسس بی‌تجربه‌ای هستید و به خاطر سطح تخصصی پروژه به توسعه‌ حرفه‌ای نیاز دارید باید حداقل یک متخصص مرتبط رو به عنوان مشاور انتخاب کنید و به حرف‌هاش گوش کنید و سعی هم نکنید به زور فشار نظرش رو تغییر بدید و بهتر هست اون مشاوره خود فرد توسعه دهنده نباشه یه جورایی ناظر بر رفتار متخصص و همکاری مشاوره‌ای داشته باشه. سطح مشاور باید بیشتر یا حداقل مساوی توسعه‌دهنده باشه. در ضمن باید مراقب بود که شخص مشاوره نگاه تحمیلی و بالا به پایین به توسعه دهنده نداشته باشه و صرفا نقش یک دوست که مشورت‌هایی رو میده داشته باشه.موسس‌های کم‌ تجربه باید با کم‌تجربه‌ها کار کنن این یعنی هر دو با این همکاری تجربه کسب می‌کنن و هر پیشامد بدی هم بخاطر بی‌تجربگی طرفین میتونه درسی برای طرفین باشه. منظور من این نیست که هر کی جو گیر شده و استارت‌آپ زده شما که مبتدی هستی باید بری پیشش کار کنی، نه! بلکه در تیم افراد اینجوری اصلا نباید وارد شد و قتلگاهی که می‌گیم دقیقا همینجاست. منظور من این هست طرف قبلا دانش اکادمیک راه‌اندازی و مدیریت استارت‌آپ رو کسب کرده و یا در کنار یک فرد با تجربه بوده و تجربه کسب کرده ولی تا به حال یک استارت‌آپ مستقل رو خلق نکرده. شرط لازم همکاری با این فرد هم داشتن مشاور‌های با‌تجربه هست. از وجود چنین افراد و شرایطی به کمک پرس و جو با افراد حاظر در شرکت و یا کارمندان سابق می‌تونید مطمئن بشید. یکی از محل‌های انجام این اتفاق دروه‌ه تست هست که قبل استخدام رسمی شرکت‌ها برای افراد جدید میذارن.گول رقم‌های بالای برخی تیم‌های مبتدی‌ رو نخوریدموسس چون کار بلد نیست، در محاسبه زمان و جزئیات پروژه اشتباه میکنه و این اشتباه برای توسعه‌دهنده‌ها خیلی گرون تموم میشه! پروژه اگر دقیق تحلیل و prototype بشه تایم ۱۰ ماه رو نشون میده ولی موسس بخاطر عدم توانایی در کنترل هیجان، عجول بودن تایم ۲  با منت ۳ ماه رو مطرح می‌کنه. کمالگرایی، بی‌جهت اسکیل پروژه رو زیاد کردن و چون اگر ۱۰ ماه رو بپذیره نه می‌تونه پول دولوپر رو بده و نه دیگه تا اون موقع تضمینی هست که این استارت اپ جواب بده نمی‌خواد واقعیت رو بپذیره. بعد ۳ ماه فورس شدن‌ها شروع میشه و اونی که اتفاق می‌افته در آخر ۸ ماه هست. تمام میشه اما چه تمام شدنی! تمام شدنی که همه چی در هم هست و باید دوباره بخش‌های اصلی رو نوشت چون قابل توسعه نیستن. طرف فقط زده که تمام بشه! راه درست این بود که پروژه با سطح MVP (یعنی ساختار‌های الزامی نه صرفا کیفیتی) طراحی و دولوپ بشه. در این حالت تایم ممکن بود عدد 4 رو نشون بده و اینجور هم به توسعه دهنده فشار نمی‌امد و هم سریع تر پروژه ریلیز و آماده لانچ و تست بازار می‌شد.و در انتها...خلاصه این که از ایران در اون حدی که در ذهن دارید نا‌امید نباشید،درسته عقب‌تر هستیم ولی بعضی دوستان عقب‌تر از عقب هستن و آنچه در ایران هم رخ مید‌ه رو چون نمی‌دونن فکر می‌کنن نیست. من خودم بارها ضایع شدم و فکر می‌کردم اصلا تو ایران فلان تیم و فلان مدل رفتاری و حقوقی رو نداریم بعدا خودم یا دوستانم که تجربه کردن فهمیدم نه اینطور نیست. متاسفانه اکثر افراد حرفه‌ای خیلی آروم هستن و مخفی کار می‌کنن و عده‌ی کمی دنبال تبادل تجربه و ارتباط با دیگران هستن. سعی کنید اونها رو شناسایی کنید و باشون صحبت و مشورت کنید تا از آنچه واقعا وجود داره با خبر باشید. این مطالب هم می‌تونه واست سودمند باشه:  https://virgool.io/JavaScript8/%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D8%AA%D9%88%D8%B3%D8%B9%D9%87-%D8%AF%D9%87%D9%86%D8%AF%D9%87-front-end-%DB%8C%D8%A7-%DA%86%DB%8C-euhuy45ijfdf  https://virgool.io/JavaScript8/%DA%86%D8%B1%D8%A7-%D8%AC%D8%A7%D9%88%D8%A7-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-%D8%AE%D9%86%DA%AF-%D8%A8%D9%87-%D9%86%D8%B8%D8%B1-%D9%85%DB%8C%D8%B1%D8%B3%D8%AF-mtc1utxmhatb </description>
                <category>محمد ابراهیمی اول</category>
                <author>محمد ابراهیمی اول</author>
                <pubDate>Sun, 05 May 2019 13:48:44 +0430</pubDate>
            </item>
                    <item>
                <title>استخدام توسعه دهنده Front-End یا چی؟</title>
                <link>https://virgool.io/JavaScript8/%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D8%AA%D9%88%D8%B3%D8%B9%D9%87-%D8%AF%D9%87%D9%86%D8%AF%D9%87-front-end-%DB%8C%D8%A7-%DA%86%DB%8C-euhuy45ijfdf</link>
                <description>خب می دونیم که دیگه مثل گذشته نیست که یک نفر باشه که هم Back-End رو توسعه بده و هم Front-End رو، در واقع بهتره بگم مثل گذشته نیست که تعداد Full-stackها بیشتر از تک فیلدی‌ها باشه و کاملا برعکس شده؛ دلیلشم واضح‌ هست، افزایش تعداد زبان‌ها، تکنولوژی‌ها، ساختارها و روش‌های توسعه یا در یک کلام علم!یادمه سال 91 بود که با فیلدی با عنوان توسعه دهنده رابط کاربری یا همون UI Developer آشنا شدم و حس کردم این همون چیزی هست که من می‌تونم باشم؛ ولی یک مشکل وجود داشت، تقریبا تو ایران هیچ شرکتی هنوز اون رو به عنوان یک فیلد مستقل به رسمیت نمی‌شناخت. توی فیس بوک در موردش مطلب می‌نوشتم، به دوستان و هم تیمی‌ها توضیح می‌دادم، کار سختی بود. مدتی بعد عنوان دقیق‌تر Front-End استفاده می‌شد ولی هنوز هم کسی رای راضی به استقلالش نمی‌داد. در آخر به این نتیجه رسیدم که باید گفت ولی نباید منتظر تغییر در لحظه بود چون تغییر با گذشت زمان اتفاق می‌افته تا جایی که امروز نه تنها فیلد تخصصی Front-End شکل گرفته بلکه زیر شاخه‌های تخصصی خودش رو هم داره و الان دیگه لازم نیست به هر کس رسیدی توضیح بدی که چکارِ هستی! Front-End Branches۳ شاخه اصلی Front-Endدنیای Front-Endی که روزی دنبال آشنا کردنش بودیم این روزها معروف و گسترده شده و این بار مشکل ناشناخته بودن برای زیر شاخه‌های اون رخ داده؛ با یک گشت در نت می‌بینیم که خیلی‌ها دارن اشتباه میزنن!1) شاخه گرافیکی‌توضیح: توسعه دهنده رابط کاربری یا همون UI Developer که گاهی  GUI Developer هم گفته شده. افراد فعال در این شاخه‌ علاقه زیادی به رنگ و لعاب و ساختار‌های پیکسلی دارن یه جورایی هنرمند هستن و اگر ترشی نخورن یک گرافیست خوب هم می‌تونن بشن، هر از چند گاهی هم دست به طراحی‌های گرافیکی میزنند. توسعه انیمیشن‌ها و ساختار‌های خوشگل و شیک رو دوست دارن و خیلی از اسکریپت نویسی، الگوریتم و ریاضیات خوششون نمیاد و بیشتر علاقه دارن از قطعات کد آماده شده استفاده کنن تا این که دست به اسکریپت بشن.این شاخه ،سطح‌های مبتدی تا تخصصی خودش رو داره که مقدماتیش رو تقریبا هر کسی وارد دنیای وب میشه پاس میکنه. متاسفانه عده زیادی از توسعه دهنده‌های Back-End چون بعد از پاس سطح مقدماتی این شاخه به Back-End کوچ کردن خیال می‌کنن کلا Front-End یعنی همین رفتن به خودشون برچسب Full-Stack زدن! (نچایی داداش)محل کار: بهترین گزینه برای دیجیتال مارکتینگ! چون توانایی خلق اثر‌های جذاب رو دارن بهترین گزینه‌ برای توسعه Landing pageهای کمپین‌های تبلیغاتی هستن.اگر در تیم‌های موفق دیجیتال مارکتینگ کند و کاو کنید حتما یکی از این آدمای دوست‌داشتنی رو اونجا می‌بینید.از طرفی این افراد چون خیلی دست به الگوریتم نیستن وابسته به Back-End هستن و مستقل کردن Front-End اصلا پیشنهاد نمیشه! برای پروژه‌هایی که ساختار Post-Back دارند و Front-End در دل کد‌های Back-End قرار می‌گیره استخدام این سبک افراد پیشنهاد میشه.2) شاخه گرافیکی مهندسیتوضیح: توسعه دهنده Front-End یا همون Front-End Developer که همه جا دیده میشه که به اشتباه افراد عنوان این شاخه‌ رو برای دو شاخه دیگه استفاده می‌کنند. اینجا یک اشتباه رخ داده و قیمه‌ها ریخته تو ماستا و نمیشه سرزنشی هم کرد!به لایه کاربر و  کل آنچه در آن لایه ‌می‌تواند وجود داشته باشد و جزئی از آن باشد میگن Front-End. ببینید مثلا اشکال هنری و انیمیشن جزئی از Front-End هست ولی در Back-End چنین چیزای معنی نداره! از طرفی الگوریتم مثلا تابع تبدیل عدد به رشته هم می‌تونه جزئی از Front-End  باشه هم جزئی از Back-End، یعنی اون عملیات رو هم Back-End میتونه انجام بده و به Front-End بده و هم میتونه اماده نکنه و خام بده به Front-End تا اونجا این کار انجام بشه. پس وقتی می‌گیم توسعه دهنده Front-End داریم در مورد یک دامنه وسیع حرف میزنیم ، داریم میگیم همه آنچه در این لایه می‌تواند باشد رو باید تو بتونی توسعه بدی! حرف غلطی هم نیست ولی وقتی ما به بخش الگوریتمی این لایه کاری نداشته باشیم مثلا فقط یک لندینگ پیچ هست دیگه نباید بنویسی استخدام توسعه دهنده Front-End  باید بخش الگوریتمی رو جدا کنی و بنویسی توسعه دهنده رابط کاربری میخوام.این شاخه بین شاخه اول و سوم هست، بین گرافیک  و الگوریتم. البته عموما این تناسب در نقطه وسط نیست و UI بیشتر وقت رو میگیره و الگوریتم‌ها نقش کم‌رنگ‌تری دارن.البته افراد بسته به شخصیتشون به یکی از سمت‌ها غش می‌کنن و تخصص بیشتری در اون پیدا می کنن اما تعداد کسانی که به گرافیک علاقمندهستند بیشتره تا الگوریتم و ساختار.محل کار: اگر شما فردی بخواین که Front-End پروژه رو توسعه بده و دانش متوسطی در همه زمینه‌ها داشته باشه افراد این شاخه گزینه خوبی هستن، البته فراموش نکنید که به دلیل وسعت دامنه هنر تا ریاضی این بخش افراد در اکثر امور در سطح متوسط هستن و نباید توقع داشت که در حد و کیفیت متخصص‌های سایر شاخه‌ها خروجی تولید کنه.البته همون طور که گفتم افراد این شاخه به یکی از سمت‌ها بیشتر تمایل نشون و تخصص بیشتری دارن پس اگر نخواین که در همه چیز متوسط باشه این امکان وجود داره که در مصاحبه فردی که به سمت تخصص مورد نظر شما بیشتر علاقه داره رو کشف و استخدام کنید.3) شاخه مهندسیتوضیح: مهندسی Front-End یا همون Front-End Engineering که شخص متخصص خودش رو Front-End Engineer معرفی می‌کنه. احتمالا به چشمتون نخورده چون بسیار جدید هست و در دنیا هم داره تازه جای خودش رو باز می‌کنه و احتمالا چند سال دیگه برای توسعه ابزارهای پیشرفته که بشون نیاز معروف بشن. بهترین گزینه برای دانشجو‌ها چون تا خودشون رو آماده کنن بازارکارش هم اوکی شده. این شاخه شاید HTML,CSS بخش بسیار جزئی اون باشه و اصلا به چشم نیاد و الگوریتم‌ها و ساختار‌هاست که بیشتر وقت توسعه دهنده رو میگیره. در واقع چیزی شبیه به Back-End که در Front-End اتفاق می‌افته. سمت سرور یک سرویس‌دهنده داده‌های خام هست که فقط کارش ذخیره و ارسال داده‌های خام همراه با اعتبار سنجی‌هاست. مزیت این کار این هست که به جای این که پردازش‌ها در سرور اتفاق بی‌افته و نیاز به سروری قوی برای این کار باشه پردازش‌ها روی سیستم کاربرها اتفاق می‌افته و سرور نفسی راحت می‌کشه. بخشی از افرادی که پتانسیل توسعه دهنده ‌Back-End رو دارن سر از این فیلد در Front-End در خواهند آورد. البته نا گفته نماد که هنوز هم پای HTML,CSS و گرافیک و هنر در میان هست ولی سنگینی حجم کار بیشتر به سمت ساختار‌ و الگوریتم‌ها است. از طرفی یک مهندس Front-End باید توانایی خلق ساختارهای کاستوم رو داشته باشه در حالی که از توسعه دهنده Front-End بیشتر انتظار میره از ساختار‌های اماده استفاده کنه و نهایتا توانایی تغییرشون رو داشته باشه.من احتمال میدم با باب شدن این شاخه افراد آن با افراد شاخه گرافیکی تیم شوند و اتفاقی که در گذشته بین Back-End و Front-End می‌افتاد در اینجا تکرار شود ولی این بار با رنگ و بوی یک محیط و زبان مشترک و این ممکن‌ می‌تونه تهدیدی برای بازار کار توسعه دهنده‌های Front-End به حساب بیاد.عنوان‌های آگهی استخدام Front-Endپس بخوایم از ریشه یک تقسیم داشته باشیم و بین دامنه گرافیک تا الگوریتم یا بهتر بگیم هنر تا مهندسی اول باید ببینم در کدوم شاخه نیرو میخوایم. اگر شاخه اول بود که ساده هست بزنید UI developer یا همون توسعه دهنده رابط کاربری و تمام، البته ذکر سبک طراحی‌ مهم خواهد بود کمی هنری میش داستان چون این دسته هنرمند هستن و روحیشون حساسه شاید اصلا اعتقادی به فلان سبک نداشته باشن و نتون خروجی خوبی تحویل بدن پس بهتره توضیح بدید.در مورد شاخه دوم یک ریز کاری وجود دارد اونم تکنولوژي توسعه هست. اگر توسعه دهنده Front-End شاخه فوق تخصصی‌ای نداشته باشه یعنی با JS خام و jQuery کد بزنه و قرار هم باشه این فرد در درون کدهای Back-End کد بزنه همون Front-End Developer یا توسعه دهنده Front-End رو بنویسید درست هست. اما اگر تکنولوژی تخصصی‌ای رو مد نظر دارید باید نام اون تکنولوژی رو در عنوان بنویسید مثلا &quot;استخدام توسعه دهنده React JS&quot;  چون افراد متخصص در یکی از این تکنولوژی‌ها عموما نه علاقه‌ای به دیگر تکنولوژی‌ها دارند نه تخصص‌کافی رو چون شاید پایه این تکنولوژی‌ها یکسان باشه ولی معماری و ساختار این کتابخانه و فریم ورک‌ها با هم متفاوت هست.در مورد شاخه سوم هم مشابه شاخه دوم هست وقتی یک توسعه دهنده JS خام می‌خواید و پروژه کاستوم هست باید بنویسید Front-End Engineer و اگر تکنولوژي خاصی مد نظر هست باید نامش رو عنوان بیارید و در متن نوشته بشه استخدام Front-End Engineer تا با شاخه دوم اشتباه نشه. این مطالب هم می‌تونه واست سودمند باشه:  https://virgool.io/JavaScript8/%DA%86%D8%B1%D8%A7-%D8%AC%D8%A7%D9%88%D8%A7-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-%D8%AE%D9%86%DA%AF-%D8%A8%D9%87-%D9%86%D8%B8%D8%B1-%D9%85%DB%8C%D8%B1%D8%B3%D8%AF-mtc1utxmhatb </description>
                <category>محمد ابراهیمی اول</category>
                <author>محمد ابراهیمی اول</author>
                <pubDate>Sun, 07 Apr 2019 08:54:39 +0430</pubDate>
            </item>
                    <item>
                <title>نحوه SSH Git clone در Git Hub</title>
                <link>https://virgool.io/@ebrahimiaval/%D9%86%D8%AD%D9%88%D9%87-ssh-git-clone-%D8%AF%D8%B1-git-hub-gyamliv8gzyz</link>
                <description>می‌دونید  که دو روش SSH و HTTPS  برای Clone کرد  repositoryهای Git وجود داره. همون طور که برای اهالی ویندوز HTTPS خوش‌آیندتر هست لینوکسی‌ها SSH پسند هستن. البته جفتشون در هر دو محیط ممکن‌ هستن ولی خب! قشنگی SSH برای اهالی کامند لاین و سرور لینوکس هست که به جای این که هر بار کاربر نام کاربری و رمز عبورش رو بزنه یک رمز که طی ساخت SSH تعیین کرده رو میزنه  برای پول و پوش و .... .برای SSH clone شما نیاز به یک SSH-Key دارید که در زیر نحوه ساختن رو گفتیم. بعد از ساخت باید این کلید رو در سایت GitHub یا هر سرویس دهنده‌ دیگری که استفاده می‌کنید درج کنید بعد هم درخواست Clone رو می‌زنید و تمام!ساخت SSH-Key با ssh-keygen1- محیط command line یا همون ترمینال یا bash رو اجرا کنید.2- دستور زیر را اجرا کنید و قبلش لازمه به جای exp@exp.com ایمیل حساب کاربری Git Hubتون رو وارد کنید.ssh-keygen -t rsa -b 4096 -C &quot;exp@exp.com&quot;3- بعد از اجرا مقدار زیر رو خواهید دید که خط اول برای اطلاع رسانی هست و میگه قرار هست یک RSA Key رو بسازه و خط بعد هم مسیر ایجاد فایل رو میپرسه که بهتره Enter رو بزنید و همون مسیر پیش فرضش انتخاب بشه. فقط یادتون باشه ادرسش کجاست!Generating public/private rsa key pair.
Enter a file in which to save the key (/root/.ssh/id_rsa):[Press enter]4- حالا یک رمز عبور ازتون می‌‌خواد که وقتی بخواهید Clone بگیرید باید اون رو بزنید.Enter passphrase (empty for no passphrase): [Type a passphrase]5- رمز عبور رو دوباره تایپ کنید و Enter بزنید.Enter same passphrase again: [Type passphrase again]6- خب SSH-Key در مسیر انتخاب شده در مرحله 3 ساخته شده. حالا باید اون فایل رو باز کنید و در Git Hubتون وارد کنید. cat ~/.ssh/id_rsa.pubدرج SSH-Key در GitHubبه  تنظیمات حساب کاربری گیت‌هابتون برید و از منو SSH and GPG keys  را انتخاب کنید. بر روی دکمه  New SSH key کلیک کنید. در فیلد Title عنوانی دلخواه وارد کنید و در فیلد Key محتویات فایل id_rsa.pub که در مرحله 6 کپی کردید را در اینجا درج کنید و بر روی دکمه  Add SSH key کلیک کنید.انجام SSH Git Cloneحالا برید و git clone کنید و وقتی پسورد خواست همون پسورد مرحله 4 رو بزنید و کلون انجام می‌شود و تمام.git clone git@github.com:username/repository.git</description>
                <category>محمد ابراهیمی اول</category>
                <author>محمد ابراهیمی اول</author>
                <pubDate>Fri, 08 Mar 2019 20:32:36 +0330</pubDate>
            </item>
                    <item>
                <title>دروغی به نام شباهت React و React Native</title>
                <link>https://virgool.io/avalamoozesh/%D8%AF%D8%B1%D9%88%D8%BA%DB%8C-%D8%A8%D9%87-%D9%86%D8%A7%D9%85-%D8%B4%D8%A8%D8%A7%D9%87%D8%AA-react-%D9%88-react-native-ecv0abjf8ftk</link>
                <description>احتمالا به شما هم وقتی که خواستین برید سراغ توسعه دهندگی React یا React Native این رو گفتن که اگر اینو یاد بگیری اونم می‌تونی بزنی و مرزهای جهان برات گشوده میشه و تبدیل می‌شی به یه آدم خفن که هم آپ موبایل میتونه بزنه و هم وب سایت!یکسان نبودن React و React Nativeاو یک مبتدیست!آواز دهل از دور خوش است و گویا دوستان توسعه‌دهنده بخاطر توسعه استارت آپ‌‌های میوه و سبزیجات به میدون میوه و تره‌بار رفت و آمدن داشتن و کمال هم نشین درشون اثر کرده و با نشون دادن میوه‌های درشت و خوشگل سر اصرار دارن بگن تا تهش همینجوره!اگر کسی چنین حرفی بتون زد شک نکنید یا کلا هیچ کدوم رو یاد نداره و احتمالا به مقاله یکی از دوستان میوه‌ فروش استناد میکنه و یا هم توسعه دهنده یکی از دو هست و در دیگری در حد Hello World تجربه داره.اصل نقد من به همکارهای توسعه دهنده‌ هست. برای این که توی‌ کل‌کل‌برتری تکنولوژی‌ها کم نیارن و اثبات کنن React خیلی خفن هست فقط بخشی از حقیقت رو می‌گن و تبدیلش میکنن به یک دروغ که باعث انحراف دیگران مخصوصا کارفرما‌ها میشه!حالا بیا و به کارفرماهایی که عمدتا برنامه نویس نیستن اثبات کن که این همه‌ی حقیقت نیست! نه دیگه، تو راست نمیگی چون ارشد Front-End فلان شرکت معروف گفته میشه! حالا میری ریز میشی تو کار اون شخص می‌بینی توسعه دهنده React Native هست و اوج تلاشش برای توسعه React یک سایت چند صفحه‌ای ساده بوده! نخسته دلاور! چرا React و React Native متفاوت هستندری اکت جی اس برای وب ساخته شده و اجزا داخلیش از جنس ساختار‌‌های صفحات وب هست در حالی که ری‌اکت نیتیو چون قرار هست یک برنامه موبایل تولید کنه و دیگه وب و مرورگری در کار نیست از بسیاری از اون قابلیت‌ها محروم شده و دست به شبیه سازی زده و از طرفی دیگه هم با کدهای نیتیو درگیر هست.بسیاری از پکیج‌ها فقط قابلیت استفاده در یکی از این دو رو دارن. همون طور که گفتم React native  از HTML برای رندر برنامه استفاده نمی‌کنه و شبیه سازی میکنه مثلا به جای تگ div شما می‌تونید از کامپوننت View استفاده کنید. پس اگر قطعه کد یا پکیجی رو که برای React و بهتر بگم وب آماده شده رو در ری‌اکت نیتیو import کنید به خطا می خورید.بدیهی هست که ری‌اکت نیتیو هر چقدر هم تلاش کنه تا ساختارهای وب رو شبیه سازی کنه‌ نمی‌تونه دقیقا مشابه به وب رفتار کنه، چرا که اگر دو پلتفرم یکسان بودن خب از یک ساختار هم استفاده می‌شد پس تفاوت‌های وجود داره. این تفاوت ها باعث تفاوت‌های حل نشدنی بخصوص در جزئیات شده. هر چند در کلیات مثلا نام المنت‌ها (div - View) تفاوت‌ها مشخص هست اما مشکل اصلی که باعث نوشتن این نقد هم شده جزئیاتی هست که خودشون رو در پروژه‌های متوسط و حرفه‌ای نشون میدن نه در hello world!مشکل فقط فنی نیست! از لحاظ روانشناسی سویچ به بین این دو محیط باعث کاهش تمرکز و ایجاد اضطراب در افراد میشه! تا دیروز داشتی می‌نوشی div و padding-left : 30px بعد میری اونجا می‌نویسی view و paddingLeft: 30 خب معلومه آب روغن قاطی میکنی و هر چند وقت صفحه خطا رو می‌بینی میگی وای یادم رفت px نذارم!تفاوت‌ها به همینجا ختم نمیشه، نحوه بلید ، اجرا و دیباگ، انیمیشن و حرکات، نویگیشن (Routing)‌، کدهای Native و ... هم باید به این لیست اضافه کرد. جمع بندیشباهت این دو مثل ماشین سواری و کامیون هست، جفتشون ۴ تا چرخ دارن، حرکت میکنن، شیشه جلو و برف پاک کن ،آینه بغل و خیلی چیزای شبیه به هم دارن ولی کاربردشون کاملا متفاوت هست. تعمیرکارهاشونم همین طور! شاید خیلی‌ها باشن که گواهی‌نامه هر دو رو داشته باشن و حتی در هر دو حرفه‌ای باشن، ولی سوال اینه آیا هم اینطور هستن؟ آیا برای همه ممکن هست و این اتفاق چقدر می‌تونه فراگیر باشه؟در واقع جلمه درست این هست: اگر شما React JS رو  یاد داشته باشید و روزی تصمیم بگیرید که به توسعه دهندگی برنامه موبایل تغییر شغل بدید،شما  نسبت به کسی که با ری‌اکت نیتیو آشنا نیست می تونید سریعتر به توانایی توسعه app موبایل دست پیدا کنید و یا به عبارتی دیگه، زمان یادگیری و توانایی توسعه برنامه موبایل برای شما با ری‌اکت نیتیو کمتر از نیتیو خواهد بود.خلاصه این که، این تصور که این دو کاملا شبیه به هم هستن، و به راحتی از روی پروژه وب سایت میتونی بری روی اپ و دوباره برگردی به وب‌سایت برای توسعه، بدون این که اذیت بشی و نیاز باشه چیز زیادی یاد بگیری اشتباه هست، تو فقط این پتانسیل رو داری که اگر روزی نیاز شد بتونی با سختی کمتری نسبت به ناآشناها به فیلد دیگه سویچ کنی.این مطالب هم می‌تونه واست سودمند باشه: https://virgool.io/iran-react-community/%D8%AE%D8%AF%D8%A7%D8%AD%D8%A7%D9%81%D8%B8-%D8%AF%D8%B4%D9%88%D8%A7%D8%B1%DB%8C%D9%87%D8%A7%DB%8C-redux-zypz5yuqq0t1  https://virgool.io/iran-react-community/%D8%B4%D9%86%D8%A7%D8%AE%D8%AA-%D9%85%D9%81%D8%A7%D9%87%DB%8C%D9%85-ssr-%D9%88-csr-%D8%AF%D8%B1-react-js-v2lsdju7aiuc </description>
                <category>محمد ابراهیمی اول</category>
                <author>محمد ابراهیمی اول</author>
                <pubDate>Sun, 17 Feb 2019 14:37:14 +0330</pubDate>
            </item>
            </channel>
</rss>