یک هندبوک کاربردی و مفید در رابطه با برنامه نویسی فرانت اند که به نکته های مختلفی میپردازه ⚡️

👉 https://frontendmasters.com/guides/front-end-handbook/

#frontend #handbook
☕️ @CodeExplore

یک فرانت اند کار به چه چیزهایی نیاز داره؟📝

✅ صد در صد خیلی از شما دوستان توی حوزه فرانت فعالیت میکنید و یا در حال یادگیری هستید و یا هدفی برای ادامه مسیر دارید.

💡 سوالی که ممکنه خیلی از دوستان باهاش دست و پنجه نرم کنن ، اینه که برای فرانت کار شدن به چه دانشی نیاز داریم؟
چه معماری ها و قواعدی نیازه؟

قبل از اینکه وارد جزئیات بشم، در یه کلام بگم که هرچقد بیشتر یاد بگیرید موفق ترید! 🚀

ولی به طور جزئی تر یک برنامه نویس فرانت باید موارد زیر رو یاد بگیره:

🪐 شناخت الگوهای معماری مثال MVC,MVVM, MVT و ...
شاید بگید الگو و دیزاین طراحی وابسته به بک انده ، اما در همه الگو ها قسمتی وابسته به فرانته .پس شناخت کلیه معماری ها میتونه بهتون خیلی کمک کنه (حتی اگه معماری تغییر کنه به سرعت میتونید جایگزین نویسی کنید)



🌎 فرانت اند کارا حتما باید کار با api و REST APIs رو بلد باشن .فک نمیکنم نیازه باشه بگم چرا! اما میگم🤡
خیلی وقتا توی پروژه ها قراره api ساخته بشه و یا قراره داده از یک api خونده بشه پس دونستن این دانش یه گام شمارو جلو میندازه.


🌖 بخش مهم دیگه ایی که واقعا یه فرانت کار باید بلد باشه ، بخشه امنیته ! یک فرانت کار باید مفاهیم احراز هویت رو بلد باشه و همچنین باید درک و یادگیری کاملی از توکن ها ،کوکی ها و اصول امنیتی داشته باشه تا روزی روزگاری یه هکری کارو خراب نکنه🤡
(مثلا تا وقتی ندونید xss چیه ، خب نمیتونید سرویس امنی بسازید)


فعلا بخش اولو تموم میکنیم تا چشای نازتون خسته نشه 👽

#پست_پیشنهادی
#frontend #part1
☕️ @CodeExplore

یک فرانت اند کار به چه چیزهایی نیاز داره؟📝

به بخش دوم رسیدیم 🖼️

🌞 اینکه فرانت کار ui/ux بلد باشه خیلی خوبه، اما الزامی نیست. بجاش میتونم بگم یه فرانت کار باید بلد باشه داده هارو دسته بندی کنه و ساختار مناسبی بهش بده.
(نیاز به اموزش خاصی هم نداره ، فقط تمرینه!)
برای اینکه توضیح بالا رو درک کنید یه مثال ساده میزنم: فرض کنید رفتید یه سایت تبلیغاتی ، بدون اینکه بخواید کد بزنید، روی کاغذ بخش های مختلف و وابسطه بهم رو بنویسید (تا جایی که میتونید تمرین کنید که دقیقا چه اطلاعاتی از سمت فرانت به بک میره و بلعکس)


🌚 یه فرانت اند کار باید کَش کردن داده ها و بهینه سازی رو بلد باشه تا هم خودشو خوب نشون بده، هم سرعت کارشو!


🌕 مسئله بعدی تست نویس و مدیریت خطاست که حتما برای یه سنیور شدن ، نیاز دارید دیپ تر وارد این مباحث بشید و ابزار های مختلف و همچنین دیباگ کردن خطاهای مختلف رو بشناسید (بهتره انواع خطا رو سرچ کنید و روش دیباگشم بررسی کنید)

🌎 گام بعدی آشنایی با PWA و ویژگی هاشه و همچنین یادگیری اصول کلی شبکه ، مثل url ها , websocket , کد های وضعیت ، هدر ها و ...


⭐️ در آخر هم باید بگم یادگیری هیچ وقت تموم نمیشه. پس فقط دلتونو به چیزایی که گفتم خوش نکنید، هرچقدر بیشتر جستجو کنید در های جدیدی به روتون باز میشه. ولی مواردی که گفتم برای یه فرانت کار حدودا الزامیه! موفق و پیروز باشید ❤️

#پست_پیشنهادی
#frontend #part2
☕️ @CodeExplore

🟢معمولا تو طراحی فرانت اند نیاز میشه که بخواید از یسری Blob استفاده کنید توی بک گراند کار، که معمولا هم به شکل های مختلفی هستن و پیدا کردنشون ممکنه سخت باشه.
با استفاده از این سایت میتونید Blob های منحصر به فرد و یونیک بسازید طبق چیزی که خودتون نیاز دارید و برای پروژه هاتون استفاده کنید.
خروجی رو هم میتونید به شکل SVG و یا کد بگیرید.

🔗https://www.blobmaker.app/

#frontend #blob
☕️ @CodeExplore

کار فرانت اند و بک اند دقیقا چیه؟ 😏

⭐️ همونطور که توی عکس میبینید فرانتد اند بیشتر کار هاش سمت کاربره و بک اند بیشتر سمت سروره، در مورد عکس این رو هم بگم که لزومی نداره همه مواردی که برای فرانت گفتیم استفاده بشه،یا فقط همین موارد استفاده بشه، برای بک اند هم همینطور، پست با کامنت هاتون این پست رو کامل تر کنید ❤️

#frontend #backend
☕️ @CodeExplore

نقشه راه(DevOps) به زبان فارسی 😎

ترجمه از AliRadmanesh

1️⃣نقشه راه فرانت‌اند (Front-End) به زبان فارسی

2️⃣نقشه راه بک‌اند (Back-End) به زبان فارسی

3️⃣نقشه راه فرانت‌اند هم می تونین از گیت هاب ما دنبال کنید.

#roadmap #devops #frontend #backend
☕️ @CodeExplore

فیگما(Figma) دقیقا چیه؟ 💡

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

🟠یه ویژگی خیلی خفن Figma اینه که چند نفر می‌تونن همزمان روی یه پروژه کار کنن. فرض کن مثل Google Docs، هرکی تغییر بده، بقیه هم همون لحظه می‌بینن. اینطوری کار تیمی خیلی راحت‌تر و سریع‌تر پیش می‌ره. حتی می‌تونید روش کامنت بذارید و نظر بدید تا کاراتون دقیق‌تر بشه.

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

🔗لینک فیگما

#figma #frontend #design
☕️ @CodeExplore

درود بر و بچه های کدنویس 👋🏻
امروز یه رفیق پرسید: "داش، اگه الان می‌خواستی از صفر بیای تو دنیای وب، چیکار می‌کردی؟"
گفتم بذار یه راهنمای بنویسم واسه همه تازه‌واردا و اونایی که فکر می‌کنن تو لوپ گیر کردن. پس بزن بریم! (توجه کنید که من یه مسیر ساده از فرانت دارم میدم)

1️⃣ اول از همه، HTML و CSS رو یاد بگیر. اینا مث آب و نونن واسه وب. بدون اینا هیچی نمیشه ساخت!

2️⃣ بعدش برو سراغ جاوااسکریپت. این زبون شیرینه که سایتت رو از یه مانکن بی‌حرکت تبدیل می‌کنه به یه موجود زنده!

3️⃣ حالا که یاد گرفتی، وقتشه دست به کار شی. یه سایت ساده بساز. مثلاً یه صفحه شخصی که توش از خودت و علایقت بگی. یا اگه خیلی خفنی، یه بازی ساده طراحی کن. فقط یادت باشه قرار نیست تلگرام بسازی، پس سخت نگیر!

4️⃣ کم کم برو سراغ فریم‌ورک‌ها. React یا Vue.js خوبن واسه شروع. اینا مث ابزارای حرفه‌ای می‌مونن که کارتو راحت‌تر می‌کنن.

5️⃣ حالا دیگه وقتشه پروژه‌های گنده‌تر بزنی. یه اپلیکیشن وب بساز، تو پروژه‌های اوپن سورس شرکت کن. اینجوری هم یاد می‌گیری، هم یاد میدی!

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

یادگیری مث دوچرخه‌سواریه، هیچوقت تموم نمیشه. پس هی باید رکاب بزنی🤣

سعی نکن یه شبه ره صد ساله بری. قدم به قدم پیش برو.

هر روز یه چیز کوچیک بساز. اینجوری مخت روغن‌کاری میشه.

خودتو با بقیه مقایسه نکن. هرکی یه مسیر داره، تو فقط حواست به مسیر خودت باشه.

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

1️⃣ پروژه محور پیش برید:
به جای اینکه فقط آموزش ببینید، سعی کنید با هر مبحثی که یاد می‌گیرید یه پروژه کوچیک بسازید. مثلاً با HTML و CSS یه صفحه لندینگ بسازید، با جاوااسکریپت یه بازی ساده. اگه تونستید پروژه رو تموم کنید، یعنی به اندازه کافی یاد گرفتید پس به خودتون سخت نگیرید.

2️⃣ چالش‌های کدنویسی رو امتحان کنید:
سایت‌هایی مثل CodeWars یا HackerRank چالش‌های جالبی دارن. اگه تونستید چالش‌های سطح متوسط یه مبحث رو حل کنید، احتمالاً آماده‌اید برید سراغ مبحث بعدی.

3️⃣ به دیگران یاد بدید:
اگه بتونید یه موضوع رو به کسی دیگه توضیح بدید، یعنی خودتون خوب فهمیدید. سعی کنید تو انجمن‌ها به سؤال‌های دیگران جواب بدید.

4️⃣ مصاحبه‌های فنی رو چک کنید:
گاهی سؤال‌های مصاحبه‌های فنی رو بخونید. اگه حس کردید می‌تونید به اکثرشون جواب بدید، یعنی خوب پیش رفتید.

5️⃣ از منابع مختلف استفاده کنید:
فقط به یه منبع اکتفا نکنید. وقتی از چند منبع مختلف یه موضوع رو یاد گرفتید و حس کردید تکراری شده، احتمالاً وقت رفتن به مرحله بعده.

و مهم‌ترین نکته: یادتون باشه که "به اندازه کافی خوب" بهتر از "کامل" ه! وقتی حس کردید می‌تونید با یه تکنولوژی کار کنید و مشکلاتتون رو حل کنید، برید سراغ بعدی. تو راه یاد می‌گیرید!

خلاصه اینکه عشق کن با کدنویسی، لذت ببر از ساختن، و یادت نره گاهی هم یه آب به صورتت بزنی! 💦😀
حالا برو بترکون! 😀

#پست_پیشنهادی
#learn #loop #frontend
☕️ @CodeExplore

ابزار کاربردی برای فرانت اند، با این ابزار ها پادشاهی کن!

☄️در این مقاله قصد داریم سه ابزار کاربردی را به شما معرفی کنیم که می‌تواند کمک شایانی به توسعه‌دهندگان فرانت‌اند کند. این ابزارها شامل دو سایت و یک افزونه (Extension) هستند که بدون شک فرآیند طراحی و توسعه صفحات وب را برای شما ساده‌تر، سریع‌تر و حرفه‌ای‌تر می‌کنند.

🌕 برای مشاهده کامل مقاله کلیک کنید.

#frontend #site #extension
☕️ @CodeExplore

‏WebAssembly در فرانت‌اند: تحولی برای عملکرد بالاتر 🔥

📣‏WebAssembly (Wasm) یکی از جدیدترین تکنولوژی‌ها در دنیای وب هست که به توسعه‌ دهندگان امکان می‌ده تا کدهای سطح پایین و بهینه‌ای رو روی مرورگرهای وب اجرا کنن. این تکنولوژی برای برنامه‌هایی که به سرعت و عملکرد بالایی نیاز دارن، مثل بازی‌های وب و برنامه‌های محاسباتی سنگین، بسیار کاربردی هست. در این مقاله، به بررسی WebAssembly، مزایای آن در فرانت‌اند، و چگونگی استفاده از آن خواهیم پرداخت.

🌕 برای مشاهده کامل مقاله کلیک کنید.

#webassembelly #frontend #js #html #css #javascript #programming
☕️ @CodeExplore