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

🔗 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

بیست و پنج (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

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

@frontdevir

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

#frontend

@frontdevir