diff --git a/404.html b/404.html index db8e415..9d137e5 100644 --- a/404.html +++ b/404.html @@ -4,13 +4,13 @@ Page Not Found | Workflows - +
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

- + \ No newline at end of file diff --git a/assets/js/5c0a69fb.5028d426.js b/assets/js/5c0a69fb.5028d426.js deleted file mode 100644 index ffc2ab5..0000000 --- a/assets/js/5c0a69fb.5028d426.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunktooling=self.webpackChunktooling||[]).push([[356],{3905:(e,t,n)=>{n.d(t,{Zo:()=>p,kt:()=>m});var r=n(7294);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function o(e){for(var t=1;t=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var l=r.createContext({}),c=function(e){var t=r.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},p=function(e){var t=c(e.components);return r.createElement(l.Provider,{value:t},e.children)},f="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var n=e.components,i=e.mdxType,a=e.originalType,l=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),f=c(n),d=i,m=f["".concat(l,".").concat(d)]||f[d]||u[d]||a;return n?r.createElement(m,o(o({ref:t},p),{},{components:n})):r.createElement(m,o({ref:t},p))}));function m(e,t){var n=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var a=n.length,o=new Array(a);o[0]=d;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[f]="string"==typeof e?e:i,o[1]=s;for(var c=2;c{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>o,default:()=>u,frontMatter:()=>a,metadata:()=>s,toc:()=>c});var r=n(7462),i=(n(7294),n(3905));const a={},o="Tips and Tricks",s={unversionedId:"git/basics/git-07-tipsandtricks",id:"git/basics/git-07-tipsandtricks",title:"Tips and Tricks",description:"Renaming files and folders",source:"@site/docs/git/basics/git-07-tipsandtricks.md",sourceDirName:"git/basics",slug:"/git/basics/git-07-tipsandtricks",permalink:"/workflows/git/basics/git-07-tipsandtricks",draft:!1,editUrl:"https://github.com/devinekask/workflows/blob/main/docs/git/basics/git-07-tipsandtricks.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Branching",permalink:"/workflows/git/basics/git-06-branches"},next:{title:"Collaboration",permalink:"/workflows/category/collaboration"}},l={},c=[{value:"Renaming files and folders",id:"renaming-files-and-folders",level:2}],p={toc:c},f="wrapper";function u(e){let{components:t,...n}=e;return(0,i.kt)(f,(0,r.Z)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("h1",{id:"tips-and-tricks"},"Tips and Tricks"),(0,i.kt)("h2",{id:"renaming-files-and-folders"},"Renaming files and folders"),(0,i.kt)("p",null,"Git's behavior regarding file and folder names is influenced by the case sensitivity of the underlying file system. Some file systems, like macOS by default, are case-insensitive, while others like those in most Linux distributions are case-sensitive. To be sure git picks up filename changes, --especially when you are only changing the casing of a filename-- one should use the ",(0,i.kt)("inlineCode",{parentName:"p"},"git mv")," command."),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-bash"},"git mv MyFileName myfilename\n")))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/5c0a69fb.ee209048.js b/assets/js/5c0a69fb.ee209048.js new file mode 100644 index 0000000..8fa9ab2 --- /dev/null +++ b/assets/js/5c0a69fb.ee209048.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunktooling=self.webpackChunktooling||[]).push([[356],{3905:(e,t,r)=>{r.d(t,{Zo:()=>d,kt:()=>m});var n=r(7294);function i(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function s(e){for(var t=1;t=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}var l=n.createContext({}),c=function(e){var t=n.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):s(s({},t),e)),r},d=function(e){var t=c(e.components);return n.createElement(l.Provider,{value:t},e.children)},p="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},f=n.forwardRef((function(e,t){var r=e.components,i=e.mdxType,o=e.originalType,l=e.parentName,d=a(e,["components","mdxType","originalType","parentName"]),p=c(r),f=i,m=p["".concat(l,".").concat(f)]||p[f]||u[f]||o;return r?n.createElement(m,s(s({ref:t},d),{},{components:r})):n.createElement(m,s({ref:t},d))}));function m(e,t){var r=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var o=r.length,s=new Array(o);s[0]=f;var a={};for(var l in t)hasOwnProperty.call(t,l)&&(a[l]=t[l]);a.originalType=e,a[p]="string"==typeof e?e:i,s[1]=a;for(var c=2;c{r.r(t),r.d(t,{assets:()=>l,contentTitle:()=>s,default:()=>u,frontMatter:()=>o,metadata:()=>a,toc:()=>c});var n=r(7462),i=(r(7294),r(3905));const o={},s="Tips and Tricks",a={unversionedId:"git/basics/git-07-tipsandtricks",id:"git/basics/git-07-tipsandtricks",title:"Tips and Tricks",description:"Renaming files and folders",source:"@site/docs/git/basics/git-07-tipsandtricks.md",sourceDirName:"git/basics",slug:"/git/basics/git-07-tipsandtricks",permalink:"/workflows/git/basics/git-07-tipsandtricks",draft:!1,editUrl:"https://github.com/devinekask/workflows/blob/main/docs/git/basics/git-07-tipsandtricks.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Branching",permalink:"/workflows/git/basics/git-06-branches"},next:{title:"Collaboration",permalink:"/workflows/category/collaboration"}},l={},c=[{value:"Renaming files and folders",id:"renaming-files-and-folders",level:2},{value:"Don't create repositories inside iCloud/OneDrive or other cloud-synced folders",id:"dont-create-repositories-inside-icloudonedrive-or-other-cloud-synced-folders",level:2}],d={toc:c},p="wrapper";function u(e){let{components:t,...r}=e;return(0,i.kt)(p,(0,n.Z)({},d,r,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("h1",{id:"tips-and-tricks"},"Tips and Tricks"),(0,i.kt)("h2",{id:"renaming-files-and-folders"},"Renaming files and folders"),(0,i.kt)("p",null,"Git's behavior regarding file and folder names is influenced by the case sensitivity of the underlying file system. Some file systems, like macOS by default, are case-insensitive, while others like those in most Linux distributions are case-sensitive. To be sure git picks up filename changes, --especially when you are only changing the casing of a filename-- one should use the ",(0,i.kt)("inlineCode",{parentName:"p"},"git mv")," command."),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-bash"},"git mv MyFileName myfilename\n")),(0,i.kt)("h2",{id:"dont-create-repositories-inside-icloudonedrive-or-other-cloud-synced-folders"},"Don't create repositories inside iCloud/OneDrive or other cloud-synced folders"),(0,i.kt)("p",null,"Since the .git directory contains a lot of files and folders, syncing takes forever and can cause issues. It's best to create repositories in a local folder."))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/runtime~main.20b4230a.js b/assets/js/runtime~main.b9c0c295.js similarity index 98% rename from assets/js/runtime~main.20b4230a.js rename to assets/js/runtime~main.b9c0c295.js index 1bea66c..f73a4b4 100644 --- a/assets/js/runtime~main.20b4230a.js +++ b/assets/js/runtime~main.b9c0c295.js @@ -1 +1 @@ -(()=>{"use strict";var e,a,t,r,f,c={},o={};function b(e){var a=o[e];if(void 0!==a)return a.exports;var t=o[e]={id:e,loaded:!1,exports:{}};return c[e].call(t.exports,t,t.exports,b),t.loaded=!0,t.exports}b.m=c,b.c=o,e=[],b.O=(a,t,r,f)=>{if(!t){var c=1/0;for(i=0;i=f)&&Object.keys(b.O).every((e=>b.O[e](t[d])))?t.splice(d--,1):(o=!1,f0&&e[i-1][2]>f;i--)e[i]=e[i-1];e[i]=[t,r,f]},b.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return b.d(a,{a:a}),a},t=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,b.t=function(e,r){if(1&r&&(e=this(e)),8&r)return e;if("object"==typeof e&&e){if(4&r&&e.__esModule)return e;if(16&r&&"function"==typeof e.then)return e}var f=Object.create(null);b.r(f);var c={};a=a||[null,t({}),t([]),t(t)];for(var o=2&r&&e;"object"==typeof o&&!~a.indexOf(o);o=t(o))Object.getOwnPropertyNames(o).forEach((a=>c[a]=()=>e[a]));return c.default=()=>e,b.d(f,c),f},b.d=(e,a)=>{for(var t in a)b.o(a,t)&&!b.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:a[t]})},b.f={},b.e=e=>Promise.all(Object.keys(b.f).reduce(((a,t)=>(b.f[t](e,a),a)),[])),b.u=e=>"assets/js/"+({25:"bbf3c288",53:"935f2afb",54:"dc19d322",85:"1489b22b",118:"30607b79",126:"0eed2586",150:"bdf814d4",160:"27ba535b",193:"1aebfc33",213:"4c0630bf",218:"ca803105",267:"993d2c22",274:"cf96c131",356:"5c0a69fb",381:"c11bca9b",402:"5aa42878",412:"eb23a3cd",421:"74224bd0",440:"7dccf737",443:"e8a6e9f7",488:"f1067a68",514:"1be78505",519:"18f1b01c",645:"3b237f24",646:"810af483",650:"4da1a104",671:"0e384e19",672:"f1256c7b",706:"76cd0d6e",720:"ccba1096",730:"72c2d5d6",747:"409e8300",814:"fcfb18fe",817:"14eb3368",831:"2b4b260c",832:"aa19d63d",847:"1f3ba720",854:"69dcad43",890:"a7eac7e9",918:"17896441",920:"1a4e3797"}[e]||e)+"."+{25:"0a2961cf",53:"23d19207",54:"fb36d79a",85:"ef2db392",118:"3c48e203",126:"65e99348",150:"51bd2fe1",160:"0835f36c",193:"15d74d91",213:"ca6b90d6",218:"f34ada90",267:"e8854d6a",274:"75d01eca",356:"5028d426",381:"24419a79",402:"935ec21a",412:"486dd2b4",421:"0e0bd9f4",426:"23fb721c",440:"910a6090",443:"45ba73fc",488:"4678e325",514:"ba890358",519:"aa5798d1",645:"20dd8e9c",646:"056a3d78",650:"37f1e184",671:"d79cd3d4",672:"1a0041af",706:"376fe9eb",720:"b3bc7fa7",730:"811b5538",747:"88964b18",814:"b0727cd0",817:"9bde846f",831:"e91930d8",832:"010ceed3",847:"6674be05",854:"781df894",890:"23b6570f",894:"9184401d",918:"f55fdc83",920:"143f3772",945:"fb3d9ab2",972:"d77fc810"}[e]+".js",b.miniCssF=e=>{},b.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),b.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),r={},f="tooling:",b.l=(e,a,t,c)=>{if(r[e])r[e].push(a);else{var o,d;if(void 0!==t)for(var n=document.getElementsByTagName("script"),i=0;i{o.onerror=o.onload=null,clearTimeout(s);var f=r[e];if(delete r[e],o.parentNode&&o.parentNode.removeChild(o),f&&f.forEach((e=>e(t))),a)return a(t)},s=setTimeout(u.bind(null,void 0,{type:"timeout",target:o}),12e4);o.onerror=u.bind(null,o.onerror),o.onload=u.bind(null,o.onload),d&&document.head.appendChild(o)}},b.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},b.p="/workflows/",b.gca=function(e){return e={17896441:"918",bbf3c288:"25","935f2afb":"53",dc19d322:"54","1489b22b":"85","30607b79":"118","0eed2586":"126",bdf814d4:"150","27ba535b":"160","1aebfc33":"193","4c0630bf":"213",ca803105:"218","993d2c22":"267",cf96c131:"274","5c0a69fb":"356",c11bca9b:"381","5aa42878":"402",eb23a3cd:"412","74224bd0":"421","7dccf737":"440",e8a6e9f7:"443",f1067a68:"488","1be78505":"514","18f1b01c":"519","3b237f24":"645","810af483":"646","4da1a104":"650","0e384e19":"671",f1256c7b:"672","76cd0d6e":"706",ccba1096:"720","72c2d5d6":"730","409e8300":"747",fcfb18fe:"814","14eb3368":"817","2b4b260c":"831",aa19d63d:"832","1f3ba720":"847","69dcad43":"854",a7eac7e9:"890","1a4e3797":"920"}[e]||e,b.p+b.u(e)},(()=>{var e={303:0,532:0};b.f.j=(a,t)=>{var r=b.o(e,a)?e[a]:void 0;if(0!==r)if(r)t.push(r[2]);else if(/^(303|532)$/.test(a))e[a]=0;else{var f=new Promise(((t,f)=>r=e[a]=[t,f]));t.push(r[2]=f);var c=b.p+b.u(a),o=new Error;b.l(c,(t=>{if(b.o(e,a)&&(0!==(r=e[a])&&(e[a]=void 0),r)){var f=t&&("load"===t.type?"missing":t.type),c=t&&t.target&&t.target.src;o.message="Loading chunk "+a+" failed.\n("+f+": "+c+")",o.name="ChunkLoadError",o.type=f,o.request=c,r[1](o)}}),"chunk-"+a,a)}},b.O.j=a=>0===e[a];var a=(a,t)=>{var r,f,c=t[0],o=t[1],d=t[2],n=0;if(c.some((a=>0!==e[a]))){for(r in o)b.o(o,r)&&(b.m[r]=o[r]);if(d)var i=d(b)}for(a&&a(t);n{"use strict";var e,a,t,r,f,c={},o={};function b(e){var a=o[e];if(void 0!==a)return a.exports;var t=o[e]={id:e,loaded:!1,exports:{}};return c[e].call(t.exports,t,t.exports,b),t.loaded=!0,t.exports}b.m=c,b.c=o,e=[],b.O=(a,t,r,f)=>{if(!t){var c=1/0;for(i=0;i=f)&&Object.keys(b.O).every((e=>b.O[e](t[d])))?t.splice(d--,1):(o=!1,f0&&e[i-1][2]>f;i--)e[i]=e[i-1];e[i]=[t,r,f]},b.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return b.d(a,{a:a}),a},t=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,b.t=function(e,r){if(1&r&&(e=this(e)),8&r)return e;if("object"==typeof e&&e){if(4&r&&e.__esModule)return e;if(16&r&&"function"==typeof e.then)return e}var f=Object.create(null);b.r(f);var c={};a=a||[null,t({}),t([]),t(t)];for(var o=2&r&&e;"object"==typeof o&&!~a.indexOf(o);o=t(o))Object.getOwnPropertyNames(o).forEach((a=>c[a]=()=>e[a]));return c.default=()=>e,b.d(f,c),f},b.d=(e,a)=>{for(var t in a)b.o(a,t)&&!b.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:a[t]})},b.f={},b.e=e=>Promise.all(Object.keys(b.f).reduce(((a,t)=>(b.f[t](e,a),a)),[])),b.u=e=>"assets/js/"+({25:"bbf3c288",53:"935f2afb",54:"dc19d322",85:"1489b22b",118:"30607b79",126:"0eed2586",150:"bdf814d4",160:"27ba535b",193:"1aebfc33",213:"4c0630bf",218:"ca803105",267:"993d2c22",274:"cf96c131",356:"5c0a69fb",381:"c11bca9b",402:"5aa42878",412:"eb23a3cd",421:"74224bd0",440:"7dccf737",443:"e8a6e9f7",488:"f1067a68",514:"1be78505",519:"18f1b01c",645:"3b237f24",646:"810af483",650:"4da1a104",671:"0e384e19",672:"f1256c7b",706:"76cd0d6e",720:"ccba1096",730:"72c2d5d6",747:"409e8300",814:"fcfb18fe",817:"14eb3368",831:"2b4b260c",832:"aa19d63d",847:"1f3ba720",854:"69dcad43",890:"a7eac7e9",918:"17896441",920:"1a4e3797"}[e]||e)+"."+{25:"0a2961cf",53:"23d19207",54:"fb36d79a",85:"ef2db392",118:"3c48e203",126:"65e99348",150:"51bd2fe1",160:"0835f36c",193:"15d74d91",213:"ca6b90d6",218:"f34ada90",267:"e8854d6a",274:"75d01eca",356:"ee209048",381:"24419a79",402:"935ec21a",412:"486dd2b4",421:"0e0bd9f4",426:"23fb721c",440:"910a6090",443:"45ba73fc",488:"4678e325",514:"ba890358",519:"aa5798d1",645:"20dd8e9c",646:"056a3d78",650:"37f1e184",671:"d79cd3d4",672:"1a0041af",706:"376fe9eb",720:"b3bc7fa7",730:"811b5538",747:"88964b18",814:"b0727cd0",817:"9bde846f",831:"e91930d8",832:"010ceed3",847:"6674be05",854:"781df894",890:"23b6570f",894:"9184401d",918:"f55fdc83",920:"143f3772",945:"fb3d9ab2",972:"d77fc810"}[e]+".js",b.miniCssF=e=>{},b.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),b.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),r={},f="tooling:",b.l=(e,a,t,c)=>{if(r[e])r[e].push(a);else{var o,d;if(void 0!==t)for(var n=document.getElementsByTagName("script"),i=0;i{o.onerror=o.onload=null,clearTimeout(s);var f=r[e];if(delete r[e],o.parentNode&&o.parentNode.removeChild(o),f&&f.forEach((e=>e(t))),a)return a(t)},s=setTimeout(u.bind(null,void 0,{type:"timeout",target:o}),12e4);o.onerror=u.bind(null,o.onerror),o.onload=u.bind(null,o.onload),d&&document.head.appendChild(o)}},b.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},b.p="/workflows/",b.gca=function(e){return e={17896441:"918",bbf3c288:"25","935f2afb":"53",dc19d322:"54","1489b22b":"85","30607b79":"118","0eed2586":"126",bdf814d4:"150","27ba535b":"160","1aebfc33":"193","4c0630bf":"213",ca803105:"218","993d2c22":"267",cf96c131:"274","5c0a69fb":"356",c11bca9b:"381","5aa42878":"402",eb23a3cd:"412","74224bd0":"421","7dccf737":"440",e8a6e9f7:"443",f1067a68:"488","1be78505":"514","18f1b01c":"519","3b237f24":"645","810af483":"646","4da1a104":"650","0e384e19":"671",f1256c7b:"672","76cd0d6e":"706",ccba1096:"720","72c2d5d6":"730","409e8300":"747",fcfb18fe:"814","14eb3368":"817","2b4b260c":"831",aa19d63d:"832","1f3ba720":"847","69dcad43":"854",a7eac7e9:"890","1a4e3797":"920"}[e]||e,b.p+b.u(e)},(()=>{var e={303:0,532:0};b.f.j=(a,t)=>{var r=b.o(e,a)?e[a]:void 0;if(0!==r)if(r)t.push(r[2]);else if(/^(303|532)$/.test(a))e[a]=0;else{var f=new Promise(((t,f)=>r=e[a]=[t,f]));t.push(r[2]=f);var c=b.p+b.u(a),o=new Error;b.l(c,(t=>{if(b.o(e,a)&&(0!==(r=e[a])&&(e[a]=void 0),r)){var f=t&&("load"===t.type?"missing":t.type),c=t&&t.target&&t.target.src;o.message="Loading chunk "+a+" failed.\n("+f+": "+c+")",o.name="ChunkLoadError",o.type=f,o.request=c,r[1](o)}}),"chunk-"+a,a)}},b.O.j=a=>0===e[a];var a=(a,t)=>{var r,f,c=t[0],o=t[1],d=t[2],n=0;if(c.some((a=>0!==e[a]))){for(r in o)b.o(o,r)&&(b.m[r]=o[r]);if(d)var i=d(b)}for(a&&a(t);n Git basics | Workflows - +

Git basics

More
Copyright © 2024 Devine, Inc. Built with Docusaurus.
- + \ No newline at end of file diff --git a/category/code-quality.html b/category/code-quality.html index a57b31d..3c9b492 100644 --- a/category/code-quality.html +++ b/category/code-quality.html @@ -4,13 +4,13 @@ Code quality | Workflows - +

Code quality

More
Copyright © 2024 Devine, Inc. Built with Docusaurus.
- + \ No newline at end of file diff --git a/category/collaboration.html b/category/collaboration.html index b9970e7..5cab214 100644 --- a/category/collaboration.html +++ b/category/collaboration.html @@ -4,13 +4,13 @@ Git collaboration | Workflows - +

Git collaboration

More
Copyright © 2024 Devine, Inc. Built with Docusaurus.
- + \ No newline at end of file diff --git a/category/combell.html b/category/combell.html index 52475ba..7b7aa42 100644 --- a/category/combell.html +++ b/category/combell.html @@ -4,13 +4,13 @@ Combell | Workflows - +

Combell

More
Copyright © 2024 Devine, Inc. Built with Docusaurus.
- + \ No newline at end of file diff --git a/category/deployment.html b/category/deployment.html index 0033301..ae9c814 100644 --- a/category/deployment.html +++ b/category/deployment.html @@ -4,13 +4,13 @@ Deployment | Workflows - +

Deployment

More
Copyright © 2024 Devine, Inc. Built with Docusaurus.
- + \ No newline at end of file diff --git a/category/ftp.html b/category/ftp.html index 4d7538d..2398ff4 100644 --- a/category/ftp.html +++ b/category/ftp.html @@ -4,13 +4,13 @@ FTP | Workflows - +

FTP

More
Copyright © 2024 Devine, Inc. Built with Docusaurus.
- + \ No newline at end of file diff --git a/category/git.html b/category/git.html index 0ec0324..6d6d5fa 100644 --- a/category/git.html +++ b/category/git.html @@ -4,13 +4,13 @@ Git | Workflows - +

Git

More
Copyright © 2024 Devine, Inc. Built with Docusaurus.
- + \ No newline at end of file diff --git a/category/modules.html b/category/modules.html index 1b89173..84f9284 100644 --- a/category/modules.html +++ b/category/modules.html @@ -4,13 +4,13 @@ Modules | Workflows - +

Modules

More
Copyright © 2024 Devine, Inc. Built with Docusaurus.
- + \ No newline at end of file diff --git a/code quality/editorconfig.html b/code quality/editorconfig.html index a1df5f9..9e2005e 100644 --- a/code quality/editorconfig.html +++ b/code quality/editorconfig.html @@ -4,13 +4,13 @@ Editor config | Workflows - +

Editor config

How is your system setup? Are you using tabs or spaces for indenting? Are your files in a UTF-8 encoding? Do you end every file with a blank line or not?

These things can be negligible when you are working on your own, but can become a problem when you are working with others. To avoid these problems, you can use an .editorconfig file.

By using a specific file .editorconfig in the root of your project, your editor (or plugin) can automatically use the correct convention. This way, you can be sure that everyone is using the same settings.

In the end, it is up to you to decide which settings you want to use. You can find a list of all possible settings here. The following can be a great start:

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

VS Code plugin​

Although some editors have support for editorconfig build in, for VS Code, you need to install the EditorConfig for VS Code plugin.

More
Copyright © 2024 Devine, Inc. Built with Docusaurus.
- + \ No newline at end of file diff --git a/code quality/eslint.html b/code quality/eslint.html index 137c45c..6784eca 100644 --- a/code quality/eslint.html +++ b/code quality/eslint.html @@ -4,13 +4,13 @@ ESLint | Workflows - +

ESLint

Linting​

Linting in code means to check the code for potential errors. It is a type of static analysis that is frequently used to find problematic patterns or code that doesn’t adhere to certain style guidelines. There are code linters for most programming languages, and compilers sometimes incorporate linting into the compilation process.

ESLint is a tool for identifying and reporting problems with your JavaScript code. It can highlight formatting issues like missing semicolons, but it can also be used to find problematic patterns in your code like undeclared variables. As a bonus, ESLint can also fix some of these issues automatically.

Init​

You can initialize ESLint in your project by running the following command:

npm init @eslint/config

This will ask you a few questions about your project and then create a .eslintrc.json file in the root of your project. In this file you can find the rules that ESLint uses. One of the questions is to base your ruleset on a popular one. The 'airbnb' ruleset is a good starting point.

Run ESLint​

You can run ESLint by running the following command:

npx eslint yourfile.js

or, if you want to run it on all JavaScript files in your project: (not the /js/ directory, since we don't want to run this on your node_modules directory)

npx eslint ./js/**/*.js

If you want to fix some issues immediately, you can append the --fix flag to the comment.

VS Code plugin​

By using the VS Code ESLint plugin, you can see the errors and warnings directly in your editor. You can configure this in a way every file you save is automatically linted.

More
Copyright © 2024 Devine, Inc. Built with Docusaurus.
- + \ No newline at end of file diff --git a/code quality/stylelint.html b/code quality/stylelint.html index 0fb9ca6..a64a664 100644 --- a/code quality/stylelint.html +++ b/code quality/stylelint.html @@ -4,13 +4,13 @@ Stylelint | Workflows - +

Stylelint

In the same way you can lint your JavaScript files with ESLint, it is possible to do so with Stylelint

Init​

To get up and running, you need to install stylelint itself and a configuration. According to the stylelint docs, you can do this by running the following command:

npm install --save-dev stylelint stylelint-config-standard

There is no setup wizard like ESLint has, so you need to create a .stylelintrc.json file in the root of your project yourself. There, you simply reference the standard ruleset (see the docs)

Run stylelint​

You can run Stylelint on all your css files by running the following command:

npx stylelint "**/*.css"

VS Code plugin​

By using the VS Code Stylelint plugin, you can see the errors and warnings directly in your editor. See the documentation how to configure this in a way it doesn't collide with the build in VS Code CSS linting.

More
Copyright © 2024 Devine, Inc. Built with Docusaurus.
- + \ No newline at end of file diff --git a/deployment/combell/domain.html b/deployment/combell/domain.html index 973ec2c..492b8ec 100644 --- a/deployment/combell/domain.html +++ b/deployment/combell/domain.html @@ -4,14 +4,14 @@ Register your domain | Workflows - +

Register your domain

Let's demonstrate how you can register your own domain.

Think about the name of your domain because you will use it during your studies to build a portfolio. An url like http://party-animal-4-life.be does not look very professional in a job interview.

Request your free license​

You can request a license through the academic software website so that you can register your domain for free with Combell.

Navigate to Academic Software, enter your Howest e-mail address and click Login

Search for the Combell Webhosting (Linux). Check, double check and triple check if you have picked the Linux version!

Combell

Click on Request to get a license. Write down or store the code that appears on the screen, you will need it in the next step.

WARNING: YOU CAN ONLY REQUEST THE CODE ONCE!

Combell

Register the domain​

Navigate to Combell Business.

Choose an url followed by .be - the licence is only valid for .be domains. The name is without spaces and all characters are in lowercase. You cannot change this name, so think about the url you pick for yourself.

Combell Domain

Add the domain if it's still available. Otherwise, you need to try a different name. You do not need to add other extensions such as .com, .app, ... because you will be charged for most of them.

Combell Domain OK

Go to cart & complete your order You see an overview of your order. Just click the Complete your order button.

Combell Cart

Enter your contact information. Make sure your e-mail address is your howest e-mail. Go to payment overview

Combell Information

Click redeem a promotional code. Enter the code you obtained in the first step. The cost will magically reset to 0. Finally, check the mark for accepting the general conditions. Place order.

Combell Redeem

Combell Redeem OK

Check your mails​

You normally receive 3 mails from Combell. The most important one is the mail that asks you to set a password for your combell account.

If you didn't recieve these mails after a while, you have the call Combell's support center.

  1. Combell Sales → Thank you for your order - …

    • This is just a confirmation of your order. You do not need any further information from that mail.

  2. Combell Support → Set a password for your Combell account

    • Click on the link in the mail and set a password for your Combell account.

  3. Combell Support → You Combell hosting is ready to use

    • This contains a link to your hosting dashboard.
More
Copyright © 2024 Devine, Inc. Built with Docusaurus.
- + \ No newline at end of file diff --git a/deployment/combell/settings.html b/deployment/combell/settings.html index dcc4c9b..1e6cd40 100644 --- a/deployment/combell/settings.html +++ b/deployment/combell/settings.html @@ -4,13 +4,13 @@ Settings | Workflows - +

Settings

In this step you will use the dashboard of your hosting to adjust some settings so that you can connect with an FTP client. This is an application that allows you to upload files to a web server and to manage those files on the server.

FTP User​

First thing to do is set up an FTP user. Navigate to Combell and log in with your combell account if necessary. You see the dashboard of your account. Click on the item Web hosting. Click the Manage hosting button next to your domain name. You can browse through the details if you want to.

Combell Webhosting

Combell Webhosting

Find the item FTP & SSH in the menu click on it and click on FTP. There is a default FTP user activated. The only thing you need to do is set a password for that user. This can be the same password as your combell account, although this is not required and even not recommended for security reasons.

Combell FTP

Click the 3 dots next to the default user and click Edit password. A popup will appear where you can set the password.

Also check the username. This is normally the name of your domain without a dot between the name and the extension. You will need this name in the next step.

Combell FTP

Activate SSH​

Your lecturers need to be able to access your hosting to check the date that something was last uploaded. We do this by using SSH keys.

Click Add, to add a new SSH key. Download devine2022.pub. You can open this file with VS Code and copy/paste the content. Click Add SSH key, to complete.

NOTE: we only access your hosting to check the date of the final upload. We do not upload or modify any content on your hosting. Select the SSH option from the menu. Activate SSH access by moving the switch. It can take a while until SSH is activated.

Combell SSH

Combell Add SSH key

More
Copyright © 2024 Devine, Inc. Built with Docusaurus.
- + \ No newline at end of file diff --git a/deployment/ftp/ftp-client.html b/deployment/ftp/ftp-client.html index 0859277..9b1e8a8 100644 --- a/deployment/ftp/ftp-client.html +++ b/deployment/ftp/ftp-client.html @@ -4,7 +4,7 @@ FTP client | Workflows - + @@ -12,7 +12,7 @@

FTP client

In this step you will install an FTP client. This is an application that allows you to upload files to a web server and to manage those files on the server. We use FilleZilla in Devine because it is an open source and free FTP client that is easy to use. However, there are a lot of other alternatives available.

Install​

Navigate to FileZilla and select Mac Os X. Click on FileZilla_3.62.2_macosx-x86.app.tar.bz2 file to extract the file. Click on the file to decompress. Drag FileZilla.app to the Applications folder.

You will probably see a warning message the first time you start FileZilla. This is because you downloaded the application from the web. Just click the Open button.

FileZilla Download

Configure​

You need the following to upload to a web server:

  1. A host: this is the web server to where the files need to be uploaded
  2. Username and password: to indicate that you have access to the server
  3. Port number: this is always 21 for FTP

Open FileZilla and select File → Site Manager… or use the shortcut CMD + S. Click the button New Site, give your hosting a name and insert the following data:

  • Protocol is FTP
  • Host is ftp.yourdomainname.webhosting.be**
  • Port is 21
  • User: normally your domain name, followed by be without a dot. Check your Combell settings for this.
  • Password: the password that you have set in the Combell dashboard for the FTP user

Click "Connect". You will see the following warning. Just check the "Always allow" box and click "OK".

FileZilla Connect

FileZilla Insecure

You should see an overview of the folder structure of the server on the right side of your screen. Your local folder structure is on the left side. Check your settings again if you see an error message. Mostly it is because you made a typo in the name of the host, username or password.

FileZilla Files

More
Copyright © 2024 Devine, Inc. Built with Docusaurus.
- + \ No newline at end of file diff --git a/deployment/ftp/uploading.html b/deployment/ftp/uploading.html index 2fefb87..e97530f 100644 --- a/deployment/ftp/uploading.html +++ b/deployment/ftp/uploading.html @@ -4,13 +4,13 @@ Upload your files | Workflows - +

Upload your files

In this step you can finally upload your website to the server. Do this on a regular basis and do not wait until the last day before the deadline to upload the final version of your website. There can always be a problem (access rights to files, incorrect paths and filenames, ...) that needs to be fixed.

Folder structure​

Once you are connected to the web server using FileZilla you will see a couple of folders (cgi-bin, data, logs, PHP, subsites, tmp, www). DO NOT delete or rename any of those folders.

You only need to work in the folder www. Doubleclick on this folder to open it. Everything that is put in the www folder is publicly accessible on your website through http://www.yourdomain.be. You notice that there is already an index.html in this folder.

If you navigate to http://www.yourdomain.be you notice that this index.html file is the default landing page provided by Combell. You can remove that file and add your own homepage if you want.

FileZilla Files

You have only access to one hosting package with one domain name. Because you want to upload multiple projects over time, you need to put them in their own folder.

To create a new folder, right-click on the www folder and select create directory. Enter a name of the folder and click ok.

Uploading files and folders​

You can upload files and folders by dragging them from Finder to the correct folder in FilleZilla. You can also drag files from the left pane in FileZilla. Both methods work in the same way.

More
Copyright © 2024 Devine, Inc. Built with Docusaurus.
- + \ No newline at end of file diff --git a/git/basics/git-01-intro.html b/git/basics/git-01-intro.html index 5388019..2d242a4 100644 --- a/git/basics/git-01-intro.html +++ b/git/basics/git-01-intro.html @@ -4,13 +4,13 @@ Git intro | Workflows - +

Git intro

About Git​

Git is a version control system. It allows you to collaborate on projects with several people and to keep a history of the project.

It was launched in April 2005 by Linus Torvalds - the father of Linux. Code management systems were nothing new, some important systems in the past were:

  • SCSS early 1970s
  • RCS early 80s
  • CVS was launched in 1986
  • SVN in 2001

Linux development was done in the early years with Bitkeeper VCS. However, in 2005 Bitkeeper imposed some additional restrictions on the free open source version, so that Linux could no longer be developed via this system. Linus looked for alternatives, but found none that met his requirements:

  • Easy to do distributed development
  • Being scalable: being able to collaborate with 1000+ developers
  • Being Fast & Efficient and Reliable
  • Know who did what
  • Transaction support: bundle multiple actions
  • Branching support: branches of the project that can be merged back into the main project.
  • Distributed repositories: project with history is not kept centrally.
  • For free

When he couldn't find an alternative that met these requirements, he decided to develop his own system: GIT was born.

The name GIT is not an abbreviation, but a reference to Linus himself: it is slang for "an unpleasant person". Like Linux, he wanted a name that refers to himself. Afterwards, the community put the abbreviation "Global Information Tracker" on it.

Internal Operation​

Your files are stored in a repository. This repository contains information about the contents of the files, their name, location and history.

  • The contents of files are stored in blob objects
  • History is kept in commit objects
  • The structure is maintained in tree objects

If you have multiple files with the same content, the tree will reference the same blob object multiple times, saving storage.

Git from the command line​

We will use git from the command line. There are some applications that allow you to execute git commands via a GUI, but if you want to perform more advanced actions you will have to go back to the command line anyway.

Git is installed when you install the xcode command line tools. (or run xcode-select --install) So if you have already done this (for example to make Node.js work), you can get started right away. Another option (without the command line tools) is to download and install git from http://git-scm.com/downloads.

Resources​

https://gitexplorer.com/

More
Copyright © 2024 Devine, Inc. Built with Docusaurus.
- + \ No newline at end of file diff --git a/git/basics/git-02-create-repo.html b/git/basics/git-02-create-repo.html index 2b26953..3d1d46b 100644 --- a/git/basics/git-02-create-repo.html +++ b/git/basics/git-02-create-repo.html @@ -4,13 +4,13 @@ Create a new git-repository | Workflows - +

Create a new git-repository

You can turn any existing directory into a git repository with the git init command. It doesn't matter if there are already files or subfolders in it. We will start with a new empty directory, but know that this is not necessary to manage a project via git.

Create a new directory and make it a git repository.

$ mkdir project
$ cd project
$ git init
Initialized empty Git repository in /Users/myname/Documents/project/.git/

The git init command will create a hidden folder called .git. This contains all information about the repository & its history.

Via the git status command you can get some more information about the current status of the repository. You often use this command to see which files have been changed, whether there are new files, or whether files have been deleted.

$ git status
# On branch main
#
# No commits yet
# nothing to commit (create/copy files and use "git add" to track)

Heads up​

Be aware where exactly you initialize the new repository. You wouldn't be the first to accidentally put its whole documents directory under source control. If you are not entirely sure where you are, run the command pwd to print the current working directory.

More
Copyright © 2024 Devine, Inc. Built with Docusaurus.
- + \ No newline at end of file diff --git a/git/basics/git-03-commit.html b/git/basics/git-03-commit.html index cd173c2..9d942d0 100644 --- a/git/basics/git-03-commit.html +++ b/git/basics/git-03-commit.html @@ -4,13 +4,13 @@ Track & commit files | Workflows - +

Track & commit files

Commit​

Create a new file hello.txt with the text "hello world":

echo "hello world" > hello.txt

Execute the git status command again:

$ git status
# On branch main
#
# No commits yet
#
# Untracked files:
#   (use "git add <file>..." to include in what will be committed)
#
# hello.txt
# nothing added to commit but untracked files present (use "git add" to track)

Git informs us that there are files in your directory that are not yet tracked by Git (untracked files present). If you want to keep track of the files, you have to add them with the git add command:

$ git add hello.txt
$ git status
# On branch main
#
# No commits yet
#
# Changes to be committed:
#   (use "git restore --staged <file>..." to unstage)
#
# new file:   hello.txt

Now git is aware of that file. This does not mean that git will automatically take a snapshot of every change to that file. You have to decide when to take a snapshot of the changes in your file(s) and add it to your git history. You do this by executing a commit:

$ git commit -m "first commit"
[main (root-commit) 5588c39] first commit
1 file changed, 1 insertion(+)
create mode 100644 hello.txt

git add and git commit are two commands that you will use a lot when working with git.

Modify files​

Edit the contents of the file to "hello devine", and execute the git status command:

$ echo "hello devine" > hello.txt
$ git status
# On branch main
# Changes not staged for commit:
#   (use "git add <file>..." to update what will be committed)
#   (use "git restore <file>..." to discard changes in working directory)
#
# modified:   hello.txt
# no changes added to commit (use "git add" and/or "git commit -a")

Git has detected changes to an already tracked file. You will need to "add" this file again to queue the changes for a commit (called stage for commit):

git add hello.txt

Commit the changes:

$ git commit -m "changed world to devine"
[main 7f65053] changed world to devine
1 file changed, 1 insertion(+), 1 deletion(-)

You can add and commit multiple changes in a single command of course. Edit the text, and create a second file:

echo "hello dev" > hello.txt
echo "hello" > world.txt

Git status will now report 2 things: modifying an already tracked file, and detecting a new file that is not yet tracked:

$ git status
On branch main
Changes not staged for commit:
   (use "git add <file>..." to update what will be committed)
   (use "git restore <file>..." to discard changes in working directory)
      modified:   hello.txt

Untracked files:
  (use "git add <file>..." to include in what will be committed)
      world.txt

no changes added to commit (use "git add" and/or "git commit -a")

You can now stage these two files separately by executing a git add twice, but you can also do this at once, by using git add .

$ git add .
$ git status
On branch main
Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
    modified:   hello.txt
    new file:   world.txt

Now both are staged for commit, and with a single commit you can log them into the git repository:

$ git commit -m "welcome + new world file"
  [main 9720321] welcome + new world file
    2 files changed, 2 insertions(+), 1 deletion(-)
    create mode 100644 world.txt

git add -A .​

We've seen before that with git add . you can stage all changes before commit. Keep in mind that deletes (deleting files) are not staged. To do that, you need to add the -A flag to the command.

GUI​

It is important to know how to work with git via the command line. Without understanding the basic commands, it is impossible to understand more complex commands that you will need sooner or later.

That said, for some very common commands, it can become cumbersome to execute them all the time. Luckily for us, some GIT functionality is baked in VS Code already. See this paragraph about commits for more information.

More
Copyright © 2024 Devine, Inc. Built with Docusaurus.
- + \ No newline at end of file diff --git a/git/basics/git-04-undo.html b/git/basics/git-04-undo.html index dab1eaf..fa87aff 100644 --- a/git/basics/git-04-undo.html +++ b/git/basics/git-04-undo.html @@ -4,13 +4,13 @@ Undo | Workflows - +

Undo

Whoops, we messed up, what now?

Undo changes after staging​

Change the text again to "hello devine", stage these changes via the add command, but don't commit it yet:

$ echo "hello devine" > hello.txt
$ git add hello.txt
$ git status
On branch master
Changes to be committed:
  (use "git restore --staged <file>..." to unstage)

  modified:   hello.txt

You get a hint on how to unstage these changes: via git restore --staged:

git restore --staged hello.txt

The file is still changed, but the changes are not staged anymore.

$ git status
On branch master
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)

  modified:   hello.txt

no changes added to commit (use "git add" and/or "git commit -a")

You can now definitively undo this, by using --just like in the previous topic-- git restore:

git restore hello.txt

Undo commits​

Let's say you've committed some changes, but for some reason you want to undo them.

echo "hello devine" > hello.txt
git add hello.txt
git commit -m "changed, but not sure about it"

You can do 2 things: either create a new commit that undoes the changes from the previous commit (git revert HEAD), or completely clear the commit from history (git reset --hard _reference-to-commit_).

git revert HEAD

Your terminal will now display a vim or nano editor, into which you can type a commit message. Edit the default message if you want, and type in vim :quit when you're done. For nano, use Ctrl + X, followed by Yes.

[master 2bc740f] Revert "changed, but not sure about it"
  1 file changed, 1 insertion(+), 1 deletion(-)

The file will now contain the contents from before the last commit.

You can also set a different editor for the merge message edits. Instead of vim, nano is a more user-friendly alternative:

git config --global core.editor "nano"

By the way, you can view a repository's commit history with the git log command:

$ git log
commit 2bc740f2af93348267c6b3558e1037c5db540600 (HEAD -> master)
Author: Demo user <demo.user@howest.be>
Date:   Wed Sep 1 09:57:33 2025 +0200

    Revert "changed, but not sure about it"

    This reverts commit 8d977cb2d4855a782e261015645e017c1e128000.

commit 8d977cb2d4855a782e261015645e017c1e128000
Author: Demo user <demo.user@howest.be>
Date:   Wed Sep 1 09:56:55 2025 +0200

    changed, but not sure about it

commit 5aa411822d8546ef1cd73addc20a022a74deae91
Author: Demo user <demo.user@howest.be>
Date:   Wed Sep 1 09:54:26 2025 +0200

    changed, but not sure about it

commit 9720321677e0798b540b287398edeaadcb630b17
Author: Demo user <demo.user@howest.be>
Date:   Wed Sep 1 09:35:21 2025 +0200

    welcome + new world file

commit 7f65053ee86593fb29a3102e03f7ae3f44b112d7
Author: Demo user <demo.user@howest.be>
Date:   Wed Sep 1 09:32:22 2025 +0200

    changed world to devine

commit 5588c399cd15bc841c89158d72cc4d3938581196
Author: Demo user <demo.user@howest.be>
Date:   Wed Sep 1 09:30:22 2025 +0200

    first commit

You can see that the "wrong" commit is still in the git history, and the changes were undone via a new commit. Also note that each commit has a unique SHA1 hash ID. You can use these IDs to specify commits on certain commands.

A more drastic way to undo commits is with the git reset command. With git reset you are going to reset your working tree to a particular commit and delete all commits after that commit from the repository.

We want to go back to the state of our commit "welcome + new world file". Through git log, we find out that the SHA1 ID is 9720321677e0798b540b287398edeaadcb630b17. Specify the SHA1 ID of the commit to where you want to reset after the command. You don't have to specify the entire ID: the first 4 characters are often sufficient (at least if they are unique):

$ git reset --hard 9720
HEAD is now at 9720321 welcome dev3 + new world file

Now when you run git log again, you will see that the commits after 9720 are gone:

$ git log
commit 9720321677e0798b540b287398edeaadcb630b17 (HEAD -> master)
Author: Demo user <demo.user@howest.be>
Date:   Wed Sep 1 09:35:21 2025 +0200

    welcome + new world file

commit 7f65053ee86593fb29a3102e03f7ae3f44b112d7
Author: Demo user <demo.user@howest.be>
Date:   Wed Sep 1 09:32:22 2025 +0200

    changed world to devine

commit 5588c399cd15bc841c89158d72cc4d3938581196
Author: Demo user <demo.user@howest.be>
Date:   Wed Sep 1 09:30:22 2025 +0200

    first commit

You will only use such a git reset command to undo local commits. Once you're collaborating with others, and commits have already been distributed to other users, you use the git revert command to create a new commit that undoes a previous commit.

Resources​

https://ohshitgit.com/

More
Copyright © 2024 Devine, Inc. Built with Docusaurus.
- + \ No newline at end of file diff --git a/git/basics/git-05-ignore.html b/git/basics/git-05-ignore.html index e3158f3..144afe4 100644 --- a/git/basics/git-05-ignore.html +++ b/git/basics/git-05-ignore.html @@ -4,7 +4,7 @@ Ignore files | Workflows - + @@ -12,7 +12,7 @@

Ignore files

It won't be necessary to keep track of all the files in a project folder via Git. For example, it is not a good idea to track a node_modules (see later) or uploads folder in your repository. Also hidden system files, such as .DS_Store are of no use in a repository.

Let us work with an example. Create a dummy project like this:

mkdir dummy-project
cd dummy-project
touch file
mkdir notme
touch notme/forgetaboutme

If everything went well, you should have a file structure like this:

`-- dummy-project
    |-- file
    `-- notme
        `-- forgetaboutme

We will commit everything, including notme, "by accident" to set it straight afterwards

$ git init
Initialized empty Git repository in /Users/demouser/Documents/dummy-project/.git/
$ git add .
$ git commit -m "initial commit"
[main (root-commit) 2d9ab38] initial commit
 2 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 file
 create mode 100644 notme/forgetaboutme

Delete files​

You have now added the entire project, including the notme, to your git repository. Whoops, we will now correct this error:

$ git rm -r --cached notme
rm 'notme/forgetaboutme'

The --cached option causes the file to be deleted from the repository index, but remains in your file system.

A git status now gives the following result:

$ git status
On branch main
Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
  deleted:    notme/forgetaboutme

Untracked files:
  (use "git add <file>..." to include in what will be committed)
  notme/

Add commit this deletes by using the flag -A in the add command:

$ git add -A .
$ git commit -m "removed notme folder"
On branch main
nothing to commit, working tree clean

Delete files & folders from the commit history​

We just created a commit removing the notme folder. However, there is still a commit where these notme are present, this way our repo can become unnecessary large. Or if we committed sensitive data like passwords and such, this can become a problem. If you want to remove folders or files from the entire history of your project, you have to go one step further.

You can edit the git history using the git filter-branch command. To clear our notme folder, let's do the following:

git filter-branch --tree-filter 'rm -rf notme' HEAD
WARNING:  git-filter-branch has a glut of gotchas generating mangled history rewrites
          Hit Ctrl-C before proceeding to abort, then use an
          alternative filtering tool such as 'git filter-repo'
          (https://github.com/newren/git-filter-repo/) instead.  See the
          filter-branch manual page for more details; to squelch this warning,
          set FILTER_BRANCH_SQUELCH_WARNING=1.
Proceeding with filter-branch...

Rewrite 2d9ab38218ad42d0cc14d89fa42a313df6afce5d (1/1) (0 seconds passed, remaining 0 predicted)
Ref 'refs/heads/main' was rewritten

The folder will be deleted on your file system and in the history. But this workflow isn't ideal. We could easely add that directory again. It's impossible to keep track of all the files you want or don't want to track yourself. We will fix this by using a .gitignore file.

.gitignore​

We will now specify which files we don't want to track in the future. This can be done with a .gitignore file. This is a text file in your repository that specifies which files and directories are allowed to be ignored by git.

Create a new file called .gitignore in the root of your repository. Give this the following content:

.DS_Store
notme/

This will cause the .DS_Store file and the notme folder (& all its subfolders) to be ignored in the future.

Add and commit this file to include it in your repository.

git add .
git commit -m "added .gitignore"

In practice, you will create such a .gitignore file as one of your first files. This way you avoid "contaminating" your repository with unnecessary files, and you avoid drastic actions such as deleting folders & files from the history. A list of useful .gitignore files can be found here: https://github.com/github/gitignore

More
Copyright © 2024 Devine, Inc. Built with Docusaurus.
- + \ No newline at end of file diff --git a/git/basics/git-06-branches.html b/git/basics/git-06-branches.html index 58446c3..a11383c 100644 --- a/git/basics/git-06-branches.html +++ b/git/basics/git-06-branches.html @@ -4,13 +4,13 @@ Branching | Workflows - +

Branching

You can also use branches via Git.

You can use branches to:

  • Develop new features
  • Bug fixes
  • Experiment with new ideas without influencing your production code (code that is online)

This is a walkthrough to work with 2 branches, namely develop and main branches. You can find the production ready code on the main branch. On the develop branch, on the other hand, you can commit code that is not yet completely ready to show to your end user.

Once you're happy with the (bug-free) code in the develop branch, you can merge it into the main branch. This process is explained further.

You continue working on the current project.

Create a branch develop by executing the following command:

git branch develop

Get an overview of all the branches

git branch

Now that we have created a new develop branch, we can switch to it by running git checkout develop:

git checkout develop

Make some commits on the develop branch.

We would now like to merge our code from develop with our main code, so that both branches contain the same code (now develop has more commits than main, i.e. develop stands before main). For this we first have to switch back to our main branch and merge develop into it in a next step:

git checkout main

The merge of develop in main is done by the git merge command:

git merge develop main

Switch back to develop immediately, so you don't accidentally develop in the main branch (we want our develop branch to always have the most recent code):

git checkout develop

Master/main​

Historically, often the terms 'master' and 'slave' were used to name branches. In hindsight, these were offensive to say the least, so a more inclusive alternative 'main' became the default branch on many platforms.

That is why you will come across some 'master' branches in code examples or tutorials.

A 'main' branch doesn't have any superpowers or other special features, in the end, it is just a name.

You can easily rename a branch with the following command:

git branch -m OLD-BRANCH-NAME NEW-BRANCH-NAME

If you like to gain some more background information on this, you can read this article

More
Copyright © 2024 Devine, Inc. Built with Docusaurus.
- + \ No newline at end of file diff --git a/git/basics/git-07-tipsandtricks.html b/git/basics/git-07-tipsandtricks.html index 1aa2358..6e81cd1 100644 --- a/git/basics/git-07-tipsandtricks.html +++ b/git/basics/git-07-tipsandtricks.html @@ -4,13 +4,13 @@ Tips and Tricks | Workflows - +
-

Tips and Tricks

Renaming files and folders​

Git's behavior regarding file and folder names is influenced by the case sensitivity of the underlying file system. Some file systems, like macOS by default, are case-insensitive, while others like those in most Linux distributions are case-sensitive. To be sure git picks up filename changes, --especially when you are only changing the casing of a filename-- one should use the git mv command.

git mv MyFileName myfilename
More
Copyright © 2024 Devine, Inc. Built with Docusaurus.
- +

Tips and Tricks

Renaming files and folders​

Git's behavior regarding file and folder names is influenced by the case sensitivity of the underlying file system. Some file systems, like macOS by default, are case-insensitive, while others like those in most Linux distributions are case-sensitive. To be sure git picks up filename changes, --especially when you are only changing the casing of a filename-- one should use the git mv command.

git mv MyFileName myfilename

Don't create repositories inside iCloud/OneDrive or other cloud-synced folders​

Since the .git directory contains a lot of files and folders, syncing takes forever and can cause issues. It's best to create repositories in a local folder.

More
Copyright © 2024 Devine, Inc. Built with Docusaurus.
+ \ No newline at end of file diff --git a/git/collaboration/collab-01-github-push.html b/git/collaboration/collab-01-github-push.html index 84dbdd7..279b729 100644 --- a/git/collaboration/collab-01-github-push.html +++ b/git/collaboration/collab-01-github-push.html @@ -4,13 +4,13 @@ Collaboration with git | Workflows - +

Collaboration with git

So far we have worked locally with git. You can also collaborate with several people on 1 repository by working with a remote server. Everyone has a local copy of the repository, and can synchronize their changes via a remote server with other people who have the repository.

In theory, you can use any computer on which you have installed the git command tools as a server. It's just not that practical to work together from home, you have to make sure that your computer can be reached externally and everyone who works together must know your ip address or hostname.

That is why we use a hosted git environment. There are several options for this, we will use GitHub

Create & link GitHub account​

We will create a GitHub account and link our GitHub credentials to our computer, so that we don't have to re-enter our password every time.

Visit https://github.com and create an account. (with your @student.howest.be account) Then go to https://education.github.com/pack and request an educational pack by clicking Get your pack, this will be useful to create private repositories.

Then open a terminal window. We'll link our name & email address to git so git knows who is doing a commit. Make sure your email address is the one you used to create your GitHub account:

git config --global user.name "Your Name Here"
git config --global user.email "your_email@student.howest.be"

SSH key​

The next steps are a summary of this guide When things should be unclear, you can read the guide in more detail.

To authenticate yourself with GitHub, you need to create an SSH key. This is a key that is stored on your computer and is used to authenticate yourself with GitHub. You can create a key with the following command:

ssh-keygen -t ed25519 -C "your_email@student.howest.be"

When asked for the location of the key, you can give the key a more describing name:

> Enter a file in which to save the key (/Users/YOU/.ssh/id_ALGORITHM):
$ /Users/YOUR NAME/.ssh/github

You can press enter to leave the passphrase empty (this can be a security issue).

Now go to your .ssh directory to check if everything is there. You should see (at least) 2 files: github and github.pub

cd
cd .ssh
ls -al

SSH agent​

Make sure you are still in de .ssh directory.

Create a config file if there isn't one yet:

touch config

And open it in the editor of your choice. (We are using code here, see Launching VS Code from the command line

code config

Now add this to the config file and save it:

Host *
  AddKeysToAgent yes
  IdentityFile ~/.ssh/github

(note that we didn't add the UseKeychain option --as mentioned in the guide-- since we are not using a passphrase)

Now we can add the key to the ssh-agent:

ssh-add github

Adding the key to GitHub​

Copy the contents of the public key (make sure you are in the .ssh directory) the command pbcopy lets us put content in our clipboard, it is like a 'cmd-c'

pbcopy < github.pub

On GitHub, go to Settings → SSH and GPG keys → New/add SSH key → Give it a descriptive name (e.g. "Macbook") → Paste the key → Add SSH key

You can test if everything is working by running the following command:

ssh -T git@github.com

Remember to choose the SSH option (instead of the HTTPS option) when cloning a repository.

Create repository & first push​

Login to your GitHub account, and click the "New repository" button. Choose a name for your repository and click the "Create Repository" button.

Don't add a readme.md or a .gitignore file yet. Since we will sync this repo with an existing one (the one we created in a previous chapter) things will get complicated if there are files on both ends. (It is definitely possible to fix this, but we won't go in to that now) If you would start completely from scratch, this wouldn't be an issue.

Open a terminal window and navigate via cd commands to the directory of the git repository containing the "hello world" files. We will make sure that we can synchronize our local repository via GitHub, by adding a "remote". A remote is a location where you can synchronize a git repository:

(don't forget to change git@github.com:demouser/hellogit.git with your own repository url, you can find it under the green 'code' button on your GitHub repository.)

$ git remote add origin git@github.com:demouser/hellogit.git
$ git push -u origin main
Enumerating objects: 17, done.
Counting objects: 100% (17/17), done.
Delta compression using up to 12 threads
Compressing objects: 100% (10/10), done.
Writing objects: 100% (17/17), 8.98 KiB | 4.49 MiB/s, done.
Total 17 (delta 1), reused 0 (delta 0)
remote: Resolving deltas: 100% (1/1), done.
To git@github.com:demouser/hellogit.git
    * [new branch]      main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.

The git push command will upload local, unsynchronized changes to the remote location. You use the -u attribute the very first time, to ensure that you don't have to specify the remote name in future synchronizations. You can then just run git push in the future.

Git add - commit - push​

From now on you can start pushing commits to the online repository. Usually you bundle several local commits when you push. In fact, we already did this with our first push: all the commits we ran earlier are now also in the online repository.

Delete the world.txt file, add commit. We use git add -u . to ensure that the delete action of that file is staged:

$ rm world.txt
$ git add -u .
$ git commit -m "removed world file"
[main 0b0d3b8] removed world file
    1 file changed, 1 deletion(-)
    delete mode 100644 world.txt

Create a README.md file, with a little info about the repository:

$ echo "Demo repository" > README.md
$ git add .
$ git commit -m "added readme file"
[main a8515e0] added readme file
    1 file changed, 1 insertion(+)
    create mode 100644 README.md

Execute git status. You can see in the status report that the repository is 2 commits ahead of the online version:

On branch main
Your branch is ahead of 'origin/main' by 2 commits.
(use "git push" to publish your local commits)
nothing to commit (working directory clean)

Execute git push to put your commits on GitHub:

Enumerating objects: 6, done.
Counting objects: 100% (6/6), done.
Delta compression using up to 12 threads
Compressing objects: 100% (4/4), done.
Writing objects: 100% (5/5), 488 bytes | 488.00 KiB/s, done.
Total 5 (delta 2), reused 0 (delta 0)
remote: Resolving deltas: 100% (2/2), completed with 1 local object.
To git@github.com:demouser/hellogit.git
    f1e8b69..a8515e0  main -> main

When you view the repository through your browser, you will see that the contents of the README.md file are shown below the list of files. This is a file in the Markdown format. (the same for the file you are reading now...) Markdown is a simple markup language for formatting documents. More information about this can be found on Wikipedia or this GitHub specific flavor

More
Copyright © 2024 Devine, Inc. Built with Docusaurus.
- + \ No newline at end of file diff --git a/git/collaboration/collab-02-pull-rebase.html b/git/collaboration/collab-02-pull-rebase.html index 393f454..8cbec45 100644 --- a/git/collaboration/collab-02-pull-rebase.html +++ b/git/collaboration/collab-02-pull-rebase.html @@ -4,13 +4,13 @@ Pull | Workflows - +

Pull

Pull existing repository​

Once a repository has been created, and is on a server like GitHub, you can also download it from other computers/locations. Downloading the repository for the first time is done via the git clone command. From then on you can get updates via the git pull command. git pull is the inverse of git push, and you will use it to pull in updates you don't already have locally.

Open a second terminal window, navigate to the parent directory of your original git repository and create a directory where you will clone a duplicate of the repository:

mkdir project_2
cd project_2

Execute the git clone command to get the online repository (just change the url to your own repository)

$ git clone git@github.com:demouser/hellogit
Cloning into 'hellogit'...
remote: Enumerating objects: 22, done.
remote: Counting objects: 100% (22/22), done.
remote: Compressing objects: 100% (11/11), done.
remote: Total 22 (delta 3), reused 22 (delta 3), pack-reused 0
Unpacking objects: 100% (22/22), done.

You now have 2 clones from the same repository on your computer. One in the project folder and one in the project2 folder. We'll use these two to test syncs and merges.

Push and pull​

We simulate collaboration with 2 users by synchronizing in two different folders with the same remote (online repository). For the following actions, pay attention to the folder in which you execute the commands (from now on the project folder will always be in front of the dollar sign in the command to be executed).

Tip: you can open 2 terminal windows, set them side by side.

In folder 1 we create a new file project.txt, we add, commit and push to the remote:

project_1 $ echo "created in project" > project.txt
project_1 $ git add .
project_1 $ git commit -m "added project.txt file"
[main 3dc1c52] add project.txt file
  1 file changed, 1 insertion(+)
  create mode 100644 project.txt

project_1 $ git push
Enumerating objects: 4, done.
Counting objects: 100% (4/4), done.
Delta compression using up to 12 threads
Compressing objects: 100% (2/2), done.
Writing objects: 100% (3/3), 300 bytes | 300.00 KiB/s, done.
Total 3 (delta 1), reused 0 (delta 0)
remote: Resolving deltas: 100% (1/1), completed with 1 local object.
To git@github.com:demouser/hellogit.git
    a8515e0..3dc1c52  main -> main

In folder 2 we create a new file project2.txt, add & commit and try to push to the remote:

project_2 $ echo "created in project2" > project2.txt
project_2 $ git add .
project_2 $ git commit -m "added project2.txt file"
[main 3bdfe55] added project2.txt file
 1 file changed, 1 insertion(+)
 create mode 100644 project2.txt

project_2 $ git push
To git@github.com:demouser/hellogit
 ! [rejected]        main -> main (fetch first)
error: failed to push some refs to 'git@github.com:demouser/hellogit'
hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing
hint: to the same ref. You may want to first integrate the remote changes
hint: (e.g., 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.

We get an error: there are new commits on the remote that we haven't pulled into our project2 clone yet. We have to pull these first before we can do a push:

project_2 $ git pull

We are presented with a vim or nano editor to perform a merge. You can enter a custom message here. Enter :quit to close the vim editor and continue the merge.

remote: Enumerating objects: 4, done.
remote: Counting objects: 100% (4/4), done.
remote: Compressing objects: 100% (1/1), done.
remote: Total 3 (delta 1), reused 3 (delta 1), pack-reused 0
Unpacking objects: 100% (3/3), done.
From git@github.com:demouser/hellogit
    a8515e0..3dc1c52  main       -> origin/main
Merge made by the 'recursive' strategy.
  project.txt | 1 +
  1 file changed, 1 insertion(+)
  create mode 100644 project.txt

When you execute git status, you will see that you are 2 commits ahead of the remote: 1 commit is the merge commit, and a second commit is the project2.txt commit:

project_2 $ git status
On branch main
Your branch is ahead of 'origin/main' by 2 commits.
nothing to commit (working directory clean)

Push the commits again to the remote. It succeeds this time.

project_2 $ git push
Enumerating objects: 7, done.
Counting objects: 100% (7/7), done.
Delta compression using up to 12 threads
Compressing objects: 100% (4/4), done.
Writing objects: 100% (5/5), 551 bytes | 551.00 KiB/s, done.
Total 5 (delta 2), reused 0 (delta 0)
remote: Resolving deltas: 100% (2/2), completed with 1 local object.
To git@github.com:demouser/hellogit
    3dc1c52..c18628a  main -> main

Now also get these commits in your first folder (don't forget to switch folders) via a git pull command:

project_1 $ git pull
remote: Enumerating objects: 7, done.
remote: Counting objects: 100% (7/7), done.
remote: Compressing objects: 100% (2/2), done.
remote: Total 5 (delta 2), reused 5 (delta 2), pack-reused 0
Unpacking objects: 100% (5/5), done.
From git@github.com:demouser/hellogit
    3dc1c52..c18628a  main       -> origin/main
Updating 3dc1c52..c18628a
Fast-forward
  project2.txt | 1 +
  1 file changed, 1 insertion(+)
  create mode 100644 project2.txt

rebase​

We will work with a centralized workflow for the time being: we work with several people on 1 main branch via 1 remote. There are other more advanced workflows that work through branches and forks. However, these are a bit more complex.

In the previous scenario, we added a merge commit to fast-forward an out-of-date repository. This is not optimal in a centralized workflow: it is better to use a rebase with the git pull. A rebase will execute all commits from the remote first, and execute your commits after it, instead of executing a merge commit by default.

Delete project.txt in the project folder:

project_1 $ rm project.txt
project_1 $ git add -u .
project_1 $ git commit -m "removed project.txt"
[main de80b79] removed project.txt
 1 file changed, 1 deletion(-)
 delete mode 100644 project.txt

project_1 $ git push
Enumerating objects: 3, done.
Counting objects: 100% (3/3), done.
Delta compression using up to 12 threads
Compressing objects: 100% (2/2), done.
Writing objects: 100% (2/2), 233 bytes | 233.00 KiB/s, done.
Total 2 (delta 1), reused 0 (delta 0)
remote: Resolving deltas: 100% (1/1), completed with 1 local object.
To git@github.com:demouser/hellogit.git
   c18628a..de80b79  main -> main

Then delete project2.txt in the project2 folder. We will also have to do a pull here before we can push. The difference with the pull is that we pass a rebase flag, to ensure that all commits from the remote repository are executed first, and then our own commits:

project_2 $ rm project2.txt
project_2 $ git add -u .
project_2 $ git commit -m "removed project2.txt"
[main 6be65fb] removed project2.txt
 1 file changed, 1 deletion(-)
 delete mode 100644 project2.txt

project_2 $ git pull --rebase
remote: Enumerating objects: 3, done.
remote: Counting objects: 100% (3/3), done.
remote: Compressing objects: 100% (1/1), done.
remote: Total 2 (delta 1), reused 2 (delta 1), pack-reused 0
Unpacking objects: 100% (2/2), done.
From git@github.com:demouser/hellogit
   c18628a..de80b79  main   ->  origin/main
First, rewinding head to replay your work on top of it...
Applying: removed project2.txt

This way, no merge commit is created. When you execute git status you see that you are now only 1 commit ahead of the remote repository, instead of 2:

project_2 $ git status
On branch main
Your branch is ahead of 'origin/main' by 1 commit.
  (use "git push" to publish your local commits)
nothing to commit (working directory clean)

Push to the remote repository. Also pull in the projects folder so that both repositories are up-to-date.

More
Copyright © 2024 Devine, Inc. Built with Docusaurus.
- + \ No newline at end of file diff --git a/git/collaboration/collab-03-merge-conflicts.html b/git/collaboration/collab-03-merge-conflicts.html index 7a6456e..99ca9fc 100644 --- a/git/collaboration/collab-03-merge-conflicts.html +++ b/git/collaboration/collab-03-merge-conflicts.html @@ -4,13 +4,13 @@ Merge conflicts | Workflows - +

Merge conflicts

So far we have only made changes in separate files. However, it can happen that you have made changes to the same file with 2 people, and that a conflict occurs.

In the project folder, edit the text in hello.txt and push it to the remote repository:

project_1 $ echo "edit in project" > hello.txt
project_1 $ git add .
project_1 $ git commit -m "changed hello.txt"
[main f1c4e08] changed hello.txt
  1 file changed, 1 insertion(+), 1 deletion(-)

project_1 $ git push
Enumerating objects: 5, done.
Counting objects: 100% (5/5), done.
Delta compression using up to 12 threads
Compressing objects: 100% (2/2), done.
Writing objects: 100% (3/3), 284 bytes | 284.00 KiB/s, done.
Total 3 (delta 1), reused 0 (delta 0)
remote: Resolving deltas: 100% (1/1), completed with 1 local object.
To git@github.com:demouser/hellogit.git
    8f2400d..f1c4e08  main -> main

Also edit the text of hello.txt in the project2 folder

project_2 $ echo "edit in project2" > hello.txt
project_2 $ git add .
project_2 $ git commit -m "changed hello.txt in project2"
[main 45b7ea9] chenged hello.txt in project2
  1 file changed, 1 insertion(+), 1 deletion(-)

project_2 $ git push
To git@github.com:demouser/hellogit
  ! [rejected]        main -> main (fetch first)
error: failed to push some refs to 'git@github.com:demouser/hellogit'
hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing
hint: to the same ref. You may want to first integrate the remote changes
hint: (e.g., 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.

We first pull before we can push

project_2 $ git pull --rebase
remote: Enumerating objects: 5, done.
remote: Counting objects: 100% (5/5), done.
remote: Compressing objects: 100% (1/1), done.
remote: Total 3 (delta 1), reused 3 (delta 1), pack-reused 0
Unpacking objects: 100% (3/3), done.
From git@github.com:demouser/hellogit
    8f2400d..f1c4e08  main       -> origin/main
First, rewinding head to replay your work on top of it...
Applying: chenged hello.txt in project2
Using index info to reconstruct a base tree...
M hello.txt
Falling back to patching base and 3-way merge...
Auto-merging hello.txt
CONFLICT (content): Merge conflict in hello.txt
error: Failed to merge in the changes.
Patch failed at 0001 chenged hello.txt in project2
hint: Use 'git am --show-current-patch' to see the failed patch
Resolve all conflicts manually, mark them as resolved with
"git add/rm <conflicted_files>", then run "git rebase --continue".
You can instead skip this commit: run "git rebase --skip".
    To abort and get back to the state before "git rebase", run "git rebase --abort".

We get a merge conflict, because we changed the same file in both repositories. Now, we need to resolve this conflict before the rebase can continue.

Via git status you can request a list of the merge conflicts:

project_2 $ git status
rebase in progress; onto f1c4e08
You are currently rebasing branch 'main' on 'f1c4e08'.
  (fix conflicts and then run "git rebase --continue")
  (use "git rebase --skip" to skip this patch)
  (use "git rebase --abort" to check out the original branch)

Unmerged paths:
  (use "git restore --staged <file>..." to unstage)
  (use "git add <file>..." to mark resolution)

both modified:   hello.txt
no changes added to commit (use "git add" and/or "git commit -a")

You will be notified that you are rebasing. At "Unmerged paths" you see the files that are in conflict. You must first resolve the conflict by editing the file before continuing with the rebase.

Open the txt-file in a text editor. You notice that the content from project and project2 is present:

    <<<<<<< HEAD
    edit in project
    =======
    edit in project2
    >>>>>>> changed hello.txt in project2

Adjust the text to:

edit in project
and edit in project2

Add this to the rebase action and use the 'continue' flag

project_2 $ git add hello.txt
project_2 $ git rebase --continue
Applying: changed hello.txt in project2

Now when you execute git status, you will see that you are on the main branch again, and you are 1 commit ahead of the remote:

project_2 $ git status
On branch main
Your branch is ahead of 'origin/main' by 1 commit.
nothing to commit (working directory clean)

Now you can push again to the remote

project_2 $ git push
Counting objects: 5, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (2/2), done.
Writing objects: 100% (3/3), 326 bytes, done.
Total 3 (delta 0), reused 0 (delta 0)
To git@github.com:demouser/hellogit
    7f3b200..920c81f  main -> main

Execute git pull in the other folder so that both are synced again.

Visually resolve conflicts​

If you like a more visual way, you can resolve merge conflicts in VS Code

More
Copyright © 2024 Devine, Inc. Built with Docusaurus.
- + \ No newline at end of file diff --git a/homebrew-01-intro.html b/homebrew-01-intro.html index f4c5271..c56c901 100644 --- a/homebrew-01-intro.html +++ b/homebrew-01-intro.html @@ -4,13 +4,13 @@ Homebrew | Workflows - +

Homebrew

Our personal computer is full of applications and terminal commands (ls, git, nvm, etc.) that we use every day. For Apps, we use the App store, or we install then via a download. Terminal commands can be tricky, sometimes they need a specific build step customized to your machine. Homebrew makes this process a breeze. Compare it like npm for your terminal commands.

Packages are made available through so called 'taps'. A tap is a repository that contains a list of packages. Homebrew has a default tap called homebrew/core that contains a lot of packages. But there are other taps that contain packages. For example the homebrew/cask tap contains a lot of applications. (yep, you can use homebrew to install -and manage- applications)

Installation​

See brew.sh for the installation instructions. Copy-paste that installation command in your terminal and follow the instructions.

General usage​

Install a package​

Let us install a package called 'tree' that displays the content of a directory in a visual (tree) structure. We can install it with the following command:

brew install tree

You get some logs in your terminal that shows you the progress of the installation. Once it is done, you can use the tree command in your terminal. Depending on where you are located in the file system, it will display the content of the current directory.

$ tree
.
|-- README.md
`-- hello.txt

0 directories, 2 files

Search for a package​

If you are not really sure if a certain package is available through Homebrew, you can search for it. You can search using the website or via the command line. For instance, if you want to search for a package to convert fonts to woff2 format:

$ brew search woff2
==> Formulae
woff2 ✔

It seems like a package woff2 is available. When you install it, you will have woff2_compress and woff2_decompress available in your terminal.

Update packages​

You can run brew update to update the registry of packages. This will not update the packages themselves. Therefore, you have to run brew upgrade.

Uninstall a package​

To uninstall a package, you can run brew uninstall <package-name>.

Happy brewing!

More
Copyright © 2024 Devine, Inc. Built with Docusaurus.
- + \ No newline at end of file diff --git a/index.html b/index.html index 9884416..9676ceb 100644 --- a/index.html +++ b/index.html @@ -4,13 +4,13 @@ Home | Workflows - +
More
Copyright © 2024 Devine, Inc. Built with Docusaurus.
- + \ No newline at end of file diff --git a/modules/packages-01-modules.html b/modules/packages-01-modules.html index 10836d6..075f053 100644 --- a/modules/packages-01-modules.html +++ b/modules/packages-01-modules.html @@ -4,14 +4,14 @@ Packages | Workflows - +

Packages

When writing code it is beneficial to split things up by functionality. It makes our code more structured and therefore clearer.

When we take this one step further, it becomes easier to re-use the same code somewhere else.

If we go even further then, it becomes possible to share our code with others. And, off course, make use of others their code in our project.

Modules​

Originally, JavaScript didn't have any mechanism to split and combine pieces of code. NodeJS came with support for this with require(), later, things like RequireJS, Webpack and Babel made this possible for JavaScript on the browser. It was waiting until ES6 for a native module syntax in the browser. Luckily for us, the same syntax is available now in Nodejs. Have a look at this article for some examples

Further reference on MDN

More
Copyright © 2024 Devine, Inc. Built with Docusaurus.
- + \ No newline at end of file diff --git a/modules/packages-02-npm.html b/modules/packages-02-npm.html index 9cd7364..a63cdf3 100644 --- a/modules/packages-02-npm.html +++ b/modules/packages-02-npm.html @@ -4,13 +4,13 @@ NPM | Workflows - +

NPM

In the previous chapter we learned how to make our code more reusable by splitting it up into modules. But it doesn't stop there. Now, we want to be able to share modules with other developers.

To make something like that possible, we would need a couple of things:

  • a way to gather all those packages
  • a way to search them, get information about it
  • a way to implement, use them in our project

You saw it coming, didn't ya? Off course there is something like that, it is called npm or Node Package Manager

We call the modules who are available on npm "packages". Often, they exist of multiple modules, and they can make use of other packages on their own.

Registry​

You can compare the registry with a large database (in fact, it is) that keeps track of all the packages, their versions etc.

Everyone (including you) can publish a package to this registry.

Website​

To have easy access to all those packages, one can use the npmjs site.

Let's say we need a short, random string to create the url for a new chatroom. Do a search on unique string id and you get a couple of results. Picking the right one can be tricky, have a look at the description, the time it was last updated is also a good parameter.

Take a look at nanoid You get some kind of overview, often you will find a readme here with instructions how to install and use the package.

Notice the Repository link in the right column. Often the repositories of these packages are open source (but they don't have to be) This comes in handy when you stumble upon an issue, and you need some help. In this case, the full readme is on the GitHub repository

CLI​

To interact (installing, updating and even publishing) with these packages, we use a command line tool npm

Node.js​

You might have noticed the 'Node' in Node package manager, it won't come as a surprise that we need to install Node.js. Node.js is a JavaScript runtime to execute JavaScript on a server (i.e. not in a browser) This runtime is under continues development, so version updates arrive regularly. New versions mean new possibilities, but that implies that older packages aren't updated yet to newer Node.js versions. If we would just install a Node.js version system-wide, this would be problematic if we were working on two different project who require different Node.js versions.

nvm​

Warning

Be sure to have a .zshrc file in your home directory. If you don't have one, create it with touch ~/.zshrc Otherwise, the installation of nvm will fail.

To handle different Node.js versions easaly, there is a tool called nvm (node version manager) Lets start by installing this one first. 1 See the documentation for the most recent version, the command is something like this (but change the version number): curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.XX.X/install.sh | bash

To doule-check if everything went well, close every terminal instance and open a new window. Type nvm and you should get an overview with all the commands nvm has to offer.

Now the Node Version Manager is installed, but we still have to install a Node.js runtime. With the install command, we can install specific Node.js versions, but by using the alias node we simply install the latest stable version.

nvm install node

Have a look at the documentation to see which other options are possible.

1 Assuming that the xcode command line tools are installed (run xcode-select –install otherwise)

npm​

There is no need to install npm on its own, it comes with the installation of Node.js. Try it, just run npm on the command line.

More
Copyright © 2024 Devine, Inc. Built with Docusaurus.
- + \ No newline at end of file diff --git a/modules/packages-03-practice.html b/modules/packages-03-practice.html index e2fa104..e0ab83e 100644 --- a/modules/packages-03-practice.html +++ b/modules/packages-03-practice.html @@ -4,13 +4,13 @@ Packages in practice | Workflows - +

Packages in practice

Let us create a project where we make use of npm.

Create an empty directory en open it in VS Code.

mkdir hellonpm
code hellonpm

init​

To get started, we have to initialize our project. Make sure you run the following command in the hellonpm directory. The following command starts a wizard to set up some fields. When there is something written between (brackets), that means that this is the default/suggested value. You can simply press enter if you are satisfied with that value.

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (hellonpm)
version: (1.0.0)
description: getting to know eachother
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/demouser/Documents/hellonpm/package.json:

{
  "name": "hellonpm",
  "version": "1.0.0",
  "description": "getting to know eachother",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)

If you don't like these types of interrogation (and you find yourself pressing enter most of the time), you can add the -y flag after the init command. This is agreeing with all the defaults ;-)

package.json​

After you ran the previous command, a package.json file was created. Although we have no intention of publishing this project as a new package, this project is simply considered as a "package" for npm. This file keeps track of all the packages we will use, scripts we would like to run, version, name, etc. You can take a look at the docs if you want to look up a specific property.

main​

When we would be creating a package, the file mentioned in the "main" property, would be the place npm expects the exports to be. It is generally considered as the "start" of your script.

Let us create the index.js file.

touch index.js

Now we are going to log something in there. Remember we are running Node.js script here, so things like document.createElement() aren't an option.

console.log("Hello Node.js");

You can run this Node.js script with the following command:

$ node index.js
Hello Node.js

Nothing special here, we can run pyhton and PHP similarly. We just say something like "Hey Node.js, execute the content of the file index.js"

Since the index.js file is referenced as our "main" script in the package.json, we can run the following:

$ node .
Hello Node.js

scripts​

Notice the scripts property, we can create shortcuts here to run terminal commands. There is one by default, the test script. This is quite readable, the output should be something like Error: no test specified, right? Let us give it a try. We can run a package.json script with the command npm run [name of script you would like to run]

$ npm run test

> hellonpm@1.0.0 test
> echo "Error: no test specified" && exit 1

Error: no test specified

back to our index.js file. Add a script named "start" with the value of node index.js (or: node .) to the list of scripts. Don't forget the trailing comma at the end of the test script line. This file is a JSON file after all.

  "scripts": {
-   "test": "echo \"Error: no test specified\" && exit 1"
+   "test": "echo \"Error: no test specified\" && exit 1",
+   "start": "node index.js"
  },

Now run the following:

$ npm run start

> hellonpm@1.0.0 start
> node index.js

Hello Node.js

Ok, I admit, the difference is not overwhelming. But in a while, we will need different settings for our projects to run local or in production and then these will be a huge time saver. Same thing for testing: we can write code that tests our code. With a test script we can set up a temporary database that gets filled with test data and erased afterwards. This would be annoying if this would happen on our local development database every time.

There is one little advantage tough, we didn't choose 'start' arbitrary as the name of our script. Since it is so common to run a 'start' script. One can just write...

npm start

> hellonpm@1.0.0 start
> node index.js

Hello Node.js

npm install​

Finally, let us install a package! We will use nanoid mentioned in the previous chapter. At the top of the right column, you can see the "install" command. npm i nanoid, this is the short notation for npm install nanoid, let's do this:

$ npm install nanoid

added 1 package, and audited 2 packages in 879ms

found 0 vulnerabilities

A couple of things happened:

  • nanoid is added as a dependency in the package.json, notice the version number
  • a package-lock.json file is generated
  • a node_modules directory is generated, containing the nanoid code.

We will discuss them all later on, but first let us use this package. Edit the index.js file like this:

import { nanoid } from "nanoid";
const id = nanoid();
console.log("Hello Node.js", "The id is:", id);

If you run this, you get something like the following:

$ npm start

> hellonpm@1.0.0 start
> node .

(node:25177) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/Users/demouser/Documents/hellonpm/index.js:1
import { nanoid } from "nanoid";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1048:15)
    at Module._compile (node:internal/modules/cjs/loader:1083:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1173:10)
    at Module.load (node:internal/modules/cjs/loader:997:32)
    at Module._load (node:internal/modules/cjs/loader:838:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:18:47

Node.js v18.8.0

Yeah, we forgot about that one. We have to make clear that we would like to make use of this type of modules. Like they say in the warning, add a "type": "module", to the package.json and try again.

npm start

> hellonpm@1.0.0 start
> node .

Hello Node.js The id is: 7paYoH6CZva14wUhX9mgf

And there you have it: we've installed and used a npm package. The first of many to come :-)

If it is not entirely clear why we occupy us with all this stuff, see the next chapter where we take a look at some advantages.

More
Copyright © 2024 Devine, Inc. Built with Docusaurus.
- + \ No newline at end of file diff --git a/modules/packages-04-advantages.html b/modules/packages-04-advantages.html index de0c329..0920f31 100644 --- a/modules/packages-04-advantages.html +++ b/modules/packages-04-advantages.html @@ -4,14 +4,14 @@ Advantages of npm | Workflows - +

Advantages of npm

In the previous chapter, we've installed a package to get an idea how npm works. Here we are about to do some routines to make it clear what the advantages of such a workflow is. You will learn a couple of things along the way, so buckle up!

Install a specific version​

It will happen sooner or later. You will need some previous version of a package to make it work with another package or a production server that only supports an older Node.js version.

Let us install an older version of ora, this is a fancy 'spinner' for the command line, good for now. At the time of writing, the latest version is 6.1.2, we will install version 6.0.0. Let's say we've installed this in the past.

$ npm install ora@6.0.0

added 31 packages, and audited 33 packages in 2s

17 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

If you're wondering why it added 31 packages, keep reading, we will address this in a minute.

Back to the present, curious to see the state of our packages. Run the following:

$ npm outdated
Package  Current  Wanted  Latest  Location          Depended by
ora        6.0.0   6.3.1   8.1.0  node_modules/ora  [projectname]

O-ow, there is a package outdated. Don't worry, we don't have to manually edit files in the node_modules folder, we can simply update this one by running:

npm install ora

removed 6 packages, changed 2 packages, and audited 27 packages in 597ms

15 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Seems like some packages were removed and some changed. But, most important for now, let us check if we still have outdated packages:

npm outdated

Nope, all good!

info

If you still see that the package isn't updated to it's most recent version. It probably means that there is a new major version. To force the installation of the most recent package you can append @latest, like this: npm install ora@latest

Now let us have a look at all those extra packages, check the contents of the node_modules directory. There are a lot of packages over there. That's because 'ora' depends on a couple of packages itself. You can see this on the npmjs page or in its package.json

Notice there are "dependencies" and "devDependencies". Dependencies are needed to run the script itself. DevDependencies are for development purposes and not necessary in a production build. For instance, the author of this package uses ava to test the code of this package.

Install​

Ready for a bold move? Delete the node_modules directory, go do it, don't be scared.

Well, be at least a little carefully with the rm (remove) command, make sure you have the command correct. The -r flag means "recursive" and deletes every directory and its contents of that path.

rm -r node_modules/

Now try to run start again:

$ npm start

> hellonpm@1.0.0 start
> node .

node:internal/errors:484
    ErrorCaptureStackTrace(err);
    ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'nanoid' imported from /Users/demouser/hellonpm/index.js
    at new NodeError (node:internal/errors:393:5)
    at packageResolve (node:internal/modules/esm/resolve:810:9)
    at moduleResolve (node:internal/modules/esm/resolve:859:20)
    at defaultResolve (node:internal/modules/esm/resolve:1074:11)
    at nextResolve (node:internal/modules/esm/loader:164:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:839:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:426:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

Node.js v18.8.0

(If you don't get this error and everything works just fine, that probably means you have installed nanoid somewhere else up in the file tree)

Now what? How can we get our project up and running again? This isn't a problem at all, in fact this is what we want to achieve. By running npm install we can install all the packages listed in the package.json according to their version numbers listed. This way we can share a project with each other without including that large node_modules folder. Make sure you include node_modules/ in the .gitignore of your project. You don't want to version control this directory, it is not necessary. To make things even more clear: never hand in a project with the node_modules included, this is not necessary!

$ npm install

added 26 packages, and audited 27 packages in 664ms

15 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

$ npm start

> hellonpm@1.0.0 start
> node .

Hello Node.js The id is: eAKBUmelPv5LDTyOuJdP3

Maybe you have to refresh the VS Code file explorer, but you can see the node_modules directory is back with all its content.

Uninstall​

If you want to get rid of a package, you can remove it from the package.json dependencies (and run npm install again) or you can remove one with the uninstall command. Let us remove ora since we don't use it after all.

$ npm uninstall ora

removed 25 packages, and audited 2 packages in 539ms

found 0 vulnerabilities

Versioning​

A quick sidestep about those version numbers. These are not arbitrary but following a certain standard called semver and are structured like "MAJOR.MINOR.PATCH"

  • MAJOR version when there are incompatible changes
  • MINOR version when new functionality is added in a backwards compatible manner
  • PATCH version when there are backwards compatible bug fixes

This means --at least in theory-- that you can safely update minor and patch changes. When there is a major update, you should reach out to the documentation for that package to see if there is some kind of upgrade guide.

When you look at the dependencies in the package.json, you can see which version is desired. Often these are preceded by symbols like ~ or ^ These all have special meanings which you can read about here in detail.

Version Control​

Just to make things clear:

  • node_modules: do not include in version control
  • package.json: do include in version control
  • package-lock.json: do include in version control

The package-lock.json file is auto generated en keeps track of all the packages installed in your project. For instance: it is perfectly possible that two separate packages both need the same dependency. Npm then decides which version to install en keeps track of this in the lock file. So this can speed tings up in successive installations.

More
Copyright © 2024 Devine, Inc. Built with Docusaurus.
- + \ No newline at end of file diff --git a/modules/packages-05-npx.html b/modules/packages-05-npx.html index 77f1af6..00c71ab 100644 --- a/modules/packages-05-npx.html +++ b/modules/packages-05-npx.html @@ -4,13 +4,13 @@ Npx | Workflows - +

Npx

Don't worry, we won't introduce another entirely new thing here. npx is a command line tool that comes installed when installing Node.js. It allows us to run node scripts without installing them first (technically they are 'cached' locally, but not installed...)

But first, let us see how to install a package 'global'

-g flag​

When installing a package, by default it is installed in the current project. This makes sense if we need some kind of library for our project. But since Node.js can do almost anything, it is often used as a tool for us, developers. So it makes sense to install this "global" so it comes availabe everywhere on the command line. The least useful example of this must be cowsay, but is fine to act as an example. Who doesn't want a cow to say some lines, available -everywhere- on your system? It doesn't matter where you run the following command, since it will be installed global.

npm install -g cowsay

Now, let the beast go! You can run this from everywhere now.

$ cowsay Devine FTW
 ____________
< Devine FTW >
 ------------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||

But now, this is installed. By using the command which you can see where a certain command is installed.

$ which cowsay
/Users/demouser/.nvm/versions/node/v18.8.0/bin/cowsay

This can become a hassle when you need different versions somehow.

Let us remove this global installed package:

$ npm uninstall  -g cowsay

removed 41 packages, and audited 1 package in 259ms

found 0 vulnerabilities
$ which cowsay
cowsay not found

npx​

With npx, you can run commands without installing them. The first time you run it, npx will ask to install it, but in fact, it is added to a cache...

$ npx cowsay devine
Need to install the following packages:
  cowsay@1.5.0
Ok to proceed? (y)
 ________
< devine >
 --------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||

A more useful example​

Making a cow speak won't add any additional value to your resume. A better use case for npx is gitignore which add a .gitignore file to your project, especially tailored for your type of project.

$ npx gitignore
Need to install the following packages:
  gitignore
Ok to proceed? (y)
Usage: gitignore [PROJECT TYPE]
Example: gitignore rails
Available project types can be found by running `gitignore -types` or at https://github.com/github/gitignore

We need to add a type run npx gitignore -types, visit the url or just follow our advice and run npx gitignore node for a typical node/web project.

$ npx gitignore node
Created .gitignore file for flag type node.

And there you have it, a .gitignore file in your project.

More
Copyright © 2024 Devine, Inc. Built with Docusaurus.
- + \ No newline at end of file diff --git a/search.html b/search.html index cb461ac..d325032 100644 --- a/search.html +++ b/search.html @@ -4,13 +4,13 @@ Search the documentation | Workflows - +

Search the documentation

More
Copyright © 2024 Devine, Inc. Built with Docusaurus.
- + \ No newline at end of file diff --git a/terminal-01.html b/terminal-01.html index b40cdc9..68bc1fd 100644 --- a/terminal-01.html +++ b/terminal-01.html @@ -4,14 +4,14 @@ Terminal | Workflows - +

Terminal

A basic knowledge of how to use the command line is essential in our field.

As a starter, have a look at this article You don't have to know everything by heart, it is just to give you some background info. You can skip the 'Git' and 'script' part.

Important Terminal commands​

The following commands should be easy for any developer to use:

  • ls: Display a list of files and folders in the current folder.
  • cd foldername: Navigates to the folder named after the command. This folder will then become the active folder in your Terminal. In this example, navigate to the folder named "folder name". Instead of a relative name (i.e. a name of a folder that is in the current active folder), you can also enter a full path (starting with a forward slash). Tip: you can drag a folder or file from your finder to the terminal window to place the full path to that folder or file in the window.
  • cd ..: Navigate to the parent directory so that it becomes the active directory.
  • mkdir foldername: create a folder with the name specified after the command. In this case, create a folder called "folder name" in the active folder.
  • rm -d foldername: delete a particular folder. This only works if the folder is empty. If you want to delete a non-empty folder, you can use additional options: rm -rdf foldername will delete the folder including subfolders and files.
  • rm filename: delete a specific file.
  • mv originalname newname: move or rename a file. You can also use absolute / relative paths to move files to another folder.
  • cp originalname newname: copy a file to a new location.
  • cat filename: display the contents of a particular file in your terminal window.
  • echo "hello world": display the text between the quotes in the terminal window.

Dollar sign​

When providing examples of command line commands and output, a dollar sign is used to indicate the difference between a command and output. A $ means that you have to run that command.

When a fragment only contains commands, no dollar signs are used.

Terminal app​

You can find your terminal in your Applications → Utilities folder. It might come in handy to put this in your dock.

VS Code has a terminal build in. (View → terminal) This is convenient when you have to interact with your project.

You can open VS Code from another therminal instance with the 'code' command. (if you set it up correctly)

The following command opens VS Code with the current directory as the active workspace.

code .

Options - and --​

Commands have options, these are used to modify the behavior of the command. Some options can be specified with either a single dash (-) or double dash (--).

A single dash can only be followed by a single character, a double dash can be followed by a multi-character option.

If we take a look at the code command, you will find a lot of options:

$ code --help
Visual Studio Code 1.71.0

Usage: code [options][paths...]

To read from stdin, append '-' (e.g. 'ps aux | grep code | code -')

Options
  -d --diff <file> <file>                    Compare two files with each other.
  -m --merge <path1> <path2> <base> <result> Perform a three-way merge by providing paths for two modified versions
                                             of a file, the common origin of both modified versions and the output
                                             file to save merge results.
  -a --add <folder>                          Add folder(s) to the last active window.
...

There is no need to read all of them in detail (this is just an example) but notice that some options like '-a' also have a full variant '--add'.

Combining​

You can combine short (one character) options into one long option. Let's have an example with ls

First the default command:

$ ls
Applications
Documents
Movies

Now with the -l option, to list them in the 'long format'

$ ls -l
total 3
drwx------@   11 demouser  staff    352 Aug 19 13:43 Applications
drwx------@   11 demouser  staff    640 Sep  8 09:33 Documents
drwx------@   11 demouser  staff    352 Jul 23  2021 Movies

There is also a -a option, which lists all the files and folders, including the hidden ones.

.
..
.DS_Store
.zshrc
$ ls -a
Applications
Documents
Movies

Let us combine both of them now

$ ls -la
drwxr-xr-x+   93 demouser  staff   2976 Sep 12 09:54 .
drwxr-xr-x     7 root      admin    224 Aug 11 08:44 ..
-rw-r--r--@    1 demouser  staff  26628 Sep  9 20:29 .DS_Store
-rw-r--r--     1 demouser  wheel   1255 Sep 12 09:27 .zshrc
-rw-r--r--@    1 demouser  staff  26628 Sep  9 20:29
drwx------@   11 demouser  staff    352 Aug 19 13:43 Applications
drwx------@   11 demouser  staff    640 Sep  8 09:33 Documents
drwx------@   11 demouser  staff    352 Jul 23  2021 Movies

Hidden files​

With the -a option of ls you can see hidden files. There is a reason they are hidden. Don't mess with them unless you know what you are doing.

If you want, you can show those hidden files in your Finder by running the following commands:

defaults write com.apple.Finder AppleShowAllFiles true
killall Finder

If you want to hide them, you can set the AppleShowAllFiles to false and run the command again.

Profile file​

A profile-file gets read when you start a new terminal session. In there, some commands can be executed to set environment variable, aliasses etc. Depending on the shell you are using, this file might be called something like .profile or .bash_profile. When you are using zsh, it is called .zshrc.

Autocomplete​

By using the tab key, you can trigger autocomplete on commands or file and folder names. Type part of the command or part of the path and press tab to autocomplete. This way you can save a lot of time, and you also avoid typing errors.

By using the up (and then down) keys, you can browse through your previous commands. Very useful!

Passing output to somewhere else​

You can also write output from a command to a file, using the > character:

  • ls > test.txt will write the output of the ls command to a file called test.txt.
  • echo "hello world" > hello.txt will write the output of the echo command (the text "hello world") to a file called hello.txt.

Warning​

Do not just copy-paste terminal statements without understanding what they do. If you are not sure, try to grasp them by using a tool like https://explainshell.com/

Resources​

More
Copyright © 2024 Devine, Inc. Built with Docusaurus.
- + \ No newline at end of file diff --git a/vite-01-intro.html b/vite-01-intro.html index 56eab7f..56bcc9f 100644 --- a/vite-01-intro.html +++ b/vite-01-intro.html @@ -4,13 +4,13 @@ Vite | Workflows - +

Vite

Up until now, we were doing fine with the VS Code Live Server. But since our applications will become more and more complex (depending on npm packages to give an example), we need a more advanced development server. This is where Vite comes in. There are a lot of advantages, the following is just a summary:

Features​

Dev server​

Vite is a development server that has some special tricks up its sleeve to start it up fast, even when a lot of libraries need to be loaded first.

HRM​

Vite has Hot Module Replacement (HRM) built in. This means that when you change a file, the browser will automatically reload the page. And again... does this fast.

Production build​

Vite can also build your application for production. It will bundle all your files into one or more files and minimizes it. It strips out all the comments and unused code. This makes your application smaller and faster.

Plugins​

Vite has a lot of plugins that can be used to extend its functionality. For example, you can use a plugin that makes it possible to use brand-new CSS features, but provides an automatic fallback for older browsers.

In the end, Vite really speeds up our development process and provides us with a lot of convenient features. Be aware that this isn't the only option out there, things like Webpack or Parcel do about the same thing.

Installation​

To create a new vite-project, you can run the following command:

npm create vite@latest

This is an alias for npm init vite@latest and will create a new project configured with Vite. A folder will be created with the name of the project. When asked, you can choose for a basic 'Vanilla' project.

You can write this in one line to skip the steps as follows:

$ npm create vite@latest myproject -- --template vanilla

Scaffolding project in /Users/demouser/myproject...

Done. Now run:

  cd myproject
  npm install
  npm run dev

Be aware that we still have to navigate to the project and do a npm install to install all the necessary dependencies.

cd myproject
npm install

Exploration​

Have a look at the newly created project, there is a lot!

  • node_modules - this is where all the dependencies are stored, dependencies needed by Vite
  • public - A directory containing an SVG file. Files in this directory aren't parsed by Vite, this has certain consequences
  • .gitignore - A file that tells git which files to ignore, notice that the project itself isn't a repository yet.
  • counter.js - An example file that contains a JavaScript function to increase a counter
  • index.html - The main HTML file, notice that it has a script tag that loads a /main.js file
  • javascript.svg - An other SVG file, this one will be parsed by Vite
  • main.js - The main JavaScript file, it imports the counter.js file, the javascript.svg file and the style.css (!) file
  • package-lock.json - obviously
  • package.json - Notice that Vite is a devDependency and there are 3 scripts available
  • style.css - The main CSS file.

Spin up the dev server:

$ npm run dev

> myproject@0.0.0 dev
> vite


VITE v3.1.8  ready in 218 ms

➜  Local:   http://127.0.0.1:5173/
➜  Network: use --host to expose

When you open the URL in your browser, you will see a basic demo page.

  • Some HTML is generated by the main.js file
  • When you click on the button, the counter goes up. So JavaScript seems to be working OK
  • The two SVG's are there
  • The page is definitely styled, but where is the CSS file loaded?

If you want to stop the dev server, you can enter Ctrl + C in the terminal.

HMR​

Organize your desktop so that a browser and VS Code are side by side. Make sure that the Vite dev server is running. Now edit the style.css to give the page a red background. You will see that the background of the page turns red immediately --without doing a full page refresh.- When you open up your Developer Tools and inspect the head element, you will experience that only the style tag changes when you change the background color.

Build it​

When you are done with your project, you can build it for production.

$ npm run build

> myproject@0.0.0 build
> vite build

vite v3.1.8 building for production...
✓ 6 modules transformed.
dist/assets/javascript.8dac5379.svg   0.97 KiB
dist/index.html                       0.42 KiB
dist/assets/index.2eccdaac.js         1.40 KiB / gzip: 0.73 KiB
dist/assets/index.d0964974.css        1.19 KiB / gzip: 0.62 KiB

The build process is done, and you can find the files in the dist folder.

Notice the following:

  • The vite.svg in the public directory isn't "transformed" by Vite, but it is present in the dist folder. (it is just copied over)
  • The other files have a hash in their name, this is to prevent caching issues.
  • The .js and .css files are minified.

Preview​

You can preview the production build by running the following command:

$ npm run preview

> myproject@0.0.0 preview
> vite preview

  ➜  Local:   http://127.0.0.1:4173/
  ➜  Network: use --host to expose

This opens up a new browser window with the production build. Instead of the inline CSS in the head, the minified CSS is loaded from a separate file. The same goes for the JavaScript.

Deployment on a subdirectory​

It is quite common for us to deploy something on a "nested public path" (aka subdirectory). By default, Vite assumes we are deploying on the root of a domain, so we can run into some issues when requiring assets.

To let Vite know the name of te subdirectory (structure), we can add a base property to the build argument in our package.json. See the documentation for more details.

{
 "scripts": {
  "build": "vite build --base=/my/public/path/"
 }
}
More
Copyright © 2024 Devine, Inc. Built with Docusaurus.
- + \ No newline at end of file