#Frontend_Skill
#FrontEnd
#AngularJS
#TypeScript
فریم ورک انگولار (منظور 2 به بالا)
🔴#Angular2

چرا انگولار؟
1- جز پر طرفدار ترین نیاز بازار کار در ایران و دنیا
2- یادگیری آسان و ساده
بیشتر در
https://goo.gl/RN2XeC

چگونه انگولار را یاد بگیرم؟
راستش خودم آن را در خلال یک پروژه به تدریج یادگرفتم! که تجربه ای شیرین و لذت بخش بود. اما سعی کنید از همین الان با هدف ساخت نمونه کار خوب و قوی خود را وارد چالش یادگیری انگولار دو کنید. مثلا یک نسخه ساده از Gmail بسازید.

چه چیزهایی را باید یاد بگیرم؟

1- جاوااسکریپت
همان طور که در قسمت قبل گفتیم. آشنایی با ES6 کار شما را آسان تر می کند. البته کمی هم آشنایی با npm , webpack مفید خواهد بود.
#JavaScript

2- تایپ اسکریپت
زبانی است که هم انگولار را با آن توسعه داده اند و هم برای توسعه دهندگان پیشنهاد می شود که آن را یاد بگیرند. قول می دهم زمانی که با آن آشنا شوید عاشقش خواهید شد!
#Typecript

🌟http://www.dotnettips.info/learningpaths/details/40

3- انگولار
زمانی که مهارت های حداقلی را در موارد بالا کسب کردید وقتش رسیده است که انگولار را یاد بگیرید. چون انگولار در حال تغییر است بهترین منبع آموزش سایت خودش است.

🌟https://angular.io/docs/ts/latest/guide/learning-angular.html
⭐️http://www.dotnettips.info/learningpaths/details/44

یا آموزش های ویدیویی لیندا و یودمی و ... :

http://git.ir/tag/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-angular-2/

#Frontend_Skill
#Frontend_Skill_Angular

⚫️ راهنمای جامع برای یادگیری توسعه سمت کاربر

فریم ورک 🅰️ انگولار (منظور 2 به بالا)
🔴#Angular2
@ABlueDeveloper

چرا انگولار؟
1- جز پر طرفدار ترین نیاز بازار کار در ایران و دنیا
2- یادگیری آسان و ساده
بیشتر در
https://goo.gl/RN2XeC
@ABlueDeveloper
چگونه انگولار را یاد بگیرم؟
سعی کنید از همین الان با هدف ساخت نمونه کار خوب و قوی خود را وارد چالش یادگیری انگولار دو کنید. مثلا یک نسخه ساده از Gmail بسازید.

چه چیزهایی را باید یاد بگیرم؟

1- جاوااسکریپت
همان طور که در قسمت قبل گفتیم. آشنایی با ES6 کار شما را آسان تر می کند. البته کمی هم آشنایی با npm , webpack مفید خواهد بود.
@ABlueDeveloper

2- تایپ اسکریپت
زبانی است که هم انگولار را با آن توسعه داده اند و هم برای توسعه دهندگان پیشنهاد می شود که آن را یاد بگیرند. قول می دهم زمانی که با آن آشنا شوید عاشقش خواهید شد!
#Typecript

🌟http://www.dotnettips.info/learningpaths/details/40

3- انگولار
زمانی که مهارت های حداقلی را در موارد بالا کسب کردید وقتش رسیده است که انگولار را یاد بگیرید. چون انگولار در حال تغییر است بهترین منبع آموزش سایت خودش است.

🌟https://angular.io/docs/ts/latest/guide/learning-angular.html
⭐️http://www.dotnettips.info/learningpaths/details/44

یا آموزش های ویدیویی لیندا و یودمی و ... :

http://git.ir/tag/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-angular-2/



با دوستان خود به اشتراک بگذارید.


@ABlueDeveloper

#React

Inside Fiber: in-depth overview of the new reconciliation algorithm in React
Link : https://goo.gl/ceRMrL
#frontEnd #Fiber
@fullStackDevs

#FrontEnd

نقشه راه برای تبدیل شدن به یک توسعه دهنده front- end


@fullStackDevs

#UI
#UX
#FrontEnd

رابطه کاربری خوب خیلی راحت میتونه مشتری رو جذب خودش کنه !

UI Login #OpenSource !


📌 لینک سورس : https://goo.gl/dEfrN3

@fullStackDevs

#css
#frontEnd
#سی_اس_اس
🔰Css tricks

🔸با اینکه css آنقدرها پیچیده نیست، اما اگر تجربه ی زیادی هم در کار کردن با css داشته باشید باز هم چیزهای جدیدی هست که دانستن آن متعجب تون میکنه!
پراپرتی هایی که بسیار ازشون استفاده کردین بدون اینکه به جزئیاتش توجه خاصی کرده باشین، یا پراپرتی هایی که تاکنون ممکن است وجود آنها بی خبر بوده باشین.

🔹در این پست چندتا از این پراپرتی هارو میخوایم بررسی و معرفی کنیم.

❇️Color Property

🔹از این پراپرتی قائدتا بسیار استفاده کردین. (برای تغییر رنگ Text)
اما باید بدونید که این پراپرتی رنگ foreground المنت رو مشخص میکنه و فقط برای مشخص کردن رنگ text المنت نیست.


❇️visibility property
🔹از این پراپرتی هم حتما بسیار استفاده کرده اید و مقدار پیشفرض برای آن visible میباشد تفاوت آن با
display: none
این است که مرورگر در هنگام render المنتی که visibility آن hidden است فضای اشغال شده توسط المنت را در نظر میگیرد ولی المنت قابل رویت نمیباشد اما هنگامی که یک المنت display: none مرورگر در هنگام render صفحه هیچ فضایی برای المنت در نظر نمیگیرد.
پراپرتی visibility دارای مقداری دیگری برای set کردن به نام collapse میباشد. هنگامی که مقدار visibility المنتی را برابر با collapse قرار میدهید، مرورگر با آن المنت همانند حالت hidden عمل میکند، به استثنا در table rows و table row groups و table columns و table column groups در چنین مواقعی تنظیم کردن مقدار collapse برای یک المنت در table base المنت ها مانند display : none خواهد بود و المنت مربوطه فضایی اشغال نخواهد کرد.

🔸نکته قابل توجه این است که مرورگر های مختلف به روش های یکسانی در مواجه با visibility : collapse عمل نمی کنند.

❇️href=#top
🔹برای هدایت کاربر به بالای صفحه جاری میتوانید از مقدار
href=#top
استفاده کنید.

❇️Smooth scroll
🔹برای تنظیم اسکرول نرم برای کل سند html یا یک المنت بخصوص، میتوانید خاصیت scroll-behavior را برابر با
smooth
قرار دهید.

element {
  scroll-behavior: smooth;
} 

❇️all property
🔸برای اینکه مقدار تمام پراپرتی های یک المنت را به مقدار initial شده یا inherit شده آن ریست کنید از این پراپرتی استفاده کنید.
تمامی پراپرتی های به غیر از direction و unicode-bidi ریست خواهند شد.

div {
  background-color: yellow;
  color: red;
  all: initial;
}

❇️currentColor
🔸استفاده از مقدار currentColor به جای مشخص کردن دوباره نام رنگ مورد نظرتان برای پراپرتی هایی نظیر background و غیره باعث خواهد شده تا مرورگر از رنگ محاسبه شده پیشین برای آن المنت استفاده کند.

div { 
  color: red; 
  border: 5px solid currentColor;
  box-shadow: 0 0 5px solid currentColor;
}

@fullStackDevs

#html #css #frontend

Stop using so many divs! 🛑

🔸 why should we use these tags ?
• Easier to read
• Better for SEO
• More accessible

let me know on comments if it was useful 🙏🏻🌺

@fullStackDevs

#frontend #roadmap

That’s the way to start learning
#ReactJS in 2022 🤯🚀


@fullStackDevs

#frontend #css

Fancy Border Radius
an advanced css feature

upto 8 values for border-radius property
customize your fancy shapes in the link below :

🔗 https://9elements.github.io/fancy-border-radius/

@fullStackDevs