https://virgool.io/feed/@mehdineysi10 فرانت‌اند دولوپر fa 2026-06-17 02:24:19 https://files.virgool.io/upload/users/128552/avatar/UXBoEL.jpg?height=120&width=120 https://virgool.io/@mehdineysi10 https://virgool.io/@mehdineysi10/8-essentials-skills-for-nodejs-developers-cmbia9eqeedc نودجی‎‌اس یکی از محبوب‌ترین تکنولوژی‌های سمت سرور می‌باشد که در سال‌های اخیر درخواست نیرو برای این تکنولوژی بسیار بالا رفته است. توی این پست در مورد هشت مهارت ضروری که هر توسعه دهنده نودجی‌اس باید داشته باشه، صحبت میکنیم. 1. نودجی‌اسزمانی که شروع به یادگیری یک تکنولوژی میکنید، سعی کنید نحوه کار اون تکنولوژی رو درک کنید و خیلی زود سراغ فریم‌ورک‌ها یا ابزارهای اون تکنولوژی نرید. همچنین باید با ماژول‌های مهم و کاربردی نودجی‌اس کار کرده باشید. از جمله ماژول‌های: Buffer، Events، File system، HTTP، OS، Path، Process، Stream و ...2. فریم‌ورکاستفاده از فریم‌ورک‌ها باعث میشه که خیلی از کارها رو خودمون از صفر ننویسیم و از کدهای آماده اون فریم‌ورک استفاده کنیم. یکی از محبوب ترین فریم‌ورک‌های نودجی‌اس، express هست. فریم‌ورک express خیلی سریع و مینیمال هستش که کلی پکیج برای این فریم‌ورک نوشته شده که میتونیم توی پروژه‌های خودمون استفاده کنیم.3. امنیتامنیت در وب همیشه یه مورد خیلی مهم برای وبسایت‌ها و وب اپلیکیشن‌ها بوده. ریسک‌های امنیتی متعددی وجود داره از جمله: Injection، XXE، BAC، XSS و ... که باید به صورت عمیق یادشون بگیرید.با نحوه احراز هویت امن آشنا بشید. passport یک میان‌افزار محبوب برای احراز هویت با طرح‌های مختلف هستش که میتونید ازش استفاده کنید.همچنین با نحوه رمزگذاری در bcrypt که نام یک الگوریتم هشینگ هست آشنا بشید. برای این کار یک پکیجی در npm وجود داره به همین اسم bcrypt که این کارو براتون انجام میده.ضمنا دستور npm audit نیازمندی‌های پروژه را از نظر آسیب‌پذیریِ امنیتی (security vulnerability) بررسی و ارزیابی می‌کند و اگر مشکلی وجود داشت، اون رو گزارش میده.4. فرانت‌انداگرچه عمده‌ای از کار یک توسعه دهنده نودجی‌اس در بک‌اند هست اما بعضی مواقع ممکنه پیش میاد که نیاز باشه یک سری تغییرات فرانت رو هم انجام بدید. یا کلا شما باید با فرانت آشنا باشید و بدونید که توی فرانت هم چه اتفاقاتی می‌افته. سه زبان اصلی در فرانت‌اند وجود داره که باید یاد بگیرید. HTML و CSS و JavaScript. همچنین فریم‌ورک‌هایی برای جاوااسکریپت ساخته شدن که فرایند ساخت یک وبسایت یا وب اپلیکیشن رو ساده‌تر میکنن. فریم‌ورک‌ها یا کتابخونه‌هایی مثل React و Vuejs5. پایگاه دادهکدهای نودجی‌اس شما برای ساخت یک وب اپلیکیشن کافی نیست و باید یک پایگاه داده برای ذخیره اطلاعات داشته باشید. گزینه‌های زیادی برای پایگاه داده‌ها وجود داره اما اغلب بهترین راه برای تعامل اونها در نودجی‎‌اس استفاده از ORM ها هستش.یکی از گزینه‌های محبوب Sequelize هست که به شما یک API ثابت میده تا بدون توجه به نوع پایگاه داده SQL که به اون متصل شدید، ارتباط برقرار کنید. حتی شما میتونید در صورت نیاز خیلی ساده پایگاه دادتون رو عوض کنید. این فوق العادس.اگر گزینه NoSQL رو ترجیح میدید، Mongoose یک ODM برای MongoDB هست. اینجا شما باید براساس نوع پروژتون پایگاه داده مناسب رو انتخاب کنید.6. مدیریت پکیج‌هابرای مدیریت کردن پکیج‌ها در نودجی‌اس ما دو ابزار داریم. یکی npm و یکی هم yarn که yarn یک سری قابلیت‌های جالبی داره مثل: حالت آفلاین، عملکرد شبکه، حالت ارتجاعی شبکه، استفاده از ایموجی‌ها در کنسول که از هر کدوم که دوست داشتید میتونید استفاده کنید.7. پلتفرم‌های ابریشما نمی‎‌خواید وب اپلیکیشن خودتون رو از سیستم شخصیتون ارائه بدید، پس بهتره با یک پلتفرم ابری که میتونه در اون مستقر کنید راحت بشید. اسم‌های بزرگ همیشه گزینه‌های خوبی هستن، مثل AWS یا Azure، اما بعضی وقتا ممکنه پیکربندی زیرساخت بیشتری نسبت به آنچه که می‎‌خواید با اون برخورد کنید، نیاز داشته باشه. خیلی از ارائه دهندگان ابری کوچکتر، خودشون رو با یک تجربه راحت توسعه دهنده سازگار می‎کنن. در حال حاضر، Heroku و Netlify تنها تعدادی از گزینه های زیادی هستن که میتونید برنامه‌های نودجی‎‌اس تون رو به راحتی روی پلتفرم ابری مستقر کنید.8. سورس کنترلهر برنامه نویسی باید کار با سورس کنترل رو بلد باشه، اونم سورس کنترل گیت. گیت یک سورس کنترل رایگان و منبع باز هست که همه ازش استفاده میکنن. به عنوان یه برنامه نویس باید به صورت حرفه‌ای این ابزار رو یاد بگیرید. با دستورات مهم این ابزار مثل: commit، checkout، merge، push، pull، و ... آشنا بشید.سخن پایانیخلاصه سعی کنید توی هر کدوم از این موارد متخصص بشید و یک زمانی رو برای یادگیری هر کدوم در نظر بگیرید. برای برنامه ریزی هم میتونید به این شکل عمل کنید. مثلا سه ماه رو در نظر بگیرید، توی این سه ماه یک موضوع رو به صورت عمیق یادبگیرید و یک موضوع هم به صورت سطحی. برای مثال من در فصل پاییز تمرکز اصلیم رو روی نودجی‌اس میذارم و یک نیم نگاهی هم به دیتابیس‌ها میندازم و توی این مدت در موردشون مطالعه میکنم. مهدی نیسی مهدی نیسی Mon, 16 Aug 2021 11:39:05 +0430 https://virgool.io/@mehdineysi10/prop-types-hrh79nuicpig یکی از محبوب‌ترین پکیج‌ها برای چک کردن تایپ prop ها، پکیج prop-types هستش. توی این مقاله میخوایم یاد بگیریم که چطور باید از prop-types استفاده کنیم و در مورد یک سری نکات مهم هم صحبت کنیم.آموزش استفاده از prop-typesنحوه استفاده از prop-typesدر مرحله اول باید پکیج prop-types رو نصب کنیم. بهتره توی حالت devDependencies نصب کنید چون قراره فقط توی حالت توسعه استفاده بشه.# using npm npm install prop-types --save-dev # using yarn yarn add prop-types --devنحوه استفاده از پکیج prop-types به این شکله که اول از هم باید اون رو توی کامپوننت مد نظر ایمپورت کنیم. بعد از اون مقدار propTypes کامپوننت رو تعریف میکنیم و در نهایت تایپ همه prop ها رو ست میکنیم.import PropTypes from 'prop-types' function MyComponent(props) {} MyComponent.propTypes = { optionalFunc: PropTypes.func, optionalString: PropTypes.string, requiredFunc: PropTypes.func.isRequired, requiredString: PropTypes.string.isRequired, }انواع دیتا تایپ‌هاپکیج prop-types از تمامی تایپ‌های اصلی جاوااسکریپت پشتیبانی میکنه.MyComponent.propTypes = { optionalArray: PropTypes.array, optionalBool: PropTypes.bool, optionalFunc: PropTypes.func, optionalNumber: PropTypes.number, optionalObject: PropTypes.object, optionalString: PropTypes.string, optionalSymbol: PropTypes.symbol, }زمانی که دارید یک المنت ری اکت به عنوان پراپ دریافت میکنید باید از این نوع استفاده کنید.MyComponent.propTypes = { // A React element (ie. <MyComponent />) optionalElement: PropTypes.element, }اگر مقدار پراپ یکی از این دیتا تایپ ها باشه میتونید از node استفاده کنید.MyComponent.propTypes = { // Anything that can be rendered: numbers, strings, elements or an array // (or fragment) containing these types optionalNode: PropTypes.node, }یکی از بهترین قابلیت‌های prop-types، استفاده از enum ها هستش. یعنی زمان مقدار دهی فقط میتونید این مقادیر تعریف شده رو بدید.MyComponent.propTypes = { optionalEnum: PropTypes.oneOf(['News', 'Photos']), }بعضی مواقع پیش میاد که یک پراپ از چند دیتا تایپ باشه. مثلا یا string باشه یا number.MyComponent.propTypes = { optionalUnion: PropTypes.oneOfType([ PropTypes.string, PropTypes.number, ]), }زمانی که نیازه یک پراپ حتما مقدار دهی بشی باید از isRequired استفاده کنیم. یعنی حتما باید این پراپ رو وارد کنه.MyComponent.propTypes = { requiredFunc: PropTypes.func.isRequired, }نکات مهم در مورد prop هااسم های کوتاه و با معنی انتخاب کنید.// Bad longAssPropNameThatEveryoneMustTypeForever // Good propNameاز اسم هایی استفاده کنید که توی dom هم داره استفاده میشه.// Bad classes // Good className // Bad whenClicked // Good از استاندارد camelCase استفاده کنید. بولین ها: isOpen - hasValue - canExecuteتوابع: - onCustomEventName - handleCustomEventNameآرایه ها: از جمع استفاده کنید// Bad loading // Good isLoading // Bad addProduct // Good handleAddProduct // Bad list // Good itemsحتما کامنت بنویسید. چرا؟ به دو دلیل:ممکنه یک برنامه نویسی قراره کد شما رو توسعه بده. وقتی بدونه که این پراپ چه تایپی یا تایپ هایی رو میتونه قبول کنه خیلی سریع تر میتونه فرایند توسعه رو انجام بده.بعدا هم میتونید خیلی راحت برای کدتون با استفاده از نوشتن کامنت، داکیومنت درست کنید. با استفاده از ابزارهایی مانند react-docgenیک مثال تمیزبیایم یک مثال تمیز از کامپوننتی که با prop-types توسعه داده شده رو ببینیم.import PropTypes from 'prop-types' export default function MyComponent(props) { const handleOnClick = event => { props. && props.(event) } return ( <div ={handleOnClick}> Wow nice component dude! {/* Do other stuff */} </div> ) } MyComponent.propTypes = { /** @type {object} This is the profile data containing user data */ profileData: PropTypes.object, /** @type {boolean} If true, the component should be in a loading state */ isLoading: PropTypes.bool, /** @type {array} Items being passed in as an array */ items: PropTypes.array, /** @type {function} Function triggered when component is clicked */ : PropTypes.func, } مهدی نیسی مهدی نیسی Mon, 14 Jun 2021 02:39:43 +0430 https://virgool.io/@mehdineysi10/add-sass-to-react-projects-kzsryhzqe6kq اضافه کردن Sass به پروژه‌های Reactاضافه کردن Sass یکی از اولین کارهایی هستش که توسعه دهندگان هنگام شروع پروژه انجام میدن. با CSS هم میشه استایل داد ولی Sass خیلی قابلیت‌ها به ما میده. از جمله:متغیرها (variables)تودرتو (nesting)عملیات ریاضی (math)میکسین‌ها (mixins)توابع (functions)ایمپورت (import)و ...مراحل اضافه کردن Sass نصب کردن node-sassتبدیل پسوندهای .css به .scssایمپورت کردن فایل sass به کامپوننت های React1. نصب کردن node-sassگام اول نصب کردن پکیج محبوب node-sass هستش.# using npm npm install node-sass # using yarn yarn add node-sass2. تبدیل پسوند‌های .css به .scssتمام فایلهایی که پسوند css رو دارن رو به scss تبدیل کنید.تبدیل پسوندهای .css به .scss3. ایمپورت کردن فایل sass به کامپوننت‌های Reactتوی هر کامپوننتی که نیاز داشتید، کافیه فایل sass رو ایمپورت کنیدimport './App.scss';در نهایت یک بار سرور رو ری‌استارت کنید و تمام ?# using npm npm start # using yarn yarn start مهدی نیسی مهدی نیسی Sun, 13 Jun 2021 00:22:42 +0430 https://virgool.io/nextjs/%D8%B5%D9%81%D8%AD%D8%A7%D8%AA-%D8%AF%D8%B1-nextjs-kwqdlm7r2ip6 توی این پست با هم یاد میگیریم که چطور باید صفحات رو توی next.js تعریف کنیم و دو نوع از پیش رندرها که SSG و SSR هستند رو یاد بگیریم.صفحات در nextjsتوی next.js هر صفحه یک کامپوننت ری اکت هستش که باید توی فولدری به نام pages قرار بگیره. اسم فایلهایی که تعیین میکنید خیلی مهمه چون قراره برای route استفاده بشه.مثلا اگر توی فولدر pages یک فایل درست کردید به اسم about.js، خروجی این فایل رو میتونید توی مسیر about/ ببینید. همونطور که متوجه شدید دیگه نیازی به پکیج هایی مثل react-router نداریم و کل سیستم مسیریابی رو next.js برای ما مدیریت میکنه که این فوق العادس.function About() { return <div>About</div> } export default Aboutچطور مسیرهای داینامیک درست کنیم؟خوبیه next.js اینه که از مسیرهای داینامیک هم پشتیبانی میکنه. برای مثال اگه یک فایلی بسازید توی pages/posts/[id].js و بعد توی مرورگر میتونید به این شکل posts/1 یا posts/2 بهش دسترسی داشته باشید.قبل از رندرشدن یا Pre-renderingبه صورت پیش فرض، next.js تمام صفحات رو pre-render میکنه. یعنی بجای اینکه همه کارها رو جاوااسکریپت سمت کاربر انجام بده، next.js از قبل برای هر صفحه یک کد html درست میکنه که این هم برای پرفورمنس برنامه خیلی خوبه و هم از نظر سئو یک نکته مثبت حساب میشه.هر کد html ساخته شده نیاز به حداقل کد جاوااسکریپت داره. وقتی که یک صفحه توسط مرورگر لود میشه، کدهای جاوااسکریپت اجرا میشن و اون صفحه به صورت کاملا interactive تبدیل میشه.به این فرایند اصطلاحا hydration گفته میشه.دو شکل Pre-renderingتوی next.js به دو شکل میتونیم صفحات رو pre-render کنیم: یکی به صورت Static Generation و یکی دیگه به صورت Server-side Rendering. فرق این دو تا توی ساخت کد html هستش.Static Generation: کد html در زمان build-time ساخته میشه.Server-side Rendering: کد html توی هر ریکوئست ساخته میشه.نکته مهم اینه که next.js این امکان رو میده از هر کدوم توی هر صفحه استفاده کنیم. شاید برای بعضی از صفحات نیاز باشه از SSG استفاده کرد و برای بعضی صفحات دیگه از SSR.نسل استاتیک یا Static Generationاگر برای یک صفحه‌ای از static generation استفاده میکنید، کد html زمان build ساخته میشه. یعنی توی حالت production، زمانی که دستور next build رو میزنید کد html ساخته میشه و بعد توی هر درخواست از این کد استفاده میشه.صفحات بدون دیتاتوی این نوع pre-render، هم میتونیم صفحاتی استاتیک با دیتا یا بدون دیتا داشته باشیم. بیاید یک مثال با هم ببینیم.function About() { return <div>About</div> } export default Aboutهمونطور که می‌بینید این کد نیازی به دیتاهای خارجی نداره و زمان build یک کد ساده html ساخته میشه.صفحات با دیتاتوی بعضی از صفحات شاید نیاز باشه که از دیتاهای external استفاده بشه. توی next.js دو تا سناریو داریم که ممکنه یکی یا هر دو استفاده بشه.اگر محتوای صفحه شما به دیتای خارجی نیاز داره: از getStaticProps استفاده کنید.اگر مسیرهای صفحه شما به دیتای خارجی نیاز دارن: از getStaticPaths استفاده کنید.1. سناریو اول: محتوای صفحه شما به دیتای خارجی نیاز دارهصفحه وبلاگ شما ممکنه نیاز داشته باشه تا لیست پست های وبلاگ رو از CMS بگیره.// TODO: Need to fetch `posts` (by calling some API endpoint) // before this page can be pre-rendered. function Blog({ posts }) { return ( <ul> {posts.map((post) => ( <li>{post.title}</li> ))} </ul> ) } export default Blogبرای fetch کردن این دیتا ها قبل از رندرشدن صفحه، باید یک تابع به نام getStaticProps رو صدا بزنیم. این تابع زمان build اجرا میشه و دیتا از رو به عنوان props به Blog میده.function Blog({ posts }) { // Render posts... } // This function gets called at build time export async function getStaticProps() { // Call an external API endpoint to get posts const res = await fetch('https://.../posts') const posts = await res.json() // By returning { props: { posts } } the Blog component // will receive `posts` as a props at build time return { props: { posts } } } export default Blog2. سناریو دوم: مسیرهای صفحه شما به دیتای خارجی نیاز دارنهمونطور که گفتم next.js از مسیرهای داینامیک هم پشتیبانی میکنه. برای مثال اگه یک فایلی بسازید توی pages/posts/[id].js و بعد توی مرورگر میتونید به این شکل posts/1 یا posts/2 بهش دسترسی داشته باشید.با این حال، هر کدوم از این id ها ممکنه به یک سری دیتاهای خارجی نیاز داشته باشه. مثلا میخواید توی مسیر posts/1 دیتاهای پست یک رو نشون بدید.پس path های صفحات شما، نیاز به دیتاهای خارجی دارن. برای اینکار باید توی next.js یک تابعی به نام getStaticPaths رو به صورت async اکسپورت کنید.// This function gets called at build time export async function getStaticPaths() { // Call an external API endpoint to get posts const res = await fetch('https://.../posts') const posts = await res.json() // Get the paths we want to pre-render based on posts const paths = posts.map((post) => ({ params: { id: post.id } })) return { paths, fallback: false } }همچنین توی pages/posts/[id].js باید یک تابع دیگه ای رو به نام getStaticProps به صورت async اکسپورت کنید که این تابع بر اساس id، پست مورد نظر رو بر میگردونه.function Post({ post }) { // Render post } export async function getStaticPaths() { // ... } export async function getStaticProps({ params }) { // params contains the post `id` // If the route is like /posts/1, then params.id is 1 const res = await fetch(`https://.../posts/${params.id}`) const post = await res.json() // Pass post data to the page via props return { props: { post } } } export default Postاگر که این بخش رو کامل متوجه نشدید نگران نباشید، چون توی پست آینده میخوام در مورد data fetching صحبت کنم که اونجا کامل مباحث رو درک میکنید.چه زمانی از Static Generation استفاده کنیم؟پیشنهاد خود تیم next.js استفاده از static generation هستش، چرا چون صفحه شما یک بار ساخته میشه و توسط CDN کش میشه، که اون رو بسیار بالا میبره.شما میتونید از static generation برای انواع صفحات استفاده کنید. از جمله:صفحات بازاریابیپست های وبلاگلیست محصولات فروشگاهساخت مستنداتاگر میخواید صفحه شما مرتبا بروز بشه و توی هر درخواست دیتاهای جدیدی بیان، استفاده از static generation ایده خوبی نیستش.رندر سمت سرور یا Server-side Renderingهمچنین بهش SSR یا Dynamic Rendering هم میگن.اگر صفحه‌ای از SSR استفاده میکنه، کد html توی هر درخواست ساخته میشه.برای استفاده از Server-side Rendering توی صفحه، باید یک تابعی به نام getServerSideProps رو به صورت async اکسپورت کنیم. این تابع توسط سرور توی هر درخواست اجرا میشه.به عنوان مثال، فرض کنید که صفحه شما نیاز داره که دیتای اون مرتبا از api گرفته بشه و به نمایش دربیاد. میتونید getServerSideProps رو بنویسید که دیتا به عنوان props به Page بده.function Page({ data }) { // Render data... } // This gets called on every request export async function getServerSideProps() { // Fetch data from external API const res = await fetch('https://.../data') const data = await res.json() // Pass data to have page via props return { props: { data } } } export default Pageهمونطور که میبیند، getServerSideProps خیلی شبیه به getStaticProps هستش، با این تفاوت که getServerSideProps توی هر درخواست اجرا میشه ولی getStaticProps فقط توی زمان build اجرا میشه.خلاصهتوی این پست در مورد دو نوع pre-rendering صحبت کردیم:Static Generation: کد html زمان build ساخته میشه و توی هر درخواست استفاده میشه. صفحاتی که از Static Generation استفاده میکنن، میتونن با استفاده از getStaticProps و getStaticPaths دیتای خارجی رو دریافت کنن.Server-side Rendering: کد html توی هر درخواست ساخته میشه. برای ساخت صفحاتی SSR باید از تابع getServerSideProps استفاده کنید. از اونجایی که SSR پرفورمنس کمتری نسبت به SSG داره، در صورت لزوم از اون استفاده بکنید. مهدی نیسی مهدی نیسی Sun, 09 May 2021 21:28:24 +0430 https://virgool.io/nextjs/what-is-nextjs-e8abqiqowc2y توی این پست یاد میگیریم که next.js چیه و چطور میتونیم از اون استفاده کنیم.Next.js: The React Framework for Productionبرای ساخت یک وب اپلیکیشن کامل با ری اکت از ابتدا، باید یک سری موارد رو هم در نظر بگیریم:کدها رو باید با استفاده از یک bundler مثل webpack بسته بندی کنیم و با استفاده از کامپایلری مثل babel بتونیم transform کنیم.باید بهینه سازی های پروداکشن مثل code splitting رو انجام بدیم.ممکنه بخوایم بعضی از صفحات رو برای پرفورمنس و سئو pre-render کنیم. یا از server-side rendering یا client-side rendering استفاده کنیم.برای اتصال برنامه ری اکت به data store، ممکنه مجبور باشید چند خط کد server-side بنویسید.نکست جی‌اسنکست جی‌اس راه حلی برای تمام این مشکلات است. نکست جی‌اس یک فریم ورک بر پایه ری اکت است که توسط vercel ساخته شده.لیستی از ویژگی های داخلی نکست جی‌اس:یک سیستم routing مبتنی بر صفحات (pages)پشتیبانی از server-side rendering و static generation برای pre-renderتقسیم کدها به صورت خودکار برای لودکردن سریع صفحاتپشتیبانی داخلی از css و sassپشتیبانی از fast refresh در محیط توسعهقابلیت api routes برای ساخت endpoint ها با توابع بدون سرورستاپ کردن پروژهبرای ساخت یک پروژه نکست ‌جی اس میتونید از یک ابزار به نام create-next-app استفاده کنید.npx create-next-app project-name --use-npmبعد از اینکه پروژه با موفقیت ساخته شد، وارد فولدر مورد نظرتون بشید.cd project-nameدر نهایت پروژه رو در حالت توسعه (development) اجرا کنید.npm run devاینم اولین پست من در رابطه با next.js بود. سعی میکنم در این سری آموزشی بتونم هر آنچه که یاد میگیرم رو به طور ساده بیان کنم تا شما هم بتونید راحت یاد بگیرید. مهدی نیسی مهدی نیسی Fri, 07 May 2021 23:52:38 +0430 https://virgool.io/junior-coders/learn-css-variables-famuxljgypb3 توی این پست در مورد چرایی استفاده از متغیرها و نحوه استفاده از اونها آشنا میشید. همچنین نحوه تغییر مقادیر این متغیرها با جاوااسکریپت رو هم یاد میگیرید.متغیرها در css چرا باید یاد بگیریم؟اینکه چرا باید متغیرها در css رو یاد بگیریم دلایل مختلفی داره. یکی از مهم ترین دلایلش اینه که دیگه کد تکراری نداریم. هر موقع نیاز شد مقدار یک متغیر رو تغییر بدیم، کافیه یک بار عوض کنیم و در نهایت توی کل پروژه عوض میشه و این خیلی توسعه یک پروژه رو آسون کرده.تعریف کردن یک متغیراول از همه باید قلمرو استفاده از این متغیرها رو مشخص کنیم. اگر میخواید به صورت global دردسترس باشه، کافیه اون رو توی المنت root (که معمولا تگ html هستش) قرار بدید.برای تعریف متغیر، مقل پراپرتی های css کافیه نام گذاری کنید و بعد مقدارش رو بدید. فقط یک نکته ای هم رو هم بگم که قبل از اسم پراپرتی، باید دو تا دش (-) بزارید.تعریف کردن متغیر به صورت گلوبالنحوه استفادهبرای استفاده از متغیرهایی که تعریف کردیم، کافیه از یک تابع به نام var استفاده کنیم. به این شکله که تابع var رو فراخوانی میکنیم و بعد متغیر رو به عنوان آرگومان بهش میدیم.نحوه استفاده از متغیرها در cssمتغیرهای لوکالزمانی که میدونیم این متغیر فقط توی همین محدوده نیازه که استفاده بشه و جاهای دیگه بهش احتیاج نداریم، از متغیرهای لوکال یا محلی استفاده میکنیم.برای مثال، ما یک رنگ داریم که فقط توی کلاس alert استفاده میشه. برای همین ما میایم توی کلاس alert تعریف میکنیم و بعد از این متغیر برای children یا فرزندهای این المنت استفاده میکنیم.نحوه تعریف و استفاده از متغیرهای لوکالواکنش گرایی با متغیرهایکی دیگه از مهم ترین مزایای استفاده از متغیرها در css دسترسی به DOM هستش. این مورد توی Sass یا Less نیست، چون وقتی کامپایل میکنیم، به کد css معمولی تبدیل میشن.پس این خیلی میتونه بهمون توی responsive کردن وبسایت کمک کنه، چون توی سایز های مختلف میتونیم مقدار متغیرها رو عوض کنیم و این توی کل وبسایت عوض میشه.واکنش گرایی با متغیرها در cssدسترسی با جاوااسکریپتبعضی وقتا نیازه ه با جاوااسکریپت مقدار یک متغیر رو عوض کنیم. با این دو روش میشه این کارو انجام داد.دسترسی به متغیرهای css با جاوااسکریپت - روش اولدسترسی به متغیرهای css با جاوااسکریپت - روش دوماگر به مباحث فرانت اند علاقه مند هستید و دوست دارید هر روز چیزای جدید و باحال یاد بگیرید پیج اینستاگرامی junior.coders رو فالو کنید. مهدی نیسی مهدی نیسی Sun, 18 Apr 2021 10:38:25 +0430 https://virgool.io/@mehdineysi10/how-to-be-a-professional-react-developer-qobjlmdpslbo توی این پست در مورد 4 نکته که به شما کمک میکنه تا توسعه دهنده حرفه ای React بشید، صحبت میکنم.1. استفاده از PropTypesاگه تازه شروع به یادگیری React کرده باشید، ممکنه ندونید PropTypes چیه! اما اگه بخوام یک توضیح کوتاه بدم اینه که PropTypes یک کتابخونه‌ای برای React هستش که وظیفه چک کردن prop ها رو داره.برای هر کامپوننت مشخص میکنید که prop هایی که میگیرن از چه نوعی باشن و اگر یک نوع دیگه ای داده بشه، PropTypes ارور میده.const Button = ({ text, color}) => { return <button className={`button ${color}`}>{text}</button> } Button.propTypes = { text: PropTypes.string.isRequired, color: PropTypes.oneOf(['blue', 'red', 'green']), }لینک داکیومنت PropTypes2. استفاده از کامپوننت‌های تابعی و Hook هاکامپوننت های تابعی و Hook ها آینده React هستن. اگر پروژه جدیدی رو شروع میکنید سعی کنید که به صورت functional component پیاده سازی کنید و از Hook ها استفاده کنید.من شخصا functional component رو خیلی دوست دارم، چون واقعا کد تمیز، ساده و کمتری رو مینویسید وهمچنین lifecycle ها خیلی ساده‌تر شدن نسبت به class component.استفاده کردن از functional component نشون میده که شما بروز هستید و با جامعه پیش میرید.3. کامپوننت‌هاتون رو کوچیک و قابل استفاده مجدد کنیدیکی از اصلی‌ترین ویژگی‌های React داشتن همه چیز توی یک کامپوننت هست. کامپوننت های شما باید کوچیک باشن. مثلا یک کامپوننت داریم به اسم WhatsApp، درسته؟ توی این کامپوننت باید کامپوننت‌های دیگه ای هم مثل Button و Voice و Message و ... داشته باشیم.همه چیز باید خیلی کوچیک و همچنین قابل استفاده مجدد باشه. نمیگم که همه کامپوننت‌ها حتما باید دوبار استفاده بشن، منظورم اینه کامپوننت‌هایی مثل Button یا Modal باید reusable باشن.مثلا کامپوننت Button میتونه همچین prop هایی رو قبول کنه تا reusable باشه:رنگ (color)سایز (size)وضعیت (status)همچنین کامپوننت‌های reusable رو میتونید توی فولدرهایی مثل UI یا Elements بزارید.4. پراپ‌ها رو Destructure کنیدبا destructure کردن prop ها، کد خیلی تمیزتر و خواناتری خواهید داشت.// Bad const App = (props) => { return ( <> <h1>{props.title.heading}</h1> <button ={props.click}>Click me!</button> </> ) } // Good const App = ({ title, click }) => { const { heading } = title return ( <> <h1>{heading}</h1> <button ={click}>Click me!</button> </> ) }امیدوارم از این پست لذت برده باشید و چیزی یاد گرفته باشید. مهدی نیسی مهدی نیسی Sun, 11 Apr 2021 13:55:42 +0430 https://virgool.io/@mehdineysi10/how-to-detect-a-click-outside-an-element-t2glajpso2n7 یکی از کاربردی ترین الگوها در جاوااسکریپت، تشخیص کلیک روی یک المنت است. به صورت مثال یک dropdown داریم که میخواهیم زمانی که بیرون dropdown کلیک شد، بسته شود.ساختار HTML<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> <div id=&quotflyout-example&quot class=&quotflyout&quot> <h5 class=&quotflyout-title&quot>This could be a flyout;</h5> <div id=&quotflyout-debug&quot class=&quotflyout-debug&quot></div> <div class=&quotflyout-buttons&quot> <button class=&quotbutton button-outline&quot>Cancel</button> <button class=&quotbutton&quot>OK</button> </div> </div> </body> </html>برای تشخیص کلیک در خارج از یک المنت، بهتر است یک listener به document اضافه کنید. در نتیجه توی حلقه اصلی، DOM رو از المنت کلیک شده تا document سرچ میکنه تا به container اون المنت برسه.کد جاوااسکریپت این برنامه با ویژگی‌های ES6 به این شکل هستش:document.addEventListener(&quotclick&quot, event => { const flyoutEl = document.getElementById(&quotflyout-example&quot); let targetEl = event.target; // المنت کلیک شده do { if (targetEl == flyoutEl) { // اینجا کاربر داخل المنت کلیک کرده، پس نیازی نیست کاری انجام بدید return document.getElementById(&quotflyout-debug&quot).textContent = &quotClicked inside!&quot } // دنبال المنت مورد نظر برید targetEl = targetEl; } while (targetEl); // بیرون المنت کلیک شده، پس هر کاری دوست داشتید انجام بدید document.getElementById(&quotflyout-debug&quot).textContent = &quotClicked outside!&quot });توجه کنید این کد در مرورگرهای مدرن اجرا می‌شود. اگر میخواهید در مرورگرهای قدیمی هم اجرا شود، از کد زیر استفاده کنید.document.addEventListener(&quotclick&quot, function(event) { var flyoutEl = document.getElementById(&quotflyout-example&quot); var targetEl = event.target; do { if (targetEl == flyoutEl) { // اینجا کاربر داخل المنت کلیک کرده، پس نیازی نیست کاری انجام بدید return document.getElementById(&quotflyout-debug&quot).textContent = &quotClicked inside!&quot } // دنبال المنت مورد نظر برید targetEl = targetEl; } while (targetEl); // بیرون المنت کلیک شده، پس هر کاری دوست داشتید انجام بدید document.getElementById(&quotflyout-debug&quot).textContent = &quotClicked outside!&quot }); مهدی نیسی مهدی نیسی Sat, 10 Apr 2021 20:34:21 +0430 https://virgool.io/@mehdineysi10/an-introduction-to-javascript-g7rgsxuzu8rc آموزش جاوا‌اسکریپتبیایید ببینیم که در جاوا‌اسکریپت چه‌چیزهای ویژه‌ای وجود دارد، چه‌چیزهایی می‌توانیم با آن بسازیم و با سایر تکنولوژی‌ها آشنا شویم.جاوا‌اسکریپت چیست؟جاوا‌اسکریپت در ابتدا برای زنده کردن صفحات وب ایجاد شده است. به برنامه های این زبان اسکریپت گفته می‌شود. می‌توان آنها را درست در HTML یک صفحه‌ وب نوشت و با بارگیری صفحه به طور خودکار اجرا می‌شوند. اسکریپت‌ها به صورت متن ساده ارائه و اجرا می شوند. آنها برای اجرا به کامپایلر احتیاج ندارند.از این جنبه، جاوا‌اسکریپت با زبان دیگری به نام جاوا بسیار متفاوت است.چرا به آن جاوا‌اسکریپت می‌گویند؟وقتی جاوا‌اسکریپت ساخته شد، در ابتدا نام آن لایو‌اسکریپت (LiveScript) بود. اما جاوا در آن زمان بسیار محبوب بود، بنابراین تصمیم گرفته شد که قرار دادن یک زبان جدید به عنوان برادر کوچکتر جاوا کمک کند.اما با تکامل، جاوا‌اسکریپت به زبانی کاملاً مستقل با مشخصات خاص خود به نام ECMAScript تبدیل شد و اکنون هیچ ارتباطی با جاوا ندارد.امروزه جاوا‌اسکریپت می‌تواند نه تنها در مرورگر، بلکه در سرور یا در هر دستگاهی که برنامه خاصی به نام موتور جاوا‌اسکریپت (JavaScript engine) دارد نیز اجرا شود.این مرورگر دارای یک موتور جاسازی شده است که گاهی اوقات ماشین مجازی جاوا‌اسکریپت (JavaScript virtual machine) نامیده می شود.موتورهای مختلف code names متفاوت دارند. مثلا:موتور V8 - در کروم و اپراموتور SpiderMonkey - در فایرفاکسموتور Chakra - در اینترنت اکسپلوررموتور ChakraCore - در مایکروسافت اجو موارد دیگرخوب است که نام های بالا را به خاطر بسپارید زیرا در مقاله های توسعه دهندگان در اینترنت استفاده می شود. ما نیز از آنها استفاده خواهیم کرد. به عنوان مثال، اگر ویژگی X توسط V8 پشتیبانی می شود، احتمالاً در Chrome و Opera کار می کند.موتورها چگونه کار می کنند؟موتورها پیچیده هستند. اما اصول ساده است.موتور (تعبیه شده در مرورگر) اسکریپت ها را می خواند (تجزیه می کند)سپس اسکریپت را به زبان ماشین تبدیل می کند (کامپایل می کند)و سپس کد ماشین (machine)، خیلی سریع اجرا می شودموتور در هر مرحله از فرآیند بهینه سازی را اعمال می کند. حتی اسکریپت کامپایل شده را هنگام اجرا تماشا (watches) می کند، داده هایی را که از آن می گذرد تجزیه و تحلیل (analyzes) می کند و کد ماشین (machine code) را بر اساس این دانش بیشتر بهینه می کند.جاوا‌اسکریپت درون مرورگر چه کاری می تواند انجام دهد؟جاوا‌اسکریپت مدرن یک زبان برنامه نویسی ایمن است. دسترسی کم سطح به RAM یا CPU را فراهم نمی کند، زیرا در ابتدا برای مرورگرهایی ایجاد شده است که نیازی به آن ندارند.قابلیت های جاوا‌اسکریپت تا حد زیادی به محیطی که در آن در حال اجرا است بستگی دارد. به عنوان مثال، Node.js از توابع پشتیبانی می کند که به جاوا‌اسکریپت امکان خواندن/نوشتن فایلهای دلخواه، انجام درخواست های شبکه و غیره را می دهد.جاوا‌اسکریپت درون مرورگر می تواند تمام کارهایی را که مربوط به دستکاری صفحه وب، تعامل با کاربر و سرور وب است انجام دهد.به عنوان مثال، جاوا‌اسکریپت درون مرورگر قادر است:تگ های HTML جدیدی به صفحه اضافه کنید، محتوای موجود و همچنین style ها را تغییر دهید.به اقدامات کاربر واکنش نشان دهید، با کلیک ماوس، حرکات pointer، فشار دادن کلیدها اجرا کنید.درخواست ها را از طریق شبکه به سرورهای از راه دور ارسال کنید، فایل ها را دانلود و آپلود کنید (اصطلاحاً فناوری های AJAX و COMET)کوکی ها را دریافت و تنظیم کنید، از بازدید کننده (visitor) سوالاتی بپرسید، پیام ها را نشان دهید.داده ها را در سمت کلاینت (local storage) بخاطر بسپارید.جاوا‌اسکریپت چه کاری نمی تواند در مرورگر انجام دهد؟توانایی های جاوا‌اسکریپت در مرورگر به دلیل امنیت کاربر محدود است. هدف این است که از دسترسی یک صفحه وب بد به اطلاعات خصوصی یا آسیب رساندن به داده های کاربر جلوگیری کند.نمونه هایی از این محدودیت ها عبارتند از:جاوا‌اسکریپت در یک صفحه وب نمی تواند فایل های دلخواه را روی هارد دیسک بخواند/بنویسد، آنها را کپی یا برنامه ها را اجرا کند. دسترسی مستقیمی به عملکردهای سیستم عامل ندارد.مرورگرهای مدرن اجازه کار با فایلها را می دهند، اما دسترسی محدود است و فقط درصورتیکه کاربر اقدامات خاصی مانند دراپ کردن فایل ها در مرورگر یا انتخاب آن از طریق تگ <input> را انجام دهد، دسترسی محدود است.روش هایی برای تعامل با دوربین/میکروفون و سایر دستگاه ها وجود دارد، اما آنها به مجوز صریح (explicit permission) کاربر نیاز دارند. بنابراین یک صفحه فعال شده با جاوا‌اسکریپت ممکن است به زبانی دوربین وب را فعال نکرده، محیط اطراف را رصد کرده و اطلاعات را به NSA ارسال کند.تب ها/window های مختلف به طور کلی از یکدیگر اطلاع ندارند. بعضی اوقات این کار را می کنند، به عنوان مثال وقتی یک پنجره از جاوا‌اسکریپت برای باز کردن پنجره دیگر استفاده می کند. اما حتی در این حالت، جاوا‌اسکریپت از یک صفحه ممکن است به صفحه دیگر دسترسی نداشته باشد (اگر از سایت های مختلف (از دامنه، پروتکل یا پورت دیگری) باشد.این سیاست تک منبع (Same Origin Policy) نامیده می شود. برای حل این مسئله، هر دو صفحه باید در مورد تبادل داده توافق کنند و حاوی یک کد جاوا‌اسکریپت خاص است که آن را مدیریت می کند. ما در آموزش به آن خواهیم پرداخت.این محدودیت ، مجدداً برای ایمنی کاربر است. صفحه ای از http://anysite.com که یک کاربر باز کرده است نباید بتواند به یک تب مرورگر دیگر با آدرس http://gmail.com دسترسی پیدا کند و اطلاعات را از آنجا بدزدد.جاوا‌اسکریپت می تواند به راحتی از طریق شبکه با سروری که صفحه فعلی از آن آمده ارتباط برقرار کند. اما توانایی آن در دریافت داده از سایت ها/دامنه های دیگر فلج است. گرچه ممکن است، اما از طرف دور به توافق صریح (بیان شده در سرصفحه های HTTP) نیاز دارد. یک بار دیگر، این یک محدودیت ایمنی است.امنیت جاوا‌اسکریپت در مرورگردر صورت استفاده از جاوا‌اسکریپت در خارج از مرورگر، به عنوان مثال در سرور، چنین محدودیتی وجود ندارد. مرورگرهای مدرن همچنین به پلاگین/افزونه هایی اجازه می دهند که مجوزهای طولانی را درخواست کنند.چه چیزی جاوا‌اسکریپت را منحصر به فرد می کند؟حداقل سه چیز جالب در مورد جاوا‌اسکریپت وجود دارد:ادغام کامل با HTML و CSSکارهای ساده به سادگی انجام می شود.پشتیبانی توسط همه مرورگرهای اصلی و بصورت پیش فرض فعال می شود.جاوا‌اسکریپت تنها فناوری مرورگری است که این سه مورد را با هم ترکیب می کند.این همان چیزی است که جاوا‌اسکریپت را منحصر به فرد می کند. به همین دلیل گسترده ترین ابزار برای ایجاد رابط های مرورگر است.همانطور که گفته شد، جاوا‌اسکریپت همچنین امکان ایجاد سرور، برنامه های موبایل و غیره را فراهم می کند.زبانهای بیش از جاوا‌اسکریپتسینتکس جاوا‌اسکریپت متناسب با نیازهای همه نیست. افراد مختلف ویژگی های مختلفی می خواهند.این انتظار می رود ، زیرا پروژه ها و الزامات برای همه متفاوت است.بنابراین اخیراً انبوهی از زبانهای جدید ظاهر شده است که قبل از اجرا در مرورگر به جاوا‌اسکریپت تبدیل می شوند.ابزارهای مدرن transpilation را بسیار سریع و شفاف می کنند، در واقع به توسعه دهندگان این امکان را می دهد تا به زبان دیگری کد بزنند و آن را به صورت خودکار under the hood تبدیل کنند.نمونه هایی از این زبان ها:کافه اسکریپت (CoffeeScript) یک سینتکس شیرین برای جاوا‌اسکریپت است. این دستور مختصر را معرفی می کند و به ما امکان می دهد کد روشن تر و دقیق تری بنویسیم. معمولاً توسعه دهندگان روبی آن را دوست دارند.تایپ اسکریپت (TypeScript) بر ساده سازی "تایپ دقیق داده ها" متمرکز شده است تا توسعه و پشتیبانی از سیستم های پیچیده را ساده کند. توسط مایکروسافت ساخته شده است.فلو (Flow) همچنین تایپ داده را اضافه می کند، اما به روشی متفاوت. توسعه یافته توسط فیس بوک.دارت (Dart) یک زبان مستقل است که دارای موتور مخصوص به خود است که در محیط های غیر مرورگر (مانند برنامه های موبایل) کار می کند، اما همچنین می تواند به جاوا‌اسکریپت منتقل شود. ساخته شده توسط گوگل.برایتان (Brython) یک سرویس دهنده Python به جاوا‌اسکریپت است که به شما امکان می دهد برنامه را در Python خالص و بدون جاوا‌اسکریپت بنویسید.تعداد بیشتری وجود دارد. البته، حتی اگر از یکی از زبانهای قابل انتقال استفاده کنیم، باید جاوا‌اسکریپت را نیز بدانیم تا واقعاً بفهمیم چه کاری انجام می دهیم.خلاصهجاوا‌اسکریپت در ابتدا به عنوان یک زبان فقط برای مرورگر ایجاد شد، اما اکنون در بسیاری از محیط های دیگر نیز از آن استفاده می شود.امروزه جاوا‌اسکریپت از موقعیت منحصر به فردی به عنوان گسترده ترین زبان مرورگر با یکپارچه سازی کامل در HTML و CSS برخوردار است.زبانهای زیادی وجود دارند که به جاوا‌اسکریپت انتقال یافته و ویژگیهای خاصی را ارائه می دهند. توصیه می شود پس از تسلط بر جاوا‌اسکریپت، حداقل به طور خلاصه نگاهی به آنها بیندازید.برگرفته از: www.javascript.info مهدی نیسی مهدی نیسی Mon, 02 Nov 2020 13:05:29 +0330 https://virgool.io/@mehdineysi10/5-javascript-projects-you-should-build-as-junior-frontend-developer-nc2pxhourowx توسعه دهنده فرانت اندوقتی به دنبال کار اول به عنوان توسعه دهنده Junior Front-end هستید، نشان دادن تجربه خود به عنوان یک برنامه نویس بسیار سخت است. پروژه های شما به عنوان زمین بازی برای یادگیری مهارت های جدید به ندرت کیفیت کد خوبی را ارائه می دهند. اگر برای اولین بار چیزی بنویسید نوشتن کد کامل غیرممکن است!به همین دلیل است که من شما را تشویق می کنم تا یکبار دیگر از مهارتهای خود در تمرین استفاده مجدد کنید. این بار نیز با در نظر گرفتن کیفیت کد، در اینجا لیستی از نمونه پروژه هایی وجود دارد که می توانید برای نشان دادن مهارت های خود بسازید.1. ساخت یک قالب وبلاگ با HTML و CSSقالب وبلاگ با html و cssهنگامی که تازه شروع به یادگیری توسعه front-end می کنید، مهم است که دانش خود را در مورد HTML و CSS ادغام کنید. ساخت یک قالب وبلاگ ایده خوبی برای اولین پروژه بزرگ شماست. در مورد طراحی نگران نباشید، منابع زیادی به صورت آنلاین در دسترس هستند.الزامات پروژه:ساخت صفحه اصلی (homepage)، صفحه مختص هر پست (single post page) و تماس با ماسعی کنید از CSS Grid و Flexbox استفاده کنیدحتما باید سایت شما واکنش گرا (responsive) باشدموارد اضافه تر:اضافه کردن اسلایدر (slider)به جای lorem ipsum از متن واقعی استفاده کنید2. یک بازی tic-tac-toe با جاوااسکریپت خالص بسازیدبازی tic-tac-toe با جاوااسکریپتساخت یک بازی در یک مرورگر می تواند یک تمرین عالی برای آزمایش مهارت های جاوااسکریپت شما باشد. شما باید به رویدادهای کاربر واکنش نشان دهید، با DOM تعامل کنید و داده های بازی را ذخیره کنید. این همچنین یک پروژه عالی برای نشان دادن به همکاران و خانواده شما است!الزامات پروژه:صفحه خوش آمدید با نام و نماد ورودی (symbol input) برای هر بازیکنرندر کردن یک نماد (symbol) هنگامی که کاربر بر روی سلول (cell) خالی کلیک می کندنمایش برندهموارد اضافه تر:ساخت یک جدول امتیاز و ذخیره آن در local storageاستفاده از انیمیشن ها (animations)3. اشتراک گذاری مکان با جاوااسکریپت خالص و سرویس Mapsاشتراک گذاری مکان با جاوااسکریپت خالص و سرویس Mapsیک برنامه ساده که در آن می توانید مکان خود را با دوست خود به اشتراک بگذارید می تواند هم یک پروژه طلبکارانه باشد و هم یک ابزار بسیار مفید که می توانید استفاده کنید. در این پروژه، از جاوااسکریپت برای تعامل با سرویس های خارجی نقشه (از قبیل Google Maps یا OpenStreetMap) استفاده خواهید کرد.الزامات پروژه:نمایش مکان فعلی شما روی نقشهساخت دکمه اشتراک (Share) که لینکی با مکان فعلی شما ایجاد می کندموارد اضافه تر:به اشتراک گذاری مکان به صورت realtime، شما باید آن را ذخیره کنید و هر چند ثانیه یک بار آن را از یک پایگاه داده خارجی بخوانید (مثلا Firebase)نمایش موقعیت مکانی به صورت realtime در صفحه دوست شما، زمانی که دسترسی به آن داشته باشد3. ساخت TV Series Tracker با یکی از فریم ورک های جاوااسکریپت (Vuejs - Angular - React یا موارد دیگر)tv series trackerاین پروژه به هر طرفدار مجموعه تلویزیونی کمک می کند تا قسمت های جدید را دنبال کند. این یک فرصت عالی برای استفاده از یک فریم ورک جاوااسکریپت است که با آن راحت هستید.الزامات پروژه:جستجوی مجموعه های تلویزیونی با استفاده از API خارجی (به عنوان مثال TVMaze API)اضافه کردن مجموعه های تلویزیونی به لیست پیگیری (tracking list)نمایش لیست دنبال شده سریال های تلویزیونی همراه با جدیدترین تاریخ پخش قسمتنمای تک صفحه با جزئیات بیشتر درباره سریال های تلویزیونیذخیره لیست پیگیری در local storageموارد اضافه تر:ارسال ایمیل یا نمایش اعلان ها (notifications) زمانی که قسمت جدید منتشر می شود3. ساخت برنامه بودجه خانگی با یکی از فریم ورک های جاوااسکریپت (Vuejs - Angular - React یا موارد دیگر)برنامه بودجه خانگیایجاد برنامه بودجه خانگی یک بررسی نهایی برای مهارت های شما به عنوان یک توسعه دهنده Junior Frontend خواهد بود. این توانایی شما در ایجاد فرم ها و ذخیره اطلاعات را بررسی می کند، اما همچنین می تواند به شما در صرفه جویی در هزینه کمک کند!الزامات پروژه:افزودن یک دسته (category)اضافه کردن هزینه با نام (name)، مقدار (amount) و دسته (category)جمع بندی هزینه های ماهانه تقسیم شده به دسته هاذخیره اطلاعات در یک پایگاه داده خارجی (به عنوان مثال Firebase)موارد اضافه تر:بخش های ثبت نام، ورود و مدیریت نقش کاربران (role)خلاصهپروژه های جانبی یک روش عالی برای نشان دادن مهارت های شما برای به دست آوردن شغل اول به عنوان Junior Front-end Developer است. به کارفرمای خود بگویید که تاکنون چه چیزی هایی ساخته اید. آنها نه تنها به صفحه وب نگاه می کنند بلکه کد شما را نیز تجزیه و تحلیل می کنند، بنابراین از تمیز بودن آن اطمینان حاصل کنید.قبل از شروع ساخت چیز جدید، لیستی از نیازهای MVP (حداقل کالای با ارزش) را ایجاد کنید. در طول توسعه، ویژگی های جالب تری را که برنامه شما می تواند داشته باشد، کشف خواهید کرد، فقط کافی است آن را به لیست خوبی اضافه کنید. این به شما کمک می کند تا پروژه را طبق برنامه به پایان برسانید.به یاد داشته باشید، لازم نیست که آن مثالها را 1 به 1 تقلید کنید. در صورت تمایل جزئیات مورد علاقه خود را تغییر، اضافه یا حذف کنید. اگر پروژه های قدیمی تری دارید که از آنها برای یادگیری مهارت های جدید استفاده کرده اید، همیشه می توانید آن را بازسازی کرده و در یک نمونه کارها قرار دهید.برگرفته از www.slawkolodziej.com مهدی نیسی مهدی نیسی Mon, 02 Nov 2020 00:06:49 +0330 https://virgool.io/@mehdineysi10/front-end-project-folder-structure-ki04vsseoiau نحوه ساختار بندی پوشه ها در یک پروژه front-endسلام، امروز قصد دارم شما رو با نحوه ساختار بندی پوشه ها در یک پروژه front-end آشنا کنم.من شما رو تشویق میکنم به انجام همان کارهایی که انجام نمی دید که میتونه به روشی که دوست دارید این کار رو بهبود ببخشید.نحوه ساختار بندی پوشه ها در یک پروژه front-endپوشه cssتوی این پوشه شما تمامی فایل های css خود را قرار میدهید. اگر که از sass استفاده می کنید پس فایل های transpile شده خود را اینجا قرار میدهید.معمولا فایل اصلی هر پوشه را main می نامند.پوشه imgاین پوشه مختص به تصاویر است. شما میتوانید آیکون ها، پس زمینه ها، آواتار و ... را قرار دهید.پوشه jsاین پوشه برای نوشتن custom script ها است و میتوانید script های خود را در اینجا قرار دهید.پوشه scssاگر که از sass استفاده می کنید پس می دونید که ساختار بندی توی sass خیلی مهمه. در اینجا یک ساختار بندی به شما خواهم گفت که بسیاری از طراحان وب از این ساختار استفاده می کنند.فایل base: در این فایل شما تمام متغیرها (variable)، میکسین ها (mixin)، ریست استایل ها (reset styles) و ... را قرار می دهید.فایل components: به احتمال خیلی زیاد از css framework ها استفاده می کنید که شاید یکی از اونها bootstrap باشه.component یعنی چی؟ در واقع همان کلاس هایی هستند که به تعداد زیاد و در جاهای مختلف از اونها استفاده می کنیم. مثل: btn, card, badge و خیلی موارد دیگه.فایل layouts: این فایل برای نوشتن استایل های مختص به همان layout است. مثلا شما یک بخش header یا footer دارین که باید توی این فایل بنویسید.در واقع میشه گفت استایل هایی که به طور کلی به یک صفحه (page) میدید.فایل main: توی این فایل کافیه فقط با دستور import، فایل های بالا رو import کنید.وارد کردن فایل ها scss در mainدر نهایت تنها فایل main.scss به css تبدیل خواهد شد.پوشه vendorتوی این پوشه شما framework هایی که در این پروژه استفاده کردید رو قرار میدهید. مثلا jquery و bootstrap.معمولا طراحان در حالت توسعه (development) از CDN ها استفاده نمی کنند، فایل های اصلی رو دانلود می کنند و توی پروژه قرار میدن.فایل های HTMLدر نهایت فایل های html خود را که نام گذاری درستی هم می کنید را قرار میدهید. مانند:index, about, blogاین هم شد از ساختار بندی یک پروژه front-end که دیدیم با ساختار بندی درست و منظم، هم تمرکزمون بالا میره و هم انگیزه بیشتری پیدا میکنیم برای انجام کارهای خلاقانه تر.افزونه Material Iconاگر که از ادیتور vs code استفاده می کنید، خواستم بگم که یک افزونه به نام material icon theme وجود داره که برای پوشه هاتون یک آیکون بسیار زیبا قرار میده که پیشنهاد میکنم حتما ازش استفاده کنید.امیدوارم از این مقاله نهایت استفاده رو برده باشین و اگر که لذت بردین خوشحال میشم با دوستان خود به اشتراک بزارید تا اونها هم بتونن استفاده کنن و با هم پیشرفت کنیم. مهدی نیسی مهدی نیسی Thu, 16 Jul 2020 12:21:19 +0430 https://virgool.io/@mehdineysi10/pc-rpzyjfjjaqmh تمرین برنامه نویسیدر این مقاله با سه گام اصلی برای تمرین کردن برنامه نویسی و ماندگار کردن موضوعات در ذهنمان آشنا خواهیم شد.1.دفتر یادداشت داشته باشیداولین نکته داشتن دفتر یادداشت می باشد. در دفتریادداشت خود فرمول و تعریف موضوعات (مثل آرایه ها و حلقه) را بنویسید و مدام به آنها نگاه کنید و برای این فرمول ها نیز توضیحات بنویسید. (سعی کنید با سه رنگ مشکی_قرمز_آبی باشد)کدها را در نوت پد بنویسید، هم میتوانید قدرت املای خود را تقویت کنید و هم در سریع ترین زمان ممکن میتوانید تمرین بکنید.بعد از تمرین کردن، سراغ IDE خود بروید (مثلا Visual Studio) و کدهایی که در نوت پد نوشته اید را تست کنید. سپس پروژه های کوچک برای خود تعریف بکنید.در مورد کدهایی که یاد گرفته اید در سطح اینترنت تحقیق بکنید. مثلا استاد در مورد متغیرها صحبت کرده است اما موضوع برای شما قابل درک نبود. بهترین راه این است که در سطح اینترنت مطالعه و تحقیق بکنید.قبل از دیدن جلسه ی بعدی آموزش، کدهای جلسات قبل را مرور و تمرین بکنید. (در حد 20 دقیقه)2.چیزهایی را که یادگرفته اید را به دیگران آموزش دهیداین روش برای تقویت موضوعاتی است که یاد گرفته اید، و خیلی خوب است که به دوستان و آشنایان خود برنامه نویسی را به آنها رایگان آموزش دهید.3.پروژه های شخصی تعریف کنیددر نهایت که روی تمام موضوعات متخصص شدید، وقت آن رسیده که پروژه های شخصی درست کنید. مثلا: ماشین حساب، دفتریادداشت، دفترچه تماس و...جمع بندیامیدوارم بتوانید خوب تمرین کنید و در آینده ی نزدیک یک برنامه نویس موفق شده باشید. مهدی نیسی مهدی نیسی Fri, 28 Feb 2020 20:28:50 +0330 https://virgool.io/fboard/developer-features-c0qc18lkxent Developer1.مفاهیم ابتدایی را دقیق بلد باشدکسانی که مفاهیم و اساس برنامه نویسی را به صورت دقیق یادگرفته باشند، لازم نیست برای دوره آموزشی ، مقدمات را از نو مشاهده بکند، ولی اگر کسی این مقدمات را سطحی یادگرفته باشد در آینده با مشکل مواجه می شود.مثال: من در دوره ی آموزش سی شارپ پیشرفته شرکت کرده ام و استاد در رابطه با شی گرایی صحبت میکند، خوب اگر من با شی گرایی آشنا نباشم، درک این موضوع بسیار سخت می باشد، بنابراین حتما این موضوع را مد نظر قرار بگیرید.2.تجزیه و تحلیلخیلی وقت ها برای انجام پروژه ها باید قدرت تجزیه و تحلیل داشته باشیم تا بتوانیم پروژه ی خود را با بالاترین کیفیت ارائه بدهیم. مثلا پروژه کتابخانه، ما باید بدانیم که پروژه کتابخانه به چه چیز هایی نیاز دارد.3.الگوریتم نویسییکی دیگر از ویژگی های برنامه نویس موفق الگوریتم نویسی می باشد. در ساده ترین تعریف الگوریتم یعنی قدرت حل مسئله به صورت گام به گام.اگر شما پروژه ی خود را به بخش های کوچک تقسیم کنید و بتوانید پروژه را با یک الگوریتم پیش ببرید کار شما بسیار ساده خواهد بود.4.بروز بودن برنامه نویسبحث بعدی بروز بودن برنامه نویس می باشد. مثلا یک دوره ی آموزشی خریداری کرده است و بعد از این دوره فکر می کند دیگر نیاز به مطالعه نیست و همه چیز را در آن دوره یادگرفته است، که این یک باور غلط می باشد.پیشنهاد من به شما این است در هفته بین 7 الی 14 ساعت زمان برای آپدیت کردن خود کنار بگذارید.5.تغییرویژگی مهم برنامه نویس موفق این است که از تغییر نمی ترسد و به راحتی بر روی زبان های دیگر می تواند سویچ کند. مثلا یکی از دوستان زبان visual basic کار می کرد و از اینکه بر روی زبان سی شارپ سویچ کند ترس داشت، چرا چون پایه و اساس را دقیق بلد نبود و موضوع اول را فراموش نکنید تا بتوانید این ویژگی را نیز به خودتان اختصاص دهید.6.عملگرا بودناین موضوع در برنامه نویس های موفق بسیار دیده می شود مثلا یک ایده به ذهنشان آمده است و سریع آن را پیاده سازی می کند.اجازه دهید مثالی بزنم برای کسانی که هنوز وارد برنامه نویسی نشده اند، بعضی از دوستان نیز این ویژگی را دارند مثلا سریع یک دوره آموزشی خریداری می کنند و هر روز تمرین می کنند (بین 5 الی 8 ساعت) و در عرض 6 ماه به یک برنامه نویس موفق تبدیل می شوند.7.خلاقیت و نوآوریبحث بعدی خلاقیت و نوآوری است که همراه با برنامه نویسی می آید. شما میتوانید با تست کردن کدها یعنی با روش دیگر و بهینه تر آن پروژه را ارائه دهید، ماشین که نیست بگیم الآن تصادف میکنم خسارت به ماشین وارد می شه، کده. پس کدها را تست کنید و تا جایی که میتوانید پروژه های خوب را بررسی کنید و از آنها ایده بگیرید و همچنین بحث آزمون و خطا را فراموش نکنید.8.عجول نباشیدیکی از ویژگی های دیگر برنامه نویس های موفق عجول نبودن است، که برعکس آن دیگر افراد میخواهند برنامه نویسی را در یک روز یا یک ماه یادبگیرند. دوستان در برنامه نویسی به هیچ عنوان عجول نباشید شما با هدف گذاری می توانید بسیار ساده به آن هدف خود برسید.9.یادگیری از دیگراناین موضوع بسیار مفید و کاربردی می باشد که از دیگران یاد بگیریم. هیچ وقت قانون درخواست را فراموش نکنید و هر کجا ایرادی داشتید از دیگران بپرسید و یادبگیرید.10.ایجاد روابط و گرفتن پروژهاین یکی مهم ترین ویژگی می باشد که میتوانید با ایجاد روابط پروژه های قلمبه سلمبه دریافت کنید.تا چند وقت دیگر در این باره یک مقاله منتشر خواهم کرد که چگونه رابطه ی کاری ایجاد بکنیم و پروژه های خوب دریافت بکنیم.جمع بندیاین ها مهم ترین ویژگی های برنامه نویس موفق بودند که توانستم این مطالب را در اختیار شما قرار بدهم مهدی نیسی مهدی نیسی Thu, 13 Feb 2020 14:11:55 +0330