رنگ و کنتراست توجه را به خود جلب می کند.

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

_credit ui-ux

#UI #UX

@frontdevir

همترازی چشم ها را هدایت می کند.

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

_credit ui-ux

#UI #UX

@frontdevir

You Don't Know JS

از کتاب های مهم منتشر شده ی در ارتباط با جاواسکریپت قطعا می توان به کتاب you don’t know js رسید که برای هر توسعه دهنده یا برنامه نویسی که با javascript مشغول به کار است مطالعه ی این کتاب توصیه می شود.

@frontdevir

تو ۵ دقیقه ری‌اکت رو مرور کنید.

🔗 https://dev.to/ericchapman/react-cheat-sheet-updated-may-2021-1mcd

#frontend

@frontdevir

🔥 JavaScript array cheat sheet

@frontdevir

پلاگین فیگما

میتونید لینک وبسایتی که دوست دارین رو بهش بدین و اون براتون فایل فیگمای لایه باز اون لندینگ رو
میسازه


🔗 https://www.figma.com/community/plugin/1159123024924461424/html.to.design

@frontdevir

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

🔰Tech interview handbook : https://github.com/yangshun/tech-interview-handbook
🔰Go : https://github.com/inancgumus/learngo
🔰Awesome interview : https://github.com/DopplerHQ/awesome-interview-questions
🔰JS Algorithms : https://github.com/TheAlgorithms/Javascript
🔰Js Algorithms and Data Structures : https://github.com/trekhleb/javascript-algorithms
🔰JS clean code : https://github.com/ryanmcdermott/clean-code-javascript
🔰Vue JS : https://github.com/sudheerj/vuejs-interview-questions
🔰HTML 5 : https://github.com/learning-zone/html-interview-questions
🔰React : https://github.com/learning-zone/react-interview-questions
🔰JS : https://github.com/learning-zone/javascript-interview-questions
🔰Angular : https://github.com/sudheerj/angular-interview-questions
🔰JS : https://github.com/sudheerj/javascript-interview-questions
🔰Front End : https://github.com/h5bp/Front-end-Developer-Interview-Questions
🔰Angular : https://github.com/Yonet/Angular-Interview-Questions
🔰System Design : https://github.com/shashank88/system_design
🔰Python : https://github.com/learning-zone/python-interview-questions
🔰Go : https://github.com/shomali11/go-interview
🔰Front End : https://github.com/khan4019/front-end-Interview-Questions
🔰30 seconds of interviews : https://github.com/30-seconds/30-seconds-of-interviews
🔰Full Stack : https://github.com/indy256/Full-stack-Developer-Interview-Questions-and-Answers
🔰React : https://github.com/Pau1fitz/react-interview
🔰Linux SysAdmin : https://github.com/chassing/linux-sysadmin-interview-questions
🔰Back End : https://github.com/arialdomartini/Back-End-Developer-Interview-Questions
🔰Reverse Interview : https://github.com/viraptor/reverse-interview
🔰JS : https://github.com/ganqqwerty/123-Essential-JavaScript-Interview-Questions
🔰Android : https://github.com/MindorksOpenSource/android-interview-questions
🔰Front End : https://github.com/h5bp/Front-end-Developer-Interview-Questions
🔰React : https://github.com/sudheerj/reactjs-interview-questions
🔰How Web works : https://github.com/vasanthk/how-web-works?ref=hackernoon.com
🔰Front End interview hand book : https://github.com/yangshun/front-end-interview-handbook?ref=hackernoon.com
🔰JS : https://github.com/sudheerj/javascript-interview-questions?ref=hackernoon.com
🔰JS : https://medium.freecodecamp.org/the-definitive-javascript-handbook-for-a-developer-interview-44ffc6aeb54e
🔰Vue : https://www.onlineinterviewquestions.com/vue-js-interview-questions/
🔰React : https://www.sitepoint.com/react-interview-questions-solutions/
🔰Front End : https://itnext.io/frontend-interview-cheatsheet-that-helped-me-to-get-offer-on-amazon-and-linkedin-cba9584e33c7
🔰Google Interview Warm up : https://grow.google/certificates/interview-warmup
🔰Interview Practices : https://pramp.com
🔰Data Science : https://github.com/ShuaiW/data-science-question-answer
🔰Front End : https://h5bp.github.io/Front-end-Developer-Interview-Questions
🔰HTML, CSS, JS : https://www.acefrontend.com
🔰Android : https://code.coursesity.com/android-interview-questions
🔰DevOps : https://github.com/Tikam02/DevOps-Guide
🔰Web 3 : https://github.com/noahliechti/web3-interview-preparation
🔰PHP : https://github.com/learning-zone/php-interview-questions
🔰Laravel : https://github.com/Devinterview-io/laravel-interview-questions
🔰PHP : https://github.com/learning-zone/php-interview-questions

سایت ها و ریپوزیتوری های این قسمت فقط اختصاص به یک موضوع ندارند و چندین فیلد رو شامل میشوند 👇
🔰https://workat.tech/practice
🔰https://github.com/FAQGURU/FAQGURU
🔰https://bigfrontend.dev
🔰https://github.com/kdn251/interviews
🔰https://www.fullstack.cafe
🔰https://github.com/ombharatiya/FAANG-Coding-Interview-Questions
🔰https://github.com/Olshansk/interview
🔰https://github.com/jwasham/coding-interview-university
🔰https://github.com/Olshansk/interview
🔰https://github.com/huihut/interview/blob/master/README_en.md


#InterviewRepo

Introduction to StyleX
StyleX is a simple, easy to use JavaScript syntax and compiler for styling web apps.
StyleX combines the strengths and avoids the weaknesses of both inline styles and static CSS. Defining and using styles requires only local knowledge within a component, and avoids specificity issues while retaining features like Media Queries. StyleX builds optimized styles using collision-free atomic CSS which is superior to what could be authored and maintained by hand.

https://stylexjs.com/


@frontdevir

توی React تغییرات Ref رو با useEffect
چک نکنید.

#react #hooks

@frontdevir

الگو های معماری نرم افزار:

-> MVC, MVP, MVI, MVVM and VIPER

@frontdevir

#DevOps vs NoOps

@frontdevir

آپدیت Tailwind

💢‌کلاس size هست، دیگه تموم شد اون دورانی که می خواستید هم width و height یکسان باشه باید دوتا کلاس می‌نوشتید. الان بجای w-5 h-5 می تونید راحت بنویسید size-5.
‌
💢‌سلکتور :has هستش که اضافه شده
‌
‌💢سلکتور direct child هست که بعضی جا برای یه سری کتاب خونه های ui که از Tailwind استفاده میکنند کاربردیه.
‌
‌برای اطلاعات بیشتر می تونید پست زیر مطالعه کنید
‌https://lnkd.in/d7EfJPhA

‌#react #css #tailwindcss #frontend

desc: Ali.A

@frontdevir

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

copy and rotate

https://www.figma.com/community/plugin/1003651932772848456

#figma
#ui

@frontdevir