#frontend #css #html #js
Here i gathered an awesome front-end roadmap in 2022 to start our journey🎯🔥
🔻Internet (Web)
• How internet works?
• Whats http protocol?
• How browsers work?
• DNS
• Hosting and domains
🔻HTML
• Tags
• SEO
• Metatags
• Forms and validations
• Convention and best practices
🔻CSS
• Selectors
• Box model
• Flexbox
• Grid
• Responsive Design (Media Query)
• Sass / less
🔻JavaScript
• Syntax and Basics
• Data types
• Operators
• Object
• Selectors
• Functions
• Arrays
• DOM
• API / Ajax (XHR)
• ES6
🔻Version Control System (Git)
• Basic usage of Git
• CLI
• Github
• Git Flow
🔻Package Managers
• NPM
• YARN
• Local vs Global
• Package JSON
🔻Framework / LIB
• Angular
• ReactJS
• VueJS
If i left something let me know on comments🤔
👉🏻 Follow for more Tips :
instagram.com/yashar_dev
@fullStackDevs
Here i gathered an awesome front-end roadmap in 2022 to start our journey🎯🔥
🔻Internet (Web)
• How internet works?
• Whats http protocol?
• How browsers work?
• DNS
• Hosting and domains
🔻HTML
• Tags
• SEO
• Metatags
• Forms and validations
• Convention and best practices
🔻CSS
• Selectors
• Box model
• Flexbox
• Grid
• Responsive Design (Media Query)
• Sass / less
🔻JavaScript
• Syntax and Basics
• Data types
• Operators
• Object
• Selectors
• Functions
• Arrays
• DOM
• API / Ajax (XHR)
• ES6
🔻Version Control System (Git)
• Basic usage of Git
• CLI
• Github
• Git Flow
🔻Package Managers
• NPM
• YARN
• Local vs Global
• Package JSON
🔻Framework / LIB
• Angular
• ReactJS
• VueJS
If i left something let me know on comments🤔
👉🏻 Follow for more Tips :
instagram.com/yashar_dev
@fullStackDevs
IMG_9978.JPG
1.8 MB
How to become an ASP .NET Core developer in 2022 🤷🏻♂️🎯
I made this post as a tip for everyone who asks me, "What should I learn next as an ASP .NET Core developer?"
which step you are right now ?🤷🏻♂️
@fullStackDevs
I made this post as a tip for everyone who asks me, "What should I learn next as an ASP .NET Core developer?"
which step you are right now ?🤷🏻♂️
@fullStackDevs
#csharp
#dotnet
#comparison
روش های بد مقایسه رشته ها در سی شارپ
تا به حال اکثرا از ToLowerیا ToUpper برای مقایسه رشته های غیر حساس به حروف بزرگ استفاده می کردیم .
اما این بهترین راه برای انجام آن نیست.
استفاده از string.Equals این مقایسه از سرعت عملکرد بهتری برخوردار است (در واقع به حروف کوچک یا بزرگ رشته ها علاقه ای نداریم).
همانطور که در تصویر می بینیم.
پس برای مقایسه دو رشته string بهتره از String.Equals استفاده کنیم
@fullStackDevs
#dotnet
#comparison
روش های بد مقایسه رشته ها در سی شارپ
تا به حال اکثرا از ToLowerیا ToUpper برای مقایسه رشته های غیر حساس به حروف بزرگ استفاده می کردیم .
اما این بهترین راه برای انجام آن نیست.
استفاده از string.Equals این مقایسه از سرعت عملکرد بهتری برخوردار است (در واقع به حروف کوچک یا بزرگ رشته ها علاقه ای نداریم).
همانطور که در تصویر می بینیم.
پس برای مقایسه دو رشته string بهتره از String.Equals استفاده کنیم
@fullStackDevs
IMG_0165.JPG
2.2 MB
#csharp #visualstudio #csharp10 #aspdotnet #aspcore #dotnet
6 Amazing feature and improvement in C# 10:
📌 File-scoped namespace
📌 Record structs
📌 Constant interpolated strings
📌 Extended property patterns
📌 Global using directive
📌 Assignment and declaration in same deconstruction
❗️C# 10 is supported on .NET 6 .
@fullStackDevs
6 Amazing feature and improvement in C# 10:
📌 File-scoped namespace
📌 Record structs
📌 Constant interpolated strings
📌 Extended property patterns
📌 Global using directive
📌 Assignment and declaration in same deconstruction
❗️C# 10 is supported on .NET 6 .
@fullStackDevs
IMG_0232.JPG
1.5 MB
#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
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
#html5
#bdi_element
بارها می خواستیم از یک کلمه انگلیسی در متن فارسی استفاده کنیم که تو نمایش در مرورگر به هم میریخت! برای این مشکل می تونیم از تگ <bdi> استفاده کنیم
تگ <bdi> برای جهت دادن به متن یا کاراکتراهایی که خارج از زبان اصلی صفحه بوده و از لحاظ فرمت با آن فرق دارد استفاده می شود.
از این تگ جهت تعبیه محتوایی که کاربر ایجاد می کند و جهت نوشتاری که زبان آن نامشخص است به کار می رود.
تگ bdi مخفف Bi-Directiona-Isolationl یعنی جدا سازی دو جهته می باشد.
تگ <bdi> در HTML5 معرفی شده است.
سورس کد تصویر
🔗 <bdi>: The Bidirectional Isolate element
@fullStackDevs
#bdi_element
بارها می خواستیم از یک کلمه انگلیسی در متن فارسی استفاده کنیم که تو نمایش در مرورگر به هم میریخت! برای این مشکل می تونیم از تگ <bdi> استفاده کنیم
تگ <bdi> برای جهت دادن به متن یا کاراکتراهایی که خارج از زبان اصلی صفحه بوده و از لحاظ فرمت با آن فرق دارد استفاده می شود.
از این تگ جهت تعبیه محتوایی که کاربر ایجاد می کند و جهت نوشتاری که زبان آن نامشخص است به کار می رود.
تگ bdi مخفف Bi-Directiona-Isolationl یعنی جدا سازی دو جهته می باشد.
تگ <bdi> در HTML5 معرفی شده است.
سورس کد تصویر
🔗 <bdi>: The Bidirectional Isolate element
@fullStackDevs
🔰 ماژول ها در جاوا اسکریپت.
هر چه اپلیکیشن بزرگتر و پیچیده تر می شود این نیاز حس می شود که کد های خود را به فایل های جدا تقسیم کنیم. درواقع یک ماژول یک فانکشن یا گروهی از فانکشن های مشابه است که درون یک فایل برای انجام یک تسک خاص دسته بندی شده اند.
🔹 هدف از ساختن ماژول ها دسته بندی و ساختار بندی بهتر Codebase تان میباشد.
مهم ترین دلیل استفاده از ماژول ها برای تقسیم یک برنامه بزرگ به بخش های کوچکتر که قابلیت مدیریت اسان تر را دارا هستند میباشد.
🔸با این وجود ماژول ها بایستی ویژگی هایی داشته باشند که مهمترین آنها عبارتند از :
▫️ ویژگی وابسته نبودن یا Independent
ماژول ها باید تا حد ممکن از دیگر ماژول ها جدا و بدون وابستگی باشند.
▫️ مختص بودن
یک ماژول برای انجام یک تسک یا گروهی از تسک های بهم مرتبط ساخته می شود و مهمترین جنبه ساختن آنها در وهله اول جدا کردن functionality می باشد. (هر ماژول یک نوع تسک)
▫️قابلیت استفاده مجدد
یک ماژول بابد این قابلیت را داشته باشد که بتوان از آن به دفعات مکرر در قسمت های مختلف کد استفاده کرد. در واقع ماموریت انجام یک تسک بخصوص در قسمت های مختلف کد برعهده یک ماژول است.
🔸از طرفی ماژول ها می توانند باهم ارتباط هم برقرار کند
در جاواسکریپت برای اینکه ماژولی بیرون از فایل در دسترس باشد از کلمه کلیدی export استفاده می کنیم در مقابل اگر ماژولی بخواهد از ماژول دیگر استفاده کند باید آنرا import کند.
🔹فرق یک ماژول و یک اسکریپت معمولی در چیست ؟
▫️ یک ماژول همیشه در حالت strict اجرا می شود
▫️هر ماژول scope خودش را دارد و متغیر های تعریف شده در یک ماژول حالت عادی در ماژول دیگر قابل مشاهده نیستند. مگر آنها را export کنید.
▫️ اگر یک ماژول را به دفعات زیاد در کد import کنید، کدهای آن ماژول فقط یکبار اجرا می شوند.
بنابراین اگر ماژولی ابجکتی export کند و آن ماژول در ماژول های متعدد import شود، تغییرات ایجاد شده بروی آبجکت export شده در سایر ماژول ها قابل دسترس خواهد بود.
اگر بخواهید کد های ماژولی با هر بار صدا زده شدن، اجر شوند، باید به عنوان یک فانکشن export شوند.
▫️آبجکت import.meta
از طریق این آبجکت می توانید بسته به محیطی که ماژول در آن است اطلاعاتی در مورد ماژول دریافت کنید.
برای مثال در مرورگر آدرس ماژول را دریافت می کنید.
در پایان سال خوبی را برایتان ارزومندیم.♥️
#js
#modules
@FullStackDevs
هر چه اپلیکیشن بزرگتر و پیچیده تر می شود این نیاز حس می شود که کد های خود را به فایل های جدا تقسیم کنیم. درواقع یک ماژول یک فانکشن یا گروهی از فانکشن های مشابه است که درون یک فایل برای انجام یک تسک خاص دسته بندی شده اند.
🔹 هدف از ساختن ماژول ها دسته بندی و ساختار بندی بهتر Codebase تان میباشد.
مهم ترین دلیل استفاده از ماژول ها برای تقسیم یک برنامه بزرگ به بخش های کوچکتر که قابلیت مدیریت اسان تر را دارا هستند میباشد.
🔸با این وجود ماژول ها بایستی ویژگی هایی داشته باشند که مهمترین آنها عبارتند از :
▫️ ویژگی وابسته نبودن یا Independent
ماژول ها باید تا حد ممکن از دیگر ماژول ها جدا و بدون وابستگی باشند.
▫️ مختص بودن
یک ماژول برای انجام یک تسک یا گروهی از تسک های بهم مرتبط ساخته می شود و مهمترین جنبه ساختن آنها در وهله اول جدا کردن functionality می باشد. (هر ماژول یک نوع تسک)
▫️قابلیت استفاده مجدد
یک ماژول بابد این قابلیت را داشته باشد که بتوان از آن به دفعات مکرر در قسمت های مختلف کد استفاده کرد. در واقع ماموریت انجام یک تسک بخصوص در قسمت های مختلف کد برعهده یک ماژول است.
🔸از طرفی ماژول ها می توانند باهم ارتباط هم برقرار کند
در جاواسکریپت برای اینکه ماژولی بیرون از فایل در دسترس باشد از کلمه کلیدی export استفاده می کنیم در مقابل اگر ماژولی بخواهد از ماژول دیگر استفاده کند باید آنرا import کند.
🔹فرق یک ماژول و یک اسکریپت معمولی در چیست ؟
▫️ یک ماژول همیشه در حالت strict اجرا می شود
▫️هر ماژول scope خودش را دارد و متغیر های تعریف شده در یک ماژول حالت عادی در ماژول دیگر قابل مشاهده نیستند. مگر آنها را export کنید.
▫️ اگر یک ماژول را به دفعات زیاد در کد import کنید، کدهای آن ماژول فقط یکبار اجرا می شوند.
بنابراین اگر ماژولی ابجکتی export کند و آن ماژول در ماژول های متعدد import شود، تغییرات ایجاد شده بروی آبجکت export شده در سایر ماژول ها قابل دسترس خواهد بود.
اگر بخواهید کد های ماژولی با هر بار صدا زده شدن، اجر شوند، باید به عنوان یک فانکشن export شوند.
▫️آبجکت import.meta
از طریق این آبجکت می توانید بسته به محیطی که ماژول در آن است اطلاعاتی در مورد ماژول دریافت کنید.
برای مثال در مرورگر آدرس ماژول را دریافت می کنید.
در پایان سال خوبی را برایتان ارزومندیم.♥️
#js
#modules
@FullStackDevs
#dotnet
#CSharp10
In C# 10 With Expressions are not limited to records.
You can use them with anonymous types as well.
https://github.com/gsferreira/dotnet-playground
@fullStackDevs
#CSharp10
In C# 10 With Expressions are not limited to records.
You can use them with anonymous types as well.
https://github.com/gsferreira/dotnet-playground
@fullStackDevs
#RPC
#GraphQL
#REST
#SOAP
SOAP vs REST vs GraphQL vs RPC
API Architectural Styles Comparison
The diagram above illustrates the API timeline and API styles comparison.
Over time, different API architectural styles are released. Each of them has its own patterns of standardizing data exchange.
You can check out the use cases of each style in the diagram.
🔗 Source link
@fullStackDevs
#GraphQL
#REST
#SOAP
SOAP vs REST vs GraphQL vs RPC
API Architectural Styles Comparison
The diagram above illustrates the API timeline and API styles comparison.
Over time, different API architectural styles are released. Each of them has its own patterns of standardizing data exchange.
You can check out the use cases of each style in the diagram.
🔗 Source link
@fullStackDevs