diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md new file mode 100644 index 0000000..46b4c62 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -0,0 +1,40 @@ +--- +name: Bug Report +about: Create a report to help us improve +title: '[BUG] Short description of the bug' +labels: bug +assignees: '' +--- + +**Describe the bug** +A clear and concise description of what the bug is. + +**To Reproduce** +Steps to reproduce the behavior: + +1. Go to '...' +2. Click on '....' +3. Scroll down to '....' +4. See error + +**Expected behavior** +A clear and concise description of what you expected to happen. + +**Screenshots** +If applicable, add screenshots to help explain your problem. + +**Desktop (please complete the following information):** + +- OS: [e.g. iOS] +- Browser [e.g. chrome, safari] +- Version [e.g. 22] + +**Smartphone (please complete the following information):** + +- Device: [e.g. iPhone6] +- OS: [e.g. iOS8.1] +- Browser [e.g. stock browser, safari] +- Version [e.g. 22] + +**Additional context** +Add any other context about the problem here. diff --git a/.github/ISSUE_TEMPLATE/documentation_improvement.md b/.github/ISSUE_TEMPLATE/documentation_improvement.md new file mode 100644 index 0000000..3424f61 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/documentation_improvement.md @@ -0,0 +1,16 @@ +--- +name: Documentation Improvement +about: Suggest improvements or report issues in the documentation +title: '[DOCS] Your documentation issue title' +labels: documentation +assignees: '' +--- + +**Documentation Link** +Provide a link to the documentation page where the issue occurs. + +**Describe the issue or suggestion** +A clear and concise description of what the issue is or what you suggest to improve. + +**Additional context** +Add any other context about the problem or suggestion here. diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md new file mode 100644 index 0000000..463d640 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -0,0 +1,19 @@ +--- +name: Feature Request +about: Suggest an idea for this project +title: '[FEATURE] Your feature title' +labels: enhancement +assignees: '' +--- + +**Is your feature request related to a problem? Please describe.** +A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] + +**Describe the solution you'd like** +A clear and concise description of what you want to happen. + +**Describe alternatives you've considered** +A clear and concise description of any alternative solutions or features you've considered. + +**Additional context** +Add any other context or screenshots about the feature request here. diff --git a/.gitignore b/.gitignore index 496ee2c..fd821b0 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,4 @@ -.DS_Store \ No newline at end of file +.DS_Store +node_modules +.docusaurus +build \ No newline at end of file diff --git a/.husky/commit-msg b/.husky/commit-msg new file mode 100644 index 0000000..78f4d1d --- /dev/null +++ b/.husky/commit-msg @@ -0,0 +1 @@ +npm run commitlint ${1} diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100644 index 0000000..2312dc5 --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1 @@ +npx lint-staged diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..f2a72af --- /dev/null +++ b/.prettierignore @@ -0,0 +1,4 @@ +# Ignore artifacts: +build +coverage +docusaurus \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..e74ed9f --- /dev/null +++ b/.prettierrc @@ -0,0 +1,6 @@ +{ + "trailingComma": "es5", + "tabWidth": 4, + "semi": false, + "singleQuote": true +} diff --git a/assets/images/FM_2019Cover_final.jpg b/assets/images/FM_2019Cover_final.jpg deleted file mode 100644 index df7a00f..0000000 Binary files a/assets/images/FM_2019Cover_final.jpg and /dev/null differ diff --git a/assets/images/FM_2019Cover_small.jpg b/assets/images/FM_2019Cover_small.jpg deleted file mode 100644 index 19339d9..0000000 Binary files a/assets/images/FM_2019Cover_small.jpg and /dev/null differ diff --git a/assets/images/browsers-work.png b/assets/images/browsers-work.png deleted file mode 100644 index 69cb314..0000000 Binary files a/assets/images/browsers-work.png and /dev/null differ diff --git a/assets/images/front-end-skills.png b/assets/images/front-end-skills.png deleted file mode 100644 index bc3027b..0000000 Binary files a/assets/images/front-end-skills.png and /dev/null differ diff --git a/assets/images/frontend.png b/assets/images/frontend.png deleted file mode 100644 index 1d16aba..0000000 Binary files a/assets/images/frontend.png and /dev/null differ diff --git a/assets/images/full-stack.jpg b/assets/images/full-stack.jpg deleted file mode 100644 index fd8b802..0000000 Binary files a/assets/images/full-stack.jpg and /dev/null differ diff --git a/assets/images/fullstack1.png b/assets/images/fullstack1.png deleted file mode 100644 index 10c5741..0000000 Binary files a/assets/images/fullstack1.png and /dev/null differ diff --git a/assets/images/fullstack2.png b/assets/images/fullstack2.png deleted file mode 100644 index 432768b..0000000 Binary files a/assets/images/fullstack2.png and /dev/null differ diff --git a/assets/images/growth-iot.jpg b/assets/images/growth-iot.jpg deleted file mode 100644 index 97669a4..0000000 Binary files a/assets/images/growth-iot.jpg and /dev/null differ diff --git a/assets/images/how-does-seo-work.jpg b/assets/images/how-does-seo-work.jpg deleted file mode 100644 index b9a42af..0000000 Binary files a/assets/images/how-does-seo-work.jpg and /dev/null differ diff --git a/assets/images/how-does-seo-work.png b/assets/images/how-does-seo-work.png deleted file mode 100644 index 7c3791f..0000000 Binary files a/assets/images/how-does-seo-work.png and /dev/null differ diff --git a/assets/images/how-the-internet-works.jpg b/assets/images/how-the-internet-works.jpg deleted file mode 100644 index a5edc7d..0000000 Binary files a/assets/images/how-the-internet-works.jpg and /dev/null differ diff --git a/assets/images/how_dns_works.jpg b/assets/images/how_dns_works.jpg deleted file mode 100644 index 85b0964..0000000 Binary files a/assets/images/how_dns_works.jpg and /dev/null differ diff --git a/assets/images/statcounter.png b/assets/images/statcounter.png deleted file mode 100644 index 7a0da77..0000000 Binary files a/assets/images/statcounter.png and /dev/null differ diff --git a/assets/images/things.jpg b/assets/images/things.jpg deleted file mode 100644 index d038554..0000000 Binary files a/assets/images/things.jpg and /dev/null differ diff --git a/assets/images/vscode.png b/assets/images/vscode.png deleted file mode 100644 index ac0db7a..0000000 Binary files a/assets/images/vscode.png and /dev/null differ diff --git a/assets/images/web-api.png b/assets/images/web-api.png deleted file mode 100644 index bd24675..0000000 Binary files a/assets/images/web-api.png and /dev/null differ diff --git a/assets/images/web-tech-employed.jpg b/assets/images/web-tech-employed.jpg deleted file mode 100644 index 42ad56f..0000000 Binary files a/assets/images/web-tech-employed.jpg and /dev/null differ diff --git a/assets/images/what-is-front-end-dev.png b/assets/images/what-is-front-end-dev.png deleted file mode 100644 index b0494eb..0000000 Binary files a/assets/images/what-is-front-end-dev.png and /dev/null differ diff --git a/assets/images/what-is-web-hosting-infographic.jpg b/assets/images/what-is-web-hosting-infographic.jpg deleted file mode 100644 index a21ea83..0000000 Binary files a/assets/images/what-is-web-hosting-infographic.jpg and /dev/null differ diff --git a/assets/images/who-runs-the-internet-infographic.jpg b/assets/images/who-runs-the-internet-infographic.jpg deleted file mode 100644 index f304ac8..0000000 Binary files a/assets/images/who-runs-the-internet-infographic.jpg and /dev/null differ diff --git a/assets/jquery-3.3.1.slim.min.js b/assets/jquery-3.3.1.slim.min.js deleted file mode 100644 index f4ca9b2..0000000 --- a/assets/jquery-3.3.1.slim.min.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! jQuery v3.3.1 -ajax,-ajax/jsonp,-ajax/load,-ajax/parseXML,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-event/ajax,-effects,-effects/Tween,-effects/animatedSelector | (c) JS Foundation and other contributors | jquery.org/license */ -!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(e,t){"use strict";var n=[],r=e.document,i=Object.getPrototypeOf,o=n.slice,a=n.concat,u=n.push,s=n.indexOf,l={},c=l.toString,f=l.hasOwnProperty,d=f.toString,p=d.call(Object),h={},g=function e(t){return"function"==typeof t&&"number"!=typeof t.nodeType},v=function e(t){return null!=t&&t===t.window},y={type:!0,src:!0,noModule:!0};function m(e,t,n){var i,o=(t=t||r).createElement("script");if(o.text=e,n)for(i in y)n[i]&&(o[i]=n[i]);t.head.appendChild(o).parentNode.removeChild(o)}function b(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?l[c.call(e)]||"object":typeof e}var x="3.3.1 -ajax,-ajax/jsonp,-ajax/load,-ajax/parseXML,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-event/ajax,-effects,-effects/Tween,-effects/animatedSelector",w=function(e,t){return new w.fn.init(e,t)},C=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;w.fn=w.prototype={jquery:x,constructor:w,length:0,toArray:function(){return o.call(this)},get:function(e){return null==e?o.call(this):e<0?this[e+this.length]:this[e]},pushStack:function(e){var t=w.merge(this.constructor(),e);return t.prevObject=this,t},each:function(e){return w.each(this,e)},map:function(e){return this.pushStack(w.map(this,function(t,n){return e.call(t,n,t)}))},slice:function(){return this.pushStack(o.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},eq:function(e){var t=this.length,n=+e+(e<0?t:0);return this.pushStack(n>=0&&n0&&t-1 in e)}var E=function(e){var t,n,r,i,o,a,u,s,l,c,f,d,p,h,g,v,y,m,b,x="sizzle"+1*new Date,w=e.document,C=0,T=0,E=ae(),N=ae(),k=ae(),A=function(e,t){return e===t&&(f=!0),0},D={}.hasOwnProperty,S=[],L=S.pop,j=S.push,q=S.push,O=S.slice,P=function(e,t){for(var n=0,r=e.length;n+~]|"+I+")"+I+"*"),_=new RegExp("="+I+"*([^\\]'\"]*?)"+I+"*\\]","g"),U=new RegExp(M),V=new RegExp("^"+R+"$"),X={ID:new RegExp("^#("+R+")"),CLASS:new RegExp("^\\.("+R+")"),TAG:new RegExp("^("+R+"|[*])"),ATTR:new RegExp("^"+B),PSEUDO:new RegExp("^"+M),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+I+"*(even|odd|(([+-]|)(\\d*)n|)"+I+"*(?:([+-]|)"+I+"*(\\d+)|))"+I+"*\\)|)","i"),bool:new RegExp("^(?:"+H+")$","i"),needsContext:new RegExp("^"+I+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+I+"*((?:-\\d)?\\d*)"+I+"*\\)|)(?=[^-]|$)","i")},Q=/^(?:input|select|textarea|button)$/i,Y=/^h\d$/i,G=/^[^{]+\{\s*\[native \w/,K=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,J=/[+~]/,Z=new RegExp("\\\\([\\da-f]{1,6}"+I+"?|("+I+")|.)","ig"),ee=function(e,t,n){var r="0x"+t-65536;return r!==r||n?t:r<0?String.fromCharCode(r+65536):String.fromCharCode(r>>10|55296,1023&r|56320)},te=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ne=function(e,t){return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},re=function(){d()},ie=me(function(e){return!0===e.disabled&&("form"in e||"label"in e)},{dir:"parentNode",next:"legend"});try{q.apply(S=O.call(w.childNodes),w.childNodes),S[w.childNodes.length].nodeType}catch(e){q={apply:S.length?function(e,t){j.apply(e,O.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function oe(e,t,r,i){var o,u,l,c,f,h,y,m=t&&t.ownerDocument,C=t?t.nodeType:9;if(r=r||[],"string"!=typeof e||!e||1!==C&&9!==C&&11!==C)return r;if(!i&&((t?t.ownerDocument||t:w)!==p&&d(t),t=t||p,g)){if(11!==C&&(f=K.exec(e)))if(o=f[1]){if(9===C){if(!(l=t.getElementById(o)))return r;if(l.id===o)return r.push(l),r}else if(m&&(l=m.getElementById(o))&&b(t,l)&&l.id===o)return r.push(l),r}else{if(f[2])return q.apply(r,t.getElementsByTagName(e)),r;if((o=f[3])&&n.getElementsByClassName&&t.getElementsByClassName)return q.apply(r,t.getElementsByClassName(o)),r}if(n.qsa&&!k[e+" "]&&(!v||!v.test(e))){if(1!==C)m=t,y=e;else if("object"!==t.nodeName.toLowerCase()){(c=t.getAttribute("id"))?c=c.replace(te,ne):t.setAttribute("id",c=x),u=(h=a(e)).length;while(u--)h[u]="#"+c+" "+ye(h[u]);y=h.join(","),m=J.test(e)&&ge(t.parentNode)||t}if(y)try{return q.apply(r,m.querySelectorAll(y)),r}catch(e){}finally{c===x&&t.removeAttribute("id")}}}return s(e.replace($,"$1"),t,r,i)}function ae(){var e=[];function t(n,i){return e.push(n+" ")>r.cacheLength&&delete t[e.shift()],t[n+" "]=i}return t}function ue(e){return e[x]=!0,e}function se(e){var t=p.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function le(e,t){var n=e.split("|"),i=n.length;while(i--)r.attrHandle[n[i]]=t}function ce(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function fe(e){return function(t){return"input"===t.nodeName.toLowerCase()&&t.type===e}}function de(e){return function(t){var n=t.nodeName.toLowerCase();return("input"===n||"button"===n)&&t.type===e}}function pe(e){return function(t){return"form"in t?t.parentNode&&!1===t.disabled?"label"in t?"label"in t.parentNode?t.parentNode.disabled===e:t.disabled===e:t.isDisabled===e||t.isDisabled!==!e&&ie(t)===e:t.disabled===e:"label"in t&&t.disabled===e}}function he(e){return ue(function(t){return t=+t,ue(function(n,r){var i,o=e([],n.length,t),a=o.length;while(a--)n[i=o[a]]&&(n[i]=!(r[i]=n[i]))})})}function ge(e){return e&&"undefined"!=typeof e.getElementsByTagName&&e}n=oe.support={},o=oe.isXML=function(e){var t=e&&(e.ownerDocument||e).documentElement;return!!t&&"HTML"!==t.nodeName},d=oe.setDocument=function(e){var t,i,a=e?e.ownerDocument||e:w;return a!==p&&9===a.nodeType&&a.documentElement?(p=a,h=p.documentElement,g=!o(p),w!==p&&(i=p.defaultView)&&i.top!==i&&(i.addEventListener?i.addEventListener("unload",re,!1):i.attachEvent&&i.attachEvent("onunload",re)),n.attributes=se(function(e){return e.className="i",!e.getAttribute("className")}),n.getElementsByTagName=se(function(e){return e.appendChild(p.createComment("")),!e.getElementsByTagName("*").length}),n.getElementsByClassName=G.test(p.getElementsByClassName),n.getById=se(function(e){return h.appendChild(e).id=x,!p.getElementsByName||!p.getElementsByName(x).length}),n.getById?(r.filter.ID=function(e){var t=e.replace(Z,ee);return function(e){return e.getAttribute("id")===t}},r.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&g){var n=t.getElementById(e);return n?[n]:[]}}):(r.filter.ID=function(e){var t=e.replace(Z,ee);return function(e){var n="undefined"!=typeof e.getAttributeNode&&e.getAttributeNode("id");return n&&n.value===t}},r.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&g){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];i=t.getElementsByName(e),r=0;while(o=i[r++])if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),r.find.TAG=n.getElementsByTagName?function(e,t){return"undefined"!=typeof t.getElementsByTagName?t.getElementsByTagName(e):n.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},r.find.CLASS=n.getElementsByClassName&&function(e,t){if("undefined"!=typeof t.getElementsByClassName&&g)return t.getElementsByClassName(e)},y=[],v=[],(n.qsa=G.test(p.querySelectorAll))&&(se(function(e){h.appendChild(e).innerHTML="",e.querySelectorAll("[msallowcapture^='']").length&&v.push("[*^$]="+I+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||v.push("\\["+I+"*(?:value|"+H+")"),e.querySelectorAll("[id~="+x+"-]").length||v.push("~="),e.querySelectorAll(":checked").length||v.push(":checked"),e.querySelectorAll("a#"+x+"+*").length||v.push(".#.+[+~]")}),se(function(e){e.innerHTML="";var t=p.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&v.push("name"+I+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&v.push(":enabled",":disabled"),h.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&v.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),v.push(",.*:")})),(n.matchesSelector=G.test(m=h.matches||h.webkitMatchesSelector||h.mozMatchesSelector||h.oMatchesSelector||h.msMatchesSelector))&&se(function(e){n.disconnectedMatch=m.call(e,"*"),m.call(e,"[s!='']:x"),y.push("!=",M)}),v=v.length&&new RegExp(v.join("|")),y=y.length&&new RegExp(y.join("|")),t=G.test(h.compareDocumentPosition),b=t||G.test(h.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},A=t?function(e,t){if(e===t)return f=!0,0;var r=!e.compareDocumentPosition-!t.compareDocumentPosition;return r||(1&(r=(e.ownerDocument||e)===(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!n.sortDetached&&t.compareDocumentPosition(e)===r?e===p||e.ownerDocument===w&&b(w,e)?-1:t===p||t.ownerDocument===w&&b(w,t)?1:c?P(c,e)-P(c,t):0:4&r?-1:1)}:function(e,t){if(e===t)return f=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,a=[e],u=[t];if(!i||!o)return e===p?-1:t===p?1:i?-1:o?1:c?P(c,e)-P(c,t):0;if(i===o)return ce(e,t);n=e;while(n=n.parentNode)a.unshift(n);n=t;while(n=n.parentNode)u.unshift(n);while(a[r]===u[r])r++;return r?ce(a[r],u[r]):a[r]===w?-1:u[r]===w?1:0},p):p},oe.matches=function(e,t){return oe(e,null,null,t)},oe.matchesSelector=function(e,t){if((e.ownerDocument||e)!==p&&d(e),t=t.replace(_,"='$1']"),n.matchesSelector&&g&&!k[t+" "]&&(!y||!y.test(t))&&(!v||!v.test(t)))try{var r=m.call(e,t);if(r||n.disconnectedMatch||e.document&&11!==e.document.nodeType)return r}catch(e){}return oe(t,p,null,[e]).length>0},oe.contains=function(e,t){return(e.ownerDocument||e)!==p&&d(e),b(e,t)},oe.attr=function(e,t){(e.ownerDocument||e)!==p&&d(e);var i=r.attrHandle[t.toLowerCase()],o=i&&D.call(r.attrHandle,t.toLowerCase())?i(e,t,!g):void 0;return void 0!==o?o:n.attributes||!g?e.getAttribute(t):(o=e.getAttributeNode(t))&&o.specified?o.value:null},oe.escape=function(e){return(e+"").replace(te,ne)},oe.error=function(e){throw new Error("Syntax error, unrecognized expression: "+e)},oe.uniqueSort=function(e){var t,r=[],i=0,o=0;if(f=!n.detectDuplicates,c=!n.sortStable&&e.slice(0),e.sort(A),f){while(t=e[o++])t===e[o]&&(i=r.push(o));while(i--)e.splice(r[i],1)}return c=null,e},i=oe.getText=function(e){var t,n="",r=0,o=e.nodeType;if(o){if(1===o||9===o||11===o){if("string"==typeof e.textContent)return e.textContent;for(e=e.firstChild;e;e=e.nextSibling)n+=i(e)}else if(3===o||4===o)return e.nodeValue}else while(t=e[r++])n+=i(t);return n},(r=oe.selectors={cacheLength:50,createPseudo:ue,match:X,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(Z,ee),e[3]=(e[3]||e[4]||e[5]||"").replace(Z,ee),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||oe.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&oe.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return X.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&U.test(n)&&(t=a(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(Z,ee).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=E[e+" "];return t||(t=new RegExp("(^|"+I+")"+e+"("+I+"|$)"))&&E(e,function(e){return t.test("string"==typeof e.className&&e.className||"undefined"!=typeof e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(e,t,n){return function(r){var i=oe.attr(r,e);return null==i?"!="===t:!t||(i+="","="===t?i===n:"!="===t?i!==n:"^="===t?n&&0===i.indexOf(n):"*="===t?n&&i.indexOf(n)>-1:"$="===t?n&&i.slice(-n.length)===n:"~="===t?(" "+i.replace(W," ")+" ").indexOf(n)>-1:"|="===t&&(i===n||i.slice(0,n.length+1)===n+"-"))}},CHILD:function(e,t,n,r,i){var o="nth"!==e.slice(0,3),a="last"!==e.slice(-4),u="of-type"===t;return 1===r&&0===i?function(e){return!!e.parentNode}:function(t,n,s){var l,c,f,d,p,h,g=o!==a?"nextSibling":"previousSibling",v=t.parentNode,y=u&&t.nodeName.toLowerCase(),m=!s&&!u,b=!1;if(v){if(o){while(g){d=t;while(d=d[g])if(u?d.nodeName.toLowerCase()===y:1===d.nodeType)return!1;h=g="only"===e&&!h&&"nextSibling"}return!0}if(h=[a?v.firstChild:v.lastChild],a&&m){b=(p=(l=(c=(f=(d=v)[x]||(d[x]={}))[d.uniqueID]||(f[d.uniqueID]={}))[e]||[])[0]===C&&l[1])&&l[2],d=p&&v.childNodes[p];while(d=++p&&d&&d[g]||(b=p=0)||h.pop())if(1===d.nodeType&&++b&&d===t){c[e]=[C,p,b];break}}else if(m&&(b=p=(l=(c=(f=(d=t)[x]||(d[x]={}))[d.uniqueID]||(f[d.uniqueID]={}))[e]||[])[0]===C&&l[1]),!1===b)while(d=++p&&d&&d[g]||(b=p=0)||h.pop())if((u?d.nodeName.toLowerCase()===y:1===d.nodeType)&&++b&&(m&&((c=(f=d[x]||(d[x]={}))[d.uniqueID]||(f[d.uniqueID]={}))[e]=[C,b]),d===t))break;return(b-=i)===r||b%r==0&&b/r>=0}}},PSEUDO:function(e,t){var n,i=r.pseudos[e]||r.setFilters[e.toLowerCase()]||oe.error("unsupported pseudo: "+e);return i[x]?i(t):i.length>1?(n=[e,e,"",t],r.setFilters.hasOwnProperty(e.toLowerCase())?ue(function(e,n){var r,o=i(e,t),a=o.length;while(a--)e[r=P(e,o[a])]=!(n[r]=o[a])}):function(e){return i(e,0,n)}):i}},pseudos:{not:ue(function(e){var t=[],n=[],r=u(e.replace($,"$1"));return r[x]?ue(function(e,t,n,i){var o,a=r(e,null,i,[]),u=e.length;while(u--)(o=a[u])&&(e[u]=!(t[u]=o))}):function(e,i,o){return t[0]=e,r(t,null,o,n),t[0]=null,!n.pop()}}),has:ue(function(e){return function(t){return oe(e,t).length>0}}),contains:ue(function(e){return e=e.replace(Z,ee),function(t){return(t.textContent||t.innerText||i(t)).indexOf(e)>-1}}),lang:ue(function(e){return V.test(e||"")||oe.error("unsupported lang: "+e),e=e.replace(Z,ee).toLowerCase(),function(t){var n;do{if(n=g?t.lang:t.getAttribute("xml:lang")||t.getAttribute("lang"))return(n=n.toLowerCase())===e||0===n.indexOf(e+"-")}while((t=t.parentNode)&&1===t.nodeType);return!1}}),target:function(t){var n=e.location&&e.location.hash;return n&&n.slice(1)===t.id},root:function(e){return e===h},focus:function(e){return e===p.activeElement&&(!p.hasFocus||p.hasFocus())&&!!(e.type||e.href||~e.tabIndex)},enabled:pe(!1),disabled:pe(!0),checked:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&!!e.checked||"option"===t&&!!e.selected},selected:function(e){return e.parentNode&&e.parentNode.selectedIndex,!0===e.selected},empty:function(e){for(e=e.firstChild;e;e=e.nextSibling)if(e.nodeType<6)return!1;return!0},parent:function(e){return!r.pseudos.empty(e)},header:function(e){return Y.test(e.nodeName)},input:function(e){return Q.test(e.nodeName)},button:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&"button"===e.type||"button"===t},text:function(e){var t;return"input"===e.nodeName.toLowerCase()&&"text"===e.type&&(null==(t=e.getAttribute("type"))||"text"===t.toLowerCase())},first:he(function(){return[0]}),last:he(function(e,t){return[t-1]}),eq:he(function(e,t,n){return[n<0?n+t:n]}),even:he(function(e,t){for(var n=0;n=0;)e.push(r);return e}),gt:he(function(e,t,n){for(var r=n<0?n+t:n;++r1?function(t,n,r){var i=e.length;while(i--)if(!e[i](t,n,r))return!1;return!0}:e[0]}function xe(e,t,n){for(var r=0,i=t.length;r-1&&(o[l]=!(a[l]=f))}}else y=we(y===a?y.splice(h,y.length):y),i?i(null,a,y,s):q.apply(a,y)})}function Te(e){for(var t,n,i,o=e.length,a=r.relative[e[0].type],u=a||r.relative[" "],s=a?1:0,c=me(function(e){return e===t},u,!0),f=me(function(e){return P(t,e)>-1},u,!0),d=[function(e,n,r){var i=!a&&(r||n!==l)||((t=n).nodeType?c(e,n,r):f(e,n,r));return t=null,i}];s1&&be(d),s>1&&ye(e.slice(0,s-1).concat({value:" "===e[s-2].type?"*":""})).replace($,"$1"),n,s0,i=e.length>0,o=function(o,a,u,s,c){var f,h,v,y=0,m="0",b=o&&[],x=[],w=l,T=o||i&&r.find.TAG("*",c),E=C+=null==w?1:Math.random()||.1,N=T.length;for(c&&(l=a===p||a||c);m!==N&&null!=(f=T[m]);m++){if(i&&f){h=0,a||f.ownerDocument===p||(d(f),u=!g);while(v=e[h++])if(v(f,a||p,u)){s.push(f);break}c&&(C=E)}n&&((f=!v&&f)&&y--,o&&b.push(f))}if(y+=m,n&&m!==y){h=0;while(v=t[h++])v(b,x,a,u);if(o){if(y>0)while(m--)b[m]||x[m]||(x[m]=L.call(s));x=we(x)}q.apply(s,x),c&&!o&&x.length>0&&y+t.length>1&&oe.uniqueSort(s)}return c&&(C=E,l=w),b};return n?ue(o):o}return u=oe.compile=function(e,t){var n,r=[],i=[],o=k[e+" "];if(!o){t||(t=a(e)),n=t.length;while(n--)(o=Te(t[n]))[x]?r.push(o):i.push(o);(o=k(e,Ee(i,r))).selector=e}return o},s=oe.select=function(e,t,n,i){var o,s,l,c,f,d="function"==typeof e&&e,p=!i&&a(e=d.selector||e);if(n=n||[],1===p.length){if((s=p[0]=p[0].slice(0)).length>2&&"ID"===(l=s[0]).type&&9===t.nodeType&&g&&r.relative[s[1].type]){if(!(t=(r.find.ID(l.matches[0].replace(Z,ee),t)||[])[0]))return n;d&&(t=t.parentNode),e=e.slice(s.shift().value.length)}o=X.needsContext.test(e)?0:s.length;while(o--){if(l=s[o],r.relative[c=l.type])break;if((f=r.find[c])&&(i=f(l.matches[0].replace(Z,ee),J.test(s[0].type)&&ge(t.parentNode)||t))){if(s.splice(o,1),!(e=i.length&&ye(s)))return q.apply(n,i),n;break}}}return(d||u(e,p))(i,t,!g,n,!t||J.test(e)&&ge(t.parentNode)||t),n},n.sortStable=x.split("").sort(A).join("")===x,n.detectDuplicates=!!f,d(),n.sortDetached=se(function(e){return 1&e.compareDocumentPosition(p.createElement("fieldset"))}),se(function(e){return e.innerHTML="","#"===e.firstChild.getAttribute("href")})||le("type|href|height|width",function(e,t,n){if(!n)return e.getAttribute(t,"type"===t.toLowerCase()?1:2)}),n.attributes&&se(function(e){return e.innerHTML="",e.firstChild.setAttribute("value",""),""===e.firstChild.getAttribute("value")})||le("value",function(e,t,n){if(!n&&"input"===e.nodeName.toLowerCase())return e.defaultValue}),se(function(e){return null==e.getAttribute("disabled")})||le(H,function(e,t,n){var r;if(!n)return!0===e[t]?t.toLowerCase():(r=e.getAttributeNode(t))&&r.specified?r.value:null}),oe}(e);w.find=E,w.expr=E.selectors,w.expr[":"]=w.expr.pseudos,w.uniqueSort=w.unique=E.uniqueSort,w.text=E.getText,w.isXMLDoc=E.isXML,w.contains=E.contains,w.escapeSelector=E.escape;var N=function(e,t,n){var r=[],i=void 0!==n;while((e=e[t])&&9!==e.nodeType)if(1===e.nodeType){if(i&&w(e).is(n))break;r.push(e)}return r},k=function(e,t){for(var n=[];e;e=e.nextSibling)1===e.nodeType&&e!==t&&n.push(e);return n},A=w.expr.match.needsContext;function D(e,t){return e.nodeName&&e.nodeName.toLowerCase()===t.toLowerCase()}var S=/^<([a-z][^\/\0>:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function L(e,t,n){return g(t)?w.grep(e,function(e,r){return!!t.call(e,r,e)!==n}):t.nodeType?w.grep(e,function(e){return e===t!==n}):"string"!=typeof t?w.grep(e,function(e){return s.call(t,e)>-1!==n}):w.filter(t,e,n)}w.filter=function(e,t,n){var r=t[0];return n&&(e=":not("+e+")"),1===t.length&&1===r.nodeType?w.find.matchesSelector(r,e)?[r]:[]:w.find.matches(e,w.grep(t,function(e){return 1===e.nodeType}))},w.fn.extend({find:function(e){var t,n,r=this.length,i=this;if("string"!=typeof e)return this.pushStack(w(e).filter(function(){for(t=0;t1?w.uniqueSort(n):n},filter:function(e){return this.pushStack(L(this,e||[],!1))},not:function(e){return this.pushStack(L(this,e||[],!0))},is:function(e){return!!L(this,"string"==typeof e&&A.test(e)?w(e):e||[],!1).length}});var j,q=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]+))$/;(w.fn.init=function(e,t,n){var i,o;if(!e)return this;if(n=n||j,"string"==typeof e){if(!(i="<"===e[0]&&">"===e[e.length-1]&&e.length>=3?[null,e,null]:q.exec(e))||!i[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(i[1]){if(t=t instanceof w?t[0]:t,w.merge(this,w.parseHTML(i[1],t&&t.nodeType?t.ownerDocument||t:r,!0)),S.test(i[1])&&w.isPlainObject(t))for(i in t)g(this[i])?this[i](t[i]):this.attr(i,t[i]);return this}return(o=r.getElementById(i[2]))&&(this[0]=o,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):g(e)?void 0!==n.ready?n.ready(e):e(w):w.makeArray(e,this)}).prototype=w.fn,j=w(r);var O=/^(?:parents|prev(?:Until|All))/,P={children:!0,contents:!0,next:!0,prev:!0};w.fn.extend({has:function(e){var t=w(e,this),n=t.length;return this.filter(function(){for(var e=0;e-1:1===n.nodeType&&w.find.matchesSelector(n,e))){o.push(n);break}return this.pushStack(o.length>1?w.uniqueSort(o):o)},index:function(e){return e?"string"==typeof e?s.call(w(e),this[0]):s.call(this,e.jquery?e[0]:e):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(e,t){return this.pushStack(w.uniqueSort(w.merge(this.get(),w(e,t))))},addBack:function(e){return this.add(null==e?this.prevObject:this.prevObject.filter(e))}});function H(e,t){while((e=e[t])&&1!==e.nodeType);return e}w.each({parent:function(e){var t=e.parentNode;return t&&11!==t.nodeType?t:null},parents:function(e){return N(e,"parentNode")},parentsUntil:function(e,t,n){return N(e,"parentNode",n)},next:function(e){return H(e,"nextSibling")},prev:function(e){return H(e,"previousSibling")},nextAll:function(e){return N(e,"nextSibling")},prevAll:function(e){return N(e,"previousSibling")},nextUntil:function(e,t,n){return N(e,"nextSibling",n)},prevUntil:function(e,t,n){return N(e,"previousSibling",n)},siblings:function(e){return k((e.parentNode||{}).firstChild,e)},children:function(e){return k(e.firstChild)},contents:function(e){return D(e,"iframe")?e.contentDocument:(D(e,"template")&&(e=e.content||e),w.merge([],e.childNodes))}},function(e,t){w.fn[e]=function(n,r){var i=w.map(this,t,n);return"Until"!==e.slice(-5)&&(r=n),r&&"string"==typeof r&&(i=w.filter(r,i)),this.length>1&&(P[e]||w.uniqueSort(i),O.test(e)&&i.reverse()),this.pushStack(i)}});var I=/[^\x20\t\r\n\f]+/g;function R(e){var t={};return w.each(e.match(I)||[],function(e,n){t[n]=!0}),t}w.Callbacks=function(e){e="string"==typeof e?R(e):w.extend({},e);var t,n,r,i,o=[],a=[],u=-1,s=function(){for(i=i||e.once,r=t=!0;a.length;u=-1){n=a.shift();while(++u-1)o.splice(n,1),n<=u&&u--}),this},has:function(e){return e?w.inArray(e,o)>-1:o.length>0},empty:function(){return o&&(o=[]),this},disable:function(){return i=a=[],o=n="",this},disabled:function(){return!o},lock:function(){return i=a=[],n||t||(o=n=""),this},locked:function(){return!!i},fireWith:function(e,n){return i||(n=[e,(n=n||[]).slice?n.slice():n],a.push(n),t||s()),this},fire:function(){return l.fireWith(this,arguments),this},fired:function(){return!!r}};return l};function B(e){return e}function M(e){throw e}function W(e,t,n,r){var i;try{e&&g(i=e.promise)?i.call(e).done(t).fail(n):e&&g(i=e.then)?i.call(e,t,n):t.apply(void 0,[e].slice(r))}catch(e){n.apply(void 0,[e])}}w.extend({Deferred:function(t){var n=[["notify","progress",w.Callbacks("memory"),w.Callbacks("memory"),2],["resolve","done",w.Callbacks("once memory"),w.Callbacks("once memory"),0,"resolved"],["reject","fail",w.Callbacks("once memory"),w.Callbacks("once memory"),1,"rejected"]],r="pending",i={state:function(){return r},always:function(){return o.done(arguments).fail(arguments),this},"catch":function(e){return i.then(null,e)},pipe:function(){var e=arguments;return w.Deferred(function(t){w.each(n,function(n,r){var i=g(e[r[4]])&&e[r[4]];o[r[1]](function(){var e=i&&i.apply(this,arguments);e&&g(e.promise)?e.promise().progress(t.notify).done(t.resolve).fail(t.reject):t[r[0]+"With"](this,i?[e]:arguments)})}),e=null}).promise()},then:function(t,r,i){var o=0;function a(t,n,r,i){return function(){var u=this,s=arguments,l=function(){var e,l;if(!(t=o&&(r!==M&&(u=void 0,s=[e]),n.rejectWith(u,s))}};t?c():(w.Deferred.getStackHook&&(c.stackTrace=w.Deferred.getStackHook()),e.setTimeout(c))}}return w.Deferred(function(e){n[0][3].add(a(0,e,g(i)?i:B,e.notifyWith)),n[1][3].add(a(0,e,g(t)?t:B)),n[2][3].add(a(0,e,g(r)?r:M))}).promise()},promise:function(e){return null!=e?w.extend(e,i):i}},o={};return w.each(n,function(e,t){var a=t[2],u=t[5];i[t[1]]=a.add,u&&a.add(function(){r=u},n[3-e][2].disable,n[3-e][3].disable,n[0][2].lock,n[0][3].lock),a.add(t[3].fire),o[t[0]]=function(){return o[t[0]+"With"](this===o?void 0:this,arguments),this},o[t[0]+"With"]=a.fireWith}),i.promise(o),t&&t.call(o,o),o},when:function(e){var t=arguments.length,n=t,r=Array(n),i=o.call(arguments),a=w.Deferred(),u=function(e){return function(n){r[e]=this,i[e]=arguments.length>1?o.call(arguments):n,--t||a.resolveWith(r,i)}};if(t<=1&&(W(e,a.done(u(n)).resolve,a.reject,!t),"pending"===a.state()||g(i[n]&&i[n].then)))return a.then();while(n--)W(i[n],u(n),a.reject);return a.promise()}});var $=/^(Eval|Internal|Range|Reference|Syntax|Type|URI)Error$/;w.Deferred.exceptionHook=function(t,n){e.console&&e.console.warn&&t&&$.test(t.name)&&e.console.warn("jQuery.Deferred exception: "+t.message,t.stack,n)},w.readyException=function(t){e.setTimeout(function(){throw t})};var F=w.Deferred();w.fn.ready=function(e){return F.then(e)["catch"](function(e){w.readyException(e)}),this},w.extend({isReady:!1,readyWait:1,ready:function(e){(!0===e?--w.readyWait:w.isReady)||(w.isReady=!0,!0!==e&&--w.readyWait>0||F.resolveWith(r,[w]))}}),w.ready.then=F.then;function z(){r.removeEventListener("DOMContentLoaded",z),e.removeEventListener("load",z),w.ready()}"complete"===r.readyState||"loading"!==r.readyState&&!r.documentElement.doScroll?e.setTimeout(w.ready):(r.addEventListener("DOMContentLoaded",z),e.addEventListener("load",z));var _=function(e,t,n,r,i,o,a){var u=0,s=e.length,l=null==n;if("object"===b(n)){i=!0;for(u in n)_(e,t,u,n[u],!0,o,a)}else if(void 0!==r&&(i=!0,g(r)||(a=!0),l&&(a?(t.call(e,r),t=null):(l=t,t=function(e,t,n){return l.call(w(e),n)})),t))for(;u1,null,!0)},removeData:function(e){return this.each(function(){J.remove(this,e)})}}),w.extend({queue:function(e,t,n){var r;if(e)return t=(t||"fx")+"queue",r=K.get(e,t),n&&(!r||Array.isArray(n)?r=K.access(e,t,w.makeArray(n)):r.push(n)),r||[]},dequeue:function(e,t){t=t||"fx";var n=w.queue(e,t),r=n.length,i=n.shift(),o=w._queueHooks(e,t),a=function(){w.dequeue(e,t)};"inprogress"===i&&(i=n.shift(),r--),i&&("fx"===t&&n.unshift("inprogress"),delete o.stop,i.call(e,a,o)),!r&&o&&o.empty.fire()},_queueHooks:function(e,t){var n=t+"queueHooks";return K.get(e,n)||K.access(e,n,{empty:w.Callbacks("once memory").add(function(){K.remove(e,[t+"queue",n])})})}}),w.fn.extend({queue:function(e,t){var n=2;return"string"!=typeof e&&(t=e,e="fx",n--),arguments.length\x20\t\r\n\f]+)/i,he=/^$|^module$|\/(?:java|ecma)script/i,ge={option:[1,""],thead:[1,"","
"],col:[2,"","
"],tr:[2,"","
"],td:[3,"","
"],_default:[0,"",""]};ge.optgroup=ge.option,ge.tbody=ge.tfoot=ge.colgroup=ge.caption=ge.thead,ge.th=ge.td;function ve(e,t){var n;return n="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&D(e,t)?w.merge([e],n):n}function ye(e,t){for(var n=0,r=e.length;n-1)i&&i.push(o);else if(l=w.contains(o.ownerDocument,o),a=ve(f.appendChild(o),"script"),l&&ye(a),n){c=0;while(o=a[c++])he.test(o.type||"")&&n.push(o)}return f}!function(){var e=r.createDocumentFragment().appendChild(r.createElement("div")),t=r.createElement("input");t.setAttribute("type","radio"),t.setAttribute("checked","checked"),t.setAttribute("name","t"),e.appendChild(t),h.checkClone=e.cloneNode(!0).cloneNode(!0).lastChild.checked,e.innerHTML="",h.noCloneChecked=!!e.cloneNode(!0).lastChild.defaultValue}();var xe=r.documentElement,we=/^key/,Ce=/^(?:mouse|pointer|contextmenu|drag|drop)|click/,Te=/^([^.]*)(?:\.(.+)|)/;function Ee(){return!0}function Ne(){return!1}function ke(){try{return r.activeElement}catch(e){}}function Ae(e,t,n,r,i,o){var a,u;if("object"==typeof t){"string"!=typeof n&&(r=r||n,n=void 0);for(u in t)Ae(e,u,n,r,t[u],o);return e}if(null==r&&null==i?(i=n,r=n=void 0):null==i&&("string"==typeof n?(i=r,r=void 0):(i=r,r=n,n=void 0)),!1===i)i=Ne;else if(!i)return e;return 1===o&&(a=i,(i=function(e){return w().off(e),a.apply(this,arguments)}).guid=a.guid||(a.guid=w.guid++)),e.each(function(){w.event.add(this,t,i,r,n)})}w.event={global:{},add:function(e,t,n,r,i){var o,a,u,s,l,c,f,d,p,h,g,v=K.get(e);if(v){n.handler&&(n=(o=n).handler,i=o.selector),i&&w.find.matchesSelector(xe,i),n.guid||(n.guid=w.guid++),(s=v.events)||(s=v.events={}),(a=v.handle)||(a=v.handle=function(t){return"undefined"!=typeof w&&w.event.triggered!==t.type?w.event.dispatch.apply(e,arguments):void 0}),l=(t=(t||"").match(I)||[""]).length;while(l--)p=g=(u=Te.exec(t[l])||[])[1],h=(u[2]||"").split(".").sort(),p&&(f=w.event.special[p]||{},p=(i?f.delegateType:f.bindType)||p,f=w.event.special[p]||{},c=w.extend({type:p,origType:g,data:r,handler:n,guid:n.guid,selector:i,needsContext:i&&w.expr.match.needsContext.test(i),namespace:h.join(".")},o),(d=s[p])||((d=s[p]=[]).delegateCount=0,f.setup&&!1!==f.setup.call(e,r,h,a)||e.addEventListener&&e.addEventListener(p,a)),f.add&&(f.add.call(e,c),c.handler.guid||(c.handler.guid=n.guid)),i?d.splice(d.delegateCount++,0,c):d.push(c),w.event.global[p]=!0)}},remove:function(e,t,n,r,i){var o,a,u,s,l,c,f,d,p,h,g,v=K.hasData(e)&&K.get(e);if(v&&(s=v.events)){l=(t=(t||"").match(I)||[""]).length;while(l--)if(u=Te.exec(t[l])||[],p=g=u[1],h=(u[2]||"").split(".").sort(),p){f=w.event.special[p]||{},d=s[p=(r?f.delegateType:f.bindType)||p]||[],u=u[2]&&new RegExp("(^|\\.)"+h.join("\\.(?:.*\\.|)")+"(\\.|$)"),a=o=d.length;while(o--)c=d[o],!i&&g!==c.origType||n&&n.guid!==c.guid||u&&!u.test(c.namespace)||r&&r!==c.selector&&("**"!==r||!c.selector)||(d.splice(o,1),c.selector&&d.delegateCount--,f.remove&&f.remove.call(e,c));a&&!d.length&&(f.teardown&&!1!==f.teardown.call(e,h,v.handle)||w.removeEvent(e,p,v.handle),delete s[p])}else for(p in s)w.event.remove(e,p+t[l],n,r,!0);w.isEmptyObject(s)&&K.remove(e,"handle events")}},dispatch:function(e){var t=w.event.fix(e),n,r,i,o,a,u,s=new Array(arguments.length),l=(K.get(this,"events")||{})[t.type]||[],c=w.event.special[t.type]||{};for(s[0]=t,n=1;n=1))for(;l!==this;l=l.parentNode||this)if(1===l.nodeType&&("click"!==e.type||!0!==l.disabled)){for(o=[],a={},n=0;n-1:w.find(i,this,null,[l]).length),a[i]&&o.push(r);o.length&&u.push({elem:l,handlers:o})}return l=this,s\x20\t\r\n\f]*)[^>]*)\/>/gi,Se=/\s*$/g;function qe(e,t){return D(e,"table")&&D(11!==t.nodeType?t:t.firstChild,"tr")?w(e).children("tbody")[0]||e:e}function Oe(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function Pe(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function He(e,t){var n,r,i,o,a,u,s,l;if(1===t.nodeType){if(K.hasData(e)&&(o=K.access(e),a=K.set(t,o),l=o.events)){delete a.handle,a.events={};for(i in l)for(n=0,r=l[i].length;n1&&"string"==typeof v&&!h.checkClone&&Le.test(v))return e.each(function(i){var o=e.eq(i);y&&(t[0]=v.call(this,i,o.html())),Re(o,t,n,r)});if(d&&(i=be(t,e[0].ownerDocument,!1,e,r),o=i.firstChild,1===i.childNodes.length&&(i=o),o||r)){for(s=(u=w.map(ve(i,"script"),Oe)).length;f")},clone:function(e,t,n){var r,i,o,a,u=e.cloneNode(!0),s=w.contains(e.ownerDocument,e);if(!(h.noCloneChecked||1!==e.nodeType&&11!==e.nodeType||w.isXMLDoc(e)))for(a=ve(u),r=0,i=(o=ve(e)).length;r0&&ye(a,!s&&ve(e,"script")),u},cleanData:function(e){for(var t,n,r,i=w.event.special,o=0;void 0!==(n=e[o]);o++)if(Y(n)){if(t=n[K.expando]){if(t.events)for(r in t.events)i[r]?w.event.remove(n,r):w.removeEvent(n,r,t.handle);n[K.expando]=void 0}n[J.expando]&&(n[J.expando]=void 0)}}}),w.fn.extend({detach:function(e){return Be(this,e,!0)},remove:function(e){return Be(this,e)},text:function(e){return _(this,function(e){return void 0===e?w.text(this):this.empty().each(function(){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||(this.textContent=e)})},null,e,arguments.length)},append:function(){return Re(this,arguments,function(e){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||qe(this,e).appendChild(e)})},prepend:function(){return Re(this,arguments,function(e){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var t=qe(this,e);t.insertBefore(e,t.firstChild)}})},before:function(){return Re(this,arguments,function(e){this.parentNode&&this.parentNode.insertBefore(e,this)})},after:function(){return Re(this,arguments,function(e){this.parentNode&&this.parentNode.insertBefore(e,this.nextSibling)})},empty:function(){for(var e,t=0;null!=(e=this[t]);t++)1===e.nodeType&&(w.cleanData(ve(e,!1)),e.textContent="");return this},clone:function(e,t){return e=null!=e&&e,t=null==t?e:t,this.map(function(){return w.clone(this,e,t)})},html:function(e){return _(this,function(e){var t=this[0]||{},n=0,r=this.length;if(void 0===e&&1===t.nodeType)return t.innerHTML;if("string"==typeof e&&!Se.test(e)&&!ge[(pe.exec(e)||["",""])[1].toLowerCase()]){e=w.htmlPrefilter(e);try{for(;n=0&&(s+=Math.max(0,Math.ceil(e["offset"+t[0].toUpperCase()+t.slice(1)]-o-s-u-.5))),s}function et(e,t,n){var r=We(e),i=Fe(e,t,r),o="border-box"===w.css(e,"boxSizing",!1,r),a=o;if(Me.test(i)){if(!n)return i;i="auto"}return a=a&&(h.boxSizingReliable()||i===e.style[t]),("auto"===i||!parseFloat(i)&&"inline"===w.css(e,"display",!1,r))&&(i=e["offset"+t[0].toUpperCase()+t.slice(1)],a=!0),(i=parseFloat(i)||0)+Ze(e,t,n||(o?"border":"content"),a,r,i)+"px"}w.extend({cssHooks:{opacity:{get:function(e,t){if(t){var n=Fe(e,"opacity");return""===n?"1":n}}}},cssNumber:{animationIterationCount:!0,columnCount:!0,fillOpacity:!0,flexGrow:!0,flexShrink:!0,fontWeight:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{},style:function(e,t,n,r){if(e&&3!==e.nodeType&&8!==e.nodeType&&e.style){var i,o,a,u=Q(t),s=Ue.test(t),l=e.style;if(s||(t=Ke(u)),a=w.cssHooks[t]||w.cssHooks[u],void 0===n)return a&&"get"in a&&void 0!==(i=a.get(e,!1,r))?i:l[t];"string"==(o=typeof n)&&(i=ie.exec(n))&&i[1]&&(n=se(e,t,i),o="number"),null!=n&&n===n&&("number"===o&&(n+=i&&i[3]||(w.cssNumber[u]?"":"px")),h.clearCloneStyle||""!==n||0!==t.indexOf("background")||(l[t]="inherit"),a&&"set"in a&&void 0===(n=a.set(e,n,r))||(s?l.setProperty(t,n):l[t]=n))}},css:function(e,t,n,r){var i,o,a,u=Q(t);return Ue.test(t)||(t=Ke(u)),(a=w.cssHooks[t]||w.cssHooks[u])&&"get"in a&&(i=a.get(e,!0,n)),void 0===i&&(i=Fe(e,t,r)),"normal"===i&&t in Xe&&(i=Xe[t]),""===n||n?(o=parseFloat(i),!0===n||isFinite(o)?o||0:i):i}}),w.each(["height","width"],function(e,t){w.cssHooks[t]={get:function(e,n,r){if(n)return!_e.test(w.css(e,"display"))||e.getClientRects().length&&e.getBoundingClientRect().width?et(e,t,r):ue(e,Ve,function(){return et(e,t,r)})},set:function(e,n,r){var i,o=We(e),a="border-box"===w.css(e,"boxSizing",!1,o),u=r&&Ze(e,t,r,a,o);return a&&h.scrollboxSize()===o.position&&(u-=Math.ceil(e["offset"+t[0].toUpperCase()+t.slice(1)]-parseFloat(o[t])-Ze(e,t,"border",!1,o)-.5)),u&&(i=ie.exec(n))&&"px"!==(i[3]||"px")&&(e.style[t]=n,n=w.css(e,t)),Je(e,n,u)}}}),w.cssHooks.marginLeft=ze(h.reliableMarginLeft,function(e,t){if(t)return(parseFloat(Fe(e,"marginLeft"))||e.getBoundingClientRect().left-ue(e,{marginLeft:0},function(){return e.getBoundingClientRect().left}))+"px"}),w.each({margin:"",padding:"",border:"Width"},function(e,t){w.cssHooks[e+t]={expand:function(n){for(var r=0,i={},o="string"==typeof n?n.split(" "):[n];r<4;r++)i[e+oe[r]+t]=o[r]||o[r-2]||o[0];return i}},"margin"!==e&&(w.cssHooks[e+t].set=Je)}),w.fn.extend({css:function(e,t){return _(this,function(e,t,n){var r,i,o={},a=0;if(Array.isArray(t)){for(r=We(e),i=t.length;a1)}}),w.fn.delay=function(t,n){return t=w.fx?w.fx.speeds[t]||t:t,n=n||"fx",this.queue(n,function(n,r){var i=e.setTimeout(n,t);r.stop=function(){e.clearTimeout(i)}})},function(){var e=r.createElement("input"),t=r.createElement("select").appendChild(r.createElement("option"));e.type="checkbox",h.checkOn=""!==e.value,h.optSelected=t.selected,(e=r.createElement("input")).value="t",e.type="radio",h.radioValue="t"===e.value}();var tt,nt=w.expr.attrHandle;w.fn.extend({attr:function(e,t){return _(this,w.attr,e,t,arguments.length>1)},removeAttr:function(e){return this.each(function(){w.removeAttr(this,e)})}}),w.extend({attr:function(e,t,n){var r,i,o=e.nodeType;if(3!==o&&8!==o&&2!==o)return"undefined"==typeof e.getAttribute?w.prop(e,t,n):(1===o&&w.isXMLDoc(e)||(i=w.attrHooks[t.toLowerCase()]||(w.expr.match.bool.test(t)?tt:void 0)),void 0!==n?null===n?void w.removeAttr(e,t):i&&"set"in i&&void 0!==(r=i.set(e,n,t))?r:(e.setAttribute(t,n+""),n):i&&"get"in i&&null!==(r=i.get(e,t))?r:null==(r=w.find.attr(e,t))?void 0:r)},attrHooks:{type:{set:function(e,t){if(!h.radioValue&&"radio"===t&&D(e,"input")){var n=e.value;return e.setAttribute("type",t),n&&(e.value=n),t}}}},removeAttr:function(e,t){var n,r=0,i=t&&t.match(I);if(i&&1===e.nodeType)while(n=i[r++])e.removeAttribute(n)}}),tt={set:function(e,t,n){return!1===t?w.removeAttr(e,n):e.setAttribute(n,n),n}},w.each(w.expr.match.bool.source.match(/\w+/g),function(e,t){var n=nt[t]||w.find.attr;nt[t]=function(e,t,r){var i,o,a=t.toLowerCase();return r||(o=nt[a],nt[a]=i,i=null!=n(e,t,r)?a:null,nt[a]=o),i}});var rt=/^(?:input|select|textarea|button)$/i,it=/^(?:a|area)$/i;w.fn.extend({prop:function(e,t){return _(this,w.prop,e,t,arguments.length>1)},removeProp:function(e){return this.each(function(){delete this[w.propFix[e]||e]})}}),w.extend({prop:function(e,t,n){var r,i,o=e.nodeType;if(3!==o&&8!==o&&2!==o)return 1===o&&w.isXMLDoc(e)||(t=w.propFix[t]||t,i=w.propHooks[t]),void 0!==n?i&&"set"in i&&void 0!==(r=i.set(e,n,t))?r:e[t]=n:i&&"get"in i&&null!==(r=i.get(e,t))?r:e[t]},propHooks:{tabIndex:{get:function(e){var t=w.find.attr(e,"tabindex");return t?parseInt(t,10):rt.test(e.nodeName)||it.test(e.nodeName)&&e.href?0:-1}}},propFix:{"for":"htmlFor","class":"className"}}),h.optSelected||(w.propHooks.selected={get:function(e){var t=e.parentNode;return t&&t.parentNode&&t.parentNode.selectedIndex,null},set:function(e){var t=e.parentNode;t&&(t.selectedIndex,t.parentNode&&t.parentNode.selectedIndex)}}),w.each(["tabIndex","readOnly","maxLength","cellSpacing","cellPadding","rowSpan","colSpan","useMap","frameBorder","contentEditable"],function(){w.propFix[this.toLowerCase()]=this});function ot(e){return(e.match(I)||[]).join(" ")}function at(e){return e.getAttribute&&e.getAttribute("class")||""}function ut(e){return Array.isArray(e)?e:"string"==typeof e?e.match(I)||[]:[]}w.fn.extend({addClass:function(e){var t,n,r,i,o,a,u,s=0;if(g(e))return this.each(function(t){w(this).addClass(e.call(this,t,at(this)))});if((t=ut(e)).length)while(n=this[s++])if(i=at(n),r=1===n.nodeType&&" "+ot(i)+" "){a=0;while(o=t[a++])r.indexOf(" "+o+" ")<0&&(r+=o+" ");i!==(u=ot(r))&&n.setAttribute("class",u)}return this},removeClass:function(e){var t,n,r,i,o,a,u,s=0;if(g(e))return this.each(function(t){w(this).removeClass(e.call(this,t,at(this)))});if(!arguments.length)return this.attr("class","");if((t=ut(e)).length)while(n=this[s++])if(i=at(n),r=1===n.nodeType&&" "+ot(i)+" "){a=0;while(o=t[a++])while(r.indexOf(" "+o+" ")>-1)r=r.replace(" "+o+" "," ");i!==(u=ot(r))&&n.setAttribute("class",u)}return this},toggleClass:function(e,t){var n=typeof e,r="string"===n||Array.isArray(e);return"boolean"==typeof t&&r?t?this.addClass(e):this.removeClass(e):g(e)?this.each(function(n){w(this).toggleClass(e.call(this,n,at(this),t),t)}):this.each(function(){var t,i,o,a;if(r){i=0,o=w(this),a=ut(e);while(t=a[i++])o.hasClass(t)?o.removeClass(t):o.addClass(t)}else void 0!==e&&"boolean"!==n||((t=at(this))&&K.set(this,"__className__",t),this.setAttribute&&this.setAttribute("class",t||!1===e?"":K.get(this,"__className__")||""))})},hasClass:function(e){var t,n,r=0;t=" "+e+" ";while(n=this[r++])if(1===n.nodeType&&(" "+ot(at(n))+" ").indexOf(t)>-1)return!0;return!1}});var st=/\r/g;w.fn.extend({val:function(e){var t,n,r,i=this[0];{if(arguments.length)return r=g(e),this.each(function(n){var i;1===this.nodeType&&(null==(i=r?e.call(this,n,w(this).val()):e)?i="":"number"==typeof i?i+="":Array.isArray(i)&&(i=w.map(i,function(e){return null==e?"":e+""})),(t=w.valHooks[this.type]||w.valHooks[this.nodeName.toLowerCase()])&&"set"in t&&void 0!==t.set(this,i,"value")||(this.value=i))});if(i)return(t=w.valHooks[i.type]||w.valHooks[i.nodeName.toLowerCase()])&&"get"in t&&void 0!==(n=t.get(i,"value"))?n:"string"==typeof(n=i.value)?n.replace(st,""):null==n?"":n}}}),w.extend({valHooks:{option:{get:function(e){var t=w.find.attr(e,"value");return null!=t?t:ot(w.text(e))}},select:{get:function(e){var t,n,r,i=e.options,o=e.selectedIndex,a="select-one"===e.type,u=a?null:[],s=a?o+1:i.length;for(r=o<0?s:a?o:0;r-1)&&(n=!0);return n||(e.selectedIndex=-1),o}}}}),w.each(["radio","checkbox"],function(){w.valHooks[this]={set:function(e,t){if(Array.isArray(t))return e.checked=w.inArray(w(e).val(),t)>-1}},h.checkOn||(w.valHooks[this].get=function(e){return null===e.getAttribute("value")?"on":e.value})}),h.focusin="onfocusin"in e;var lt=/^(?:focusinfocus|focusoutblur)$/,ct=function(e){e.stopPropagation()};w.extend(w.event,{trigger:function(t,n,i,o){var a,u,s,l,c,d,p,h,y=[i||r],m=f.call(t,"type")?t.type:t,b=f.call(t,"namespace")?t.namespace.split("."):[];if(u=h=s=i=i||r,3!==i.nodeType&&8!==i.nodeType&&!lt.test(m+w.event.triggered)&&(m.indexOf(".")>-1&&(m=(b=m.split(".")).shift(),b.sort()),c=m.indexOf(":")<0&&"on"+m,t=t[w.expando]?t:new w.Event(m,"object"==typeof t&&t),t.isTrigger=o?2:3,t.namespace=b.join("."),t.rnamespace=t.namespace?new RegExp("(^|\\.)"+b.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,t.result=void 0,t.target||(t.target=i),n=null==n?[t]:w.makeArray(n,[t]),p=w.event.special[m]||{},o||!p.trigger||!1!==p.trigger.apply(i,n))){if(!o&&!p.noBubble&&!v(i)){for(l=p.delegateType||m,lt.test(l+m)||(u=u.parentNode);u;u=u.parentNode)y.push(u),s=u;s===(i.ownerDocument||r)&&y.push(s.defaultView||s.parentWindow||e)}a=0;while((u=y[a++])&&!t.isPropagationStopped())h=u,t.type=a>1?l:p.bindType||m,(d=(K.get(u,"events")||{})[t.type]&&K.get(u,"handle"))&&d.apply(u,n),(d=c&&u[c])&&d.apply&&Y(u)&&(t.result=d.apply(u,n),!1===t.result&&t.preventDefault());return t.type=m,o||t.isDefaultPrevented()||p._default&&!1!==p._default.apply(y.pop(),n)||!Y(i)||c&&g(i[m])&&!v(i)&&((s=i[c])&&(i[c]=null),w.event.triggered=m,t.isPropagationStopped()&&h.addEventListener(m,ct),i[m](),t.isPropagationStopped()&&h.removeEventListener(m,ct),w.event.triggered=void 0,s&&(i[c]=s)),t.result}},simulate:function(e,t,n){var r=w.extend(new w.Event,n,{type:e,isSimulated:!0});w.event.trigger(r,null,t)}}),w.fn.extend({trigger:function(e,t){return this.each(function(){w.event.trigger(e,t,this)})},triggerHandler:function(e,t){var n=this[0];if(n)return w.event.trigger(e,t,n,!0)}}),h.focusin||w.each({focus:"focusin",blur:"focusout"},function(e,t){var n=function(e){w.event.simulate(t,e.target,w.event.fix(e))};w.event.special[t]={setup:function(){var r=this.ownerDocument||this,i=K.access(r,t);i||r.addEventListener(e,n,!0),K.access(r,t,(i||0)+1)},teardown:function(){var r=this.ownerDocument||this,i=K.access(r,t)-1;i?K.access(r,t,i):(r.removeEventListener(e,n,!0),K.remove(r,t))}}});var ft=/\[\]$/,dt=/\r?\n/g,pt=/^(?:submit|button|image|reset|file)$/i,ht=/^(?:input|select|textarea|keygen)/i;function gt(e,t,n,r){var i;if(Array.isArray(t))w.each(t,function(t,i){n||ft.test(e)?r(e,i):gt(e+"["+("object"==typeof i&&null!=i?t:"")+"]",i,n,r)});else if(n||"object"!==b(t))r(e,t);else for(i in t)gt(e+"["+i+"]",t[i],n,r)}w.param=function(e,t){var n,r=[],i=function(e,t){var n=g(t)?t():t;r[r.length]=encodeURIComponent(e)+"="+encodeURIComponent(null==n?"":n)};if(Array.isArray(e)||e.jquery&&!w.isPlainObject(e))w.each(e,function(){i(this.name,this.value)});else for(n in e)gt(n,e[n],t,i);return r.join("&")},w.fn.extend({serialize:function(){return w.param(this.serializeArray())},serializeArray:function(){return this.map(function(){var e=w.prop(this,"elements");return e?w.makeArray(e):this}).filter(function(){var e=this.type;return this.name&&!w(this).is(":disabled")&&ht.test(this.nodeName)&&!pt.test(e)&&(this.checked||!de.test(e))}).map(function(e,t){var n=w(this).val();return null==n?null:Array.isArray(n)?w.map(n,function(e){return{name:t.name,value:e.replace(dt,"\r\n")}}):{name:t.name,value:n.replace(dt,"\r\n")}}).get()}}),w.fn.extend({wrapAll:function(e){var t;return this[0]&&(g(e)&&(e=e.call(this[0])),t=w(e,this[0].ownerDocument).eq(0).clone(!0),this[0].parentNode&&t.insertBefore(this[0]),t.map(function(){var e=this;while(e.firstElementChild)e=e.firstElementChild;return e}).append(this)),this},wrapInner:function(e){return g(e)?this.each(function(t){w(this).wrapInner(e.call(this,t))}):this.each(function(){var t=w(this),n=t.contents();n.length?n.wrapAll(e):t.append(e)})},wrap:function(e){var t=g(e);return this.each(function(n){w(this).wrapAll(t?e.call(this,n):e)})},unwrap:function(e){return this.parent(e).not("body").each(function(){w(this).replaceWith(this.childNodes)}),this}}),w.expr.pseudos.hidden=function(e){return!w.expr.pseudos.visible(e)},w.expr.pseudos.visible=function(e){return!!(e.offsetWidth||e.offsetHeight||e.getClientRects().length)},h.createHTMLDocument=function(){var e=r.implementation.createHTMLDocument("").body;return e.innerHTML="
",2===e.childNodes.length}(),w.parseHTML=function(e,t,n){if("string"!=typeof e)return[];"boolean"==typeof t&&(n=t,t=!1);var i,o,a;return t||(h.createHTMLDocument?((i=(t=r.implementation.createHTMLDocument("")).createElement("base")).href=r.location.href,t.head.appendChild(i)):t=r),o=S.exec(e),a=!n&&[],o?[t.createElement(o[1])]:(o=be([e],t,a),a&&a.length&&w(a).remove(),w.merge([],o.childNodes))},w.offset={setOffset:function(e,t,n){var r,i,o,a,u,s,l,c=w.css(e,"position"),f=w(e),d={};"static"===c&&(e.style.position="relative"),u=f.offset(),o=w.css(e,"top"),s=w.css(e,"left"),(l=("absolute"===c||"fixed"===c)&&(o+s).indexOf("auto")>-1)?(a=(r=f.position()).top,i=r.left):(a=parseFloat(o)||0,i=parseFloat(s)||0),g(t)&&(t=t.call(e,n,w.extend({},u))),null!=t.top&&(d.top=t.top-u.top+a),null!=t.left&&(d.left=t.left-u.left+i),"using"in t?t.using.call(e,d):f.css(d)}},w.fn.extend({offset:function(e){if(arguments.length)return void 0===e?this:this.each(function(t){w.offset.setOffset(this,e,t)});var t,n,r=this[0];if(r)return r.getClientRects().length?(t=r.getBoundingClientRect(),n=r.ownerDocument.defaultView,{top:t.top+n.pageYOffset,left:t.left+n.pageXOffset}):{top:0,left:0}},position:function(){if(this[0]){var e,t,n,r=this[0],i={top:0,left:0};if("fixed"===w.css(r,"position"))t=r.getBoundingClientRect();else{t=this.offset(),n=r.ownerDocument,e=r.offsetParent||n.documentElement;while(e&&(e===n.body||e===n.documentElement)&&"static"===w.css(e,"position"))e=e.parentNode;e&&e!==r&&1===e.nodeType&&((i=w(e).offset()).top+=w.css(e,"borderTopWidth",!0),i.left+=w.css(e,"borderLeftWidth",!0))}return{top:t.top-i.top-w.css(r,"marginTop",!0),left:t.left-i.left-w.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent;while(e&&"static"===w.css(e,"position"))e=e.offsetParent;return e||xe})}}),w.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(e,t){var n="pageYOffset"===t;w.fn[e]=function(r){return _(this,function(e,r,i){var o;if(v(e)?o=e:9===e.nodeType&&(o=e.defaultView),void 0===i)return o?o[t]:e[r];o?o.scrollTo(n?o.pageXOffset:i,n?i:o.pageYOffset):e[r]=i},e,r,arguments.length)}}),w.each(["top","left"],function(e,t){w.cssHooks[t]=ze(h.pixelPosition,function(e,n){if(n)return n=Fe(e,t),Me.test(n)?w(e).position()[t]+"px":n})}),w.each({Height:"height",Width:"width"},function(e,t){w.each({padding:"inner"+e,content:t,"":"outer"+e},function(n,r){w.fn[r]=function(i,o){var a=arguments.length&&(n||"boolean"!=typeof i),u=n||(!0===i||!0===o?"margin":"border");return _(this,function(t,n,i){var o;return v(t)?0===r.indexOf("outer")?t["inner"+e]:t.document.documentElement["client"+e]:9===t.nodeType?(o=t.documentElement,Math.max(t.body["scroll"+e],o["scroll"+e],t.body["offset"+e],o["offset"+e],o["client"+e])):void 0===i?w.css(t,n,u):w.style(t,n,i,u)},t,a?i:void 0,a)}})}),w.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(e,t){w.fn[t]=function(e,n){return arguments.length>0?this.on(t,null,e,n):this.trigger(t)}}),w.fn.extend({hover:function(e,t){return this.mouseenter(e).mouseleave(t||e)}}),w.fn.extend({bind:function(e,t,n){return this.on(e,null,t,n)},unbind:function(e,t){return this.off(e,null,t)},delegate:function(e,t,n,r){return this.on(t,e,n,r)},undelegate:function(e,t,n){return 1===arguments.length?this.off(e,"**"):this.off(t,e||"**",n)}}),w.proxy=function(e,t){var n,r,i;if("string"==typeof t&&(n=e[t],t=e,e=n),g(e))return r=o.call(arguments,2),i=function(){return e.apply(t||this,r.concat(o.call(arguments)))},i.guid=e.guid=e.guid||w.guid++,i},w.holdReady=function(e){e?w.readyWait++:w.ready(!0)},w.isArray=Array.isArray,w.parseJSON=JSON.parse,w.nodeName=D,w.isFunction=g,w.isWindow=v,w.camelCase=Q,w.type=b,w.now=Date.now,w.isNumeric=function(e){var t=w.type(e);return("number"===t||"string"===t)&&!isNaN(e-parseFloat(e))},"function"==typeof define&&define.amd&&define("jquery",[],function(){return w});var vt=e.jQuery,yt=e.$;return w.noConflict=function(t){return e.$===w&&(e.$=yt),t&&e.jQuery===w&&(e.jQuery=vt),w},t||(e.jQuery=e.$=w),w}); diff --git a/assets/lozad-1.14.0.min.js b/assets/lozad-1.14.0.min.js deleted file mode 100644 index b8aa0b2..0000000 --- a/assets/lozad-1.14.0.min.js +++ /dev/null @@ -1,10 +0,0 @@ -/*! lozad.js - v1.14.0 - 2019-10-19 -* https://github.com/ApoorvSaxena/lozad.js -* Copyright (c) 2019 Apoorv Saxena; Licensed MIT */ -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).lozad=e()}(this,function(){"use strict"; -/** - * Detect IE browser - * @const {boolean} - * @private - */var d="undefined"!=typeof document&&document.documentMode,c={rootMargin:"0px",threshold:0,load:function(t){if("picture"===t.nodeName.toLowerCase()){var e=document.createElement("img");d&&t.getAttribute("data-iesrc")&&(e.src=t.getAttribute("data-iesrc")),t.getAttribute("data-alt")&&(e.alt=t.getAttribute("data-alt")),t.append(e)}if("video"===t.nodeName.toLowerCase()&&!t.getAttribute("data-src")&&t.children){for(var r=t.children,a=void 0,o=0;o<=r.length-1;o++)(a=r[o].getAttribute("data-src"))&&(r[o].src=a);t.load()}if(t.getAttribute("data-src")&&(t.src=t.getAttribute("data-src")),t.getAttribute("data-srcset")&&t.setAttribute("srcset",t.getAttribute("data-srcset")),t.getAttribute("data-background-image"))t.style.backgroundImage="url('"+t.getAttribute("data-background-image").split(",").join("'),url('")+"')";else if(t.getAttribute("data-background-image-set")){var i=t.getAttribute("data-background-image-set").split(","),n=i[0].substr(0,i[0].indexOf(" "))||i[0];// Substring before ... 1x -n=-1===n.indexOf("url(")?"url("+n+")":n,1===i.length?t.style.backgroundImage=n:t.setAttribute("style",(t.getAttribute("style")||"")+"background-image: "+n+"; background-image: -webkit-image-set("+i+"); background-image: image-set("+i+")")}t.getAttribute("data-toggle-class")&&t.classList.toggle(t.getAttribute("data-toggle-class"))},loaded:function(){}};function l(t){t.setAttribute("data-loaded",!0)}var b=function(t){return"true"===t.getAttribute("data-loaded")};return function(){var r,a,o=0code[class*="language-"] { - background: #1c2023; - /* #141414 */ -} - -/* Code blocks */ - -pre[class*="language-"] { - border-radius: 0.5em; - /* #282A2B */ - box-shadow: 1px 1px 0.5em black inset; - margin: 0.5em 0; - overflow: auto; - padding: 1em; -} - -pre[class*="language-"]::-moz-selection { - /* Firefox */ - background: hsl(200, 4%, 16%); - /* #282A2B */ -} - -pre[class*="language-"]::selection { - /* Safari */ - background: hsl(200, 4%, 16%); - /* #282A2B */ -} - -/* Text Selection colour */ - -pre[class*="language-"]::-moz-selection, -pre[class*="language-"] ::-moz-selection, -code[class*="language-"]::-moz-selection, -code[class*="language-"] ::-moz-selection { - text-shadow: none; - background: hsla(0, 0%, 93%, 0.15); - /* #EDEDED */ -} - -pre[class*="language-"]::selection, -pre[class*="language-"] ::selection, -code[class*="language-"]::selection, -code[class*="language-"] ::selection { - text-shadow: none; - background: hsla(0, 0%, 93%, 0.15); - /* #EDEDED */ -} - -/* Inline code */ - -:not(pre)>code[class*="language-"] { - border-radius: 0.3em; - border: 0.13em solid hsl(0, 0%, 33%); - /* #545454 */ - box-shadow: 1px 1px 0.3em -0.1em black inset; - padding: 0.15em 0.2em 0.05em; - white-space: normal; -} - -.token.comment, -.token.prolog, -.token.doctype, -.token.cdata { - color: hsl(0, 0%, 47%); - /* #777777 */ -} - -.token.punctuation { - opacity: 0.7; -} - -.namespace { - opacity: 0.7; -} - -.token.tag, -.token.boolean, -.token.number, -.token.deleted { - color: hsl(14, 58%, 55%); - /* #CF6A4C */ -} - -.token.keyword, -.token.property, -.token.selector, -.token.constant, -.token.symbol, -.token.builtin { - color: hsl(53, 89%, 79%); - /* #F9EE98 */ -} - -.token.attr-name, -.token.attr-value, -.token.string, -.token.char, -.token.operator, -.token.entity, -.token.url, -.language-css .token.string, -.style .token.string, -.token.variable, -.token.inserted { - color: hsl(76, 21%, 52%); - /* #8F9D6A */ -} - -.token.atrule { - color: hsl(218, 22%, 55%); - /* #7587A6 */ -} - -.token.regex, -.token.important { - color: hsl(42, 75%, 65%); - /* #E9C062 */ -} - -.token.important, -.token.bold { - font-weight: bold; -} - -.token.italic { - font-style: italic; -} - -.token.entity { - cursor: help; -} - -pre[data-line] { - padding: 1em 0 1em 3em; - position: relative; -} - -/* Markup */ - -.language-markup .token.tag, -.language-markup .token.attr-name, -.language-markup .token.punctuation { - color: hsl(33, 33%, 52%); - /* #AC885B */ -} - -/* Make the tokens sit above the line highlight so the colours don't look faded. */ - -.token { - position: relative; - z-index: 1; -} - -.line-highlight { - background: hsla(0, 0%, 33%, 0.25); - /* #545454 */ - background: linear-gradient( to right, hsla(0, 0%, 33%, 0.1) 70%, hsla(0, 0%, 33%, 0)); - /* #545454 */ - border-bottom: 1px dashed hsl(0, 0%, 33%); - /* #545454 */ - border-top: 1px dashed hsl(0, 0%, 33%); - /* #545454 */ - left: 0; - line-height: inherit; - margin-top: 0.75em; - /* Same as .prism’s padding-top */ - padding: inherit 0; - pointer-events: none; - position: absolute; - right: 0; - white-space: pre; - z-index: 0; -} - -.line-highlight:before, -.line-highlight[data-end]:after { - background-color: hsl(215, 15%, 59%); - /* #8794A6 */ - border-radius: 999px; - box-shadow: 0 1px white; - color: hsl(24, 20%, 95%); - /* #F5F2F0 */ - content: attr(data-start); - font: bold 65%/1.5 sans-serif; - left: 0.6em; - min-width: 1em; - padding: 0 0.5em; - position: absolute; - text-align: center; - text-shadow: none; - top: 0.4em; - vertical-align: 0.3em; -} - -.line-highlight[data-end]:after { - bottom: 0.4em; - content: attr(data-end); - top: auto; -} - -pre[data-line] { - position: relative; - padding: 1em 0 1em 3em; -} - -.line-highlight { - position: absolute; - left: 0; - right: 0; - padding: inherit 0; - margin-top: 1em; - /* Same as .prism’s padding-top */ - background: hsla(24, 20%, 50%, 0.08); - background: linear-gradient( to right, hsla(24, 20%, 50%, 0.1) 70%, hsla(24, 20%, 50%, 0)); - pointer-events: none; - line-height: inherit; - white-space: pre; -} - -.line-highlight:before, -.line-highlight[data-end]:after { - content: attr(data-start); - position: absolute; - top: 0.4em; - left: 0.6em; - min-width: 1em; - padding: 0 0.5em; - background-color: hsla(24, 20%, 50%, 0.4); - color: hsl(24, 20%, 95%); - font: bold 65%/1.5 sans-serif; - text-align: center; - vertical-align: 0.3em; - border-radius: 999px; - text-shadow: none; - box-shadow: 0 1px white; -} - -.line-highlight[data-end]:after { - content: attr(data-end); - top: auto; - bottom: 0.4em; -} - -.line-numbers .line-highlight:before, -.line-numbers .line-highlight:after { - content: none; -} - -pre.line-numbers { - position: relative; - padding-left: 3.8em; - counter-reset: linenumber; -} - -pre.line-numbers>code { - position: relative; - white-space: inherit; -} - -.line-numbers .line-numbers-rows { - position: absolute; - pointer-events: none; - top: 0; - font-size: 100%; - left: -3.8em; - width: 3em; - /* works for line-numbers below 1000 lines */ - letter-spacing: -1px; - border-right: 1px solid #999; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.line-numbers-rows>span { - pointer-events: none; - display: block; - counter-increment: linenumber; -} - -.line-numbers-rows>span:before { - content: counter(linenumber); - color: rgb(80, 80, 80); - display: block; - padding-right: 0.8em; - text-align: right; -} - -div.code-toolbar { - position: relative; - margin-top: -3px; -} - -div.code-toolbar>.toolbar { - position: absolute; - top: 0.3em; - right: 0.2em; - transition: opacity 0.3s ease-in-out; - opacity: 0; -} - -div.code-toolbar:hover>.toolbar { - opacity: 1; -} - -div.code-toolbar>.toolbar .toolbar-item { - display: inline-block; -} - -div.code-toolbar>.toolbar a { - cursor: pointer; -} - -div.code-toolbar>.toolbar button { - background: none; - border: 0; - color: inherit; - font: inherit; - line-height: normal; - overflow: visible; - padding: 0; - -webkit-user-select: none; - /* for button */ - -moz-user-select: none; - -ms-user-select: none; -} - -div.code-toolbar>.toolbar a, -div.code-toolbar>.toolbar button, -div.code-toolbar>.toolbar span { - color: #bbb; - font-size: 0.8em; - padding: 0 0.5em; - background: #f5f2f0; - background: rgba(224, 224, 224, 0.2); - box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); - border-radius: 0.5em; -} - -div.code-toolbar>.toolbar a:hover, -div.code-toolbar>.toolbar a:focus, -div.code-toolbar>.toolbar button:hover, -div.code-toolbar>.toolbar button:focus, -div.code-toolbar>.toolbar span:hover, -div.code-toolbar>.toolbar span:focus { - color: inherit; - text-decoration: none; -} \ No newline at end of file diff --git a/assets/prism.js b/assets/prism.js deleted file mode 100644 index a8777be..0000000 --- a/assets/prism.js +++ /dev/null @@ -1,1720 +0,0 @@ -/* PrismJS 1.15.0 -https://prismjs.com/download.html#themes=prism-twilight&languages=markup+css+clike+javascript&plugins=line-highlight+line-numbers+toolbar+copy-to-clipboard */ -var _self = - "undefined" != typeof window - ? window - : "undefined" != typeof WorkerGlobalScope && - self instanceof WorkerGlobalScope - ? self - : {}, - Prism = (function() { - var e = /\blang(?:uage)?-([\w-]+)\b/i, - t = 0, - n = (_self.Prism = { - manual: _self.Prism && _self.Prism.manual, - disableWorkerMessageHandler: - _self.Prism && _self.Prism.disableWorkerMessageHandler, - util: { - encode: function(e) { - return e instanceof r - ? new r(e.type, n.util.encode(e.content), e.alias) - : "Array" === n.util.type(e) - ? e.map(n.util.encode) - : e - .replace(/&/g, "&") - .replace(/ e.length) return; - if (!(w instanceof s)) { - if (m && b != t.length - 1) { - h.lastIndex = k; - var _ = h.exec(e); - if (!_) break; - for ( - var j = _.index + (d ? _[1].length : 0), - P = _.index + _[0].length, - A = b, - x = k, - O = t.length; - O > A && (P > x || (!t[A].type && !t[A - 1].greedy)); - ++A - ) - (x += t[A].length), j >= x && (++b, (k = x)); - if (t[b] instanceof s) continue; - (I = A - b), (w = e.slice(k, x)), (_.index -= k); - } else { - h.lastIndex = 0; - var _ = h.exec(w), - I = 1; - } - if (_) { - d && (p = _[1] ? _[1].length : 0); - var j = _.index + p, - _ = _[0].slice(p), - P = j + _.length, - N = w.slice(0, j), - S = w.slice(P), - C = [b, I]; - N && (++b, (k += N.length), C.push(N)); - var E = new s(u, f ? n.tokenize(_, f) : _, y, _, m); - if ( - (C.push(E), - S && C.push(S), - Array.prototype.splice.apply(t, C), - 1 != I && n.matchGrammar(e, t, r, b, k, !0, u), - i) - ) - break; - } else if (i) break; - } - } - } - } - }, - tokenize: function(e, t) { - var r = [e], - a = t.rest; - if (a) { - for (var l in a) t[l] = a[l]; - delete t.rest; - } - return n.matchGrammar(e, r, t, 0, 0, !1), r; - }, - hooks: { - all: {}, - add: function(e, t) { - var r = n.hooks.all; - (r[e] = r[e] || []), r[e].push(t); - }, - run: function(e, t) { - var r = n.hooks.all[e]; - if (r && r.length) for (var a, l = 0; (a = r[l++]); ) a(t); - } - } - }), - r = (n.Token = function(e, t, n, r, a) { - (this.type = e), - (this.content = t), - (this.alias = n), - (this.length = 0 | (r || "").length), - (this.greedy = !!a); - }); - if ( - ((r.stringify = function(e, t, a) { - if ("string" == typeof e) return e; - if ("Array" === n.util.type(e)) - return e - .map(function(n) { - return r.stringify(n, t, e); - }) - .join(""); - var l = { - type: e.type, - content: r.stringify(e.content, t, a), - tag: "span", - classes: ["token", e.type], - attributes: {}, - language: t, - parent: a - }; - if (e.alias) { - var i = "Array" === n.util.type(e.alias) ? e.alias : [e.alias]; - Array.prototype.push.apply(l.classes, i); - } - n.hooks.run("wrap", l); - var o = Object.keys(l.attributes) - .map(function(e) { - return ( - e + '="' + (l.attributes[e] || "").replace(/"/g, """) + '"' - ); - }) - .join(" "); - return ( - "<" + - l.tag + - ' class="' + - l.classes.join(" ") + - '"' + - (o ? " " + o : "") + - ">" + - l.content + - "" - ); - }), - !_self.document) - ) - return _self.addEventListener - ? (n.disableWorkerMessageHandler || - _self.addEventListener( - "message", - function(e) { - var t = JSON.parse(e.data), - r = t.language, - a = t.code, - l = t.immediateClose; - _self.postMessage(n.highlight(a, n.languages[r], r)), - l && _self.close(); - }, - !1 - ), - _self.Prism) - : _self.Prism; - var a = - document.currentScript || - [].slice.call(document.getElementsByTagName("script")).pop(); - return ( - a && - ((n.filename = a.src), - n.manual || - a.hasAttribute("data-manual") || - ("loading" !== document.readyState - ? window.requestAnimationFrame - ? window.requestAnimationFrame(n.highlightAll) - : window.setTimeout(n.highlightAll, 16) - : document.addEventListener("DOMContentLoaded", n.highlightAll))), - _self.Prism - ); - })(); -"undefined" != typeof module && module.exports && (module.exports = Prism), - "undefined" != typeof global && (global.Prism = Prism); -(Prism.languages.markup = { - comment: //, - prolog: /<\?[\s\S]+?\?>/, - doctype: //i, - cdata: //i, - tag: { - pattern: /<\/?(?!\d)[^\s>\/=$<%]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+))?)*\s*\/?>/i, - greedy: !0, - inside: { - tag: { - pattern: /^<\/?[^\s>\/]+/i, - inside: { punctuation: /^<\/?/, namespace: /^[^\s>\/:]+:/ } - }, - "attr-value": { - pattern: /=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+)/i, - inside: { - punctuation: [/^=/, { pattern: /(^|[^\\])["']/, lookbehind: !0 }] - } - }, - punctuation: /\/?>/, - "attr-name": { - pattern: /[^\s>\/]+/, - inside: { namespace: /^[^\s>\/:]+:/ } - } - } - }, - entity: /&#?[\da-z]{1,8};/i -}), - (Prism.languages.markup.tag.inside["attr-value"].inside.entity = - Prism.languages.markup.entity), - Prism.hooks.add("wrap", function(a) { - "entity" === a.type && - (a.attributes.title = a.content.replace(/&/, "&")); - }), - (Prism.languages.xml = Prism.languages.markup), - (Prism.languages.html = Prism.languages.markup), - (Prism.languages.mathml = Prism.languages.markup), - (Prism.languages.svg = Prism.languages.markup); -(Prism.languages.css = { - comment: /\/\*[\s\S]*?\*\//, - atrule: { - pattern: /@[\w-]+?.*?(?:;|(?=\s*\{))/i, - inside: { rule: /@[\w-]+/ } - }, - url: /url\((?:(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i, - selector: /[^{}\s][^{};]*?(?=\s*\{)/, - string: { - pattern: /("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/, - greedy: !0 - }, - property: /[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i, - important: /\B!important\b/i, - function: /[-a-z0-9]+(?=\()/i, - punctuation: /[(){};:]/ -}), - (Prism.languages.css.atrule.inside.rest = Prism.languages.css), - Prism.languages.markup && - (Prism.languages.insertBefore("markup", "tag", { - style: { - pattern: /()[\s\S]*?(?=<\/style>)/i, - lookbehind: !0, - inside: Prism.languages.css, - alias: "language-css", - greedy: !0 - } - }), - Prism.languages.insertBefore( - "inside", - "attr-value", - { - "style-attr": { - pattern: /\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i, - inside: { - "attr-name": { - pattern: /^\s*style/i, - inside: Prism.languages.markup.tag.inside - }, - punctuation: /^\s*=\s*['"]|['"]\s*$/, - "attr-value": { pattern: /.+/i, inside: Prism.languages.css } - }, - alias: "language-css" - } - }, - Prism.languages.markup.tag - )); -Prism.languages.clike = { - comment: [ - { pattern: /(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/, lookbehind: !0 }, - { pattern: /(^|[^\\:])\/\/.*/, lookbehind: !0, greedy: !0 } - ], - string: { - pattern: /(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/, - greedy: !0 - }, - "class-name": { - pattern: /((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[\w.\\]+/i, - lookbehind: !0, - inside: { punctuation: /[.\\]/ } - }, - keyword: /\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/, - boolean: /\b(?:true|false)\b/, - function: /[a-z0-9_]+(?=\()/i, - number: /\b0x[\da-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:e[+-]?\d+)?/i, - operator: /--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/, - punctuation: /[{}[\];(),.:]/ -}; -(Prism.languages.javascript = Prism.languages.extend("clike", { - "class-name": [ - Prism.languages.clike["class-name"], - /[_$A-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\.(?:prototype|constructor))/ - ], - keyword: [ - { pattern: /((?:^|})\s*)(?:catch|finally)\b/, lookbehind: !0 }, - /\b(?:as|async|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/ - ], - number: /\b(?:(?:0[xX][\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+)n?|\d+n|NaN|Infinity)\b|(?:\b\d+\.?\d*|\B\.\d+)(?:[Ee][+-]?\d+)?/, - function: /[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*\(|\.(?:apply|bind|call)\()/, - operator: /-[-=]?|\+[+=]?|!=?=?|<>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/ -})), - (Prism.languages.javascript[ - "class-name" - ][0].pattern = /(\b(?:class|interface|extends|implements|instanceof|new)\s+)[\w.\\]+/), - Prism.languages.insertBefore("javascript", "keyword", { - regex: { - pattern: /((?:^|[^$\w\xA0-\uFFFF."'\])\s])\s*)\/(\[[^\]\r\n]+]|\\.|[^\/\\\[\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})\]]))/, - lookbehind: !0, - greedy: !0 - }, - "function-variable": { - pattern: /[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*[=:]\s*(?:function\b|(?:\([^()]*\)|[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/i, - alias: "function" - }, - constant: /\b[A-Z][A-Z\d_]*\b/ - }), - Prism.languages.insertBefore("javascript", "string", { - "template-string": { - pattern: /`(?:\\[\s\S]|\${[^}]+}|[^\\`])*`/, - greedy: !0, - inside: { - interpolation: { - pattern: /\${[^}]+}/, - inside: { - "interpolation-punctuation": { - pattern: /^\${|}$/, - alias: "punctuation" - }, - rest: Prism.languages.javascript - } - }, - string: /[\s\S]+/ - } - } - }), - Prism.languages.markup && - Prism.languages.insertBefore("markup", "tag", { - script: { - pattern: /()[\s\S]*?(?=<\/script>)/i, - lookbehind: !0, - inside: Prism.languages.javascript, - alias: "language-javascript", - greedy: !0 - } - }), - (Prism.languages.js = Prism.languages.javascript); -!(function() { - function e(e, t) { - return Array.prototype.slice.call((t || document).querySelectorAll(e)); - } - function t(e, t) { - return ( - (t = " " + t + " "), - (" " + e.className + " ").replace(/[\n\t]/g, " ").indexOf(t) > -1 - ); - } - function n(e, n, i) { - n = "string" == typeof n ? n : e.getAttribute("data-line"); - for ( - var o, - l = n.replace(/\s+/g, "").split(","), - a = +e.getAttribute("data-line-offset") || 0, - s = r() ? parseInt : parseFloat, - d = s(getComputedStyle(e).lineHeight), - u = t(e, "line-numbers"), - c = 0; - (o = l[c++]); - - ) { - var p = o.split("-"), - m = +p[0], - f = +p[1] || m, - h = - e.querySelector('.line-highlight[data-range="' + o + '"]') || - document.createElement("div"); - if ( - (h.setAttribute("aria-hidden", "true"), - h.setAttribute("data-range", o), - (h.className = (i || "") + " line-highlight"), - u && Prism.plugins.lineNumbers) - ) { - var g = Prism.plugins.lineNumbers.getLine(e, m), - y = Prism.plugins.lineNumbers.getLine(e, f); - g && (h.style.top = g.offsetTop + "px"), - y && - (h.style.height = - y.offsetTop - g.offsetTop + y.offsetHeight + "px"); - } else - h.setAttribute("data-start", m), - f > m && h.setAttribute("data-end", f), - (h.style.top = (m - a - 1) * d + "px"), - (h.textContent = new Array(f - m + 2).join(" \n")); - u ? e.appendChild(h) : (e.querySelector("code") || e).appendChild(h); - } - } - function i() { - var t = location.hash.slice(1); - e(".temporary.line-highlight").forEach(function(e) { - e.parentNode.removeChild(e); - }); - var i = (t.match(/\.([\d,-]+)$/) || [, ""])[1]; - if (i && !document.getElementById(t)) { - var r = t.slice(0, t.lastIndexOf(".")), - o = document.getElementById(r); - o && - (o.hasAttribute("data-line") || o.setAttribute("data-line", ""), - n(o, i, "temporary "), - document.querySelector(".temporary.line-highlight").scrollIntoView()); - } - } - if ( - "undefined" != typeof self && - self.Prism && - self.document && - document.querySelector - ) { - var r = (function() { - var e; - return function() { - if ("undefined" == typeof e) { - var t = document.createElement("div"); - (t.style.fontSize = "13px"), - (t.style.lineHeight = "1.5"), - (t.style.padding = 0), - (t.style.border = 0), - (t.innerHTML = " 
 "), - document.body.appendChild(t), - (e = 38 === t.offsetHeight), - document.body.removeChild(t); - } - return e; - }; - })(), - o = 0; - Prism.hooks.add("before-sanity-check", function(t) { - var n = t.element.parentNode, - i = n && n.getAttribute("data-line"); - if (n && i && /pre/i.test(n.nodeName)) { - var r = 0; - e(".line-highlight", n).forEach(function(e) { - (r += e.textContent.length), e.parentNode.removeChild(e); - }), - r && - /^( \n)+$/.test(t.code.slice(-r)) && - (t.code = t.code.slice(0, -r)); - } - }), - Prism.hooks.add("complete", function l(e) { - var r = e.element.parentNode, - a = r && r.getAttribute("data-line"); - if (r && a && /pre/i.test(r.nodeName)) { - clearTimeout(o); - var s = Prism.plugins.lineNumbers, - d = e.plugins && e.plugins.lineNumbers; - t(r, "line-numbers") && s && !d - ? Prism.hooks.add("line-numbers", l) - : (n(r, a), (o = setTimeout(i, 1))); - } - }), - window.addEventListener("hashchange", i), - window.addEventListener("resize", function() { - var e = document.querySelectorAll("pre[data-line]"); - Array.prototype.forEach.call(e, function(e) { - n(e); - }); - }); - } -})(); -!(function() { - if ("undefined" != typeof self && self.Prism && self.document) { - var e = "line-numbers", - t = /\n(?!$)/g, - n = function(e) { - var n = r(e), - s = n["white-space"]; - if ("pre-wrap" === s || "pre-line" === s) { - var l = e.querySelector("code"), - i = e.querySelector(".line-numbers-rows"), - a = e.querySelector(".line-numbers-sizer"), - o = l.textContent.split(t); - a || - ((a = document.createElement("span")), - (a.className = "line-numbers-sizer"), - l.appendChild(a)), - (a.style.display = "block"), - o.forEach(function(e, t) { - a.textContent = e || "\n"; - var n = a.getBoundingClientRect().height; - i.children[t].style.height = n + "px"; - }), - (a.textContent = ""), - (a.style.display = "none"); - } - }, - r = function(e) { - return e - ? window.getComputedStyle - ? getComputedStyle(e) - : e.currentStyle || null - : null; - }; - window.addEventListener("resize", function() { - Array.prototype.forEach.call(document.querySelectorAll("pre." + e), n); - }), - Prism.hooks.add("complete", function(e) { - if (e.code) { - var r = e.element.parentNode, - s = /\s*\bline-numbers\b\s*/; - if ( - r && - /pre/i.test(r.nodeName) && - (s.test(r.className) || s.test(e.element.className)) && - !e.element.querySelector(".line-numbers-rows") - ) { - s.test(e.element.className) && - (e.element.className = e.element.className.replace(s, " ")), - s.test(r.className) || (r.className += " line-numbers"); - var l, - i = e.code.match(t), - a = i ? i.length + 1 : 1, - o = new Array(a + 1); - (o = o.join("")), - (l = document.createElement("span")), - l.setAttribute("aria-hidden", "true"), - (l.className = "line-numbers-rows"), - (l.innerHTML = o), - r.hasAttribute("data-start") && - (r.style.counterReset = - "linenumber " + - (parseInt(r.getAttribute("data-start"), 10) - 1)), - e.element.appendChild(l), - n(r), - Prism.hooks.run("line-numbers", e); - } - } - }), - Prism.hooks.add("line-numbers", function(e) { - (e.plugins = e.plugins || {}), (e.plugins.lineNumbers = !0); - }), - (Prism.plugins.lineNumbers = { - getLine: function(t, n) { - if ("PRE" === t.tagName && t.classList.contains(e)) { - var r = t.querySelector(".line-numbers-rows"), - s = parseInt(t.getAttribute("data-start"), 10) || 1, - l = s + (r.children.length - 1); - s > n && (n = s), n > l && (n = l); - var i = n - s; - return r.children[i]; - } - } - }); - } -})(); -!(function() { - if ("undefined" != typeof self && self.Prism && self.document) { - var t = [], - e = {}, - n = function() {}; - Prism.plugins.toolbar = {}; - var a = (Prism.plugins.toolbar.registerButton = function(n, a) { - var o; - (o = - "function" == typeof a - ? a - : function(t) { - var e; - return ( - "function" == typeof a.onClick - ? ((e = document.createElement("button")), - (e.type = "button"), - e.addEventListener("click", function() { - a.onClick.call(this, t); - })) - : "string" == typeof a.url - ? ((e = document.createElement("a")), (e.href = a.url)) - : (e = document.createElement("span")), - (e.textContent = a.text), - e - ); - }), - t.push((e[n] = o)); - }), - o = (Prism.plugins.toolbar.hook = function(a) { - var o = a.element.parentNode; - if ( - o && - /pre/i.test(o.nodeName) && - !o.parentNode.classList.contains("code-toolbar") - ) { - var r = document.createElement("div"); - r.classList.add("code-toolbar"), - o.parentNode.insertBefore(r, o), - r.appendChild(o); - var i = document.createElement("div"); - i.classList.add("toolbar"), - document.body.hasAttribute("data-toolbar-order") && - (t = document.body - .getAttribute("data-toolbar-order") - .split(",") - .map(function(t) { - return e[t] || n; - })), - t.forEach(function(t) { - var e = t(a); - if (e) { - var n = document.createElement("div"); - n.classList.add("toolbar-item"), - n.appendChild(e), - i.appendChild(n); - } - }), - r.appendChild(i); - } - }); - a("label", function(t) { - var e = t.element.parentNode; - if (e && /pre/i.test(e.nodeName) && e.hasAttribute("data-label")) { - var n, - a, - o = e.getAttribute("data-label"); - try { - a = document.querySelector("template#" + o); - } catch (r) {} - return ( - a - ? (n = a.content) - : (e.hasAttribute("data-url") - ? ((n = document.createElement("a")), - (n.href = e.getAttribute("data-url"))) - : (n = document.createElement("span")), - (n.textContent = o)), - n - ); - } - }), - Prism.hooks.add("complete", o); - } -})(); -!(function() { - if ("undefined" != typeof self && self.Prism && self.document) { - if (!Prism.plugins.toolbar) - return ( - console.warn("Copy to Clipboard plugin loaded before Toolbar plugin."), - void 0 - ); - var o = window.ClipboardJS || void 0; - o || "function" != typeof require || (o = require("clipboard")); - var e = []; - if (!o) { - var t = document.createElement("script"), - n = document.querySelector("head"); - (t.onload = function() { - if ((o = window.ClipboardJS)) for (; e.length; ) e.pop()(); - }), - (t.src = - "https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"), - n.appendChild(t); - } - Prism.plugins.toolbar.registerButton("copy-to-clipboard", function(t) { - function n() { - var e = new o(i, { - text: function() { - return t.code; - } - }); - e.on("success", function() { - (i.textContent = "Copied!"), r(); - }), - e.on("error", function() { - (i.textContent = "Press Ctrl+C to copy"), r(); - }); - } - function r() { - setTimeout(function() { - i.textContent = "Copy"; - }, 5e3); - } - var i = document.createElement("a"); - return (i.textContent = "Copy"), o ? n() : e.push(n), i; - }); - } -})(); -/* PrismJS 1.15.0 -https://prismjs.com/download.html#themes=prism-twilight&languages=markup+css+clike+javascript&plugins=line-highlight+line-numbers+toolbar+copy-to-clipboard */ -var _self = - "undefined" != typeof window - ? window - : "undefined" != typeof WorkerGlobalScope && - self instanceof WorkerGlobalScope - ? self - : {}, - Prism = (function() { - var e = /\blang(?:uage)?-([\w-]+)\b/i, - t = 0, - n = (_self.Prism = { - manual: _self.Prism && _self.Prism.manual, - disableWorkerMessageHandler: - _self.Prism && _self.Prism.disableWorkerMessageHandler, - util: { - encode: function(e) { - return e instanceof r - ? new r(e.type, n.util.encode(e.content), e.alias) - : "Array" === n.util.type(e) - ? e.map(n.util.encode) - : e - .replace(/&/g, "&") - .replace(/ e.length) return; - if (!(w instanceof s)) { - if (m && b != t.length - 1) { - h.lastIndex = k; - var _ = h.exec(e); - if (!_) break; - for ( - var j = _.index + (d ? _[1].length : 0), - P = _.index + _[0].length, - A = b, - x = k, - O = t.length; - O > A && (P > x || (!t[A].type && !t[A - 1].greedy)); - ++A - ) - (x += t[A].length), j >= x && (++b, (k = x)); - if (t[b] instanceof s) continue; - (I = A - b), (w = e.slice(k, x)), (_.index -= k); - } else { - h.lastIndex = 0; - var _ = h.exec(w), - I = 1; - } - if (_) { - d && (p = _[1] ? _[1].length : 0); - var j = _.index + p, - _ = _[0].slice(p), - P = j + _.length, - N = w.slice(0, j), - S = w.slice(P), - C = [b, I]; - N && (++b, (k += N.length), C.push(N)); - var E = new s(u, f ? n.tokenize(_, f) : _, y, _, m); - if ( - (C.push(E), - S && C.push(S), - Array.prototype.splice.apply(t, C), - 1 != I && n.matchGrammar(e, t, r, b, k, !0, u), - i) - ) - break; - } else if (i) break; - } - } - } - } - }, - tokenize: function(e, t) { - var r = [e], - a = t.rest; - if (a) { - for (var l in a) t[l] = a[l]; - delete t.rest; - } - return n.matchGrammar(e, r, t, 0, 0, !1), r; - }, - hooks: { - all: {}, - add: function(e, t) { - var r = n.hooks.all; - (r[e] = r[e] || []), r[e].push(t); - }, - run: function(e, t) { - var r = n.hooks.all[e]; - if (r && r.length) for (var a, l = 0; (a = r[l++]); ) a(t); - } - } - }), - r = (n.Token = function(e, t, n, r, a) { - (this.type = e), - (this.content = t), - (this.alias = n), - (this.length = 0 | (r || "").length), - (this.greedy = !!a); - }); - if ( - ((r.stringify = function(e, t, a) { - if ("string" == typeof e) return e; - if ("Array" === n.util.type(e)) - return e - .map(function(n) { - return r.stringify(n, t, e); - }) - .join(""); - var l = { - type: e.type, - content: r.stringify(e.content, t, a), - tag: "span", - classes: ["token", e.type], - attributes: {}, - language: t, - parent: a - }; - if (e.alias) { - var i = "Array" === n.util.type(e.alias) ? e.alias : [e.alias]; - Array.prototype.push.apply(l.classes, i); - } - n.hooks.run("wrap", l); - var o = Object.keys(l.attributes) - .map(function(e) { - return ( - e + '="' + (l.attributes[e] || "").replace(/"/g, """) + '"' - ); - }) - .join(" "); - return ( - "<" + - l.tag + - ' class="' + - l.classes.join(" ") + - '"' + - (o ? " " + o : "") + - ">" + - l.content + - "" - ); - }), - !_self.document) - ) - return _self.addEventListener - ? (n.disableWorkerMessageHandler || - _self.addEventListener( - "message", - function(e) { - var t = JSON.parse(e.data), - r = t.language, - a = t.code, - l = t.immediateClose; - _self.postMessage(n.highlight(a, n.languages[r], r)), - l && _self.close(); - }, - !1 - ), - _self.Prism) - : _self.Prism; - var a = - document.currentScript || - [].slice.call(document.getElementsByTagName("script")).pop(); - return ( - a && - ((n.filename = a.src), - n.manual || - a.hasAttribute("data-manual") || - ("loading" !== document.readyState - ? window.requestAnimationFrame - ? window.requestAnimationFrame(n.highlightAll) - : window.setTimeout(n.highlightAll, 16) - : document.addEventListener("DOMContentLoaded", n.highlightAll))), - _self.Prism - ); - })(); -"undefined" != typeof module && module.exports && (module.exports = Prism), - "undefined" != typeof global && (global.Prism = Prism); -(Prism.languages.markup = { - comment: //, - prolog: /<\?[\s\S]+?\?>/, - doctype: //i, - cdata: //i, - tag: { - pattern: /<\/?(?!\d)[^\s>\/=$<%]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+))?)*\s*\/?>/i, - greedy: !0, - inside: { - tag: { - pattern: /^<\/?[^\s>\/]+/i, - inside: { punctuation: /^<\/?/, namespace: /^[^\s>\/:]+:/ } - }, - "attr-value": { - pattern: /=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+)/i, - inside: { - punctuation: [/^=/, { pattern: /(^|[^\\])["']/, lookbehind: !0 }] - } - }, - punctuation: /\/?>/, - "attr-name": { - pattern: /[^\s>\/]+/, - inside: { namespace: /^[^\s>\/:]+:/ } - } - } - }, - entity: /&#?[\da-z]{1,8};/i -}), - (Prism.languages.markup.tag.inside["attr-value"].inside.entity = - Prism.languages.markup.entity), - Prism.hooks.add("wrap", function(a) { - "entity" === a.type && - (a.attributes.title = a.content.replace(/&/, "&")); - }), - (Prism.languages.xml = Prism.languages.markup), - (Prism.languages.html = Prism.languages.markup), - (Prism.languages.mathml = Prism.languages.markup), - (Prism.languages.svg = Prism.languages.markup); -(Prism.languages.css = { - comment: /\/\*[\s\S]*?\*\//, - atrule: { - pattern: /@[\w-]+?.*?(?:;|(?=\s*\{))/i, - inside: { rule: /@[\w-]+/ } - }, - url: /url\((?:(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i, - selector: /[^{}\s][^{};]*?(?=\s*\{)/, - string: { - pattern: /("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/, - greedy: !0 - }, - property: /[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i, - important: /\B!important\b/i, - function: /[-a-z0-9]+(?=\()/i, - punctuation: /[(){};:]/ -}), - (Prism.languages.css.atrule.inside.rest = Prism.languages.css), - Prism.languages.markup && - (Prism.languages.insertBefore("markup", "tag", { - style: { - pattern: /()[\s\S]*?(?=<\/style>)/i, - lookbehind: !0, - inside: Prism.languages.css, - alias: "language-css", - greedy: !0 - } - }), - Prism.languages.insertBefore( - "inside", - "attr-value", - { - "style-attr": { - pattern: /\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i, - inside: { - "attr-name": { - pattern: /^\s*style/i, - inside: Prism.languages.markup.tag.inside - }, - punctuation: /^\s*=\s*['"]|['"]\s*$/, - "attr-value": { pattern: /.+/i, inside: Prism.languages.css } - }, - alias: "language-css" - } - }, - Prism.languages.markup.tag - )); -Prism.languages.clike = { - comment: [ - { pattern: /(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/, lookbehind: !0 }, - { pattern: /(^|[^\\:])\/\/.*/, lookbehind: !0, greedy: !0 } - ], - string: { - pattern: /(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/, - greedy: !0 - }, - "class-name": { - pattern: /((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[\w.\\]+/i, - lookbehind: !0, - inside: { punctuation: /[.\\]/ } - }, - keyword: /\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/, - boolean: /\b(?:true|false)\b/, - function: /[a-z0-9_]+(?=\()/i, - number: /\b0x[\da-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:e[+-]?\d+)?/i, - operator: /--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/, - punctuation: /[{}[\];(),.:]/ -}; -(Prism.languages.javascript = Prism.languages.extend("clike", { - "class-name": [ - Prism.languages.clike["class-name"], - /[_$A-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\.(?:prototype|constructor))/ - ], - keyword: [ - { pattern: /((?:^|})\s*)(?:catch|finally)\b/, lookbehind: !0 }, - /\b(?:as|async|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/ - ], - number: /\b(?:(?:0[xX][\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+)n?|\d+n|NaN|Infinity)\b|(?:\b\d+\.?\d*|\B\.\d+)(?:[Ee][+-]?\d+)?/, - function: /[_$a-zA-Z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*\(|\.(?:apply|bind|call)\()/, - operator: /-[-=]?|\+[+=]?|!=?=?|<>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/ -})), - (Prism.languages.javascript[ - "class-name" - ][0].pattern = /(\b(?:class|interface|extends|implements|instanceof|new)\s+)[\w.\\]+/), - Prism.languages.insertBefore("javascript", "keyword", { - regex: { - pattern: /((?:^|[^$\w\xA0-\uFFFF."'\])\s])\s*)\/(\[[^\]\r\n]+]|\\.|[^\/\\\[\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})\]]))/, - lookbehind: !0, - greedy: !0 - }, - "function-variable": { - pattern: /[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*[=:]\s*(?:function\b|(?:\([^()]*\)|[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/i, - alias: "function" - }, - constant: /\b[A-Z][A-Z\d_]*\b/ - }), - Prism.languages.insertBefore("javascript", "string", { - "template-string": { - pattern: /`(?:\\[\s\S]|\${[^}]+}|[^\\`])*`/, - greedy: !0, - inside: { - interpolation: { - pattern: /\${[^}]+}/, - inside: { - "interpolation-punctuation": { - pattern: /^\${|}$/, - alias: "punctuation" - }, - rest: Prism.languages.javascript - } - }, - string: /[\s\S]+/ - } - } - }), - Prism.languages.markup && - Prism.languages.insertBefore("markup", "tag", { - script: { - pattern: /()[\s\S]*?(?=<\/script>)/i, - lookbehind: !0, - inside: Prism.languages.javascript, - alias: "language-javascript", - greedy: !0 - } - }), - (Prism.languages.js = Prism.languages.javascript); -!(function() { - function e(e, t) { - return Array.prototype.slice.call((t || document).querySelectorAll(e)); - } - function t(e, t) { - return ( - (t = " " + t + " "), - (" " + e.className + " ").replace(/[\n\t]/g, " ").indexOf(t) > -1 - ); - } - function n(e, n, i) { - n = "string" == typeof n ? n : e.getAttribute("data-line"); - for ( - var o, - l = n.replace(/\s+/g, "").split(","), - a = +e.getAttribute("data-line-offset") || 0, - s = r() ? parseInt : parseFloat, - d = s(getComputedStyle(e).lineHeight), - u = t(e, "line-numbers"), - c = 0; - (o = l[c++]); - - ) { - var p = o.split("-"), - m = +p[0], - f = +p[1] || m, - h = - e.querySelector('.line-highlight[data-range="' + o + '"]') || - document.createElement("div"); - if ( - (h.setAttribute("aria-hidden", "true"), - h.setAttribute("data-range", o), - (h.className = (i || "") + " line-highlight"), - u && Prism.plugins.lineNumbers) - ) { - var g = Prism.plugins.lineNumbers.getLine(e, m), - y = Prism.plugins.lineNumbers.getLine(e, f); - g && (h.style.top = g.offsetTop + "px"), - y && - (h.style.height = - y.offsetTop - g.offsetTop + y.offsetHeight + "px"); - } else - h.setAttribute("data-start", m), - f > m && h.setAttribute("data-end", f), - (h.style.top = (m - a - 1) * d + "px"), - (h.textContent = new Array(f - m + 2).join(" \n")); - u ? e.appendChild(h) : (e.querySelector("code") || e).appendChild(h); - } - } - function i() { - var t = location.hash.slice(1); - e(".temporary.line-highlight").forEach(function(e) { - e.parentNode.removeChild(e); - }); - var i = (t.match(/\.([\d,-]+)$/) || [, ""])[1]; - if (i && !document.getElementById(t)) { - var r = t.slice(0, t.lastIndexOf(".")), - o = document.getElementById(r); - o && - (o.hasAttribute("data-line") || o.setAttribute("data-line", ""), - n(o, i, "temporary "), - document.querySelector(".temporary.line-highlight").scrollIntoView()); - } - } - if ( - "undefined" != typeof self && - self.Prism && - self.document && - document.querySelector - ) { - var r = (function() { - var e; - return function() { - if ("undefined" == typeof e) { - var t = document.createElement("div"); - (t.style.fontSize = "13px"), - (t.style.lineHeight = "1.5"), - (t.style.padding = 0), - (t.style.border = 0), - (t.innerHTML = " 
 "), - document.body.appendChild(t), - (e = 38 === t.offsetHeight), - document.body.removeChild(t); - } - return e; - }; - })(), - o = 0; - Prism.hooks.add("before-sanity-check", function(t) { - var n = t.element.parentNode, - i = n && n.getAttribute("data-line"); - if (n && i && /pre/i.test(n.nodeName)) { - var r = 0; - e(".line-highlight", n).forEach(function(e) { - (r += e.textContent.length), e.parentNode.removeChild(e); - }), - r && - /^( \n)+$/.test(t.code.slice(-r)) && - (t.code = t.code.slice(0, -r)); - } - }), - Prism.hooks.add("complete", function l(e) { - var r = e.element.parentNode, - a = r && r.getAttribute("data-line"); - if (r && a && /pre/i.test(r.nodeName)) { - clearTimeout(o); - var s = Prism.plugins.lineNumbers, - d = e.plugins && e.plugins.lineNumbers; - t(r, "line-numbers") && s && !d - ? Prism.hooks.add("line-numbers", l) - : (n(r, a), (o = setTimeout(i, 1))); - } - }), - window.addEventListener("hashchange", i), - window.addEventListener("resize", function() { - var e = document.querySelectorAll("pre[data-line]"); - Array.prototype.forEach.call(e, function(e) { - n(e); - }); - }); - } -})(); -!(function() { - if ("undefined" != typeof self && self.Prism && self.document) { - var e = "line-numbers", - t = /\n(?!$)/g, - n = function(e) { - var n = r(e), - s = n["white-space"]; - if ("pre-wrap" === s || "pre-line" === s) { - var l = e.querySelector("code"), - i = e.querySelector(".line-numbers-rows"), - a = e.querySelector(".line-numbers-sizer"), - o = l.textContent.split(t); - a || - ((a = document.createElement("span")), - (a.className = "line-numbers-sizer"), - l.appendChild(a)), - (a.style.display = "block"), - o.forEach(function(e, t) { - a.textContent = e || "\n"; - var n = a.getBoundingClientRect().height; - i.children[t].style.height = n + "px"; - }), - (a.textContent = ""), - (a.style.display = "none"); - } - }, - r = function(e) { - return e - ? window.getComputedStyle - ? getComputedStyle(e) - : e.currentStyle || null - : null; - }; - window.addEventListener("resize", function() { - Array.prototype.forEach.call(document.querySelectorAll("pre." + e), n); - }), - Prism.hooks.add("complete", function(e) { - if (e.code) { - var r = e.element.parentNode, - s = /\s*\bline-numbers\b\s*/; - if ( - r && - /pre/i.test(r.nodeName) && - (s.test(r.className) || s.test(e.element.className)) && - !e.element.querySelector(".line-numbers-rows") - ) { - s.test(e.element.className) && - (e.element.className = e.element.className.replace(s, " ")), - s.test(r.className) || (r.className += " line-numbers"); - var l, - i = e.code.match(t), - a = i ? i.length + 1 : 1, - o = new Array(a + 1); - (o = o.join("")), - (l = document.createElement("span")), - l.setAttribute("aria-hidden", "true"), - (l.className = "line-numbers-rows"), - (l.innerHTML = o), - r.hasAttribute("data-start") && - (r.style.counterReset = - "linenumber " + - (parseInt(r.getAttribute("data-start"), 10) - 1)), - e.element.appendChild(l), - n(r), - Prism.hooks.run("line-numbers", e); - } - } - }), - Prism.hooks.add("line-numbers", function(e) { - (e.plugins = e.plugins || {}), (e.plugins.lineNumbers = !0); - }), - (Prism.plugins.lineNumbers = { - getLine: function(t, n) { - if ("PRE" === t.tagName && t.classList.contains(e)) { - var r = t.querySelector(".line-numbers-rows"), - s = parseInt(t.getAttribute("data-start"), 10) || 1, - l = s + (r.children.length - 1); - s > n && (n = s), n > l && (n = l); - var i = n - s; - return r.children[i]; - } - } - }); - } -})(); -!(function() { - if ("undefined" != typeof self && self.Prism && self.document) { - var t = [], - e = {}, - n = function() {}; - Prism.plugins.toolbar = {}; - var a = (Prism.plugins.toolbar.registerButton = function(n, a) { - var o; - (o = - "function" == typeof a - ? a - : function(t) { - var e; - return ( - "function" == typeof a.onClick - ? ((e = document.createElement("button")), - (e.type = "button"), - e.addEventListener("click", function() { - a.onClick.call(this, t); - })) - : "string" == typeof a.url - ? ((e = document.createElement("a")), (e.href = a.url)) - : (e = document.createElement("span")), - (e.textContent = a.text), - e - ); - }), - t.push((e[n] = o)); - }), - o = (Prism.plugins.toolbar.hook = function(a) { - var o = a.element.parentNode; - if ( - o && - /pre/i.test(o.nodeName) && - !o.parentNode.classList.contains("code-toolbar") - ) { - var r = document.createElement("div"); - r.classList.add("code-toolbar"), - o.parentNode.insertBefore(r, o), - r.appendChild(o); - var i = document.createElement("div"); - i.classList.add("toolbar"), - document.body.hasAttribute("data-toolbar-order") && - (t = document.body - .getAttribute("data-toolbar-order") - .split(",") - .map(function(t) { - return e[t] || n; - })), - t.forEach(function(t) { - var e = t(a); - if (e) { - var n = document.createElement("div"); - n.classList.add("toolbar-item"), - n.appendChild(e), - i.appendChild(n); - } - }), - r.appendChild(i); - } - }); - a("label", function(t) { - var e = t.element.parentNode; - if (e && /pre/i.test(e.nodeName) && e.hasAttribute("data-label")) { - var n, - a, - o = e.getAttribute("data-label"); - try { - a = document.querySelector("template#" + o); - } catch (r) {} - return ( - a - ? (n = a.content) - : (e.hasAttribute("data-url") - ? ((n = document.createElement("a")), - (n.href = e.getAttribute("data-url"))) - : (n = document.createElement("span")), - (n.textContent = o)), - n - ); - } - }), - Prism.hooks.add("complete", o); - } -})(); -!(function() { - if ("undefined" != typeof self && self.Prism && self.document) { - if (!Prism.plugins.toolbar) - return ( - console.warn("Copy to Clipboard plugin loaded before Toolbar plugin."), - void 0 - ); - var o = window.ClipboardJS || void 0; - o || "function" != typeof require || (o = require("clipboard")); - var e = []; - if (!o) { - var t = document.createElement("script"), - n = document.querySelector("head"); - (t.onload = function() { - if ((o = window.ClipboardJS)) for (; e.length; ) e.pop()(); - }), - (t.src = - "https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"), - n.appendChild(t); - } - Prism.plugins.toolbar.registerButton("copy-to-clipboard", function(t) { - function n() { - var e = new o(i, { - text: function() { - return t.code; - } - }); - e.on("success", function() { - (i.textContent = "Copied!"), r(); - }), - e.on("error", function() { - (i.textContent = "Press Ctrl+C to copy"), r(); - }); - } - function r() { - setTimeout(function() { - i.textContent = "Copy"; - }, 5e3); - } - var i = document.createElement("a"); - return (i.textContent = "Copy"), o ? n() : e.push(n), i; - }); - } -})(); diff --git a/assets/reset.css b/assets/reset.css deleted file mode 100644 index 3e293b2..0000000 --- a/assets/reset.css +++ /dev/null @@ -1,44 +0,0 @@ -html { - box-sizing: border-box; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; - font-weight: 400; - font-style: normal; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -body { - overflow-x: hidden; - position: relative; -} - -* { - margin: 0; - padding: 0; -} - -*, -*::before, -*::after { - box-sizing: inherit; -} - -a { - color: inherit; - text-decoration: none; -} - -ul { - list-style: none; -} - -img { - display: inline-block; - vertical-align: top; - width: 100%; -} - -pre, -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; -} \ No newline at end of file diff --git a/assets/slideout.min.js b/assets/slideout.min.js deleted file mode 100644 index 30a90fb..0000000 --- a/assets/slideout.min.js +++ /dev/null @@ -1 +0,0 @@ -!function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var e;"undefined"!=typeof window?e=window:"undefined"!=typeof global?e=global:"undefined"!=typeof self&&(e=self),e.Slideout=t()}}(function(){var t,e,n;return function i(t,e,n){function o(r,a){if(!e[r]){if(!t[r]){var u=typeof require=="function"&&require;if(!a&&u)return u(r,!0);if(s)return s(r,!0);var l=new Error("Cannot find module '"+r+"'");throw l.code="MODULE_NOT_FOUND",l}var f=e[r]={exports:{}};t[r][0].call(f.exports,function(e){var n=t[r][1][e];return o(n?n:e)},f,f.exports,i,t,e,n)}return e[r].exports}var s=typeof require=="function"&&require;for(var r=0;rt._tolerance?t.open():t.close()}t._moved=false};this.panel.addEventListener(f.end,this._onTouchEndFn);this._onTouchMoveFn=function(e){if(r||t._preventOpen||typeof e.touches==="undefined"||d(e.target)){return}var n=e.touches[0].clientX-t._startOffsetX;var i=t._currentOffsetX=n;if(Math.abs(i)>t._padding){return}if(Math.abs(n)>20){t._opening=true;var o=n*t._orientation;if(t._opened&&o>0||!t._opened&&o<0){return}if(!t._moved){t.emit("translatestart")}if(o<=0){i=n+t._padding*t._orientation;t._opening=false}if(!(t._moved&&u.classList.contains("slideout-open"))){u.classList.add("slideout-open")}t.panel.style[h+"transform"]=t.panel.style.transform="translateX("+i+"px)";t.emit("translate",i);t._moved=true}};this.panel.addEventListener(f.move,this._onTouchMoveFn);return this};_.prototype.enableTouch=function(){this._touch=true;return this};_.prototype.disableTouch=function(){this._touch=false;return this};_.prototype.destroy=function(){this.close();a.removeEventListener(f.move,this._preventMove);this.panel.removeEventListener(f.start,this._resetTouchFn);this.panel.removeEventListener("touchcancel",this._onTouchCancelFn);this.panel.removeEventListener(f.end,this._onTouchEndFn);this.panel.removeEventListener(f.move,this._onTouchMoveFn);a.removeEventListener("scroll",this._onScrollFn);this.open=this.close=function(){};return this};e.exports=_},{decouple:2,emitter:3}],2:[function(t,e,n){"use strict";var i=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}();function o(t,e,n){var o,s=false;function r(t){o=t;a()}function a(){if(!s){i(u);s=true}}function u(){n.call(t,o);s=false}t.addEventListener(e,r,false);return r}e.exports=o},{}],3:[function(t,e,n){"use strict";var i=function(t,e){if(!(t instanceof e)){throw new TypeError("Cannot call a class as a function")}};n.__esModule=true;var o=function(){function t(){i(this,t)}t.prototype.on=function e(t,n){this._eventCollection=this._eventCollection||{};this._eventCollection[t]=this._eventCollection[t]||[];this._eventCollection[t].push(n);return this};t.prototype.once=function n(t,e){var n=this;function i(){n.off(t,i);e.apply(this,arguments)}i.listener=e;this.on(t,i);return this};t.prototype.off=function o(t,e){var n=undefined;if(!this._eventCollection||!(n=this._eventCollection[t])){return this}n.forEach(function(t,i){if(t===e||t.listener===e){n.splice(i,1)}});if(n.length===0){delete this._eventCollection[t]}return this};t.prototype.emit=function s(t){var e=this;for(var n=arguments.length,i=Array(n>1?n-1:0),o=1;o { - theme.value = theme.value === 'light' - ? 'dark' - : 'light' - - setThemePreference() -} - -const getSelectedTheme = () => { - if (localStorage.getItem(storageKey)) - return localStorage.getItem(storageKey) - else - return window.matchMedia('(prefers-color-scheme: dark)').matches - ? 'dark' - : 'light' -} - -const setThemePreference = () => { - localStorage.setItem(storageKey, theme.value) - loadThemePreference() -} - -const loadThemePreference = () => { - document.firstElementChild - .setAttribute('data-theme', theme.value) - - document - .querySelector('#theme-toggle') - ?.setAttribute('aria-label', theme.value) -} - -const theme = { - value: getSelectedTheme(), -} - -loadThemePreference() - -window.onload = () => { - loadThemePreference() - - document - .querySelector('#theme-toggle') - .addEventListener('click', themeHandler) -} - -window - .matchMedia('(prefers-color-scheme: dark)') - .addEventListener('change', ({matches:isDark}) => { - theme.value = isDark ? 'dark' : 'light' - setThemePreference() - }) \ No newline at end of file diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 0000000..fb167e2 --- /dev/null +++ b/babel.config.js @@ -0,0 +1,3 @@ +module.exports = { + presets: [require.resolve('@docusaurus/core/lib/babel/preset')], +} diff --git a/blog/2019-05-28-first-blog-post.md b/blog/2019-05-28-first-blog-post.md new file mode 100644 index 0000000..283729d --- /dev/null +++ b/blog/2019-05-28-first-blog-post.md @@ -0,0 +1,12 @@ +--- +slug: first-blog-post +title: First Blog Post +authors: + name: Gao Wei + title: Docusaurus Core Team + url: https://github.com/wgao19 + image_url: https://github.com/wgao19.png +tags: [hola, docusaurus] +--- + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet diff --git a/blog/2019-05-29-long-blog-post.md b/blog/2019-05-29-long-blog-post.md new file mode 100644 index 0000000..26ffb1b --- /dev/null +++ b/blog/2019-05-29-long-blog-post.md @@ -0,0 +1,44 @@ +--- +slug: long-blog-post +title: Long Blog Post +authors: endi +tags: [hello, docusaurus] +--- + +This is the summary of a very long blog post, + +Use a `` comment to limit blog post size in the list view. + + + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet diff --git a/blog/2021-08-01-mdx-blog-post.mdx b/blog/2021-08-01-mdx-blog-post.mdx new file mode 100644 index 0000000..c04ebe3 --- /dev/null +++ b/blog/2021-08-01-mdx-blog-post.mdx @@ -0,0 +1,20 @@ +--- +slug: mdx-blog-post +title: MDX Blog Post +authors: [slorber] +tags: [docusaurus] +--- + +Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/). + +:::tip + +Use the power of React to create interactive blog posts. + +```js + +``` + + + +::: diff --git a/blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg b/blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg new file mode 100644 index 0000000..11bda09 Binary files /dev/null and b/blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg differ diff --git a/blog/2021-08-26-welcome/index.md b/blog/2021-08-26-welcome/index.md new file mode 100644 index 0000000..405dce3 --- /dev/null +++ b/blog/2021-08-26-welcome/index.md @@ -0,0 +1,25 @@ +--- +slug: welcome +title: Welcome +authors: [slorber, yangshun] +tags: [facebook, hello, docusaurus] +--- + +[Docusaurus blogging features](https://docusaurus.io/docs/blog) are powered by the [blog plugin](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog). + +Simply add Markdown files (or folders) to the `blog` directory. + +Regular blog authors can be added to `authors.yml`. + +The blog post date can be extracted from filenames, such as: + +- `2019-05-30-welcome.md` +- `2019-05-30-welcome/index.md` + +A blog post folder can be convenient to co-locate blog post images: + +![Docusaurus Plushie](./docusaurus-plushie-banner.jpeg) + +The blog supports tags as well! + +**And if you don't want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config. diff --git a/blog/authors.yml b/blog/authors.yml new file mode 100644 index 0000000..4399b18 --- /dev/null +++ b/blog/authors.yml @@ -0,0 +1,17 @@ +endi: + name: Endilie Yacop Sucipto + title: Maintainer of Docusaurus + url: https://github.com/endiliey + image_url: https://github.com/endiliey.png + +yangshun: + name: Yangshun Tay + title: Front End Engineer @ Facebook + url: https://github.com/yangshun + image_url: https://github.com/yangshun.png + +slorber: + name: Sébastien Lorber + title: Docusaurus maintainer + url: https://sebastienlorber.com + image_url: https://github.com/slorber.png diff --git a/commitlint.config.js b/commitlint.config.js new file mode 100644 index 0000000..3e16e7f --- /dev/null +++ b/commitlint.config.js @@ -0,0 +1,3 @@ +module.exports = { + extends: ['@commitlint/config-conventional'], +} diff --git a/docs/chapter-01.md b/docs/chapter-01.md new file mode 100644 index 0000000..f7ac4b4 --- /dev/null +++ b/docs/chapter-01.md @@ -0,0 +1,66 @@ +--- +sidebar_position: 1 +--- + +# 1. Overview of Field of Work + +--- + +This section provides an overview of the field of front-end development/engineering. + +### 1.1 — What is a (Frontend||UI||UX) Developer/Engineer? + +A front-end developer/engineer uses [Web Platform Technologies](https://developer.mozilla.org/en-US/docs/web) —namely HTML, CSS, and JavaScript— to develop a front-end (i.e., a user interface with which the user interacts) for websites, web applications, and native applications. + +Most practitioners are introduced to the occupation after creating their first HTML web page. The most straightforward and simplest work output from a front-end developer/engineer is an HTML document that runs in a web browser, producing a web page. + +Professional front-end developers broadly speaking produce: + +- The front-end of **Websites** e.g., [wikipedia.org](https://www.wikipedia.org/) \- A website is a collection of interlinked web pages and associated multimedia content accessible over the Internet. Typically identified by a unique domain name, a website is hosted on web servers and can be accessed by users through a web browser. Websites serve various functions ranging from simple static web pages to complex dynamic web pages. +- The front-end of **Web Applications** e.g., [gmail.com](https://www.gmail.com/) \- Unlike native applications installed on a device, web applications are delivered to users through a web browser. They often interact with databases to store, retrieve, and manipulate data. Because web applications run in a browser, they are generally cross-platform and can be accessed on various devices, including desktops, laptops, tablets, and smartphones. Common development Libraries and frameworks in this space include [React.js](https://react.dev/)/[Next.js](https://nextjs.org/), [Svelte](https://svelte.dev/)/[SveltKit](https://kit.svelte.dev/), [Vue.js](https://vuejs.org/)/[Nuxt](https://nuxt.com/), [SolidJS](https://www.solidjs.com/)/[SolidStart](https://start.solidjs.com/), [Angular](https://angular.io/), [Astro](https://astro.build/), [Qwik](https://qwik.builder.io/), and [Lit](https://lit.dev/). +- The front-end of **Native Applications from Web Technologies** e.g., [Discord](https://discord.com/download) \- A native application from web technologies is a type of software application that runs natively on one or more operating systems (like Windows, macOS, Linux, iOS, and Android) from a single codebase of web technologies (including web application libraries and frameworks). Common development frameworks and patterns in this space include [Electron](https://www.electronjs.org/) for desktop apps [React Native](https://reactnative.dev/) and [Capacitor](https://capacitorjs.com/) for mobile apps and even newer solutions like [Tauri V2](https://beta.tauri.app/start/) that supports both mobile and desktop operating systems. Note that native applications built from web technologies either run web technologies at runtime (e.g., Electron, Tauri) or translate to some degree web technologies into native code and UI's at runtime (e.g., React Native, [NativeScript](https://nativescript.org/)). Additionally, [Progressive Web Apps (PWAs)](https://web.dev/articles/what-are-pwas) can also produce applications that are installable on one or more operating systems with native-like experiences from a single code base of web technologies. + +### 1.2 — Common Job Titles (based on "Areas of Focus" in section 2) + +Below is a table containing most of the front-end job titles in the wild organized by area of focus. + +| Area of Focus | Common Job Titles | +| -------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Website Development | _ Web/Website Developer
_ Front-end Developer/Engineer
\* HTML & CSS Developer | +| Web Application Development / Software Engineering | _ Front-end Application Architect
_ Front-end Application Engineer
_ Front-end Software Developer
_ JavaScript Developer
\* Web Developer | +| Web UX / UI Engineering | _ UX Developer/Engineer (aka UXE or User Experience Engineer)
_ UI Developer/Engineer
\* UI Design System Developer/Engineer | +| Web Test Engineering | _ Front-end QA Developer/Engineer
_ UI Testing Developer/Engineer | +| Web Performance Engineering | _ Front-end Performance Developer/Engineering
_ Web Performance Analyst | +| Web Accessibility Engineering | _ Accessibility Developer/Engineer
_ Web Accessibility Specialist | +| Web Game Development | _ Front-end Game Developer/Engineer
_ HTML Game Developer/Engineer | + +### 1.3 — Career Levels & Compensation + +Roughly speaking (Frontend||UI||UX) developers/engineers advance in their career through the following [ladder/levels](https://career-ladders.dev/engineering/) and compensations. + +| Level | Description | Compensation (USD) | +| ------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------------- | +| Junior Engineer | Entry-level position. Focus on learning and skill development. Guided by senior members. | $40,000 - $80,000 | +| Engineer | Mid-level, 2-5 years of experience. Handles core development tasks and might take on more complex projects. | $80,000 - $100,000 | +| Senior Engineer | More than five years of experience. Handles intricate tasks and leads projects. | $100,000 - $130,000 | +| Lead Engineer | Leads teams or projects. Involved in technical decisions and architecture planning. | $130,000 - $160,000 | +| Staff Engineer | Long-term, high-ranking technical experts. Works on high-level architecture and design. | $150,000 - $180,000 | +| Principal Engineer | Highly specialized, often with a decade or more of experience. Influences company-wide technical projects. | $180,000 - $220,000 | +| Fellow / Distinguished Engineer | Sets or influences the technical direction at a company-wide level. Works on visionary projects. | $220,000 - $300,000 | + +Note that companies typically use internal leveling semantics (e.g., level 66 from Microsoft). + + + +Image source: [https://www.levels.fyi/?compare=Standard,Amazon,Facebook,Microsoft,Google&track=Software%20Engineer](https://www.levels.fyi/?compare=Standard,Amazon,Facebook,Microsoft,Google&track=Software%20Engineer) + +### 1.4 — Occupational Challenges + +- **The Front-end Divide:** The ["The Great Divide"](https://css-tricks.com/the-great-divide/) in front-end web development describes a growing split between two main factions: JavaScript-centric full-stack web programmers, who focus on software frameworks and programming for web applications, and HTML/CSS-centric developers, who specialize in UI patterns, user experiences, interactions, accessibility, SEO, and the visual and structural aspects of web pages and apps. This divide exists between computer science-minded programmers, who prioritize programming/software skills required to build the front-end of web applications, and those who come to front-end development from the UI/UX side, typically as self-taught programmers. To be a front-end developer, you need to be a mix of both, with the degree of mixing being subjective. However, in 2024, it's clear that the job market heavily favors JavaScript-centric programmers, skilled in areas like JavaScript/TypeScript, Terminal/CLI, Node.js, APIs, GIT, Testing, CI/CD, Software Principles, Programming Principles, etc. (Follow up post: ["The great(er) divide in front-end"](https://pow.rs/blog/3-pillars-of-front-end-knowledge/) and ["Frontend design, React, and a bridge over the great divide"](https://bradfrost.com/blog/post/frontend-design-react-and-a-bridge-over-the-great-divide/)). However, the job market is only a reflection of the choices made in web development, not an evaluation of the quality of those choices. +- **Technology Churn:** Technology churn, the rapid evolution, and turnover of technologies, frameworks, and tools, present a significant challenge in the field of front-end development. This phenomenon can make the role both exciting and at the same time daunting and exhausting. +- **Web Compatibility:** Ensuring that web technologies work consistently across various web platform runtimes (e.g., web browsers, webviews, Electron, etc.) while not as complicated and challenging as it once was, can still require significant effort and skill. +- **Cross-platform Development:** Building a single codebase to run on multiple devices presents several challenges, especially in the context of front-end development. This approach, often referred to as cross-platform development, aims to create software that works seamlessly on various devices, such as smartphones, tablets, and desktops, with different operating systems like iOS, Android, and Windows. +- **Responsive Design & Adaptive Design Development:** Adaptive and responsive design are critical approaches in front-end development for creating websites and applications that provide an optimal viewing experience across a wide range of devices, from desktop monitors to mobile phones. However, implementing these solutions can often be complicated and time-consuming, leading to complicated code to maintain and test. +- **Front-end Development is Too Complex:** A general consensus is rising that the current frontend development practices and tools are too complex and need to be simplified. This strain is real and we are all feeling it, but not everyone is pointing at the same causes. +- **Front-end Development Has Somewhat Lost its Way:** Somewhere along the line, being a front-end developer transformed into being a CS-minded programmer capable of wrangling overly complex thick client UI frameworks to build software solutions in web browsers on potentially many different devices. In many ways, front-end development has lost its way. Once upon a time, front-end development primarily focused on the user and the user interface, with programming playing a secondary role. Why does being a front-end developer today mean one has to be more CS than UX? Because we have lost our way, we have accepted too much in the realm of complexity and forfeited our attention to less important matters. We are now somewhat stuck in a time of being all things and nothing. We have to find our way back to the user, back to the user interface. +- **Challenges in Securing Employment:** In recent times, [securing a job has become a complex process](https://www.linkedin.com/pulse/ongoing-defence-frontend-full-time-job-christian-heilmann-%3FtrackingId=VHhV08dKVjv7a9ga59Govw%253D%253D/?trackingId=VHhV08dKVjv7a9ga59Govw%3D%3D), often marred by interviews that prioritize subjective and irrelevant criteria. These interviews frequently fail to assess skills pertinent to the actual job responsibilities, leading to a flawed hiring process. Technical roles, in particular, are frequently misunderstood, with assessments focusing on superficial generalizations rather than true technical acumen. Success in landing a job in this field often hinges more on chance or networking than on a comprehensive evaluation of an individual's personality, teamwork abilities, practical experience, communication prowess, and capacity for learning and critical thinking. Some of the most effective hiring practices involve companies acknowledging the inherent unpredictability of the hiring process and adopting a more holistic approach (i.e., selecting someone and engaging them in a small short contract of real work). diff --git a/docs/chapter-02.md b/docs/chapter-02.md new file mode 100644 index 0000000..44252bd --- /dev/null +++ b/docs/chapter-02.md @@ -0,0 +1,202 @@ +--- +sidebar_position: 2 +--- + +# 2. Areas of Focus + +--- + +This section identifies and defines the major areas of focus within the field of front-end development / engineering. + +### 2.1 — Website Development + +Website Development in front-end development refers to building and maintaining websites. It involves creating both simple static web pages and complex web-based applications, ensuring they are visually appealing, functional, and user-friendly. + +**Key Responsibilities:** + +- Building and structuring websites using HTML, CSS, and JavaScript. +- Ensuring responsive design for various devices and screen sizes. +- Front-end programming for interactive and dynamic user interfaces. +- Implementing SEO optimization to improve search engine ranking. +- Enhancing website performance through various optimization techniques. +- Maintaining cross-browser compatibility. +- Adhering to web standards and accessibility guidelines. + +**Tools and Technologies:** + +- Proficiency with web development tools and languages like HTML, CSS, JavaScript. +- Familiarity with graphic design tools for website visuals. +- Using testing and debugging tools for website functionality and issue resolution. + +**Collaboration and Communication:** + +- Collaborating with designers, content creators, and other developers. +- Communicating with stakeholders to understand and implement web solutions. + +**Continuous Learning and Adaptation:** + +- Staying updated with the latest trends and standards in web development. +- Enhancing skills and adapting to new web development tools and methodologies. + +### 2.2 — Web Application Development / Software Engineering + +Web Application Development/Software Engineering in front-end development focuses on creating complex and dynamic web applications. This area encompasses the visual, interactive, architectural, performance, and integration aspects with back-end services of web applications. + +**Key Responsibilities:** + +- Building robust and scalable web applications using front-end technologies and modern frameworks. +- Designing the structure of web applications for modularity, scalability, and maintainability. +- Integrating front-end applications with back-end services and APIs. +- Optimizing web applications for speed and efficiency. +- Creating responsive designs for various devices and screen sizes. +- Ensuring cross-browser compatibility of web applications. +- Implementing security best practices in web applications. + +**Tools and Technologies:** + +- Expertise in front-end languages and frameworks such as HTML, CSS, JavaScript, React, Angular, Vue.js. +- Proficiency in using version control systems like Git. +- Familiarity with testing frameworks and tools for various types of testing. + +**Collaboration and Communication:** + +- Collaborating with UX/UI designers, back-end developers, and product managers. +- Effectively communicating technical concepts to team members and stakeholders. + +**Continuous Learning and Adaptation:** + +- Keeping up with the latest trends in web development technologies and methodologies. +- Continuously learning new programming languages, frameworks, and tools. + +### 2.3 — Web UX / UI Engineering + +Web UX/UI Engineering is a multifaceted area of focus in front-end development, dedicated to designing and implementing user-friendly and visually appealing interfaces for web applications and websites. This field integrates principles of UX design, UI development, Design Systems, and interaction design to create cohesive and effective web experiences. + +**Key Responsibilities:** + +- User Experience (UX) Design: Understanding user needs and behaviors to create intuitive web interfaces, including user research and journey mapping. +- User Interface (UI) Development: Coding and building the interface using HTML, CSS, and JavaScript, ensuring responsive and accessible designs. +- Design Systems: Developing and maintaining design systems to ensure consistency across the web application. +- Interaction Design: Creating engaging interfaces with thoughtful interactions and dynamic feedback. +- Collaboration with Designers: Working alongside graphic and interaction designers to translate visual concepts into functional interfaces. +- Prototyping and Wireframing: Utilizing tools for prototyping and wireframing to demonstrate functionality and layout. +- Usability Testing and Accessibility Compliance: Conducting usability tests and ensuring compliance with accessibility standards. +- Performance Optimization: Balancing aesthetic elements with website performance, optimizing for speed and responsiveness. + +**Tools and Technologies:** + +- Design and Prototyping Tools: Proficient in tools like Adobe XD, Sketch, or Figma for UI/UX design and prototyping. +- Front-end Development Languages and Frameworks: Skilled in HTML, CSS, JavaScript, and frameworks like React, Angular, or Vue.js. +- Usability and Accessibility Tools: Using tools for conducting usability tests and ensuring accessibility. + +**Collaboration and Communication:** + +- Engaging with cross-functional teams including developers, product managers, and stakeholders. +- Communicating design ideas, prototypes, and interaction designs to align with project goals. + +**Continuous Learning and Adaptation:** + +- Staying updated with the latest trends in UX/UI design, interaction design, and front-end development. +- Adapting to new design tools, technologies, and methodologies. + +### 2.4 — Web Test Engineering + +Test Engineering, within the context of front-end development, involves rigorous testing of web applications and websites to ensure functionality, performance, coding, and usability standards. This area of focus is crucial for maintaining the quality and reliability of web products. + +**Key Responsibilities:** + +- Developing and Implementing Test Plans: Creating comprehensive test strategies for various aspects of web applications. +- Automated Testing: Using automated frameworks and tools for efficient testing. +- Manual Testing: Complementing automated tests with manual testing approaches. +- Bug Tracking and Reporting: Identifying and documenting bugs, and communicating findings for resolution. +- Cross-Browser and Cross-Platform Testing: Ensuring consistent functionality across different browsers and platforms. +- Performance Testing: Evaluating web applications for speed and efficiency under various conditions. +- Security Testing: Assessing applications for vulnerabilities and security risks. + +**Tools and Technologies:** + +- Testing Frameworks and Tools: Familiarity with tools like Selenium, Jest, PlayWright, and Cypress. +- Bug Tracking Tools: Using tools like JIRA, Bugzilla, or Trello for bug tracking. + +**Collaboration and Communication:** + +- Working with developers, designers, and product managers to ensure comprehensive testing. +- Communicating test results, bug reports, and quality metrics effectively. + +**Continuous Learning and Adaptation:** + +- Staying updated with the latest testing methodologies and tools. +- Adapting to new technologies and frameworks in the evolving field of web development. + +### 2.5 — Web Performance Engineering + +Web Performance Engineering is a specialized area within front-end development focused on optimizing the performance of websites and web applications. This field impacts user experience, search engine rankings, and overall site effectiveness. The primary goal is to ensure web pages load quickly and run smoothly. + +**Key Responsibilities:** + +- Performance Analysis and Benchmarking: Assessing current performance, identifying bottlenecks, and setting benchmarks. +- Optimizing Load Times: Employing techniques for quicker page loads. +- Responsive and Efficient Design: Optimizing resource usage in web designs. +- Network Performance Optimization: Improving data transmission over the network. +- Browser Performance Tuning: Ensuring smooth operation across different browsers. +- JavaScript Performance Optimization: Writing efficient JavaScript to enhance site performance. +- Testing and Monitoring: Regularly testing and monitoring for performance issues. + +**Tools and Technologies:** + +- Performance Testing Tools: Using tools like Google Lighthouse and WebPageTest. +- Monitoring Tools: Utilizing tools for ongoing performance tracking. + +**Collaboration and Communication:** + +- Working with web developers, designers, and backend teams for integrated performance considerations. +- Communicating the importance of performance to stakeholders. + +**Continuous Learning and Industry Trends:** + +- Staying updated with web performance optimization techniques and technologies. +- Keeping pace with evolving web standards and best practices. + +### 2.6 — Web Accessibility Engineering + +A Web Accessibility Engineer is tasked with ensuring that web products are universally accessible, particularly for users with disabilities. Their role encompasses a thorough understanding and implementation of web accessibility standards, the design of accessible user interfaces, and rigorous testing to identify and address accessibility issues. + +**Key Responsibilities:** + +- Mastery of the Web Content Accessibility Guidelines (WCAG) is essential. +- Involves designing and adapting websites or applications to be fully usable by people with various impairments. +- Conducting regular assessments of web products to pinpoint and rectify accessibility obstacles. + +**Tools and Technologies:** + +- Utilization of screen readers, accessibility testing tools, and browser-based accessibility tools. +- Application of HTML, CSS, ARIA tags, and JavaScript in developing accessible web designs. + +**Collaboration and Advocacy:** + +- Engaging in teamwork with designers, developers, and stakeholders. +- Championing the cause of accessibility and universal web access. + +**Continuous Learning and Updates:** + +- Staying current with the latest developments in accessibility standards and technology. +- Enhancing skills and knowledge to tackle new accessibility challenges. + +**Legal and Ethical Considerations:** + +- Understanding legal frameworks like the Americans with Disabilities Act (ADA). +- Upholding an ethical commitment to digital equality and inclusivity. + +### 2.7 — Web Game Development + +Web Game Development involves creating interactive and engaging games that run directly in web browsers. This area of focus is distinct from traditional game development primarily due to the technologies used and the platform (web browsers) on which the games are deployed. + +- **Technologies and Tools -** Web game developers often use HTML, CSS, and JavaScript as the core technologies. HTML allows for more interactive and media-rich content, essential for game development. JavaScript is used for game logic and dynamics, and WebGL is employed for 2D and 3D graphics rendering. +- **Frameworks and Libraries -** Several JavaScript-based game engines and frameworks facilitate web game development. Examples include Phaser for general purposes, Three.js for 3D games, and Pixi.js for 2D games. +- **Game Design -** Web game development involves game design elements like storyline creation, character design, level design, and gameplay mechanics. The developer needs to create an engaging user experience within the constraints of a web browser. +- **Performance Considerations -** Developers must optimize games for performance, ensuring quick loading, smooth operation, and responsiveness. Techniques include using spritesheet animations and minimizing heavy assets. +- **Cross-Platform and Responsive Design -** Games must work well across different browsers and devices, requiring a responsive design approach and thorough testing on various platforms. +- **Monetization and Distribution -** Web games can be monetized through in-game purchases, advertisements, or direct sales. They are accessible directly through a web browser without downloads or installations. +- **Community and Support -** The web game development community is vibrant, with numerous forums, tutorials, and resources available for developers at all levels. + +Web game development, as an area of focus in front-end development, combines creativity in game design with technical skills in web technologies, offering a unique and exciting field for developers interested in both gaming and web development. diff --git a/docs/chapter-03.md b/docs/chapter-03.md new file mode 100644 index 0000000..ee6652f --- /dev/null +++ b/docs/chapter-03.md @@ -0,0 +1,61 @@ +--- +sidebar_position: 3 +--- + +# 3. Learning / Education / Training + +This section provides first step resources for those first learning about the field of front-end development as well as resources for those committed to becoming a professional. + +### 3.1 — Initial Steps + +Before committing long term to a subscription, certification, or a formal education, one should investigate the field of front-end development. + +Here are several free resources to consume to get a sense of the technologies, tools, and scope of knowledge required to work as a front-end developer/engineer: + +- [WebGlossary.info](https://webglossary.info/) +- [Getting started with the web](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web) and [Front-end web developer](https://developer.mozilla.org/en-US/docs/Learn/Front-end_web_developer) on MDN +- [Learn HTML](https://web.dev/learn/html) on web.dev, [Learn CSS](https://web.dev/learn/css) on web.dev +- [HTML & CSS](https://www.codecademy.com/catalog/language/html-css), [JavaScript](https://www.codecademy.com/catalog/language/javascript) from Code Academy +- [Free Boot Camp](https://frontendmasters.com/bootcamp/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters +- [Web Development for Beginners - A Curriculum](https://microsoft.github.io/Web-Dev-For-Beginners/#/?id=web-development-for-beginners-a-curriculum) from Microsoft +- [Complete Intro to Web Development, v3](https://frontendmasters.com/courses/web-development-v3/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters +- [The Valley of Code](https://thevalleyofcode.com/) +- [Frontend Developer Roadmap](https://roadmap.sh/frontend) and [Frontend Developer Roadmap (Beginner Version)](https://roadmap.sh/frontend?r=frontend-beginner) + +### 3.2 — On Demand Courses + +On-demand courses are ideal for those who prefer to learn at their own pace and on their own schedule. They are also a great way to supplement other learning methods, such as in-person classes or self-study. + +- [Frontend Masters](https://frontendmasters.com/?utm_source=guides&utm_medium=website&utm_campaign=feh2024): + - Description: Frontend Masters is a specialized learning platform focusing primarily on web development. It has courses and learning paths on all the most important front-end and fullstack technologies. + - Target Audience: Primarily aimed at professional web developers and those looking to deepen their understanding of front-end technologies. The content ranges from beginner to advanced levels. + - Key Features: Offers workshops and courses taught by industry experts, provides learning paths, and includes access to a community of developers. The platform is known for its high-quality, detailed courses on all the key technologies and aspects of front-end development. +- [Code Academy](https://www.codecademy.com/): + - Description: Codecademy is a popular online learning platform that offers interactive courses on a wide range of programming languages and technology topics, including web development, data science, and more. + - Target Audience: Suitable for beginners and intermediate learners who prefer a more interactive, hands-on approach to learning coding skills. + - Key Features: Known for its interactive coding environment where learners can practice code directly in the browser. Offers structured learning paths, projects, and quizzes to reinforce learning. +- [LinkedIn Learning](https://www.linkedin.com/learning/) (formerly Lynda.com): + - Description: LinkedIn Learning provides a broad array of courses covering various topics, including web development, graphic design, business, and more. It integrates with the LinkedIn platform, offering personalized course recommendations. + - Target Audience: Ideal for professionals looking to expand their skill set in various areas, not just limited to web development. + - Key Features: Offers video-based courses with a more general approach to professional development. Learners get course recommendations based on their LinkedIn profile, and completed courses can be added to their LinkedIn profile. +- [O'Reilly Learning](https://www.oreilly.com/online-learning/) (formerly Safari Books Online): + - Description: O'Reilly Learning is a comprehensive learning platform offering books, videos, live online training, and interactive learning experiences on a wide range of technology and business topics. + - Target Audience: Suitable for professionals and students in the technology and business sectors who are looking for in-depth material and resources. + - Key Features: Extensive library of books and videos from O'Reilly Media and other publishers, live online training sessions, and case studies. Known for its vast collection of resources and in-depth content. + +### 3.3 — Certifications & Learning Paths + +Certifications and learning paths are ideal for those who prefer a more structured curriculum or are looking to gain a more formal qualification. Note that certifications in front-end development aren't taken as seriously as they are in other industries and professions, but they can still be valuable for demonstrating knowledge and skills. + +- [Meta Front-End Developer Professional Certificate](https://www.coursera.org/professional-certificates/meta-front-end-developer) from Coursera. +- [Undergraduate Introduction to Web Development Certificate](https://extension.harvard.edu/academics/programs/undergraduate-introduction-to-web-development-certificate/) from Harvard Extension School +- [Professional Certificate in Front-End Web Developer](https://www.edx.org/certificates/professional-certificate/w3cx-front-end-web-developer?index=product&queryID=f80b0b0d548a3381ef4cc56f3d1eb6d9&position=5&linked_from=autocomplete&c=autocomplete) from edX +- [Front End Web Developer Nanodegree Program](https://www.udacity.com/course/front-end-web-developer-nanodegree--nd0011) from Udacity +- [Front-End Web Developer Short Course](https://generalassemb.ly/education/front-end-web-development) from General Assembly +- [Beginner Web Development Path](https://frontendmasters.com/learn/beginner/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) and [Senior Web Developer Path](https://frontendmasters.com/learn/professional/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters +- [The Frontend Developer Career Path](https://scrimba.com/learn/frontend) from Scrimba +- [Front End Web Development Treehouse Techdegree](https://teamtreehouse.com/techdegree/front-end-web-development) from Treehouse + +### 3.4 — University/College Educations + +In the realm of higher education, front-end development is typically encompassed within more extensive academic disciplines. Majors such as Computer Science, Information Technology, and Web Development often integrate front-end development as a vital component of their curriculum. diff --git a/docs/chapter-04.md b/docs/chapter-04.md new file mode 100644 index 0000000..f6f3c0e --- /dev/null +++ b/docs/chapter-04.md @@ -0,0 +1,191 @@ +--- +sidebar_position: 4 +--- + +# 4. Foundational Aspects + +This section identifies and defines the foundational aspects of the environment in which front-end web development takes place. + +### 4.1 — World Wide Web (aka, WWW or Web) + +The World Wide Web, commonly known as the Web, is a system of interlinked hypertext documents and resources. Accessed via the internet, it utilizes browsers to render web pages, allowing users to view, navigate, and interact with a wealth of information and multimedia. The Web's inception by Tim Berners-Lee in 1989 revolutionized information sharing and communication, laying the groundwork for the modern digital era. + +Learn more: + +- [How the web works](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works) on MDN +- [The web](https://thevalleyofcode.com/the-web) + +### 4.2 — The Internet + +The Internet is a vast network of interconnected computers that spans the globe. It's the infrastructure that enables the World Wide Web and other services like email and file sharing. The Internet operates on a suite of protocols, the most fundamental being the Internet Protocol (IP), which orchestrates the routing of data across this vast network. + +Learn more: + +- [Internet Fundamentals](http://internetfundamentals.com/) from Frontend Masters +- [How does the Internet work?](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work) on MDN +- [The Internet](https://thevalleyofcode.com/the-internet) + +### 4.3 — IP (Internet Protocol) Addresses + +IP Addresses serve as unique identifiers for devices on the internet, similar to how a postal address identifies a location in the physical world. They are critical for the accurate routing and delivery of data across the internet. Each device connected to the internet, from computers to smartphones, is assigned an IP address. + +There are two main types of IP address standards: + +- **IPv4 (Internet Protocol version 4)**: This is the older and most widely used standard. IPv4 addresses are 32 bits in length, allowing for a theoretical maximum of about 4.3 billion unique addresses. They are typically represented in decimal format, divided into four octets (e.g., 192.0.2.1). +- **IPv6 (Internet Protocol version 6)**: With the rapid growth of the internet and the exhaustion of IPv4 addresses, IPv6 was introduced. IPv6 addresses are 128 bits long, greatly expanding the number of available addresses. They are expressed in hexadecimal format, separated by colons (e.g., 2001:0db8:85a3:0000:0000:8a2e:0370:7334). This standard not only addresses the limitation of available addresses but also improves upon various aspects of IP addressing, including simplified processing by routers and enhanced security features. + +Both IP address standards are essential in the current landscape of the internet. While IPv4 is still predominant, the transition to IPv6 is gradually taking place as the need for more internet addresses continues to grow, driven by the proliferation of internet-connected devices. + +### 4.4 — Domain Names + +Domain names serve as the intuitive, human-friendly identifiers for websites on the internet, translating the technical Internet Protocol (IP) addresses into easily memorable names. Essentially, they are the cornerstone of web navigation, simplifying the process of finding and accessing websites. + +For instance, a domain name like 'example.com' is far more recognizable and easier to remember than its numerical IP address counterpart. This user-friendly system allows internet users to locate and visit websites without needing to memorize complex strings of numbers (i.e.. IP Addresses). Each domain name is unique, ensuring that every website has its distinct address on the web. + +The structure of domain names is hierarchical, typically consisting of a top-level domain (TLD) such as '.com', '.org', or '.net', and a second-level domain which is chosen by the website owner. The combination of these elements forms a complete domain name that represents a specific IP address. + +Domain names not only facilitate ease of access to websites but also play a crucial role in branding and establishing an online identity for businesses and individuals alike. In the digital age, a domain name is more than just an address; it's a vital part of one's online presence and digital branding strategy. + +Learn more: + +- [What is a domain name?](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name) on MDN + +### 4.5 — DNS (Domain Name System) + +The Domain Name System (DNS) is the internet's equivalent of a phone book. It translates user-friendly domain names (like www.example.com) into IP addresses that computers use. DNS is crucial for the user-friendly navigation of the internet, allowing users to access websites without needing to memorize complex numerical IP addresses. + +Learn more: + +- [How DNS works - a fun and informative animation](https://howdns.works/) + +### 4.6 — URLs (Uniform Resource Locators) + +Uniform Resource Locators (URLs) are the addresses used to access resources on the internet. A URL specifies the location of a resource on a server and the protocol used to access it. It typically includes a protocol (like HTTP or HTTPS), a domain name, and a path to the resource. + +Learn more: + +- [Guide to URLs](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_URL) on MDN + +### 4.7 — Servers and Web Hosting + +Servers, the powerhouses of the digital world, are specialized computers designed to process requests and distribute data over the internet and local networks. These robust machines form the backbone of the digital ecosystem, supporting everything from website hosting to the execution of complex applications. + +Web hosting, a crucial service in the online sphere, entails the management and provision of server infrastructure alongside reliable internet connectivity. Essential for the uninterrupted operation of websites and online applications, web hosting offers a wide range of solutions tailored to meet diverse operational needs and scales. Whether for a personal blog or a large enterprise website, the array of web hosting options ensures a perfect fit for every unique requirement and goal. + +- **Shared Hosting:** An economical choice where resources on a single server are shared among multiple clients. Best suited for small websites and blogs, it's budget-friendly but offers limited resources and control. +- **VPS (Virtual Private Server) Hosting:** Strikes a balance between affordability and functionality. Clients share a server but have individual virtual environments, providing enhanced resources and customization possibilities. +- **Dedicated Server Hosting:** Offers exclusive servers to clients, ensuring maximum resource availability, top-notch performance, and heightened security. Ideal for large businesses and websites with heavy traffic. +- **Cloud Hosting:** A versatile and scalable solution that utilizes a network of virtual servers in the cloud. It allows for resource scaling to match varying traffic needs, making it perfect for businesses with dynamic traffic patterns. + +Selecting the appropriate web hosting solution is influenced by several factors, including business size, budget constraints, traffic levels, and specific technological needs. The continual advancements and diversification in server hosting technology empower businesses of all sizes to effectively establish and enhance their online footprint. + +Learn more: + +- [What is a web server?](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_web_server) on MDN +- [Everything You Need To Know About Web Hosting](https://www.codecademy.com/resources/blog/what-is-web-hosting/) +- [Full Stack for Front-End Engineers, v3](https://frontendmasters.com/courses/fullstack-v3/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters + +### 4.8 — CDN (Content Delivery Network) + +A Content Delivery Network (CDN) represents a pivotal advancement in content distribution technologies. It is an extensive network of servers strategically dispersed across various geographical locations. This network collaborates seamlessly to accelerate the delivery of internet content to users worldwide. + +By caching content like web pages, images, and video streams on multiple servers located closer to the end-users, CDNs significantly minimize latency. This setup is particularly beneficial for websites with high traffic volumes and online services with a global user base. The proximity of CDN servers to users ensures faster access speeds, enhancing the overall user experience by reducing loading times and improving website performance. + +Beyond speed enhancement, CDNs also contribute to load balancing and handling large volumes of traffic, thereby increasing the reliability and availability of websites and web services. They effectively manage traffic spikes and mitigate potential bottlenecks, ensuring consistent content delivery even during peak times. + +In today's digital landscape, where speed and reliability are paramount, the use of CDNs has become an integral part of web infrastructure for businesses seeking to optimize their online presence and provide a superior user experience. + +Learn more: + +- [What is a CDN?](https://www.cloudflare.com/learning/cdn/what-is-a-cdn/) +- [Introduction to CDNs](https://www.codecademy.com/article/intro-to-cdns) + +### 4.9 — HTTP/HTTPS (Hypertext Transfer Protocol/Secure) + +HTTP (HyperText Transfer Protocol) and HTTPS (HTTP Secure) are foundational protocols used for the transfer of information on the internet. HTTP forms the basis of data communication on the World Wide Web, whereas HTTPS adds a layer of security to this communication. + +Key Aspects of HTTP and HTTPS: + +- **Basic Function:** HTTP is designed to enable communication between web browsers and servers. It follows a request-response structure where the browser requests data, and the server responds with the requested information. +- **Security with HTTPS:** HTTPS is essentially HTTP with encryption. It uses SSL/TLS protocols to encrypt the data transferred between the browser and the server, enhancing security and protecting sensitive information from interception or tampering. +- **Port Numbers:** By default, HTTP uses port 80 and HTTPS uses port 443. These ports are used by web servers to listen for incoming connections from web clients. +- **URL Structure:** In URLs, HTTP is indicated by 'http://' while HTTPS is indicated by 'https://'. This small difference in the URL signifies whether the connection to the website is secured with encryption or not. + +Differences and Usage: + +- **Data Security:** The most significant difference is security. HTTPS provides a secure channel, especially important for websites handling sensitive data like banking, shopping, or personal information. +- **SEO and Trust:** Search engines like Google give preference to HTTPS websites, considering them more secure. Also, web browsers often display security warnings for HTTP sites, affecting user trust. +- **Certificate Requirements:** To implement HTTPS, a website must obtain an SSL/TLS certificate from a recognized Certificate Authority (CA). This certificate is crucial for establishing a trusted and encrypted connection. +- **Performance:** While HTTPS used to be slower than HTTP due to the encryption process, advancements in technology have significantly reduced this performance gap. + +Understanding the differences between HTTP and HTTPS is crucial for web developers and users alike. The choice between them can significantly impact website security, user trust, and search engine ranking. + +Learn more: + +- [Guide to HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP) on MDN +- [The HTTP crash course nobody asked for](https://fasterthanli.me/articles/the-http-crash-course-nobody-asked-for?ck_subscriber_id=478659505) + +Specifications: + +- [Hypertext Transfer Protocol (HTTP/1.1)](https://httpwg.org/specs/rfc7230.html) +- [HTTP/2](https://http2.github.io/) + +References: + +- [HTTP response status codes](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status) on MDN + +### 4.10 — Web Browsers + +Web browsers are sophisticated software applications that play a crucial role in accessing and interacting with the World Wide Web. They serve as the interface between users and web content, rendering web pages and providing a seamless user experience. Here's a deeper look into their functionality and features: + +Core Functions of Web Browsers: + +- **Rendering Web Content:** Browsers interpret and display content written in HTML, CSS, and JavaScript. They process HTML for structure, CSS for presentation, and JavaScript for interactivity, converting them into the visual and interactive web pages. +- **Request and Response Cycle:** When a user requests a webpage, the browser sends this request to the server where the page is hosted. The server responds with the necessary files (HTML, CSS, JavaScript, images, etc.), which the browser then processes to render the page. +- **Executing JavaScript:** Modern browsers come with JavaScript engines that execute JavaScript code, enabling dynamic interactions on web pages, such as form validations, animations, and asynchronous data fetching. + +How Browsers Work Behind the Scenes: + +- **Parsing:** Browsers parse HTML, CSS, and JavaScript files to understand the structure, style, and behavior of the webpage. +- **Rendering Engine:** Each browser has a rendering engine that translates web content into what users see on their screen. This includes layout calculations, style computations, and painting the final visual output. +- **Optimization:** Modern browsers optimize performance through techniques like caching (storing copies of frequently accessed resources) and lazy loading (loading non-critical resources only when needed). + +The Role of Browsers in Web Development: + +- **Cross-browser Compatibility:** Developers must ensure that websites function correctly across different browsers, each with its quirks and rendering behaviors. +- **Accessibility:** They provide features that assist in making web content accessible to all users, including those with disabilities. + +Learn more: + +- [Populating the page: how browsers work](https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work) on MDN +- [How browsers work](https://web.dev/articles/howbrowserswork) on web.dev + +Tools: + +- [Edge](https://www.microsoft.com/en-us/edge?ep=250&form=MA13LM&es=40) +- [Chrome](https://www.google.com/chrome/) +- [Firefox](https://www.mozilla.org/en-US/firefox/new/) + +### 4.11 — JavaScript Engines + +JavaScript engines, sometimes referred to as "JavaScript Virtual Machines" are specialized software components designed to process, compile, and execute JavaScript code. JavaScript, being a high-level, interpreted scripting language, requires an engine to convert it into executable code that a computer can understand. These engines are not just a part of web browsers but are also used in other contexts, like servers (Node.js uses the V8 engine). + +Key Functions of JavaScript Engines: + +- **Parsing**: The engine reads the raw JavaScript code, breaking it down into elements it can understand (tokens) and constructing a structure (Abstract Syntax Tree - AST) that represents the program's syntactic structure. +- **Compilation**: Modern JavaScript engines use a technique called Just-In-Time (JIT) compilation. This process involves two stages in many engines: + - Baseline Compilation: Converts JavaScript into a simpler intermediate code quickly. + - Optimizing Compilation: Further compiles the code to a more optimized machine code, improving performance. The engine might de-optimize the code if certain assumptions are no longer valid. +- **Execution**: The compiled code is executed by the computer's processor. +- **Optimization**: During execution, the engine collects data to optimize the code's performance in real-time, often recompiling it for greater efficiency. + +Major JavaScript Engines: + +- **V8 (Google Chrome, Node.js, Microsoft Edge)**: Known for its speed and efficiency, V8 compiles JavaScript directly to native machine code before executing it. +- **SpiderMonkey (Mozilla Firefox)**: The first-ever JavaScript engine, it has evolved significantly, focusing on performance and scalability. +- **JavaScriptCore (Safari)**: Also known as Nitro, it emphasizes efficient execution. + +Learn more: + +- [JavaScript engine](https://en.wikipedia.org/wiki/JavaScript_engine) +- [Bare Metal JavaScript: The JavaScript Virtual Machine](https://frontendmasters.com/courses/javascript-cpu-vm/) from Frontend Masters diff --git a/docs/chapter-05.md b/docs/chapter-05.md new file mode 100644 index 0000000..d3b5eda --- /dev/null +++ b/docs/chapter-05.md @@ -0,0 +1,415 @@ +--- +sidebar_position: 5 +--- + +# 5. Core Competencies + +--- + +This section identifies and defines the core competencies associated with being a front-end developer. + +### 5.1 — Code Editors + +Code editors are software tools used by developers to write and edit code. They are an essential part of a programmer's toolkit, designed to facilitate the process of coding by providing a convenient and efficient environment. Code editors can range from simple, lightweight programs to complex Integrated Development Environments (IDEs) with a wide array of features. + +**Key Characteristics of Code Editors:** + +- Syntax Highlighting: They highlight different parts of source code in various colors and fonts, improving readability and distinguishing code elements. +- Code Completion: Also known as IntelliSense or auto-completion, this feature suggests completions for partially typed strings. +- Error Detection: Many editors detect syntax errors in real-time, aiding in quick debugging. +- File and Project Management: Features for managing files and projects are often included, easing navigation in complex projects. +- Customization and Extensions: Most editors offer customization and support for extensions to add additional functionalities. +- Integrated Development Environment (IDE): Combines the features of a code editor with additional tools like debuggers and version control. + +The choice of a code editor depends on factors such as programming language, project complexity, user interface preference, and required functionalities. Some developers prefer simple editors for quick edits, while others opt for robust IDEs for full-scale development. Code editors are indispensable in the software development process. + +Learn more: + +- [Code/Text editors](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Tools_and_setup/Available_text_editors) on MDN + +Tools: + +- [Visual Studio Code (aka VScode)](https://code.visualstudio.com/) +- [Zed](https://zed.dev/) + +### 5.2 — HyperText Markup Language (HTML) + +HTML, which stands for HyperText Markup Language, is the standard language used to create and design web pages. It's not a programming language like JavaScript; instead, it's a markup language that defines the structure and layout of a web page. + +Here's a basic breakdown of how HTML works: + +- **Elements and Tags:** HTML uses 'elements' to define different parts of a web page. Each element is enclosed in 'tags', which are written in angle brackets. For example, <p> is the opening tag for a paragraph and </p> is the closing tag. The content goes between these tags. +- **Structure of a Document:** An HTML document has a defined structure with a head (<head>) and a body (<body>). The head contains meta-information like the title of the page, while the body contains the actual content that's visible to users. +- **Hierarchy and Nesting:** Elements can be nested within each other to create a hierarchy. This nesting helps in organizing the content and defines parent-child relationships between elements. +- **Attributes:** Elements can have attributes that provide additional information about them. For example, the href attribute in an anchor (link) element (<a>) specifies the URL the link goes to. +- **Common Elements:** Some common HTML elements include: + - <h1> to <h6>: Heading elements, with <h1> being the highest level. + - <p>: Paragraph element. + - <a>: Anchor element for links. + - <img>: Image element. + - <ul>, <ol>, <li>: Unordered (bullets) and ordered (numbers) list elements. + +Imagine HTML as the skeleton of a web page. It outlines the structure, but it doesn't deal with the visual styling (that's what CSS is for) or interactive functionality (JavaScript's domain). As a front-end engineer, you would use HTML in combination with CSS and JavaScript to build and style dynamic, interactive web pages. + +Learn more: + +- [Guide to HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML) on MDN +- [Introduction to HTML](https://frontendmasters.com/bootcamp/introduction-html/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) (Part of the Free Bootcamp) from Frontend Masters +- [Complete Intro to Web Development](https://frontendmasters.com/courses/web-development-v3/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) (HTML Section) from Frontend Masters +- [Learn HTML](https://web.dev/learn/html) on web.dev + +Specifications: + +- [HTML Living Standard](https://html.spec.whatwg.org/multipage/) + +References: + +- [htmlreference.io](https://htmlreference.io) +- [HTML elements reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) + +Tools: + +- [HTML5 Boilerplate](https://html5boilerplate.com/) +- [HTMLLint](https://htmlhint.com/) + +### 5.3 — Cascading Style Sheets (CSS) + +CSS, or Cascading Style Sheets, is a cornerstone style sheet language used in web development to describe the presentation of documents written in HTML. It empowers developers and designers to control the visual aesthetics of web pages, including layout, colors, fonts, and responsiveness to different screen sizes. Unlike HTML, which structures content, CSS focuses on how that content is displayed, enabling the separation of content and design for more efficient and flexible styling. The "cascading" aspect of CSS allows multiple style sheets to influence a single web page, with specific rules taking precedence over others, leading to a cohesive and visually engaging user experience across the web. + +Imagine HTML as the skeleton of a web page—it defines where the headers, paragraphs, images, and other elements go. CSS is like the clothing and makeup—it determines how these elements look. Here's a breakdown: + +- **Selectors and Properties**: In CSS, you write "rules" that target HTML elements. These rules specify how the elements should be styled. A CSS rule consists of a "selector" (which targets the HTML element) and a "property" (which styles it). For example, you can have a rule that targets all <p> (paragraph) elements and sets their text color to red. +- **Cascading and Specificity:** Styles are applied in order of specificity, with inline styles being the most specific, followed by ID, class, and tag selectors. +- **Box Model**: Everything in CSS is considered as a box, with properties like padding, borders, and margins. These properties define the space around and within each element, affecting layout and spacing. +- **External, Internal, and Inline:** CSS can be included externally in a .css file, internally in the HTML head, or inline within HTML elements. +- **Responsive Design**: CSS allows you to make web pages look good on different devices and screen sizes. This is often done using "media queries," which apply different styles based on the device's characteristics, like its width. +- **Animation and Interaction**: CSS isn't just about static styles. You can create animations, transitions, and hover effects, enhancing the interactivity and visual appeal of your web page. + +Understanding CSS involves getting familiar with its syntax and rules, and then applying them to create visually appealing and functional web pages. As a front-end engineer, you'd often work closely with CSS, alongside HTML and JavaScript, to create the user-facing part of websites and applications. + +Learn more: + +- [Guide to CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS) on MDN +- [Frontend Masters Introduction to CSS](https://frontendmasters.com/bootcamp/introduction-css/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) (Part of the Free Bootcamp) from Frontend Masters +- [Complete Intro to Web Development](https://frontendmasters.com/courses/web-development-v3/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) (CSS Section) from Frontend Masters +- [Getting Started with CSS](https://frontendmasters.com/courses/getting-started-css/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters +- [Learn CSS](https://web.dev/learn/css) on web.dev + +Specifications: + +- [CSS specifications](https://www.w3.org/Style/CSS/current-work) + +References: + +- [cssreference.io](http://cssreference.io/) +- [css4-selectors.com](http://css4-selectors.com/) +- [CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference) on MDN +- [CSS Selectors Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) on MDN +- [What's next for CSS?](https://cssdb.org/) + +### 5.4 — JavaScript Programming Language (ECMAScript 262) + +**JavaScript**, also known as ECMAScript, is a dynamic programming language crucial for web development. It works alongside HTML and CSS to create interactive web pages and is integral to most web applications. + +**Role in Web Development:** + +- JavaScript, along with HTML and CSS, is a foundational technology of the World Wide Web. It adds interactivity to web pages. +- It's primarily used for client-side scripting, running in the user's web browser to add interactive features. + +**Beyond Web Pages:** + +- With Node.js, JavaScript can also be used on the server-side, enabling full-scale web application development. +- Node.js also empowers developers to create command-line interface (CLI) tools using JavaScript. This expands the utility of JavaScript to include server management, automation tasks, and development tooling, all in a familiar language for web developers. + +**Key Features:** + +- JavaScript is event-driven, responding to user actions to make websites more dynamic. +- It supports asynchronous programming for tasks such as loading new data without reloading the entire page. +- It uses prototype-based object orientation, offering flexible inheritance patterns. + +**Learning Curve and Community:** + +- It's often recommended as a first programming language due to its beginner-friendly nature and immediate visual feedback in web browsers. +- JavaScript has a large developer community, providing abundant resources, tutorials, and documentation for learners. + +JavaScript is a powerful programming language that's essential for web development. It's a versatile language that can be used for both front-end and back-end development, making it a must-learn for aspiring web developers. + +Learn more: + +- [Guide to JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) on MDN +- [Introduction to JavaScript](https://frontendmasters.com/bootcamp/introduction-javascript/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) (Part of the Free Bootcamp) from Frontend Masters +- [JavaScript: From First Steps to Professional](https://frontendmasters.com/courses/javascript-first-steps/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters +- [JavaScript Learning Path](https://frontendmasters.com/learn/javascript/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters +- [JavaScript Roadmap](https://roadmap.sh/javascript) + +Specification: + +- [ECMAScript 262](https://tc39.es/ecma262/) + +Reference: + +- [MDN JavaScript Reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference) on MDN + +### 5.5 — Document Object Model (DOM) + +The Document Object Model (DOM) is a fundamental programming interface for web documents that conceptualizes a webpage as a hierarchical tree of nodes, enabling dynamic interaction and manipulation. This model transforms each HTML element, attribute, and text snippet into an accessible object, allowing programming languages, particularly JavaScript, to effectively alter the page's structure, style, and content. The DOM's tree-like structure not only simplifies navigating and editing web documents but also facilitates real-time updates, event handling, and interaction, making it indispensable for creating responsive and interactive web applications. + +Key Features: + +- **Tree Structure:** The DOM represents a web page as a tree, with elements, attributes, and text as nodes. An HTML document, for example, is a tree that includes nodes like ``, ``, and ``. +- **Manipulation:** Programming languages, especially JavaScript, can manipulate the DOM. This allows for changes in HTML elements, attributes, and text, as well as adding or removing elements. +- **Event Handling:** The DOM handles events caused by user interactions or browser activities. It allows scripts to respond to these events through event handlers. +- **Dynamic Changes:** With the DOM, web pages can dynamically change content and structure without needing to reload, enabling interactive and dynamic web applications. + +The DOM is a crucial part of web development, allowing for dynamic and interactive web pages. It's a powerful interface that's fundamental to the web and is supported by all modern web browsers. + +Learn more: + +- [Introduction to the DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) on MDN +- [DOM Enlightenment](https://domenlightenment.com/) +- [Vanilla JS: You Might Not Need a Framework](https://frontendmasters.com/courses/vanilla-js-apps/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) on Frontend Masters + +Specification: + +- [DOM Living Standard](https://dom.spec.whatwg.org/) + +Reference: + +- [MDN DOM interfaces](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) on MDN + +### 5.6 — TypeScript + +TypeScript is an open-source programming language developed and maintained by Microsoft. It is a superset of JavaScript, which means that any valid JavaScript code is also valid TypeScript code. TypeScript adds optional static typing to JavaScript, among other features, enhancing the development experience, especially in larger or more complex codebases. + +**Key Features of TypeScript:** + +- Static Type Checking: TypeScript provides static type checking, allowing developers to define types for variables, function parameters, and return values. This helps catch errors and bugs during development, rather than at runtime. +- Type Inference: While TypeScript encourages explicit type annotations, it also has powerful type inference capabilities. This means that it can deduce types from the context, reducing the amount of type-related boilerplate code. +- Advanced Type System: TypeScript's type system includes features like generics, enums, tuples, and union/intersection types. These advanced features provide a robust framework for writing complex and well-structured code. +- Integration with JavaScript Libraries: TypeScript can be used with existing JavaScript libraries and frameworks. Type definitions for many popular libraries are available, allowing them to be used in a TypeScript project with the benefits of type checking. +- Tooling Support: TypeScript has excellent tooling support with integrated development environments (IDEs) and editors like Visual Studio Code. This includes features like autocompletion, navigation, and refactoring. + +**Advantages of Using TypeScript:** + +- Improved Code Quality and Maintainability: Static typing helps detect errors early in the development process, improving overall code quality. +- Easier Refactoring and Debugging: Types make it easier to refactor and debug code, as they provide more information about what the code is supposed to do. +- Better Developer Experience: Tooling support with autocompletion, code navigation, and documentation improves the developer experience. +- Scalability: TypeScript is well-suited for large codebases and teams, where its features can help manage complexity and ensure code consistency. + +**Considerations:** + +- Learning Curve: For developers not familiar with static typing, there is a learning curve to using TypeScript effectively. +- Compilation Step: The need to transpile TypeScript into JavaScript adds an extra step to the build process. + +In summary, TypeScript enhances JavaScript by adding static typing and other useful features, making it a powerful choice for developing large-scale applications or projects where code maintainability is a priority. It's widely adopted in the front-end community, especially in projects where developers benefit from its robust type system and tooling support. + +Learn more: + +- [TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/2/basic-types.html) +- [TypeScript 5+ Fundamentals, v4](https://frontendmasters.com/courses/typescript-v4/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters +- [TypeScript Learning Path](https://frontendmasters.com/learn/typescript/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters +- [Beginner's TypeScript](https://www.totaltypescript.com/tutorials/beginners-typescript) +- [The Concise TypeScript Book](https://github.com/gibbok/typescript-book) +- [TypeScript Road Map](https://roadmap.sh/typescript) + +Tools + +- [TypeScript Playground](https://www.typescriptlang.org/play) +- [tsdocs.dev](https://tsdocs.dev/) +- [ts-reset](https://www.totaltypescript.com/ts-reset) + +### 5.7 — JavaScript Web APIs (aka Web Browser APIs) + +JavaScript Web Platform APIs are a collection of application programming interfaces (APIs) that are built into web browsers. They provide the building blocks for modern web applications, allowing developers to interact with the browser and the underlying operating system. These APIs enable web applications to perform various tasks that were traditionally only possible in native applications. + +**Key Categories and Examples:** + +- **Graphics and Media APIs:** Graphics APIs like Canvas and WebGL allow for rendering 2D and 3D graphics. Media APIs enable playing and manipulating audio and video content, such as the `HTMLMediaElement` interface and Web Audio API. +- **Communication APIs:** Facilitate communication between different parts of a web application or between applications. Examples include WebSockets and the Fetch API. +- **Device APIs:** Provide access to the capabilities of the user's device, like the camera, microphone, GPS. Examples include the Geolocation API, Media Capture and Streams API, and the Battery Status API. +- **Storage APIs:** Allow web applications to store data locally on the user's device. Examples include the Local Storage API and IndexedDB. +- **Service Workers and Offline APIs:** Enable applications to work offline and improve performance by caching resources. Service Workers can intercept network requests and deliver push messages. +- **Performance APIs:** Help in measuring and optimizing the performance of web applications. Examples include the Navigation Timing API and the Performance Observer API. + +Web Platform APIs have significantly expanded the capabilities of web applications, allowing them to be more interactive, responsive, and feature-rich. They enable developers to create applications that work across different platforms and devices without the need for native code, reducing development time and costs. The use of these APIs is fundamental in building modern web applications that provide user experiences comparable to native applications. + +These APIs are standardized by bodies such as the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). Browser support for various APIs can vary. + +Learn more: + +- [Introduction to web APIs](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction) on MDN +- [List of JavaScript Web APIs (Specifications and Interfaces)](https://developer.mozilla.org/en-US/docs/Web/API) on MDN +- [The Web Platform: Browser technologies](https://html-now.github.io) +- [Browser APIs Learning Path](https://frontendmasters.com/learn/browser-apis/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters + +### 5.8 — JavaScript Object Notation (JSON) + +JSON (JavaScript Object Notation) is a lightweight data-interchange format that is easy for humans to read and write and easy for machines to parse and generate. It's a text-based format, consisting of name-value pairs and ordered lists of values, which is used extensively in web development and various other programming contexts. Here's a breakdown of its key characteristics: + +- **Lightweight Data Format:** JSON is text-based, making it lightweight and suitable for data interchange. +- **Human and Machine Readable:** Its structure is simple and clear, making it readable by humans and easily parsed by machines. +- **Language Independent:** Despite its name, JSON is independent of JavaScript and can be used with many programming languages. + +JSON's simplicity, efficiency, and wide support across programming languages have made it a fundamental tool in modern software development, particularly for web APIs, configuration management, and data interchange in distributed systems. + +Learn more: + +- [JSON's official site](https://www.json.org/json-en.html) +- [Working with JSON](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON) on MDN + +### 5.9 — ES Modules + +ES Modules (ECMAScript Modules) are the official standard for modular JavaScript code. They provide a way to structure and organize JavaScript code efficiently for reuse. + +Key Features of ES Modules: + +- **Export and Import Syntax:** + - ES Modules allow developers to export functions, objects, or primitives from a module so that they can be reused in other JavaScript files. This is done using the `export` keyword. + - Conversely, the `import` keyword is used to bring in these exports from other modules, creating a network of dependencies that are easy to trace and manage. +- **Modular Code Structure:** + - By breaking down JavaScript code into smaller, modular files, ES Modules encourage a more organized coding structure. This modularization leads to improved code readability and maintainability, especially in large-scale applications. +- **Static Module Structure:** + - ES Modules have a static structure, meaning imports and exports are defined at the top level of a module and cannot be dynamically changed at runtime. This static nature allows for efficient optimizations by JavaScript engines at compile-time, such as tree shaking (eliminating unused code). +- **Broad Compatibility:** + - ES Modules are natively supported in modern web browsers and Node.js since version 12.17.0. They can also be used in older browsers and Node.js versions with the help of transpilers like Babel or bundlers like Rollup.js. + +Learn more: + +- [Guide to ES Modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) on MDN +- [Using ES2015 Modules Today](https://frontendmasters.com/guides/javascript-enlightenment/#9) + +### 5.10 — Command Line + +The command line is a vital tool for front-end developers, offering a text-based interface to efficiently interact with a computer's operating system. It is instrumental in modern web development workflows, particularly when working with Node.js and various front-end development tools. Known also as the terminal, shell, or command prompt, the command line allows developers to execute a range of commands for tasks such as running Node.js scripts, managing project dependencies, or initiating build processes. + +Mastery of the command line enables front-end developers to leverage Node.js tools like npm (Node Package Manager) to install, update, and manage packages required in web projects. It also facilitates the use of build tools and task runners like Vite, which are essential for automating repetitive tasks like minification, compilation, and testing. Additionally, the command line provides direct access to version control systems like Git, enhancing workflow efficiency and collaboration in team environments. + +While the command line may initially seem intimidating due to its lack of graphical interface, its potential for automating tasks and streamlining development processes makes it an invaluable skill for front-end developers. + +Learn more: + +- [Command line crash course](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line) on MDN +- [Complete Intro to Linux and the Command-Line](https://frontendmasters.com/courses/linux-command-line/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters + +### 5.11 — Node.js + +Node.js is an open-source, cross-platform JavaScript runtime environment that enables JavaScript to run on the server side, extending its capabilities beyond web browsers. It operates on an event-driven, non-blocking I/O model, making it efficient for data-intensive real-time applications that run across distributed devices. + +Beyond its use in server-side development, Node.js also serves as a powerful tool in command line environments for various development tasks, such as running build processes, automating tasks, and managing project dependencies. Its integration with NPM (Node Package Manager) provides access to a vast repository of libraries and tools, enhancing its utility in the development ecosystem. This dual functionality as both a server framework and a command-line tool makes Node.js a versatile platform in the realm of web development. + +- **Runtime Environment:** It provides a platform to execute JavaScript on servers and various back-end applications. +- **Non-blocking I/O:** Node.js operates on an event-driven, non-blocking I/O model, enabling efficient handling of multiple operations simultaneously. +- **Use of JavaScript:** It leverages JavaScript, allowing for consistent language use across both client-side and server-side scripts. +- **NPM (Node Package Manager):** Comes with a vast library ecosystem through NPM, facilitating the development of complex applications. + +Node.js is a powerful tool in the web development ecosystem. It allows for the use of JavaScript on the server-side, enabling full-stack development in a single language. It also provides a robust command-line interface for various development tasks, making it a versatile platform for web developers. + +Learn more: + +- [Introduction to Node.js](https://nodejs.org/en/learn/getting-started/introduction-to-nodejs) +- [Introduction to Node.js, v3](https://frontendmasters.com/courses/node-js-v3/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters +- [Node.js Learning Path](https://frontendmasters.com/learn/node-js/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters +- [Node.js Developer Road Map](https://roadmap.sh/nodejs) + +### 5.12 — JavaScript Package Managers + +JavaScript package managers are essential tools in modern web development, designed to streamline the management of project dependencies. These tools simplify the tasks of installing, updating, configuring, and removing JavaScript libraries and frameworks. By handling dependencies efficiently, package managers facilitate the seamless integration of third-party libraries and tools into development projects, ensuring that developers can focus on writing code rather than managing packages. + +Among the most prominent JavaScript package managers are npm (Node Package Manager), Yarn, and pnpm. These package managers allow developers to access and install packages from the public npm registry, which hosts an extensive collection of open-source JavaScript packages, as well as from private registries, catering to both public and private project requirements. + +Tools: + +- [npm](https://nodejs.org/en/learn/getting-started/an-introduction-to-the-npm-package-manager) +- [yarn](https://yarnpkg.com/) +- [pnpm](https://pnpm.io/) + +### 5.13 — NPM Registry + +The npm registry is a pivotal resource in the JavaScript development community, functioning as an extensive public repository of open-source JavaScript packages. This vast database is integral for developers seeking to publish their own packages or to incorporate existing packages into their projects. The registry's diverse collection ranges from small utility functions to large frameworks, catering to a broad spectrum of development needs. + +Serving as more than just a storage space for code, the npm registry is a hub of collaboration and innovation, fostering the sharing and evolution of JavaScript code worldwide. Its comprehensive nature simplifies the discovery and integration of packages, streamlining the development process. Developers can access and manage these packages using JavaScript package managers such as npm, which is bundled with Node.js, as well as other popular managers like Yarn and pnpm. These tools provide seamless interaction with the npm registry, enabling efficient package installation, version management, and dependency resolution. + +The npm registry not only facilitates the reuse of code but also plays a crucial role in maintaining the consistency and compatibility of JavaScript projects across diverse environments. Its widespread adoption and the trust placed in it by the developer community underscore its significance as a cornerstone of JavaScript development. + +Learn more: + +- [About npm](https://docs.npmjs.com/about-npm) +- [npm public registry](https://docs.npmjs.com/cli/v10/using-npm/registry) + +Tools: + +- [pkg-size](https://pkg-size.dev/) +- [npmfs](https://npmfs.com/) +- [NPM Trends](https://npmtrends.com/) +- [Bundlephobia](https://bundlephobia.com/) +- [npmgraph](https://npmgraph.js.org/) +- [unpkg](https://unpkg.com/) +- [npm runkit](https://npm.runkit.com/) + +### 5.14 — Git + +Git is a distributed version control system, widely used for tracking changes in source code during software development. It was created by Linus Torvalds in 2005 for the development of the Linux kernel. Git is designed to handle everything from small to very large projects with speed and efficiency. + +Git is an essential tool in modern software development, enabling teams to collaborate effectively while maintaining a complete history of their work and changes. It is integral in handling code revisions and contributes significantly to the overall efficiency of the development process. Git can be integrated with various development tools and platforms. Overall, Git's powerful features make it a popular choice for both individual developers and large teams, streamlining the process of version control and code collaboration. + +Learn more: + +- [Git's official site](https://git-scm.com/) +- [Git In-Depth](https://frontendmasters.com/courses/git-in-depth/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters +- [Git and GitHub](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/GitHub) on MDN + +Tools: + +- [SmartGit](https://www.syntevo.com/smartgit/) +- [GitHub Desktop](https://desktop.github.com/) + +### 5.15 — Web Accessibility - WCAG & ARIA + +The WCAG are a set of international standards developed to make the web more accessible to people with disabilities. They provide a framework for creating web content that is accessible to a wider range of people, including those with auditory, cognitive, neurological, physical, speech, and visual disabilities. + +Key Elements of WCAG: + +- **Four Principles:** WCAG is built on four foundational principles, stating that web content must be Perceivable (available through the senses), Operable (usable with a variety of devices and input methods), Understandable (easy to comprehend), and Robust (compatible with current and future technologies). +- **Levels of Conformance:** WCAG defines three levels of accessibility conformance - Level A (minimum level), Level AA (addresses the major and most common barriers), and Level AAA (the highest level of accessibility). +- **Guidelines and Success Criteria:** Each principle is broken down into guidelines, providing testable success criteria to help measure and achieve accessibility. These criteria are used as benchmarks to ensure websites and applications are accessible to as many users as possible. + +ARIA is a set of attributes that define ways to make web content and web applications more accessible to people with disabilities. ARIA supplements HTML, helping to convey information about dynamic content and complex user interface elements developed with JavaScript, Ajax, HTML, and related technologies. + +Role of ARIA in Accessibility: + +- **Enhancing Semantic HTML:** ARIA attributes provide additional context to standard HTML elements, enhancing their meaning for assistive technologies like screen readers. +- **Dynamic Content Accessibility:** ARIA plays a crucial role in making dynamic content and advanced user interface controls developed with JavaScript accessible. +- **Support for Custom Widgets:** ARIA enables developers to create fully accessible custom widgets that are not available in standard HTML, ensuring that these custom elements are usable by people with disabilities. + +WCAG and ARIA are essential tools in making the web accessible to people with disabilities. They provide a framework for developers to create accessible web content and applications, ensuring that everyone can use the web regardless of their abilities. + +Learn more: + +- [Web Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility) on MDN +- [Learn Accessibility](https://web.dev/learn/accessibility) on web.dev +- [Website Accessibility](https://frontendmasters.com/courses/accessibility-v2/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters +- [Web App Accessibility (feat. React)](https://frontendmasters.com/courses/react-accessibility/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters + +### 5.16 — Web Images, Files Types, & Data URLS + +In the realm of web development, images play a pivotal role in defining the aesthetics and enhancing user engagement on websites. They serve multiple functions, ranging from conveying key information and breaking up text to adding artistic elements that elevate the overall design. A deep understanding of the various image file types and their specific applications is crucial for optimizing performance and visual impact. + +Common web image formats include JPEG, for high-quality photographs; PNG, which supports transparency and is ideal for graphics and logos; SVG for scalable vector graphics that maintain quality at any size; and GIF for simple animations. Each format comes with its own set of strengths and use cases, influencing factors such as load time and image clarity. + +Additionally, Data URLs provide a unique way to embed images directly into HTML or CSS, converting them into a base64 encoded string. This technique can reduce HTTP requests and speed up page loads, particularly useful for small images and icons. However, it's important to use this method judiciously, as it can increase the size of HTML or CSS files. + +The strategic use of images and understanding their formats and embedding techniques is essential in web development. It not only enhances the visual storytelling of a website but also contributes to its performance and user experience. + +Learn more: + +- [Guide to Images in HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML) on MDN +- [Learn Images](https://web.dev/learn/images) on web.dev + +### 5.17 — Browser Developer Tools (DevTools) + +Browser Developer Tools, commonly known as DevTools, are an indispensable suite integrated within major web browsers such as Google Chrome, Mozilla Firefox, Microsoft Edge, and Safari. These tools are tailored for developers, offering comprehensive insights and powerful functionalities to understand, test, and optimize web pages and web applications. DevTools bridge the gap between coding and user experience, allowing developers to peek under the hood of the browser's rendering and processing of their web pages. From debugging JavaScript to analyzing performance bottlenecks and network issues, DevTools are essential for modern web development. + +Learn more: + +- [What are browser developer tools?](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools) on MDN +- [Introduction to Dev Tools, v3](https://frontendmasters.com/courses/dev-tools/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters diff --git a/docs/chapter-06.md b/docs/chapter-06.md new file mode 100644 index 0000000..e79da44 --- /dev/null +++ b/docs/chapter-06.md @@ -0,0 +1,1961 @@ +--- +sidebar_position: 6 +--- + +# 6. Other Competencies & Paradigms + +This section identifies and defines other potential competencies and paradigms associated with being a front-end developer. + +### 6.1 — A/B Testing + +A/B testing, also known as split testing, is a method used to compare two versions of a web page, app feature, or other product elements to determine which one performs better. It's a process particularly relevant for optimizing user experience and engagement on websites or applications. + +The process involves the following steps: + +- **Hypothesis Formulation**: Starting with a hypothesis about how a change could improve a specific metric. +- **Creating Variations**: Two versions are created - the original (A) and a variant (B). +- **Randomized Experimentation**: The audience is randomly divided into two groups for each version. +- **Data Collection**: Data on user behavior is collected for both versions. +- **Analysis**: Results of both versions are compared to determine the better performer. +- **Conclusion**: Deciding on the winning version based on the analysis. +- **Implementation**: The winning version is implemented for all users. + +A/B testing allows for data-driven decision-making and is effective in refining user interfaces and experiences, leading to higher user satisfaction and better performance of web projects. + +### 6.2 — AI-powered Coding Tools + +AI-powered coding tools are software programs that use artificial intelligence (AI) and machine learning (ML) to assist developers in writing code. These tools are designed to improve developer productivity and efficiency by automating repetitive tasks and providing intelligent suggestions. They can be used for various purposes, such as code completion, refactoring, and debugging. + +AI-powered coding tools are becoming increasingly popular in the developer community, with many integrated development environments (IDEs) and code editors incorporating them into their platforms. These tools are particularly useful for front-end developers, as they can help with tasks like writing HTML, CSS, and JavaScript code. They can also be used for more complex tasks like refactoring code or debugging. + +AI-powered coding tools are still in their early stages, and their capabilities are limited. However, they have the potential to significantly improve developer productivity and efficiency in the future. + +Learn more: + +- [GitHub Copilot in VS Code](https://code.visualstudio.com/docs/editor/github-copilot) + +Tools: + +- [Github Copilot](https://github.com/features/copilot) + +### 6.3 — Adaptive Design + +Adaptive design in web development refers to a strategy for creating web pages that work well on multiple devices with different screen sizes and resolutions. Unlike responsive design, which relies on fluid grids and flexible images to adapt the layout to the viewing environment dynamically, adaptive design typically involves designing multiple fixed layout sizes. + +Here's a breakdown of key aspects of adaptive design: + +- **Multiple Fixed Layouts**: Adaptive design involves creating several distinct layouts for multiple screen sizes. Typically, designers create layouts for desktop, tablet, and mobile views. Each layout is fixed and doesn't change once it's loaded. +- **Device Detection**: When a user visits the website, the server detects the type of device (e.g., desktop, tablet, mobile) and serves the appropriate layout. This detection is usually based on the device's screen size and sometimes other factors like the user agent. +- **Pros and Cons**: + - **Pros**: + - Optimized Performance: Since layouts are pre-designed for specific devices, they can be optimized for performance on those devices. + - Customization: Designers can tailor the user experience to each device more precisely. + - **Cons**: + - More Work: Requires designing and maintaining multiple layouts. + - Less Fluidity: Doesn't cover as many devices as responsive design. New or uncommon screen sizes might not have an optimized layout. +- **Use Cases**: Adaptive design is often chosen when there is a need for highly tailored designs for different devices, or when performance optimization for specific devices is a priority. It can be especially useful for complex sites where different devices require significantly different user interfaces. + +In your work as a front-end engineer, incorporating adaptive design might involve using HTML and CSS to create different layouts, and JavaScript to detect devices and serve the appropriate layout. SolidJS, being a declarative JavaScript library, would be instrumental in managing the state and reactivity aspects of these different layouts. + +### 6.4 — Algorithms + +An algorithm is a step-by-step procedure or formula for solving a problem. In the context of web development and programming, it refers to a set of instructions that are designed to perform a specific task or to solve a specific problem. Algorithms are fundamental to all aspects of computer science and software engineering, including web development. + +When developing websites or web applications, algorithms can be used for various purposes such as: + +- **Data Sorting and Searching**: Algorithms can sort or search data efficiently. For instance, sorting algorithms like QuickSort or MergeSort can be used to organize data, and search algorithms like binary search can quickly find data in sorted lists. +- **Optimizing Performance**: Algorithms help in optimizing the performance of websites. For example, algorithms that efficiently handle data requests and responses can significantly improve the speed and responsiveness of a web application. +- **Solving Complex Problems**: Complex problems like route planning in maps, recommendation systems in e-commerce sites, or even rendering complex graphics, rely on sophisticated algorithms. +- **Data Structures**: Algorithms often go hand-in-hand with data structures, which are ways of organizing data. Choosing the right algorithm often depends on which data structure is used. + +In web development, a deep understanding of algorithms is essential for creating efficient and effective web applications. This understanding helps in writing code that not only solves the problem at hand but does so in the most efficient way possible, considering factors like execution time and memory usage. + +A commonly used algorithm is Binary search. It is an efficient algorithm for finding an item from a sorted list of items. It works by repeatedly dividing in half the portion of the list that could contain the item, until you've narrowed down the possible locations to just one. + +```javascript +function binarySearch(array, target) { + let start = 0 + let end = array.length - 1 + + while (start <= end) { + let middle = Math.floor((start + end) / 2) + + if (array[middle] === target) { + // Found the target + return middle + } else if (array[middle] < target) { + // Continue search in the right half + start = middle + 1 + } else { + // Continue search in the left half + end = middle - 1 + } + } + + // Target not found in the array + return -1 +} + +// Example usage: +let numbers = [1, 3, 5, 7, 9, 11, 13, 15, 17] +let target = 9 +let index = binarySearch(numbers, target) + +if (index !== -1) { + console.log(`Target found at index: ${index}`) +} else { + console.log('Target not found in the array') +} +``` + +In this example, the binarySearch function takes a sorted array and a target value. It repeatedly narrows down the search by dividing the array in half, checking whether the middle element is equal to, less than, or greater than the target value. This process is much faster than searching through each element in the array one by one (linear search), especially for large arrays. + +Binary search is a practical example of an algorithm that web developers might use in scenarios where quick searches in sorted lists or arrays are required, such as in search features, data processing, or handling large datasets efficiently. + +Learn More + +- [JavaScript Algorithms and Data Structures](https://www.youtube.com/playlist?list=PLC3y8-rFHvwjPxNAKvZpdnsr41E0fCMMP) +- [The Last Algorithms Course You'll Need](https://frontendmasters.com/courses/algorithms/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters +- [Data Structures & Algorithms with JavaScript Learning Path](https://frontendmasters.com/learn/computer-science/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters +- [JavaScript Algorithms and Data Structures Masterclass](https://www.udemy.com/course/js-algorithms-and-data-structures-masterclass/) +- [JavaScript Algorithms and Data Structures](https://github.com/trekhleb/javascript-algorithms#algorithms) +- [The Algorithms - JavaScript](https://the-algorithms.com/language/javascript) + +### 6.5 — Asynchronous Programming + +Asynchronous programming in JavaScript is a powerful concept that allows for the execution of code in a non-blocking manner. This is particularly important in the context of web development, where you often deal with operations like fetching data from a server, reading files, or executing time-consuming computations. These operations can take an unpredictable amount of time to complete, and if executed synchronously, they can freeze or slow down the user interface, leading to a poor user experience. + +In asynchronous programming, you can initiate an operation and then move on to other tasks before the operation completes. Once the operation finishes, a callback function is typically executed to handle the result. This approach allows the web page to remain responsive and interactive while waiting for these time-consuming operations to complete. + +Key concepts and features of asynchronous programming in JavaScript include: + +- **Callbacks**: Functions passed as arguments to another function, to be invoked later. Traditional way of handling asynchronous operations, but can lead to "callback hell". +- **Promises**: Objects representing the eventual completion or failure of an asynchronous operation. They allow for more readable and maintainable code. +- **Async/Await**: A syntactical feature that makes it easier to work with Promises in a more synchronous-looking manner. Functions declared with 'async' return a Promise, and 'await' can be used within these functions. +- **Event Loop**: The mechanism that allows JavaScript's single-threaded runtime to handle concurrency. It checks the call stack and processes messages from the message queue. +- **Non-blocking I/O**: In Node.js, this refers to performing I/O operations without blocking the main thread. + +Understanding these concepts is crucial for effective web development, as it allows you to build applications that are efficient, responsive, and provide a seamless user experience. As a front-end engineer focusing on web development, mastering asynchronous programming in JavaScript is essential for handling tasks such as API calls, user interactions, and other operations that require waiting for external processes or resources. + +Learn More + +- [Guide to Asynchronous JavaScript](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous) +- [You Don't Know JS: Async & Performance - 1st Edition](https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/async%20&%20performance/README.md#you-dont-know-js-async--performance) +- [The Hard Parts of Asynchronous JavaScript](https://frontendmasters.com/courses/javascript-new-hard-parts/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters + +### 6.6 — Atomic CSS + +Atomic CSS is a styling methodology in web development that involves using single-purpose classes with limited scope and function. Each class in Atomic CSS is designed to do one thing and do it well, representing a single style attribute and value. This approach is quite different from traditional CSS practices where a class might contain multiple style rules. + +Key Characteristics of Atomic CSS: + +- **Granular Classes**: In Atomic CSS, classes are very granular, meaning each class corresponds to a single CSS property and value. For example, a class might be `.margin-top-10` to apply a `margin-top` of 10 pixels, or `.text-center` to align text to the center. +- **Verbose Naming**: The class names in Atomic CSS tend to be self-descriptive and verbose. They often directly reflect the CSS property and value they are applying, making it easy to understand what a class does just by reading its name. +- **High Reusability**: Because classes are tied to individual style properties, they are highly reusable across different elements and components in a project. +- **Reduced CSS Bloat**: Atomic CSS can help in reducing CSS bloat and redundancy. Since classes are reusable, there's less need for repeated style definitions. +- **HTML Centric**: When using Atomic CSS, most of the design decisions are visible directly in the HTML markup. This results in HTML with many class attributes, each specifying part of the overall styling. +- **Consistency in Design**: Atomic CSS promotes consistency across a project as the same classes are reused, ensuring that elements that are supposed to look the same, do. + +Advantages: + +- **Maintainability**: Easier to maintain as changes to a single class affect all elements using that class. +- **Performance**: Can lead to better performance, especially if a CSS-in-JS approach is used, as only the classes used in the markup are included in the final stylesheet. +- **Scalability**: Scales well for large projects, as the consistent and reusable nature of classes reduces complexity. + +Disadvantages: + +- **Verbose HTML**: The HTML can become cluttered with many class names, which can be hard to read and manage. +- **Learning Curve**: There is a learning curve, especially in understanding and remembering the names of all the classes. +- **Design Limitations**: Some designers find that Atomic CSS can be limiting creatively, as the design needs to adapt to the constraints of the available classes. + +Atomic CSS is particularly useful in large-scale projects, team environments, and situations where maintaining a consistent style guide is important. It's also beneficial in projects where performance is a priority, as it can help to minimize the size of stylesheets. + +Tools: + +- [UnoCSS](https://unocss.dev/) +- [Atomizer](https://acss.io/) + +### 6.7 — Backend as a Service (BaaS) + +BaaS, or "Backend as a Service," is a cloud service model that provides developers with a way to link their web or mobile apps to backend cloud storage and APIs exposed by back-end applications while also providing features such as user management, push notifications, and integration with social networking services. + +These services are aimed at providing a way for web and mobile app developers to streamline the backend development process, speeding up the time to market for app development. BaaS provides a significant advantage especially for smaller teams and startups, who might not have the resources to fully develop and maintain a custom backend solution. + +Key features of BaaS often include: + +- **Database Management**: BaaS platforms offer database services that remove the need for manual database handling. They provide APIs to interact with the data stored in the cloud. +- **User Authentication**: They often include built-in user authentication mechanisms, including support for social media authentication methods. +- **Push Notifications**: BaaS can handle push notifications for your app, which is especially useful for mobile applications. +- **Cloud Code Functionality**: Some BaaS providers allow you to write and deploy server-side code in the cloud environment, which can be useful for executing business logic. +- **File Storage and Management**: They offer cloud-based file storage and management, which can be seamlessly integrated into your app. +- **APIs Integration**: BaaS solutions often come with a set of ready-to-use APIs for various functions, which saves time in development. + +As a front-end engineer focusing on web development, you might find BaaS particularly useful for projects where you need to quickly set up a backend without delving deeply into server-side programming or database management. It allows you to focus on the front-end development and leverage the BaaS for most of the server-side and database functionality. Popular examples of BaaS providers include Firebase, Supabase, and Turso. + +Tools: + +- [Firebase](https://firebase.google.com/) +- [Supabase](https://supabase.io/) +- [Turso](https://turso.tech/) + +Learn More: + +- [Firebase Fundamentals](https://frontendmasters.com/courses/firebase/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters + +### 6.8 — Big'O Notation + +Big O notation is a mathematical notation used in computer science to describe the performance or complexity of an algorithm. Specifically, it characterizes the time complexity or space complexity of an algorithm in terms of how quickly it grows relative to the size of the input, known as "n." The term "Big O" essentially refers to the upper bound of the complexity, giving an idea of the worst-case scenario in terms of how much time or memory an algorithm requires. + +Here's a breakdown of what Big O notation means: + +- **Upper Bound**: Big O provides an upper limit on the time (or space) required by an algorithm in the worst-case scenario. It's important to note that it doesn't describe the exact performance but rather the order of growth of the time or space requirements. +- **Asymptotic Analysis**: Big O is part of asymptotic analysis, which is about the behavior of algorithms as the input size approaches infinity. It helps in understanding the efficiency of algorithms in the long run, without getting bogged down by hardware or implementation-specific details. +- **Rate of Growth**: Different algorithms may have different rates of growth in terms of their time or space requirements. + - O(1): Constant time. The algorithm's performance is unaffected by the size of the input data. + - O(log n): Logarithmic time. The algorithm's performance grows logarithmically with the input size. An example is binary search. + - O(n): Linear time. The performance grows linearly and in direct proportion to the size of the input data. + - O(n log n): A combination of linear and logarithmic growth, common in efficient sorting algorithms like mergesort. + - O(n^2): Quadratic time. The performance is proportional to the square of the input size. Often seen in algorithms with nested iterations over the data set. + - O(2^n) and O(n!): Exponential and factorial time, respectively. These represent algorithms with very rapid growth rates and are generally impractical for large inputs. +- **Not an Exact Measurement**: Big O doesn't give a specific number of operations; it's more about the trend of complexity as the input size increases. It helps in comparing the efficiency of different algorithms and understanding their behavior in a scalable manner. + +In summary, Big O notation is a fundamental concept in computer science for analyzing and communicating the efficiency of algorithms. It's crucial for understanding how algorithms will perform, especially with large inputs, and is a key part of algorithm design and optimization. + +- **Performance Testing**: This involves assessing various performance aspects of a website or application in different browsers. Key metrics include page load time, response time, and rendering speed. Tools like Google Lighthouse, WebPageTest, and browser-specific performance tools (like Chrome DevTools) are used for this purpose. +- **Cross-Browser Testing**: Since web applications can behave differently across browsers due to variations in rendering engines and support for web standards, it's important to test the performance across multiple browsers (like Chrome, Firefox, Safari, and Edge) to ensure consistent user experience. +- **Responsive and Mobile Performance**: Testing how a website performs on different devices, especially mobile devices, is crucial. This includes assessing loading times, interface responsiveness, and touch interactions in various screen sizes and orientations. +- **JavaScript and CSS Performance**: JavaScript and CSS can significantly affect web performance. Testing involves ensuring that scripts and styles are optimized, do not block rendering, and do not cause excessive reflows and repaints. +- **Network Conditions and Load Testing**: Simulating various network conditions (like slow 3G, 4G) helps understand how network speed impacts performance. Load testing, which involves simulating high traffic to test how the site performs under stress, is also crucial. +- **Resource Optimization**: This includes testing for efficient use of resources like images, fonts, and third-party scripts. Techniques like image optimization, minification of CSS and JavaScript, and efficient use of CDNs are evaluated. +- **User Experience Metrics**: Beyond technical metrics, testing also focuses on user-centric metrics like First Contentful Paint (FCP), Time to Interactive (TTI), and Cumulative Layout Shift (CLS), which are critical for understanding the perceived performance by the end-user. +- **Memory Usage and Leaks**: Testing for memory efficiency, particularly in single-page applications (SPAs), to ensure there are no memory leaks that degrade performance over time. +- **Accessibility and SEO**: Ensuring that performance optimizations do not negatively impact accessibility and search engine rankings is also a part of performance testing. + +Learn more: + +- [The Last Algorithms Course You'll Need](https://frontendmasters.com/courses/algorithms/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters + +### 6.9 — Building / Builds (aka, Web Bundlers) + +In the context of software development and web development, the term "building" or "builds" refers to the process of converting source code files into standalone software artifacts that can be run on a computer or server. This is a crucial step in the development lifecycle, especially for a front-end engineer. Let's break down the concept: + +**Definition of Building / Builds:** + +- **Building (Verb)**: The process of compiling, linking, and packaging source code into a usable or executable form. This includes compiling code, bundling resources, and performing tasks like minification and transpilation. +- **Builds (Noun)**: The output or artifacts generated from the building process. These could be executable programs, libraries, web application bundles, etc. + +**Key Aspects of Building in Web Development:** + +- **Compilation**: Translating source code written in a high-level language (like JavaScript) into a form that can be executed by a browser or server. In web development, this might not be traditional compilation but could involve transpilation (converting source code from one language to another, like TypeScript to JavaScript). +- **Bundling**: Combining multiple files and assets (like JavaScript files, CSS files, and images) into a smaller number of files to reduce the number of HTTP requests required to load a web page. +- **Minification and Optimization**: Shrinking file size by removing unnecessary characters (like whitespace, comments) and optimizing code, which helps in reducing load times and improving performance. +- **Transpiling**: Converting modern JavaScript (ES6/ESNext) to a version compatible with older browsers. Tools like Babel are used for this purpose. +- **Asset Processing**: This can include processing CSS with tools like PostCSS, compiling SCSS or LESS to CSS, and optimizing images. +- **Versioning and Caching**: Assigning unique version numbers to build artifacts to manage caching on client browsers. + +**Importance in Web Development:** + +Building is essential in web development for optimizing the performance and compatibility of web applications. It ensures that the applications are efficient, scalable, and accessible across different browsers and devices. For front-end engineers, understanding and efficiently managing the build process is crucial for creating robust and high-performing web applications. + +The building process would involve a series of steps to ensure that the final product delivered to the browser is optimized, efficient, and error-free. + +**Learn more:** + +- [Vite](https://frontendmasters.com/courses/vite/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters +- [Build & Testing Tools Learning Path](https://frontendmasters.com/learn/build-tools/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters + +**Tools** + +- [Vite](https://vitejs.dev/) +- [Parcel](https://parceljs.org/) +- [esbuild](https://esbuild.github.io/) +- [Rollup](https://rollupjs.org/guide/en/) +- [Rspack](https://www.rspack.dev/) +- [Lightning CSS](https://lightningcss.dev/) + +### 6.10 — CI/CD + +CI/CD stands for Continuous Integration and Continuous Delivery or Continuous Deployment, which are key concepts in modern software development, particularly relevant to your work as a front-end engineer. + +- **Continuous Integration (CI)**: This is the practice of automating the integration of code changes from multiple contributors into a single software project. It's primarily aimed at reducing integration issues which can help you and your team to develop software more rapidly. In practice, CI means that whenever a developer commits changes to a part of the code, it is automatically tested against the current codebase to ensure that these changes don't break anything. This encourages developers to integrate more frequently, perhaps even daily, leading to better collaboration and software quality. +- **Continuous Delivery (CD)**: This extends CI by automatically releasing the changes made to the codebase to a staging or production environment after the build stage. This ensures that you can release new changes to your customers quickly in a sustainable way. It's about automating further stages of the pipeline and ensuring that your code is always in a release-ready state. +- **Continuous Deployment (another CD)**: This is a more advanced practice where every change that passes all stages of your production pipeline is released to your customers. There's no human intervention, and only a failed test will prevent a new change to be deployed to production. + +CI/CD pipelines are typically realized through DevOps tools like Jenkins, GitLab CI/CD, CircleCI, Travis CI, and others. These tools automate the steps in your software delivery process, such as initiating automatic builds, running tests, and deploying to a production environment. + +Implementing CI/CD can significantly improve the speed, efficiency, and quality of software development, especially in teams where multiple developers work on the same codebase. As a front-end engineer, you might interact with these processes mostly in the context of integrating and deploying your front-end code, ensuring that your contributions work seamlessly with the rest of the application and reach users rapidly and reliably. + +**Learn more:** + +- [Enterprise UI Development: Testing & Code Quality](https://frontendmasters.com/courses/enterprise-ui-dev/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) (Building a CI Pipeline with Github Actions Section) from Frontend Masters + +Tools: + +- [GitHub Actions](https://github.com/features/actions) +- [Buddy](https://buddy.works/) + +### 6.11 — Content Management System (CMS) + +Content Management Systems (CMS) are software tools designed to help users create, manage, and modify content on a website without the need for specialized technical knowledge. Essentially, they provide a user-friendly interface for handling the various elements of a website. Here's a breakdown of key aspects of CMS: + +- **User-Friendly Interface:** CMS platforms typically offer a user-friendly interface, making it easy for people with little to no coding experience to create and manage website content. +- **Content Creation and Management:** Users can create, edit, and publish digital content such as text, images, and videos. This includes formatting content, inserting media, and managing how and when content is displayed. +- **Templates and Design:** Most CMSs offer a variety of pre-designed templates, allowing users to choose and customize the layout and design of their website without coding. +- **Extensions and Plugins:** Many CMSs support extensions or plugins, which add additional functionalities to the website, like SEO tools, social media integration, analytics, and more. +- **User Roles and Permissions:** A CMS allows the assignment of different roles and permissions to different users, enabling control over who can edit or publish content. +- **SEO-Friendly Features:** CMSs often include features that help optimize the website for search engines, such as customizable URLs, meta tags, and integration with analytics tools. +- **Responsive Design:** Modern CMSs ensure that the content is mobile-friendly and looks good on all devices. +- **Security:** CMSs provide security features to protect the website from unauthorized access and cyber threats. +- **Scalability:** A CMS can support a website's growth, allowing the addition of more pages or content without a significant overhaul of the site structure. + +### 6.12 — Code Complexity + +Code complexity tools are essential in software development, especially for languages like JavaScript, which is widely used in web development. These tools evaluate the complexity of your code to help maintain its readability, efficiency, and maintainability. + +Code complexity is a measure of how complex or convoluted a piece of code is. It's often measured in terms of the number of lines of code or the number of branches in the code. The more complex the code, the more difficult it is to understand, debug, and maintain. Code complexity tools help in identifying such complex code and provide insights to improve it. + +Code complexity tools typically measure the complexity of code using metrics like cyclomatic complexity, Halstead complexity, and maintainability index. These metrics are calculated based on factors like the number of lines of code, the number of branches, the number of operators and operands, and so on. + +Code complexity tools are useful for front-end engineers to ensure that the code is readable, maintainable, and efficient. They can help in identifying complex code and provide insights to improve it. This is especially important in large codebases, where it can be difficult to keep track of code complexity. + +### 6.13 — Code Coverage + +Code coverage is a key metric in software testing that measures how much of a program's source code is executed during testing. It's crucial for identifying untested parts of the codebase and ensuring that critical functions are thoroughly tested. The main types of code coverage include Statement Coverage, Branch Coverage, Function Coverage, and Condition Coverage, each focusing on different aspects of the code like executable statements, control structure branches, function calls, and boolean sub-expressions. + +In practice, tools specific to programming languages (like Istanbul for JavaScript) track which parts of the code are executed during tests and generate detailed reports. While high code coverage can indicate thorough testing, it's not a guarantee against bugs. It's essential to aim for a realistic coverage goal, prioritizing critical functionalities. Also, remember that some code aspects, particularly in front-end development, might be challenging to test comprehensively. Code coverage should be used as one of several metrics to assess the overall quality of software. + +**Learn more:** + +- [Enterprise UI Development: Testing & Code Quality](https://frontendmasters.com/courses/enterprise-ui-dev/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) (Code Coverage Section) from Frontend Masters + +### 6.14 — Code Formatter + +Code formatters, like Prettier, are tools used in software development to automatically format code in a consistent style. This is particularly important in teams where different developers might have varying coding styles, making the codebase difficult to read and maintain. Prettier is one of the most popular code formatters in the web development world, especially among front-end developers. + +**Key Features of Prettier:** + +- **Consistent Formatting:** Prettier enforces a consistent code style across your entire codebase. It doesn't only check for errors but actually rewrites your code to follow predefined formatting guidelines. +- **Language Support:** While it's widely used in JavaScript, HTML, and CSS, Prettier also supports a variety of other languages and frameworks, making it versatile. +- **Integration with Development Tools:** Prettier can be integrated with popular code editors and version control systems, allowing for automatic formatting on save or before commits. +- **Customizable Options:** While Prettier aims to minimize configuration, it does offer options to customize certain formatting rules to align with personal or team preferences. +- **Ease of Use:** Prettier is designed to be easy to set up and use, often requiring just a simple command to install and another to run it across your codebase. + +**How Prettier Works:** + +- When you run Prettier, it parses your code into an abstract syntax tree (AST). This AST represents the structure of your code but not its formatting. +- Prettier then prints this AST back into a formatted code, following its set of rules and ignoring the original styling. +- This process ensures that the logical structure of your code remains unchanged, but the visual presentation is standardized. + +**Importance in Web Development:** + +- **Improves Readability:** For a front-end engineer, readability of code is crucial. Prettier makes it easier for you and your team to understand and navigate the codebase. +- **Saves Time:** It automates the styling of code, saving developers from spending time on formatting and focusing more on logic and problem-solving. +- **Reduces Merge Conflicts:** Consistent code style reduces the chances of merge conflicts in a team environment, especially conflicts arising due to different formatting styles. + +### 6.15 — CSS in JS + +CSS in JS is a styling technique used in modern web development, especially with JavaScript-based UI frameworks and libraries. It involves writing CSS styles directly within JavaScript code, offering several benefits for UI component-based architectures. + +**Advantages:** + +- **Local Scoping:** Styles are scoped locally to components, avoiding global CSS conflicts. +- **Dynamic Styling:** Easy to create styles that change based on component state or props. +- **JavaScript Power:** Leverage JavaScript features for styling, like variables, functions, and conditions. +- **Maintenance:** Keeping styles close to their components improves maintainability in large codebases. + +**Considerations:** + +- **Performance:** JavaScript-based styling can impact performance in some scenarios. +- **Complexity:** Adds complexity, particularly for those not well-versed in JavaScript. +- **Server-Side Rendering:** Some CSS-in-JS solutions can complicate server-side rendering setups. + +CSS in JS aligns styling practices with modern JavaScript and component-based frameworks, offering encapsulated and scalable styling solutions. + +Tools: + +- [Styled Components](https://styled-components.com/) +- [CSS Modules](https://github.com/css-modules/css-modules) +- [Panda CSS](https://panda-css.com/) +- [StyleX](https://stylex-docusaurus.vercel.app/docs/learn/) +- [Vanilla Extract](https://vanilla-extract.style/) + +### 6.16 — CSS Animations + +CSS animations are a powerful tool in web development for creating engaging and interactive user interfaces. They allow you to animate HTML elements and CSS properties, bringing your web pages to life. CSS animations are particularly useful for creating state-based animations like hover effects and transitions. + +CSS Animations overview: + +- **Simplicity and Performance:** Easier to implement for simple animations and more efficient for basic transitions. +- **Syntax:** Defined using `@keyframes` and the `animation` property in CSS. +- **Control:** Offers less control, ideal for simple, state-based animations like hover effects and transitions. +- **Limitations:** Not suitable for complex or interactive animations based on user input. + +Learn more: + +- [Using CSS animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) on MDN +- [CSS Animations and Transitions](https://frontendmasters.com/courses/css-animations/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters + +Tools: + +- [Animista](https://animista.net/) +- [Animate.css](https://daneden.github.io/animate.css/) + +### 6.17 — CSS Frameworks + +A general CSS framework is a pre-prepared library that is meant to be used as a starting point for the design and layout of websites. These frameworks offer a collection of CSS stylesheets that handle a variety of common web design elements and challenges, such as grid layouts, typography, buttons, forms, and responsive design. The idea is to provide a standard way to build websites quickly without having to write CSS from scratch. + +- **Predefined Classes**: They come with a set of predefined classes for styling elements. This means you can apply a consistent look and feel across your website by simply adding these classes to your HTML elements. +- **Responsive Design**: Most modern CSS frameworks are responsive, meaning they are designed to work on a variety of devices and screen sizes. They often include a grid system that adapts to different screen sizes, making it easier to create a layout that looks good on both desktops and mobile devices. +- **Cross-browser Compatibility**: These frameworks handle a lot of the cross-browser compatibility issues, ensuring that your website looks consistent across different web browsers. +- **Customization**: Many CSS frameworks can be customized to suit the specific needs of a project. This can include changing the color scheme, fonts, or other design elements. +- **Components and Utilities**: They often include a range of components (like modals, dropdowns, and tabs) and utilities (like margin and padding helpers, visibility classes) that can be used to enhance the functionality and appearance of a site. + +Some popular general CSS frameworks include Bootstrap and Bulma. These frameworks are widely used due to their ease of use, extensive documentation, and large community support. They are particularly useful for developers who need to prototype a design quickly or who do not want to deal with the intricacies of pure CSS for common layout and styling tasks. + +Tools: + +- [Bootstrap](https://getbootstrap.com/) +- [Bulma](https://bulma.io/) + +### 6.18 — CSS Resets + +When you're building web pages, you'll notice that different browsers have their own default styles for various HTML elements. These default styles can cause inconsistencies in how your web pages look across different browsers. This is where CSS resets come in handy. + +CSS resets ensure consistency across different browsers by removing default styles that browsers apply to HTML elements. This leads to more control over styling and simplifies cross-browser compatibility. + +**Purpose of CSS Resets:** + +- Consistency Across Browsers: Resets help achieve a uniform look across various browsers. +- Control Over Styling: Resets provide a clean slate for custom styles, ensuring they behave as expected. +- Simplifying Cross-Browser Compatibility: Resets reduce the quirks that arise from browser default style clashes. + +**Considerations:** + +- Resets can sometimes be overkill for smaller projects. +- Understand what each reset rule does to avoid removing needed styles. +- Modern frameworks may include their own reset or normalization styles. + +CSS resets are useful for ensuring consistency and control over styling across different browsers. However, they can be overkill for smaller projects and may not be necessary if you're using a modern CSS framework. + +Tools: + +- [ress](https://www.ress.page/) +- [Destyle.css](https://nicolas-cusan.github.io/destyle.css/) +- [The New CSS Reset](https://github.com/elad2412/the-new-css-reset) +- [A modern CSS reset](https://www.joshwcomeau.com/css/custom-css-reset/) + +### 6.19 — Data API Testing + +Data API testing in the context of websites and web applications involves verifying that the APIs used for transferring data between the server and the client (such as a web browser) are functioning correctly. As a front-end engineer, it's crucial to understand the role of APIs in web development. + +Here's an overview of what data API testing typically involves: + +- **Understanding the API Specifications**: Know the endpoints, request methods, expected request formats, and response data structure. +- **Testing for Functionality**: Ensuring the API performs as expected, including correct responses to data retrieval, creation, updating, and deletion requests. +- **Validation of Data**: Checking the correctness, integrity, and format of the data returned by the API. +- **Testing for Reliability and Performance**: Assessing how the API behaves under different conditions, such as high traffic or large data payloads. +- **Security Testing**: Testing for vulnerabilities and ensuring proper authentication and authorization. +- **Error Handling**: Testing for appropriate error messages and codes in response to invalid requests or internal issues. +- **Automation of Tests**: Using tools for efficient testing and integrating them into the CI/CD pipeline. +- **Documentation and Compliance**: Ensuring clarity and accuracy in API documentation and compliance with standards and regulations. +- **Testing Across Different Devices and Browsers**: Ensuring compatibility of APIs across various environments. + +In your role, you might focus more on the integration of APIs with the front-end code and the user interface. However, understanding the backend perspective can enhance collaboration and contribute to the overall quality of the web application. + +Tools: + +- [Postman](https://www.postman.com/) +- [Thunder Client](https://www.thunderclient.com/) +- [Testfully](https://testfully.io/) + +### 6.20 — Data Structures + +Data structures are a fundamental concept in computer science and programming, playing a crucial role in organizing, managing, and storing data efficiently. They enable the efficient execution of operations on data and are essential for designing efficient algorithms. Understanding the types and uses of different data structures is important for any programmer, including a front-end engineer like yourself, as they impact how quickly and easily you can manipulate the data your applications handle. + +Here are some common data structures: + +- **Arrays:** Collections of elements, each identified by an index or a key. Great for quick access to an element if you know the index. +- **Linked Lists:** A sequence of elements, where each element points to the next one. Ideal for dynamic element addition or removal. +- **Stacks:** Collections that follow the Last-In-First-Out (LIFO) principle. Useful for undo mechanisms, parsing expressions, and more. +- **Queues:** Collections that follow the First-In-First-Out (FIFO) principle. Used in scenarios like printer spooling and task scheduling. +- **Trees:** Hierarchical structures with a root value and subtrees of children with a parent node, used in organizing data and making search operations efficient. +- **Graphs:** Collections of nodes (or vertices) and edges connecting them, representing networks like social connections or map paths. +- **Hash Tables:** Used to store key-value pairs, offering extremely fast search operations. +- **Sets:** Collections of unique elements, useful for ensuring no duplicates and performing operations like unions and intersections. + +As a front-end engineer, you might use these data structures primarily in JavaScript. For instance, arrays and objects (a form of hash table) are commonly used in web development for storing and manipulating data for display or processing. Understanding these structures can help you optimize your code for performance and readability. + +Learn more: + +- [The Last Algorithms Course You'll Need](https://frontendmasters.com/courses/algorithms/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters + +### 6.21 — Declarative Programming + +Declarative programming is a style of building the structure and elements of computer programs that expresses the logic of a computation without describing its control flow. It contrasts with imperative programming, which focuses on explicitly describing how to achieve an operation. Here are some key aspects of declarative programming: + +- **Describing What, Not How:** In declarative programming, you specify what the program should accomplish, rather than detailing the steps to achieve it. The 'how' (specific operations, control flow) is abstracted away, letting the underlying system (like a database or a rendering engine) determine the best way to execute the instructions. +- **High-Level Abstraction:** Declarative programming often operates at a higher level of abstraction than imperative programming, making it more about expressing logic than managing state changes and control flow. This can lead to more concise, readable code. +- **Examples of Declarative Languages:** + - SQL (Structured Query Language): Used for managing and retrieving information from databases, where you describe what data you want or how data should be transformed, not how to perform these operations. + - HTML (Hypertext Markup Language): Used for web development, where you describe the structure and content of a webpage, not how to display it. + - Functional Programming Languages: Such as Haskell or certain usages of JavaScript, where functions are used to describe relationships and transformations of data. +- **Advantages:** + - Ease of Understanding: Since the code describes the desired outcome, it can be more readable and understandable. + - Less Prone to Errors: Declarative code often has fewer side effects and states to manage, which can lead to fewer bugs. + - Better Abstraction: Allows for focusing on what the program should achieve, leaving the low-level operations to the system or language's runtime. +- **Use in Front-End Development:** In your field as a front-end engineer, you might encounter declarative programming in frameworks and libraries that abstract the direct DOM manipulation. For example, ReactJS allows you to declare user interfaces in terms of components and their states, while the library takes care of rendering and updating the DOM. + +In summary, declarative programming is about defining the logic of a computation without getting into the details of its implementation, focusing on the 'what' rather than the 'how'. This approach can lead to more intuitive and maintainable code. + +### 6.22 — Design Systems + +Design systems serve as a foundational framework in UI/UX design, acting as a cohesive set of guidelines that fuse an organization's design principles and elements. This comprehensive approach not only ensures brand consistency across products and services but also streamlines the design process, enhancing efficiency and collaboration. + +Google's Material Design is a prime example, offering an adaptable system of guidelines, components, and tools that uphold the best practices of user interface design. It's renowned for its usage in a multitude of Google applications, significantly influencing the visual and interactive landscape of digital interfaces. + +Another notable system is Apple's Human Interface Guidelines, which emphasize intuitive design and seamless user experience, pivotal in shaping the iOS ecosystem. Similarly, IBM's Carbon Design System demonstrates how a design system can be effectively employed in enterprise environments, marrying aesthetics with functionality. + +Core components of these systems typically include: + +- **Visual Style**: Defined by color schemes, typography, iconography, etc., shaping the product's aesthetic identity. For instance, Material Design uses bold colors and edge-to-edge imagery for visual impact. +- **Component Specifications**: Reusable elements like buttons and sliders, detailed in systems like Material Design to ensure visual and functional uniformity. +- **Layout and Grid Systems**: Facilitating structured and responsive design, as seen in Material Design's grid system. +- **Interaction and Motion**: Encompassing user interactions and responsive animations, vital for a natural user experience. +- **Guidelines and Best Practices**: Covering accessibility, usability, and platform-specific design considerations. + +Design systems extend beyond mere aesthetics; they are pivotal in ensuring accessibility and inclusivity, crucial in today's diverse user landscape. While beneficial, implementing these systems can pose challenges, such as maintaining consistency with evolving trends and achieving widespread adoption within an organization. + +The future of design systems may see greater integration of advanced technologies like AI, further automating and optimizing design consistency checks. Embracing such advancements, developers and designers can continue to craft cohesive, user-friendly, and aesthetically pleasing applications, ensuring a unified brand identity and an enhanced user experience. + +Learn more: + +- [Design Systems with React & Storybook](https://frontendmasters.com/courses/design-systems/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters +- [Design for Developers](https://frontendmasters.com/courses/design-for-developers/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters +- [Design System Road Map](https://roadmap.sh/design-system) + +### 6.23 — Device Testing + +Device testing, particularly in the context of front-end web development, is a critical process to ensure that a website or web application functions correctly across different devices. As a front-end engineer, you're likely familiar with the challenges that come with creating a seamless user experience on a variety of devices, such as smartphones, tablets, and desktops, each with different screen sizes, resolutions, and operating systems. + +The core objective of device testing is to verify that your application is responsive, meaning it adapts its layout and functionality to suit the device it's being viewed on. This includes checking that elements like navigation menus, forms, and media content scale and function properly on different screen sizes. It's not just about the layout; it's also about ensuring that the website performs well on different devices, with quick load times and smooth interactions. + +Here are some key aspects to consider when conducting device testing: + +- **Responsive Design Verification:** Ensure that your site's layout, images, and CSS work as expected on different screen sizes and resolutions. This is crucial because what looks good on a desktop might be unusable on a mobile device. +- **Touchscreen Interactions:** Test touchscreen functionalities on smartphones and tablets. This includes checking button sizes for touch accuracy, ensuring swiping gestures work correctly, and verifying that interactive elements like dropdowns and sliders are touch-friendly. +- **Performance Testing:** Monitor how your site performs on different devices. This includes load times, smoothness of animations, and responsiveness to user interactions. Performance can vary significantly between older and newer devices. +- **Feature Compatibility:** Ensure that all features of your site work on different devices. This includes testing forms, login/logout functionalities, and any dynamic content or features specific to your site. +- **Network Conditions:** Test how your site performs under various network conditions, as users might access your site on anything from high-speed Wi-Fi to slower mobile data connections. +- **Battery Usage:** Pay attention to how your site affects battery life on mobile devices, especially if it's rich in graphics or requires heavy processing. +- **Accessibility Testing:** Ensure that your site is accessible to all users, including those with disabilities. This includes testing with screen readers and ensuring that the site is navigable without relying on visual cues alone. +- **Real User Environments:** Test in conditions similar to your users' environments. This includes different lighting conditions, use while moving, and interaction with the site amidst distractions. + +Using real devices for testing gives you a more accurate understanding of the user experience and can uncover issues that might not be apparent in emulators or simulators. It's a vital part of the development process, especially in a world with a vast array of devices in use. + +Tools: + +- [BrowserStack](https://www.browserstack.com/) +- [LambdaTest](https://www.lambdatest.com/) +- [Sauce Labs](https://www.saucelabs.com/) + +### 6.24 — Development Servers + +Development servers, also known as dev servers or development web servers, are software tools or components used in the process of developing and testing web applications, particularly on the frontend side. Their primary purpose is to serve web application files during the development phase, making it easier for developers to work on their code, see changes in real-time, and test their applications before deploying them to a production environment. + +Here's an explanation of development servers: + +- **Serving Files:** Development servers host and serve the various files that make up a web application, including HTML, CSS, JavaScript, images, and other assets. This allows developers to access their web application locally via a URL (e.g., http://localhost:3000). +- **Live Reloading:** Many development servers offer a feature called "live reloading" or "hot module replacement (HMR)." Live reloading automatically refreshes the web page whenever a file is modified, ensuring that developers can immediately see the impact of their changes without manually refreshing the browser. +- **Local Development Environment:** Development servers provide a controlled local environment for frontend development. This environment mimics some aspects of a production server, such as serving files over HTTP, but is tailored for development purposes. It may also include features like error reporting and debugging tools. + +Overall, development servers play a crucial role in the frontend development workflow by providing a convenient and efficient way to develop, test, and debug before deploying to a production server. + +Tools: + +- [Vite](https://vitejs.dev/) +- [Parcel](https://parceljs.org/) + +### 6.25 — Device Testing Using Emulation + +Device testing using emulation involves simulating different devices within your development environment. This means you can test how your website or application behaves on various devices, like smartphones, tablets, and desktops, without needing the physical devices themselves. + +- **Why it's important**: As you know, users access web content on a diverse range of devices with different screen sizes, resolutions, and operating systems. Emulation allows you to ensure that your application provides a consistent and responsive user experience across all these devices. It's about making sure that your layout, interactive elements, and overall functionality work seamlessly, no matter where or how they're accessed. +- **How it's done**: Most modern browsers, like Chrome and Firefox, have built-in developer tools for device emulation. These tools allow you to simulate different screen sizes, resolutions, and even device-specific characteristics like touchscreens. For instance, in Chrome DevTools, you can choose from a range of preset devices or define custom dimensions to test your layout's responsiveness. +- **Limitations**: While emulation is incredibly helpful, it's not a complete replacement for testing on actual devices. Emulators can't perfectly replicate hardware-specific features or the exact rendering behavior of different browsers on different devices. So, it's always a good idea to complement emulation with real device testing, especially for critical projects. +- **Best Practices**: Start by testing on a few key devices that represent your user base. Use emulation to quickly iterate and fix layout issues. Regularly update the list of devices you emulate to reflect the latest market trends. And remember, always balance emulation with real-device testing for the most accurate results. + +### 6.26 — DOM Scripting/Manipulation + +DOM scripting involves interacting with and manipulating the DOM, which is the programming interface provided by browsers that represents an HTML page as a tree of objects. + +Here's a breakdown of the key aspects of DOM scripting: + +- **DOM Structure**: The DOM represents a web page's structure as a tree of objects, where each node is an HTML element. This tree-like structure allows JavaScript to access and manipulate elements on the web page. +- **Manipulating the DOM**: JavaScript can be used to change the document structure, style, and content. This includes tasks like adding, removing, or modifying HTML elements and attributes, changing styles, and responding to user actions. +- **Events**: DOM scripting often involves handling events like clicks, mouse movements, keyboard presses, etc. JavaScript can listen for these events on elements and execute code in response, enabling interactive web pages. +- **Accessing Elements**: JavaScript can access elements in the DOM using methods like `getElementById()`, `getElementsByClassName()`, `getElementsByTagName()`, or more modern methods like `querySelector()` and `querySelectorAll()`. +- **Modifying Elements**: Once an element is accessed, you can modify its properties. For example, you can change the text content of a paragraph, update the src attribute of an image, or alter the style of an element to change its appearance. +- **Creating and Removing Elements**: You can dynamically create new elements using JavaScript and add them to the DOM, or remove existing elements. This is useful for dynamic content updates without needing to reload the page. +- **Asynchronous Operations and the DOM**: Modern web applications often interact with servers. Techniques like AJAX (Asynchronous JavaScript and XML) and APIs like Fetch allow you to perform server requests and update the DOM with the returned data without reloading the page. + +Tools: + +- [Cash](https://github.com/fabiospampinato/cash) +- [\_hyperscript](https://hyperscript.org/) + +### 6.27 — Front-end Web Development Frameworks & Libraries + +Front-end web development frameworks and libraries are essential tools in modern web development. They provide a structured and standardized approach to building client side rendered web applications. These frameworks and libraries offer a suite of features that streamline the development process, enhance productivity, and simplify complex tasks. Their versatility in handling client-side components makes them essential for efficient and scalable web application development. + +Key Frameworks and Libraries: + +- [Angular](https://angular.io/) \- Supported by Google, Angular is a robust framework known for its advanced features such as two-way data binding and dependency injection. It is particularly suited for complex, large-scale web applications. +- [Vue](https://vuejs.org) \- Vue is acclaimed for its straightforward approach and easy integration. This progressive framework is flexible, making it an excellent choice for both small projects and advanced single-page applications. +- [React](https://reactjs.org/) \- Created by Facebook, React is a versatile library known for its component-based architecture. It allows developers to create reusable UI components and manage data efficiently, making it a popular choice in the industry. +- [Svelte](https://svelte.dev/) \- Svelte stands out with its innovative compilation strategy, moving much of the workload to compile time. This results in faster web applications with less code, thus boosting performance. +- [SolidJS](https://www.solidjs.com/) \- As a relatively new addition, SolidJS focuses on fine-grained reactivity and efficient direct DOM updates. It offers a streamlined and fast solution for developing high-performance web applications. + +Learn more: + +- [All Svelte Courses](https://frontendmasters.com/topics/svelte/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters +- [Reactivity with SolidJS](https://frontendmasters.com/courses/reactivity-solidjs/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters +- [React Learning Path](https://frontendmasters.com/learn/react/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters +- [Vue.js Learning Path](https://frontendmasters.com/learn/vue/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters +- [Angular Learning Path](https://frontendmasters.com/learn/angular/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters + +### 6.28 — Full Stack Web Development Frameworks + +Full-stack web development frameworks are revolutionizing the field of web development, seamlessly integrating front-end and back-end functionalities. These tools offer a holistic approach to building web applications, featuring comprehensive toolsets that enhance efficiency, boost productivity, and simplify complex coding tasks. Their capability to handle both client-side and server-side operations makes them indispensable for creating scalable and robust web applications, while maintaining a unified codebase conducive to collaborative development. + +Here are some prominent full-stack web development frameworks known for their advanced features and user-friendly design: + +- [Next.js](https://nextjs.org/ 'Learn more about Next.js') \- A React framework ideal for building server-side rendering and static web applications, offering optimized performance and streamlined development process. +- [Nuxt.js](https://nuxt.com/ 'Learn more about Nuxt.js') \- A Vue.js framework that excels in creating versatile, server-side rendered applications, known for its simplicity and flexibility. +- [Svelte Kit](https://kit.svelte.dev/docs/introduction/ 'Learn more about Svelte Kit') \- A Svelte-based framework designed for developing highly efficient web applications, prioritizing speed and ease of use. +- [SolidStart](https://start.solidjs.com/getting-started/what-is-solidstart 'Learn more about SolidStart') \- A SolidJS framework focusing on exceptional performance and an enhanced developer experience, streamlining the web development process. +- [Qwik](https://qwik.builder.io/ 'Learn more about Qwik') \- A groundbreaking framework for constructing ultra-fast web applications with minimal loading times, setting a new standard in web performance. +- [Astro](https://astro.build/ 'Learn more about Astro') \- A cutting-edge web framework for building fast, content-focused websites. It uniquely allows the use of multiple UI frameworks like React, Vue, or Svelte, rendering them into static HTML for enhanced page speed and user experience. + +Learn more: + +- [Introduction to Next.js 13+, v3](https://frontendmasters.com/courses/next-js-v3/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters +- [Astro for Fast Website Development](https://frontendmasters.com/courses/astro/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters +- [Qwik for Instant-Loading Websites & Apps](https://frontendmasters.com/courses/qwik/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters +- [Nuxt 3 Fundamentals](https://frontendmasters.com/courses/nuxt/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters +- [Fullstack Svelte with SvelteKit](https://frontendmasters.com/courses/sveltekit/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters + +### 6.29 — Functional Programming (FP) + +Functional programming is a programming paradigm that treats computation as the evaluation of mathematical functions and avoids changing-state and mutable data. As a front-end engineer, you're likely familiar with JavaScript, which, while not a purely functional language, supports functional programming concepts. + +In functional programming, functions are first-class citizens, meaning they can be assigned to variables, passed as arguments to other functions, and returned from other functions, just like any other data type. This allows for higher-order functions, where functions operate on other functions. + +One key principle is immutability. Unlike in imperative programming where you modify data, in functional programming, you create new data structures instead of changing existing ones. This makes your programs easier to reason about, debug, and test, as there are fewer unexpected side effects from shared mutable state. + +Functional programming also emphasizes pure functions. A pure function is one where the output value is determined solely by its input values, without observable side effects, like modifying a global object or changing a value outside its scope. This predictability makes code easier to understand and less prone to bugs. + +A canonical example of functional programming in the context of front-end development, particularly using JavaScript, is the use of array methods like .map(), .filter(), and .reduce(). These methods are perfect examples of functional programming concepts because they treat functions as first-class citizens and encourage immutability and pure functions. + +Here's a simple example: + +Suppose you have an array of user objects and you want to perform a series of operations: filter out users who are inactive, transform the remaining user objects to strings containing their names, and finally concatenate these names into a single string. + +```javascript +const users = [ + { name: 'Alice', active: true }, + { name: 'Bob', active: false }, + { name: 'Charlie', active: true }, + { name: 'David', active: true }, +] + +const activeUsersString = users + .filter((user) => user.active) // Filter out inactive users + .map((user) => user.name) // Transform to an array of names + .join(', ') // Concatenate into a single string + +console.log(activeUsersString) // Outputs: "Alice, Charlie, David" +``` + +In this example: + +- **.filter():** This is a pure function that doesn't change the original array but returns a new array based on the provided condition (active users in this case). +- **.map():** This also returns a new array and does not modify the original array. It transforms each element (user object) into a new form (user's name). +- **.join():** This method is used to concatenate all elements of the array into a single string, separated by commas in this case. + +Each of these methods returns a new value without mutating the original data, embodying the principles of immutability and pure functions. This approach makes the code more readable, maintainable, and less prone to side effects, which are crucial benefits of functional programming. + +Learn more: + +- [Functional Programming Jargon](https://github.com/hemanth/functional-programming-jargon#functional-programming-jargon) 📕 +- [Functional-Light-JS](https://github.com/getify/Functional-Light-JS) 📕 +- [Mostly adequate guide to FP (in javascript)](https://github.com/MostlyAdequate/mostly-adequate-guide) 📕 +- [Functional JavaScript Learning Path](https://frontendmasters.com/learn/functional-javascript/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters + +### 6.30 — Functional / End to End Testing + +End-to-End (E2E) testing and Functional testing are two important approaches in software testing, each serving a distinct purpose in ensuring the quality and reliability of software applications. While they share some similarities, they focus on different aspects of the software. + +**End-to-End (E2E) Testing:** + +- **Purpose:** E2E testing is designed to test the flow of an application from start to finish. It aims to replicate real user scenarios, ensuring the system behaves as intended in a fully integrated environment. +- **Scope:** Covers the entire application and its integration with external interfaces and systems. It checks the flow across multiple layers of the application, from front-end to back-end, databases, and network. +- **Process:** Involves creating test scenarios that cover all the possible user paths and interactions with the application. +- **Automation:** E2E tests can be automated with tools like Selenium, Cypress, or TestCafe. +- **Environment:** Conducted in an environment that closely mirrors the production environment for realistic testing conditions. + +**Functional Testing:** + +- **Purpose:** Focuses on testing the application against its functional requirements or specifications. Checks if the application behaves as expected and meets all the specified requirements. +- **Scope:** More focused on individual functions or features of an application, testing them in isolation. +- **Process:** Test cases are derived from the functional requirements, testing each function by feeding it input and examining the output. +- **Types:** Includes various types like Unit Testing, Integration Testing, System Testing, etc. +- **Automation and Manual Testing:** A combination of automated and manual testing is used, depending on the stage and focus of the testing. + +In summary, E2E testing is about testing the application's workflow from beginning to end in an environment that simulates real-world use. Functional testing, on the other hand, focuses on testing specific functions or features of an application against defined requirements. Both are crucial for different reasons: E2E ensures the overall, integrated functioning of the application, while functional testing ensures that each part of the application works as expected. + +Tools: + +- [Playwright](https://playwright.dev/) +- [Cypress](https://www.cypress.io/) + +Learn more: + +- [Testing Web Apps with Cypress](https://frontendmasters.com/courses/cypress/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters +- [Enterprise UI Development: Testing & Code Quality](https://frontendmasters.com/courses/enterprise-ui-dev/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters +- [Web App Testing & Tools](https://frontendmasters.com/courses/web-app-testing/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters + +### 6.31 — GraphQL + +GraphQL is a query language for APIs and a runtime for executing those queries with your existing data. It's different from the traditional REST API approach. In REST, you usually have multiple endpoints for different data requests, but GraphQL has just one endpoint. This makes data retrieval more efficient and flexible. + +With GraphQL, you can ask for exactly what you need, no more and no less. This means you avoid the problem of over-fetching or under-fetching data that you often encounter with REST APIs. For example, if you need a user's name and email, you can specifically ask for just those in a single query, rather than retrieving the entire user object as you might with a REST API. + +Another key feature is its strong type system. You define types for your data, and these types ensure that your queries and mutations (operations to change data) are valid. This is really helpful for front-end development, especially when you're working with dynamic data. It ensures that the data you get matches what you expect, reducing bugs and simplifying data handling. + +GraphQL also fosters a more collaborative environment between front-end and back-end developers. It provides a clear structure of the data available, which both sides can work with. Tools like GraphiQL (an in-browser IDE for exploring GraphQL) allow you to easily test and structure your queries. + +However, it's not all smooth sailing. There's a learning curve to understanding how to structure queries and mutations. You also need to manage caching and state differently from REST. But overall, the precise data fetching and reduced boilerplate code make it a popular choice, especially in complex applications where you need more control over data retrieval. + +Learn more: + +- [GraphQL](https://graphql.org/learn/) +- [Server-Side GraphQL in Node.js](https://frontendmasters.com/courses/server-graphql-nodejs/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters +- [Client-Side GraphQL in React](https://frontendmasters.com/courses/client-graphql-react/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters +- [How to GraphQL](https://www.howtographql.com/) + +Tools: + +- [Apollo GraphQL](https://www.apollographql.com/) + +### 6.32 — Headless Content Management System (Headless CMS) + +A Headless Content Management System (Headless CMS) is a type of content management system (CMS) that separates the "body" (i.e., the content storage and management) from the "head" (i.e., the presentation layer where this content is displayed). This is different from traditional CMS platforms like WordPress or Joomla, which typically intertwine content management with content presentation in a single application. + +Here are the key aspects of a Headless CMS: + +- **Content Management and Delivery:** A Headless CMS allows you to manage and store content, but unlike traditional CMS, it does not dictate how or where the content is displayed. This content is made accessible via an API (usually a RESTful or GraphQL API). +- **API-Driven Approach:** Because the content is delivered via APIs, it can be displayed on any device or channel capable of making API calls. This makes a Headless CMS extremely flexible and suitable for modern web development, where content needs to be displayed across various platforms like websites, mobile apps, smart devices, etc. +- **Front-End Freedom:** Developers have the freedom to use any front-end tool or technology they prefer. This is particularly beneficial for front-end engineers like you, as it allows the use of modern JavaScript frameworks and libraries (such as SolidJS, React, Angular, etc.) to fetch and display content. +- **Omnichannel Content Delivery:** A Headless CMS can serve content to multiple channels simultaneously. This is increasingly important in a multi-device, multi-channel digital landscape. +- **Enhanced Performance and Flexibility:** Since the presentation layer is decoupled from the content management, websites and apps can be more performant. Developers can optimize the front end separately without worrying about the backend CMS architecture. +- **Scalability and Security:** A Headless CMS can be more scalable and secure, as it allows developers to implement robust security measures on the front end and manage scaling without being constrained by the CMS's backend limitations. + +In summary, a Headless CMS offers greater flexibility, improved performance, and an API-driven approach to content management, making it an ideal choice for modern web development projects where content needs to be displayed across various platforms and devices. + +Tools: + +- [Contentful](https://www.contentful.com) +- [Sanity.io](https://www.sanity.io) +- [Strapi](https://strapi.io) +- [Directus](https://directus.io) +- [GraphCMS](https://graphcms.com) +- [Prismic](https://prismic.io) +- [Storyblok](https://www.storyblok.com) +- [Cockpit](https://getcockpit.com) + +### 6.33 — HTML Email Development + +HTML email development involves creating emails that are formatted and styled using HTML (HyperText Markup Language) and CSS (Cascading Style Sheets). This is similar to web development, but with some unique challenges and considerations. Here are the key aspects: + +- **Basic Structure**: HTML emails are structured like basic HTML web pages. They include the DOCTYPE declaration, a head section (for styles), and a body section (for content). However, the structure is simpler compared to modern web pages. +- **Inline CSS**: CSS is used for styling, but unlike web development, most of the CSS should be inline. This is because many email clients do not support external or even internal (within the head tag) stylesheets. +- **Table-Based Layouts**: While modern web development favors CSS Flexbox and Grid for layouts, HTML emails often rely on tables for structuring content. This is because tables provide more consistent rendering across different email clients. +- **Compatibility and Testing**: Different email clients (like Outlook, Gmail, Apple Mail) render HTML emails differently. This necessitates extensive testing to ensure compatibility. Tools like Litmus or Email on Acid can be used for testing across various clients. +- **Responsive Design**: Like web development, HTML emails need to be responsive. This is often achieved using media queries and fluid table layouts. However, some email clients have limited support for media queries. +- **Images and Multimedia**: The use of images in HTML emails must be carefully considered. Many email clients block images by default, so important information should not be conveyed through images alone. Alt text and fallbacks are important. +- **Simpler is Better**: Due to the wide range of email clients and their varying levels of support for HTML/CSS, simpler designs often lead to more consistent results. +- **Avoid JavaScript**: JavaScript is generally not supported in HTML emails for security reasons. All interactivity needs to be handled with pure HTML/CSS. +- **CAN-SPAM Compliance**: HTML emails, especially for marketing, must comply with laws like the CAN-SPAM Act. This includes having a clear subject line, a valid physical address, and an easy way to unsubscribe. +- **Email Service Providers (ESP)**: ESPs like Mailchimp or SendGrid offer tools to design, send, and manage HTML emails. They also provide templates and handle things like email delivery and analytics. + +As a front-end engineer, you'll find that many principles of web development apply to HTML email development, but with a greater emphasis on compatibility and simplicity due to the fragmented nature of email client support. + +Learn more: + +- [HTML Email Development, v2](https://frontendmasters.com/courses/html-email-v2/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters + +### 6.34 — Imperative Programming + +Imperative programming is a programming paradigm that uses statements to change a program's state. It's based on the concept of giving the computer a sequence of commands, which it executes in order. This approach is akin to how you might give someone a series of steps to perform a task, like a recipe. In imperative programming, you're essentially telling the computer "how" to do something. + +Key characteristics of imperative programming include: + +- **Sequence of Commands:** Programs are written as a series of instructions. Each instruction is executed in the order it's written, moving from one step to the next. +- **State Change:** The program's state is changed through variables and data structures. As the instructions are executed, these variables and data structures are modified, reflecting the changing state of the program. +- **Control Structures:** Imperative programming uses control structures like loops (for, while) and conditionals (if, else) to control the flow of execution. These structures dictate when and how certain parts of the code are executed based on certain conditions or repetitions. +- **Procedural Approach:** Imperative programming often involves a procedural method, where tasks are encapsulated into functions or procedures. These procedures can be called at different points in the program, allowing for code reuse and better organization. + +In the field of front-end engineering, we often use imperative programming principles when working with JavaScript. For instance, when manipulating the DOM or handling events, you're giving explicit instructions on how to modify the webpage's state or respond to user interactions. + +### 6.35 — Interaction Design + +Interaction Design (IxD) is a field focused on designing interactive digital products, environments, systems, and services. It's about shaping digital things for people's use, balancing technical functionality with visual elements to create a system that is not only operational but also usable and adaptable to changing user needs. + +Key Principles of Interaction Design + +- **Goal-Driven Design:** IxD aims to design products that fulfill both the goals of the user and the objectives of the business. +- **Usability:** The system should be easy to use, with a focus on simplicity and intuitiveness. +- **User Feedback and Interaction:** Interaction design heavily relies on providing clear feedback to user actions. +- **Affordances and Signifiers:** These are design elements that indicate what action is possible and how to perform it. +- **Consistency:** Keeping interactions consistent across the system helps users learn and understand the functionality more quickly. + +Importance in Digital Products + +- **Improving User Experience:** Good interaction design enhances the user experience. +- **Facilitating User Tasks:** It helps users achieve their goals efficiently. +- **Driving User Engagement:** Engaging and intuitive interfaces can increase user satisfaction. + +Processes in Interaction Design + +- **Research and Understanding Users:** Gathering data about user needs and behaviors. +- **Designing Interactions:** Creating wireframes, prototypes, and high-fidelity designs. +- **Testing and Iteration:** Continuously testing with real users and iterating based on feedback. + +**Tools and Technologies** + +- **Prototyping Tools:** Software like Figma for creating interactive prototypes. +- **User Research:** Tools for surveys, analytics, and user testing to gather insights. + +Interaction design is not just about aesthetics; it's about creating functional, efficient, and enjoyable digital experiences. As a front-end engineer, integrating IxD principles into your work with HTML, CSS, JavaScript, and SolidJS can significantly enhance the quality and user-friendliness of the websites you develop. This alignment of technical skills with user-centric design is key to successful front-end development. + +### 6.36 — JAM stack + +The "JAMstack" is a modern web development architecture that stands for JavaScript, APIs, and Markup. It's a design philosophy aimed at creating fast, secure, and scalable websites and applications. Here's a breakdown of its components and why it's significant in web development: + +Components of JAMstack + +- **JavaScript:** The dynamic programming language used for client-side functionality, interacting with APIs for data and managing web app logic. +- **APIs:** Application Programming Interfaces for server-side operations, either custom-built or from third-party services. +- **Markup:** Static content served to the client, often prebuilt with site generators and served via a CDN. + +Advantages of JAMstack + +- **Performance:** Faster load times due to pre-generated content served through a CDN. +- **Security:** Fewer security vulnerabilities with server-side processes abstracted into APIs. +- **Scalability:** Easier to handle traffic spikes with static files served across CDNs. +- **Developer Experience:** Developers can focus on front-end development without back-end constraints. +- **Cost-Effective:** Generally less expensive hosting compared to traditional server hosting. + +Common Use Cases + +- **Static Sites:** Blogs, documentation sites, and marketing websites. +- **E-commerce Sites:** Leveraging third-party services for functionality. +- **Web Applications:** Single-page applications that require dynamic client-side rendering. + +The JAMstack represents a shift in how web applications are built, focusing on performance, security, and developer efficiency. It allows for building more robust, maintainable, and scalable web solutions by decoupling the front end from the back end and leveraging modern tools and services. + +Learn more: + +- [JAMstack](https://jamstack.org/) + +### 6.37 — JavaScript Performance + +JavaScript performance refers to how efficiently and quickly JavaScript code runs in a web browser or other environment. The performance of JavaScript is crucial in web development, as it directly affects the user experience, especially for interactive and dynamic websites. Several factors influence JavaScript performance: + +- **Execution Speed**: The time it takes for the JavaScript engine in a browser to execute the code. Modern JavaScript engines like V8 (used in Google Chrome) and SpiderMonkey (used in Firefox) use various optimization techniques like Just-In-Time (JIT) compilation to improve execution speed. +- **DOM Manipulation**: JavaScript often interacts with the Document Object Model (DOM) to update the web page. However, excessive or inefficient DOM manipulation can slow down performance, as each change can trigger reflow and repaint operations in the browser. +- **Asynchronous Programming**: JavaScript uses asynchronous programming, especially for operations like network requests. Efficient use of async patterns like callbacks, promises, and async/await can improve performance by not blocking the main thread. +- **Memory Management**: JavaScript is a garbage-collected language, meaning it automatically handles memory allocation and deallocation. Poor memory management (like creating unnecessary objects or not freeing up unused objects) can lead to memory leaks, impacting performance. +- **Optimization Strategies**: Minimizing and compressing JavaScript files, using efficient algorithms, avoiding global variables, and leveraging browser caching can improve performance. +- **Browser-Specific Differences**: Different browsers have different JavaScript engines, which means that JavaScript might perform differently across browsers. Developers need to test and optimize their code for cross-browser compatibility. +- **Network Performance**: For web applications, the size of JavaScript files and the number of requests made to the server can impact performance, as they affect the load time of a web page. +- **Use of Web Workers**: Web Workers allow running JavaScript in the background, on a separate thread from the main execution thread, which can be used to perform heavy tasks without interrupting the user interface. + +Improving JavaScript performance involves profiling and benchmarking the code to identify bottlenecks, and then applying best practices and optimization techniques to address these issues. As a front-end engineer, you'd be familiar with many of these aspects, and tools like Google Chrome's DevTools can be invaluable for analyzing and improving JavaScript performance. + +Learn more: + +- [JavaScript performance optimization](https://developer.mozilla.org/en-US/docs/Learn/Performance/JavaScript) +- [Blazingly Fast JavaScript](https://frontendmasters.com/courses/blazingly-fast-js/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters +- [JavaScript Performance](https://frontendmasters.com/courses/web-performance/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters + +### 6.38 — JSX + +JSX stands for JavaScript XML. It is a syntax extension for JavaScript, commonly used with React, a popular JavaScript library for building user interfaces. JSX allows you to write HTML-like code in your JavaScript files, making it easier to create and understand the structure of your UI components. + +In traditional JavaScript, creating UI components involves manually creating and manipulating DOM elements, which can be cumbersome and hard to read. JSX simplifies this process by allowing you to write your UI components in a way that resembles HTML. This makes your code more readable and maintainable, especially for developers familiar with HTML. + +When you write JSX, under the hood, it gets transformed into JavaScript. For instance, a JSX expression like <div>Hello World</div> is converted to React.createElement('div', null, 'Hello World') by a compiler like Babel. This process is known as transpilation. + +JSX is not limited to HTML-like syntax; it can also include JavaScript expressions. These expressions are written inside curly braces {}, allowing you to embed variables, perform calculations, and execute functions right within your JSX code. This feature makes it incredibly powerful for dynamic UI generation. + +Overall, JSX is a core part of React and some other frameworks (e.g., SolidJS), offering a more intuitive way to build and manage UI components using a syntax that closely resembles HTML, integrated seamlessly with JavaScript. + +Learn more: + +- [JSX](https://facebook.github.io/jsx/) + +Tools: + +- [Naked JSX](https://nakedjsx.org/) + +### 6.39 — Micro Frontends + +Micro frontends are a design approach in web development that extend the concepts of microservices to the frontend. The idea is to break up a web application's frontend into smaller, more manageable pieces that can be developed, tested, and deployed independently. This approach is particularly beneficial for large, complex applications and can offer several advantages. + +**Advantages:** + +- **Decoupled Codebases:** Each micro frontend can have its own codebase, making it easier for different teams to work on different parts of the application without affecting each other. +- **Independent Development and Deployment:** Teams can develop, test, deploy, and update their micro frontends independently. +- **Technology Agnostic:** Different teams can choose the technology stack that best suits their micro frontend. +- **Scalability:** Since micro frontends are independent, they can be scaled based on their individual needs rather than scaling the entire application. +- **Easier Upgrades and Updates:** Updating technology or making changes is easier and less risky because only a small part of the application is affected. +- **Focused Code and Teams:** Each micro frontend can focus on a specific business domain, leading to more focused and maintainable code. + +**Challenges:** + +- **Integration Complexity:** Ensuring a seamless integration and consistent user experience across all micro frontends can be challenging. +- **Performance Considerations:** Loading multiple micro frontends can lead to performance issues, especially if not managed properly. +- **Shared Dependencies:** Managing shared resources and dependencies across micro frontends requires careful planning. + +Overall, micro frontends offer a powerful way to scale and maintain large web applications, but they require careful design and management to overcome the challenges associated with this approach. + +Learn more: + +- [Micro Frontends](https://microfrontends.com/) + +### 6.40 — Monorepos + +A monorepo, short for monolithic repository, is a software development strategy where the code for many projects is stored in a single version control repository. This is in contrast to a multi-repo approach where each project or service has its own repository. Here are some key aspects of monorepos: + +- **Single Source of Truth**: All the code for different projects, libraries, or services lives in one place. This simplifies the process of managing dependencies and understanding the codebase as a whole. +- **Simplified Dependency Management**: In a monorepo, shared code and libraries are easily accessible to all projects within the repository. This reduces the complexity of dependency management and versioning, as there's a single, unified version of each dependency. +- **Unified Build and Test Systems**: Monorepos enable consistent tooling across all projects. Build, test, and deployment processes can be standardized, making it easier to maintain and scale these systems. +- **Easier Refactoring and Code Reuse**: Since all projects reside in the same repository, it's easier to refactor code and share code across different teams and projects. This can lead to more efficient development and reduced duplication of effort. +- **Atomic Commits**: Changes that span multiple projects can be committed together atomically. This ensures that all parts of the system are always in sync and reduces the risk of breaking dependencies. +- **Improved Collaboration**: Monorepos can encourage collaboration across teams, as developers are more likely to make changes across different parts of the codebase when it's all in one place. +- **Challenges**: However, monorepos also come with challenges. They can grow very large, which may cause issues with version control systems, and can lead to slower build times. Tooling and infrastructure need to be robust to handle the scale of a monorepo. + +Companies like Google, Facebook, and Twitter use monorepos for their large-scale software development due to these advantages, despite the challenges. In your role as a front-end engineer, a monorepo might be beneficial if you're working on multiple interrelated projects and you want to streamline dependency management and testing processes. However, the decision to use a monorepo should be based on the specific needs and scale of your projects. + +Learn more: + +- [Monorepos.tools](https://monorepo.tools/) +- [JavaScript and TypeScript Monorepos](https://frontendmasters.com/courses/monorepos/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) on Frontend Masters + +### 6.41 — Muli-Page Apps (MPA) + +A Multi-Page App (MPA) is a type of web application that consists of multiple web pages. Each page is a separate HTML document, and navigation between pages is done by clicking on links or using browser navigation. This is in contrast to a Single-Page App (SPA), where all the content is loaded dynamically into a single web page. + +This architecture is characteristic of classic web design and has several key aspects: + +- **Full Page Reloads:** In MPAs, navigating to different sections or pages of the application results in a full page reload. Every time a user requests a new page, the server processes the request and sends back a new HTML page, leading to a complete refresh of the browser window. +- **Server-Side Rendering:** Typically, MPAs rely on server-side rendering. The server handles the bulk of the logic and renders the HTML content, which is then sent to the client's browser. This can include processing forms, fetching data from databases, and integrating with other back-end services. +- **SEO Friendly:** MPAs are generally more SEO-friendly out of the box. Since each page is a separate document, it's easier for search engines to crawl and index each page individually. +- **Simplicity and Development:** The development of MPAs can be straightforward, especially for smaller websites. Traditional web technologies like HTML, CSS, and JavaScript are used, and each page can be developed independently. +- **Scalability in Content and Functionality:** MPAs can be more scalable in terms of managing diverse content and functionalities. They are well-suited for large-scale websites with extensive and varied content, like e-commerce sites, educational platforms, and news websites. +- **Performance Considerations:** While MPAs can be slower due to full page reloads (impacting user experience), modern techniques like caching and optimized server responses can mitigate these issues. +- **Framework and Technology Choices:** Developers can use a wide range of server-side technologies to build MPAs, such as PHP, Ruby on Rails, ASP.NET, Java Servlets, and more. Front-end aspects are handled with standard HTML, CSS, and JavaScript. +- **Clear State Management:** In MPAs, the state is reset with each page load, which can simplify state management compared to SPAs (Single-Page Applications) where state is maintained client-side. + +In summary, MPAs are a traditional but still very relevant approach to building web applications, especially when dealing with complex and content-rich websites. They offer benefits in terms of SEO, scalability, and simplicity in development, but require considerations for performance optimization and user experience. + +Note: The new [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) can make MPAs behave more like an SPA (without a full page refresh). The API allows for smooth transitions between pages without full page reloads. + +### 6.42 — Native Application Development from Web Technologies + +Using web technologies to build native applications involves leveraging HTML, CSS, and JavaScript to create applications that run on various platforms, including desktops, mobile devices, and web browsers. This approach enables developers to use a single codebase for multiple platforms, simplifying the development process and reducing maintenance costs. + +Learn more: + +- [Electron, v3](https://frontendmasters.com/courses/electron-v3/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters +- [Build Progressive Web Apps (PWAs) from Scratch](https://frontendmasters.com/courses/pwas/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters +- [React Native, v2](https://frontendmasters.com/courses/react-native-v2/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters + +Tools: + +- [Electron](https://electronjs.org/) +- [React Native](https://reactnative.dev/) +- [NodeGui](https://docs.nodegui.org/) +- [Socket](https://socketsupply.co/) +- [Capacitor](https://capacitorjs.com/) +- [Tauri](https://beta.tauri.app/) +- [NativeScript](https://nativescript.org/) +- [PWA](https://web.dev/articles/what-are-pwas) + +### 6.43 — Object Oriented Programming (OOP) + +Object-Oriented Programming (OOP) is a programming paradigm centered around the concept of "objects." These objects are instances of classes, which are essentially blueprints or templates that define the properties (attributes) and behaviors (methods) that the objects created from them will have. This paradigm is widely used due to its ability to model complex systems more intuitively as compared to procedural programming. Key concepts of OOP include: + +- **Classes and Objects**: + - Class: A blueprint for creating objects. A class defines a type of object in terms of the data it holds and the operations (methods) that can be performed on that data. + - Object: An instance of a class. It encapsulates data and behavior specific to that type. +- **Encapsulation**: This principle is about bundling the data (variables) and the methods that operate on the data into a single unit, i.e., class. It also involves restricting direct access to some of the object's components, which is a means of preventing accidental interference and misuse of the methods and data. +- **Inheritance**: This is a mechanism where a new class is derived from an existing class. The new class, known as the subclass, inherits the attributes and methods of the existing class, called the superclass. This allows for reusability of code and can model hierarchical relationships. +- **Polymorphism**: It refers to the concept where different classes can be used with the same interface. This is achieved through inheritance and interface implementation. Polymorphism allows for flexibility and loose coupling in code. +- **Abstraction**: This concept involves hiding complex implementation details and showing only the necessary features of an object. In other words, it's about creating a simple interface while the underlying details are kept hidden from the user. + +These concepts allow OOP to provide a structured approach to software development. It helps in making code more modular, flexible, and adaptable to changes, which is particularly beneficial for larger, more complex software systems. Additionally, OOP concepts can align closely with how we naturally perceive the world, making it a more intuitive way to program for many developers. + +Learn more: + +- [The Hard Parts of Object Oriented JavaScript](https://frontendmasters.com/courses/object-oriented-js/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters + +### 6.44 — Offline / Local First Web Development + +Offline-first web development is a design approach where a web application is built to function primarily without a network connection. The goal is to provide a seamless and uninterrupted user experience, even when the user is offline or has an unreliable internet connection. This approach is particularly useful for applications that need to be usable in areas with poor connectivity or for mobile users who may frequently lose internet access. + +Key aspects of offline-first web development include: + +- **Data Caching:** Web applications store data locally on the user's device so that it can be accessed without an internet connection. This can be achieved using various technologies such as Service Workers, IndexedDB, or local storage. +- **Service Workers:** These are scripts that run in the background, separate from the web page, and provide features like intercepting network requests, caching or retrieving resources from the cache, and delivering push messages. They play a crucial role in enabling offline functionality and content caching. +- **Synchronization:** When the application goes back online, it synchronizes the local changes with the server. This involves handling conflicts and ensuring data consistency between the server and local storage. +- **Progressive Web Apps (PWAs):** Many offline-first applications are developed as Progressive Web Apps. PWAs can be installed on the user’s device and offer an app-like experience. They use modern web capabilities to deliver a high-quality user experience. +- **User Interface Considerations:** The UI should inform users when they are offline and provide feedback on the availability of data and functionality. It's important to design for scenarios where data might be outdated or not available. +- **Optimistic UIs:** These assume actions will succeed and update the interface immediately, then adjust if an error occurs once the application goes back online. This provides a more responsive experience to the user. + +Learn more: + +- [Local-First Web Development](https://localfirstweb.dev/) + +### 6.45 — Polyfills + +In web development, a polyfill is a piece of code (usually JavaScript) that provides functionality that is not built into a web browser. It's used to emulate features on web browsers that do not support those features natively. Polyfills enable web developers to use modern web standards and features while still maintaining compatibility with older browsers. + +The term "polyfill" is an analogy to the concept of filling in holes in older software with newer code. Polyfills allow developers to write their code as if the browser already supports certain features, and they provide fallback implementations of these features for browsers that don’t support them natively. + +Key points about polyfills: + +- **Backward Compatibility:** Polyfills are essential for maintaining backward compatibility, allowing newer websites to function correctly on older browsers. +- **Feature Detection:** Polyfills often use feature detection to determine whether a browser supports a certain feature. If the feature is missing, the polyfill code is executed to add that functionality. +- **Use Cases:** Common use cases for polyfills include supporting HTML5 elements in older versions of Internet Explorer, implementing new JavaScript APIs in older browsers, and adding CSS features that are not universally supported. +- **Performance Considerations:** While polyfills enable compatibility, they can also affect the performance of a website. It's important to use them judiciously and only when necessary. + +Tools: + +- [Polyfill.io](https://polyfill.io) + +### 6.46 — Progressive Web Apps (PWA) + +A Progressive Web App (PWA) is a type of web application designed to provide a user experience similar to that of a native app, but delivered through the web. PWAs combine the flexibility of web development with the features of native applications. They are built using standard web technologies like HTML, CSS, and JavaScript, but incorporate modern web capabilities to deliver an app-like experience. + +Key characteristics of PWAs include: + +- Responsiveness: They work on any device (desktop, mobile, tablet) and fit any screen size. +- Progressive Enhancement: They are designed to work for every user, regardless of browser choice, leveraging the principle of progressive enhancement. +- Connectivity Independence: PWAs can work offline or on low-quality networks thanks to service workers, which act as a network proxy and cache key resources. +- App-like Interface: PWAs mimic the navigation and interaction patterns of native apps. +- Freshness: They're always up-to-date thanks to the update process via service worker. +- Safe: Served via HTTPS to prevent snooping and ensure content hasn't been tampered with. +- Discoverable: Identifiable as applications thanks to W3C manifests and service worker registration, allowing search engines to find them. +- Re-engageable: Features like push notifications help to re-engage users. +- Installable: They can be added to the home screen without the need for an app store. +- Linkable: Easily shared via a URL, they do not require complex installation. + +The most popular canonical example of a Progressive Web App is Twitter Lite. It encapsulates the core PWA principles by offering a fast, efficient, and reliable mobile browsing experience. It has an app-like interface, works offline, sends push notifications, and is significantly lighter than its native counterpart, leading to better performance on low-end devices and in poor network conditions. Twitter Lite serves as a prime example of how PWAs can provide a high-quality user experience while leveraging the reach and accessibility of the web. + +Learn More: + +- [Progressive Web Apps](https://web.dev/progressive-web-apps/) on web.dev +- [Progressive Web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps) on MDN +- [Build Progressive Web Apps (PWAs) from Scratch](https://frontendmasters.com/courses/pwas/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters + +### 6.47 — Regular Expressions + +Regular expressions (regex) are robust and versatile tools in programming, indispensable for tasks involving text search, match, and manipulation. A regex pattern is a sequence of characters and special symbols defining specific search criteria. Simple patterns can match exact words, like "cat". However, regex's true power lies in its ability to define intricate patterns capable of matching diverse and complex text sequences. For example, a regex pattern can specify conditions for character types, repetitions, and positions within a string. + +In web development, regex is essential for validating user inputs (like email addresses and phone numbers), extracting information from large text blocks, and performing sophisticated search-and-replace operations in text editing. It is particularly crucial for languages like JavaScript, where text processing is a frequent task. Mastering regular expressions greatly empowers a web developer's ability to handle and manipulate strings efficiently and effectively. + +Here is an example: + +```javascript +function isValidEmail(email) { + var regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/ + return regex.test(email) +} + +// Example usage +console.log(isValidEmail('example@test.com')) // true +console.log(isValidEmail('example@.com')) // false +``` + +Th `isValidEmail` function employs a regular expression to ascertain the validity of email addresses. It accepts an email string as input and returns 'true' if the email conforms to a standard pattern, and 'false' otherwise. + +This regex pattern is structured to validate emails by ensuring they start with alphanumeric characters (which can include dots, underscores, and hyphens), followed by the '@' symbol. Subsequent to '@', it expects a domain name composed similarly, and concludes with a domain suffix (like .com, .org) comprising 2 to 6 letters. This thorough validation process ensures adherence to common email format standards. + +Learn more: + +- [RegexOne](https://regexone.com/) +- [Regular Expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions) on MDN + +Tools: + +- [RegExr](https://regexr.com/) + +### 6.48 — Responsive Design (RWD) + +Responsive design is a web development approach that ensures a website's layout and content adapt seamlessly to different screen sizes and devices, offering an optimal viewing experience across a wide range of platforms. The core principle behind responsive design is flexibility; it allows a single website to function effectively on smartphones, tablets, laptops, and desktop computers without needing separate versions for each device type. + +In responsive design, CSS media queries play a crucial role. They enable web developers to apply different styling rules based on the characteristics of the device, such as its width, height, or orientation. For instance, a three-column layout on a desktop might transform into a single-column layout on a mobile device to enhance readability and navigation. Additionally, responsive design often involves fluid grids and flexible images. Fluid grids work on a percentage-based system rather than fixed units, allowing elements to resize in relation to each other and the screen size. Flexible images are resized within their containing elements to prevent them from spilling out of their containers. This approach ensures that a website remains functional and aesthetically pleasing, regardless of the device it is being viewed on, ultimately improving user experience and accessibility. + +Responsive design, as an approach for cross-device web development, differs significantly from adaptive design, although both aim to enhance the user experience across different devices. + +**Responsive Design:** + +- **Fluid and Flexible:** Responsive design relies on fluid grid layouts where elements on the webpage resize dynamically based on the screen size. This fluidity is achieved through relative units like percentages, rather than fixed units. +- **CSS Media Queries:** It uses CSS media queries to change styles based on the target device's features, like screen width, height, and orientation. This approach allows for a continuous and smooth transition between different screen sizes. +- **One Layout for All Devices:** In responsive design, there's essentially one layout that morphs to fit various screen sizes. The content and design are consistent across devices, just adjusted to fit the screen. + +**Adaptive Design:** + +- **Static and Fixed:** Adaptive design typically involves creating multiple fixed layout sizes. When the site detects the type of device, it selects the layout most appropriate for the screen size. Unlike responsive design, these layouts are not fluid and do not change once loaded. +- **Predefined Screen Sizes:** Adaptive design works on the principle of predefined screen sizes. Designers and developers create layouts for specific, common screen sizes, and the website snaps to the layout closest to the device's screen size. +- **Multiple Distinct Layouts:** In adaptive design, you may have several distinct layouts, each tailored for a specific device or screen size. This means a different experience on different devices, as opposed to the uniformity seen in responsive design. + +In summary, while both responsive and adaptive designs aim to optimize websites for various devices, responsive design does so through a single fluid layout that adapts to any screen size, using relative units and CSS media queries. Adaptive design, on the other hand, uses multiple fixed layouts tailored to specific screen sizes. As a front-end engineer, understanding these differences is crucial in selecting the right approach based on the project requirements, target audience, and overall design goals. + +Learn more: + +- [Responsive Design](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design) on MDN +- [Learn Responsive Design](https://web.dev/learn/design/) on web.dev +- [CSS Grids and Flexbox for Responsive Web Design](https://frontendmasters.com/courses/css-grid-flexbox-v2/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters + +### 6.49 — REST API + +As a front-end engineer, your interaction with REST (Representational State Transfer) primarily revolves around how you use it to communicate with the back-end and manage data within your web applications. REST is an architectural style used for designing networked applications, and it's most commonly used in the creation of APIs (Application Programming Interfaces) which your front-end application will interact with. + +Here's a breakdown of its key concepts: + +- **Resource-Based:** In REST, everything is considered a resource, and each resource is accessed via a common interface using standard HTTP methods. These resources are represented in a format such as JSON, XML, or HTML. +- **Stateless:** Each request from a client to a server must contain all the information needed to understand and complete the request. The server does not store any session information about the client. +- **Client-Server Architecture:** REST applications have a client-server architecture, where the client and server operate independently, allowing each to be developed and scaled separately. +- **Uniform Interface:** This principle simplifies and decouples the architecture, allowing each part to evolve independently. The four guiding principles of the uniform interface are: + - Resource Identification in Requests: Resources are identified in requests using URIs (Uniform Resource Identifiers). + - Resource Manipulation through Representations: When a client holds a representation of a resource, it has enough information to modify or delete the resource on the server. + - Self-Descriptive Messages: Each message includes enough information to describe how to process it. + - Hypermedia as the Engine of Application State (HATEOAS): Clients interact with the application entirely through hypermedia provided dynamically by the application servers. +- **Use of HTTP Methods:** REST APIs use standard HTTP methods, which are intended to have a specific meaning: + - GET: Retrieve a representation of a resource. + - POST: Create a new resource. + - PUT: Update an existing resource. + - DELETE: Remove a resource. +- **Statelessness and Caching:** Since REST is stateless, responses must be explicit about their cacheability. Caching can be implemented on the client side to improve performance. + +REST is a widely adopted architectural style for designing APIs, including in web development. As a front-end engineer, you'll frequently interact with REST APIs, so it's crucial to understand the underlying concepts and principles. + +Learn more: + +- [REST API Tutorial](https://restfulapi.net/) +- [API Design in Node.js, v4](https://frontendmasters.com/courses/api-design-nodejs-v4/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters + +### 6.50 — Search Engine Optimization (SEO) + +Search Engine Optimization (SEO) is a process used to increase a website's visibility in search engine results. It involves various strategies and techniques aimed at improving a website's ranking on search engine result pages (SERPs). The higher a website ranks, the more likely it is to be visited by users. + +SEO focuses on both technical and creative elements. Key aspects include optimizing content with relevant keywords, ensuring the site is structured in a way that search engines can easily crawl, improving site speed, and ensuring the site is mobile-friendly. It also involves building backlinks from other reputable websites, which enhances a site's credibility and authority. Additionally, SEO includes optimizing on-page elements like titles, meta descriptions, and header tags to make them more search-engine friendly. Regular content updates and using tools like Google Analytics for performance analysis are also crucial for maintaining and improving SEO rankings. Effective SEO strategies lead to higher organic traffic, which is valuable for any website seeking to increase its online presence and reach. + +Learn more: + +- [learningseo.io](https://learningseo.io) +- [Modern Search Engine Optimization (SEO)](https://frontendmasters.com/courses/modern-seo/?utm_source=guides&utm_medium=website&utm_campaign=feh2024) from Frontend Masters + +### 6.51 — Semantic Versioning + +Semantic Versioning, often abbreviated as SemVer, is a versioning system that aims to convey meaning about the underlying changes in a release. This approach is especially prevalent in software development, including web development, where it helps in managing dependencies and understanding the impact of updating a software component. Here's a breakdown of how it works: + +- **Format**: Semantic Versioning follows a three-part format: MAJOR.MINOR.PATCH. For example, in 2.3.1, 2 is the major version, 3 is the minor version, and 1 is the patch version. +- **Major Version (MAJOR)**: Incrementing the major version signifies that there are incompatible API changes. This means that the new version introduces changes that are not backward-compatible with the older versions. For instance, moving from 1.x.x to 2.0.0 may indicate that the update has changes that could potentially break the existing implementations that depend on this software. +- **Minor Version (MINOR)**: This is incremented when new features are added in a backward-compatible manner. For example, updating from 2.3.1 to 2.4.0 suggests that new features have been added, but they do not break compatibility with the 2.x.x line. +- **Patch Version (PATCH)**: Incrementing the patch version indicates backward-compatible bug fixes. These are changes that fix problems without affecting the software's functionality or its public API. For example, moving from 2.3.1 to 2.3.2 means that there are bug fixes, but no new features or breaking changes. +- **Pre-release and Build Metadata**: In addition to the major, minor, and patch levels, SemVer also allows for appending pre-release and build metadata to a version. These are optional and used for additional version information like alpha, beta, and release candidate statuses. +- **Why Use Semantic Versioning**: SemVer provides a clear and predictable method for versioning software. It helps developers understand the potential impact of updating a package or dependency. For a front-end engineer like yourself, it can be crucial in managing libraries and frameworks you depend on, ensuring that updates do not unexpectedly break your code. + +Semantic Versioning is widely adopted in the software development community, including in numerous open-source projects. It allows for more structured and predictable management of code dependencies, which is essential in modern web development. + +Learn more: + +- [Semantic Versioning](https://semver.org/) + +### 6.52 — Semantical HTML + +Semantic HTML refers to the use of HTML markup to reinforce the meaning of the information in webpages and web applications rather than merely to define its presentation or look. It involves using HTML tags that introduce meaning to the web content. This practice not only helps in creating web pages that are informational and easy to navigate but also plays a significant role in SEO (Search Engine Optimization) and accessibility. + +Here are some key points about semantic HTML: + +- **Descriptive Tags**: Instead of using generic tags like `
` and `` for every element, semantic HTML encourages the use of specific tags that describe their purpose and content. For example, `