وقتی از مجید حرف می‌زنیم، از که حرف می‌زنیم؟

ساره موسوی

مجید چند ماهی می‌شود که به جمع ما پیوسته است و در طراحی UI و UX کمک‌مان می‌کند. راستش اوایل فکر می‌کردیم ماندگار نباشد و زود از پیش‌مان برود، اما به مرور زمان، بیشتر و بیشتر با هم اخت شدیم و حالا او یکی از بچه‌های دوست‌داشتنی تیم‌مان است. 

مجید ۳۲ ساله است و اهل  استان گلستان. او از ۳۰ سالگی به تهران آمد و زندگی‌ مستقلی را شروع کرد. بودن در طبیعت، حسابی آرامش می‌کند. از آن پسرهای فوتبالی فوتبالی است و باید حواس‌مان باشد که جلوی او از تیم آرسنال چیز بدی نگوییم. غیر از فوتبال، به بازی‌های ویدئویی هم خیلی علاقه دارد و یکی از آرزوهایش ساخت یک بازی واقعگرا با دنیایی عجیب و مرموز و اسرارآمیز است. اگر این بازی را بسازد که خودم طرفدار سرسختش می‌شوم! :)

از ویژگی‌های شخصی که بگذریم، خلاقیت مجید توی کار، همیشه ما را به ذوق می‌آورد. او روز به روز بیشتر خودش را به ما ثابت می‌کند و ما هم حسابی خوشحالیم از داشتن یک دوست و همکار نوآور و بااستعداد در کنارمان.

ما در استودیو گروسیان نیاز به یک هم‌تیمی جدید داریم

اگر طراح تجربه کاربری هستید، با ما تماس بگیرید

ساره موسوی

 

ما مدتی است که تصمیم گرفته‌ایم تیم طراحی‌مان را یک قدم جلوتر ببریم.

تا به حال، طراحی تجربه کاربری، وایرفریم‌ها و ... در تیم طراحی‌مان (که بیشتر تمرکزش به UI، ویژوال و کمی هم برند است،) انجام می‌شد. اما حالا می‌خواهیم با کمک شما قدری حوصله و تمرکز بیشتر به این بخش از پروژه‌هایمان بدهیم. 

 

استودیوی ما هر سال نهایتا چند مشتری اصلی دارد که خوشبختانه معمولا یکی از فعالین اصلی بازارشان هستند. بنابراین معمولا حداقل یک پروژه‌ی جدی با تعداد کاربر زیاد در جریان است که فارغ از جذابیت‌های فنی آن، مسئولیت‌پذیری بالایی هم می‌طلبد؛ اما با همه‌ی این اوصاف، در اینجا با یک لیست ۵۰ تایی از مهارت‌ها روبرو نیستید! چند کار برای ما خیلی اهمیت دارد و می‌خواهیم همین‌ها با تمرکز و کیفیت بالایی انجام شوند:

- نیازسنجی و تحلیل پروژه‌های وب یا موبایل‌مان

- توانایی طراحی Wireframe و User Flow‌های واقع‌بینانه 

- توانایی تعامل نزدیک با تیم طراحی UI استودیو و مشتریان

- توانایی حل مسائل واقعی و جلوبردن پروژه

 

* آشنایی به کار با Sketch یا Adobe XD خوب است، اما ابدا ضروری نیست. اگر بتوانید با قلم و کاغذ هم کارتان را انجام بدهید کافی است.

* برای ما مهم است که همیشه در حال یادگرفتن باشید و ما هم هر کمکی از دستمان بربیاید دریغ نمی‌کنیم.

 

اگر ویژگی‌های بالا را در خودتان می‌بینید و تمایل به همکاری با ما دارید، لطفا رزومه‌ی خودتان را به ایمیل Job@garousian.ir ارسال کنید.

از میز کار من چه خبر؟

گزارشی از پایان کمپین میز کار من

ساره موسوی

کمپین میز کار من هم با همه‌ی هیجاناتش تمام شد و برنده‌ی قرعه‌کشی ما هم جایزه‌‌اش را گرفت.  هنوز تعدادی از حامیان کمپین، هدیه‌ی برنده‌های قرعه‌کشی را اعلام نکرده‌اند و ما منتظر نتایج هستیم. 

کمپین میز کار من، اولین کمپینی بود که خود خودمان شروعش کردیم. حسابی هم پر از لحظه‌های لذت‌بخش از میزهای کار مختلف، آدم‌های مختلف و حس و حال‌های مختلف بود. آدم‌هایی که حتی اگر روی میز کارشان فقط  یک لپ‌تاپ ساده بود، باز هم پر از عشق به میز کارشان بودند و  با کلی ذوق برای ما عکس می‌فرستادند. خلاصه که دوست‌های خوب و مهربان زیادی پیدا کردیم و با کسب و کارهای جدیدی آشنا شدیم. برای کمپین‌های بعدی‌مان هم تجربه‌ی بیشتری به دست آوردیم و حالا سرمان پر از ایده‌های جالب است. 

خیلی‌ها می‌پرسیدند که چرا قرعه‌کشی انجام دادید؟ یا چرا به بهترین میز هدیه ندادید؟ و… راستش همان اول هم گفته بودیم که اصلا مسابقه‌ای در کار نبود، بلکه هدف ما از این کمپین این بود که بیشتر به میز کارمان توجه کنیم، آدم‌هایی که این قسمت از جهان‌شان (میز کارشان) را دوست دارند کنار هم جمع کنیم و بتوانیم به رسم یادبود به یکی از آن‌ها هدیه‌ای سمبلیک بدهیم. 

در پایین متن می‌توانید عکس هدیه‌هایی را که برای بچه‌های استودیو و برنده‌ی قرعه‌کشی در نظر گرفته بودیم، ببینید. 

 

مجید

 

نیما

 

لادن

 

امیر

 

نیما

 

لادن

 

مجید

 

امیر

 

مجید

 

برنده

 

خوشحال می‌شویم نظرتان را در مورد کمپین میزکارمن بدانیم و پیشنهاد‌هایتان را برای کمپین‌های بعدی بشنویم. 

میز کار من

کمپینی برای قدردانی از آدم‌های خوش‌ذوق

ساره موسوی

پشت میز کار شاید یکی از بخش‌های دنیا باشد که همه چیزش توی دست‌های خودمان است. حتی اگر در محل کارمان آن‌قدرها که باید قدرت نداشته باشیم، اما وقتی پشت این میز می‌نشینیم، انگار وارد قلمروی شخصی خودمان می‌شویم. دنیایی کوچک که به تمام جنبه‌هایش تسلط داریم و می‌توانیم هر طور که می‌خواهیم بچینیمش. شاید خیلی‌ها را دیده باشید که میز کارشان را طوری تزئین می‌کنند که انگار بخشی از خودشان و حتی شاید خانه‌شان است. حتما شما هم احساس کرده‌اید که وقتی کنار میز این آدم‌ها می‌ایستیم، پر از انرژی و انگیزه و شادی می‌شویم. بعضی‌ها هم هستند که چندان علاقه‌ای به قشنگ کردن میز کارشان ندارند، حالا ممکن است هر دلیلی داشته باشند؛ یک عده‌شان می‌گویند که کارشان را دوست ندارند، علاقه‌ای هم به زیبا کردن محیط کارشان ندارند. بعضی‌هاشان می‌گویند قشنگ کردن میز کار یک جورهایی لوس‌بازی و بچه‌بازی است و محیط کار باید خشک و جدی باشد. بعضی‌هاشان خیلی دوست دارند این کار را بکنند، اما جا و فضای کافی برای قشنگ کردن میز کارشان ندارند. عده‌ای هم کلا حوصله‌ی این کارها را ندارند و و و…

اما خب، با همه‌ی این داستان‌ها، شاید باز هم بتوانیم با یک چیدمان متفاوت یا با چند گل و گیاه ارزان‌قیمت یا حتی یک ماگ رنگی و شاد، تغییر مثبت و حال‌خوب‌کنی در محیط کارمان ایجاد کنیم. 

 

بچه‌های استودیوی ما هم آدم‌های خوش‌ذوقی هستند. هر کدام‌‌ ما کارهایی برای زیباسازی میز کارمان انجام داده‌ایم. مثلا نیما کلی ماشین دکوری جلوی خودش چیده است، مسعود با لگو ماکت درست کرده و آن را گذاشته است کنار یک ماکت دیگر از یک فولکس قدیمی روی میزش، امیر هر چند وقت یک بار سازه‌های لگویی می‌سازد و در جاهای مختلف قرارشان می‌دهد. یا من زیرلیوانی، جامدادی دست‌ساز خودم و چند چیز دکوری بامزه روی میزم گذاشته‌ام، روی شیشه‌ی جلوی خودم یک ریسه از عکس‌های دوست‌داشتنی آویزان کرده‌ام و یک گلدان زیبا کنار دستم است. لادن یک جامدادی و زیرلیوانی و لیوان قشنگ کنار دست خودش گذاشته است. 

ما حتی به خود استودیو هم فکر می‌کنیم و بر خلاف نظر بعضی‌ها که می‌گویند لوازم تزئینی و دکوری گران است، با ابزار و چیزهای خیلی ساده مثل کاغذ اوریگامی یا اسباب‌بازی‌های ساده و مدادرنگی قسمت‌هایی از اینجا را زیبا کرده‌ایم. به دیوار، قاب عکس شخصیت‌های محبوب‌مان را زده‌ایم و کنار پنجره‌ها کلی گل و گیاه چیده‌ایم و هی تکثیرشان می‌کنیم تا بالاخره یک جنگل درست و حسابی کنار خودمان داشته باشیم. راستش را بخواهید رسیدگی به قشنگی استودیو واقعا حس و حال خوبی به ما می‌دهد و کار و سختی‌های گاه‌به‌گاهش را برای‌مان آسان می‌کند. هر وقت هم که این قشنگی‌ها بخواهند برای‌مان تکراری یا عادی شوند،  دست به کار یک حرکت خلاقانه‌  جدید می‌شویم.

 

همه‌ی این حرف‌ها را زدیم که بگوییم واقعا حیف است که میز کار زیبای آدم‌های خوش‌ذوق اطراف‌مان دیده نشود و این ویژگی خوب به افراد بیشتری نرسد، بنابراین همراه با چند تا از دوستان خیلی خوب‌مان در ژاکت، جیبیت، صباایده، کاربانک، چیلیوری، تپسل، و یک عالمه دوست دیگر، تصمیم گرفته‌ایم که کمپینی هم با نام میز کار من راه‌ بیندازیم. ماجرای کمپین از این قرار است که ما و چند شرکت دیگر، از همه‌ی همکاران‌ و آدم‌های دور و برمان درخواست می‌کنیم که اگر میز کار خاص و زیبا و خلاقانه‌ای دارند، از آن عکس بگیرند و در اینستاگرام با هشتگ #میزکارمن به اشتراک بگذارند. ما هر روز بعضی از این عکس‌ها را در قسمت استوری پیج استودیو گروسیان به نمایش می‌گذاریم و در روز ۳۰ آبان یک قرعه‌کشی انجام می‌دهیم و به تعداد شرکت‌هایی که در این کمپین به ما پیوستند، چند نفر را انتخاب می‌کنیم و هر شرکت به یکی از این آدم‌های خوش‌ذوق جایزه می‌دهد. در کنار این کار، هر شرکت به انتخاب خودش به همه‌ی اعضای تیمش هم هدیه می‌دهد.

 

برای دریافت اطلاعات بیشتر می‌توانید به آدرس کمپین میز کار من سر بزنید. منتظر عکس‌های قشنگ‌تان از میز کار قشنگ‌ترتان هستیم. هشتگ #میزکارمن یادتان نرود! :)

نحوه فعال کردن Webpack HMR در یک پروژه‌ی ساده

نیما عمرانی

باید قبول کنیم  Webpack ابزار پیچیده‌ای‌ست. شاید یکی از دلایل اصلی، گستردگیِ آن در مدیریت فایل‌های پروژه باشد. Webpack فراتر از ابزارهایی مانند Gulp و Grunt کمک می‌کند مدیریت بهتری روی assetهای استاتیک داشته باشیم و از آن‌ها به طور مستقیم در کد استفاده کنیم. کاری که در نهایت یک «گراف وابستگی» یا Dependency Graph ایجاد می‌کند. 

در این مقاله می‌خواهم به طور اختصاصی در مورد فعال کردن HMR یا Hot Module Replacement در یک پروژه‌ی ساده توضیح بدهم. چرا یک پروژه ساده؟ اصلا منظور از پروژه ساده چیست؟ 

چون در بیشتر مقاله‌های فنی به بررسی HMR در یک پروژه Reactی پرداخته‌اند که خب ما به آن حد از پیچیدگی نیازی نداریم. برای درک یک موضوع هر چه داستان سبک‌تر بهتر.

پروژه ساده از تعدادی ماژول (همان فایل خودمان) Javascript تشکیل شده به همراه یک فایل CSS و یک فایل index.html. می‌خواهیم فایل‌های js را یکی کنیم و در عین حال با تغییر آن‌ها یا استایل‌ها بدون ریفرش شدن بروزر تغییرات جدید را مشاهده کنیم. همین! :)

معرفی استودیوهای خلاق طراحی وب و موبایل [4]

قسمت چهارم - Sebo

لادن شاپورزاده

 

gif_dribbble.gif (865 KB)

 

این استودیو را هم تازگی‌ها پیدا کرده‌ام و کلی دوستش دارم. Sebo در کشور اندونزی، فعالیت و تمرکز ویژه‌ای روی طراحی وب و اپلیکیشن برای محصولات خاص و تک دارد. طراحی‌های مینیمال و تخت با زمینه‌‌ی سفید، از ویژگی‌های سبک کار این استودیو‌ست.

 

empty_space_for_exchanging_number_apps.jpg (149 KB)

4.1.png (62 KB)

 

اگر به و‌ب‌سایت اصلی Sebo سری بزنید، می‌توانید با خواندن نظرات مشتریان، کمی با سبک و سیاق کاری این استودیو آشنا شوید. اکثریت مشتریان گفته‌اند که طراحی‌ها همیشه سر وقت حاضر می‌شود و دقیقا همان‌چیزی‌ است که انتظار داشتند. طراحان استودیو بسیار انعطاف پذیر هستند و تا زمانی که مشتری راضی نباشد، دست از طراحی نمی‌کشند. دیدن صفحات Dribbble و Behance این استودیو نیز خالی از لطف نخواهد بود. راه راحت‌تر هم سر زدن به صفحه‌ی اینستاگرام Sebo و دیدن نمونه کارهای جذاب این طراحان جوان است.

 

artboard.png (165 KB)

 

shoot.png (471 KB)

 

payment_platform_website.png (236 KB)

 

crm_landing_page.png (262 KB)

 

فرانت‌اند دقیقا کجاست؟

مثلثی که به خط تبدیل می‌شود

نیما عمرانی

در این مقاله می‌خواهم روشن و صریح راجع به فرانت‌اند صحبت کنم. سعی می‌کنم سوال‌های اساسی مطرح کنم و به آن‌ها پاسخ دهم. این مقاله را به کسانی که به تازگی به فرانت‌اند علاقه‌مند شده‌اند پیشنهاد می‌کنم. همینطور به کسانی که در حال حاضر در این زمینه فعالیت می‌کنند و خود را توسعه‌دهنده‌ی فرانت‌اند می‌دانند. همینطور به توسعه‌دهنده/مهندسان نرم‌افزار. طراح‌های عزیز هم می‌توانند در این مقاله بیشتر با ما آشنا شوند. کلا اگر کلمه‌ی فرانت‌اند به گوش‌تان خورده باشد این مقاله مفهوم این کلمه را روشن‌تر خواهد کرد.

 

چرا بازتعریف مفاهیمِ رایج ضروری‌ست؟

گاهی اوقات بین فاز عملی و علمیِ یک مفهوم فاصله می‌افتد. برای مثال فرض کنیم شخصی را برای ساختن یک ساختمان استخدام کرده‌ایم. نقشه‌ها همه حاضر هستند و این شخص قرار است ساختمان را تکمیل کند. انتظار داریم ساختمان را کامل به ما تحویل دهد در حالی که کاشف به عمل می‌آید تنها از پس لوله‌کشی آب بر می‌آید!

حال فرض کنیم تعداد زیادی از افرادی که برای این کار می‌توانیم استخدام کنیم به همین شکل مهارت‌های نصفه و نیمه داشته باشند. تکلیف چیست؟ چه کار می‌توان کرد؟ 

این دقیقا چالشی‌ست که ما بعد از بررسی رزومه‌های فراوان و مصاحبه‌‌ها با آن مواجه شدیم. به نظر می‌رسد حوزه‌ی فرانت‌اند با تمام شفافیت هنوز برای اهل فن دچار ابهام در تعریف است. متاسفانه در حال حاضر فرانت‌اند در ایران محلی برای توسعه‌دهندگان/برنامه‌نویسانی شده که هنوز مسیر حرفه‌ای خود را تعیین نکرده و در یک بلاتکلیفی به سر می‌برند. این‌ها را اضافه کنید به اینکه تب فریم‌ورک‌های Javascript در چند سال اخیر فضا را بیش از پیش مریض‌تر کرده‌ است.

 

مثلث فرانت‌اند

سه قسمت اصلی فرانت‌اند CSS, HTML و Javascript هستند. در مورد اینکه آیا HTML و CSS جزو زبان‌های برنامه‌نویسی هستند یا نه حرف و حدیث فراوان است. 

به طور کلی دو الگو  (paradigm) در مورد زبان‌های برنامه‌نویسی وجود دارد. زبان‌هایی که به یک سیستم می‌گویند «چگونه» کاری انجام شود و زبان‌هایی که می‌گویند «چه چیزی» انجام شود. دسته اول را imperative programming و دسته دوم را declarative programming می‌نامند. برای مثال زبان‌های c, java, php, python , … در دسته‌ی اول و زبان‌های SQL, Curl, html,… در دسته‌ی دوم قرار می‌گیرند.

این دو الگو نه تنها در مورد زبان‌های برنامه‌نویسی بلکه در نوع توسعه‌ی کد در یک زبان مشخص نیز وجود دارند. در ساده‌ترین شکل وقتی از functional programming استفاده می‌کنیم و برای مثال تابع factorial() را نوشته و در قسمت‌های مختلف از آن استفاده می‌کنیم، از الگوی declarative استفاده کرده‌ایم. برای توضیح بیشتر و بهتر مطالعه این مقاله را پیشنهاد می‌کنم. 

برگردیم به دو قسمت اساسی از فرانت‌اند. با تعریف‌های بالا HTML و CSS دو زبان هستند که از الگوی declarative programming استفاده می‌کنند. خب البته در مورد اینکه این دو «زبان» هستند هم مناقشه وجود دارد چه برسد به اینکه کلمه‌ی "programming" را هم به آن اضافه کنیم! واقعا بستگی به نوع نگاه دارد. ترجیح می‌دهم بیشتر وارد این موضوع نشوم و مابقی داستان را به خودتان می‌سپارم. برای اینکه با یک نگاه متفاوت آشنا شوید پیشنهاد می‌کنم ارائه‌ی Lara Schenck در CSSConf EU 2018 را ببینید. او در مورد CSS Algorithms صحبت می‌کند

 

سفت و سخت برای بازتعریف فرانت‌اند

خب پس دوباره یادآوری کردیم که HTML، CSS و javascript سه ضلع اصلیِ مثلث فرانت‌اند هستند. اما وزن آن‌ها به چه صورت است؟ هر کدام چه وظیفه‌ای دارند؟ بازار ایران از چه زاویه‌ای به فرانت‌اند نگاه می‌کند و مهمتر از آن توسعه‌دهنده‌ها چه ایده‌ای راجع به فرانت‌اند دارند؟

از نظر ما (منظورم از ما مجموعه‌ی استودیو گروسیان است) هسته‌ی اساسی در فرانت‌اند بدون هیچ شکی HTML و CSS است. این دو با همکاری هم یک ایده را از مرحله طرح به مرحله پیاده‌سازی می‌رسانند. یک توسعه‌دهنده‌ی فرانت‌اند همیشه تشنه‌ی یادگیری در این دو زبان خواهد بود. بهترین منابع هم specificationهای w3c هستند که وضعیت توسعه‌ی فعلیِ این زبان‌ها و همینطور تعاریف پایه را ارائه می‌دهند.

 

HTML: اسکلت وب

برگردیم به مثال ساختمان. اولین مراحل ساخت یک ساختمان چیست؟ پی‌سازی، آرماتوربندی، بتن‌ریزی و ساخت اسکلت فلزی. با این‌ها ساختار کلی ساختمان آماده خواهد شد. با اینکه بعد از انجام این مراحل ظاهر ساختمان فقط چند اسکلت فلزی‌ست و هیچ زیبایی و جزئیاتی در آن دیده نمی‌شود اما این مراحل مهمترین و حیاتی‌ترین مراحل در ساختن یک ساختمانِ مقاوم و ایمن هستند. 

یک صفحه‌ی وب درست مانند یک ساختمان است. پی و اسکلت آن را کد HTML تشکیل می‌دهد و دقیقا به همان اندازه این کد اهمیت دارد. در نهایت از طریق کدهای HTML است که مفهومی را به موتورهای جستجو القا می‌کنیم و از این طریق document خود را از نظر SEO بهبود می‌بخشیم. در واقع صفحه‌ی ما باید هم برای انسان و هم برای ماشین به یک اندازه قابل خواندن و فهمیدن باشد. با استفاده‌ی درست از HTML محتوا را می‌توان برای انسان‌ها و ماشین‌ها خواناتر کرد. حال این ماشین می‌توان موتور جستجو باشد یا یک وسیله‌ برای کمک به کسانی که از ناتوانی‌های جسمی رنج می‌برند مانند screen readerها.

به screen readerها اشاره شد، مفهومی تحت عنوان Accessibility وجود دارد که بر جنبه‌ی انسانی وب تاکید می‌کند. اینکه فضای وب برای تمام انسان‌ها چه آن‌ها که دارای ناتوانی‌های جسمی هستند و چه آن‌ها که نیستند قابل دسترس باشد. زبانی که وظیفه‌ی اصلی پیاده‌سازی چنین مفهومی را بر عهده دارد HTML است. 

این زبان دنیای نه چندان وسیع اما مهمی‌ست. بیشتر توسعه‌دهنده‌ها/برنامه‌نویس‌ها با آن آشنا هستند و همین ممکن است باعث شود به آن نگاه نادرست و گاه تحقیرآمیز داشته باشند.

 

tweet-about-html-wide.jpg (46 KB)

 

CSS: نازک‌کاریِ وب

خب در مثال ساختمان تا پی‌ریزی و اسکلت‌بندی پیش رفتیم. اما با این سر و شکل هیچ شخصی حاضر نیست زندگی خود را به این ساختمان منتقل کند. مراحل قبلی را در ساختمان‌سازی اصطلاحا «سفت‌کاری» می‌گویند. مراحل بعدی که شامل پوشش ظاهری ساختمان است به «نازک‌کاری» معروف‌اند. عملیاتی مانند کاشی‌کاری، نقاشی، برق‌کاری، لوله‌کشی (که خاطرتان هست!)، نصب در و پنجره و ... 

حالا که ساختار اصلی document را با استفاده از HTML به شکل درست تشکیل دادیم، وقت آن رسیده که دقیقا پیاده‌سازی را به طرح نزدیک کنیم. CSS زبانی‌ست که در آن فاصله‌ی بین طراح‌ها و توسعه‌دهنده‌ها به نزدیک‌ترین نقطه‌ی خودش می‌رسد! بسیاری از طراحان با این زبان آشنایی ابتدایی دارند. پیکسل به پیکسلِ طرح اهمیت دارد و باید عینا به کد تبدیل شود. قدم اول در وفاداری به طرح، دید دقیق و حساسیت بالاست. تا زمانی که جزئیات را نبینیم نمی‌توانیم ادعا کنیم پیاده‌سازیِ دقیقی داشته‌ایم. درست مثل اینکه یک قطعه‌ی موسیقی را به جای نتِ نوشته شده به شکل گوشی دربیاوریم! خلاصه طرح را نابود نکنیم.

نکته‌ی مهم دیگر این است که برای یک صفحه ممکن است نهایتا سه طرح به عنوان طرح‌های دسکتاپ، تبلت و موبایل آماده شود. اینجا وظیفه‌ی فرانت‌اند پر کردن فواصلِ پیوسته (به شکل fluid) بین این‌ طرح‌ها و همینطور توجه به پیاده‌سازی در اندازه مانیتورهای مرسوم و بزرگ است.

وقتی توسعه‌دهنده‌های امروز در مورد نامفهوم و غیرقابل پیشبینی بودن CSS صحبت می‌کنند برایم غیرقابل درک است. شاید این موضوع در گذشته‌ی دور (مثلا ۱۵ سال پیش در دوران IE6) صادق بود اما حقیقت این است که CSS در گذر زمان حسابی پخته و قابل اطمینان شده است. به وجود آمدن preprocessorها مانند SASS و LESS باعث شده است قدرت این زبان به مدد متغیرها، توابع و به طور کل اضافه شدن منطق به کد افزایش پیدا کند. 

پس اگر خود را توسعه‌دهنده‌ی فرانت‌اندی می‌دانید که از CSS فراری هستید بدانید یک جای کار می‌لنگد و بهتر است در انتخاب‌هایتان بازنگری کنید. 

 

Javascript: منطق بروزر (و نه وب البته!)

در مثال ساختمان وقتی می‌خواهیم چراغی را روشن/خاموش کنیم با یک کلید پریز این کار را انجام می‌دهیم. همینطور اگر بخواهیم کمی آب بنوشیم با باز کردن شیر ظرفشویی به آب دسترسی داریم. به طور کلی قسمت‌هایی در ساختمان وجود دارند که در مقابل عمل ما عکس‌العمل نشان می‌دهند. گویا منطقی در کار است.

زبان Javascript در ساده‌ترین تعریف هسته‌ی منطق در فرانت‌اند (و بروزر) است. اینجاست که می‌توانید تعریف کنید با کلیک روی مثلا همبرگر باتن (کلید پریز) منوی سایت از سمت راست وارد صفحه شود یا از آن خارج گردد (روشن/خاموش شدن لامپ). 

می‌توانیم دو وظیفه‌ی اصلی Javascript در فرانت‌اند را به تولید/تغییر DOM و مدیریت دیتا خلاصه کنیم. اگر کمی کلی‌تر به قضیه نگاه کنیم مورد دوم نیز در نهایت به مورد اول ختم می‌شود! گویا این زبان آمده‌ است تا پس از تولید اولیه‌ی DOM امکان کار روی آن را برایمان فراهم سازد. تولید و تغییر DOM به قدری پررنگ می‌شود که بخشی از فریم‌ورک‌های این زبان به طور کلی وظیفه‌ی تولید DOM را بر عهده می‌گیرند. کافی‌ست page source یک اپلیکیشن نوشته شده با React (بدون server side rendering) را ببینید تا متوجه منظورم شوید.

 

دسته‌بندی‌های فرانت‌اند: 

شاید بگویید من بیشتر به کار روی دیتا و منطق در فرانت‌اند علاقه‌ دارم. می‌خواهم روی فریم‌ورک‌ها تمرکز داشته باشم. یا بگویید بیشتر به پیاده‌سازی موشن‌ها و انیمیشن‌ها علاقه دارم. سبک سایت‌های awwwards را می‌پسندم. یا اصلا بگویید من به Javascript علاقه‌مند هستم اما سرور برای من دنیای جذاب‌تری‌ست. خب اینجا وارد دسته‌های مختلف فرانت‌اند شده‌ایم. اجازه بدهید وعده‌ی مقاله‌ی مفصلی را به شما بدهم و به همین اکتفا کنم که با آگاهی از اصول فرانت‌اند، حوزه‌های مختلف و علاقه خود می‌توان در هر کدام از این قسمت‌ها به شکل تخصصی فعالیت کرد و خوشحال بود.

 

چند توصیه براساس تجربه:

برای عمیق شدن در هر کاری باید به ریشه‌ها پرداخت. فرانت‌اند از این قاعده مستثنی نیست. داستان زیرعنوان مقاله «مثلثی که به خط تبدیل می‌شود» همین است. اگر برداشت ما از فرانت‌اند فقط محدود به Javascript و فریم‌ورک‌های آن باشد مثلث را به خط تبدیل کرده‌ایم. فراموش نکنیم که وظیفه‌ی اصلی Javascript سر و کله زدن با DOM است. یعنی زبان HTML. HTML هم به خودی خود کار راه بنداز نیست و بزک می‌خواهد. یعنی زبان CSS

اگر نتوانیم یک document ساده را اصولی به کد HTML تبدیل کنیم یا لی‌اوت یک طرح را با استفاده از CSS عینا پیاده‌سازی کنیم پس در فریم‌ورک‌ها هم کُمِیت‌مان لنگ خواهد بود.

جمله‌هایی از این دست را زیاد می‌شنویم: 

«HTML و CSS رو تو یه هفته میشه یاد گرفت و جمعش کرد» یا 

«بابا HTML و CSS که دیگه گلابیه، یه باتن می‌خوای بذاری رو هاور رنگ عوض کنه. دیگه این همه داستان نداره» و ... 

حتی از زبان فرانت‌اندکارها! نکته اینجاست که جدا از مسئله‌ی اجرای تمیز و رعایت کردن استانداردها، مدیریت کدها در یک پروژه‌ی بزرگ چالش‌برانگیز خواهد بود. چه کار کنیم که کد ما قابل فهم، گسترش و نگهداری باشد؟ راه حل چنین مسائلی طی چند سال تمرین و تمرکز و مطالعه‌ی تخصصی به دست خواهند آمد. 

 

حرف آخر:

از نظر ما همه بخش‌های یک پروژه موفق وب اعم از طراحی، پیاد‌ه‌سازی فرانت‌اند، توسعه بکند و البته محتوا بسیار اهمیت دارند. بنابراین پیشنهاد می‌کنیم به جای وصله‌پینه کردن مهارت‌هایتان ابتدا با ویژگی‌های هر کدام آشنا شوید، از حر‌ف‌ها و توصیه‌های مقرضانه، تحقیرآمیز و شعارهای پرسپولیس و استقلالی و به طور کل حواشی تا می‌توانید دور باشید و بعد با تمرکز، یادگیری و تمرین تلاش کنید در زمینه‌ی مورد علاقه‌تان هر روز بهتر شوید.

شخصیت‌‌های محبوب ما کیستند

و چرا دوست‌شان داریم؟

ساره موسوی

در پست امروز بلاگ می‌خواهیم باز هم کمی بیشتر از خودمان برای شما بگوییم. تصمیم گرفته‌ایم از بین آدم‌های محبوب‌مان، دو نفرشان را به شما معرفی کنیم و دلیل این محبوبیت را هم بنویسیم. خب، با نیما شروع می‌کنیم:

نیما عمرانی

۱. ارنست شَکِلتون

او کاشف انگلیسی‌ای بود که در قرن ۱۹ زندگی می‌کرد و جزو اولین کسانی بود که در اوج دوران قهرمانانه‌ی اکتشافِ قطب جنوب، پا به آن‌جا گذاشت. با اینکه هیچ‌وقت نتوانست به قطب جنوب (مدار صفر درجه) دست پیدا کند و عملا تمام تلاش‌هایش با شکست مواجه شد، اما از او به عنوان رهبرِ صبور، محکم و پرتلاشی یاد می‌کنند که در شرایط سخت و بحرانی، بهترین راه‌ها را برای حفظ جان مردانش انتخاب کرد. 

آنچه از نظر من در شکلتون تحسین‌برانگیز است، قدرت ذهن او در دورانی است که بشر هنوز امکانات کافی برای شناخت کامل سیاره‌اش نداشت و همین نکته، خستگی‌ناپذیری و کوشش ارنست شکلتون را برای رسیدن به هدف، زیباتر می‌کند.

 

1.jpeg (97 KB) 

۲. مانکی دی لوفی Monkey D. Luffy

او شخصیت اصلی انیمه‌ی «One Piece» است. ویژگی‌های اصلی لوفی، شاد و خندان بودن و ایمان قوی‌اش به هدفی است که دارد. ذهن لوفی به طور عجیبی محکم است و همین ویژگی به او قدرت می‌دهد. او سعی می‌کند به یک مقامی که در انیمه، با نام «پادشاه دزدان دریایی» عنوان می‌شود، برسد، اما این جایگاه مهم نیست؛ او در این مسیر به شخصیت‌های دیگر کمک می‌کند تا بتوانند حق‌شان را از کسی که به آن‌ها ظلم کرده بگیرند.

مانکی دی لوفی در مسیر جزیره‌ها و دریاهای مختلف، دوستان زیادی پیدا می‌کند که بهترین‌هاشان با او هم‌راه می‌شوند و به کمک هم به سمت ماجراهای تازه حرکت می‌کنند.

راستی لوفی یک دزد دریایی و کاپیتان کشتی است!

 

2.jpeg (54 KB)

 

 

 مسعود گروسیان

۱. حسین علیزاده

حسین علیزاده همیشه برای من نماد اوج مهارت و نوآوری است؛ نوآوری در زمینه‌ای که کلمه‌ی «سنتی» بخش جدانشدنی آن بوده و مهارتی که با سال‌ها حوصله و تمرین به دست آمده است. و البته چهره‌ی خشن اما در عین حال مهربان و صبورش هم همیشه در مواقع دشواری، برای من امیدبخش بوده و هست.

 

3.jpeg (61 KB)

 

۲. پدر بزرگم

ما پدربزرگم را «پدرجون» صدا می‌کردیم. تمام کودکی من پر از خاطرات زیبا و رنگی از اوست. پدرجون خیلی خوش‌تیپ و خوش‌مشرب بود و یادم است همیشه از اینکه دستش را بگیرم، حسابی کیف می‌کردم.

خلاصه که پدربزرگم ترکیب جالبی از این کلمات بود: باحال و خوش‌معاشرت، خوش‌سفر و اهل کباب، خوش‌تیپ و جذاب، باسواد و سخنور، رویاپرداز و عاشق.

 

4.jpeg (47 KB)

 

 

 لادن شاپورزاده

۱. انوشه انصاری

او کاوشگر و رئیس انجمن گردانندگان شرکت فناوری ارتباط از راه دور «TTI» است. همچنین اولین زن گردشگر فضایی و چهارمین نفری است که هزینه‌ی سفر فضایی خود را پرداخت کرده است. انوشه انصاری در سال ۲۰۱۵ جایزه‌ی «پیشگام فضا» را از جامعه‌ی ملی فضای آمریکا به عنوان نخستین زن گردشگر فضایی از آن خودش کرد.

من خیلی لذت می‌برم وقتی می‌بینم در این دنیای زن‌ستیز که حتی در مواردی، زن‌ها حق خواندن و نوشتن ندارند، یک زن ایرانی توانسته است این کار بزرگ را انجام بدهد و یک افتخار جهانی برای همه‌ی زنان و جامعه‌ی علمی به دست بیاورد.

 

5.jpeg (64 KB)

 

۲. برادران دیزنی

والتر و روی الیور از چهره‌های سرشناس صنعت انیمیشن آمریکا هستند؛ بنیانگذار محصولات والت دیزنی که بعدها به یکی از معروف‌ترین و بهترین شرکت‌های تولید فیلم تبدیل شد. برادران دیزنی توانستند با خلق شخصیت‌هایی چون میکی‌ماوس، سفید برفی، آلیس در سرزمین عجایب، سیندرلا، دیو و دلبر، زیبای خفته و… زندگی میلیون‌ها کودک را رنگی و شاد کنند.

دوران کودکی من و خیلی از دخترها با انیمیشن‌ها و شخصیت‌های والت‌دیزنی گذشت و شکل گرفت. هنوز هم با دیدن‌شان به دنیای پر‌هیجان کودکی پرت مي‌شوم و به یاد می‌آورم که این شخصیت‌ها چه تاثیری رو کودکی ما داشتند؛ آنقدر که حتی گاهی خودمان را در جایگاه آن‌ها می‌دیدیم و نقش‌شان را در زندگی واقعی بازی می‌کردیم.

خلاصه که من عاشق دنیای والت‌دیزنی هستم و یکی از آرزوهایم این است که در آینده، همراه دختر یا پسرم به دیدن «دیزنی لند» که در آناهایم کالیفرنیا در ایالات متحده آمریکاست بروم.

 

6.jpeg (97 KB)

 

 

 مهدی گروسیان

۱. جلال‌الدین محمد رومی (مولانا)

من معتقدم که مولانا استاد همه‌ی ما ایرانی‌ها است. او ۸۱۱ سال پیش در بلخ و یا شاید در وخش به دنیا آمد. این دو شهر به ترتیب در افغانستان و تاجیکستان کنونی قرار دارند. در پایین دو غزل از مولانا را می‌خوانیم که به ترتیب پشت سر هم آوردم‌شان. بخش اول، تصویری تایم‌لپس از تغییر فصل‌ها و بخش دوم یک تصویر فراکتالی ِ آخرزمانی را نشان می‌دهد:

برف بدم گداختم تا که مرا زمین بخورد

تا همه دود دل شدم تا سوی آسمان شدم

آنکه کسی گمان نبرد رفت گمان من بدو

تا که چنین به عاقبت بر سر آن گمان شدم

ولی

چو این تبدیل ها افتاد نه هامون ماند و نه دریا

چه دانستم دگر چون شد که چون غرق است در بی‌چون

 

10.jpeg (62 KB)

 

۲. ما لانگ

او یک بازیکن ۲۹ ساله چینی «تنیس روی میز» است. او دارنده‌ی مقام اول این ورزش برای طولانی ترین دوره بوده و همچنین تنها بازیکن مردی است که مقام نخست همه‌ی مسابقات معتبر را به دست آورده است. چیزی که برای من بیشتر اهمیت دارد این نکته است که بازی ما‌ لانگ بسیار زیبا، سریع،‌ باهوش و تمیز است. او در هنگام بازی همواره خونسرد و متمرکز است و همیشه بهترین بازی‌اش را در مقابل همه رقیبانش به نمایش می گذارد.

 

9.jpeg (34 KB)

 

 

 امیر قدیمی

۱ و ۲. لوئیس همیلتون و کیمی رایکونن

اوج تکنولوژی و توانایی بشریت را می‌توان در مسابقات فرمول ۱ پیداکرد. جایی که زمان، مهارت و علم، ابعادی برای دست یافتن به یک نتیجه هستند: «سریع ترین راننده جهان.»

بزرگترین تولیدکنندگان اتوموبیل مانند «مرسدس بنز»، «فراری»، «رنو» و... از پیشرفته‌ترین علوم آیرودینامیک، علوم ساخت هواپیما و تجربه‌ی چند ده ساله خود در طراحی و تولید اتومبیل استفاده می‌کنند تا بی‌نقص‌ترین و سریع‌ترین ماشین فرمول ۱ ممکن را برای مسابقات بسازند. اما تا اینجا فقط نیمی از راه را طی کرده‌اند؛ چرا که تنها عاملی که پیروزی ۱۰۰٪ را تضمین می‌کند، داشتن بهترین راننده‌ی دنیاست.

برای نمونه، لوئیس همیلتون از ۸ سالگی رانندگی حرفه‌ای را با کارتینگ آغاز کرد و در ۲۲ سالگی برای اولین بار به مسابقات فرمول 1 راه یافت، او ۴ بار عنوان قهرمانی جهان را کسب کرده است و در این لحظه با کسب ۲۶۵ امتیازِ نفر اول مسابقات ۲۰۱۸ است.

 

7.jpeg (72 KB)

 

کیمی رایکونن هم یکی دیگر از راننده‌های مسابقات فرمول ۱ است. او در ۱۱ سالگی کارتینگ را شروع کرد و در سال ۲۰۰۰ در مسابقات فرمول ۱ رنوی بریتانیا قهرمان شد. از آن سال تا به امروز توانسته است در ۲۰ مسابقه، مقام اول را کسب کند. او به دلیل خونسردی زیاد و کم‌حرفی‌اش به مرد یخی معروف است.

 

8.jpeg (69 KB)

 

خلاصه که رانندگان فرمول ۱ همیشه برای من نماد مهارت، هوش و قدرت جسمانی هستند. در طی مسابقه اصلی فشار بسیار زیادی روی آنها ست و معمولا بعد از مسابقه ۲ تا ۸ کیلوگرم وزن کم میکنند!

من هم با شروع رانندگی کارتینگ، خودم را در مسیری قرار داده‌ام که بتوانم از نظر جسمانی و مهارت به رانندگان فرمول ۱ نزدیک شوم و در لحظه‌ای که روی پیست با سریع ترین سرعت ممکن می‌رانم، حس زنده بودن را بیشتر از هر زمان دیگری در خودم احساس می‌کنم.

 

 

و در پایان، خودم، ساره موسوی

۱. توتورو

توتورو یکی از شخصیت‌های انیمیشن «همسایه‌ی من توتورو» به کارگردانی «هایائو میازاکی» است. او در واقع یک روح عجیب و غریب و خیلی خیلی بزرگ است که در جنگلی نزدیک یک خانه‌ زندگی می‌کند که به تازگی ساتسوکه و خواهرش مِی، همراه با پدرشان به آن‌جا نقل مکان کرده‌اند. این دو خواهر منتظرند تا مادرشان که بیمار است، از بیمارستان مرخص شود و دوباره خانواده‌شان دور هم جمع شوند.
در کشاکش این روزهای سخت و پر از دلتنگی است که آن‌ها با توتورو و چند روح بانمک دیگر آشنا می‌شوند.
توتورو هیچ‌وقت حرف نمی‌زند، اما همیشه‌ی خدا آماده‌ی لبخند زدن و کمک کردن است. او هر کاری می‌کند که به دو خواهر توی داستان کمک کند تا بتوانند مادرشان را ببینند و دلتنگی‌شان کم‌تر شود، حتی اگر آن کارها خیلی خیلی دور از ذهن باشند. گاهی آرزو می‌کنم که کاش یکی از خواهران توی این انیمیشن بودم و یک توتوروی چاق و مهربان برای خودم داشتم.

 

11.jpeg (60 KB)

 

۲. فروغ فرخزاد

فروغ فرخزاد یک جورهایی بت دوران نوجوانی من بود. آن روزها با فکر و ذکر اشعار و نوشته‌ها و فیلم‌های او زندگی می‌کردم. هر چیزی که اثری از او داشت می‌خریدم، می‌خواندم، تماشا می‌کردم. یادم است که فیلم «خانه سیاه است» را بارها و بارها تماشا کردم و هر بار حسابی اشک ریختم. فروغ روی نوشتن من هم حسابی تاثیر گذاشته بود. وقتی شعرهای دوران نوجوانی‌ام را می‌خوانم، تاثیر او را خیلی خوب در آن‌ها احساس می‌کنم.

هنوز هم فروغ را خیلی دوست دارم، شاید دیگر بت من نباشد، اما هنوز هم با دیدن عکس‌ها و نوشته‌هایش قلبم یک جوری می‌شود.
احساس می‌کنم که فروغ خلاصه‌ی تمام ویژگی‌های فوق‌العاده‌ای است که یک زن می‌تواند داشته باشد. زنی که هم دیوانه‌وار عاشق بود، هم جسارت بیان عمیق‌ترین و شخصی‌ترین احساسات زنانه‌اش را داشت، هم از زمان خودش جلوتر زندگی می‌کرد، هم زیبا بود و هم در اوج فروغ بودن از دنیا رفت. نوجوان که بودم، آرزو داشتم که من هم توی سنی بمیرم که فروغ مرد، اما خب، الان خیلی چیزها توی ذهنم تغییر کرده است.

 

12.jpeg (60 KB)

 

شما هم دو نفر از شخصیت‌های دوست‌داشتنی زندگی‌تان را به ما معرفی کنید. این شخصیت‌ها می‌توانند هر کسی باشند، از آدم‌های معروف گرفته تا آدم‌های غیر معروفی که فقط خودتان می‌شناسیدشان یا حتی شخصیت‌های تخیلی و کارتونی. منتظرتان هستیم.

در تلاش برای غرق نشدن

ما هم مجبور به تعدیل نیرو شدیم

ساره موسوی

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

گاهی آن‌قدر از کار کردن در این کشور ناامید می‌شویم که اصلا به فکر می‌افتیم که همه‌چیز را تعطیل کنیم، سختی‌های مهاجرت را به جان بخریم و این‌قدر بی‌ثبات و پر از نوسان پیش نرویم. گاهی هم کورسوی امیدی پیدا می‌شود و برای مدتی دوباره کمی جان می‌گیریم. همین چند وقت پیش بود که مجبور شدیم با سه نفر از همکاران خوب‌مان خداحافظی کنیم. دل‌مان می‌خواست آن‌قدر قدرت داشته باشیم که دست همه‌ی آدم‌های بااستعداد را بگیریم و بیاوریم‌شان توی قایق‌مان، نه اینکه…!

ناراحتیم! گیجیم! نمی‌دانیم تقصیر را باید گردن چه کسی بیندازیم! اصلا نمی‌دانیم باید حتما تقصیر را گردن کسی بیندازیم یا نه! اما با همه‌ی این سردرگمی‌ها و نداستن‌ها، باز هم داریم سعی می‌کنیم یک راه حل خوب برای ماندن، ادامه دادن و بهتر شدن پیدا کنیم. 

حال و روز شما هم مثل ماست یا هنوز در دل‌تان آب از آب تکان نخورده؟ شما به چه راه‌حل‌هایی فکر می‌کنید برای گذر از این طوفان طولانی و مخرّب؟ به نتیجه‌ای هم رسیده‌اید؟ خوشحال می‌شویم حرف‌ها، درد‌دل‌ها و راه‌حل‌های شما را بشنویم.

شروع گیت‌هابی

معرفی استارتر کیت‌های فرانت‌اند ما در گیت‌هاب

نیما عمرانی

سلام، امیدوارم خوب باشید. من نیما عمرانی هستم و امروز می‌خواهم به مناسبت شروع حساب گیت‌هاب استودیو گروسیان، سه پروژه‌ی خام یا استارتری (starter) را که اولین‌ ریپوهای ما در گیت‌هاب هستند به شما معرفی کنم. 

پروژه‌ی استارتر یا استارتر کیت (Starter Kit) از تعدادی فولدر و فایل تشکیل شده که چارچوب یک پروژه را مشخص می‌کند. با کمی بالا و پایین کردنِ فایل‌ها و مطالعه‌ی مستندات می‌توانید شروع به کد زدن کنید و نگران ابزارها و کانفیگ‌های عجیب و غریب نباشید. برای مثال کیت‌های مختلفی برای فریم‌ورک react وجود دارد که شما با توجه به نوع استفاده و ابزار مورد علاقه می‌توانید یکی را clone کرده و شروع به کار کنید.

کیت‌های استودیوی ما در طول زمان تکامل پیدا کردند و در نهایت بعد از کنار گذاشتنِ وسواس‌های ناکارآمد تصمیم گرفتیم آن‌ها را در گیت‌هاب منتشر کنیم تا دوستان دیگر هم ببینند، نظر دهند، استفاده کنند و در نهایت مسیر تکامل هموارتر شود. 

هسته‌ی اصلی سه کیت، ساختار sass در آن‌ها است. نوع نگاه ما به کامپوننت‌های UI براساس آموخته‌هایمان در OOCSS و SMACSS بوده و از BEM به عنوان روشی برای نام‌گذاری کلاس‌ها در جهت ماژولار دیدنِ  بخش‌های مختلف یک طرح استفاده می‌کنیم.

بسیار خب برویم سراغ معرفی کیت‌ها. با قدیمی‌ترین‌شان شروع می‌کنم.

 

 

1. starter-gulp-browserify-sass-php

 

در این کیت از ابزار gulp برای build system استفاده می‌کنیم. تسک‌های اصلی مربوط به js، sass و sprite.svg هستند. چند تسک کوچک دیگر هم برای favicon، browser-sync و  build پروژه برای deploy کردن داریم. دستورهای اصلی با npm اجرا می‌شوند و در package.json ست شده‌اند.

همانطور که می‌دانید برای جداسازیِ فایل‌های جاوااسکریپت و همینطور استفاده مجدد از آن‌ها می‌توانیم از module managerی که در node.js وجود دارد استفاده کنیم. اما حالا که در فضای بروزر هستیم چه کنیم؟ browserify ابزاری‌ست که قابلیت module manager node.js را که همان require/export کردن فایل‌هاست در بروزر برایمان فراهم می‌کند. 

با sass که حتما آشنا هستید و نیاز به توضیح بیشتر ندارد. 

استفاده ما از php در این کیت و یک کیت دیگر صرفا کاربرد template engine آن است. ما markup قسمت‌های مختلف یک صفحه در طرح را در یک ساختار منظم و در فایل‌های جداگانه قرار می‌دهیم. ضمن اینکه تیم‌های فنیِ بیشتر مشتریان ما با این زبان کار می‌کنند. علاوه بر آن ممکن است پروژه در آینده به CMS (برای مثال وردپرس) متصل شود. 

 

 

2. starter-webpack-es6-sass-php

 

در این کیت با gulp خداحافظی و به webpack سلام کردیم! 

Webpack فراتر از gulp تنها ابزاری برای مثلا چسباندن فایل‌های js نیست. در یک پروژه‌ی فرانت‌اند با حضور webpack مدیریت کلیه‌ی فایل‌ها بر عهده‌ی این ابزار قرار می‌گیرد به طوری که  webpackیک گراف وابستگی (dependency graph) ایجاد کرده تا هر ماژولی که در پروژه استفاده کردید را در نهایت وارد bundle نهایی مربوط به آن کند. 

در این کیت می‌توانید از قابلیت‌های es2015 یا همان es6 استفاده کنید. خروجی نهایی با استفاده از babel به es5 کامپایل می‌شود درنتیجه نگرانی از بابت پشتیبانی در مرورگرهای مختلف نخواهید داشت. 

 

 

3. starter-webpack-react-es6-sass

 

استارتر کیت‌های زیادی برای react وجود دارد. کافی‌ست عبارتی مانند react starter kit را گوگل کنید تا در میان ریپوهای بزرگ و کوچک گم شوید. آنچه باعث شد به فکر ساختن ریپویی مستقل بیافتیم تلاش برای نزدیکی به ساختارِ تکامل یافته‌ی پروژه‌هایمان در استودیو، نوع نگاه و نیازهای فنی خودمان بود. 

در این کیت از react به عنوان کتابخانه‌ای برای تولید کامپوننت‌های UI و همینطور redux برای مدیریت state در کل پروژه استفاده کردیم. 

 

خب کیت‌ها را به اختصار معرفی کردم. امیدوارم برای شما هم مفید باشند.  

نکته‌ی نهایی اینکه دغدغه‌ی اصلی ما از عمومی کردن این کیت‌ها فرار از لاکِ داخلی‌‌ست که بعد از مدتی هر تیم فنی گرفتار آن خواهد شد. کاملا طبیعی‌ست که بعد از گذشت مدت زمان طولانی هر تیمی به روشِ مرسوم خود فارغ از بهینه بودن یا نبودن عادت می‌کند. تنها چیزی که می‌تواند روش انجام کاری را بهبود بخشد آشنایی با روش‌های دیگر انجام آن کار و در واقع تغییر نوع نگاه است. 

پیشنهاد می‌کنم شما هم ساختار پروژه‌های مجموعه‌ی خودتان را در گیت‌هاب قرار دهید تا با ایده‌ی فضای آزاد، نکات مثبت و منفیِ راه و روش‌های مرسوم‌تان مشخص شود.