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

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

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

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

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

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

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

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

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

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

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

#TypeScript
#JavaScript

📌آموزش تایپ اسکریپت قسمت اول:

#تایپ_اسکریپت یکی از فریم‌ورک‌های زبان برنامه‌نویسی جاوا اسکریپت هست. زبان TypeScript به عنوان superset زبان JavaScript ارائه شده‌ است. زمانی که جاوا اسکریپت را توسعه بدهیم تبدیل خواهد شد به تایپ اسکریپت پس تایپ اسکریپت قرار نیست که جایگزین زبان برنامه نویسی جاوا اسکریپت شود درواقع ما صرفا جاوا اسکریپت را توسعه دادیم.

در واقع #تایپ_اسکریپت حاصل یک همکاری رسمی بین ماکروسافت و گوگل است. همین موضوع همکاری دو کمپانی قدرتمند برای استفاده از زبان TypeScript بسیار خوشحال‌کننده است. زیرا پشتیبانی این زبان برای مدتی طولانی همواره برقرار است. نکته‌ی قابل توجه این است که شما حتما نباید از زبان تایپ اسکریپت برای کار با انگولار استفاده کنید. زیرا انگولار یک سری API برای استفاده از جاوا اسکریپت به عنوان زبان معیار، ایجاد کرده است و می‌توانید توسط آن به تمام توابع و کتابخانه‌های تایپ اسکریپت دست پیدا کنید. اما توصیه می‌کنیم این زبان قدرتمند را یاد بگیرید زیرا ویژگی‌های بسیاری دارد که کار را برای برنامه‌نویسان و توسعه‌دهندگان بهتر می‌کند.

✅یک سری از Option های که #تایپ_اسکریپت در اختیار ما قرار می دهد:

1️⃣ تایپ اسکریپت توسط «مایکروسافت» پشتیبانی شده است. ضمنا به صورت متن باز بوده که می‌­توان مطابق سلیقه خود، در این زبان برنامه نویسی تغییراتی ایجاد کرد.
2️⃣ پسوند فایل­‌های کدنویسی شده‌­ی توسط زبان تایپ اسکریپت، به صورت TS است (مخفف typescript)
3️⃣ امکان کارکرد بر روی تمامی سیستم عامل ها
4️⃣ در تمامی Host ها از آن میشود استفاده کرد و این مزیت خوبی است.
6️⃣ این PlatForm در همه Browser ها به خوبی عمل خواهد نمود.

@ABlueDeveloper

#Promise
#Javascript

کاربرد Promise در جاوا اسکریپت یا React Native

کاری که Promise برای ما در جاوا اسکریپت انجام می دهد و ری اکت نیتیو دقیقا بطور مشابه است. یعنی زمان هایی که لازم باشد ما را از وقوع رویدادهایی مطلع می کند تا در صورت وقوع رویداد مورد نظرمان ، قطعه کد مربوطه اجرا شود.

خب حالا این به چه درد میخورد؟ برخی از کارها هست در برنامه ما که نمی دانیم دقیقا کی اجرایش به اتمام می رسد. این کارها مثل سایر خطوط کد ما خطی اجرا نمی شوند. مثلا یک در خواست Ajax یا fetch . شبکه دارای تاخیر است. ارسال درخواست و دریافت پاسخ از سمت سرور اندکی طول میکشد. خب ما که نمی توانیم کل برنامه را معطل رسیدن پاسخ سرور کنیم. اگر اینکار کنیم برنامه کند میشود. اصطلاحا دارای لگ می شود و برای کاربر مشهود است.

پس برای جلوگیری از این مشکل جاوااسکریپت این نوع از کدها را بصورت موازی با سایر کدها اجرا می کند و منتظر رسیدن پاسخ سرور نمی ماند. اصطلاحا می گوییم بصورت غیر همزمان یا async اجرا می کند. در حالت نرمال که پس از اجرای هر خط کد به خط بعدی می رود می گوییم sync اجرا می شود.
پس promise برای دستورات async است. پس سناریو کلی اینگونه می شود:
شما یک درخواست مثلا ajax ایجاده کرده و برای سرور می فرستید.نمی دانید پاسخ دقیقا کی می رسد. توابعی را که بعد از رسیدن پاسخ باید اجرا شود به promise می دهید.می روید سراغ اجرای خطوط بعدی کد Promise هم به شما قول می دهد وقتی پاسخ از سرور رسید توابع مورد نظر شما را اجرا کند.
در مثال زیر به نحوه ایجاد یک Promise دقت کنید:

 let myFirstPromise = new Promise((resolve, reject) => {
  // We call resolve(...) when what we were doing asynchronously was successful, and reject(...) when it failed.
  // In this example, we use setTimeout(...) to simulate async code.
  // In reality, you will probably be using something like XHR or an HTML5 API.
  setTimeout(function(){
    resolve("Success!"); // Yay! Everything went well!
  }, 250);
});

@ABlueDeveloper


ورودی constructor آبجکت promise دو تابع به نام resolve و reject است. هنگام اجرای موفقت آمیز درخواست async ما تابع resolve و هنگام اجرای ناموفق آن تابع reject را فراخوانی می کنیم.
به یک مثال دیگر که کاربرد Promise در XMLHttpRequest را نشان می دهد دقت کنید:

 function myAsyncFunction(url) { return new Promise((resolve, reject) => {    const xhr = new XMLHttpRequest();  xhr.open("GET", url);    xhr.onload = () => resolve(xhr.responseText);   xhr.onerror = () => reject(xhr.statusText);    xhr.send();  });}

طور دیگری هم می تواند از promise استفاده کرد. آبجکت Promise دارای دو تابع به نام then و catch است که ترتیب در زمان اجرای موفقیت آمیز و غیر موفقیت آمیز کد async ، تابع ورودی خود را اجرا می کنند. خود then و catch نیز آبجکت promise بر می گردانند. بنابراین می توان چندیدن تا از آنها را بصورت زنجیر یا chain پشت هم بکار برد.
به کاربرد این دوتابع در fetch دقت کنید. این مثال می تواند در ری اکت نیتیو هم کاربرد داشته باشد.
تابع fetch کارش ارسال درخواست http است و خود promise بر می گرداند.

 function getMoviesFromApiAsync() {
  return fetch('https://facebook.github.io/react-native/movies.json')
    .then((response) => response.json())
    .then((responseJson) => {
      return responseJson.movies;
    })
    .catch((error) => {
      console.error(error);
    });
}

برگرفته از سایت جعبه آبی

@ABlueDeveloper

#Javascript
#js

JavaScript Standard Style

این خلاصه ای از قوانین جاوا اسکریپت استاندارد است.

بهترین روش برای یادگیری در مورد استاندارد این است که فقط آن را در کد خود امتحان کنید.
لینک های زیر را مطالعه کنید بسیار ساده توضیح داده برای دوستانی که علاقه‌مند به رعایت استانداردها در نوشتن کدهای JavaScript و یا Framework‌ های مرتبط دارند

https://standardjs.com/rules.html
https://github.com/standard/standard

@ABlueDeveloper

#Javascript
#Java

Chris Heilmann:

ارتباط Java با JavaScript مانند ارتباط Car با Carpet است.

@ABlueDeveloper

#RequireJS
#Javascript

معرفی لایبرری RequireJS

لایبرری RequireJS یک فایل JavaScript و ماژول لودر است.این ابزار برای استفاده در مرورگر بهینه شده است و میتواند در محیط های دیگر JavaScript مانند Rhino و Node نیز استفاده شود.

استفاده از یک اسکریپت لودر مژولار (modular script loader) مانند RequireJS میتواند باعث افزایش سرعت و کیفیت کد شما شود.

دارای یک ابزار بهینه شده است که شما میتوانید آن را به عنوان قسمتی از پکیج هایتان برای اجرای کدهایتان اجرا کنید.

ابزار بهینه سازی می تواند فایل های جاوا اسکریپت شما را برای کارایی بهتر ترکیب و کم حجم کنند.
https://requirejs.org/

📌 لینک کانال
@ABlueDeveloper

#React
#JavaScript
#VSCode

The Ultimate VSCode Setup for Front End/JS/React

https://goo.gl/wB7X5p

@fullStackDevs

#FAQ
What is this ?

مجموعه ای کامل از سوالات مصاحبه ،‌ همراه با پاسخ و برخی از نکات کد که به شما کمک می کند تا برای مصاحبه های فنی آماده شوید . بسیاری از این سؤالات از مصاحبه های واقعی هستند و برای اکثرمفاهیم وب سوال وجود دارد

توجه داشته باشید که بسیاری از این سوالات باز هستند و می توانند منجر به بحث های جالبی شوند
مطالب مورد پوشش :‌
#JavaScript #React #VueJs #Angular #NodeJs #AngularJS #Bootstrap #CSS #HTML5 #Sass #Webpack #MongoDB #SQL #GraphQL #CSharp #Golang #Java #ASPNET #ASPNETMVC #NETFramework #Ruby #RubyOnRails #TypeScript #PHP #Android #RESTAPI #DataStructures #DesignPattern #Swift #Agile #Scrum



📌📌 لینک : https://goo.gl/KaMsmK
@fullStackDevs

#Javascript

الگوریتم و ساختار داده در جاوا اسکریپت با توضیحات کامل


https://goo.gl/VZyRwo

@fullStackDevs

#Javascript

الگوریتم و ساختار داده در جاوا اسکریپت با توضیحات کامل


https://goo.gl/VZyRwo

@fullStackDevs

#javascript
#VSCode

ویژوال استودیو کد , تجربه ای عالی در ویرایشگر متن درست مثل IDE ارائه می دهد ، در اینجا برخی از extentions هایی در ویژوال استودیو کد موجود هست که برای توسعه وب با استفاده از جاوا اسکریپت، HTML و CSS مفید است.
این مجموعه شامل extentions ,git tools و تم های پیشنهادی میباشد که شما بستگی به نیازهایتان می توانید برخی از آنها را انتخاب کنید و یا غیر فعال کنید

🔹️ Download and try:

https://marketplace.visualstudio.com/items?itemName=GulajavaMinistudio.javascript-complete-packs

🔸️ List of extensions , Github Sources and release notes can be seen here:

https://github.com/GulajavaMinistudio/FullJSExtensionPackCode

#Code #Extensions #Pack

@fullStackDevs

#Chain_posts
#JavaScript_code_snippets

"نرم افزار ها در حال بلعیدن جهان هستند و جاوا اسکریپت در حال بلعیدن نرم افزارها. هر ساله جاوا اسکریپت در حال چیره شدن برنرم افزار ها میباشد و هیچ کسی نمیداند که در نهایت چه چیزی می تواند جایگزین آن شود."

🔸در این پست به معرفی چند code snippet در زبان جاوا اسکریپت می پردازیم که به صورت زنجیروار ادامه خواهد داشت.
🔹.all
▫️خروجی این قطعه کد true خواهد بود اگر شرط مورد نظر برای تمام عناصر آرایه true باشد و بلعکس.

const all = (arr, fn = Boolean) => arr.every(fn);

all([4, 2, 3], x => x > 1); // true
all([1, 2, 3]); // true

🔻متد every() یک تابع را بروی تمام عناصر ارایه برای مطمئن شدن از برقرار بودن شرط مورد نظر چک میکند. اگر عنصری در این آرایه نتواند شرط مورد نظر را پاس کند ، دیگر عناصر ارایه (باقیمانده) چک نخواهند شد.

🔹.allEqual
▫️خروجی قطعه کد زیر در صورت برابر بودن تمام عناصر آرایه با یکدیگر true خواهد بود
const allEqual = arr => arr.every(val => val === arr[0]);

allEqual([1, 2, 3, 4, 5, 6]); // false
allEqual([1, 1, 1, 1]); // true

🔻عملگر === در جاوا اسکریپت دو متغیر را براساس نوع و مقدار با هم مقایسه میکند.
11 === 11 // => true
11=== '11' // => false

🔹. approximatelyEqual
▫️این قطعه کد چک خواهد کرد که دو عدد به طور تقریبی با هم برابر هستند یا خیر.
🔻در این کد کلمه کلیدی const به این معنی میباشد که متغیر تعریف شده ثابت بوده و غیر قابل تغییر در سراسر کد میباشد.

const approximatelyEqual = (v1, v2, epsilon = 0.001) => Math.abs(v1 - v2) < epsilon;

approximatelyEqual(Math.PI / 2.0, 1.5708); // true

🔻متد math.abs معادل قدر مطلق در ریاضی میباشد. خروجی یک قدر مطلق همواره عددی مثبت است.

🔹.arrayToHtmlList
▫️این قطعه کد هر عنصر از آرایه را به یک تگ <li> تبدیل کرده و انها را به یک لیست با یک ID میچسباند.

const arrayToHtmlList = (arr, listID) =>
(el => (
(el = document.querySelector('#' + listID)),
(el.innerHTML += arr.map(item => `<li>${item}</li>`).join(''))
))();

arrayToHtmlList(['item 1', 'item 2'], 'myListID');

🔻متد arr.map() یک non-mutating متد بوده (یعنی باعث تغییر آرایه پدر نمیشود) و کار آن ساخت ارایه جدید به وسیله صدا زدن یک تابع بروی هریک از عناصر آرایه پدرمیباشد.

@FullStackDevs