MentorDev

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

📈 منتور جت منتورت رو پیدا کن و آینده شغلیت رو ‌مطمئن تر کن! اولین پلتفرم منتورینگ آنلاین در ایران. کاملا رایگان - برای همه، منتور و منتی ها. 🔗 https://mentorjet.org

بیست و پنج (25)مقاله برای ایجاد پایه و اساس قوی درفرانت اند : 1) Typed Array: https://lnkd.in/dtAq5CJP 2) Array Buffers: https://lnkd.in/gjfznEJz 3) DataView: https://lnkd.in/gvtr26Pp 4) Blob Data: https://lnkd.in/gPt-yZ2W 5) Web Sockets: https://lnkd.in/gpTft3xy 6) Streams: https://lnkd.in/gcnGCem3 7) WebRTC: https://lnkd.in/g-FSpNsd 8) Http/2 protocol: https://lnkd.in/gYR9nvye 9) QUIC protocol: https://lnkd.in/gEYxjGU4 10) Media Stream: https://lnkd.in/geAxHt-F 11) Intersection Observer: https://lnkd.in/gP4sW_Zr 12) Performance Observer: https://lnkd.in/gePh55wS 13) Mutation Observer: https://lnkd.in/gfeFa9VQ 14) Resize Observer: https://lnkd.in/gjhMntVh 15) iframes: https://lnkd.in/gXWCBrX9 16) Web Cookies: https://lnkd.in/gPMUKfyJ 17) IndexedDB: https://lnkd.in/gvtTY_Yi 18) Clipboard API: https://lnkd.in/gHDNYjy9 19) File Reader: https://lnkd.in/gFA2s5jN 20) Web Workers: https://lnkd.in/g5ZifwMA 21) Web Vitals: https://lnkd.in/dMiAF9Rh 22) Memory Profiling: https://lnkd.in/gqXMguVP 23) Canvas API: https://lnkd.in/gW4dD_VP 24) WebGL: https://lnkd.in/gCa_y73y 25) Web Animations: https://lnkd.in/gWGM7i6j source Aron M #frontend @frontdevir

با این پلاگین تو فیگما میتونید یه شیپ رو به صورت دایره ای با تعداد مشخص کپی بگیرید. copy and rotate https://www.figma.com/community/plugin/1003651932772848456 #figma #ui @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

#DevOps vs NoOps @frontdevir

توی React تغییرات Ref رو با useEffect چک نکنید. #react #hooks @frontdevir

جابجایی State، یکی از ساده‌ترین راه‌ها برای جلوگیری از رندر نشدن اجزای پر هزینه است . @frontdevir

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

در گیت هاب، ریپوزیتوری های بسیار جالبی وجود داره، که میتونه سطح آمادگیتون برای مصاحبه ها رو بالاتر ببره. 🔥نقاط ضعفت در مصاحبه ها رو به نقطه قوتت تبدیل کن. 🔰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 : http://pramp.com 🔰Data Science : http://github.com/ShuaiW/data-science-question-answer 🔰Front End : http://h5bp.github.io/Front-end-Developer-Interview-Questions 🔰HTML, CSS, JS : https://www.acefrontend.com 🔰Android : http://code.coursesity.com/android-interview-questions 🔰DevOps : http://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 🔰http://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

پلاگین فیگما میتونید لینک وبسایتی که دوست دارین رو بهش بدین و اون براتون فایل فیگمای لایه باز اون لندینگ رو میسازه 🔗 https://www.figma.com/community/plugin/1159123024924461424/html.to.design @frontdevir

🔥 JavaScript array cheat sheet @frontdevir

تو ۵ دقیقه ری‌اکت رو مرور کنید. 🔗 https://dev.to/ericchapman/react-cheat-sheet-updated-may-2021-1mcd #frontend @frontdevir

همترازی چشم ها را هدایت می کند. همترازی بخشی از اسکلت طرح است که طبق آن عناصر در یک طرح قرار می گیرند، و مشخص می کند که عناصر بصری(متن یا تصویر)، به شکل دلخواه و تصادفی در یک ترکیب قرار نمی گیرند. به عنوان مثال، در یک صفحه معمولی که متن آن در سمت چپ ترازبندی شده است، اشیاء موجود در صفحه مشترکا در حاشیه سمت چپ قرار می گیرند. _credit ui-ux #UI #UX @frontdevir

رنگ و کنتراست توجه را به خود جلب می کند. همانطور که عناصر بزرگتر از عناصر کوچکتر مهمتر تلقی می شوند، رنگهای روشن معمولاً نسبت به انواع کم رنگ توجه بیشتری را به خود جلب می کنند. به عنوان مثال، اگر یک جمله از متن با یک رنگ روشن برجسته شود، بلافاصله توجه خوانندگان را به خود جلب می کند. _credit ui-ux #UI #UX @frontdevir